@actuate-media/cms-admin 0.3.0 → 0.4.0

package/src/layout/Sidebar.tsx

@@ -16,6 +16,9 @@ import {
   BookOpen,
   HelpCircle,
   Newspaper,
+  PanelTop,
+  PanelBottom,
+  Layers,
 } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 
@@ -53,6 +56,9 @@ const ICON_MAP: Record<string, LucideIcon> = {
   book: BookOpen,
   help: HelpCircle,
   newspaper: Newspaper,
+  PanelTop: PanelTop,
+  PanelBottom: PanelBottom,
+  Layers: Layers,
 };
 
 function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean }) {
@@ -143,28 +149,44 @@ export function Sidebar({ collapsed, onToggleCollapse, currentPath, onNavigate,
       </div>
 
       <nav className="p-3 space-y-1">
-        {navItems.map((item) => {
+        {navItems.map((item, idx) => {
           const Icon = item.icon;
           const isActive =
             currentPath === item.path ||
             (item.path !== '/' && currentPath.startsWith(item.path));
 
+          const prevGroup = idx > 0 ? navItems[idx - 1]?.group : undefined;
+          const showGroupLabel = item.group && item.group !== prevGroup;
+
           return (
-            <button
-              key={item.path}
-              onClick={() => onNavigate(item.path)}
-              className={`flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors w-full text-left ${
-                isActive
-                  ? 'bg-sidebar-accent text-sidebar-primary'
-                  : 'text-sidebar-foreground hover:bg-sidebar-accent'
-              } ${collapsed ? 'justify-center' : ''}`}
-              title={collapsed ? item.label : ''}
-            >
-              <Icon className="w-5 h-5 shrink-0" />
-              {!collapsed && (
-                <span className="text-sm font-medium">{item.label}</span>
+            <div key={item.path}>
+              {showGroupLabel && !collapsed && (
+                <div className="pt-3 pb-1 px-3">
+                  <span className="text-[10px] font-semibold uppercase tracking-wider text-sidebar-foreground/50">
+                    {item.group}
+                  </span>
+                </div>
+              )}
+              {showGroupLabel && collapsed && (
+                <div className="pt-2 pb-1 flex justify-center">
+                  <span className="w-4 border-t border-sidebar-foreground/20" />
+                </div>
               )}
-            </button>
+              <button
+                onClick={() => onNavigate(item.path)}
+                className={`flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors w-full text-left ${
+                  isActive
+                    ? 'bg-sidebar-accent text-sidebar-primary'
+                    : 'text-sidebar-foreground hover:bg-sidebar-accent'
+                } ${collapsed ? 'justify-center' : ''}`}
+                title={collapsed ? item.label : ''}
+              >
+                <Icon className="w-5 h-5 shrink-0" />
+                {!collapsed && (
+                  <span className="text-sm font-medium">{item.label}</span>
+                )}
+              </button>
+            </div>
           );
         })}
       </nav>
@@ -178,7 +200,14 @@ function resolveIcon(collection: any): LucideIcon {
   return collection.type === 'page' ? File : FileText;
 }
 
-function buildNavItems(config: any) {
+export interface NavItem {
+  path: string;
+  label: string;
+  icon: LucideIcon;
+  group?: string;
+}
+
+function buildNavItems(config: any): NavItem[] {
   if (!config?.collections) return defaultNavItems;
 
   const raw = config.collections;
@@ -186,17 +215,19 @@ function buildNavItems(config: any) {
 
   const visible = collectionsList.filter((c) => !c.admin?.hidden);
 
-  const pages = visible.filter((c) => c.type === 'page');
-  const posts = visible.filter((c) => c.type === 'post');
-  const other = visible.filter((c) => c.type !== 'page' && c.type !== 'post');
+  const ungrouped = visible.filter((c) => !c.admin?.group);
+  const grouped = visible.filter((c) => c.admin?.group);
 
-  const sorted = [...pages, ...posts, ...other];
+  const pages = ungrouped.filter((c) => c.type === 'page');
+  const posts = ungrouped.filter((c) => c.type === 'post');
+  const other = ungrouped.filter((c) => c.type !== 'page' && c.type !== 'post');
+  const sortedUngrouped = [...pages, ...posts, ...other];
 
-  const items: typeof defaultNavItems = [
+  const items: NavItem[] = [
     { path: '/', label: 'Dashboard', icon: LayoutDashboard },
   ];
 
-  for (const collection of sorted) {
+  for (const collection of sortedUngrouped) {
     items.push({
       label: collection.labels?.plural ?? collection.slug,
       path: `/${collection.slug}`,
@@ -204,6 +235,23 @@ function buildNavItems(config: any) {
     });
   }
 
+  const groups = new Map<string, typeof grouped>();
+  for (const col of grouped) {
+    const group = col.admin.group as string;
+    if (!groups.has(group)) groups.set(group, []);
+    groups.get(group)!.push(col);
+  }
+  for (const [groupName, cols] of groups) {
+    for (const collection of cols) {
+      items.push({
+        label: collection.labels?.plural ?? collection.slug,
+        path: `/${collection.slug}`,
+        icon: resolveIcon(collection),
+        group: groupName,
+      });
+    }
+  }
+
   items.push(
     { path: '/media', label: 'Media', icon: Image },
     { path: '/forms', label: 'Forms', icon: ClipboardList },

package/src/views/DocumentEdit.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 import { AlertTriangle, Eye, EyeOff, Save, Copy, Loader2, Clock } from 'lucide-react';
 import { toast } from 'sonner';
 import { FieldRenderer } from '../fields/FieldRenderer.js';
+import { RelationshipField } from '../fields/RelationshipField.js';
 import { Button } from '../components/ui/Button.js';
 import { Badge } from '../components/ui/Badge.js';
 import { LivePreview } from '../components/LivePreview.js';
@@ -26,6 +27,8 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
   const [initialValues, setInitialValues] = useState<Record<string, any>>({});
   const [seoData, setSeoData] = useState<SEOData>({});
   const [initialSeoData, setInitialSeoData] = useState<SEOData>({});
+  const [layoutAssignments, setLayoutAssignments] = useState<Record<string, string>>({});
+  const [initialLayoutAssignments, setInitialLayoutAssignments] = useState<Record<string, string>>({});
   const [saving, setSaving] = useState(false);
   const [loading, setLoading] = useState(!isNew);
   const [showPreview, setShowPreview] = useState(false);
@@ -38,6 +41,16 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
     ? collections.find((c: any) => c.slug === collectionSlug)
     : collections?.[collectionSlug];
 
+  const layoutConfig = config?.layout;
+  const layoutRegions: Array<{ name: string; collection: string; label: string }> = layoutConfig?.regions
+    ? Object.entries(layoutConfig.regions).map(([name, region]: [string, any]) => ({
+        name,
+        collection: region.collection,
+        label: region.label ?? name.charAt(0).toUpperCase() + name.slice(1),
+      }))
+    : [];
+  const hasLayout = layoutRegions.length > 0 && (collection?.type === 'page' || collection?.urlPrefix !== undefined);
+
   const previewUrl = collection?.admin?.preview ? collection.admin.preview({}) : undefined;
   const fields: any[] = collection?.fields
     ? (Array.isArray(collection.fields)
@@ -51,7 +64,8 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
     : `Edit ${values[useAsTitleField] ?? 'Document'}`;
 
   const isDirty = JSON.stringify(values) !== JSON.stringify(initialValues)
-    || JSON.stringify(seoData) !== JSON.stringify(initialSeoData);
+    || JSON.stringify(seoData) !== JSON.stringify(initialSeoData)
+    || JSON.stringify(layoutAssignments) !== JSON.stringify(initialLayoutAssignments);
 
   useEffect(() => {
     if (!isNew && documentId && !hasLoadedRef.current) {
@@ -95,6 +109,12 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
       }
       setSeoData(loadedSeo);
       setInitialSeoData(loadedSeo);
+
+      if (docData._layout && typeof docData._layout === 'object') {
+        const loaded = docData._layout as Record<string, string>;
+        setLayoutAssignments(loaded);
+        setInitialLayoutAssignments(loaded);
+      }
     } else if (res.error) {
       toast.error(`Failed to load document: ${res.error}`);
     }
@@ -107,7 +127,8 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
 
   async function handleSave() {
     setSaving(true);
-    const payload = { ...values, ...seoData };
+    const layoutPayload = Object.keys(layoutAssignments).length > 0 ? { _layout: layoutAssignments } : {};
+    const payload = { ...values, ...seoData, ...layoutPayload };
     try {
       if (isNew) {
         const res = await cmsApi<any>(`/collections/${collectionSlug}`, {
@@ -121,6 +142,7 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
           const newId = res.data?.id;
           setInitialValues(values);
           setInitialSeoData(seoData);
+          setInitialLayoutAssignments(layoutAssignments);
           if (newId && onNavigate) {
             onNavigate(`/${collectionSlug}/${newId}`);
           }
@@ -136,6 +158,7 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
           toast.success('Changes saved');
           setInitialValues(values);
           setInitialSeoData(seoData);
+          setInitialLayoutAssignments(layoutAssignments);
           if (res.data?.status) setDocStatus(res.data.status);
         }
       }
@@ -148,9 +171,10 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
   async function handlePublish() {
     if (isNew) return;
     setSaving(true);
+    const layoutPayload = Object.keys(layoutAssignments).length > 0 ? { _layout: layoutAssignments } : {};
     const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}`, {
       method: 'PUT',
-      body: JSON.stringify({ ...values, ...seoData, status: 'PUBLISHED' }),
+      body: JSON.stringify({ ...values, ...seoData, ...layoutPayload, status: 'PUBLISHED' }),
     });
     if (res.error) {
       toast.error(res.error);
@@ -159,6 +183,7 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
       setDocStatus('PUBLISHED');
       setInitialValues(values);
       setInitialSeoData(seoData);
+      setInitialLayoutAssignments(layoutAssignments);
     }
     setSaving(false);
   }
@@ -166,9 +191,10 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
   async function handleUnpublish() {
     if (isNew) return;
     setSaving(true);
+    const layoutPayload = Object.keys(layoutAssignments).length > 0 ? { _layout: layoutAssignments } : {};
     const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}`, {
       method: 'PUT',
-      body: JSON.stringify({ ...values, ...seoData, status: 'DRAFT' }),
+      body: JSON.stringify({ ...values, ...seoData, ...layoutPayload, status: 'DRAFT' }),
     });
     if (res.error) {
       toast.error(res.error);
@@ -177,6 +203,7 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
       setDocStatus('DRAFT');
       setInitialValues(values);
       setInitialSeoData(seoData);
+      setInitialLayoutAssignments(layoutAssignments);
     }
     setSaving(false);
   }
@@ -335,6 +362,57 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
                 onChange={setSeoData}
                 siteUrl={config?.siteUrl}
               />
+
+              {hasLayout && (
+                <div className="rounded-lg border border-[var(--border)] bg-[var(--card)] p-4">
+                  <h3 className="mb-1 font-semibold">Layout</h3>
+                  <p className="mb-4 text-xs text-[var(--muted-foreground)]">
+                    Assign header/footer variants. Child pages inherit from ancestors.
+                  </p>
+                  <div className="space-y-4">
+                    {layoutRegions.map((region) => (
+                      <div key={region.name}>
+                        <RelationshipField
+                          label={region.label}
+                          value={layoutAssignments[region.name] ?? ''}
+                          onChange={(val) => {
+                            setLayoutAssignments((prev) => {
+                              const next = { ...prev };
+                              if (val && typeof val === 'string') {
+                                next[region.name] = val;
+                              } else {
+                                delete next[region.name];
+                              }
+                              return next;
+                            });
+                          }}
+                          relationTo={region.collection}
+                          helpText={
+                            !layoutAssignments[region.name]
+                              ? 'Inheriting from parent page or site default'
+                              : undefined
+                          }
+                        />
+                        {layoutAssignments[region.name] && (
+                          <button
+                            type="button"
+                            onClick={() => {
+                              setLayoutAssignments((prev) => {
+                                const next = { ...prev };
+                                delete next[region.name];
+                                return next;
+                              });
+                            }}
+                            className="mt-1 text-xs text-[var(--primary)] hover:underline"
+                          >
+                            Clear override (inherit from parent)
+                          </button>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
             </div>
           </div>
           )}

package/src/views/Settings.tsx

@@ -1,18 +1,20 @@
 'use client';
 
 import * as Tabs from '@radix-ui/react-tabs';
-import { Bot, Eye, EyeOff, Image, FileCode2, BookOpen, Sparkles, MessageSquare, Languages, Loader2, AlertTriangle, Download, CheckCircle2, ArrowUpCircle, ExternalLink, RefreshCw, GitPullRequest } from 'lucide-react';
+import { Bot, Eye, EyeOff, Image, FileCode2, BookOpen, Sparkles, MessageSquare, Languages, Loader2, AlertTriangle, Download, CheckCircle2, ArrowUpCircle, ExternalLink, RefreshCw, GitPullRequest, Layers } from 'lucide-react';
 import { useState, useEffect } from 'react';
 import { toast } from 'sonner';
 import { useApiData } from '../lib/useApiData.js';
 import { cmsApi } from '../lib/api.js';
 import { useTheme } from '../components/ThemeProvider.js';
+import { RelationshipField } from '../fields/RelationshipField.js';
 
 export interface SettingsProps {
   onNavigate?: (path: string) => void;
+  config?: any;
 }
 
-export function Settings(_props: SettingsProps = {}) {
+export function Settings({ config, ..._props }: SettingsProps = {}) {
   const { data, loading, error, refetch } = useApiData<any>('/globals/settings');
 
   const [siteTitle, setSiteTitle] = useState('My CMS');
@@ -26,6 +28,18 @@ export function Settings(_props: SettingsProps = {}) {
   const [activeTab, setActiveTab] = useState('general');
   const [saving, setSaving] = useState(false);
 
+  // Layout defaults
+  const [defaultLayout, setDefaultLayout] = useState<Record<string, string>>({});
+  const layoutConfig = config?.layout;
+  const layoutRegions: Array<{ name: string; collection: string; label: string }> = layoutConfig?.regions
+    ? Object.entries(layoutConfig.regions).map(([name, region]: [string, any]) => ({
+        name,
+        collection: region.collection,
+        label: region.label ?? name.charAt(0).toUpperCase() + name.slice(1),
+      }))
+    : [];
+  const hasLayoutRegions = layoutRegions.length > 0;
+
   // AI settings
   const [aiProvider, setAiProvider] = useState('anthropic');
   const [aiApiKey, setAiApiKey] = useState('');
@@ -60,11 +74,15 @@ export function Settings(_props: SettingsProps = {}) {
       setAiWritingAssistant(data.aiWritingAssistant ?? true);
       setAiContentScoring(data.aiContentScoring ?? true);
       setAiTranslation(data.aiTranslation ?? false);
+      if (data.defaultLayout && typeof data.defaultLayout === 'object') {
+        setDefaultLayout(data.defaultLayout);
+      }
     }
   }, [data]);
 
   const handleSave = async () => {
     setSaving(true);
+    const layoutPayload = Object.keys(defaultLayout).length > 0 ? { defaultLayout } : {};
     const res = await cmsApi('/globals/settings', {
       method: 'PUT',
       body: JSON.stringify({
@@ -73,6 +91,7 @@ export function Settings(_props: SettingsProps = {}) {
         aiProvider, aiAltTags, aiMediaCategorize, aiMetaDescriptions,
         aiReadability, aiSchema, aiBrandVoice, aiWritingAssistant,
         aiContentScoring, aiTranslation,
+        ...layoutPayload,
       }),
     });
     setSaving(false);
@@ -112,6 +131,14 @@ export function Settings(_props: SettingsProps = {}) {
         <Tabs.List className="mb-4 flex gap-1 border-b border-gray-200 overflow-x-auto">
           <Tabs.Trigger value="general" className={tabTriggerClass}>General</Tabs.Trigger>
           <Tabs.Trigger value="appearance" className={tabTriggerClass}>Appearance</Tabs.Trigger>
+          {hasLayoutRegions && (
+            <Tabs.Trigger value="layout" className={tabTriggerClass}>
+              <span className="flex items-center gap-1.5">
+                <Layers className="w-4 h-4" />
+                Layout
+              </span>
+            </Tabs.Trigger>
+          )}
           <Tabs.Trigger value="security" className={tabTriggerClass}>Security</Tabs.Trigger>
           <Tabs.Trigger value="ai" className={tabTriggerClass}>
             <span className="flex items-center gap-1.5">
@@ -188,6 +215,56 @@ export function Settings(_props: SettingsProps = {}) {
           </div>
         </Tabs.Content>
 
+        {hasLayoutRegions && (
+          <Tabs.Content value="layout" className="space-y-4">
+            <div className="rounded-lg border border-gray-200 bg-white p-4">
+              <h3 className="mb-1 text-sm font-semibold text-gray-900">Default Layout Variants</h3>
+              <p className="mb-4 text-xs text-gray-500">
+                Select the default header, footer, and other layout variants used site-wide. Pages can override these individually or inherit from parent pages.
+              </p>
+              <div className="space-y-4">
+                {layoutRegions.map((region) => (
+                  <RelationshipField
+                    key={region.name}
+                    label={`Default ${region.label}`}
+                    value={defaultLayout[region.name] ?? ''}
+                    onChange={(val) => {
+                      setDefaultLayout((prev) => {
+                        const next = { ...prev };
+                        if (val && typeof val === 'string') {
+                          next[region.name] = val;
+                        } else {
+                          delete next[region.name];
+                        }
+                        return next;
+                      });
+                    }}
+                    relationTo={region.collection}
+                    helpText={`The ${region.label.toLowerCase()} variant used when no page in the ancestor chain specifies one`}
+                  />
+                ))}
+              </div>
+            </div>
+            <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
+              <h3 className="text-sm font-semibold text-gray-700 mb-2">How Layout Inheritance Works</h3>
+              <ul className="space-y-1.5 text-xs text-gray-600">
+                <li className="flex items-start gap-2">
+                  <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">1</span>
+                  <span>Each page can assign specific layout variants (header, footer, etc.) from the document editor.</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">2</span>
+                  <span>Child pages automatically inherit their parent&apos;s layout. For example, <code className="font-mono bg-gray-200 px-1 rounded">/hampton-roads/thank-you</code> inherits from <code className="font-mono bg-gray-200 px-1 rounded">/hampton-roads</code>.</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">3</span>
+                  <span>If no page in the ancestor chain sets a variant, the defaults configured above are used.</span>
+                </li>
+              </ul>
+            </div>
+          </Tabs.Content>
+        )}
+
         <Tabs.Content value="security" className="space-y-4">
           <div className="rounded-lg border border-gray-200 bg-white p-4">
             <h3 className="mb-4 text-sm font-semibold text-gray-900">Security Settings</h3>