fix(page-manager): improve form handling for hero title, datetime, and state management

- Prevent hero title auto-derivation when manually edited by tracking dirty state
- Fix datetime-local input handling with proper formatting and parsing
- Only include published_at when post is published and has a valid date
- Reset posts array when switching between different pages
- Fix slug state update order in form submission

Author: zerox80

src/components/page-manager/PageForm.jsx

@@ -50,6 +50,7 @@ const PageForm = ({ mode, initialData, onSubmit, onCancel, submitting }) => {
     }
     return initialData?.title ?? defaultHeroTitle
   })
+  const [heroTitleDirty, setHeroTitleDirty] = useState(false)
   const [error, setError] = useState(null)
   const formSanitizedSlug = useMemo(() => sanitizeSlug(slug), [slug])
   const slugHasInput = slug.trim().length > 0
@@ -69,9 +70,14 @@ const PageForm = ({ mode, initialData, onSubmit, onCancel, submitting }) => {
       const trimmedHeroTitle = heroTitle.trim()
       const trimmedSlug = slug.trim()
       const sanitizedSlug = sanitizeSlug(trimmedSlug)
-      if (trimmedHeroTitle) {
-        heroPayload.title = trimmedHeroTitle
-      } else if (!heroPayload.title) {
+      if (heroTitleDirty) {
+        if (trimmedHeroTitle) {
+          heroPayload.title = trimmedHeroTitle
+        } else {
+          delete heroPayload.title
+        }
+      }
+      if (!heroPayload.title) {
         heroPayload.title = trimmedTitle
       }
       if (!trimmedTitle) {
@@ -83,6 +89,7 @@ const PageForm = ({ mode, initialData, onSubmit, onCancel, submitting }) => {
       if (!isValidSlug(sanitizedSlug)) {
         throw new Error('Slug ist ungültig.')
       }
+      setSlug(sanitizedSlug)
       const payload = {
         title: trimmedTitle,
         slug: sanitizedSlug,
@@ -95,7 +102,6 @@ const PageForm = ({ mode, initialData, onSubmit, onCancel, submitting }) => {
         layout: parseJsonField(layout, 'Layout JSON'),
       }
       await onSubmit(payload)
-      setSlug(sanitizedSlug)
     } catch (err) {
       setError(err)
     }
@@ -202,6 +208,7 @@ const PageForm = ({ mode, initialData, onSubmit, onCancel, submitting }) => {
             onChange={(event) => {
               const { value } = event.target
               setHeroTitle(value)
+              setHeroTitleDirty(true)
               const trimmedValue = value.trim()
               setHero((currentHero) => {
                 try {
@@ -257,10 +264,12 @@ const PageForm = ({ mode, initialData, onSubmit, onCancel, submitting }) => {
                 setHero(value)
                 try {
                   const parsed = JSON.parse(value)
-                  const derivedTitle = normalizeTitle(parsed?.title ?? parsed, '').trim()
-                  setHeroTitle((previous) =>
-                    derivedTitle !== previous ? derivedTitle : previous,
-                  )
+                  if (!heroTitleDirty) {
+                    const derivedTitle = normalizeTitle(parsed?.title ?? parsed, '').trim()
+                    setHeroTitle((previous) =>
+                      derivedTitle !== previous ? derivedTitle : previous,
+                    )
+                  }
                 } catch (err) {
                 }
               }}

src/components/page-manager/PostForm.jsx

@@ -4,6 +4,30 @@ import { AlertCircle, FileText, RefreshCw, X } from 'lucide-react'
 import { sanitizeSlug, isValidSlug } from '../../utils/slug'
 import { sanitizeInteger } from './formUtils'
 
+const formatDateTimeLocal = (value) => {
+  if (!value) return ''
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    return ''
+  }
+  const pad = (unit) => String(unit).padStart(2, '0')
+  const year = date.getFullYear()
+  const month = pad(date.getMonth() + 1)
+  const day = pad(date.getDate())
+  const hours = pad(date.getHours())
+  const minutes = pad(date.getMinutes())
+  return `${year}-${month}-${day}T${hours}:${minutes}`
+}
+
+const parseDateTimeLocal = (value) => {
+  if (!value) return ''
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    return ''
+  }
+  return date.toISOString()
+}
+
 const PostForm = ({ mode, initialData, onSubmit, onCancel, submitting }) => {
   const [title, setTitle] = useState(initialData?.title ?? '')
   const [slug, setSlug] = useState(initialData?.slug ?? '')
@@ -13,6 +37,7 @@ const PostForm = ({ mode, initialData, onSubmit, onCancel, submitting }) => {
   const [isPublished, setIsPublished] = useState(Boolean(initialData?.is_published))
   const [publishedAt, setPublishedAt] = useState(initialData?.published_at ?? '')
   const [error, setError] = useState(null)
+  const publishedAtInputValue = useMemo(() => formatDateTimeLocal(publishedAt), [publishedAt])
   const sanitizedPostSlug = useMemo(() => sanitizeSlug(slug), [slug])
   const postSlugHasInput = slug.trim().length > 0
   const postSlugInvalid = postSlugHasInput && !sanitizedPostSlug
@@ -38,17 +63,17 @@ const PostForm = ({ mode, initialData, onSubmit, onCancel, submitting }) => {
       if (!isValidSlug(sanitizedSlug)) {
         throw new Error('Slug ist ungültig.')
       }
+      setSlug(sanitizedSlug)
       const payload = {
         title: title.trim(),
         slug: sanitizedSlug,
         excerpt: excerpt.trim() || null,
         content_markdown: content,
         order_index: sanitizeInteger(orderIndex),
         is_published: isPublished,
-        published_at: publishedAt.trim() ? publishedAt : null,
+        published_at: isPublished && publishedAt ? publishedAt : null,
       }
       await onSubmit(payload)
-      setSlug(sanitizedSlug)
     } catch (err) {
       setError(err)
     }
@@ -131,8 +156,8 @@ const PostForm = ({ mode, initialData, onSubmit, onCancel, submitting }) => {
             <input
               type="datetime-local"
               className="mt-1 w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-              value={publishedAt || ''}
-              onChange={(event) => setPublishedAt(event.target.value)}
+              value={publishedAtInputValue}
+              onChange={(event) => setPublishedAt(parseDateTimeLocal(event.target.value))}
               disabled={!isPublished}
             />
           </label>
@@ -162,7 +187,13 @@ const PostForm = ({ mode, initialData, onSubmit, onCancel, submitting }) => {
             type="checkbox"
             className="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-slate-600 dark:bg-slate-900"
             checked={isPublished}
-            onChange={(event) => setIsPublished(event.target.checked)}
+            onChange={(event) => {
+              const nextValue = event.target.checked
+              setIsPublished(nextValue)
+              if (!nextValue) {
+                setPublishedAt('')
+              }
+            }}
           />
           Veröffentlicht
         </label>

src/components/page-manager/hooks/usePageManagerState.js

@@ -17,6 +17,7 @@ const usePageManagerState = () => {
   const [postsLoading, setPostsLoading] = useState(false)
   const [postsError, setPostsError] = useState(null)
   const postsRequestRef = useRef(0)
+  const lastPostsPageIdRef = useRef(null)
   const [postFormMode, setPostFormMode] = useState(null)
   const [postFormData, setPostFormData] = useState(null)
   const [postFormSubmitting, setPostFormSubmitting] = useState(false)
@@ -105,6 +106,7 @@ const usePageManagerState = () => {
           postsAbortRef.current.abort()
           postsAbortRef.current = null
         }
+        lastPostsPageIdRef.current = null
         setPosts([])
         setPostsLoading(false)
         setPostsError(null)
@@ -115,6 +117,10 @@ const usePageManagerState = () => {
         postsAbortRef.current.abort()
       }
       postsAbortRef.current = controller
+      if (lastPostsPageIdRef.current !== pageId) {
+        setPosts([])
+      }
+      lastPostsPageIdRef.current = pageId
       const requestId = postsRequestRef.current + 1
       postsRequestRef.current = requestId
       setPostsLoading(true)