@actuate-media/cms-admin 0.72.3 → 0.73.0

package/src/views/page-editor/SectionInspector.tsx

@@ -19,6 +19,7 @@ import {
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
+import { InspectorExpandButton, ResizableAside } from '../../components/ui/ResizableAside.js'
 import { Toggle } from '../../components/ui/Toggle.js'
 import { RichTextField } from '../../fields/RichTextField.js'
 import type { PageSection } from '../../lib/page-editor-service.js'
@@ -46,6 +47,29 @@ interface SectionInspectorProps {
 const LABEL = 'text-foreground mb-1 block text-xs font-medium'
 const INPUT =
   'border-input bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
+const INSPECTOR_SHELL = 'bg-card border-border flex h-full flex-col border-l'
+
+function InspectorHeaderActions({
+  onClose,
+  closeLabel = 'Close inspector',
+}: {
+  onClose: () => void
+  closeLabel?: string
+}) {
+  return (
+    <div className="flex shrink-0 items-center gap-0.5">
+      <InspectorExpandButton />
+      <button
+        type="button"
+        onClick={onClose}
+        aria-label={closeLabel}
+        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>
+  )
+}
 
 export function SectionInspector({
   section,
@@ -80,24 +104,17 @@ export function SectionInspector({
   // editable controls, so the externally-managed content is never altered here.
   if (section.unmanaged) {
     return (
-      <aside
+      <ResizableAside
         role="dialog"
         aria-label={`${section.name} (read-only)`}
-        className="bg-card border-border flex h-full w-80 shrink-0 flex-col border-l"
+        className={INSPECTOR_SHELL}
       >
         <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">{section.name}</h2>
             <p className="text-muted-foreground text-xs">Managed outside the editor</p>
           </div>
-          <button
-            type="button"
-            onClick={onClose}
-            aria-label="Close inspector"
-            className="text-muted-foreground hover:text-foreground hover:bg-accent rounded p-1"
-          >
-            <X className="h-4 w-4" aria-hidden />
-          </button>
+          <InspectorHeaderActions onClose={onClose} />
         </div>
         <div className="flex-1 space-y-3 overflow-y-auto p-4">
           <div className="border-border bg-muted text-muted-foreground space-y-2 rounded-md border p-3 text-sm">
@@ -119,29 +136,18 @@ export function SectionInspector({
             </p>
           </div>
         </div>
-      </aside>
+      </ResizableAside>
     )
   }
 
   return (
-    <aside
-      role="dialog"
-      aria-label={`Edit ${section.name}`}
-      className="bg-card border-border flex h-full w-80 shrink-0 flex-col border-l"
-    >
+    <ResizableAside role="dialog" aria-label={`Edit ${section.name}`} className={INSPECTOR_SHELL}>
       <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">{section.name}</h2>
           <p className="text-muted-foreground text-xs">{def?.name ?? 'Section'}</p>
         </div>
-        <button
-          type="button"
-          onClick={onClose}
-          aria-label="Close inspector"
-          className="text-muted-foreground hover:text-foreground hover:bg-accent rounded p-1"
-        >
-          <X className="h-4 w-4" aria-hidden />
-        </button>
+        <InspectorHeaderActions onClose={onClose} />
       </div>
 
       <div className="flex-1 space-y-6 overflow-y-auto p-4">
@@ -316,7 +322,7 @@ export function SectionInspector({
           </div>
         </fieldset>
       </div>
-    </aside>
+    </ResizableAside>
   )
 }
 

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

@@ -564,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}

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}