@actuate-media/cms-admin 0.14.1 → 0.15.0

package/src/layout/Sidebar.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type { ReactNode } from 'react'
 import {
   LayoutDashboard,
   FileText,
@@ -7,7 +8,6 @@ import {
   Image,
   Settings,
   ChevronLeft,
-  ChevronRight,
   ClipboardList,
   Users,
   Search as SearchIcon,
@@ -20,9 +20,10 @@ import {
   PanelBottom,
   Layers,
   Code2,
-  LayoutTemplate,
   Library,
   KeyRound,
+  PanelLeftClose,
+  PanelLeftOpen,
 } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 import { ActuateBrandLogo } from '../assets/actuate-logo.js'
@@ -48,11 +49,6 @@ function ActuateMark({ className }: { className?: string }) {
   )
 }
 
-/**
- * Full Actuate Media lockup. Inline SVG with a transparent background so it
- * sits naturally on whatever surface the sidebar uses (light or dark theme,
- * custom branding background, etc.).
- */
 function ActuateWordmark({ className }: { className?: string }) {
   return <ActuateBrandLogo className={className} />
 }
@@ -91,9 +87,7 @@ function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean })
           className="h-8 w-auto shrink-0 object-contain"
         />
         {brandName && (
-          <span className="text-sidebar-foreground truncate text-sm font-semibold">
-            {brandName}
-          </span>
+          <span className="text-sidebar-foreground truncate text-sm font-medium">{brandName}</span>
         )}
       </div>
     )
@@ -103,7 +97,7 @@ function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean })
     return (
       <div className="flex min-w-0 items-center gap-2.5">
         <ActuateMark className="h-7 w-7 shrink-0" />
-        <span className="text-sidebar-foreground truncate text-sm font-semibold">{brandName}</span>
+        <span className="text-sidebar-foreground truncate text-sm font-medium">{brandName}</span>
       </div>
     )
   }
@@ -111,16 +105,33 @@ function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean })
   return <ActuateWordmark className="h-9" />
 }
 
-const defaultNavItems = [
+/**
+ * Nav tree for the default (config-less) install. Mirrors the reference
+ * dashboard exactly: Dashboard / Posts / Pages (with Saved Sections +
+ * Templates as nested children), then a CONTENT group (Media / Forms /
+ * SEO / Script Tags), then a SETTINGS group (Users / API Keys /
+ * Settings). The group ordering is meaningful — the renderer emits a
+ * section header the first time it sees a new group.
+ */
+const defaultNavItems: NavItem[] = [
   { path: '/', label: 'Dashboard', icon: LayoutDashboard },
-  { path: '/pages', label: 'Pages', icon: File },
   { path: '/posts', label: 'Posts', icon: FileText },
-  { path: '/media', label: 'Media', icon: Image },
-  { path: '/forms', label: 'Forms', icon: ClipboardList },
-  { path: '/seo', label: 'SEO', icon: SearchIcon },
-  { path: '/users', label: 'Users', icon: Users },
-  { path: '/api-keys', label: 'API Keys', icon: KeyRound },
-  { path: '/settings', label: 'Settings', icon: Settings },
+  {
+    path: '/pages',
+    label: 'Pages',
+    icon: File,
+    children: [
+      { path: '/saved-sections', label: 'Saved Sections', icon: Library },
+      { path: '/page-templates', label: 'Templates', icon: Layers },
+    ],
+  },
+  { path: '/media', label: 'Media', icon: Image, group: 'Content' },
+  { path: '/forms', label: 'Forms', icon: ClipboardList, group: 'Content' },
+  { path: '/seo', label: 'SEO', icon: SearchIcon, group: 'Content' },
+  { path: '/script-tags', label: 'Script Tags', icon: Code2, group: 'Content' },
+  { path: '/users', label: 'Users', icon: Users, group: 'Settings' },
+  { path: '/api-keys', label: 'API Keys', icon: KeyRound, group: 'Settings' },
+  { path: '/settings', label: 'Settings', icon: Settings, group: 'Settings' },
 ]
 
 export interface SidebarProps {
@@ -142,73 +153,140 @@ export function Sidebar({
 
   return (
     <aside
-      className={`bg-sidebar border-sidebar-border h-full border-r transition-all duration-200 ${
+      className={`bg-sidebar border-sidebar-border flex h-full flex-col border-r transition-all duration-200 ${
         collapsed ? 'w-20' : 'w-64'
       }`}
     >
+      {/* Brand header — no toggle button here anymore; it now lives in the footer. */}
       <div
-        className={`border-sidebar-border flex h-14 items-center border-b px-4 ${
-          collapsed ? 'justify-center' : 'justify-between'
+        className={`border-sidebar-border flex h-14 shrink-0 items-center border-b px-4 ${
+          collapsed ? 'justify-center' : ''
         }`}
       >
-        {!collapsed && <BrandLogo config={config} collapsed={false} />}
-        {collapsed && <BrandLogo config={config} collapsed={true} />}
+        <BrandLogo config={config} collapsed={collapsed} />
+      </div>
+
+      <nav className="flex-1 space-y-1 overflow-y-auto p-3" aria-label="Primary">
+        {renderNavTree(navItems, { collapsed, currentPath, onNavigate })}
+      </nav>
+
+      {/* Footer collapse control. Sits at the bottom of the sidebar so it
+          mirrors the reference design and stays out of the way during
+          everyday nav. Hidden below md: the mobile sheet has its own
+          dismiss affordance in <AdminShell>. */}
+      <div className="border-sidebar-border hidden shrink-0 border-t p-3 md:block">
         <button
           onClick={onToggleCollapse}
-          className="hover:bg-sidebar-accent hidden shrink-0 rounded-lg p-2 transition-colors md:block"
+          className={`text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-foreground flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-colors ${
+            collapsed ? 'justify-center' : ''
+          }`}
           aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
         >
           {collapsed ? (
-            <ChevronRight className="text-sidebar-foreground h-4 w-4" />
+            <PanelLeftOpen className="h-4 w-4 shrink-0" aria-hidden />
           ) : (
-            <ChevronLeft className="text-sidebar-foreground h-4 w-4" />
+            <>
+              <PanelLeftClose className="h-4 w-4 shrink-0" aria-hidden />
+              <span className="font-medium">Collapse sidebar</span>
+            </>
           )}
         </button>
       </div>
-
-      <nav className="space-y-1 p-3">
-        {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 (
-            <div key={item.path}>
-              {showGroupLabel && !collapsed && (
-                <div className="px-3 pt-3 pb-1">
-                  <span className="text-sidebar-foreground/50 text-[10px] font-semibold tracking-wider uppercase">
-                    {item.group}
-                  </span>
-                </div>
-              )}
-              {showGroupLabel && collapsed && (
-                <div className="flex justify-center pt-2 pb-1">
-                  <span className="border-sidebar-foreground/20 w-4 border-t" />
-                </div>
-              )}
-              <button
-                onClick={() => onNavigate(item.path)}
-                className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors ${
-                  isActive
-                    ? 'bg-sidebar-accent text-sidebar-primary'
-                    : 'text-sidebar-foreground hover:bg-sidebar-accent'
-                } ${collapsed ? 'justify-center' : ''}`}
-                title={collapsed ? item.label : ''}
-              >
-                <Icon className="h-5 w-5 shrink-0" />
-                {!collapsed && <span className="text-sm font-medium">{item.label}</span>}
-              </button>
-            </div>
-          )
-        })}
-      </nav>
     </aside>
   )
 }
 
+// ─── Rendering ──────────────────────────────────────────────────────────────
+
+interface NavRenderContext {
+  collapsed: boolean
+  currentPath: string
+  onNavigate: (path: string) => void
+}
+
+function isPathActive(currentPath: string, itemPath: string): boolean {
+  if (itemPath === '/') return currentPath === '/'
+  // Use boundary match so /pages doesn't match /pages-something. Exact, or
+  // followed by a `/` separator.
+  return currentPath === itemPath || currentPath.startsWith(itemPath + '/')
+}
+
+function renderNavTree(items: NavItem[], ctx: NavRenderContext): ReactNode {
+  const nodes: ReactNode[] = []
+  let lastGroup: string | undefined = undefined
+
+  for (const item of items) {
+    if (item.group && item.group !== lastGroup) {
+      nodes.push(
+        ctx.collapsed ? (
+          <div key={`g-${item.group}`} className="flex justify-center pt-3 pb-1">
+            <span className="border-sidebar-foreground/20 w-4 border-t" aria-hidden />
+          </div>
+        ) : (
+          <div key={`g-${item.group}`} className="px-3 pt-4 pb-1">
+            <span className="text-sidebar-foreground/55 text-[10px] font-semibold tracking-wider uppercase">
+              {item.group}
+            </span>
+          </div>
+        ),
+      )
+      lastGroup = item.group
+    } else if (!item.group) {
+      lastGroup = undefined
+    }
+
+    nodes.push(<NavLink key={item.path} item={item} ctx={ctx} />)
+    if (item.children && item.children.length > 0 && !ctx.collapsed) {
+      for (const child of item.children) {
+        nodes.push(<NavLink key={child.path} item={child} ctx={ctx} nested />)
+      }
+    }
+  }
+
+  return nodes
+}
+
+function NavLink({
+  item,
+  ctx,
+  nested = false,
+}: {
+  item: NavItem
+  ctx: NavRenderContext
+  nested?: boolean
+}) {
+  const Icon = item.icon
+  const isActive = isPathActive(ctx.currentPath, item.path)
+
+  return (
+    <button
+      onClick={() => ctx.onNavigate(item.path)}
+      className={`flex w-full items-center gap-3 rounded-lg text-left transition-colors ${
+        nested ? 'py-1.5 pr-3 pl-9' : 'px-3 py-2.5'
+      } ${
+        isActive
+          ? 'bg-sidebar-accent text-sidebar-primary'
+          : 'text-sidebar-foreground hover:bg-sidebar-accent'
+      } ${ctx.collapsed ? 'justify-center px-3' : ''}`}
+      title={ctx.collapsed ? item.label : ''}
+      aria-current={isActive ? 'page' : undefined}
+    >
+      {!nested && <Icon className="h-5 w-5 shrink-0" aria-hidden />}
+      {nested && !ctx.collapsed && (
+        <Icon className="text-sidebar-foreground/60 h-4 w-4 shrink-0" aria-hidden />
+      )}
+      {!ctx.collapsed && (
+        <span className={`truncate font-medium ${nested ? 'text-[13px]' : 'text-sm'}`}>
+          {item.label}
+        </span>
+      )}
+    </button>
+  )
+}
+
+// ─── Config-driven nav builder ──────────────────────────────────────────────
+
 function resolveIcon(collection: any): LucideIcon {
   const mapped = collection.admin?.icon ? ICON_MAP[collection.admin.icon] : undefined
   if (mapped) return mapped
@@ -219,28 +297,42 @@ export interface NavItem {
   path: string
   label: string
   icon: LucideIcon
+  /**
+   * Section header. Items sharing the same `group` are grouped together
+   * under a header rendered on first encounter. Items without a `group`
+   * render at the top of the nav in document order.
+   */
   group?: string
+  /** Indented children rendered immediately after this item. */
+  children?: NavItem[]
 }
 
+/**
+ * Build the sidebar nav tree from the CMS config. If no collections are
+ * configured, returns the curated `defaultNavItems` tree. When
+ * collections ARE configured, page-type collections inherit the
+ * Pages / Saved Sections / Templates child block, and every static
+ * destination (Media, Forms, SEO, Script Tags, Users, API Keys,
+ * Settings) is anchored under the right Content / Settings group.
+ */
 function buildNavItems(config: any): NavItem[] {
   if (!config?.collections) return defaultNavItems
 
   const raw = config.collections
   const collectionsList: any[] = Array.isArray(raw) ? raw : Object.values(raw)
-
   const visible = collectionsList.filter((c) => !c.admin?.hidden)
 
-  const ungrouped = visible.filter((c) => !c.admin?.group)
+  const pages = visible.filter((c) => c.type === 'page' && !c.admin?.group)
+  const posts = visible.filter((c) => c.type === 'post' && !c.admin?.group)
+  const otherUngrouped = visible.filter(
+    (c) => c.type !== 'page' && c.type !== 'post' && !c.admin?.group,
+  )
   const grouped = visible.filter((c) => c.admin?.group)
 
-  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: NavItem[] = [{ path: '/', label: 'Dashboard', icon: LayoutDashboard }]
 
-  for (const collection of sortedUngrouped) {
+  // Posts-style collections come first (mirrors the reference layout).
+  for (const collection of posts) {
     items.push({
       label: collection.labels?.plural ?? collection.slug,
       path: `/${collection.slug}`,
@@ -248,34 +340,62 @@ function buildNavItems(config: any): NavItem[] {
     })
   }
 
-  const groups = new Map<string, typeof grouped>()
+  // Pages-style collections get the nested Saved Sections + Templates
+  // tree. We attach the children to the *first* page-type collection
+  // so we don't end up with three "Saved Sections" links if a project
+  // configures multiple page collections — admins editing custom
+  // page-style content still navigate to those secondary surfaces via
+  // the primary Pages parent.
+  pages.forEach((collection, idx) => {
+    const item: NavItem = {
+      label: collection.labels?.plural ?? collection.slug,
+      path: `/${collection.slug}`,
+      icon: resolveIcon(collection),
+    }
+    if (idx === 0) {
+      item.children = [
+        { path: '/saved-sections', label: 'Saved Sections', icon: Library },
+        { path: '/page-templates', label: 'Templates', icon: Layers },
+      ]
+    }
+    items.push(item)
+  })
+
+  for (const collection of otherUngrouped) {
+    items.push({
+      label: collection.labels?.plural ?? collection.slug,
+      path: `/${collection.slug}`,
+      icon: resolveIcon(collection),
+    })
+  }
+
+  // Config-supplied groups land before our standard Content/Settings
+  // groups so admin-defined sections take precedence.
+  const groupBuckets = new Map<string, NavItem[]>()
   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,
-      })
-    }
+    const bucket = groupBuckets.get(group) ?? []
+    bucket.push({
+      label: col.labels?.plural ?? col.slug,
+      path: `/${col.slug}`,
+      icon: resolveIcon(col),
+      group,
+    })
+    groupBuckets.set(group, bucket)
   }
+  for (const bucket of groupBuckets.values()) items.push(...bucket)
 
+  // Standard Content + Settings destinations. These are always
+  // present, regardless of which collections the admin configures,
+  // because they map to CMS features (not collections).
   items.push(
-    { path: '/page-builder/new', label: 'Page Builder', icon: LayoutTemplate, group: 'Pages' },
-    { path: '/saved-sections', label: 'Saved Sections', icon: Library, group: 'Pages' },
-    { path: '/page-templates', label: 'Templates', icon: Layers, group: 'Pages' },
-    { path: '/media', label: 'Media', icon: Image },
-    { path: '/forms', label: 'Forms', icon: ClipboardList },
-    { path: '/seo', label: 'SEO', icon: SearchIcon },
-    { path: '/script-tags', label: 'Script Tags', icon: Code2 },
-    { path: '/users', label: 'Users', icon: Users },
-    { path: '/api-keys', label: 'API Keys', icon: KeyRound },
-    { path: '/settings', label: 'Settings', icon: Settings },
+    { path: '/media', label: 'Media', icon: Image, group: 'Content' },
+    { path: '/forms', label: 'Forms', icon: ClipboardList, group: 'Content' },
+    { path: '/seo', label: 'SEO', icon: SearchIcon, group: 'Content' },
+    { path: '/script-tags', label: 'Script Tags', icon: Code2, group: 'Content' },
+    { path: '/users', label: 'Users', icon: Users, group: 'Settings' },
+    { path: '/api-keys', label: 'API Keys', icon: KeyRound, group: 'Settings' },
+    { path: '/settings', label: 'Settings', icon: Settings, group: 'Settings' },
   )
 
   return items