@prenta/admin 2.6.1 → 2.8.0

package/src/AdminRoot.tsx

@@ -5,7 +5,7 @@ import * as Dialog from '@radix-ui/react-dialog'
 import { toast } from 'sonner'
 import { Layout } from './layout/Layout.js'
 import { adminPortalContainer } from './lib/portal-container.js'
-import { ADMIN_ROOT_ATTR, getAdminRootElement } from './lib/admin-root-element.js'
+import { ADMIN_ROOT_ATTR } from './lib/admin-root-element.js'
 import { useAdminRouter, parseRouteQuery } from './router/index.js'
 import { ADMIN_KEYBOARD_SHORTCUTS } from './lib/admin-shortcuts.js'
 import { cmsApi, ensureCsrfToken } from './lib/api.js'
@@ -42,6 +42,10 @@ import {
   PostTypesView,
   PostsListView,
   Jobs,
+  AppearanceChrome,
+  WidgetsPlaceholder,
+  FormsSettings,
+  SpamFolder,
   Profile,
   SEO,
   ScriptTags,
@@ -69,6 +73,7 @@ import {
 } from './views/page-editor/sections/index.js'
 import { ThemeChromeProvider } from './views/page-editor/theme-chrome/index.js'
 import type { AdminThemeChrome } from './lib/theme-chrome.js'
+import { AdminLinksProvider } from './components/ui/admin-links.js'
 
 export interface AdminRootProps {
   config: any
@@ -178,6 +183,8 @@ function AdminShell({
   captchaConfig,
 }: AdminRootProps) {
   const { currentPath, navigate, matchRoute, buildHref } = useAdminRouter(basePath, initialPath)
+  // Real hrefs for admin links (breadcrumbs), with in-app navigation on click.
+  const adminLinks = useMemo(() => ({ href: buildHref, navigate }), [buildHref, navigate])
   const [shortcutHelpOpen, setShortcutHelpOpen] = useState(false)
 
   // Sign out: revoke the server-side session (and clear the cookie) first, then
@@ -500,6 +507,12 @@ function AdminShell({
         />
       )
     }
+    // Before `/pages/:id`, or "trash" would be read as a page id.
+    if (matchRoute('/pages/trash')) {
+      return (
+        <Trash onNavigate={navigate} config={config} parent={{ label: 'Pages', path: '/pages' }} />
+      )
+    }
     const pageEdit = matchRoute('/pages/:id/edit')
     if (pageEdit?.id) {
       return (
@@ -567,10 +580,40 @@ function AdminShell({
       return <ScriptTags onNavigate={navigate} />
     }
 
-    if (matchRoute('/saved-sections') || matchRoute('/page-templates') || matchRoute('/widgets')) {
+    if (matchRoute('/saved-sections') || matchRoute('/page-templates')) {
       return <Redirect to="/pages" navigate={navigate} />
     }
 
+    if (matchRoute('/widgets') || matchRoute('/appearance/widgets')) {
+      return <WidgetsPlaceholder />
+    }
+    // Menus are edited in the navigation plugin's collection (the sidebar's
+    // Appearance → Menus item). Without the plugin this falls through to 404.
+    if (matchRoute('/appearance/menus') && collectionMap.has('navigations')) {
+      return <Redirect to="/navigations" navigate={navigate} />
+    }
+    if (matchRoute('/appearance/header')) {
+      return (
+        <AppearanceChrome
+          onNavigate={navigate}
+          session={session}
+          collections={collectionMap}
+          currentPath={currentPath}
+        />
+      )
+    }
+    if (matchRoute('/forms/settings')) {
+      return <FormsSettings />
+    }
+    if (matchRoute('/forms/spam')) {
+      return <SpamFolder />
+    }
+    if (matchRoute('/posts/trash')) {
+      return (
+        <Trash onNavigate={navigate} config={config} parent={{ label: 'Posts', path: '/posts' }} />
+      )
+    }
+
     if (matchRoute('/trash')) {
       return <Trash onNavigate={navigate} config={config} />
     }
@@ -580,7 +623,14 @@ function AdminShell({
     }
 
     if (matchRoute('/jobs')) {
-      return <Jobs onNavigate={navigate} />
+      return (
+        <Jobs
+          onNavigate={navigate}
+          role={session?.user?.role}
+          userId={session?.user?.id}
+          config={config}
+        />
+      )
     }
 
     // Users + API Keys moved into the Settings view as tabs. The legacy
@@ -662,16 +712,34 @@ function AdminShell({
       'posts',
     ])
 
+    // DocumentEdit is keyed by collection and document ('new' for create) so
+    // each URL gets its own editor: opening a created or duplicated document,
+    // or going Back to /new, must not reuse the previous one's loaded state.
     for (const [slug] of collectionMap) {
       if (RESERVED_SLUGS.has(slug)) continue
 
       const newMatch = matchRoute(`/${slug}/new`)
       if (newMatch) {
-        return <DocumentEdit collectionSlug={slug} config={config} />
+        return (
+          <DocumentEdit
+            key={`${slug}:new`}
+            collectionSlug={slug}
+            config={config}
+            onNavigate={navigate}
+          />
+        )
       }
       const editMatch = matchRoute(`/${slug}/:id`)
       if (editMatch?.id) {
-        return <DocumentEdit collectionSlug={slug} documentId={editMatch.id} config={config} />
+        return (
+          <DocumentEdit
+            key={`${slug}:${editMatch.id}`}
+            collectionSlug={slug}
+            documentId={editMatch.id}
+            config={config}
+            onNavigate={navigate}
+          />
+        )
       }
       if (matchRoute(`/${slug}`)) {
         return <CollectionList collectionSlug={slug} config={config} onNavigate={navigate} />
@@ -680,16 +748,27 @@ function AdminShell({
 
     const newCollMatch = matchRoute('/collections/:slug/new')
     if (newCollMatch?.slug) {
-      return <DocumentEdit collectionSlug={newCollMatch.slug} config={config} />
+      return (
+        <DocumentEdit
+          key={`${newCollMatch.slug}:new`}
+          collectionSlug={newCollMatch.slug}
+          config={config}
+          onNavigate={navigate}
+          listPath={`/collections/${newCollMatch.slug}`}
+        />
+      )
     }
 
     const editCollMatch = matchRoute('/collections/:slug/:id')
     if (editCollMatch?.slug && editCollMatch.id) {
       return (
         <DocumentEdit
+          key={`${editCollMatch.slug}:${editCollMatch.id}`}
           collectionSlug={editCollMatch.slug}
           documentId={editCollMatch.id}
           config={config}
+          onNavigate={navigate}
+          listPath={`/collections/${editCollMatch.slug}`}
         />
       )
     }
@@ -720,18 +799,20 @@ function AdminShell({
   }
 
   return (
-    <Layout
-      config={config}
-      session={session}
-      currentPath={currentPath}
-      onNavigate={navigate}
-      onLogout={handleLogout}
-    >
-      <ErrorBoundary>
-        <Suspense fallback={<ViewFallback />}>{renderView()}</Suspense>
-      </ErrorBoundary>
-      <ShortcutHelp open={shortcutHelpOpen} onClose={() => setShortcutHelpOpen(false)} />
-    </Layout>
+    <AdminLinksProvider value={adminLinks}>
+      <Layout
+        config={config}
+        session={session}
+        currentPath={currentPath}
+        onNavigate={navigate}
+        onLogout={handleLogout}
+      >
+        <ErrorBoundary>
+          <Suspense fallback={<ViewFallback />}>{renderView()}</Suspense>
+        </ErrorBoundary>
+        <ShortcutHelp open={shortcutHelpOpen} onClose={() => setShortcutHelpOpen(false)} />
+      </Layout>
+    </AdminLinksProvider>
   )
 }
 
@@ -798,12 +879,8 @@ function useBranding(config: any) {
       document.title = `${branding.name} Admin`
     }
 
-    // --- Primary color ---
-    const adminEl = getAdminRootElement()
-    if (branding?.primaryColor && adminEl) {
-      adminEl.style.setProperty('--primary', branding.primaryColor)
-      adminEl.style.setProperty('--sidebar-primary', branding.primaryColor)
-    }
+    // `branding.primaryColor` is not applied here: ThemeProvider takes it as
+    // `accentOverride` and tunes it like any accent (see AdminRoot below).
 
     // --- DB favicon (Settings → Appearance) ---
     // The uploaded favicon is the source of truth for the browser tab. Fetch it
@@ -843,12 +920,6 @@ function useBranding(config: any) {
       if (originalTitleRef.current !== null) {
         document.title = originalTitleRef.current
       }
-
-      // Remove primary color override
-      if (branding?.primaryColor && adminEl) {
-        adminEl.style.removeProperty('--primary')
-        adminEl.style.removeProperty('--sidebar-primary')
-      }
     }
   }, [config])
 }
@@ -873,6 +944,7 @@ const EMPTY_RENDERERS: AdminSectionRendererMap = {}
 
 export function AdminRoot(props: AdminRootProps) {
   const defaultDarkMode = props.config?.admin?.branding?.darkMode
+  const primaryColor = props.config?.admin?.branding?.primaryColor
 
   useRobotsNoIndex()
 
@@ -882,7 +954,7 @@ export function AdminRoot(props: AdminRootProps) {
 
   return (
     <div style={ISOLATION_STYLE} className="prenta-admin" {...{ [ADMIN_ROOT_ATTR]: '' }}>
-      <ThemeProvider defaultDarkMode={defaultDarkMode}>
+      <ThemeProvider defaultDarkMode={defaultDarkMode} accentOverride={primaryColor}>
         <LocaleProvider config={props.config}>
           <AdminSectionRenderersProvider value={props.sectionRenderers ?? EMPTY_RENDERERS}>
             <ThemeChromeProvider value={props.themeChrome ?? null}>

package/src/LoginRoot.tsx

@@ -76,12 +76,13 @@ export function LoginRoot({
   onAuthenticated,
 }: LoginRootProps) {
   const defaultDarkMode = config?.admin?.branding?.darkMode
+  const primaryColor = config?.admin?.branding?.primaryColor
 
   useRobotsNoIndex()
 
   return (
     <div style={ISOLATION_STYLE} className="prenta-admin" {...{ [ADMIN_ROOT_ATTR]: '' }}>
-      <ThemeProvider defaultDarkMode={defaultDarkMode}>
+      <ThemeProvider defaultDarkMode={defaultDarkMode} accentOverride={primaryColor}>
         <LoginShell
           config={config}
           session={session}

package/src/__tests__/components/author-avatar.test.tsx

@@ -24,31 +24,14 @@ describe('authorAvatar', () => {
     const first = authorAvatar('Maria Kowalski').color
     const second = authorAvatar('Maria Kowalski').color
     expect(first).toBe(second)
-    expect(first).toMatch(/^#[0-9A-F]{6}$/i)
+    expect(first).toMatch(/^var\(--avatar-[1-8]\)$/)
   })
 
-  it('keeps every swatch at least 4.5:1 against white (axe color-contrast)', () => {
-    expect(AVATAR_COLORS).toHaveLength(7)
-    for (const color of AVATAR_COLORS) {
-      expect(contrast(color, '#ffffff'), color).toBeGreaterThanOrEqual(4.5)
-    }
+  it('draws from the eight avatar tokens (contrast is checked in tokens-drift)', () => {
+    expect(AVATAR_COLORS).toEqual(Array.from({ length: 8 }, (_, i) => `var(--avatar-${i + 1})`))
   })
 })
 
-/** WCAG 2.1 relative-luminance contrast ratio between two hex colors. */
-function contrast(a: string, b: string): number {
-  const lum = (hex: string) => {
-    const n = hex.trim().replace('#', '')
-    const channels = [0, 2, 4].map((i) => parseInt(n.slice(i, i + 2), 16) / 255)
-    const [r, g, bl] = channels.map((c) =>
-      c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4,
-    )
-    return 0.2126 * r! + 0.7152 * g! + 0.0722 * bl!
-  }
-  const [hi, lo] = [lum(a), lum(b)].sort((x, y) => y - x)
-  return (hi! + 0.05) / (lo! + 0.05)
-}
-
 describe('AuthorAvatar', () => {
   it('renders the initials in a colored circle, hidden from AT', () => {
     const { container } = render(<AuthorAvatar name="Maria Kowalski" size={28} />)

package/src/__tests__/components/notification-bell.test.tsx

@@ -80,26 +80,58 @@ function createFakeApi() {
 }
 
 describe('NotificationBell — badge', () => {
-  it('shows the unread badge from the unread() call', async () => {
+  // The kit draws a dot, not a number (SHELL.md §3); the count is in the
+  // button's name.
+  it('shows the unread dot and puts the unread() count in the name', async () => {
     const fake = createFakeApi()
     fake.setRows([row(), row({ id: 'n-2' })])
     render(<NotificationBell api={fake.api} pollIntervalMs={0} />)
-    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('2'))
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 2 unread',
+      ),
+    )
+    const dot = screen.getByTestId('bell-badge')
+    expect(dot.textContent).toBe('')
+    expect(dot.getAttribute('aria-hidden')).toBe('true')
   })
 
-  it('hides the badge when count is 0', async () => {
+  it('hides the dot when count is 0', async () => {
     const fake = createFakeApi()
     render(<NotificationBell api={fake.api} pollIntervalMs={0} />)
     // Let the initial unread() settle.
     await waitFor(() => expect(fake.api.unread).toHaveBeenCalled())
     expect(screen.queryByTestId('bell-badge')).toBeNull()
+    expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe('Notifications')
   })
 
-  it('clamps the badge at "99+"', async () => {
+  it('keeps the unread state under StrictMode (the dev app)', async () => {
+    // StrictMode unmounts and remounts once; the bell used to stay "unmounted"
+    // and drop every result, so the dot never showed in development.
+    const fake = createFakeApi()
+    fake.setRows([row()])
+    render(
+      <React.StrictMode>
+        <NotificationBell api={fake.api} pollIntervalMs={0} />
+      </React.StrictMode>,
+    )
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 1 unread',
+      ),
+    )
+    expect(screen.getByTestId('bell-badge')).toBeTruthy()
+  })
+
+  it('clamps the count in the name at "99+"', async () => {
     const fake = createFakeApi()
     fake.setRows(Array.from({ length: 150 }, (_, i) => row({ id: `n-${i}` })))
     render(<NotificationBell api={fake.api} pollIntervalMs={0} />)
-    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('99+'))
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 99+ unread',
+      ),
+    )
   })
 
   it('polls unread() at pollIntervalMs', async () => {
@@ -164,7 +196,11 @@ describe('NotificationBell — dropdown', () => {
     const onSelect = vi.fn()
     fake.setRows([row()])
     render(<NotificationBell api={fake.api} pollIntervalMs={0} onSelect={onSelect} />)
-    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 1 unread',
+      ),
+    )
     fireEvent.click(screen.getByTestId('bell-button'))
     await waitFor(() => expect(screen.getByTestId('bell-row-n-1')).toBeTruthy())
     await act(async () => {
@@ -181,7 +217,11 @@ describe('NotificationBell — dropdown', () => {
     const onError = vi.fn()
     fake.setRows([row()])
     render(<NotificationBell api={fake.api} pollIntervalMs={0} onError={onError} />)
-    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 1 unread',
+      ),
+    )
     fireEvent.click(screen.getByTestId('bell-button'))
     await waitFor(() => expect(screen.getByTestId('bell-row-n-1')).toBeTruthy())
     await act(async () => {
@@ -189,14 +229,22 @@ describe('NotificationBell — dropdown', () => {
     })
     expect(onError).toHaveBeenCalledWith('server')
     // The badge should bounce back to 1.
-    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 1 unread',
+      ),
+    )
   })
 
   it('marks all read in one click and disables the button after', async () => {
     const fake = createFakeApi()
     fake.setRows([row(), row({ id: 'n-2' })])
     render(<NotificationBell api={fake.api} pollIntervalMs={0} />)
-    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('2'))
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 2 unread',
+      ),
+    )
     fireEvent.click(screen.getByTestId('bell-button'))
     await waitFor(() => expect(screen.getByTestId('bell-mark-all')).toBeTruthy())
     await act(async () => {
@@ -250,7 +298,11 @@ describe('NotificationBell — SSE push', () => {
     await act(async () => {
       wired.push(row({ id: 'sse-1' }))
     })
-    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 1 unread',
+      ),
+    )
   })
 
   it('does not double-count a notification that arrives via both SSE and REST', async () => {
@@ -259,7 +311,11 @@ describe('NotificationBell — SSE push', () => {
     fake.setRows([row({ id: 'race' })])
     render(<NotificationBell api={wired.api} pollIntervalMs={0} />)
     // Open the dropdown so the row is in `items` from the REST list.
-    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 1 unread',
+      ),
+    )
     fireEvent.click(screen.getByTestId('bell-button'))
     await waitFor(() => expect(screen.getByTestId('bell-row-race')).toBeTruthy())
     // Now push the same row via SSE — must NOT add a duplicate or
@@ -268,7 +324,9 @@ describe('NotificationBell — SSE push', () => {
       wired.push(row({ id: 'race' }))
     })
     expect(screen.getAllByTestId('bell-row-race')).toHaveLength(1)
-    expect(screen.getByTestId('bell-badge').textContent).toBe('1')
+    expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+      'Notifications, 1 unread',
+    )
   })
 
   it('prepends new pushed rows to the open dropdown', async () => {
@@ -276,7 +334,11 @@ describe('NotificationBell — SSE push', () => {
     const wired = withSubscribe(fake.api)
     fake.setRows([row({ id: 'old' })])
     render(<NotificationBell api={wired.api} pollIntervalMs={0} />)
-    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 1 unread',
+      ),
+    )
     fireEvent.click(screen.getByTestId('bell-button'))
     await waitFor(() => expect(screen.getByTestId('bell-row-old')).toBeTruthy())
     await act(async () => {
@@ -336,7 +398,11 @@ describe('NotificationBell — SSE push', () => {
     )
     const onError = vi.fn()
     render(<NotificationBell api={wired.api} pollIntervalMs={0} onError={onError} />)
-    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 1 unread',
+      ),
+    )
     fireEvent.click(screen.getByTestId('bell-button'))
     await waitFor(() => expect(screen.getByTestId('bell-row-before')).toBeTruthy())
 
@@ -377,3 +443,69 @@ describe('NotificationBell — SSE push', () => {
     expect(screen.queryByTestId('bell-badge')).toBeNull()
   })
 })
+
+/**
+ * P-04 review: the panel is a labelled, non-modal dialog that closes like
+ * one, not a `role="menu"` that only the bell could close.
+ */
+describe('NotificationBell — panel dismissal', () => {
+  async function openPanel() {
+    const fake = createFakeApi()
+    fake.setRows([row()])
+    render(
+      <>
+        <button type="button">Outside</button>
+        <NotificationBell api={fake.api} pollIntervalMs={0} />
+      </>,
+    )
+    const bell = screen.getByTestId('bell-button')
+    bell.focus()
+    fireEvent.click(bell)
+    const panel = await screen.findByRole('dialog', { name: 'Notifications' })
+    return { bell, panel }
+  }
+
+  it('is a labelled non-modal dialog the bell controls, not a menu', async () => {
+    const { bell, panel } = await openPanel()
+    expect(screen.queryByRole('menu')).toBeNull()
+    expect(screen.queryAllByRole('menuitem')).toHaveLength(0)
+    expect(panel.getAttribute('aria-modal')).toBeNull()
+    expect(bell.getAttribute('aria-haspopup')).toBe('dialog')
+    expect(bell.getAttribute('aria-expanded')).toBe('true')
+    expect(bell.getAttribute('aria-controls')).toBe(panel.id)
+    // Focus moves into the panel, so Tab continues through its controls.
+    await waitFor(() => expect(document.activeElement).toBe(panel))
+  })
+
+  it('closes on Esc and puts focus back on the bell', async () => {
+    const { bell, panel } = await openPanel()
+    fireEvent.keyDown(panel, { key: 'Escape' })
+    expect(screen.queryByTestId('bell-dropdown')).toBeNull()
+    expect(bell.getAttribute('aria-expanded')).toBe('false')
+    expect(document.activeElement).toBe(bell)
+  })
+
+  it('closes on a pointerdown outside without moving focus to the bell', async () => {
+    const { bell, panel } = await openPanel()
+    // A pointerdown inside the panel leaves it open.
+    fireEvent.pointerDown(panel)
+    expect(screen.getByTestId('bell-dropdown')).toBeTruthy()
+    const outside = screen.getByRole('button', { name: 'Outside' })
+    fireEvent.pointerDown(outside)
+    expect(screen.queryByTestId('bell-dropdown')).toBeNull()
+    expect(document.activeElement).not.toBe(bell)
+  })
+
+  it('closes when focus moves past it', async () => {
+    const { panel } = await openPanel()
+    const outside = screen.getByRole('button', { name: 'Outside' })
+    fireEvent.focusOut(panel, { relatedTarget: outside })
+    expect(screen.queryByTestId('bell-dropdown')).toBeNull()
+  })
+
+  it('stays open while focus moves inside it', async () => {
+    const { bell, panel } = await openPanel()
+    fireEvent.focusOut(bell, { relatedTarget: panel })
+    expect(screen.getByTestId('bell-dropdown')).toBeTruthy()
+  })
+})