@actuate-media/cms-admin 0.14.0 → 0.15.0

package/src/layout/Header.tsx

@@ -1,9 +1,10 @@
 'use client'
 
-import { useState } from 'react'
-import { Search, Bell, User, ChevronDown, Menu, Sun, Moon } from 'lucide-react'
+import { useState, type ReactNode } from 'react'
+import { Search, User, ChevronDown, Menu, Sun, Moon } from 'lucide-react'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { CommandPalette } from '../components/CommandPalette.js'
+import { NotificationBell } from '../components/NotificationBell.js'
 import { useTheme } from '../components/ThemeProvider.js'
 import { LocaleSwitcher } from '../components/LocaleSwitcher.js'
 
@@ -11,9 +12,21 @@ export interface HeaderProps {
   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.
+   *
+   * The Layout decides what to pass here based on `currentPath`.
+   * Keeping the slot on Header rather than per-view means the
+   * actions row stays consistent across navigation and never reflows
+   * on view-change.
+   */
+  pageActions?: ReactNode
 }
 
-export function Header({ onToggleSidebar, session, onNavigate }: HeaderProps) {
+export function Header({ onToggleSidebar, session, onNavigate, pageActions }: HeaderProps) {
   const [showCommandPalette, setShowCommandPalette] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
   const { resolvedTheme, setTheme } = useTheme()
@@ -22,9 +35,14 @@ export function Header({ onToggleSidebar, session, onNavigate }: HeaderProps) {
     setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
   }
 
+  const initial =
+    session?.user?.name?.charAt(0)?.toUpperCase() ??
+    session?.user?.email?.charAt(0)?.toUpperCase() ??
+    'A'
+
   return (
     <>
-      <header className="border-border bg-background flex h-14 items-center justify-between gap-4 border-b px-4">
+      <header className="border-border bg-background flex h-14 items-center gap-3 border-b px-4">
         <button
           onClick={onToggleSidebar}
           className="hover:bg-accent rounded-lg p-2 transition-colors md:hidden"
@@ -33,39 +51,50 @@ export function Header({ onToggleSidebar, session, onNavigate }: HeaderProps) {
           <Menu className="text-foreground h-5 w-5" strokeWidth={2} />
         </button>
 
-        <div className="flex items-center md:hidden">
-          <span className="text-foreground text-lg font-semibold">Actuate</span>
+        {/* 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="border-border bg-input-background text-foreground placeholder:text-muted-foreground focus:ring-ring h-9 w-full max-w-md rounded-lg border py-1.5 pr-14 pl-9 text-sm focus:border-transparent focus:ring-2 focus:outline-none"
+          />
+          {/* 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
+          >
+            ⌘K
+          </span>
         </div>
 
-        <div className="flex-1" />
-
-        <div className="flex items-center gap-2 sm:gap-3">
-          <div className="relative hidden md:block">
-            <Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
-            <input
-              type="text"
-              placeholder="Search... (⌘K)"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              onFocus={() => setShowCommandPalette(true)}
-              className="border-border bg-input-background text-foreground focus:ring-ring w-64 rounded-lg border py-1.5 pr-3 pl-9 text-sm focus:border-transparent focus:ring-2 focus:outline-none"
-            />
-          </div>
-
-          <button
-            onClick={() => setShowCommandPalette(true)}
-            className="hover:bg-accent rounded-lg p-2 transition-colors md:hidden"
-            aria-label="Search"
-          >
-            <Search className="text-muted-foreground h-5 w-5" />
-          </button>
+        {/* Mobile search trigger (icon-only). */}
+        <button
+          onClick={() => setShowCommandPalette(true)}
+          className="hover:bg-accent rounded-lg p-2 transition-colors md:hidden"
+          aria-label="Search"
+        >
+          <Search className="text-muted-foreground h-5 w-5" />
+        </button>
 
+        <div className="ml-auto flex items-center gap-1.5">
           <LocaleSwitcher />
 
           <button
             onClick={toggleTheme}
             className="hover:bg-accent rounded-lg p-2 transition-colors"
-            aria-label="Toggle theme"
+            aria-label={resolvedTheme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
           >
             {resolvedTheme === 'dark' ? (
               <Sun className="text-muted-foreground h-5 w-5" />
@@ -74,23 +103,24 @@ export function Header({ onToggleSidebar, session, onNavigate }: HeaderProps) {
             )}
           </button>
 
-          <button
-            className="hover:bg-accent relative rounded-lg p-2 transition-colors"
-            aria-label="Notifications"
-          >
-            <Bell className="text-muted-foreground h-5 w-5" />
-            <span className="bg-destructive absolute top-1.5 right-1.5 h-2 w-2 rounded-full" />
-          </button>
+          {/* 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-2 rounded-lg p-1.5 transition-colors">
+              <button
+                className="hover:bg-accent flex items-center gap-1.5 rounded-lg p-1 transition-colors"
+                aria-label="Account menu"
+              >
                 <div className="flex h-8 w-8 items-center justify-center rounded-full bg-linear-to-br from-blue-500 to-purple-600">
-                  <span className="text-sm font-medium text-white">
-                    {session?.user?.name?.charAt(0)?.toUpperCase() ?? 'A'}
-                  </span>
+                  <span className="text-sm font-medium text-white">{initial}</span>
                 </div>
-                <ChevronDown className="text-muted-foreground hidden h-4 w-4 sm:block" />
+                <ChevronDown
+                  className="text-muted-foreground hidden h-4 w-4 sm:block"
+                  aria-hidden
+                />
               </button>
             </DropdownMenu.Trigger>
 
@@ -106,7 +136,10 @@ export function Header({ onToggleSidebar, session, onNavigate }: HeaderProps) {
                     {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">
+                <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>
@@ -117,12 +150,26 @@ export function Header({ onToggleSidebar, session, onNavigate }: HeaderProps) {
                   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">
+                <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={() => onNavigate('/logout')}
+                >
                   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>
       </header>
 

package/src/layout/Layout.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useState, useEffect, type ReactNode } from 'react'
+import { useMemo, useState, useEffect, type ReactNode } from 'react'
+import { ExternalLink, Plus } from 'lucide-react'
 import { Sidebar } from './Sidebar.js'
 import { Header } from './Header.js'
 import { Breadcrumbs } from '../components/Breadcrumbs.js'
@@ -37,6 +38,11 @@ export function Layout({ config, session, currentPath, onNavigate, children }: L
     setMobileSidebarOpen(false)
   }, [currentPath])
 
+  const pageActions = useMemo(
+    () => computePageActions({ currentPath, config, onNavigate }),
+    [currentPath, config, onNavigate],
+  )
+
   return (
     <>
       <Toaster position="bottom-right" />
@@ -57,6 +63,7 @@ export function Layout({ config, session, currentPath, onNavigate, children }: L
             onToggleSidebar={() => setMobileSidebarOpen(!mobileSidebarOpen)}
             session={session}
             onNavigate={onNavigate}
+            pageActions={pageActions}
           />
         }
         breadcrumbs={<Breadcrumbs currentPath={currentPath} onNavigate={onNavigate} />}
@@ -66,3 +73,105 @@ export function Layout({ config, session, currentPath, onNavigate, children }: L
     </>
   )
 }
+
+// ─── 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 / home → "+ New Post" + "View Site"
+ *   - List views → just "+ New <Type>"
+ *   - Editor views → no top-bar action (editor renders its own toolbar)
+ */
+function computePageActions({
+  currentPath,
+  config,
+  onNavigate,
+}: PageActionsContext): ReactNode | null {
+  // Resolve the "primary" content collection (used for both the dashboard
+  // and any explicit /posts route). Prefer a real `posts` or `post`-type
+  // collection over the hard-coded slug so admin-managed CMS configs work.
+  const collections = collectionList(config)
+  const postsCol =
+    collections.find((c) => c.slug === 'posts' || c.type === 'post') ??
+    collections.find((c) => c.type === 'post')
+  const postsSlug = postsCol?.slug ?? 'posts'
+  const postsLabel = postsCol?.labels?.singular ?? 'Post'
+  const siteUrl: string | null = config?.site?.url ?? config?.seo?.siteUrl ?? null
+
+  const isDashboard = currentPath === '/' || currentPath === '/dashboard'
+
+  if (isDashboard) {
+    return (
+      <>
+        <button
+          type="button"
+          onClick={() => onNavigate(`/${postsSlug}/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 {postsLabel}
+        </button>
+        {siteUrl ? (
+          <a
+            href={siteUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="border-border bg-background text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors"
+          >
+            <ExternalLink className="h-3.5 w-3.5" aria-hidden />
+            View Site
+          </a>
+        ) : null}
+      </>
+    )
+  }
+
+  // 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)
+}