@actuate-media/cms-admin 0.20.0 → 0.21.0

package/src/views/ApiKeys.tsx

@@ -19,6 +19,9 @@ import { cmsApi } from '../lib/api.js'
 
 export interface ApiKeysProps {
   onNavigate?: (path: string) => void
+  /** When rendered inside the Settings tab shell, drop the page padding and
+   * demote the heading so it reads as a section rather than a second page. */
+  embedded?: boolean
 }
 
 interface ApiKeyRecord {
@@ -68,12 +71,14 @@ function formatDate(value: string | null): string {
   }
 }
 
-export function ApiKeys(_props: ApiKeysProps) {
+export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
   const { data, loading, error, refetch } = useApiData<ApiKeyRecord[]>('/api-keys')
   const [showCreate, setShowCreate] = useState(false)
   const [createdKey, setCreatedKey] = useState<{ key: string; record: ApiKeyRecord } | null>(null)
 
   const keys = data ?? []
+  const rootPadding = embedded ? '' : 'p-4 sm:p-6'
+  const Heading = embedded ? 'h2' : 'h1'
 
   const handleRevoke = async (id: string, name: string) => {
     if (!confirm(`Revoke API key "${name}"? This cannot be undone.`)) return
@@ -93,20 +98,20 @@ export function ApiKeys(_props: ApiKeysProps) {
 
   if (loading) {
     return (
-      <div className="flex h-64 items-center justify-center p-4 sm:p-6">
+      <div className={`flex h-64 items-center justify-center ${embedded ? '' : 'p-4 sm:p-6'}`}>
         <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
       </div>
     )
   }
 
   return (
-    <div className="p-4 sm:p-6">
+    <div className={rootPadding}>
       <div className="mb-6 flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
         <div>
-          <h1 className="flex items-center gap-2 text-xl font-semibold text-gray-900 sm:text-2xl">
+          <Heading className="flex items-center gap-2 text-xl font-semibold text-gray-900 sm:text-2xl">
             <KeyRound className="h-5 w-5 text-gray-500" />
             API Keys
-          </h1>
+          </Heading>
           <p className="mt-1 text-sm text-gray-500">
             Long-lived credentials for programmatic access. Use the{' '}
             <code className="rounded bg-gray-100 px-1 py-0.5 text-xs">Authorization: Bearer</code>{' '}

package/src/views/Dashboard.tsx

@@ -425,7 +425,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
       { label: 'New Page', icon: Plus, onClick: () => nav(`/${pagesSlug}/new`) },
       { label: 'Upload Media', icon: Upload, onClick: () => nav('/media') },
       { label: 'New Form', icon: Plus, onClick: () => nav('/forms') },
-      { label: 'View API', icon: Globe, onClick: () => nav('/api-keys') },
+      { label: 'View API', icon: Globe, onClick: () => nav('/settings?tab=api-keys') },
     ]
     return items
   }, [collections, onNavigate]) // eslint-disable-line react-hooks/exhaustive-deps
@@ -899,7 +899,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
           </div>
           <button
             className="text-brand inline-flex items-center gap-1 text-xs font-medium hover:underline"
-            onClick={() => nav('/api-keys')}
+            onClick={() => nav('/settings?tab=api-keys')}
           >
             API docs <ExternalLink className="h-3 w-3" />
           </button>

package/src/views/Settings.tsx

@@ -20,21 +20,36 @@ import {
   RefreshCw,
   GitPullRequest,
   Layers,
+  Users as UsersIcon,
+  KeyRound,
 } from 'lucide-react'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback, useMemo } from 'react'
 import { toast } from 'sonner'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 import { useTheme } from '../components/ThemeProvider.js'
 import { RelationshipField } from '../fields/RelationshipField.js'
 import { SEOConfigPanel } from '../components/SEOConfigPanel.js'
+import { Users as UsersView } from './Users.js'
+import { ApiKeys as ApiKeysView } from './ApiKeys.js'
 
 export interface SettingsProps {
   onNavigate?: (path: string) => void
   config?: any
+  /** Initial tab when arriving without a `?tab=` query param (e.g. via the
+   * legacy `/users` or `/api-keys` routes). */
+  initialTab?: string
 }
 
-export function Settings({ config, ..._props }: SettingsProps = {}) {
+/** Tabs that drive their own persistence (no global "Save Changes" footer). */
+const SELF_MANAGED_TABS = new Set(['users', 'api-keys'])
+
+function readSettingsTabFromUrl(): string | null {
+  if (typeof window === 'undefined') return null
+  return new URLSearchParams(window.location.search).get('tab')
+}
+
+export function Settings({ config, onNavigate, initialTab = 'general' }: SettingsProps = {}) {
   const { data, loading, error, refetch } = useApiData<any>('/globals/settings')
 
   const [siteTitle, setSiteTitle] = useState('My CMS')
@@ -48,7 +63,7 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
   const [twoFactorEnabled, setTwoFactorEnabled] = useState(false)
   const [sessionTimeout, setSessionTimeout] = useState(false)
   const [ipWhitelist, setIpWhitelist] = useState(false)
-  const [activeTab, setActiveTab] = useState('general')
+  const [activeTab, setActiveTab] = useState<string>(() => readSettingsTabFromUrl() ?? initialTab)
   const [saving, setSaving] = useState(false)
 
   // Layout defaults
@@ -64,6 +79,50 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
       : []
   const hasLayoutRegions = layoutRegions.length > 0
 
+  // Valid tab ids, with `layout` only available when the project configures
+  // layout regions. Used to normalise deep links and keep the URL honest.
+  const availableTabs = useMemo(
+    () =>
+      [
+        'general',
+        'appearance',
+        ...(hasLayoutRegions ? ['layout'] : []),
+        'security',
+        'users',
+        'api-keys',
+        'seo',
+        'ai',
+        'updates',
+      ] as const,
+    [hasLayoutRegions],
+  )
+  const normalizeTab = useCallback(
+    (tab: string | null | undefined): string =>
+      tab && (availableTabs as readonly string[]).includes(tab) ? tab : 'general',
+    [availableTabs],
+  )
+
+  // Drive the active tab from the `?tab=` query param so tabs are deep-linkable
+  // and survive browser back/forward (the legacy /users and /api-keys routes
+  // land here via `initialTab`).
+  useEffect(() => {
+    function sync() {
+      setActiveTab(normalizeTab(readSettingsTabFromUrl() ?? initialTab))
+    }
+    sync()
+    window.addEventListener('popstate', sync)
+    return () => window.removeEventListener('popstate', sync)
+  }, [normalizeTab, initialTab])
+
+  const changeTab = useCallback(
+    (tab: string) => {
+      const next = normalizeTab(tab)
+      setActiveTab(next)
+      onNavigate?.(`/settings?tab=${next}`)
+    },
+    [normalizeTab, onNavigate],
+  )
+
   // AI settings
   const [aiProvider, setAiProvider] = useState('anthropic')
   const [aiApiKey, setAiApiKey] = useState('')
@@ -176,7 +235,7 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
         <p className="text-sm text-gray-600">Manage your CMS configuration</p>
       </div>
 
-      <Tabs.Root value={activeTab} onValueChange={setActiveTab}>
+      <Tabs.Root value={activeTab} onValueChange={changeTab}>
         <Tabs.List className="mb-4 flex gap-1 overflow-x-auto border-b border-gray-200">
           <Tabs.Trigger value="general" className={tabTriggerClass}>
             General
@@ -195,6 +254,18 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
           <Tabs.Trigger value="security" className={tabTriggerClass}>
             Security
           </Tabs.Trigger>
+          <Tabs.Trigger value="users" className={tabTriggerClass}>
+            <span className="flex items-center gap-1.5">
+              <UsersIcon className="h-4 w-4" />
+              Users
+            </span>
+          </Tabs.Trigger>
+          <Tabs.Trigger value="api-keys" className={tabTriggerClass}>
+            <span className="flex items-center gap-1.5">
+              <KeyRound className="h-4 w-4" />
+              API Keys
+            </span>
+          </Tabs.Trigger>
           <Tabs.Trigger value="seo" className={tabTriggerClass}>
             SEO
           </Tabs.Trigger>
@@ -204,9 +275,6 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
               AI
             </span>
           </Tabs.Trigger>
-          <Tabs.Trigger value="integrations" className={tabTriggerClass}>
-            Integrations
-          </Tabs.Trigger>
           <Tabs.Trigger value="updates" className={tabTriggerClass}>
             <span className="flex items-center gap-1.5">
               <Download className="h-4 w-4" />
@@ -628,29 +696,12 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
           </div>
         </Tabs.Content>
 
-        <Tabs.Content value="integrations" className="space-y-4">
-          <div className="rounded-lg border border-gray-200 bg-white p-4">
-            <h3 className="mb-4 text-sm font-semibold text-gray-900">API Keys</h3>
-            <div className="space-y-4">
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">API Key</label>
-                <div className="flex gap-2">
-                  <input
-                    type="text"
-                    value="•••••••••••••••••••••••••"
-                    readOnly
-                    className="flex-1 rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 text-sm"
-                  />
-                  <button
-                    type="button"
-                    className="rounded-lg border border-gray-300 px-4 py-2 text-sm transition-colors hover:bg-gray-50"
-                  >
-                    Regenerate
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
+        <Tabs.Content value="users">
+          <UsersView onNavigate={onNavigate} embedded />
+        </Tabs.Content>
+
+        <Tabs.Content value="api-keys">
+          <ApiKeysView onNavigate={onNavigate} embedded />
         </Tabs.Content>
 
         <Tabs.Content value="updates" className="space-y-4">
@@ -658,16 +709,18 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
         </Tabs.Content>
       </Tabs.Root>
 
-      <div className="mt-6 flex justify-end">
-        <button
-          type="button"
-          onClick={handleSave}
-          disabled={saving}
-          className="rounded-lg bg-blue-600 px-6 py-2 text-sm text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
-        >
-          {saving ? 'Saving...' : 'Save Changes'}
-        </button>
-      </div>
+      {!SELF_MANAGED_TABS.has(activeTab) && (
+        <div className="mt-6 flex justify-end">
+          <button
+            type="button"
+            onClick={handleSave}
+            disabled={saving}
+            className="rounded-lg bg-blue-600 px-6 py-2 text-sm text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+          >
+            {saving ? 'Saving...' : 'Save Changes'}
+          </button>
+        </div>
+      )}
     </div>
   )
 }

package/src/views/Users.tsx

@@ -22,9 +22,12 @@ type UserSortKey = 'name' | 'role' | 'status' | 'lastLogin'
 
 export interface UsersProps {
   onNavigate?: (path: string) => void
+  /** When rendered inside the Settings tab shell, drop the page padding and
+   * demote the heading so it reads as a section rather than a second page. */
+  embedded?: boolean
 }
 
-export function Users({ onNavigate }: UsersProps) {
+export function Users({ onNavigate, embedded = false }: UsersProps = {}) {
   const { data, loading, error, refetch } = useApiData<any[]>('/users')
   const [showInviteDialog, setShowInviteDialog] = useState(false)
   const [inviteEmail, setInviteEmail] = useState('')
@@ -98,16 +101,19 @@ export function Users({ onNavigate }: UsersProps) {
     )
   }
 
+  const rootPadding = embedded ? '' : 'p-3 pr-6 sm:p-4 sm:pr-8'
+  const Heading = embedded ? 'h2' : 'h1'
+
   if (loading) {
     return (
-      <div className="flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8">
+      <div className={`flex h-64 items-center justify-center ${rootPadding}`}>
         <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
       </div>
     )
   }
 
   return (
-    <div className="p-3 pr-6 sm:p-4 sm:pr-8">
+    <div className={rootPadding}>
       {error && (
         <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
           <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
@@ -123,7 +129,7 @@ export function Users({ onNavigate }: UsersProps) {
 
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <h1 className="mb-1 text-2xl font-semibold text-gray-900">Users</h1>
+          <Heading className="mb-1 text-2xl font-semibold text-gray-900">Users</Heading>
           <p className="text-sm text-gray-600">{filteredAndSorted.length} total users</p>
         </div>
         <button

package/src/views/seo/AuditTab.tsx

@@ -111,12 +111,12 @@ export function AuditTab({
 
       <SectionCard>
         <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <div className="flex flex-wrap gap-1" role="tablist" aria-label="Filter by severity">
+          <div className="flex flex-wrap gap-1" role="group" aria-label="Filter by severity">
             {SEVERITY_FILTERS.map((f) => (
               <button
                 key={f.id}
-                role="tab"
-                aria-selected={severity === f.id}
+                type="button"
+                aria-pressed={severity === f.id}
                 onClick={() => setSeverity(f.id)}
                 className={`focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${
                   severity === f.id
@@ -128,12 +128,12 @@ export function AuditTab({
               </button>
             ))}
           </div>
-          <div className="flex flex-wrap gap-1" role="tablist" aria-label="Filter by status">
+          <div className="flex flex-wrap gap-1" role="group" aria-label="Filter by status">
             {STATUS_FILTERS.map((f) => (
               <button
                 key={f.id}
-                role="tab"
-                aria-selected={status === f.id}
+                type="button"
+                aria-pressed={status === f.id}
                 onClick={() => setStatus(f.id)}
                 className={`focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${
                   status === f.id

package/src/views/seo/ContentTab.tsx

@@ -62,12 +62,12 @@ export function ContentTab({
             aria-label="Search content"
           />
         </div>
-        <div className="flex gap-1" role="tablist" aria-label="Content type filter">
+        <div className="flex gap-1" role="group" aria-label="Content type filter">
           {FILTERS.map((f) => (
             <button
               key={f.id}
-              role="tab"
-              aria-selected={filter === f.id}
+              type="button"
+              aria-pressed={filter === f.id}
               onClick={() => setFilter(f.id)}
               className={`focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${
                 filter === f.id

package/src/views/seo/RedirectsTab.tsx

@@ -238,11 +238,17 @@ export function RedirectsTab() {
     const res = await exportRedirectsCsv()
     if (res.error || !res.csv) return toast.error(res.error ?? 'Export failed.')
     const blob = new Blob([res.csv], { type: 'text/csv' })
+    const url = URL.createObjectURL(blob)
     const link = document.createElement('a')
-    link.href = URL.createObjectURL(blob)
+    link.href = url
     link.download = 'redirects.csv'
+    // Firefox requires the anchor to be in the document for programmatic clicks.
+    document.body.appendChild(link)
     link.click()
-    URL.revokeObjectURL(link.href)
+    document.body.removeChild(link)
+    // Defer revocation so the browser has a chance to start the download —
+    // revoking synchronously can cancel it before it begins.
+    setTimeout(() => URL.revokeObjectURL(url), 0)
   }
 
   async function handleImportFile(file: File) {

package/src/views/seo/TechnicalTab.tsx

@@ -1,7 +1,8 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-import { RefreshCw, Map, FileCode2, AlertTriangle, CheckCircle2, ExternalLink } from 'lucide-react'
+import { useEffect, useId, useState } from 'react'
+import { RefreshCw, Map, AlertTriangle, CheckCircle2, ExternalLink } from 'lucide-react'
+import * as Switch from '@radix-ui/react-switch'
 import { toast } from 'sonner'
 import {
   fetchSitemapStatus,
@@ -55,27 +56,37 @@ function Toggle({
   onChange,
   label,
   help,
+  disabled,
 }: {
   checked: boolean
   onChange: (v: boolean) => void
   label: string
   help: string
+  disabled?: boolean
 }) {
+  const labelId = useId()
+  const helpId = useId()
   return (
-    <label className="flex items-center justify-between gap-3 py-2.5">
+    <div className="flex items-center justify-between gap-3 py-2.5">
       <span className="min-w-0">
-        <span className="text-foreground block text-sm font-medium">{label}</span>
-        <span className="text-muted-foreground block text-sm">{help}</span>
+        <span id={labelId} className="text-foreground block text-sm font-medium">
+          {label}
+        </span>
+        <span id={helpId} className="text-muted-foreground block text-sm">
+          {help}
+        </span>
       </span>
-      <input
-        type="checkbox"
-        role="switch"
-        aria-checked={checked}
+      <Switch.Root
         checked={checked}
-        onChange={(e) => onChange(e.target.checked)}
-        className="accent-primary h-4 w-4 shrink-0"
-      />
-    </label>
+        onCheckedChange={onChange}
+        disabled={disabled}
+        aria-labelledby={labelId}
+        aria-describedby={helpId}
+        className="bg-input-background data-[state=checked]:bg-primary focus-visible:ring-ring relative h-[18px] w-8 shrink-0 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <Switch.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[14px]" />
+      </Switch.Root>
+    </div>
   )
 }
 
@@ -190,6 +201,7 @@ function CrawlCard() {
               label={t.label}
               help={t.help}
               checked={settings[t.key]}
+              disabled={saving}
               onChange={(v) => save({ ...settings, [t.key]: v }, t.key)}
             />
           ))}

package/src/views/seo/useSeoResource.ts

@@ -21,31 +21,45 @@ export function useSeoResource<T>(
   const [data, setData] = useState<T | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
-  const aliveRef = useRef(true)
+  // Tracks whether the component is still mounted (guards setState after
+  // unmount). Set once on mount; never toggled by dependency-driven reloads.
+  const mountedRef = useRef(true)
+  // Monotonic id of the most recently *started* request. A response is only
+  // applied when its id still matches — otherwise a slow earlier request that
+  // resolves after a faster later one (rapid filter switches) would clobber
+  // the newer, correct data.
+  const requestIdRef = useRef(0)
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const stableFetcher = useCallback(fetcher, deps)
 
   const load = useCallback(async () => {
+    const requestId = ++requestIdRef.current
+    const isCurrent = () => mountedRef.current && requestId === requestIdRef.current
     setLoading(true)
     setError(null)
     try {
       const result = await stableFetcher()
-      if (aliveRef.current) setData(result)
+      if (isCurrent()) setData(result)
     } catch (err) {
-      if (aliveRef.current) {
+      if (isCurrent()) {
         setError(err instanceof Error ? err.message : 'Failed to load data')
       }
     } finally {
-      if (aliveRef.current) setLoading(false)
+      if (isCurrent()) setLoading(false)
     }
   }, [stableFetcher])
 
+  // Mount/unmount guard only — independent of `load` so a dependency change
+  // (which recreates `load`) never flips `mountedRef` to false mid-flight.
   useEffect(() => {
-    aliveRef.current = true
-    load()
+    mountedRef.current = true
     return () => {
-      aliveRef.current = false
+      mountedRef.current = false
     }
+  }, [])
+
+  useEffect(() => {
+    load()
   }, [load])
 
   return { data, loading, error, refetch: load }