@actuate-media/cms-admin 0.21.0 → 0.22.0

package/src/layout/Sidebar.tsx

@@ -1,6 +1,10 @@
 'use client'
 
-import type { ReactNode } from 'react'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { useTheme } from '../components/ThemeProvider.js'
+import { fetchFormsSidebarCounts } from '../lib/forms-service.js'
+import { onFormsChanged } from '../lib/forms-events.js'
 import {
   LayoutDashboard,
   FileText,
@@ -8,6 +12,7 @@ import {
   Image,
   Settings,
   ChevronLeft,
+  ChevronDown,
   ClipboardList,
   Search as SearchIcon,
   Briefcase,
@@ -172,7 +177,8 @@ export function Sidebar({
   onNavigate,
   config,
 }: SidebarProps) {
-  const navItems = buildNavItems(config)
+  const formsUnread = useFormsUnread()
+  const navItems = applyFormsBadge(buildNavItems(config), formsUnread)
 
   return (
     <aside
@@ -220,6 +226,45 @@ export function Sidebar({
   )
 }
 
+// ─── Dynamic Forms unread badge ───────────────────────────────────────────
+
+/**
+ * Live total of unread submissions across active forms, surfaced on the Forms
+ * nav item. Refreshes on mount and whenever a forms/entries mutation fires the
+ * shared event (mark read, archive, notify toggle, …). Best-effort: a failed
+ * fetch simply leaves the badge unset rather than surfacing an error in nav.
+ */
+function useFormsUnread(): number {
+  const [unread, setUnread] = useState(0)
+
+  useEffect(() => {
+    let active = true
+    const load = () => {
+      fetchFormsSidebarCounts()
+        .then((counts) => {
+          if (active) setUnread(counts.reduce((sum, c) => sum + (c.unread ?? 0), 0))
+        })
+        .catch(() => {
+          /* keep the last known value; nav must never break on a fetch error */
+        })
+    }
+    load()
+    const off = onFormsChanged(load)
+    return () => {
+      active = false
+      off()
+    }
+  }, [])
+
+  return unread
+}
+
+/** Return a copy of the nav tree with the live unread count on the Forms item. */
+function applyFormsBadge(items: NavItem[], unread: number): NavItem[] {
+  if (unread <= 0) return items
+  return items.map((item) => (item.path === '/forms' ? { ...item, badge: unread } : item))
+}
+
 // ─── Rendering ──────────────────────────────────────────────────────────────
 
 interface NavRenderContext {
@@ -271,36 +316,119 @@ 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 badge = item.badge && item.badge > 0 ? item.badge : 0
+
+  const button = (
     <button
       onClick={() => ctx.onNavigate(item.path)}
       className={`flex w-full items-center gap-3 rounded-lg text-left transition-colors ${
@@ -313,17 +441,165 @@ function NavLink({
       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 />
-      )}
+      <span className="relative flex shrink-0 items-center">
+        {!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 />
+        )}
+        {/* Collapsed rail: a dot signals unread without room for a number. */}
+        {ctx.collapsed && badge > 0 && (
+          <span
+            className="bg-destructive absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full"
+            aria-hidden
+          />
+        )}
+      </span>
       {!ctx.collapsed && (
         <span className={`truncate font-medium ${nested ? 'text-[13px]' : 'text-sm'}`}>
           {item.label}
         </span>
       )}
+      {!ctx.collapsed && badge > 0 && (
+        <span
+          className="bg-destructive text-destructive-foreground ml-auto inline-flex min-w-5 items-center justify-center rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums"
+          aria-label={`${badge} unread`}
+        >
+          {badge > 99 ? '99+' : badge}
+        </span>
+      )}
     </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 ──────────────────────────────────────────────
@@ -346,6 +622,11 @@ export interface NavItem {
   group?: string
   /** Indented children rendered immediately after this item. */
   children?: NavItem[]
+  /**
+   * Optional unread/notification count. Rendered as a red pill (expanded)
+   * or a dot (collapsed). Falsy / zero values render nothing.
+   */
+  badge?: number
 }
 
 /**

package/src/lib/forms-events.ts

@@ -0,0 +1,32 @@
+/**
+ * Forms event bus — a minimal pub/sub so views that mutate submission state
+ * (mark read/unread, star, archive) or form state (create, notify toggle,
+ * archive) can tell the sidebar to refresh its unread badges immediately,
+ * without threading a refresh callback through the whole component tree.
+ *
+ * Deliberately tiny and dependency-free: one event, synchronous fan-out,
+ * SSR-safe. Subscribers must unsubscribe on unmount via the returned
+ * disposer to avoid leaks.
+ */
+type Listener = () => void
+
+const listeners = new Set<Listener>()
+
+/** Subscribe to "forms data changed" notifications. Returns an unsubscribe fn. */
+export function onFormsChanged(listener: Listener): () => void {
+  listeners.add(listener)
+  return () => {
+    listeners.delete(listener)
+  }
+}
+
+/** Notify all subscribers that forms/submission counts may have changed. */
+export function emitFormsChanged(): void {
+  for (const listener of listeners) {
+    try {
+      listener()
+    } catch {
+      // A misbehaving subscriber must not break sibling subscribers.
+    }
+  }
+}

package/src/lib/forms-service.ts

@@ -0,0 +1,244 @@
+/**
+ * Forms service — typed client over the cms-core Forms REST endpoints.
+ *
+ * Every Forms admin component reads/writes through this module (never raw
+ * `cmsApi` / `fetch`), so the network contract lives in one place. Read
+ * fetchers re-surface `cmsApi`'s `{ error }` as a thrown error (so the
+ * resource hook can show error/retry UI); mutations return `{ error? }`.
+ *
+ * The endpoint paths here are the contract implemented by cms-core
+ * `packages/cms-core/src/api/handlers.ts` (PR 2). Domain types are re-used
+ * from `@actuate-media/cms-core` so the admin can never drift from the server.
+ */
+import { cmsApi } from './api.js'
+import type {
+  FormDefinition,
+  FormSchemaVersion,
+  FormField,
+  FormNotificationSettings,
+  FormEmbedSettings,
+  FormStatus,
+  FormStats,
+  FormsSidebarCount,
+  FetchFormsParams,
+} from '@actuate-media/cms-core'
+
+export type {
+  FormDefinition,
+  FormSchemaVersion,
+  FormField,
+  FormFieldType,
+  FormFieldOption,
+  FieldValidationRules,
+  FormNotificationSettings,
+  FormEmbedSettings,
+  FormStatus,
+  FormStats,
+  FormsSidebarCount,
+} from '@actuate-media/cms-core'
+
+/**
+ * `cmsApi` never throws — it returns `{ error, status }` on a network/HTTP
+ * failure. Read (GET) fetchers must re-surface that as a thrown error so the
+ * resource hook can distinguish "request failed" from "empty result".
+ */
+function throwIfError(res: { error?: string }): void {
+  if (res.error) throw new Error(res.error)
+}
+
+/**
+ * A form as returned by `GET /forms` — the typed definition plus the legacy
+ * numeric aliases the list endpoint adds for backward compatibility.
+ */
+export interface FormListItem extends FormDefinition {
+  /** `fields.length` precomputed by the server. */
+  fieldCount?: number
+  /** Alias of `totalEntries`. */
+  submissions?: number
+}
+
+export interface FormSchemaResult {
+  fields: FormField[]
+  activeVersionId: string | null
+  versions: FormSchemaVersion[]
+}
+
+// ─── Forms list / stats / sidebar ────────────────────────────────────────
+
+function buildFormsQuery(params: FetchFormsParams): string {
+  const qs = new URLSearchParams()
+  if (params.search) qs.set('search', params.search)
+  if (params.status) qs.set('status', params.status)
+  if (typeof params.notifyEnabled === 'boolean') {
+    qs.set('notifyEnabled', String(params.notifyEnabled))
+  }
+  if (params.sortBy) qs.set('sortBy', params.sortBy)
+  if (params.sortDirection) qs.set('sortDirection', params.sortDirection)
+  if (params.page) qs.set('page', String(params.page))
+  if (params.pageSize) qs.set('pageSize', String(params.pageSize))
+  const str = qs.toString()
+  return str ? `?${str}` : ''
+}
+
+export async function fetchForms(params: FetchFormsParams = {}): Promise<FormListItem[]> {
+  const res = await cmsApi<FormListItem[]>(`/forms${buildFormsQuery(params)}`)
+  throwIfError(res)
+  return res.data ?? []
+}
+
+export async function fetchFormById(id: string): Promise<FormDefinition | null> {
+  const res = await cmsApi<FormDefinition>(`/forms/${encodeURIComponent(id)}`)
+  throwIfError(res)
+  return res.data ?? null
+}
+
+const EMPTY_STATS: FormStats = {
+  totalForms: 0,
+  activeForms: 0,
+  totalEntries: 0,
+  unreadEntries: 0,
+}
+
+export async function fetchFormStats(): Promise<FormStats> {
+  const res = await cmsApi<FormStats>('/forms/stats')
+  throwIfError(res)
+  return res.data ?? EMPTY_STATS
+}
+
+export async function fetchFormsSidebarCounts(): Promise<FormsSidebarCount[]> {
+  const res = await cmsApi<FormsSidebarCount[]>('/forms/sidebar-counts')
+  throwIfError(res)
+  return res.data ?? []
+}
+
+// ─── Form mutations ──────────────────────────────────────────────────────
+
+export interface CreateFormPayload {
+  name: string
+  slug?: string
+  description?: string
+  status?: FormStatus
+  template?: string
+  fields?: FormField[]
+}
+
+export async function createForm(
+  payload: CreateFormPayload,
+): Promise<{ data?: FormDefinition; error?: string }> {
+  const res = await cmsApi<FormDefinition>('/forms', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  })
+  return { data: res.data, error: res.error }
+}
+
+export async function updateForm(
+  id: string,
+  payload: Partial<Pick<FormDefinition, 'name' | 'slug' | 'description' | 'status'>>,
+): Promise<{ data?: FormDefinition; error?: string }> {
+  const res = await cmsApi<FormDefinition>(`/forms/${encodeURIComponent(id)}`, {
+    method: 'PATCH',
+    body: JSON.stringify(payload),
+  })
+  return { data: res.data, error: res.error }
+}
+
+export async function duplicateForm(
+  id: string,
+): Promise<{ data?: FormDefinition; error?: string }> {
+  const res = await cmsApi<FormDefinition>(`/forms/${encodeURIComponent(id)}/duplicate`, {
+    method: 'POST',
+  })
+  return { data: res.data, error: res.error }
+}
+
+/** Move a form to the archived state (hidden from embed pickers, no new submissions). */
+export async function archiveForm(id: string): Promise<{ error?: string }> {
+  return updateForm(id, { status: 'archived' })
+}
+
+/** Restore an archived form back to draft. */
+export async function restoreForm(id: string): Promise<{ error?: string }> {
+  return updateForm(id, { status: 'draft' })
+}
+
+export async function deleteForm(
+  id: string,
+  opts: { force?: boolean } = {},
+): Promise<{ error?: string }> {
+  const qs = opts.force ? '?force=true' : ''
+  const res = await cmsApi(`/forms/${encodeURIComponent(id)}${qs}`, { method: 'DELETE' })
+  return { error: res.error }
+}
+
+// ─── Schema ──────────────────────────────────────────────────────────────
+
+export async function fetchFormSchema(id: string): Promise<FormSchemaResult> {
+  const res = await cmsApi<FormSchemaResult>(`/forms/${encodeURIComponent(id)}/schema`)
+  throwIfError(res)
+  return res.data ?? { fields: [], activeVersionId: null, versions: [] }
+}
+
+export async function saveFormSchema(
+  id: string,
+  fields: FormField[],
+  notes?: string,
+): Promise<{ data?: { form: FormDefinition; version: FormSchemaVersion }; error?: string }> {
+  const res = await cmsApi<{ form: FormDefinition; version: FormSchemaVersion }>(
+    `/forms/${encodeURIComponent(id)}/schema`,
+    { method: 'PUT', body: JSON.stringify({ fields, notes }) },
+  )
+  return { data: res.data, error: res.error }
+}
+
+// ─── Notifications ─────────────────────────────────────────────────────────
+
+export async function fetchNotificationSettings(id: string): Promise<FormNotificationSettings> {
+  const res = await cmsApi<FormNotificationSettings>(
+    `/forms/${encodeURIComponent(id)}/notifications`,
+  )
+  throwIfError(res)
+  return res.data ?? { enabled: false, recipients: [] }
+}
+
+export async function updateNotificationSettings(
+  id: string,
+  payload: Partial<FormNotificationSettings>,
+): Promise<{ data?: FormNotificationSettings; error?: string }> {
+  const res = await cmsApi<FormNotificationSettings>(
+    `/forms/${encodeURIComponent(id)}/notifications`,
+    { method: 'PUT', body: JSON.stringify(payload) },
+  )
+  return { data: res.data, error: res.error }
+}
+
+/** Lightweight notify on/off toggle used by the forms-list switch. */
+export async function setNotifyEnabled(
+  id: string,
+  enabled: boolean,
+): Promise<{ data?: { notifyEnabled: boolean }; error?: string }> {
+  const res = await cmsApi<{ notifyEnabled: boolean }>(`/forms/${encodeURIComponent(id)}/notify`, {
+    method: 'PUT',
+    body: JSON.stringify({ enabled }),
+  })
+  return { data: res.data, error: res.error }
+}
+
+// ─── Embed ───────────────────────────────────────────────────────────────
+
+export async function fetchEmbedSettings(id: string): Promise<FormEmbedSettings> {
+  const res = await cmsApi<FormEmbedSettings>(`/forms/${encodeURIComponent(id)}/embed`)
+  throwIfError(res)
+  return res.data ?? {}
+}
+
+export async function updateEmbedSettings(
+  id: string,
+  payload: Partial<FormEmbedSettings>,
+): Promise<{ data?: FormEmbedSettings; error?: string }> {
+  const res = await cmsApi<FormEmbedSettings>(`/forms/${encodeURIComponent(id)}/embed`, {
+    method: 'PUT',
+    body: JSON.stringify(payload),
+  })
+  return { data: res.data, error: res.error }
+}