@actuate-media/cms-admin 0.14.1 → 0.16.0

package/src/components/posts/badges.tsx

@@ -0,0 +1,170 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { PostStatus } from '../../lib/posts-service.js'
+
+/**
+ * Shared status / type / SEO indicators for the Posts admin area.
+ *
+ * Colors are restricted to the theme tokens already used elsewhere in
+ * the admin (`success`, `warning`, `destructive`, `primary`, `muted`)
+ * plus a small named-color palette (`purple`, `green`, `orange`, ...)
+ * that maps to fixed Tailwind utilities. This keeps the badges working
+ * in both light and dark mode and avoids leaking `bg-[#...]` arbitrary
+ * values into components.
+ */
+
+// ─── Named color palette ─────────────────────────────────────────────
+
+const PALETTE: Record<string, { bg: string; text: string; ring: string; border: string }> = {
+  purple: {
+    bg: 'bg-violet-50 dark:bg-violet-950/40',
+    text: 'text-violet-700 dark:text-violet-300',
+    ring: 'ring-violet-200 dark:ring-violet-900',
+    border: 'border-violet-500',
+  },
+  green: {
+    bg: 'bg-emerald-50 dark:bg-emerald-950/40',
+    text: 'text-emerald-700 dark:text-emerald-300',
+    ring: 'ring-emerald-200 dark:ring-emerald-900',
+    border: 'border-emerald-500',
+  },
+  orange: {
+    bg: 'bg-amber-50 dark:bg-amber-950/40',
+    text: 'text-amber-700 dark:text-amber-300',
+    ring: 'ring-amber-200 dark:ring-amber-900',
+    border: 'border-amber-500',
+  },
+  red: {
+    bg: 'bg-red-50 dark:bg-red-950/40',
+    text: 'text-red-700 dark:text-red-300',
+    ring: 'ring-red-200 dark:ring-red-900',
+    border: 'border-red-500',
+  },
+  blue: {
+    bg: 'bg-blue-50 dark:bg-blue-950/40',
+    text: 'text-blue-700 dark:text-blue-300',
+    ring: 'ring-blue-200 dark:ring-blue-900',
+    border: 'border-blue-500',
+  },
+  pink: {
+    bg: 'bg-pink-50 dark:bg-pink-950/40',
+    text: 'text-pink-700 dark:text-pink-300',
+    ring: 'ring-pink-200 dark:ring-pink-900',
+    border: 'border-pink-500',
+  },
+  gray: {
+    bg: 'bg-muted',
+    text: 'text-muted-foreground',
+    ring: 'ring-border',
+    border: 'border-border',
+  },
+}
+
+export function paletteFor(color: string | null | undefined) {
+  if (!color) return PALETTE.gray!
+  return PALETTE[color] ?? PALETTE.gray!
+}
+
+// ─── PostStatusBadge ─────────────────────────────────────────────────
+
+const STATUS_LABEL: Record<PostStatus, string> = {
+  PUBLISHED: 'Published',
+  DRAFT: 'Draft',
+  SCHEDULED: 'Scheduled',
+  ARCHIVED: 'Archived',
+}
+
+const STATUS_PALETTE: Record<PostStatus, string> = {
+  PUBLISHED: 'green',
+  DRAFT: 'gray',
+  SCHEDULED: 'orange',
+  ARCHIVED: 'gray',
+}
+
+const STATUS_GLYPH: Record<PostStatus, string> = {
+  PUBLISHED: '●',
+  DRAFT: '○',
+  SCHEDULED: '◐',
+  ARCHIVED: '◌',
+}
+
+export function PostStatusBadge({ status }: { status: PostStatus }) {
+  const p = paletteFor(STATUS_PALETTE[status])
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium ${p.bg} ${p.text}`}
+      aria-label={`Status: ${STATUS_LABEL[status]}`}
+    >
+      <span aria-hidden className="text-[10px] leading-none">
+        {STATUS_GLYPH[status]}
+      </span>
+      {STATUS_LABEL[status]}
+    </span>
+  )
+}
+
+// ─── PostTypeBadge ───────────────────────────────────────────────────
+
+export function PostTypeBadge({
+  label,
+  color,
+  onClick,
+}: {
+  label: string
+  color: string | null
+  onClick?: () => void
+}): ReactNode {
+  const p = paletteFor(color)
+  const className = `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${p.bg} ${p.text}`
+  if (onClick) {
+    return (
+      <button type="button" onClick={onClick} className={`${className} hover:opacity-80`}>
+        {label}
+      </button>
+    )
+  }
+  return <span className={className}>{label}</span>
+}
+
+// ─── SeoScoreIndicator ───────────────────────────────────────────────
+
+/**
+ * Returns the palette key for an SEO score so callers can match the
+ * colored dot. 80+ green, 60–79 orange, 1–59 red, missing = gray.
+ */
+export function seoScorePalette(score: number | null): string {
+  if (score === null || Number.isNaN(score)) return 'gray'
+  if (score >= 80) return 'green'
+  if (score >= 60) return 'orange'
+  if (score >= 1) return 'red'
+  return 'gray'
+}
+
+export function SeoScoreIndicator({ score }: { score: number | null }) {
+  const colorKey = seoScorePalette(score)
+  const p = paletteFor(colorKey)
+  if (score === null) {
+    return (
+      <span className="text-muted-foreground inline-flex items-center gap-1.5 text-xs">
+        <span aria-hidden className={`h-2 w-2 rounded-full ${p.bg.split(' ')[0]}`} />
+        <span className="tabular-nums">—</span>
+      </span>
+    )
+  }
+  return (
+    <span className="text-foreground inline-flex items-center gap-1.5 text-xs">
+      <span
+        aria-hidden
+        className={`h-2 w-2 rounded-full ${
+          colorKey === 'green'
+            ? 'bg-emerald-500'
+            : colorKey === 'orange'
+              ? 'bg-amber-500'
+              : 'bg-red-500'
+        }`}
+      />
+      <span className="tabular-nums">{score}</span>
+    </span>
+  )
+}

package/src/components/posts/icons.ts

@@ -0,0 +1,40 @@
+import {
+  FileText,
+  Briefcase,
+  Newspaper,
+  BookOpen,
+  Folder,
+  Layers,
+  Image as ImageIcon,
+  Calendar,
+  Users,
+  HelpCircle,
+  type LucideIcon,
+} from 'lucide-react'
+
+/**
+ * Icon registry for Post Types. Keyed by the string value stored in a
+ * collection's `admin.icon`. Rendering surfaces (Post Types cards, the
+ * New Post picker, the Quick Post Type gallery) all resolve through
+ * `resolvePostTypeIcon` so a single map keeps them in sync — adding an
+ * icon here makes it available everywhere at once.
+ */
+export const POST_TYPE_ICONS: Record<string, LucideIcon> = {
+  'file-text': FileText,
+  briefcase: Briefcase,
+  newspaper: Newspaper,
+  book: BookOpen,
+  folder: Folder,
+  layers: Layers,
+  image: ImageIcon,
+  calendar: Calendar,
+  users: Users,
+  help: HelpCircle,
+}
+
+export type PostTypeIconName = keyof typeof POST_TYPE_ICONS
+
+export function resolvePostTypeIcon(name: string | null | undefined): LucideIcon {
+  if (!name) return FileText
+  return POST_TYPE_ICONS[name.toLowerCase()] ?? FileText
+}

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,161 @@ 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 {
+  const collections = collectionList(config)
+  const postCollections = collections.filter((c) => c.type === 'post')
+  const newPostPath = resolveNewPostPath(postCollections)
+  const siteUrl: string | null = config?.site?.url ?? config?.seo?.siteUrl ?? null
+
+  const isDashboard = currentPath === '/' || currentPath === '/dashboard'
+
+  // Dashboard: keep the existing "+ New Post" / "View Site" pair. With
+  // a single Post Type we route straight to its editor; with several we
+  // route to the picker so the user can choose the type first.
+  if (isDashboard) {
+    return (
+      <>
+        <button
+          type="button"
+          onClick={() => onNavigate(newPostPath)}
+          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
+        </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}
+      </>
+    )
+  }
+
+  // Posts area — "+ New Post" + "Manage types" on the list page;
+  // "+ New Post Type" on the types page. The buttons live in the top
+  // bar so the page header stays clean. See the dashboard rule for
+  // why these come from a single config-aware helper.
+  if (currentPath === '/posts') {
+    return (
+      <button
+        type="button"
+        onClick={() => onNavigate(newPostPath)}
+        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
+      </button>
+    )
+  }
+
+  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>
+    )
+  }
+
+  // Pages list — "+ New page" routes to the page creation flow. Handled
+  // explicitly (not via the collection loop) so the label/route stay
+  // exact even though `pages` is a reserved route.
+  if (currentPath === '/pages') {
+    return (
+      <button
+        type="button"
+        onClick={() => onNavigate('/pages/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 page
+      </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 }
+}
+
+/**
+ * Where "+ New Post" should land, given the configured post-type
+ * collections:
+ *   - exactly one  → straight to that type's editor (`/<slug>/new`)
+ *   - more than one → the type picker (`/posts/new`)
+ *   - none          → the Post Type setup instructions
+ */
+function resolveNewPostPath(postCollections: CollectionMeta[]): string {
+  if (postCollections.length === 1) return `/${postCollections[0]!.slug}/new`
+  if (postCollections.length > 1) return '/posts/new'
+  return '/posts/types/new'
+}
+
+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)
+}