@prenta/admin 2.6.0 → 2.7.0

package/src/__tests__/views/settings-tabs.render.test.tsx

@@ -0,0 +1,371 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+
+/**
+ * Settings (TRACKING P-07, Settings.html): the tab is "Admin appearance" with
+ * the id `appearance`, General opens by default, a tab is deep-linkable by
+ * `?tab=` or the kit's `#hash`, and no tab shows its unsaved bar on first load.
+ */
+
+type ApiResult = { data?: unknown; error?: string; status: number }
+
+let settingsGet: () => ApiResult
+
+const LAYOUT_DOCS = [
+  { id: 'h1', title: 'Main header' },
+  { id: 'h2', title: 'Promo header' },
+]
+
+const cmsApi = vi.fn(
+  async (endpoint: string, options?: { method?: string }): Promise<ApiResult> => {
+    const method = options?.method ?? 'GET'
+    if (endpoint === '/globals/settings' && method === 'GET') return settingsGet()
+    if (endpoint === '/globals/settings' && method === 'PUT') return { data: {}, status: 200 }
+    if (endpoint === '/seo/config') {
+      return {
+        data: {
+          static: { site: null },
+          overrides: { site: {} },
+          effective: {
+            site: {
+              siteUrl: 'https://actuatemedia.com',
+              robots: { defaultNoIndex: false, defaultNoFollow: false, noIndexNonProduction: true },
+            },
+          },
+        },
+        status: 200,
+      }
+    }
+    if (endpoint === '/seo/index-status') {
+      return {
+        data: {
+          status: 'protected',
+          severity: 'warning',
+          label: 'Protected',
+          description: 'Non-production environment is noindexed.',
+          checks: [],
+          actions: [],
+          lastAuditAt: null,
+          environment: 'preview',
+        },
+        status: 200,
+      }
+    }
+    if (endpoint === '/appearance') {
+      return {
+        data: {
+          appearance: {
+            adminColorModeDefault: 'light',
+            adminLightBase: 'porcelain',
+            adminAccentColor: 'cobalt',
+            sidebarDensity: 'default',
+            contentFont: 'DM Sans',
+            reduceMotion: false,
+          },
+          brand: { mode: 'inheritPublicBrand' },
+          resolved: { admin: { initials: 'AM' } },
+          assets: [],
+          siteTitle: 'Actuate Media',
+        },
+        status: 200,
+      }
+    }
+    if (endpoint.startsWith('/collections/headers'))
+      return { data: { docs: LAYOUT_DOCS }, status: 200 }
+    if (endpoint === '/api-keys') return { data: [], status: 200 }
+    return { data: {}, status: 200 }
+  },
+)
+
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (e: string, o?: { method?: string }) => cmsApi(e, o),
+}))
+
+const toastSuccess = vi.fn()
+const toastError = vi.fn()
+vi.mock('sonner', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('sonner')>()
+  return {
+    ...actual,
+    toast: Object.assign(vi.fn(), actual.toast, {
+      success: (m: string) => toastSuccess(m),
+      error: (m: string) => toastError(m),
+    }),
+  }
+})
+
+const { Settings } = await import('../../views/Settings.js')
+
+const ADMIN = { user: { role: 'ADMIN' } }
+const LAYOUT_CONFIG = {
+  layout: { regions: { header: { collection: 'headers', label: 'Header' } } },
+}
+
+beforeEach(() => {
+  cmsApi.mockClear()
+  toastSuccess.mockClear()
+  toastError.mockClear()
+  settingsGet = () => ({
+    data: { siteTitle: 'Actuate Media', tagline: 'A lightweight content management system' },
+    status: 200,
+  })
+})
+
+afterEach(() => {
+  cleanup()
+  window.history.replaceState(null, '', '/')
+})
+
+const settle = () => act(() => new Promise((r) => setTimeout(r, 30)))
+const selectedTab = () => screen.getByRole('tab', { selected: true })
+const unsavedBar = () => screen.queryByRole('region', { name: 'Unsaved changes' })
+
+function putBody(): Record<string, unknown> {
+  const put = cmsApi.mock.calls.find(
+    (c) =>
+      c[0] === '/globals/settings' && (c[1] as { method?: string } | undefined)?.method === 'PUT',
+  )
+  return JSON.parse(String((put![1] as { body: string }).body))
+}
+
+describe('Settings tabs', () => {
+  it('names the tab "Admin appearance" and keeps its id', async () => {
+    render(<Settings session={ADMIN} />)
+    const tab = await screen.findByRole('tab', { name: 'Admin appearance' })
+    expect(screen.queryByRole('tab', { name: 'Appearance' })).toBeNull()
+
+    fireEvent.click(tab)
+    expect(selectedTab().textContent).toBe('Admin appearance')
+  })
+
+  // TRACKING P-06: the strip is the kit's `.pg-tabs` on the shared UnderlineTabs.
+  it("draws the kit's page strip: icons, kit labels, one panel wired to its tab", async () => {
+    render(<Settings session={ADMIN} config={LAYOUT_CONFIG} />)
+    await screen.findByLabelText('Site Title')
+    expect(screen.getByRole('heading', { level: 1, name: 'Settings' })).toBeTruthy()
+
+    const strip = screen.getByRole('tablist', { name: 'Settings' })
+    const tabs = within(strip).getAllByRole('tab')
+    expect(tabs.map((tab) => tab.textContent)).toEqual([
+      'General',
+      'Admin appearance',
+      'Layout',
+      'Security',
+      'Users',
+      'MCP',
+      'API Keys',
+      'SEO',
+      'Email (SMTP)',
+      'Webhooks',
+      'AI',
+      'Updates',
+    ])
+    // Every tab carries its 15px icon, hidden from screen readers.
+    for (const tab of tabs) {
+      expect(tab.querySelector('[aria-hidden="true"] > svg')).toBeTruthy()
+    }
+    // Settings.html `.pg-tab`: 13px / 500 in --muted, 10px 16px.
+    const security = screen.getByRole('tab', { name: 'Security' })
+    expect(security.className).toContain('font-medium')
+    expect(security.className).toContain('text-faint')
+    expect(security.className).toContain('px-4')
+    // The page gutter sits inside the full-width strip.
+    expect(strip.className).toContain('px-[var(--gut)]')
+
+    // Clicking the open tab adds no history entry; another tab navigates.
+    const onNavigate = vi.fn()
+    cleanup()
+    render(<Settings session={ADMIN} config={LAYOUT_CONFIG} onNavigate={onNavigate} />)
+    await screen.findByLabelText('Site Title')
+    fireEvent.click(screen.getByRole('tab', { name: 'General' }))
+    expect(onNavigate).not.toHaveBeenCalled()
+    fireEvent.click(screen.getByRole('tab', { name: 'Security' }))
+    expect(onNavigate).toHaveBeenCalledWith('/settings?tab=security')
+    fireEvent.click(screen.getByRole('tab', { name: 'General' }))
+    await screen.findByLabelText('Site Title')
+
+    const panels = screen.getAllByRole('tabpanel')
+    expect(panels).toHaveLength(1)
+    expect(panels[0]!.getAttribute('aria-labelledby')).toBe(selectedTab().id)
+    expect(selectedTab().getAttribute('aria-controls')).toBe(panels[0]!.id)
+  })
+
+  it('opens on General', async () => {
+    render(<Settings session={ADMIN} />)
+    await screen.findByLabelText('Site Title')
+    expect(selectedTab().textContent).toBe('General')
+  })
+
+  it('opens the tab named by ?tab=', async () => {
+    window.history.replaceState(null, '', '/admin/settings?tab=appearance')
+    render(<Settings session={ADMIN} />)
+    await screen.findByText('Base theme')
+    expect(selectedTab().textContent).toBe('Admin appearance')
+  })
+
+  it("opens the tab named by the kit's #hash, mapping #keys to API Keys", async () => {
+    window.history.replaceState(null, '', '/admin/settings#appearance')
+    const { unmount } = render(<Settings session={ADMIN} />)
+    await screen.findByText('Base theme')
+    expect(selectedTab().textContent).toBe('Admin appearance')
+    unmount()
+
+    window.history.replaceState(null, '', '/admin/settings#keys')
+    render(<Settings session={ADMIN} />)
+    await waitFor(() => expect(selectedTab().textContent).toBe('API Keys'))
+  })
+
+  it('lets ?tab= win over a hash, and ignores a hash that names no tab', async () => {
+    window.history.replaceState(null, '', '/admin/settings?tab=security#appearance')
+    const first = render(<Settings session={ADMIN} />)
+    await waitFor(() => expect(selectedTab().textContent).toBe('Security'))
+    first.unmount()
+
+    window.history.replaceState(null, '', '/admin/settings#nope')
+    const second = render(<Settings session={ADMIN} />)
+    await waitFor(() => expect(selectedTab().textContent).toBe('General'))
+    second.unmount()
+
+    // The legacy /users route lands with initialTab; a stray hash keeps it.
+    window.history.replaceState(null, '', '/admin/users#nope')
+    render(<Settings session={ADMIN} initialTab="users" />)
+    await waitFor(() => expect(selectedTab().textContent).toBe('Users'))
+  })
+
+  it('follows a hash change', async () => {
+    render(<Settings session={ADMIN} />)
+    await screen.findByLabelText('Site Title')
+    act(() => {
+      window.history.replaceState(null, '', '/admin/settings#appearance')
+      window.dispatchEvent(new HashChangeEvent('hashchange'))
+    })
+    await screen.findByText('Base theme')
+    expect(selectedTab().textContent).toBe('Admin appearance')
+  })
+
+  it('keeps the open tab when the hash moves to an anchor that names no tab', async () => {
+    window.history.replaceState(null, '', '/admin/settings#keys')
+    render(<Settings session={ADMIN} />)
+    await waitFor(() => expect(selectedTab().textContent).toBe('API Keys'))
+
+    // AdminShell's "Skip to content" link, or any in-page anchor. Browsers
+    // fire popstate and hashchange for a fragment navigation.
+    act(() => {
+      window.history.pushState(null, '', '/admin/settings#prenta-main')
+      window.dispatchEvent(new PopStateEvent('popstate'))
+      window.dispatchEvent(new HashChangeEvent('hashchange'))
+    })
+    await settle()
+    expect(selectedTab().textContent).toBe('API Keys')
+
+    // A hash that names a tab still switches.
+    act(() => {
+      window.history.pushState(null, '', '/admin/settings#security')
+      window.dispatchEvent(new PopStateEvent('popstate'))
+      window.dispatchEvent(new HashChangeEvent('hashchange'))
+    })
+    await waitFor(() => expect(selectedTab().textContent).toBe('Security'))
+  })
+
+  it('falls back to General under an anchor hash when the route names a missing tab', async () => {
+    window.history.replaceState(null, '', '/admin/settings#prenta-main')
+    render(<Settings session={ADMIN} initialTab="layout" />)
+    await waitFor(() => expect(selectedTab().textContent).toBe('General'))
+  })
+})
+
+describe('Settings unsaved bar on first load', () => {
+  it('shows none on General', async () => {
+    render(<Settings session={ADMIN} />)
+    await screen.findByLabelText('Site Title')
+    await settle()
+    expect(unsavedBar()).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Save changes' })).toBeNull()
+  })
+
+  it('shows none on Admin appearance', async () => {
+    render(<Settings session={ADMIN} initialTab="appearance" />)
+    await screen.findByText('Base theme')
+    await settle()
+    expect(unsavedBar()).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Save changes' })).toBeNull()
+  })
+})
+
+describe('Settings → Layout', () => {
+  function renderLayout() {
+    settingsGet = () => ({
+      data: { siteTitle: 'Actuate Media', defaultLayout: { header: 'h1' } },
+      status: 200,
+    })
+    render(<Settings config={LAYOUT_CONFIG} session={ADMIN} initialTab="layout" />)
+  }
+
+  async function pick(title: string) {
+    fireEvent.focus(screen.getByPlaceholderText('Search headers...'))
+    fireEvent.click(await screen.findByRole('button', { name: new RegExp(title) }))
+  }
+
+  it('has no bar until a default changes, and Reset puts the saved one back', async () => {
+    renderLayout()
+    await screen.findByText('Default Layout Variants')
+    await settle()
+    expect(unsavedBar()).toBeNull()
+    expect(screen.queryByRole('button', { name: /save/i })).toBeNull()
+
+    await pick('Promo header')
+    expect(unsavedBar()).toBeTruthy()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Reset' }))
+    expect(unsavedBar()).toBeNull()
+    fireEvent.focus(screen.getByPlaceholderText('Search headers...'))
+    await screen.findByRole('button', { name: /Promo header/ })
+    // The saved pick is ticked again.
+    expect(screen.getByRole('button', { name: /Main header/ }).textContent).toContain('✓')
+  })
+
+  it('saves the defaults into the settings global and hides the bar', async () => {
+    renderLayout()
+    await screen.findByText('Default Layout Variants')
+    await pick('Promo header')
+    fireEvent.click(screen.getByRole('button', { name: 'Save changes' }))
+
+    await waitFor(() => expect(unsavedBar()).toBeNull())
+    expect(putBody()).toMatchObject({
+      siteTitle: 'Actuate Media',
+      defaultLayout: { header: 'h2' },
+    })
+    expect(toastSuccess).toHaveBeenCalledWith('Saved')
+  })
+
+  it('saves a cleared default, so the old one does not come back', async () => {
+    renderLayout()
+    await screen.findByText('Default Layout Variants')
+    fireEvent.focus(screen.getByPlaceholderText('Search headers...'))
+    await screen.findByRole('button', { name: /Promo header/ })
+    const chip = screen
+      .getAllByText('Main header')
+      .find((el) => el.querySelector('button'))!
+      .querySelector('button')!
+    fireEvent.click(chip)
+    fireEvent.click(screen.getByRole('button', { name: 'Save changes' }))
+
+    await waitFor(() => expect(unsavedBar()).toBeNull())
+    expect(putBody().defaultLayout).toEqual({})
+  })
+
+  it('writes nothing when the settings read fails', async () => {
+    renderLayout()
+    await screen.findByText('Default Layout Variants')
+    await pick('Promo header')
+    settingsGet = () => ({ error: 'Network down', status: 0 })
+    fireEvent.click(screen.getByRole('button', { name: 'Save changes' }))
+
+    await waitFor(() => expect(toastError).toHaveBeenCalledWith('Network down'))
+    expect(
+      cmsApi.mock.calls.some((c) => (c[1] as { method?: string } | undefined)?.method === 'PUT'),
+    ).toBe(false)
+    expect(unsavedBar()).toBeTruthy()
+  })
+})

package/src/__tests__/views/updates-tab.render.test.tsx

@@ -159,11 +159,12 @@ describe('UpdatesTab', () => {
     // before typing so the typed value cannot be wiped mid-test.
     await screen.findByText("You're up to date!")
 
-    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
-    expect(save.disabled).toBe(true)
+    // Clean form → no save bar (save bars render only when dirty).
+    expect(screen.queryByRole('button', { name: 'Save changes' })).toBeNull()
 
     const repo = screen.getByLabelText('Repository') as HTMLInputElement
     fireEvent.change(repo, { target: { value: 'actuate-media/site' } })
+    const save = screen.getByRole('button', { name: 'Save changes' }) as HTMLButtonElement
     expect(save.disabled).toBe(false)
 
     fireEvent.click(save)
@@ -187,7 +188,7 @@ describe('UpdatesTab', () => {
     fireEvent.change(repo, { target: { value: 'not a repo' } })
 
     expect(screen.getByText(/owner\/repo format/i)).toBeTruthy()
-    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    const save = screen.getByRole('button', { name: 'Save changes' }) as HTMLButtonElement
     expect(save.disabled).toBe(true)
   })
 

package/src/components/Breadcrumbs.tsx

@@ -43,11 +43,17 @@ export function isId(segment: string): boolean {
   )
 }
 
-export interface BreadcrumbsProps {
+interface BreadcrumbsProps {
   currentPath: string
   onNavigate: (path: string) => void
 }
 
+/**
+ * Path-derived breadcrumb bar. The admin shell no longer renders it: the kit
+ * shows breadcrumbs only on second-level screens, passed explicitly.
+ *
+ * @deprecated Use `Breadcrumb` through `PageHeader`'s `breadcrumb` prop.
+ */
 export function Breadcrumbs({ currentPath, onNavigate }: BreadcrumbsProps) {
   // Strip query string + hash so tab-driven routes (e.g. `/settings?tab=users`,
   // `/seo?tab=audit`) don't leak the raw query into a crumb label.

package/src/components/CommandPalette.tsx

@@ -1,6 +1,12 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type KeyboardEvent as ReactKeyboardEvent,
+} from 'react'
 import { Command } from 'cmdk'
 import {
   Search,
@@ -147,6 +153,39 @@ const navigationCommands = [
   { id: 'nav-settings', label: 'Settings', icon: Settings, action: '/settings' },
 ]
 
+const TABBABLE =
+  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
+/**
+ * The palette is modal, so Tab and Shift+Tab cycle through its own controls
+ * (today just the search field; the results are arrow-key driven) instead of
+ * reaching the page behind the scrim. Rendered controls only: a
+ * `display: none` element has no client rects.
+ */
+function keepTabInside(e: ReactKeyboardEvent<HTMLElement>) {
+  if (e.key !== 'Tab') return
+  const stops = Array.from(e.currentTarget.querySelectorAll<HTMLElement>(TABBABLE)).filter(
+    (el) => el.getClientRects().length > 0,
+  )
+  const first = stops[0]
+  const last = stops[stops.length - 1]
+  const active = document.activeElement
+  if (!first || !last) {
+    e.preventDefault()
+    return
+  }
+  if (!stops.includes(active as HTMLElement)) {
+    e.preventDefault()
+    ;(e.shiftKey ? last : first).focus()
+  } else if (e.shiftKey && active === first) {
+    e.preventDefault()
+    last.focus()
+  } else if (!e.shiftKey && active === last) {
+    e.preventDefault()
+    first.focus()
+  }
+}
+
 export interface CommandPaletteProps {
   open: boolean
   onOpenChange: (open: boolean) => void
@@ -165,7 +204,9 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
-      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+      // Lowercased so Caps Lock doesn't break it; Shift/Alt combos (e.g.
+      // Firefox's Ctrl+Shift+K console) are left to the browser.
+      if (e.key.toLowerCase() === 'k' && (e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
         e.preventDefault()
         onOpenChange(!open)
       }
@@ -348,8 +389,10 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
         <div
           role="dialog"
           aria-modal="true"
+          aria-label="Command palette"
           className="w-full max-w-2xl"
           onClick={(e) => e.stopPropagation()}
+          onKeyDown={keepTabInside}
         >
           <Command
             className="bg-card w-full overflow-hidden rounded-lg shadow-2xl"
@@ -363,11 +406,16 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
           >
             <div className="border-border flex items-center border-b px-4">
               <Search className="text-muted-foreground mr-3 h-5 w-5 shrink-0" />
+              {/* Focus moves into the dialog when it opens, whether from the
+                  topbar's search button or Ctrl/Cmd+K. */}
               <Command.Input
+                autoFocus
                 value={search}
                 onValueChange={setSearch}
                 placeholder="Search, jump to, or type /ai to use the AI co-author…"
-                className="placeholder:text-muted-foreground w-full bg-transparent py-4 text-base focus:outline-none"
+                // The admin's focus ring sits 2px outside; the dialog clips
+                // that at its top edge, so draw it inside the field.
+                className="placeholder:text-muted-foreground w-full bg-transparent py-4 text-base focus:outline-none focus-visible:-outline-offset-2!"
               />
               {loading && (
                 <div className="border-border mr-2 h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-t-gray-600" />

package/src/components/LocaleSwitcher.tsx

@@ -16,14 +16,13 @@ export function LocaleSwitcher() {
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
         <button
-          className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-[var(--accent)]"
+          type="button"
+          className="rounded-8 text-sub hover:bg-acc-l hover:text-acc aria-expanded:bg-acc-l aria-expanded:text-acc prenta-touch-target mobile:h-11 flex h-[34px] shrink-0 cursor-pointer items-center gap-1.5 border-0 bg-transparent px-2 text-[13px]"
           aria-label="Switch locale"
         >
-          <Globe className="h-4 w-4 text-[var(--muted-foreground)]" />
-          <span className="hidden text-sm font-medium text-[var(--foreground)] sm:inline">
-            {activeLabel}
-          </span>
-          <ChevronDown className="h-3 w-3 text-[var(--muted-foreground)]" />
+          <Globe className="h-4 w-4" strokeWidth={1.75} aria-hidden />
+          <span className="hidden font-medium sm:inline">{activeLabel}</span>
+          <ChevronDown className="h-3 w-3" strokeWidth={1.75} aria-hidden />
         </button>
       </DropdownMenu.Trigger>