@actuate-media/cms-admin 0.72.2 → 0.73.0

package/src/views/post-editor/PostHeaderPanel.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { X } from 'lucide-react'
+import { InspectorExpandButton, ResizableAside } from '../../components/ui/ResizableAside.js'
 import { Toggle } from '../../components/ui/Toggle.js'
 import type { PostHeaderConfig } from '../../lib/post-editor-service.js'
 
@@ -27,24 +28,27 @@ const TOGGLES: Array<{ key: keyof PostHeaderConfig; label: string }> = [
 /** Inspector panel for the post header layout (template-level design config). */
 export function PostHeaderPanel({ header, canEdit, onClose, onChange }: PostHeaderPanelProps) {
   return (
-    <aside
+    <ResizableAside
       role="dialog"
       aria-label="Edit post header"
-      className="bg-card border-border flex h-full w-80 shrink-0 flex-col border-l"
+      className="bg-card border-border flex h-full flex-col border-l"
     >
       <div className="border-border flex items-center justify-between border-b px-4 py-3">
         <div className="min-w-0">
           <h2 className="text-foreground truncate text-sm font-medium">Post header</h2>
           <p className="text-muted-foreground text-xs">Layout for every post of this type</p>
         </div>
-        <button
-          type="button"
-          onClick={onClose}
-          aria-label="Close header panel"
-          className="text-muted-foreground hover:text-foreground hover:bg-accent rounded p-1"
-        >
-          <X className="h-4 w-4" aria-hidden />
-        </button>
+        <div className="flex shrink-0 items-center gap-0.5">
+          <InspectorExpandButton />
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close header panel"
+            className="text-muted-foreground hover:text-foreground hover:bg-accent flex h-9 w-9 items-center justify-center rounded-md md:h-7 md:w-7"
+          >
+            <X className="h-4 w-4" aria-hidden />
+          </button>
+        </div>
       </div>
 
       <div className="flex-1 space-y-6 overflow-y-auto p-4">
@@ -92,6 +96,6 @@ export function PostHeaderPanel({ header, canEdit, onClose, onChange }: PostHead
           })}
         </fieldset>
       </div>
-    </aside>
+    </ResizableAside>
   )
 }

package/src/views/post-editor/PostSectionEditor.tsx

@@ -301,6 +301,12 @@ export function PostSectionEditor({
     setSaveState('idle')
   }, [])
 
+  const handlePostBodyChange = useCallback((body: string) => {
+    setPost((prev) => (prev ? { ...prev, body } : prev))
+    setDirty(true)
+    setSaveState('idle')
+  }, [])
+
   // ─── Save / publish ──────────────────────────────────────────────────
   const handleSaveDraft = useCallback(async (): Promise<boolean> => {
     if (!post) return false
@@ -558,7 +564,7 @@ export function PostSectionEditor({
           />
         )}
 
-        <div className="flex flex-1 overflow-hidden">
+        <div className="relative flex flex-1 overflow-hidden">
           <SectionsPanel
             sections={post.sections}
             selectedId={selectedId}
@@ -603,6 +609,8 @@ export function PostSectionEditor({
               onSettingsChange={handleSettingsChange}
               onMetaChange={handleMetaChange}
               onToggleVisibility={() => handleToggleVisibility(selected.id)}
+              postBody={post.body}
+              onPostBodyChange={handlePostBodyChange}
             />
           )}
         </div>

package/src/views/post-editor/PostTemplateEditor.tsx

@@ -248,7 +248,7 @@ export function PostTemplateEditor({
           </div>
         </header>
 
-        <div className="flex flex-1 overflow-hidden">
+        <div className="relative flex flex-1 overflow-hidden">
           <SectionsPanel
             sections={template.sections}
             selectedId={selectedSectionId}