@prenta/admin 2.6.1 → 2.8.0

package/src/layout/Header.tsx

@@ -1,24 +1,36 @@
 'use client'
 
-import { useState, type ReactNode } from 'react'
-import { Search, User, ChevronDown, Menu, Sun, Moon } from 'lucide-react'
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type ReactNode,
+} from 'react'
+import { LogOut, Menu, Moon, Search, Settings, Sun, User } from 'lucide-react'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { adminPortalContainer } from '../lib/portal-container.js'
 import { CommandPalette } from '../components/CommandPalette.js'
 import { NotificationBell } from '../components/NotificationBell.js'
 import { useTheme } from '../components/ThemeProvider.js'
 import { LocaleSwitcher } from '../components/LocaleSwitcher.js'
-import { inputVariants } from '../components/ui/Input.js'
+import { TOPBAR_ICON_BUTTON } from './topbar-classes.js'
 
 export interface HeaderProps {
-  onToggleSidebar: () => void
+  /**
+   * Renders a menu button below 769px that opens the navigation drawer. Leave
+   * it out when the shell has its own opener: the admin's `Layout` does,
+   * because its mobile tab bar's More opens the drawer and the kit's mobile
+   * topbar has no menu button.
+   */
+  onToggleSidebar?: () => void
   session?: any
   onNavigate: (path: string) => void
   /**
-   * Page-specific actions rendered on the far right of the top bar
-   * (after the search input + utility icons). Used to surface
-   * dashboard-level primary actions like "+ New Post" / "View Site"
-   * without forcing every view to render its own header.
+   * Page-specific actions rendered on the right of the top bar, before the
+   * utility icons. Used to surface list-level primary actions like
+   * "+ New Post Type" without forcing every view to render its own header.
    *
    * The Layout decides what to pass here based on `currentPath`.
    * Keeping the slot on Header rather than per-view means the
@@ -30,6 +42,66 @@ export interface HeaderProps {
   onLogout?: () => void
 }
 
+/**
+ * Avatar initials: the first letters of the first and last words of the
+ * user's name ("Brandon West" → "BW"), else the first letter of the email.
+ */
+function userInitials(user: { name?: string | null; email?: string | null } | undefined): string {
+  const firstLetter = (word: string | undefined) =>
+    word ? (Array.from(word)[0] ?? '').toLocaleUpperCase() : ''
+  const words = user?.name?.trim().split(/\s+/).filter(Boolean) ?? []
+  if (words.length > 0) {
+    return firstLetter(words[0]) + (words.length > 1 ? firstLetter(words[words.length - 1]) : '')
+  }
+  return firstLetter(user?.email?.trim()) || 'A'
+}
+
+/**
+ * The search hint names the platform's own shortcut: ⌘K on Mac, iPhone and
+ * iPad (iPadOS reports "MacIntel"), Ctrl+K everywhere else. Both open the
+ * palette on every platform.
+ */
+type SearchHint = { kbd: string; name: string; keyshortcuts: string }
+const APPLE_HINT: SearchHint = {
+  kbd: '⌘K',
+  name: 'Search (Command K)',
+  keyshortcuts: 'Meta+K Control+K',
+}
+const CTRL_HINT: SearchHint = {
+  kbd: 'Ctrl+K',
+  name: 'Search (Ctrl+K)',
+  // Meta+K still opens the palette here, but Windows keeps Win+K for itself,
+  // so only Ctrl+K is advertised.
+  keyshortcuts: 'Control+K',
+}
+
+function platformHint(): SearchHint {
+  const nav = navigator as Navigator & { userAgentData?: { platform?: string } }
+  const platform = nav.userAgentData?.platform || nav.platform || nav.userAgent
+  return /mac|iphone|ipad|ipod/i.test(platform) ? APPLE_HINT : CTRL_HINT
+}
+
+const subscribeToNothing = () => () => {}
+
+/**
+ * `null` on the server and while hydrating, where the platform is unknown, so
+ * the server markup and the first client render agree; React then renders
+ * again with the browser's answer. A client-only mount gets it right away.
+ */
+function useSearchHint(): SearchHint | null {
+  return useSyncExternalStore(subscribeToNothing, platformHint, () => null)
+}
+
+// Radix focuses the item under the pointer or the arrow keys and marks it
+// `data-highlighted`; that state gets the kit's hover fill. Keyboard focus also
+// gets the admin's focus ring (responsive.css).
+const MENU_ITEM = 'rounded-7 flex cursor-pointer items-center gap-2 px-3 py-2 text-[13px]'
+const MENU_ITEM_DEFAULT = `${MENU_ITEM} text-txt data-[highlighted]:bg-acc-l data-[highlighted]:text-acc`
+
+/**
+ * The topbar (SHELL.md §1, §3): search trigger on the left; the page actions
+ * slot, then the dark-mode toggle, notifications and the avatar on the right.
+ */
 export function Header({
   onToggleSidebar,
   session,
@@ -38,157 +110,160 @@ export function Header({
   pageActions,
 }: HeaderProps) {
   const [showCommandPalette, setShowCommandPalette] = useState(false)
-  const [searchQuery, setSearchQuery] = useState('')
   const { resolvedTheme, setTheme } = useTheme()
+  const searchRef = useRef<HTMLButtonElement>(null)
+  // Where focus was when the palette opened (the search trigger, or wherever
+  // Ctrl/Cmd+K was pressed). The palette unmounts on close and focus would
+  // fall to <body>.
+  const openerRef = useRef<HTMLElement | null>(null)
+
+  const setPaletteOpen = useCallback((open: boolean) => {
+    if (open && !openerRef.current) {
+      openerRef.current = document.activeElement as HTMLElement | null
+    }
+    setShowCommandPalette(open)
+  }, [])
+
+  useEffect(() => {
+    if (showCommandPalette) return
+    const opener = openerRef.current
+    openerRef.current = null
+    const focusLost = document.activeElement === null || document.activeElement === document.body
+    if (opener && opener !== document.body && opener.isConnected && focusLost) opener.focus()
+  }, [showCommandPalette])
 
   const toggleTheme = () => {
     setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
   }
 
-  const initial =
-    session?.user?.name?.charAt(0)?.toUpperCase() ??
-    session?.user?.email?.charAt(0)?.toUpperCase() ??
-    'A'
+  const user = session?.user as { name?: string | null; email?: string | null } | undefined
+  const displayName = user?.name?.trim() || user?.email || 'Admin User'
+  const initials = userInitials(user)
+  const searchHint = useSearchHint()
 
   return (
     <>
-      <header className="border-sidebar-border bg-sidebar flex h-[var(--tbh)] items-center gap-3 border-b px-4">
-        <button
-          onClick={onToggleSidebar}
-          className="hover:bg-accent rounded-lg p-2 transition-colors md:hidden"
-          aria-label="Toggle sidebar"
-        >
-          <Menu className="text-foreground h-5 w-5" strokeWidth={2} />
-        </button>
-
-        {/* Search: takes available width on desktop so it visually anchors
-            the top bar like the reference design. */}
-        <div className="relative hidden flex-1 md:block">
-          <Search
-            className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
-            aria-hidden
-          />
-          <input
-            type="text"
-            placeholder="Search..."
-            aria-label="Search content"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            onFocus={() => setShowCommandPalette(true)}
-            onKeyDown={(e) => {
-              if (e.key === 'Escape') (e.target as HTMLInputElement).blur()
-            }}
-            className={inputVariants({
-              class:
-                'h-9 w-full max-w-md py-1.5 pr-14 pl-9 focus-visible:ring-0 focus-visible:ring-offset-0',
-            })}
-          />
-          {/* Keyboard hint pill. Hidden on narrow widths to avoid overlap. */}
-          <span
-            className="border-border bg-background text-muted-foreground pointer-events-none absolute top-1/2 right-2 hidden -translate-y-1/2 rounded border px-1.5 py-0.5 font-mono text-[10px] sm:inline-flex"
-            aria-hidden
+      <header className="bg-sb border-bdr tablet:px-3.5 mobile:gap-1.5 mobile:px-2.5 4k:px-7 flex h-[var(--tbh)] shrink-0 items-center gap-2.5 border-b px-5">
+        {onToggleSidebar ? (
+          <button
+            type="button"
+            onClick={onToggleSidebar}
+            className={`${TOPBAR_ICON_BUTTON} not-mobile:hidden`}
+            aria-label="Toggle sidebar"
           >
-            ⌘K
-          </span>
-        </div>
+            <Menu size={16} strokeWidth={1.75} aria-hidden />
+          </button>
+        ) : null}
 
-        {/* Mobile search trigger (icon-only). */}
+        {/* `.search-box`: a real button that opens the command palette. Below
+            769px it collapses to a 44px icon; the name stays. Its name and
+            hint wait for the platform (see useSearchHint). */}
         <button
-          onClick={() => setShowCommandPalette(true)}
-          className="hover:bg-accent rounded-lg p-2 transition-colors md:hidden"
-          aria-label="Search"
+          ref={searchRef}
+          type="button"
+          onClick={() => {
+            openerRef.current = searchRef.current
+            setPaletteOpen(true)
+          }}
+          aria-label={searchHint?.name ?? 'Search'}
+          aria-keyshortcuts={searchHint?.keyshortcuts ?? APPLE_HINT.keyshortcuts}
+          className="rounded-8 border-bdr bg-bg text-sub hover:border-acc-m prenta-touch-target wide:max-w-[360px] tablet:max-w-[220px] mobile:h-11 mobile:max-w-11 mobile:flex-[0_0_44px] mobile:justify-center mobile:p-0 4k:max-w-[440px] 4k:px-3.5 4k:py-[9px] 4k:text-[14px] flex max-w-[280px] min-w-0 flex-1 cursor-pointer items-center gap-2 border px-3 py-1.5 text-left text-[13px] leading-[normal]"
         >
-          <Search className="text-muted-foreground h-5 w-5" />
+          <Search size={14} strokeWidth={1.75} className="shrink-0" aria-hidden />
+          <span className="mobile:hidden truncate">Search…</span>
+          {searchHint ? (
+            <kbd className="border-bdr bg-card text-sub rounded-4 mobile:hidden ml-auto border px-[5px] py-px font-mono text-[10px] leading-[normal]">
+              {searchHint.kbd}
+            </kbd>
+          ) : null}
         </button>
 
-        <div className="ml-auto flex items-center gap-1.5">
-          <LocaleSwitcher />
+        <div className="ml-auto flex items-center gap-2.5">
+          {/* Page actions slot. Hidden below 769px, where narrow viewports
+              lack the room; pages can re-surface the same action in their
+              header there. */}
+          {pageActions ? (
+            <div className="border-bdr not-mobile:flex hidden items-center gap-2 border-r pr-2.5">
+              {pageActions}
+            </div>
+          ) : null}
 
-          <button
-            onClick={toggleTheme}
-            className="hover:bg-accent rounded-lg p-2 transition-colors"
-            aria-label={resolvedTheme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
-          >
-            {resolvedTheme === 'dark' ? (
-              <Sun className="text-muted-foreground h-5 w-5" />
-            ) : (
-              <Moon className="text-muted-foreground h-5 w-5" />
-            )}
-          </button>
+          <div className="flex items-center gap-[3px]">
+            <LocaleSwitcher />
 
-          {/* Real notification bell — replaces the previous inert decoration.
-              Renders its own dropdown panel, SSE-backed unread counter, and
-              click-to-mark-read flow. */}
-          <NotificationBell />
-
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger asChild>
-              <button
-                className="hover:bg-accent flex items-center gap-1.5 rounded-lg p-1 transition-colors"
-                aria-label="Account menu"
-              >
-                <div className="bg-primary flex h-8 w-8 items-center justify-center rounded-full">
-                  <span className="text-primary-foreground text-xs font-semibold">{initial}</span>
-                </div>
-                <ChevronDown
-                  className="text-muted-foreground hidden h-4 w-4 sm:block"
-                  aria-hidden
-                />
-              </button>
-            </DropdownMenu.Trigger>
-
-            <DropdownMenu.Portal container={adminPortalContainer()}>
-              <DropdownMenu.Content
-                className="bg-popover text-popover-foreground border-border z-50 min-w-[200px] rounded-lg border p-1 shadow-lg"
-                align="end"
-                sideOffset={5}
-              >
-                <div className="border-border border-b px-3 py-2">
-                  <p className="text-sm font-medium">{session?.user?.name ?? 'Admin User'}</p>
-                  <p className="text-muted-foreground text-xs">
-                    {session?.user?.email ?? 'admin@example.com'}
-                  </p>
-                </div>
-                <DropdownMenu.Item
-                  className="hover:bg-accent flex cursor-pointer items-center gap-2 rounded px-3 py-2 text-sm outline-none"
-                  onSelect={() => onNavigate('/profile')}
-                >
-                  <User className="h-4 w-4" />
-                  Profile
-                </DropdownMenu.Item>
-                <DropdownMenu.Item
-                  className="hover:bg-accent flex cursor-pointer items-center gap-2 rounded px-3 py-2 text-sm outline-none"
-                  onSelect={() => onNavigate('/settings')}
+            <button
+              type="button"
+              onClick={toggleTheme}
+              className={TOPBAR_ICON_BUTTON}
+              aria-label={resolvedTheme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+            >
+              {resolvedTheme === 'dark' ? (
+                <Sun size={16} strokeWidth={1.75} aria-hidden />
+              ) : (
+                <Moon size={16} strokeWidth={1.75} aria-hidden />
+              )}
+            </button>
+
+            {/* SSE-backed unread state; the kit's dot shows while anything
+                is unread. */}
+            <NotificationBell />
+
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger asChild>
+                <button
+                  type="button"
+                  aria-label="Account menu"
+                  title={displayName}
+                  className="bg-acc text-acc-on prenta-touch-hit relative ml-1 flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 p-0 text-[12px] leading-none font-bold [--touch-hit-block:-6px] [--touch-hit-inline:-6px]"
                 >
-                  Settings
-                </DropdownMenu.Item>
-                <DropdownMenu.Separator className="bg-border my-1 h-px" />
-                <DropdownMenu.Item
-                  className="text-destructive hover:bg-accent flex cursor-pointer items-center gap-2 rounded px-3 py-2 text-sm outline-none"
-                  onSelect={() => onLogout?.()}
+                  {initials}
+                </button>
+              </DropdownMenu.Trigger>
+
+              <DropdownMenu.Portal container={adminPortalContainer()}>
+                <DropdownMenu.Content
+                  className="rounded-10 border-bdr bg-card text-txt shadow-shd2 z-50 min-w-[200px] border p-1"
+                  align="end"
+                  sideOffset={6}
                 >
-                  Logout
-                </DropdownMenu.Item>
-              </DropdownMenu.Content>
-            </DropdownMenu.Portal>
-          </DropdownMenu.Root>
-
-          {/* Page actions slot — sits to the right of the utility icons so
-              the primary CTA is the rightmost element, mirroring the
-              reference. Hidden on mobile because narrow viewports lack the
-              room; pages can re-surface the same action in their hero
-              there. */}
-          {pageActions && (
-            <div className="border-border ml-2 hidden items-center gap-2 border-l pl-3 md:flex">
-              {pageActions}
-            </div>
-          )}
+                  <div className="border-bdr mb-1 border-b px-3 py-2">
+                    <p className="text-txt text-[13px] font-semibold">{displayName}</p>
+                    {user?.email && user.email !== displayName ? (
+                      <p className="text-sub text-[12px]">{user.email}</p>
+                    ) : null}
+                  </div>
+                  <DropdownMenu.Item
+                    className={MENU_ITEM_DEFAULT}
+                    onSelect={() => onNavigate('/profile')}
+                  >
+                    <User size={16} strokeWidth={1.75} aria-hidden />
+                    Profile
+                  </DropdownMenu.Item>
+                  <DropdownMenu.Item
+                    className={MENU_ITEM_DEFAULT}
+                    onSelect={() => onNavigate('/settings')}
+                  >
+                    <Settings size={16} strokeWidth={1.75} aria-hidden />
+                    Settings
+                  </DropdownMenu.Item>
+                  <DropdownMenu.Separator className="bg-bdr my-1 h-px" />
+                  <DropdownMenu.Item
+                    className={`${MENU_ITEM} text-err data-[highlighted]:bg-err-l`}
+                    onSelect={() => onLogout?.()}
+                  >
+                    <LogOut size={16} strokeWidth={1.75} aria-hidden />
+                    Logout
+                  </DropdownMenu.Item>
+                </DropdownMenu.Content>
+              </DropdownMenu.Portal>
+            </DropdownMenu.Root>
+          </div>
         </div>
       </header>
 
       <CommandPalette
         open={showCommandPalette}
-        onOpenChange={setShowCommandPalette}
+        onOpenChange={setPaletteOpen}
         onNavigate={onNavigate}
       />
     </>

package/src/layout/Layout.tsx

@@ -1,12 +1,14 @@
 'use client'
 
 import { useMemo, useState, useEffect, type ReactNode } from 'react'
-import { Plus } from 'lucide-react'
 import { Sidebar } from './Sidebar.js'
+import { MobileTabBar } from './MobileTabBar.js'
+import { useNavItems } from './use-nav-items.js'
+import { withSettingsTabs } from './nav-config.js'
 import { Header } from './Header.js'
-import { Breadcrumbs } from '../components/Breadcrumbs.js'
-import { AdminShell } from './primitives/AdminShell.js'
-import { Toaster } from 'sonner'
+import { AdminShell, DRAWER_ID } from './primitives/AdminShell.js'
+import { Toaster } from '../components/ui/Toaster.js'
+import { TIER_MEDIA } from '../lib/tiers.js'
 
 export interface LayoutProps {
   config: any
@@ -18,14 +20,16 @@ export interface LayoutProps {
 }
 
 /**
- * Layout — thin shell that wires Sidebar/Header/Breadcrumbs into the
+ * Layout — thin shell that wires Sidebar/Header into the
  * `<AdminShell>` primitive.
  *
  * `AdminShell` (in `./primitives/AdminShell.tsx`) owns the actual layout
  * algorithm (CSS Grid on desktop, fixed slide-in overlay on mobile,
  * JS-driven `matchMedia` breakpoint) so that every layout decision lives
- * in one place. Per-product chrome (Sidebar, Header, Breadcrumbs)
- * composes on top of it.
+ * in one place. Per-product chrome (Sidebar, Header) composes on top of it.
+ *
+ * There is no automatic breadcrumb bar: second-level screens pass an explicit
+ * `<Breadcrumb>` to their `PageHeader` (SHELL.md §4 "Breadcrumb rule").
  *
  * DO NOT re-implement layout logic in this file — extend `AdminShell`
  * instead. The previous flex + `fixed`↔`static` toggle caused recurring
@@ -39,43 +43,78 @@ export function Layout({
   onLogout,
   children,
 }: LayoutProps) {
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
+  const [manualCollapsed, setManualCollapsed] = useState(false)
+  const [rail, setRail] = useState(false)
+  const [mobile, setMobile] = useState(false)
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
+  // The mobile drawer always shows the full sidebar, labels and sub-groups.
+  const sidebarCollapsed = !mobile && (rail || manualCollapsed)
+  const navItems = useNavItems(config)
+  // The mobile drawer also lists the Settings tabs under Settings
+  // (CONFLICTS.md §2); wider screens keep Settings a single row.
+  const drawerItems = useMemo(
+    () => (mobile ? withSettingsTabs(navItems, config) : navItems),
+    [mobile, navItems, config],
+  )
+
+  // Kit tiers (SHELL.md §8): ≤768px mobile tab bar, 769–1024px icon rail.
+  // Half-open ranges (lib/tiers.ts), the same as the `mobile:`/`tablet:` CSS
+  // variants and AdminShell's `min-width: 769px`, so no fractional width
+  // (768.5px at a zoom level) falls between two tiers.
+  useEffect(() => {
+    const railMq = window.matchMedia(TIER_MEDIA.tablet)
+    const mobileMq = window.matchMedia(TIER_MEDIA.mobile)
+    const apply = () => {
+      setRail(railMq.matches)
+      setMobile(mobileMq.matches)
+    }
+    apply()
+    railMq.addEventListener('change', apply)
+    mobileMq.addEventListener('change', apply)
+    return () => {
+      railMq.removeEventListener('change', apply)
+      mobileMq.removeEventListener('change', apply)
+    }
+  }, [])
 
   useEffect(() => {
     setMobileSidebarOpen(false)
   }, [currentPath])
 
-  const pageActions = useMemo(
-    () => computePageActions({ currentPath, config, onNavigate }),
-    [currentPath, config, onNavigate],
-  )
-
   return (
     <>
-      <Toaster position="bottom-right" />
+      <Toaster aboveTabBar={mobile} />
       <AdminShell
+        desktopBreakpoint={769}
         mobileSidebarOpen={mobileSidebarOpen}
         onMobileSidebarClose={() => setMobileSidebarOpen(false)}
         sidebar={
           <Sidebar
             collapsed={sidebarCollapsed}
-            onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
+            onToggleCollapse={() => setManualCollapsed((value) => !value)}
             currentPath={currentPath}
             onNavigate={onNavigate}
             config={config}
+            items={drawerItems}
           />
         }
-        header={
-          <Header
-            onToggleSidebar={() => setMobileSidebarOpen(!mobileSidebarOpen)}
-            session={session}
+        tabBar={
+          <MobileTabBar
+            items={navItems}
+            currentPath={currentPath}
             onNavigate={onNavigate}
-            onLogout={onLogout}
-            pageActions={pageActions}
+            onMore={() => setMobileSidebarOpen((open) => !open)}
+            moreOpen={mobileSidebarOpen}
+            drawerId={DRAWER_ID}
           />
         }
-        breadcrumbs={<Breadcrumbs currentPath={currentPath} onNavigate={onNavigate} />}
+        header={
+          // No onToggleSidebar: below 769px the tab bar's More opens the
+          // drawer, and the kit's mobile topbar has no menu button. No
+          // pageActions either: every screen's create action sits in its own
+          // page header, as in the kit (Post Types' "New Post Type").
+          <Header session={session} onNavigate={onNavigate} onLogout={onLogout} />
+        }
       >
         {/* min-h-0 lets fill-height views (list tables, split panes) shrink and
             scroll internally instead of clipping under main's overflow-y-auto. */}
@@ -84,89 +123,3 @@ export function Layout({
     </>
   )
 }
-
-// ─── Page actions ────────────────────────────────────────────────────────────
-
-interface PageActionsContext {
-  currentPath: string
-  config: any
-  onNavigate: (path: string) => void
-}
-
-/**
- * Per-route primary actions that render on the right of the top bar.
- *
- * Centralised here so the top bar's actions row stays consistent
- * across view changes — no flicker on navigation, no per-view header
- * reimplementation. Views that need view-local actions (e.g. a
- * "Save draft" button on the post editor) continue to render them
- * inside their own hero; this slot is for the highest-level
- * primary/secondary pair that mirrors the reference dashboard.
- *
- * Resolution rules:
- *   - Dashboard / Posts / Pages → nothing here; those views render their
- *     hero CTAs inside the page header per the design
- *   - Other list views → just "+ New <Type>"
- *   - Editor views → no top-bar action (editor renders its own toolbar)
- */
-function computePageActions({
-  currentPath,
-  config,
-  onNavigate,
-}: PageActionsContext): ReactNode | null {
-  const collections = collectionList(config)
-
-  // Dashboard, /posts, and /pages render their own hero CTAs in the page
-  // header (design `.page-hdr` → `.hdr-r`), so the top bar stays empty there.
-  const isDashboard = currentPath === '/' || currentPath === '/dashboard'
-  if (isDashboard || currentPath === '/posts' || currentPath === '/pages') {
-    return null
-  }
-
-  if (currentPath === '/posts/types') {
-    return (
-      <button
-        type="button"
-        onClick={() => onNavigate('/posts/types/new')}
-        className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus:outline-none focus-visible:ring-2"
-      >
-        <Plus className="h-3.5 w-3.5" aria-hidden />
-        New Post Type
-      </button>
-    )
-  }
-
-  // List views — surface "+ New X" so authors can keep creating without
-  // hunting for a per-list button. Skip on editor views; those have their
-  // own toolbar.
-  for (const c of collections) {
-    if (currentPath === `/${c.slug}`) {
-      return (
-        <button
-          type="button"
-          onClick={() => onNavigate(`/${c.slug}/new`)}
-          className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus:outline-none focus-visible:ring-2"
-        >
-          <Plus className="h-3.5 w-3.5" aria-hidden />
-          New {c.labels?.singular ?? c.slug}
-        </button>
-      )
-    }
-  }
-
-  return null
-}
-
-interface CollectionMeta {
-  slug: string
-  type?: string
-  labels?: { singular?: string; plural?: string }
-  admin?: { hidden?: boolean }
-}
-
-function collectionList(config: any): CollectionMeta[] {
-  if (!config?.collections) return []
-  const raw = config.collections
-  const list: any[] = Array.isArray(raw) ? raw : Object.values(raw)
-  return list.filter((c) => !c?.admin?.hidden)
-}