@actuate-media/cms-admin 0.14.1 → 0.16.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,
@@ -19,10 +19,14 @@ import {
   PanelTop,
   PanelBottom,
   Layers,
+  LayoutGrid,
   Code2,
-  LayoutTemplate,
   Library,
   KeyRound,
+  ListTree,
+  Menu as MenuIcon,
+  PanelLeftClose,
+  PanelLeftOpen,
 } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 import { ActuateBrandLogo } from '../assets/actuate-logo.js'
@@ -48,11 +52,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} />
 }
@@ -65,6 +64,9 @@ const ICON_MAP: Record<string, LucideIcon> = {
   book: BookOpen,
   help: HelpCircle,
   newspaper: Newspaper,
+  navigation: ListTree,
+  menu: MenuIcon,
+  'list-tree': ListTree,
   PanelTop: PanelTop,
   PanelBottom: PanelBottom,
   Layers: Layers,
@@ -91,9 +93,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 +103,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 +111,54 @@ function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean })
   return <ActuateWordmark className="h-9" />
 }
 
-const defaultNavItems = [
+/**
+ * Children of the Posts parent. Same shape regardless of how many
+ * post-type collections are registered — Post Types are accessed via
+ * the `/posts/types` cards page, not as individual sidebar entries.
+ */
+const POSTS_CHILDREN: NavItem[] = [
+  { path: '/posts', label: 'All Posts', icon: FileText },
+  { path: '/posts/types', label: 'Post Types', icon: Layers },
+]
+
+/**
+ * Children of the Templates parent. Templates is its own top-level item
+ * (page building tools) — Saved Sections are reusable content blocks and
+ * Widgets are embeddable components. These are deliberately NOT children
+ * of Pages: Pages is content, Templates/Sections/Widgets are structure.
+ */
+const TEMPLATES_CHILDREN: NavItem[] = [
+  { path: '/saved-sections', label: 'Saved Sections', icon: Library },
+  { path: '/widgets', label: 'Widgets', icon: LayoutGrid },
+]
+
+/**
+ * Nav tree for the default (config-less) install. Dashboard sits on its
+ * own at the top, then a CONTENT group holding Pages (no children) above
+ * Posts (with All Posts + Post Types) and Templates (with Saved Sections
+ * + Widgets), followed by 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, so "CONTENT" renders once, above Pages.
+ */
+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, group: 'Content' },
+  { path: '/posts', label: 'Posts', icon: FileText, group: 'Content', children: POSTS_CHILDREN },
+  {
+    path: '/page-templates',
+    label: 'Templates',
+    icon: Layers,
+    group: 'Content',
+    children: TEMPLATES_CHILDREN,
+  },
+  { 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 +180,155 @@ 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 === '/'
+
+  // Special case: /posts is a prefix of /posts/types — without this
+  // guard, "All Posts" (/posts) would stay highlighted while the user
+  // is on /posts/types or /posts/types/new. Treat /posts as exact-only
+  // when a sibling /posts/* route exists.
+  if (itemPath === '/posts') {
+    return currentPath === '/posts' || currentPath === '/posts/new'
+  }
+
+  // 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
+    }
+
+    // Keys are namespaced because a parent and its first child can share
+    // the same path (e.g. the Posts parent and its "All Posts" child are
+    // both `/posts`). Using the raw path as the key collided and made
+    // React warn about — and risk dropping — duplicate siblings.
+    nodes.push(<NavLink key={`item:${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:${item.path}:${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 +339,50 @@ 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[]
 }
 
-function buildNavItems(config: any): 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.
+ */
+export 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 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]
+  // Treat `admin.group: 'Posts'` (case-insensitive) as a synonym for
+  // `type: 'post'` so consumers can tag arbitrary collections into
+  // the Posts area without changing the discriminator they already
+  // use elsewhere (sitemaps, schema.org, etc.).
+  const isPostsGroup = (c: any) =>
+    typeof c.admin?.group === 'string' && c.admin.group.toLowerCase() === 'posts'
+  const pages = visible.filter((c) => c.type === 'page' && !c.admin?.group)
+  const posts = visible.filter((c) => c.type === 'post' || isPostsGroup(c))
+  const otherUngrouped = visible.filter(
+    (c) => c.type !== 'page' && c.type !== 'post' && !c.admin?.group,
+  )
+  // Anything explicitly grouped that isn't a posts collection.
+  const grouped = visible.filter((c) => c.admin?.group && !isPostsGroup(c) && c.type !== 'post')
 
   const items: NavItem[] = [{ path: '/', label: 'Dashboard', icon: LayoutDashboard }]
 
-  for (const collection of sortedUngrouped) {
+  // Ungrouped collections that are neither page- nor post-type stay at
+  // the top level, directly under Dashboard, before the CONTENT group.
+  for (const collection of otherUngrouped) {
     items.push({
       label: collection.labels?.plural ?? collection.slug,
       path: `/${collection.slug}`,
@@ -248,34 +390,78 @@ function buildNavItems(config: any): NavItem[] {
     })
   }
 
-  const groups = new Map<string, typeof grouped>()
+  // CONTENT group. Everything below shares `group: 'Content'`, so the
+  // renderer emits the "CONTENT" header once — above Pages. Order:
+  // Pages → Posts → static content destinations (Media / Forms / SEO /
+  // Script Tags).
+
+  // Pages-style collections render as plain Content entries (no nested
+  // children). Saved Sections / Widgets now live under the dedicated
+  // Templates parent below, not under Pages.
+  pages.forEach((collection) => {
+    items.push({
+      label: collection.labels?.plural ?? collection.slug,
+      path: `/${collection.slug}`,
+      icon: resolveIcon(collection),
+      group: 'Content',
+    })
+  })
+
+  // Posts area — collapses every post-type collection under a single
+  // "Posts" parent. The aggregated table at /posts and the type cards
+  // at /posts/types are the entry points; individual post-type
+  // collections are not enumerated in the sidebar to avoid the
+  // duplicate-nav problem when a project has many types.
+  if (posts.length > 0) {
+    items.push({
+      path: '/posts',
+      label: 'Posts',
+      icon: FileText,
+      group: 'Content',
+      children: POSTS_CHILDREN,
+    })
+  }
+
+  // Templates — its own parent holding Saved Sections + Widgets (page
+  // building structure, distinct from Pages content).
+  items.push({
+    path: '/page-templates',
+    label: 'Templates',
+    icon: Layers,
+    group: 'Content',
+    children: TEMPLATES_CHILDREN,
+  })
+
+  // Standard Content destinations (always present — they map to CMS
+  // features, not collections).
+  items.push(
+    { 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' },
+  )
+
+  // Config-supplied custom groups land after the standard Content block
+  // and before Settings. Each renders under its own header.
+  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)
 
+  // Settings destinations — always last.
   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: '/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