@actuate-media/cms-admin 0.71.0 → 0.72.0

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

@@ -0,0 +1,40 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render } from '@testing-library/react'
+import { AuthorAvatar, authorAvatar } from '../../components/ui/AuthorAvatar.js'
+
+afterEach(cleanup)
+
+describe('authorAvatar', () => {
+  it('derives two initials from first + last name', () => {
+    expect(authorAvatar('Maria Kowalski').initials).toBe('MK')
+    expect(authorAvatar('Sarah M. Lee').initials).toBe('SL')
+  })
+
+  it('falls back to the first two characters for single-word names', () => {
+    expect(authorAvatar('Admin').initials).toBe('AD')
+  })
+
+  it('handles null/empty names without throwing', () => {
+    expect(authorAvatar(null).initials).toBe('US')
+    expect(authorAvatar('  ').initials).toBe('US')
+  })
+
+  it('assigns a stable color per name', () => {
+    const first = authorAvatar('Maria Kowalski').color
+    const second = authorAvatar('Maria Kowalski').color
+    expect(first).toBe(second)
+    expect(first).toMatch(/^#[0-9A-F]{6}$/i)
+  })
+})
+
+describe('AuthorAvatar', () => {
+  it('renders the initials in a colored circle, hidden from AT', () => {
+    const { container } = render(<AuthorAvatar name="Maria Kowalski" size={28} />)
+    const el = container.firstElementChild as HTMLElement
+    expect(el.textContent).toBe('MK')
+    expect(el.getAttribute('aria-hidden')).toBe('true')
+    expect(el.style.background).not.toBe('')
+    expect(el.style.width).toBe('28px')
+  })
+})

package/src/__tests__/views/pages-list-view.test.tsx

@@ -131,6 +131,87 @@ describe('PagesListView', () => {
   })
 })
 
+describe('PagesListView column visibility', () => {
+  // Radix DropdownMenu opens on pointerdown (not click), which happy-dom
+  // doesn't synthesize from fireEvent.click — open via keyboard instead.
+  const openColumnsMenu = () =>
+    fireEvent.keyDown(screen.getByRole('button', { name: 'Choose visible columns' }), {
+      key: 'Enter',
+    })
+  // While the (modal) menu is open, Radix aria-hides the rest of the page,
+  // so close it before asserting on table headers.
+  const closeColumnsMenu = () => fireEvent.keyDown(screen.getByRole('menu'), { key: 'Escape' })
+
+  it('hides and shows optional columns via the Columns menu, persisted', async () => {
+    fetchPagesDataset.mockResolvedValue(
+      dataset({ pages: [page('about', { title: 'About', tags: ['a'], primaryTagId: 'a' })] }),
+    )
+    render(<PagesListView onNavigate={() => {}} />)
+    await screen.findByText('About')
+
+    // All optional columns start visible.
+    expect(screen.getByRole('columnheader', { name: /tags/i })).toBeTruthy()
+    expect(screen.getByRole('columnheader', { name: /author/i })).toBeTruthy()
+    expect(screen.getByRole('columnheader', { name: /seo/i })).toBeTruthy()
+
+    openColumnsMenu()
+    fireEvent.click(await screen.findByRole('menuitemcheckbox', { name: /tags/i }))
+    closeColumnsMenu()
+
+    expect(screen.queryByRole('columnheader', { name: /tags/i })).toBeNull()
+    expect(screen.getByRole('columnheader', { name: /author/i })).toBeTruthy()
+    expect(storage.get('actuate.pages.hiddenColumns')).toBe(JSON.stringify(['tags']))
+
+    // Toggle back on.
+    openColumnsMenu()
+    fireEvent.click(await screen.findByRole('menuitemcheckbox', { name: /tags/i }))
+    closeColumnsMenu()
+    expect(screen.getByRole('columnheader', { name: /tags/i })).toBeTruthy()
+    expect(storage.get('actuate.pages.hiddenColumns')).toBe(JSON.stringify([]))
+  })
+
+  it('restores hidden columns from localStorage on mount', async () => {
+    storage.set('actuate.pages.hiddenColumns', JSON.stringify(['seo', 'author']))
+    fetchPagesDataset.mockResolvedValue(dataset({ pages: [page('about', { title: 'About' })] }))
+    render(<PagesListView onNavigate={() => {}} />)
+    await screen.findByText('About')
+
+    expect(screen.queryByRole('columnheader', { name: /seo/i })).toBeNull()
+    expect(screen.queryByRole('columnheader', { name: /author/i })).toBeNull()
+    expect(screen.getByRole('columnheader', { name: /tags/i })).toBeTruthy()
+  })
+
+  it('falls back to the title sort when the active sort column is hidden', async () => {
+    fetchPagesDataset.mockResolvedValue(
+      dataset({
+        pages: [
+          page('b', { title: 'Bravo', seoScore: 10 }),
+          page('a', { title: 'Alpha', seoScore: 90 }),
+        ],
+      }),
+    )
+    render(<PagesListView onNavigate={() => {}} />)
+    await screen.findByText('Alpha')
+
+    // Sort by SEO (desc default) → Alpha (90) first either way, but the
+    // header carries aria-sort.
+    fireEvent.click(screen.getByRole('button', { name: /^SEO$/i }))
+    expect(screen.getByRole('columnheader', { name: /seo/i }).getAttribute('aria-sort')).toBe(
+      'descending',
+    )
+
+    openColumnsMenu()
+    fireEvent.click(await screen.findByRole('menuitemcheckbox', { name: /seo score/i }))
+    closeColumnsMenu()
+
+    // SEO column gone; Title carries the (reset) ascending sort.
+    expect(screen.queryByRole('columnheader', { name: /seo/i })).toBeNull()
+    expect(screen.getByRole('columnheader', { name: /title/i }).getAttribute('aria-sort')).toBe(
+      'ascending',
+    )
+  })
+})
+
 describe('PagesListView tree mode', () => {
   function hierarchyDataset() {
     return dataset({

package/src/components/seo/SeoIssueFixPanel.tsx

@@ -34,8 +34,8 @@ function formatValue(value: string | boolean | null): string {
 function ChangePreview({ changes }: { changes: SeoFixFieldChange[] }) {
   if (changes.length === 0) return null
   return (
-    <div className="border-border overflow-hidden rounded-md border">
-      <table className="w-full text-sm" aria-label="Proposed SEO changes">
+    <div className="border-border overflow-x-auto rounded-md border">
+      <table className="w-full min-w-[480px] text-sm" aria-label="Proposed SEO changes">
         <thead>
           <tr className="border-border bg-muted/40 text-muted-foreground border-b text-left">
             <th scope="col" className="py-2 pr-3 pl-3 font-medium">

package/src/components/ui/AuthorAvatar.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+/**
+ * Deterministic per-author avatar: a colored circle with the author's
+ * initials, hashed from the name so the color is stable across renders
+ * and views without storing anything. Shared by the Dashboard activity
+ * feed and the Pages/Posts list tables so an author always looks the
+ * same everywhere.
+ *
+ * The palette is intentionally raw hex applied via inline style — the
+ * design-system exception for truly dynamic values (see Dashboard.tsx
+ * note). All swatches keep ≥4.5:1 contrast with white text.
+ */
+const AVATAR_COLORS = [
+  '#7C3AED', // purple
+  '#E11D48', // rose
+  '#059669', // emerald
+  '#0891B2', // cyan
+  '#D97706', // amber
+  '#4F46E5', // indigo
+  '#DC2626', // red
+] as const
+
+function hashString(s: string): number {
+  let h = 0
+  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0
+  return Math.abs(h)
+}
+
+export function authorAvatar(name: string | null | undefined): {
+  color: string
+  initials: string
+} {
+  const safe = (name ?? '').trim() || 'User'
+  const parts = safe.split(/\s+/).filter(Boolean)
+  const initials =
+    parts.length >= 2
+      ? `${parts[0]![0]}${parts[parts.length - 1]![0]}`.toUpperCase()
+      : safe.slice(0, 2).toUpperCase()
+  const color = AVATAR_COLORS[hashString(safe) % AVATAR_COLORS.length]!
+  return { color, initials }
+}
+
+export function AuthorAvatar({
+  name,
+  size = 28,
+  className = '',
+}: {
+  name: string | null | undefined
+  /** Diameter in px. Font size scales with it. */
+  size?: number
+  className?: string
+}) {
+  const { color, initials } = authorAvatar(name)
+  return (
+    <span
+      aria-hidden
+      className={`inline-flex shrink-0 items-center justify-center rounded-full font-medium text-white ${className}`}
+      style={{
+        width: size,
+        height: size,
+        background: color,
+        fontSize: Math.max(9, Math.round(size * 0.4)),
+      }}
+    >
+      {initials}
+    </span>
+  )
+}

package/src/components/ui/InspectorPane.tsx

@@ -53,17 +53,22 @@ export function InspectorPane({
   children,
   'aria-label': ariaLabel,
 }: InspectorPaneProps) {
+  // Cap at the split row's width (100% of the flex container) so the pane
+  // never overflows phones/tablets. Below the cap the pane fills the row
+  // master–detail style: the list yields, and the close button returns to
+  // it. On desktop the min() resolves to the design's fixed px width, so
+  // nothing changes there.
   return (
     <div
       className="shrink-0 overflow-hidden bg-[var(--bg)] motion-safe:transition-[width] motion-safe:duration-200"
-      style={{ width: open ? width : 0 }}
+      style={{ width: open ? `min(${width}px, 100%)` : 0 }}
       aria-hidden={!open}
     >
       <div
         role="region"
         aria-label={ariaLabel}
         className="my-3 mr-3 ml-4 flex h-[calc(100%-24px)] flex-col overflow-hidden rounded-[var(--r)] border border-[var(--bdr)] bg-[var(--sb)] shadow-[var(--shd2)]"
-        style={{ width: width - 28 }}
+        style={{ width: `min(${width - 28}px, calc(100% - 28px))` }}
       >
         {open ? children : null}
       </div>

package/src/views/ApiKeys.tsx

@@ -166,7 +166,8 @@ export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
         ) : (
           <div className="border-border overflow-hidden rounded-lg border">
             <div className="overflow-x-auto">
-              <table className="w-full">
+              {/* min-w keeps the 7 columns readable; narrow viewports scroll sideways. */}
+              <table className="w-full min-w-[760px]">
                 <thead className="border-border bg-muted/50 border-b">
                   <tr>
                     <th className="text-muted-foreground px-4 py-2 text-left text-xs font-medium">

package/src/views/Dashboard.tsx

@@ -41,6 +41,7 @@ import {
 } from 'lucide-react'
 import { useApiData } from '../lib/useApiData.js'
 import { editPathForDoc } from '../lib/collection-routes.js'
+import { authorAvatar } from '../components/ui/AuthorAvatar.js'
 import { OnboardingBlock, shouldShowOnboarding } from './dashboard/OnboardingBlock.js'
 import type { OnboardingSignals } from './dashboard/OnboardingBlock.js'
 
@@ -173,45 +174,15 @@ function todayDateString(): string {
   })
 }
 
-// Deterministic colour per author so avatars stay stable across renders
-// without storing anything in state or hitting the server.
-const AVATAR_COLORS = [
-  '#7C3AED', // purple
-  '#E11D48', // rose
-  '#059669', // emerald
-  '#0891B2', // cyan
-  '#D97706', // amber
-  '#4F46E5', // indigo
-  '#DC2626', // red
-] as const
-
-function hashString(s: string): number {
-  let h = 0
-  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0
-  return Math.abs(h)
-}
-
-function authorAvatar(name: string | null | undefined): { color: string; initials: string } {
-  const safe = (name ?? '').trim() || 'User'
-  const parts = safe.split(/\s+/).filter(Boolean)
-  const initials =
-    parts.length >= 2
-      ? `${parts[0]![0]}${parts[parts.length - 1]![0]}`.toUpperCase()
-      : safe.slice(0, 2).toUpperCase()
-  const color = AVATAR_COLORS[hashString(safe) % AVATAR_COLORS.length]!
-  return { color, initials }
-}
-
 /**
  * Semantic state styling uses theme tokens (`success` / `warning` / `info`
  * / `brand`) so the dashboard tracks the design system in both light and
- * dark mode. Two deliberate exceptions remain as raw values:
+ * dark mode. One deliberate exception remains as raw values:
  *   - Error states keep `text-red-*` / `bg-red-*`. The `--destructive`
  *     token's dark value is intentionally dark (low contrast as TEXT on a
  *     dark card), so tokenizing error text here would regress contrast.
  *     Promoting error to a token is a separate, admin-wide change.
- *   - `AVATAR_COLORS` are dynamic per-author hashes (allowed: truly
- *     dynamic values, applied via inline style).
+ * Author avatar colors moved to the shared `AuthorAvatar` component.
  */
 function statusBadge(status: string): {
   label: string

package/src/views/MediaBrowser.tsx

@@ -776,8 +776,9 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                       })}
                     </div>
                   ) : (
-                    <div className="h-full overflow-y-auto">
-                      <table className="w-full">
+                    <div className="h-full overflow-auto">
+                      {/* min-w keeps the list columns readable; narrow viewports scroll sideways. */}
+                      <table className="w-full min-w-[640px]">
                         <thead className="border-border bg-muted sticky top-0 border-b">
                           <tr>
                             <th className="w-8 px-3 py-2 text-left">

package/src/views/MediaSeoAudit.tsx

@@ -243,7 +243,7 @@ export function MediaSeoAudit({ items, onEdit, error, onRetry }: MediaSeoAuditPr
         </span>
       </div>
 
-      <div className="overflow-hidden rounded-[10px] border border-[var(--bdr)] bg-[var(--card)]">
+      <div className="overflow-x-auto rounded-[10px] border border-[var(--bdr)] bg-[var(--card)]">
         {filtered.length === 0 ? (
           <div className="flex flex-col items-center justify-center px-4 py-14 text-center">
             <ImageIcon size={24} className="mb-3 text-[var(--muted)]" aria-hidden />
@@ -257,7 +257,8 @@ export function MediaSeoAudit({ items, onEdit, error, onRetry }: MediaSeoAuditPr
             </p>
           </div>
         ) : (
-          <table className="w-full border-collapse" aria-label="Media SEO audit">
+          // min-w keeps the 7 columns readable; narrow viewports scroll sideways.
+          <table className="w-full min-w-[820px] border-collapse" aria-label="Media SEO audit">
             <thead>
               <tr>
                 {['File', 'Type', 'Alt Text', 'Title', 'Description', 'SEO Score', 'Action'].map(