@prenta/admin 2.7.0 → 2.8.0

package/src/views/AppearanceChrome.tsx

@@ -1,38 +1,691 @@
 'use client'
 
-import { useMemo, useState } from 'react'
-import type { RegionSchema } from '@prenta/core'
+import { Code } from 'lucide-react'
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { toast } from 'sonner'
+import type {
+  Announcement,
+  ChromeOverridesList,
+  ChromeRegionName,
+  ChromeSettings,
+  ChromeSyncStatus,
+  RegionSchema,
+  RegionValues,
+} from '@prenta/core'
+
 import { Breadcrumb } from '../components/ui/Breadcrumb.js'
+import { Button } from '../components/ui/Button.js'
 import { PageHeader } from '../components/ui/PageHeader.js'
-import { UnderlineTabs } from '../components/ui/UnderlineTabs.js'
+import { UnderlineTabPanel, UnderlineTabs } from '../components/ui/UnderlineTabs.js'
+import { UnsavedBar } from '../components/ui/UnsavedBar.js'
+import { useAdminLinks } from '../components/ui/admin-links.js'
+import {
+  fetchAnnouncement,
+  fetchChromeMenus,
+  fetchChromeOverrides,
+  fetchChromeSchema,
+  fetchChromeSettings,
+  fetchRegion,
+  fetchSiteTitle,
+  removeOrphan,
+  saveAnnouncement,
+  saveChromeSettings,
+  saveRegion,
+  type ChromeMenuOption,
+} from '../lib/chrome-service.js'
+import { editPathForDoc } from '../lib/collection-routes.js'
+import { parseRouteQuery } from '../router/index.js'
+import { AnnouncementTab } from './header-footer/AnnouncementTab.js'
+import { ChromePreview } from './header-footer/ChromePreview.js'
+import { DeveloperTab, type ChromeSettingsForm } from './header-footer/DeveloperTab.js'
+import { RegionTab } from './header-footer/RegionTab.js'
+import {
+  announcementForm,
+  announcementProblem,
+  announcementSaveBody,
+  previewChrome,
+  regionForm,
+  regionProblems,
+  regionSaveBody,
+  sameValue,
+  type AnnouncementForm,
+  type RegionForm,
+} from './header-footer/chrome-form.js'
+import { CARD } from './header-footer/controls.js'
 
-// Placeholder until P-11 builds the schema-driven screen on `/chrome/*`.
-const NO_REGIONS: RegionSchema[] = []
+type TabId = 'announcement' | 'header' | 'footer' | 'developer'
+const TAB_IDS: readonly TabId[] = ['announcement', 'header', 'footer', 'developer']
+const REGIONS: readonly ChromeRegionName[] = ['header', 'footer']
+const REGION_LABEL: Record<ChromeRegionName, string> = { header: 'Header', footer: 'Footer' }
+const TAB_PATH = '/appearance/header'
 
-export function AppearanceChrome({
-  regions = NO_REGIONS,
-}: {
-  regions?: RegionSchema[]
+/** Saving values, the announcement or "Remove now" needs a role that can publish. */
+const EDIT_ROLES = new Set(['OWNER', 'ADMIN', 'EDITOR'])
+/** The Developer tab's settings are admin-only. */
+const ADMIN_ROLES = new Set(['OWNER', 'ADMIN'])
+
+interface RegionState {
+  schema: RegionSchema
+  values: RegionValues
+  etag: string | null
+  saved: RegionForm
+  draft: RegionForm
+}
+
+interface AnnouncementState {
+  value: Announcement
+  etag: string | null
+  saved: AnnouncementForm
+  draft: AnnouncementForm
+}
+
+interface SettingsState {
+  saved: ChromeSettingsForm
+  draft: ChromeSettingsForm
+  previewUrl: string | null
+}
+
+interface Loaded {
+  sync: ChromeSyncStatus | null
+  regions: Partial<Record<ChromeRegionName, RegionState>>
+  /** A region the schema has whose values didn't load. */
+  regionErrors: Partial<Record<ChromeRegionName, string>>
+  announcement: AnnouncementState | null
+  settings: SettingsState | null
+  /** `unavailable` on a core without the endpoint; `error` when it failed. */
+  overrides: ChromeOverridesList | 'unavailable' | 'error'
+  menus: ChromeMenuOption[]
+  siteTitle: string
+}
+
+function settingsForm(settings: ChromeSettings): ChromeSettingsForm {
+  return { revalidateUrl: settings.revalidateUrl ?? '', previewUrl: settings.previewUrl ?? '' }
+}
+
+function settingsProblem(form: ChromeSettingsForm): string | null {
+  for (const [label, value] of [
+    ['Revalidate URL', form.revalidateUrl],
+    ['Preview URL', form.previewUrl],
+  ] as const) {
+    const url = value.trim()
+    if (url && !/^https?:\/\/\S+$/i.test(url)) return `${label} must be an http(s) URL.`
+  }
+  return null
+}
+
+/** Whether the site shows the saved announcement now: on, and inside its schedule. */
+function isLive(announcement: Announcement, now: number): boolean {
+  if (!announcement.on || !announcement.text.trim()) return false
+  const startsAt = announcement.schedule?.startsAt
+  const endsAt = announcement.schedule?.endsAt
+  if (startsAt && Date.parse(startsAt) > now) return false
+  if (endsAt && Date.parse(endsAt) <= now) return false
+  return true
+}
+
+function readTab(): TabId | null {
+  if (typeof window === 'undefined') return null
+  const tab = parseRouteQuery(window.location.search).get('tab')
+  return TAB_IDS.includes(tab as TabId) ? (tab as TabId) : null
+}
+
+export interface AppearanceChromeProps {
   onNavigate?: (path: string) => void
-}) {
-  const tabs = useMemo(
-    () => [
-      { id: 'announcement', label: 'Announcement' },
-      ...regions.map((region) => ({ id: region.region, label: region.region })),
-      { id: 'developer', label: 'Developer' },
-    ],
-    [regions],
+  /** Current admin session, to make the screen read-only for roles that can't save. */
+  session?: { user?: { role?: string } } | null
+  /** The admin's collections by slug, for "Edit menus" and the page override links. */
+  collections?: ReadonlyMap<string, { slug: string; type?: string }>
+  /** Router path including the query string, so `?tab=` deep links follow navigation. */
+  currentPath?: string
+}
+
+/**
+ * Appearance → Header & Footer (APPEARANCE.md, `appearance-hf.jsx`). The
+ * header and footer are built in the site's code; this screen fills in the
+ * values its `defineRegion` schema exposes, and runs the CMS-owned
+ * announcement bar. Every form is generated from the schema.
+ */
+export function AppearanceChrome({
+  onNavigate,
+  session,
+  collections,
+  currentPath,
+}: AppearanceChromeProps) {
+  const links = useAdminLinks()
+  const navigate = useCallback(
+    (path: string) => (onNavigate ?? links.navigate)?.(path),
+    [onNavigate, links],
+  )
+  const role = session?.user?.role
+  // With no session (embedded or tests) the server still enforces access.
+  const readOnly = role ? !EDIT_ROLES.has(role) : false
+  const canEditSettings = role ? ADMIN_ROLES.has(role) : false
+
+  const [tab, setTab] = useState<TabId>(() => readTab() ?? 'announcement')
+  const [loaded, setLoaded] = useState<Loaded | null>(null)
+  const [loadError, setLoadError] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+  const [removing, setRemoving] = useState<ChromeRegionName | null>(null)
+  const [secret, setSecret] = useState<string | null>(null)
+  const [now, setNow] = useState(() => Date.now())
+
+  useEffect(() => {
+    function sync() {
+      const fromUrl = readTab()
+      if (fromUrl) setTab(fromUrl)
+    }
+    sync()
+    window.addEventListener('popstate', sync)
+    return () => window.removeEventListener('popstate', sync)
+  }, [currentPath])
+
+  // "2 hours ago" stays current while the screen is open.
+  useEffect(() => {
+    const timer = setInterval(() => setNow(Date.now()), 60_000)
+    return () => clearInterval(timer)
+  }, [])
+
+  const load = useCallback(async () => {
+    setLoadError(null)
+    const [schema, announcement, settings, overrides, menus, siteTitle] = await Promise.all([
+      fetchChromeSchema(),
+      fetchAnnouncement(),
+      fetchChromeSettings(),
+      fetchChromeOverrides(),
+      fetchChromeMenus(),
+      fetchSiteTitle(),
+    ])
+    if (!schema.ok) {
+      setLoadError(schema.error)
+      return
+    }
+    const regions: Loaded['regions'] = {}
+    const regionErrors: Loaded['regionErrors'] = {}
+    await Promise.all(
+      schema.value.regions
+        .filter((region) => REGIONS.includes(region.region))
+        .map(async (region) => {
+          const values = await fetchRegion(region.region)
+          if (!values.ok) {
+            regionErrors[region.region] = values.error
+            return
+          }
+          const form = regionForm(region, values.value)
+          regions[region.region] = {
+            schema: region,
+            values: values.value,
+            etag: values.etag,
+            saved: form,
+            draft: form,
+          }
+        }),
+    )
+    setLoaded({
+      sync: schema.value.sync,
+      regions,
+      regionErrors,
+      announcement: announcement.ok
+        ? {
+            value: announcement.value,
+            etag: announcement.etag,
+            saved: announcementForm(announcement.value),
+            draft: announcementForm(announcement.value),
+          }
+        : null,
+      settings: settings.ok
+        ? {
+            saved: settingsForm(settings.value),
+            draft: settingsForm(settings.value),
+            previewUrl: settings.value.previewUrl,
+          }
+        : null,
+      overrides: overrides.ok
+        ? overrides.value
+        : overrides.status === 404
+          ? 'unavailable'
+          : 'error',
+      menus,
+      siteTitle: siteTitle ?? 'Your site',
+    })
+  }, [])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  const changeTab = useCallback(
+    (id: string) => {
+      const next = TAB_IDS.includes(id as TabId) ? (id as TabId) : 'announcement'
+      setTab(next)
+      navigate(`${TAB_PATH}?tab=${next}`)
+    },
+    [navigate],
   )
-  const [tab, setTab] = useState('announcement')
-  const [text, setText] = useState('')
-  const region = regions.find((item) => item.region === tab)
+
+  const editPath = useCallback(
+    (collection: string, id: string) =>
+      editPathForDoc(collections?.get(collection), collection, id),
+    [collections],
+  )
+
+  // ─── Drafts ──────────────────────────────────────────────────────────
+
+  const setRegionDraft = useCallback((region: ChromeRegionName, draft: RegionForm) => {
+    setLoaded((current) => {
+      const state = current?.regions[region]
+      if (!current || !state) return current
+      return { ...current, regions: { ...current.regions, [region]: { ...state, draft } } }
+    })
+  }, [])
+
+  const setAnnouncementDraft = useCallback((draft: AnnouncementForm) => {
+    setLoaded((current) =>
+      current?.announcement
+        ? { ...current, announcement: { ...current.announcement, draft } }
+        : current,
+    )
+  }, [])
+
+  const setSettingsDraft = useCallback((draft: ChromeSettingsForm) => {
+    setLoaded((current) =>
+      current?.settings ? { ...current, settings: { ...current.settings, draft } } : current,
+    )
+  }, [])
+
+  const dirtyRegions = REGIONS.filter((region) => {
+    const state = loaded?.regions[region]
+    return state ? !sameValue(state.draft, state.saved) : false
+  })
+  const announcementDirty = loaded?.announcement
+    ? !sameValue(loaded.announcement.draft, loaded.announcement.saved)
+    : false
+  const settingsDirty = loaded?.settings
+    ? !sameValue(loaded.settings.draft, loaded.settings.saved)
+    : false
+  const dirty = dirtyRegions.length > 0 || announcementDirty || settingsDirty
+
+  const problems = useMemo(() => {
+    const out: Partial<Record<ChromeRegionName, Record<string, string>>> = {}
+    for (const region of REGIONS) {
+      const state = loaded?.regions[region]
+      if (state) out[region] = regionProblems(state.schema, state.draft)
+    }
+    return out
+  }, [loaded])
+  const annProblem = loaded?.announcement ? announcementProblem(loaded.announcement.draft) : null
+  const setProblem = loaded?.settings ? settingsProblem(loaded.settings.draft) : null
+  const invalid =
+    dirtyRegions.some((region) => Object.keys(problems[region] ?? {}).length > 0) ||
+    (announcementDirty && annProblem !== null) ||
+    (settingsDirty && setProblem !== null)
+
+  const discard = useCallback(() => {
+    setLoaded((current) => {
+      if (!current) return current
+      const regions: Loaded['regions'] = {}
+      for (const region of REGIONS) {
+        const state = current.regions[region]
+        if (state) regions[region] = { ...state, draft: state.saved }
+      }
+      // Drafts only; the loaded values and ETags stay.
+      return {
+        ...current,
+        regions,
+        announcement: current.announcement
+          ? { ...current.announcement, draft: current.announcement.saved }
+          : null,
+        settings: current.settings ? { ...current.settings, draft: current.settings.saved } : null,
+      }
+    })
+  }, [])
+
+  // ─── Saving ──────────────────────────────────────────────────────────
+
+  const loadedRef = useRef(loaded)
+  loadedRef.current = loaded
+
+  const save = useCallback(async () => {
+    const snapshot = loadedRef.current
+    if (!snapshot || saving) return
+    setSaving(true)
+    const failures: string[] = []
+    let revalidated = false
+    let savedSettings = false
+    try {
+      for (const region of REGIONS) {
+        const state = snapshot.regions[region]
+        if (!state || sameValue(state.draft, state.saved)) continue
+        const sent = state.draft
+        const res = await saveRegion(
+          region,
+          regionSaveBody(state.schema, sent, state.values.fields),
+          state.etag,
+        )
+        if (!res.ok) {
+          failures.push(`${REGION_LABEL[region]}: ${res.error}`)
+          continue
+        }
+        revalidated = true
+        const form = regionForm(state.schema, res.value)
+        setLoaded((current) => {
+          const latest = current?.regions[region]
+          if (!current || !latest) return current
+          // Keep edits made while the request was out.
+          const draft = sameValue(latest.draft, sent) ? form : latest.draft
+          return {
+            ...current,
+            regions: {
+              ...current.regions,
+              [region]: { ...latest, values: res.value, etag: res.etag, saved: form, draft },
+            },
+          }
+        })
+      }
+
+      const ann = snapshot.announcement
+      if (ann && !sameValue(ann.draft, ann.saved)) {
+        const sent = ann.draft
+        const res = await saveAnnouncement(announcementSaveBody(sent), ann.etag)
+        if (!res.ok) {
+          failures.push(`Announcement bar: ${res.error}`)
+        } else {
+          revalidated = true
+          const form = announcementForm(res.value)
+          setLoaded((current) =>
+            current?.announcement
+              ? {
+                  ...current,
+                  announcement: {
+                    value: res.value,
+                    etag: res.etag,
+                    saved: form,
+                    draft: sameValue(current.announcement.draft, sent)
+                      ? form
+                      : current.announcement.draft,
+                  },
+                }
+              : current,
+          )
+        }
+      }
+
+      const settings = snapshot.settings
+      if (settings && !sameValue(settings.draft, settings.saved)) {
+        const sent = settings.draft
+        // Only what changed: the API leaves a missing key alone, and a sent
+        // revalidate URL re-checks it and re-activates its webhook endpoint.
+        const body: Partial<ChromeSettings> = {}
+        if (sent.revalidateUrl !== settings.saved.revalidateUrl) {
+          body.revalidateUrl = sent.revalidateUrl.trim() || null
+        }
+        if (sent.previewUrl !== settings.saved.previewUrl) {
+          body.previewUrl = sent.previewUrl.trim() || null
+        }
+        const res = await saveChromeSettings(body)
+        if (!res.ok) {
+          failures.push(`Developer settings: ${res.error}`)
+        } else {
+          savedSettings = true
+          if (res.value.secret) setSecret(res.value.secret)
+          const form = settingsForm(res.value)
+          setLoaded((current) =>
+            current?.settings
+              ? {
+                  ...current,
+                  settings: {
+                    saved: form,
+                    draft: sameValue(current.settings.draft, sent) ? form : current.settings.draft,
+                    previewUrl: res.value.previewUrl,
+                  },
+                }
+              : current,
+          )
+        }
+      }
+    } finally {
+      setSaving(false)
+    }
+
+    if (failures.length > 0) {
+      toast.error(failures.join(' '))
+    } else if (revalidated) {
+      toast('Saved · site revalidated')
+    } else if (savedSettings) {
+      toast('Saved')
+    }
+  }, [saving])
+
+  const removeOrphans = useCallback(
+    async (region: ChromeRegionName) => {
+      const state = loadedRef.current?.regions[region]
+      if (!state || removing) return
+      setRemoving(region)
+      const keys = state.values.orphans.map((orphan) => orphan.key)
+      let last: { values: RegionValues; etag: string | null } | null = null
+      let error: string | null = null
+      for (const key of keys) {
+        const res = await removeOrphan(region, key)
+        if (!res.ok) {
+          error = res.error
+          break
+        }
+        last = { values: res.value, etag: res.etag }
+      }
+      setRemoving(null)
+      let overtaken = false
+      if (last) {
+        const next = last
+        const latest = loadedRef.current?.regions[region]
+        // The DELETE answers with the row as it is now. If someone else saved
+        // the region since this form loaded, its ETag covers their values, so
+        // keep the old one: the next save then gets 412 instead of quietly
+        // overwriting their change with this form.
+        overtaken =
+          !!latest &&
+          !sameValue(
+            { variant: next.values.variant, fields: next.values.fields },
+            { variant: latest.values.variant, fields: latest.values.fields },
+          )
+        setLoaded((current) => {
+          const now = current?.regions[region]
+          if (!current || !now) return current
+          return {
+            ...current,
+            regions: {
+              ...current.regions,
+              [region]: overtaken
+                ? { ...now, values: { ...now.values, orphans: next.values.orphans } }
+                : { ...now, values: next.values, etag: next.etag ?? now.etag },
+            },
+          }
+        })
+      }
+      if (error) toast.error(error)
+      else if (overtaken) {
+        toast.error(
+          `Removed. Someone else changed the ${region} since you opened it: reload to see their changes before you save.`,
+        )
+      } else if (keys.length === 1) toast(`Removed ${region}.${keys[0]}`)
+      else toast(`Removed ${keys.length} values`)
+    },
+    [removing],
+  )
+
+  // ─── Render ──────────────────────────────────────────────────────────
+
+  const ann = loaded?.announcement ?? null
+  const live = ann ? isLive(ann.value, now) : false
+  const tabs = [
+    {
+      id: 'announcement',
+      label: 'Announcement bar',
+      badge: ann ? (
+        <b
+          className={`rounded-pill text-count px-1.5 leading-[normal] font-bold ${
+            live ? 'bg-suc-l text-suc' : 'bg-bg text-faint'
+          }`}
+        >
+          {live ? 'Live' : 'Off'}
+        </b>
+      ) : undefined,
+    },
+    { id: 'header', label: 'Header' },
+    { id: 'footer', label: 'Footer' },
+    { id: 'developer', label: 'Developer', icon: <Code /> },
+  ]
+
+  const hasMenus = collections?.has('navigations') ?? false
+  const draft = useMemo(() => {
+    if (!loaded) return null
+    const regions: Parameters<typeof previewChrome>[0] = {}
+    for (const region of REGIONS) {
+      const state = loaded.regions[region]
+      if (state) regions[region] = { schema: state.schema, form: state.draft }
+    }
+    return previewChrome(
+      regions,
+      loaded.announcement
+        ? { id: loaded.announcement.value.id, form: loaded.announcement.draft }
+        : null,
+      { menus: loaded.menus, siteTitle: loaded.siteTitle, now: new Date(now) },
+    )
+  }, [loaded, now])
+
+  let body: ReactNode
+  if (loadError) {
+    body = (
+      <div className={`${CARD} flex flex-wrap items-center gap-3 px-4 py-3.5`} role="alert">
+        <span className="text-body text-txt min-w-0 flex-1">
+          Couldn’t load the header and footer. {loadError}
+        </span>
+        <Button variant="secondary" size="sm" onClick={() => void load()}>
+          Try again
+        </Button>
+      </div>
+    )
+  } else if (!loaded) {
+    body = (
+      <div className={`${CARD} text-body text-sub px-4 py-3.5`} role="status">
+        Loading the header and footer…
+      </div>
+    )
+  } else if (tab === 'developer') {
+    body = (
+      <DeveloperTab
+        sync={loaded.sync}
+        settings={loaded.settings?.draft ?? { revalidateUrl: '', previewUrl: '' }}
+        onSettingsChange={setSettingsDraft}
+        canEditSettings={canEditSettings && loaded.settings !== null}
+        secret={secret}
+        settingsProblem={settingsDirty ? setProblem : null}
+        now={now}
+      />
+    )
+  } else {
+    const region = tab === 'header' || tab === 'footer' ? tab : null
+    const state = region ? loaded.regions[region] : undefined
+    let column: ReactNode
+    if (tab === 'announcement') {
+      column = ann ? (
+        <AnnouncementTab
+          form={ann.draft}
+          onChange={setAnnouncementDraft}
+          problem={annProblem}
+          readOnly={readOnly}
+        />
+      ) : (
+        <div className={`${CARD} text-body text-sub px-4 py-3.5`} role="alert">
+          Couldn’t load the announcement bar.
+        </div>
+      )
+    } else if (region && state) {
+      column = (
+        <RegionTab
+          region={region}
+          schema={state.schema}
+          form={state.draft}
+          onChange={(form) => setRegionDraft(region, form)}
+          problems={problems[region] ?? {}}
+          orphans={state.values.orphans}
+          removingOrphans={removing === region}
+          onRemoveOrphans={() => void removeOrphans(region)}
+          overrides={loaded.overrides}
+          menus={loaded.menus}
+          siteTitle={loaded.siteTitle}
+          readOnly={readOnly}
+          saving={saving}
+          now={now}
+          href={links.href}
+          onNavigate={navigate}
+          editPath={editPath}
+        />
+      )
+    } else if (region && loaded.regionErrors[region]) {
+      column = (
+        <div className={`${CARD} flex flex-wrap items-center gap-3 px-4 py-3.5`} role="alert">
+          <span className="text-body text-txt min-w-0 flex-1">
+            {`Couldn’t load the ${region}. ${loaded.regionErrors[region]}`}
+          </span>
+          <Button variant="secondary" size="sm" onClick={() => void load()}>
+            Try again
+          </Button>
+        </div>
+      )
+    } else if (region) {
+      column = (
+        <section className={CARD} aria-label={`${REGION_LABEL[region]} schema`}>
+          <div className="flex flex-col items-start gap-2 px-4 py-3.5">
+            <h2 className="text-card-title text-txt m-0 font-[650]">
+              {`The site hasn’t sent a ${region} schema yet`}
+            </h2>
+            <p className="text-meta text-sub m-0 leading-[1.45]">
+              {`Your developer declares the ${region} with defineRegion in prenta.config.ts and runs prenta push chrome on every deploy. Until then the site keeps its ${region} layout variants.`}
+            </p>
+            <Button variant="secondary" size="sm" onClick={() => changeTab('developer')}>
+              How it’s wired
+            </Button>
+          </div>
+        </section>
+      )
+    }
+    body = (
+      <div className="grid grid-cols-[minmax(0,440px)_minmax(0,1fr)] items-start gap-[18px] [@media(width<=1100px)]:grid-cols-[minmax(0,1fr)]">
+        <div className="flex min-w-0 flex-col gap-3.5">{column}</div>
+        {draft ? (
+          <ChromePreview
+            header={
+              loaded.regions.header
+                ? { schema: loaded.regions.header.schema, form: loaded.regions.header.draft }
+                : undefined
+            }
+            footer={
+              loaded.regions.footer
+                ? { schema: loaded.regions.footer.schema, form: loaded.regions.footer.draft }
+                : undefined
+            }
+            announcement={ann?.draft ?? null}
+            menus={loaded.menus}
+            siteTitle={loaded.siteTitle}
+            previewUrl={loaded.settings?.previewUrl ?? null}
+            draft={draft}
+          />
+        ) : null}
+      </div>
+    )
+  }
 
   return (
-    <div className="flex flex-col gap-4 p-6">
+    <div className="mobile:px-3.5 mobile:pt-4 mobile:pb-[100px] flex min-w-0 flex-col gap-[18px] px-7 pt-[22px] pb-[120px] leading-[normal]">
       <PageHeader
         flush
         title="Header & Footer"
-        subtitle="Fields come from the site chrome schema."
+        subtitle={
+          // The Appearance screens' `.ap-sub` is 620px wide, not PageHeader's 640.
+          <span className="max-w-[620px] text-pretty">
+            Built by your developer in code. You fill in the content they’ve made editable, and run
+            the announcement bar whenever you need it.
+          </span>
+        }
         breadcrumb={
           <Breadcrumb
             items={[
@@ -43,32 +696,37 @@ export function AppearanceChrome({
             ]}
           />
         }
+        actions={
+          hasMenus ? (
+            <Button variant="secondary" onClick={() => navigate('/appearance/menus')}>
+              Edit menus
+            </Button>
+          ) : undefined
+        }
       />
-      <UnderlineTabs tabs={tabs} value={tab} onChange={setTab} label="Header and footer" />
-      {tab === 'announcement' ? (
-        <label className="flex flex-col gap-2 text-base">
-          Announcement
-          <input
-            value={text}
-            maxLength={110}
-            onChange={(event) => setText(event.target.value)}
-            className="border-border bg-card rounded-md border px-3 py-2"
-          />
-          <span className="text-muted-foreground text-sm">{text.length}/110</span>
-        </label>
-      ) : null}
-      {region ? (
-        <ul className="flex flex-col gap-2">
-          {Object.entries(region.fields).map(([key, item]) => (
-            <li key={key} className="text-foreground text-base">
-              {item.label ?? key}
-            </li>
-          ))}
-        </ul>
-      ) : null}
-      {tab === 'developer' ? (
-        <pre className="bg-muted overflow-x-auto rounded-md p-4 text-sm">{`defineRegion('header', { component, variants, fields: { logo: field.brand('logo') } })`}</pre>
+      {readOnly ? (
+        <p className="text-meta text-sub m-0" role="note">
+          You can look, but only editors and admins can change the header, footer and announcement
+          bar.
+        </p>
       ) : null}
+      <UnderlineTabs
+        tabs={tabs}
+        value={tab}
+        onChange={changeTab}
+        label="Header and footer"
+        idBase="hf"
+      />
+      <UnderlineTabPanel idBase="hf" tabId={tab} className="min-w-0 outline-none">
+        {body}
+      </UnderlineTabPanel>
+      <UnsavedBar
+        dirty={dirty && !readOnly}
+        onDiscard={discard}
+        onSave={() => void save()}
+        saving={saving}
+        saveDisabled={invalid || removing !== null}
+      />
     </div>
   )
 }