@actuate-media/cms-admin 0.21.0 → 0.21.1

package/src/layout/Sidebar.tsx

@@ -1,6 +1,8 @@
 'use client'
 
-import type { ReactNode } from 'react'
+import { useRef, useState, type ReactNode } from 'react'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { useTheme } from '../components/ThemeProvider.js'
 import {
   LayoutDashboard,
   FileText,
@@ -8,6 +10,7 @@ import {
   Image,
   Settings,
   ChevronLeft,
+  ChevronDown,
   ClipboardList,
   Search as SearchIcon,
   Briefcase,
@@ -271,36 +274,117 @@ function renderNavTree(items: NavItem[], ctx: NavRenderContext): ReactNode {
       lastGroup = undefined
     }
 
+    const hasChildren = !!item.children && item.children.length > 0
+
+    // Collapsed parents reveal their children in a hover/focus flyout instead
+    // of inline (there's no room for indented rows in the 80px rail).
+    if (hasChildren && ctx.collapsed) {
+      nodes.push(<CollapsedFlyout key={`flyout:${item.path}`} item={item} ctx={ctx} />)
+      continue
+    }
+
+    // Expanded parents with children render as a collapsible section
+    // (chevron toggle to contract/expand the submenu).
+    if (hasChildren) {
+      nodes.push(<NavSection key={`section:${item.path}`} item={item} ctx={ctx} />)
+      continue
+    }
+
     // 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
 }
 
+/**
+ * Expanded parent with a collapsible submenu. The label/icon navigates to the
+ * parent destination; a trailing chevron toggles the child list open/closed.
+ * Defaults to open, and auto-opens when the parent or one of its children is
+ * the active route so the current page is never hidden behind a collapsed
+ * section.
+ */
+function NavSection({ item, ctx }: { item: NavItem; ctx: NavRenderContext }) {
+  const Icon = item.icon
+  const isActive = isPathActive(ctx.currentPath, item.path)
+  const childActive = item.children!.some((c) => isPathActive(ctx.currentPath, c.path))
+  const [open, setOpen] = useState(true)
+  const childListId = `nav-section-${item.path.replace(/[^a-z0-9]+/gi, '-')}`
+
+  // Keep the active section visible: if the user is on this section's route
+  // (parent or child) it stays expanded regardless of the manual toggle.
+  const expanded = open || isActive || childActive
+
+  return (
+    <div>
+      <div
+        className={`flex items-center rounded-lg transition-colors ${
+          isActive
+            ? 'bg-sidebar-accent text-sidebar-primary'
+            : 'text-sidebar-foreground hover:bg-sidebar-accent'
+        }`}
+      >
+        <button
+          onClick={() => ctx.onNavigate(item.path)}
+          className="flex min-w-0 flex-1 items-center gap-3 rounded-lg py-2.5 pr-1 pl-3 text-left"
+          aria-current={isActive ? 'page' : undefined}
+        >
+          <Icon className="h-5 w-5 shrink-0" aria-hidden />
+          <span className="truncate text-sm font-medium">{item.label}</span>
+        </button>
+        <button
+          onClick={() => setOpen((v) => !v)}
+          className="text-sidebar-foreground/55 hover:text-sidebar-foreground mr-1 flex shrink-0 items-center rounded-md p-1.5 transition-colors"
+          aria-label={`${expanded ? 'Collapse' : 'Expand'} ${item.label}`}
+          aria-expanded={expanded}
+          aria-controls={childListId}
+        >
+          <ChevronDown
+            className={`h-4 w-4 transition-transform duration-200 ${expanded ? '' : '-rotate-90'}`}
+            aria-hidden
+          />
+        </button>
+      </div>
+
+      {/* Tight (gap-less) connector container so the vertical tree guides of
+          adjacent rows touch and read as one continuous line with curved
+          elbows into each child. */}
+      {expanded && (
+        <div id={childListId} className="relative">
+          {item.children!.map((child, i) => (
+            <NavLink
+              key={`child:${item.path}:${child.path}`}
+              item={child}
+              ctx={ctx}
+              nested
+              isLast={i === item.children!.length - 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
 function NavLink({
   item,
   ctx,
   nested = false,
+  isLast = false,
 }: {
   item: NavItem
   ctx: NavRenderContext
   nested?: boolean
+  /** Last child in its group — the elbow stops here (no continuation line). */
+  isLast?: boolean
 }) {
   const Icon = item.icon
   const isActive = isPathActive(ctx.currentPath, item.path)
 
-  return (
+  const button = (
     <button
       onClick={() => ctx.onNavigate(item.path)}
       className={`flex w-full items-center gap-3 rounded-lg text-left transition-colors ${
@@ -324,6 +408,137 @@ function NavLink({
       )}
     </button>
   )
+
+  if (!nested || ctx.collapsed) return button
+
+  // Curved-elbow tree connector (expanded only). The elbow draws the vertical
+  // run from the row top to its vertical center, curves at the bottom-left
+  // corner, then runs horizontally into the row. Non-last rows continue the
+  // vertical line to the row bottom so it meets the next sibling's elbow.
+  // The guide is centered (~21px) under the parent item's 20px icon.
+  return (
+    <div className="relative">
+      <span
+        aria-hidden
+        className="border-sidebar-border absolute top-0 left-[21px] h-1/2 w-[15px] rounded-bl-lg border-b border-l"
+      />
+      {!isLast && (
+        <span
+          aria-hidden
+          className="border-sidebar-border absolute top-1/2 bottom-0 left-[21px] border-l"
+        />
+      )}
+      {button}
+    </div>
+  )
+}
+
+/**
+ * Collapsed-rail parent: shows the icon button and, on hover or keyboard
+ * focus, a flyout listing the parent's children. Built on Radix
+ * DropdownMenu so the panel is portaled (escaping the nav's `overflow`
+ * clip), positioned, dismissable, and keyboard-navigable. Hover-opening is
+ * controlled manually; we suppress Radix's auto-focus when opened by pointer
+ * so hovering doesn't steal focus, while keyboard opening still moves focus
+ * into the menu.
+ */
+function CollapsedFlyout({ item, ctx }: { item: NavItem; ctx: NavRenderContext }) {
+  const Icon = item.icon
+  const isActive = isPathActive(ctx.currentPath, item.path)
+  const { resolvedTheme } = useTheme()
+  const [open, setOpen] = useState(false)
+  const openedByPointer = useRef(false)
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const cancelClose = () => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current)
+      closeTimer.current = null
+    }
+  }
+  const scheduleClose = () => {
+    cancelClose()
+    closeTimer.current = setTimeout(() => setOpen(false), 120)
+  }
+
+  return (
+    <DropdownMenu.Root
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) openedByPointer.current = false
+        setOpen(next)
+      }}
+      modal={false}
+    >
+      <div
+        onMouseEnter={() => {
+          openedByPointer.current = true
+          cancelClose()
+          setOpen(true)
+        }}
+        onMouseLeave={scheduleClose}
+      >
+        <DropdownMenu.Trigger asChild>
+          <button
+            onClick={() => ctx.onNavigate(item.path)}
+            className={`flex w-full items-center justify-center rounded-lg px-3 py-2.5 transition-colors ${
+              isActive
+                ? 'bg-sidebar-accent text-sidebar-primary'
+                : 'text-sidebar-foreground hover:bg-sidebar-accent'
+            }`}
+            aria-label={item.label}
+            title={item.label}
+            aria-current={isActive ? 'page' : undefined}
+          >
+            <Icon className="h-5 w-5 shrink-0" aria-hidden />
+          </button>
+        </DropdownMenu.Trigger>
+      </div>
+
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          side="right"
+          align="start"
+          sideOffset={10}
+          onMouseEnter={cancelClose}
+          onMouseLeave={scheduleClose}
+          onCloseAutoFocus={(e) => {
+            // After a pointer-driven open, don't yank focus back to the rail
+            // trigger (it would leave a stray focus ring once the cursor moves
+            // away). Keyboard-driven opens keep the default focus-return.
+            if (openedByPointer.current) e.preventDefault()
+          }}
+          // Radix portals to <body>, outside the `.actuate-admin` scope where
+          // the theme tokens (`--popover`, `--radius`, …) live — without the
+          // scope class the panel renders transparent with square corners.
+          // Re-assert the scope (and current dark state) on the panel itself so
+          // it inherits the tokens regardless of portal position.
+          className={`actuate-admin ${resolvedTheme === 'dark' ? 'dark' : ''} bg-popover text-popover-foreground border-border motion-safe:animate-in motion-safe:fade-in z-50 min-w-44 overflow-hidden rounded-lg border p-1 shadow-lg`}
+        >
+          <div className="text-muted-foreground border-border mb-1 border-b px-3 py-2 text-xs font-medium">
+            {item.label}
+          </div>
+          {item.children!.map((child) => {
+            const ChildIcon = child.icon
+            const childActive = isPathActive(ctx.currentPath, child.path)
+            return (
+              <DropdownMenu.Item
+                key={`flyout-item:${item.path}:${child.path}`}
+                onSelect={() => ctx.onNavigate(child.path)}
+                className={`data-highlighted:bg-accent hover:bg-accent flex cursor-pointer items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none select-none ${
+                  childActive ? 'text-primary' : 'text-foreground'
+                }`}
+                aria-current={childActive ? 'page' : undefined}
+              >
+                <ChildIcon className="text-muted-foreground h-4 w-4 shrink-0" aria-hidden />
+                <span className="truncate">{child.label}</span>
+              </DropdownMenu.Item>
+            )
+          })}
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  )
 }
 
 // ─── Config-driven nav builder ──────────────────────────────────────────────

package/src/views/Forms.tsx

@@ -106,7 +106,9 @@ export function Forms({ onNavigate }: FormsProps) {
               <div className="mb-3 flex items-center gap-4 text-sm text-gray-600">
                 <span className="flex items-center gap-1">
                   <FileText className="h-4 w-4" />
-                  {form.fields} fields
+                  {form.fieldCount ??
+                    (Array.isArray(form.fields) ? form.fields.length : form.fields)}{' '}
+                  fields
                 </span>
                 <span className="flex items-center gap-1">
                   <Send className="h-4 w-4" />