@prenta/admin 2.6.0 → 2.7.0

package/src/views/Settings.tsx

@@ -1,18 +1,7 @@
 'use client'
 
-import * as Tabs from '@radix-ui/react-tabs'
-import {
-  Bot,
-  Loader2,
-  AlertTriangle,
-  Download,
-  Layers,
-  Mail,
-  Users as UsersIcon,
-  KeyRound,
-  Plug,
-} from 'lucide-react'
-import { useState, useEffect, useCallback, useMemo } from 'react'
+import { Loader2, AlertTriangle } from 'lucide-react'
+import { useState, useEffect, useCallback, useMemo, type ReactNode } from 'react'
 import { toast } from 'sonner'
 import { parseRouteQuery } from '../router/index.js'
 import { useApiData } from '../lib/useApiData.js'
@@ -25,6 +14,10 @@ import { EmailSettingsTab } from './settings/EmailSettingsTab.js'
 import { AppearanceTab } from './settings/AppearanceTab.js'
 import { SecurityTab } from './settings/SecurityTab.js'
 import { SettingsCard } from './settings/components.js'
+import { PageHeader } from '../components/ui/PageHeader.js'
+import { UnderlineTabPanel, UnderlineTabs } from '../components/ui/UnderlineTabs.js'
+import { UnsavedBar } from '../components/ui/UnsavedBar.js'
+import { SETTINGS_TABS } from '../layout/nav-config.js'
 import { UpdatesTab } from './settings/UpdatesTab.js'
 import { WebhooksTab } from './settings/WebhooksTab.js'
 import { Users as UsersView } from './Users.js'
@@ -44,18 +37,30 @@ export interface SettingsProps {
   currentPath?: string
 }
 
+/** Every tab id, in strip order. `layout` exists only with layout regions. */
+const SETTINGS_TAB_IDS: readonly string[] = SETTINGS_TABS.map((tab) => tab.id)
+
+/** Kit tab ids (Settings.html `#hash`) that differ from the `?tab=` ids. */
+const KIT_HASH_TABS: Record<string, string> = { keys: 'api-keys' }
+
 /**
- * Tabs that persist through the shared footer's `handleSave` (which writes
- * `defaultLayout` into the settings global). Every other tab owns its own
- * saving, so the footer must NOT render there — otherwise it shows a
- * "Settings saved successfully!" toast while persisting nothing relevant.
- * This is an allowlist on purpose: new tabs default to self-managed.
+ * The tab in the URL: `?tab=appearance`, else the kit's `#appearance` form,
+ * so links written against the prototype land on the same tab. A hash that
+ * names no tab is ignored, so the route's own `initialTab` still applies.
  */
-const GLOBAL_SAVE_TABS = new Set(['layout'])
-
 function readSettingsTabFromUrl(): string | null {
   if (typeof window === 'undefined') return null
-  return parseRouteQuery(window.location.search).get('tab')
+  const fromQuery = parseRouteQuery(window.location.search).get('tab')
+  if (fromQuery) return fromQuery
+  const hash = window.location.hash.slice(1)
+  const fromHash = KIT_HASH_TABS[hash] ?? hash
+  return SETTINGS_TAB_IDS.includes(fromHash) ? fromHash : null
+}
+
+/** Same regions with the same variants, whatever the key order. */
+function sameLayout(a: Record<string, string>, b: Record<string, string>): boolean {
+  const keys = Object.keys(a)
+  return keys.length === Object.keys(b).length && keys.every((k) => a[k] === b[k])
 }
 
 export function Settings({
@@ -70,8 +75,10 @@ export function Settings({
   const [activeTab, setActiveTab] = useState<string>(() => readSettingsTabFromUrl() ?? initialTab)
   const [saving, setSaving] = useState(false)
 
-  // Layout defaults
+  // Layout defaults, and the last saved copy the Layout tab's bar diffs against.
   const [defaultLayout, setDefaultLayout] = useState<Record<string, string>>({})
+  const [savedLayout, setSavedLayout] = useState<Record<string, string>>({})
+  const layoutDirty = !sameLayout(defaultLayout, savedLayout)
   const layoutConfig = config?.layout
   const layoutRegions: Array<{ name: string; collection: string; label: string }> =
     layoutConfig?.regions
@@ -86,40 +93,48 @@ export function Settings({
   // 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',
-        'mcp',
-        'api-keys',
-        'seo',
-        'email',
-        'webhooks',
-        'ai',
-        'updates',
-      ] as const,
+    () => SETTINGS_TABS.filter((tab) => tab.id !== 'layout' || hasLayoutRegions),
     [hasLayoutRegions],
   )
   const normalizeTab = useCallback(
     (tab: string | null | undefined): string =>
-      tab && (availableTabs as readonly string[]).includes(tab) ? tab : 'general',
+      tab && availableTabs.some((available) => available.id === tab) ? tab : 'general',
+    [availableTabs],
+  )
+  // Settings.html `TABS`: each tab with its 15px icon.
+  const stripTabs = useMemo(
+    () =>
+      availableTabs.map(({ id, label, icon: Icon }) => ({
+        id,
+        label,
+        icon: <Icon strokeWidth={1.8} />,
+      })),
     [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`).
+  // land here via `initialTab`). Re-read on in-app navigation too: the mobile
+  // nav drawer links straight to `/settings?tab=…`.
   useEffect(() => {
     function sync() {
-      setActiveTab(normalizeTab(readSettingsTabFromUrl() ?? initialTab))
+      const fromUrl = readSettingsTabFromUrl()
+      // A hash that names no tab (the skip link's `#prenta-main`, an in-page
+      // anchor) is not a tab change: keep the open tab, if it exists here.
+      if (fromUrl === null && window.location.hash) {
+        setActiveTab((current) => normalizeTab(current))
+        return
+      }
+      setActiveTab(normalizeTab(fromUrl ?? initialTab))
     }
     sync()
     window.addEventListener('popstate', sync)
-    return () => window.removeEventListener('popstate', sync)
-  }, [normalizeTab, initialTab])
+    window.addEventListener('hashchange', sync)
+    return () => {
+      window.removeEventListener('popstate', sync)
+      window.removeEventListener('hashchange', sync)
+    }
+  }, [normalizeTab, initialTab, currentPath])
 
   const changeTab = useCallback(
     (tab: string) => {
@@ -134,252 +149,196 @@ export function Settings({
     if (data) {
       if (data.defaultLayout && typeof data.defaultLayout === 'object') {
         setDefaultLayout(data.defaultLayout)
+        setSavedLayout(data.defaultLayout)
       }
     }
   }, [data])
 
-  const handleSave = async () => {
+  const saveLayout = async () => {
     setSaving(true)
-    const layoutPayload = Object.keys(defaultLayout).length > 0 ? { defaultLayout } : {}
+    const layout = defaultLayout
     // Read-modify-write: the General tab owns site info / SEO defaults in the
     // same global blob, so merge against a fresh fetch instead of overwriting.
+    // A failed read must not turn into a write of `defaultLayout` alone.
     const current = await cmsApi<Record<string, unknown>>('/globals/settings')
+    if (current.error) {
+      setSaving(false)
+      toast.error(current.error)
+      return
+    }
+    // Always sent, so clearing every default is saved too (the server reads a
+    // missing `defaultLayout` as `{}`).
     const res = await cmsApi('/globals/settings', {
       method: 'PUT',
-      body: JSON.stringify({
-        ...(current.data ?? {}),
-        ...layoutPayload,
-      }),
+      body: JSON.stringify({ ...(current.data ?? {}), defaultLayout: layout }),
     })
     setSaving(false)
     if (res.error) {
       toast.error(res.error)
     } else {
-      toast.success('Settings saved successfully!')
+      setSavedLayout(layout)
+      toast.success('Saved')
     }
   }
 
-  const tabTriggerClass =
-    'text-muted-foreground hover:text-foreground data-[state=active]:border-brand data-[state=active]:text-brand px-4 py-2 text-base font-medium transition-colors data-[state=active]:border-b-2'
+  // One panel at a time, as Radix Tabs rendered them: each tab loads its own
+  // data when it opens. `className` keeps each panel's previous spacing.
+  const panels: Record<string, { body: ReactNode; className?: string }> = {
+    general: { body: <GeneralSettingsTab onNavigate={onNavigate} role={session?.user?.role} /> },
+    appearance: {
+      body: <AppearanceTab role={session?.user?.role} config={config} />,
+      className: 'space-y-4',
+    },
+    layout: {
+      body: (
+        <>
+          <SettingsCard
+            title="Default Layout Variants"
+            description="Select the default header, footer, and other layout variants used site-wide. Pages can override these individually or inherit from parent pages."
+          >
+            <div className="space-y-4">
+              {layoutRegions.map((region) => (
+                <RelationshipField
+                  key={region.name}
+                  label={`Default ${region.label}`}
+                  value={defaultLayout[region.name] ?? ''}
+                  onChange={(val) => {
+                    setDefaultLayout((prev) => {
+                      const next = { ...prev }
+                      if (val && typeof val === 'string') {
+                        next[region.name] = val
+                      } else {
+                        delete next[region.name]
+                      }
+                      return next
+                    })
+                  }}
+                  relationTo={region.collection}
+                  helpText={`The ${region.label.toLowerCase()} variant used when no page in the ancestor chain specifies one`}
+                />
+              ))}
+            </div>
+          </SettingsCard>
+          <SettingsCard title="How Layout Inheritance Works">
+            <ul className="text-muted-foreground space-y-1.5 text-sm">
+              <li className="flex items-start gap-2">
+                <span className="bg-brand/10 text-brand mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-medium">
+                  1
+                </span>
+                <span>
+                  Each page can assign specific layout variants (header, footer, etc.) from the
+                  document editor.
+                </span>
+              </li>
+              <li className="flex items-start gap-2">
+                <span className="bg-brand/10 text-brand mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-medium">
+                  2
+                </span>
+                <span>
+                  Child pages automatically inherit their parent&apos;s layout. For example,{' '}
+                  <code className="bg-muted rounded px-1 font-mono">/hampton-roads/thank-you</code>{' '}
+                  inherits from{' '}
+                  <code className="bg-muted rounded px-1 font-mono">/hampton-roads</code>.
+                </span>
+              </li>
+              <li className="flex items-start gap-2">
+                <span className="bg-brand/10 text-brand mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-medium">
+                  3
+                </span>
+                <span>
+                  If no page in the ancestor chain sets a variant, the defaults configured above are
+                  used.
+                </span>
+              </li>
+            </ul>
+          </SettingsCard>
+          <UnsavedBar
+            dirty={layoutDirty}
+            saving={saving}
+            onSave={saveLayout}
+            onDiscard={() => setDefaultLayout(savedLayout)}
+            discardLabel="Reset"
+            saveLabel="Save changes"
+            variant="card"
+          />
+        </>
+      ),
+      className: 'space-y-4',
+    },
+    security: {
+      body: <SecurityTab role={session?.user?.role} onNavigate={onNavigate} />,
+      className: 'space-y-4',
+    },
+    seo: {
+      body: <SeoSettingsTab onNavigate={onNavigate} role={session?.user?.role} />,
+      className: 'space-y-4',
+    },
+    email: { body: <EmailSettingsTab role={session?.user?.role} />, className: 'space-y-4' },
+    webhooks: { body: <WebhooksTab role={session?.user?.role} />, className: 'space-y-4' },
+    ai: {
+      body: <AISettingsTab role={session?.user?.role} config={config} />,
+      className: 'space-y-4',
+    },
+    users: { body: <UsersView onNavigate={onNavigate} embedded currentPath={currentPath} /> },
+    mcp: { body: <McpConnectTab onNavigate={onNavigate} /> },
+    'api-keys': { body: <ApiKeysView onNavigate={onNavigate} embedded /> },
+    updates: { body: <UpdatesTab role={session?.user?.role} />, className: 'space-y-4' },
+  }
+  const panel = panels[activeTab]
 
   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 px-[var(--gut)] pt-6">
         <Loader2 className="text-primary h-6 w-6 animate-spin" />
       </div>
     )
   }
 
+  // Settings.html: `.pg-hdr` (24px var(--gut) 0, 16px above the strip), the
+  // full-width `.pg-tabs` strip with the gutter inside it, then `.scroll-area`
+  // (20px var(--gut)). Its 48px bottom padding is left at 16px: the kit
+  // cancels it under the sticky save bar with a -48px margin, which would
+  // pull Updates' help card over the bar.
   return (
-    <div className="p-3 pr-6 sm:p-4 sm:pr-8">
-      {error && (
-        <div
-          role="alert"
-          className="border-destructive/30 bg-destructive/10 text-destructive mb-4 flex items-center gap-3 rounded-lg border p-3 text-sm"
-        >
-          <AlertTriangle size={20} className="shrink-0" aria-hidden="true" />
-          <span className="flex-1">{error}</span>
-          <button
-            onClick={refetch}
-            className="border-destructive/40 rounded-md border px-3 py-1 transition-colors hover:opacity-80"
+    <div className="pb-4">
+      <div className="px-[var(--gut)] pt-6 pb-4">
+        {error && (
+          <div
+            role="alert"
+            className="border-destructive/30 bg-destructive/10 text-destructive mb-4 flex items-center gap-3 rounded-lg border p-3 text-sm"
           >
-            Retry
-          </button>
-        </div>
-      )}
-
-      <div className="mb-4">
-        <h1 className="text-foreground mb-1">Settings</h1>
-        <p className="text-muted-foreground text-sm">Manage your CMS configuration</p>
-      </div>
-
-      <Tabs.Root value={activeTab} onValueChange={changeTab}>
-        <Tabs.List className="border-border mb-4 flex gap-1 overflow-x-auto border-b">
-          <Tabs.Trigger value="general" className={tabTriggerClass}>
-            General
-          </Tabs.Trigger>
-          <Tabs.Trigger value="appearance" className={tabTriggerClass}>
-            Appearance
-          </Tabs.Trigger>
-          {hasLayoutRegions && (
-            <Tabs.Trigger value="layout" className={tabTriggerClass}>
-              <span className="flex items-center gap-1.5">
-                <Layers className="h-4 w-4" />
-                Layout
-              </span>
-            </Tabs.Trigger>
-          )}
-          <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="mcp" className={tabTriggerClass}>
-            <span className="flex items-center gap-1.5">
-              <Plug className="h-4 w-4" />
-              MCP
-            </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>
-          <Tabs.Trigger value="email" className={tabTriggerClass}>
-            <span className="flex items-center gap-1.5">
-              <Mail className="h-4 w-4" />
-              Email
-            </span>
-          </Tabs.Trigger>
-          <Tabs.Trigger value="webhooks" className={tabTriggerClass}>
-            Webhooks
-          </Tabs.Trigger>
-          <Tabs.Trigger value="ai" className={tabTriggerClass}>
-            <span className="flex items-center gap-1.5">
-              <Bot className="h-4 w-4" />
-              AI
-            </span>
-          </Tabs.Trigger>
-          <Tabs.Trigger value="updates" className={tabTriggerClass}>
-            <span className="flex items-center gap-1.5">
-              <Download className="h-4 w-4" />
-              Updates
-            </span>
-          </Tabs.Trigger>
-        </Tabs.List>
-
-        <Tabs.Content value="general">
-          <GeneralSettingsTab onNavigate={onNavigate} role={session?.user?.role} />
-        </Tabs.Content>
-
-        <Tabs.Content value="appearance" className="space-y-4">
-          <AppearanceTab role={session?.user?.role} config={config} />
-        </Tabs.Content>
-
-        {hasLayoutRegions && (
-          <Tabs.Content value="layout" className="space-y-4">
-            <SettingsCard
-              title="Default Layout Variants"
-              description="Select the default header, footer, and other layout variants used site-wide. Pages can override these individually or inherit from parent pages."
+            <AlertTriangle size={20} className="shrink-0" aria-hidden="true" />
+            <span className="flex-1">{error}</span>
+            <button
+              onClick={refetch}
+              className="border-destructive/40 rounded-md border px-3 py-1 transition-colors hover:opacity-80"
             >
-              <div className="space-y-4">
-                {layoutRegions.map((region) => (
-                  <RelationshipField
-                    key={region.name}
-                    label={`Default ${region.label}`}
-                    value={defaultLayout[region.name] ?? ''}
-                    onChange={(val) => {
-                      setDefaultLayout((prev) => {
-                        const next = { ...prev }
-                        if (val && typeof val === 'string') {
-                          next[region.name] = val
-                        } else {
-                          delete next[region.name]
-                        }
-                        return next
-                      })
-                    }}
-                    relationTo={region.collection}
-                    helpText={`The ${region.label.toLowerCase()} variant used when no page in the ancestor chain specifies one`}
-                  />
-                ))}
-              </div>
-            </SettingsCard>
-            <SettingsCard title="How Layout Inheritance Works">
-              <ul className="text-muted-foreground space-y-1.5 text-sm">
-                <li className="flex items-start gap-2">
-                  <span className="bg-brand/10 text-brand mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-medium">
-                    1
-                  </span>
-                  <span>
-                    Each page can assign specific layout variants (header, footer, etc.) from the
-                    document editor.
-                  </span>
-                </li>
-                <li className="flex items-start gap-2">
-                  <span className="bg-brand/10 text-brand mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-medium">
-                    2
-                  </span>
-                  <span>
-                    Child pages automatically inherit their parent&apos;s layout. For example,{' '}
-                    <code className="bg-muted rounded px-1 font-mono">
-                      /hampton-roads/thank-you
-                    </code>{' '}
-                    inherits from{' '}
-                    <code className="bg-muted rounded px-1 font-mono">/hampton-roads</code>.
-                  </span>
-                </li>
-                <li className="flex items-start gap-2">
-                  <span className="bg-brand/10 text-brand mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-medium">
-                    3
-                  </span>
-                  <span>
-                    If no page in the ancestor chain sets a variant, the defaults configured above
-                    are used.
-                  </span>
-                </li>
-              </ul>
-            </SettingsCard>
-          </Tabs.Content>
+              Retry
+            </button>
+          </div>
         )}
+        <PageHeader flush title="Settings" subtitle="Manage your CMS configuration" />
+      </div>
 
-        <Tabs.Content value="security" className="space-y-4">
-          <SecurityTab role={session?.user?.role} onNavigate={onNavigate} />
-        </Tabs.Content>
-
-        <Tabs.Content value="seo" className="space-y-4">
-          <SeoSettingsTab onNavigate={onNavigate} role={session?.user?.role} />
-        </Tabs.Content>
-
-        <Tabs.Content value="email" className="space-y-4">
-          <EmailSettingsTab role={session?.user?.role} />
-        </Tabs.Content>
-
-        <Tabs.Content value="webhooks" className="space-y-4">
-          <WebhooksTab role={session?.user?.role} />
-        </Tabs.Content>
-
-        <Tabs.Content value="ai" className="space-y-4">
-          <AISettingsTab role={session?.user?.role} config={config} />
-        </Tabs.Content>
-
-        <Tabs.Content value="users">
-          <UsersView onNavigate={onNavigate} embedded currentPath={currentPath} />
-        </Tabs.Content>
-
-        <Tabs.Content value="mcp">
-          <McpConnectTab onNavigate={onNavigate} />
-        </Tabs.Content>
-
-        <Tabs.Content value="api-keys">
-          <ApiKeysView onNavigate={onNavigate} embedded />
-        </Tabs.Content>
-
-        <Tabs.Content value="updates" className="space-y-4">
-          <UpdatesTab role={session?.user?.role} />
-        </Tabs.Content>
-      </Tabs.Root>
+      <UnderlineTabs
+        variant="page"
+        label="Settings"
+        idBase="settings"
+        tabs={stripTabs}
+        value={activeTab}
+        onChange={changeTab}
+        className="px-[var(--gut)]"
+      />
 
-      {GLOBAL_SAVE_TABS.has(activeTab) && (
-        <div className="mt-6 flex justify-end">
-          <button
-            type="button"
-            onClick={handleSave}
-            disabled={saving}
-            className="bg-primary hover:bg-primary/90 rounded-lg px-6 py-2 text-sm text-white transition-colors disabled:opacity-50"
-          >
-            {saving ? 'Saving...' : 'Save Changes'}
-          </button>
-        </div>
-      )}
+      {panel ? (
+        <UnderlineTabPanel
+          idBase="settings"
+          tabId={activeTab}
+          className={`px-[var(--gut)] pt-5 ${panel.className ?? ''}`}
+        >
+          {panel.body}
+        </UnderlineTabPanel>
+      ) : null}
     </div>
   )
 }

package/src/views/SpamFolder.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { Breadcrumb } from '../components/ui/Breadcrumb.js'
+import { PageHeader } from '../components/ui/PageHeader.js'
+import { EmptyState } from '../components/ui/EmptyState.js'
+import { ShieldAlert } from 'lucide-react'
+
+export function SpamFolder() {
+  return (
+    <div className="flex flex-col gap-6 p-6">
+      <PageHeader
+        flush
+        title="Spam"
+        subtitle="Entries caught by the blocklist stay out of the inbox."
+        breadcrumb={
+          <Breadcrumb
+            items={[
+              { label: 'Dashboard', path: '/' },
+              { label: 'Forms', path: '/forms' },
+              { label: 'Spam' },
+            ]}
+          />
+        }
+      />
+      <EmptyState
+        icon={<ShieldAlert size={24} aria-hidden />}
+        title="Spam folder is empty"
+        description="Not spam restores an entry and sends a held notification once."
+      />
+    </div>
+  )
+}

package/src/views/Trash.tsx

@@ -4,11 +4,14 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { Loader2, RotateCcw, Trash2 } from 'lucide-react'
 import { toast } from 'sonner'
 import { cmsApi } from '../lib/api.js'
+import { Breadcrumb } from '../components/ui/Breadcrumb.js'
 import { ConfirmDialog } from '../components/ui/ConfirmDialog.js'
 import { EmptyState } from '../components/ui/EmptyState.js'
 
 export interface TrashProps {
   onNavigate: (path: string) => void
+  /** The section this Trash belongs to (Pages or Posts), for the breadcrumb. */
+  parent?: { label: string; path: string }
   config?: {
     collections?:
       | Record<string, { slug?: string; admin?: { hidden?: boolean } } | undefined>
@@ -68,7 +71,7 @@ function asRow(collection: string, doc: Record<string, unknown>): TrashRow {
   }
 }
 
-export function Trash({ onNavigate, config }: TrashProps) {
+export function Trash({ onNavigate, config, parent }: TrashProps) {
   const collections = useMemo(() => {
     const raw = config?.collections
     const list = Array.isArray(raw) ? raw : Object.values(raw ?? {})
@@ -158,6 +161,14 @@ export function Trash({ onNavigate, config }: TrashProps) {
   return (
     <div className="p-4 pr-8">
       <div className="mb-4">
+        <Breadcrumb
+          className="mb-1"
+          items={[
+            { label: 'Dashboard', path: '/' },
+            ...(parent ? [parent] : []),
+            { label: 'Trash' },
+          ]}
+        />
         <h1 className="text-foreground mb-1">Trash</h1>
         <p className="text-muted-foreground text-sm">
           Soft-deleted pages and posts stay here for 30 days. Restore one, or delete it permanently

package/src/views/Users.tsx

@@ -505,7 +505,7 @@ function InviteModal({
           </div>
 
           {seatsFull && (
-            <div className="border-warning/30 bg-warning/10 text-warning mb-4 flex items-start gap-2 rounded-md border p-3 text-sm">
+            <div className="border-warning/30 bg-warn-l text-warning mb-4 flex items-start gap-2 rounded-md border p-3 text-sm">
               <AlertTriangle size={16} className="mt-0.5 shrink-0" aria-hidden />
               <span>
                 All seats are in use. Remove a member or raise the seat limit before inviting.
@@ -1081,7 +1081,7 @@ export function Users({ embedded = false, currentPath }: UsersProps = {}) {
                                 </span>
                               )}
                               {row.externalDomain && (
-                                <span className="bg-warning/10 text-warning rounded px-1 text-[10px]">
+                                <span className="bg-warn-l text-warning rounded px-1 text-[10px]">
                                   External
                                 </span>
                               )}