@morphemecms/cms 0.9.0-next-20261105122349 → 0.9.0

package/src/HeaderSettings.tsx

@@ -0,0 +1,97 @@
+// "Udseende" › "Header" (#udseende/header): what is in the header on every page, on one screen laid out as a page's form
+// (SettingsSections.tsx): a preview of the header as the form has it, on a phone and a computer (partPreview.tsx), over the
+// sections Main menu (menu.json), Mobile menu (mobile-menu.json), Action button and Menu button (header.json). "Gem
+// ændringer" saves each changed file in its own commit (useDataFiles.ts). Exposes HeaderSettings (default). Uses
+// DataFileFields.tsx, fields.tsx, headerPreview.mjs and headerTheme.tsx.
+import { useMemo, type ReactNode } from 'react';
+import FormFrame from './FormFrame';
+import { FieldList, Fields, ObjectFields, WrongField, type FieldContext } from './fields';
+import { DataFileFields } from './DataFileFields';
+import { useDataFiles, type DataFilePart } from './useDataFiles';
+import { SettingsSections, useSettingsSections, type SettingsSection } from './SettingsSections';
+import { PartPreview } from './partPreview';
+import { headerDraft, swapHeader } from './headerPreview.mjs';
+import { headerThemeOf } from './headerTheme';
+import { collections } from './site';
+import type { FilesCollection } from './schema';
+import type { Env } from './App';
+import { t } from './i18n';
+
+// The header's three files, by their collections (defaults/collections.ts), as the preview names them.
+const FILES = { menu: 'menu', mobileMenu: 'mobilmenu', header: 'headerknap' } as const;
+const parts: DataFilePart[] = Object.values(FILES).flatMap((id) => {
+  const collection = collections.find((c): c is FilesCollection => c.id === id && c.kind === 'files');
+  return collection ? [{ collection, dataFile: collection.files[0] }] : [];
+});
+const at = (id: string) => parts.findIndex((p) => p.collection.id === id);
+
+// The sections, each with the file it is of: a menu is one; header.json's group (the action button) is one, and its other
+// fields (the menu button's side) are "Menu button".
+type Place = { id: string; label: string; file: number; field?: string };
+const places: Place[] = parts.flatMap(({ collection, dataFile }, file): Place[] => {
+  if (dataFile.root) return [{ id: collection.id, label: collection.label, file }];
+  const groups = dataFile.fields.filter((f) => f.type === 'object').map((f) => ({ id: f.name, label: f.label, file, field: f.name }));
+  const rest = dataFile.fields.some((f) => f.type !== 'object')
+    ? [{ id: `${collection.id}-rest`, label: t.library.headerMenuButton, file }]
+    : [];
+  return [...groups, ...rest];
+});
+// The section a file's field is in (its path: "button.label", "items.0.label").
+function placeOf(file: number, path: string) {
+  const mine = places.filter((p) => p.file === file);
+  return mine.find((p) => p.field === path.split('.')[0]) ?? mine.find((p) => !p.field)!;
+}
+
+type Values = Record<string, unknown>[];
+// The files' values as headerDraft takes them; a file the site has not got is empty.
+const shapeOf = (values: Values) => ({
+  menu: values[at(FILES.menu)] ?? {},
+  mobileMenu: values[at(FILES.mobileMenu)] ?? {},
+  header: values[at(FILES.header)] ?? {},
+});
+
+const back = { href: '#udseende', label: t.common.parts.appearance };
+
+export default function HeaderSettings({ env }: { env: Env }) {
+  const layout = useSettingsSections(places);
+  const form = useDataFiles(env, parts, (file, path) => {
+    const { id } = placeOf(file, path);
+    layout.unfold(id);
+    layout.steer(id);
+  });
+  const context: FieldContext = { relations: env.relations, lists: env.lists, testimonials: env.testimonials, site: env.site };
+
+  // What the form changes, put into a copy of the site's front page each time it changes.
+  const swap = useMemo(() => {
+    const draft = headerDraft(shapeOf(form.initial), shapeOf(form.values));
+    return (doc: Document) => swapHeader(doc, draft, headerThemeOf(draft.button, context));
+  }, [form.initial, form.values]);
+
+  const fieldsOf = ({ file, field }: Place): ReactNode => {
+    const { dataFile } = parts[file];
+    const value = form.values[file];
+    const set = (v: unknown) => form.set(file, v as Record<string, unknown>);
+    if (dataFile.root) return <DataFileFields dataFile={dataFile} value={value} onChange={set} add />;
+    const own = dataFile.fields.find((f) => f.name === field);
+    if (own) return <ObjectFields field={own} value={value[own.name]} onChange={(v) => set({ ...value, [own.name]: v })} />;
+    return <FieldList fields={dataFile.fields.filter((f) => f.type !== 'object')} value={value} onChange={set} />;
+  };
+  const sections: SettingsSection[] = places.map((p) => ({
+    id: p.id,
+    label: p.label,
+    content: <WrongField.Provider value={form.wrong(p.file)}>{fieldsOf(p)}</WrongField.Provider>,
+  }));
+
+  return (
+    <Fields.Provider value={context}>
+      <FormFrame title={t.common.parts.header} back={back} dirty={form.dirty} saving={form.saving} onSave={form.save}>
+        <SettingsSections
+          title={t.common.parts.header}
+          top={<PartPreview part="header" swap={swap} />}
+          sections={sections}
+          state={layout}
+        />
+      </FormFrame>
+    </Fields.Provider>
+  );
+}

package/src/Library.tsx

@@ -5,7 +5,8 @@
 // and posts can be filtered by their status and by what they pick (a post's tags), a list of what is
 // shown on pages (Promovering) by a page, its kind and whether it is on, as "Filer" (Filters). In a list that can be deleted from, the clock in the top bar ("Slettede …") opens
 // what was deleted (Deleted.tsx), as in "Filer". The tabs the apps installed add to a list (AppDefinition.tabs, Cookiescanner's
-// "Problemer" on "Cookies") are in its top app bar after the list's own, each at #liste/<list>/<app>.
+// "Problemer" on "Cookies") are in its top app bar after the list's own, each at #liste/<list>/<app>. "Use theme" and the move arrows show the
+// loading indicator while they run (only the pressed one).
 import { Fragment, useEffect, useMemo, useState, type ReactNode } from 'react';
 import {
   ArrowDown,
@@ -126,7 +127,8 @@ const countOf = (c: Collection, files: RepoFile[]): number =>
 export function partOf(id: string, files: RepoFile[]): { label: string; href: string; count: number | null } {
   const { parts } = t.common;
   if (id === 'virksomheden') return { label: parts.company, href: '#virksomheden', count: null };
-  if (id === 'header') return { label: parts.header, href: '#header', count: null };
+  if (id === 'header') return { label: parts.header, href: '#udseende/header', count: null };
+  if (id === 'footer') return { label: parts.footer, href: '#udseende/footer', count: null };
   if (id === 'lister') return { label: parts.lists, href: '#lister', count: listsShown(files).length };
   if (id === 'blokke') return { label: parts.blocks, href: '#blokke', count: blockParts.length };
   if (id === 'filer') return { label: parts.media, href: '#filer', count: mediaOf(files).length + filesOf(files).length };
@@ -210,9 +212,9 @@ export function Company({ part, files }: { part?: Part; files: RepoFile[] }) {
 // "Udseende": first "Temaer" (Themes), with the theme the site is built with at the end of its row (or, after a swap,
 // until the site is built with the new one, that one), "Ikonpakker" (IconPacks), with the pack chosen, "Bevægelse"
 // (MotionSchemes), with the scheme chosen, and "Sidekolonne" (SideColumn.tsx), with the block chosen; then how the
-// site looks, the colours (Colors.tsx), the logo and
-// icon (BrandForm.tsx) and the site's own parts there (appearance in packages/editor/defaults/editor.ts: "Standardsider", a screen of its
-// own, CompanyForm.tsx, going back here), and how the editor and the blocks look, their parts ("Dele", PartsHome), each on a
+// site looks, the colours (Colors.tsx), the logo and icon (BrandForm.tsx), the header with its menus and its preview
+// (HeaderSettings.tsx), the footer with its preview (FooterSettings.tsx) and the site's own parts there (appearance in packages/editor/defaults/editor.ts: "Standardsider", a
+// screen of its own, CompanyForm.tsx, going back here), and how the editor and the blocks look, their parts ("Dele", PartsHome), each on a
 // screen of its own, with the icons the site gives them.
 // The blocks that can be put in are under "Blokke" ("Blokindstillinger", BlockSettings.tsx).
 export function Theme({ files }: { files: RepoFile[] }) {
@@ -234,6 +236,8 @@ export function Theme({ files }: { files: RepoFile[] }) {
     },
     { id: 'farver', label: t.common.parts.colors, icon: icons.farver, trailing: <ThemeColors files={files} /> },
     { id: 'logo', label: t.common.parts.brand, icon: icons.logo },
+    { id: 'header', label: t.common.parts.header, icon: icons.header },
+    { id: 'footer', label: t.common.parts.footer, icon: icons.footer },
     ...appearance,
     { id: 'dele', label: t.common.parts.editorParts, icon: icons.dele },
   ];
@@ -473,7 +477,7 @@ export function ThemePage({ of, env, files }: { of: ThemeInfo; env: Env; files:
       </div>
       {of.id !== chosen && themeInstalled(of.id) && (
         <div className="mb-8">
-          <Button disabled={saving} onClick={use}>
+          <Button busy={saving} disabled={saving} onClick={use}>
             {t.library.useTheme}
           </Button>
         </div>
@@ -695,8 +699,8 @@ function PartGroup({ title, route, parts }: { title?: string; route: string; par
   );
 }
 
-// A screen with parts of the site as rows, under one on the start screen: "Header" (the menus) and
-// "Lister" (the short lists: the site's, testimonials, and those of the apps installed, prices), A–Å as on the start screen.
+// A screen with parts of the site as rows, under one on the start screen: "Lister" (the short lists: the site's,
+// testimonials, and those of the apps installed, prices), A–Å as on the start screen.
 function PartsOf({ title, ids, files }: { title: string; ids: string[]; files: RepoFile[] }) {
   return (
     <Screen title={title} wide back={{ href: '#', label: siteName }}>
@@ -709,7 +713,6 @@ function PartsOf({ title, ids, files }: { title: string; ids: string[]; files: R
   );
 }
 
-export const Header = ({ files }: { files: RepoFile[] }) => <PartsOf title={t.common.parts.header} ids={header} files={files} />;
 export const Lists = ({ files }: { files: RepoFile[] }) => <PartsOf title={t.common.parts.lists} ids={listsShown(files)} files={files} />;
 
 // The account: who is logged in, light or dark, the language, and "Log ud".
@@ -1045,7 +1048,9 @@ export function List({ collection, tab, files, env }: { collection: Collection;
   const appTabs = tabsOf(collection.id, apps, installedApps(files));
   const appTab = appTabs.find((a) => a.app.id === tab);
   const [query, setQuery] = useKept(`${collection.id}-soeg`, '');
-  const [busy, setBusy] = useState(false);
+  // The move that runs (row and target row, null: none); only its arrow shows busy, all arrows stay disabled meanwhile.
+  const [moving, setMoving] = useState<{ from: number; to: number } | null>(null);
+  const busy = moving !== null;
   const items = useMemo(() => itemsOf(collection, files), [collection, files]);
   const pages = collection.id === 'pages';
   // Pages and posts: their address in a column on a computer, and a filter that shows only those with
@@ -1264,14 +1269,14 @@ export function List({ collection, tab, files, env }: { collection: Collection;
   async function move(i: number, to: number) {
     const next = items.map((item) => item.file!);
     [next[i], next[to]] = [next[to], next[i]];
-    setBusy(true);
+    setMoving({ from: i, to });
     env.notify({ text: t.library.savingOrder });
     try {
       env.notify({ text: savedText(await env.reorder(collection, next)), kind: 'saved' });
     } catch (e) {
       env.notify({ text: t.library.orderNotSaved((e as Error).message), error: true, kind: 'failed' });
     } finally {
-      setBusy(false);
+      setMoving(null);
     }
   }
 
@@ -1317,10 +1322,17 @@ export function List({ collection, tab, files, env }: { collection: Collection;
         actions={
           orderable && (
             <span className="flex shrink-0 pr-2">
-              <IconButton icon={ArrowUp} label={t.common.moveUp} disabled={i === 0 || busy} onClick={() => move(i, i - 1)} />
+              <IconButton
+                icon={ArrowUp}
+                label={t.common.moveUp}
+                busy={moving?.from === i && moving.to === i - 1}
+                disabled={i === 0 || busy}
+                onClick={() => move(i, i - 1)}
+              />
               <IconButton
                 icon={ArrowDown}
                 label={t.common.moveDown}
+                busy={moving?.from === i && moving.to === i + 1}
                 disabled={i === shown.length - 1 || busy}
                 onClick={() => move(i, i + 1)}
               />
@@ -1341,7 +1353,7 @@ export function List({ collection, tab, files, env }: { collection: Collection;
           : lists.includes(collection.id)
             ? { href: '#lister', label: t.common.parts.lists }
             : header.includes(collection.id)
-              ? { href: '#header', label: t.common.parts.header }
+              ? { href: '#udseende/header', label: t.common.parts.header }
               : { href: '#', label: siteName }
       }
       tabs={

package/src/MarkdownEditor.tsx

@@ -3,7 +3,7 @@
 // blocks (src/apps/<app>/blocks/) can be put in the text with a button; each is a card with the block as it looks
 // on the site, which opens a menu (Ret, hide on the site, move, Fjern), with a free line kept between
 // two cards to write in. A fixed page's sections are such a text too (SectionsField.tsx), so both look
-// and work the same.
+// and work the same. The last tool, "Section settings", opens the section's sheet (BlockDialog.tsx).
 import {
   forwardRef,
   Fragment as ReactFragment,
@@ -43,7 +43,6 @@ import {
   LinkSimple,
   ListBullets,
   ListNumbers,
-  Palette,
   Plus,
   Quotes,
   TextAa,
@@ -62,6 +61,7 @@ import { SECTION_COLORS } from '../lib/section-marker.mjs';
 import { sectionHeading, setSectionColor } from './sectionState.mjs';
 import { sectionFrame } from './sectionFrame';
 import { IMAGE, type BlockAsk } from './BlockDialog';
+import SectionSettingsIcon from './SectionSettingsIcon';
 import { askLink } from './LinkSheet';
 import { Menu, MenuItem, Toolbar, ToolbarButton } from './ui';
 import { shownAt } from './images';
@@ -865,12 +865,6 @@ export default forwardRef<MarkdownHandle, Props>(function MarkdownEditor(
     colorsAt?.setAttribute('aria-expanded', 'true');
     return () => colorsAt?.setAttribute('aria-expanded', 'false');
   }, [colorsAt]);
-  // The button for the colour of a section, while its menu is open.
-  const [sectionAt, setSectionAt] = useState<HTMLElement | null>(null);
-  useEffect(() => {
-    sectionAt?.setAttribute('aria-expanded', 'true');
-    return () => sectionAt?.setAttribute('aria-expanded', 'false');
-  }, [sectionAt]);
   // The previews of the blocks, drawn again when what they show from elsewhere changes: the lists,
   // the testimonials, the rest of the site, the page's address or a fixed page's other fields.
   const cards = useRef(new Set<() => void>());
@@ -1025,10 +1019,14 @@ export default forwardRef<MarkdownHandle, Props>(function MarkdownEditor(
     editor.current?.action((ctx) => paint(ctx.get(editorViewCtx), name));
   }
 
-  function sectionColor(name: string | null) {
+  // The sheet with the settings of the section the cursor is in (its colour), then the colour set.
+  async function sectionSettings() {
+    const current = SECTION_COLORS.find((name) => active.includes(`section-${name}`)) ?? null;
+    const answered = await (blocks ?? sheetProp)?.section(current);
+    if (!answered) return;
     editor.current?.action((ctx) => {
       const view = ctx.get(editorViewCtx);
-      setSectionColor(view, name);
+      setSectionColor(view, answered.color);
       view.focus();
     });
   }
@@ -1101,16 +1099,6 @@ export default forwardRef<MarkdownHandle, Props>(function MarkdownEditor(
     { label: t.text.bulletList, icon: ListBullets, action: () => setKind('bullet'), on: 'bullet' },
     { label: t.text.orderedList, icon: ListNumbers, action: () => setKind('ordered'), on: 'ordered' },
     { label: t.text.quote, icon: Quotes, action: () => setKind('quote'), on: 'quote' },
-    // The colour of the section the cursor's H2 starts (not a fixed page's text, whose H2s are its sections' names; the front page has it).
-    ...(framed && active.includes('section')
-      ? [
-          {
-            label: t.text.sectionColor,
-            icon: Palette,
-            action: (e: ReactMouseEvent<HTMLButtonElement>) => setSectionAt(sectionAt ? null : e.currentTarget),
-          },
-        ]
-      : []),
     // A picture and the blocks are put in with "+" (a sheet with them all); without blocks (a blog
     // post) a picture has its own button.
     ...(blocks
@@ -1120,11 +1108,16 @@ export default forwardRef<MarkdownHandle, Props>(function MarkdownEditor(
         : []),
     { label: t.text.undo, icon: ArrowUUpLeft, action: () => run(undoCommand) },
     { label: t.text.redo, icon: ArrowUUpRight, action: () => run(redoCommand) },
+    // The settings of the section the cursor's H2 starts (not a fixed page's text, whose H2s are its sections' names; the front page has it).
+    ...(framed && active.includes('section') && (blocks ?? sheetProp)
+      ? [{ label: t.text.sectionSettings, icon: SectionSettingsIcon, action: sectionSettings }]
+      : []),
   ];
 
   // When the toolbar is too short for all its buttons, the kinds of text (H1, H2, H3, T, the bulleted and
   // the numbered list and the quote) are one button: the one where the cursor is, with an arrow, and
   // the others under it.
+  const hasSettings = tools.some((item) => item.icon === SectionSettingsIcon);
   const kinds = tools.filter((t) => ['h1', 'h2', 'h3', 'text', 'bullet', 'ordered', 'quote'].includes(t.on ?? ''));
   const kind = kinds.find((t) => active.includes(t.on!));
   const shown = kind ?? kinds.find((t) => t.on === 'text')!;
@@ -1135,18 +1128,18 @@ export default forwardRef<MarkdownHandle, Props>(function MarkdownEditor(
     const bar = toolbar.current!;
     // A button is 2.5rem, with 0.125rem between them and 0.375rem around them, and each of the lines
     // between the groups 0.5rem (the classes below).
-    const fits = () => setNarrow(bar.clientWidth < tools.length * 42 + 10 + 3 * 10);
+    const fits = () => setNarrow(bar.clientWidth < tools.length * 42 + 10 + (3 + (hasSettings ? 1 : 0)) * 10);
     const watch = new ResizeObserver(fits);
     watch.observe(bar);
     return () => watch.disconnect();
-  }, [tools.length]);
+  }, [tools.length, hasSettings]);
   const tool = ({ label, icon, action, on }: (typeof tools)[number]) => (
     <ToolbarButton key={label} icon={icon} label={label} selected={on ? active.includes(on) : undefined} onClick={action} />
   );
 
   // The lines between the marks on the text, the kinds of text, "+" (or "Billede") and "Fortryd".
   const lineBefore = (item: (typeof tools)[number]) =>
-    item === kinds[0] || item.icon === Plus || item.icon === Image || item.icon === ArrowUUpLeft;
+    item === kinds[0] || item.icon === Plus || item.icon === Image || item.icon === ArrowUUpLeft || item.icon === SectionSettingsIcon;
   // A button of the toolbar; when it is too short, the kinds of text are one button (at the first), with a menu.
   const button = (item: (typeof tools)[number]) =>
     !narrow || !kinds.includes(item) ? (
@@ -1164,13 +1157,13 @@ export default forwardRef<MarkdownHandle, Props>(function MarkdownEditor(
 
   return (
     <div className="rounded-panel border border-line bg-surface">
-      {/* Stays at the top while scrolling through the text, a little under the app's top bar (Screen.tsx,
+      {/* A bar with round corners and room all round it, inside the text's box. Stays at the top while scrolling through the text, a little under the app's top bar (Screen.tsx,
           4rem and its line); on a phone one row that scrolls sideways. The buttons are centred, but
           start at the left edge when they do not fit (safe), so none is out of reach. */}
       <Toolbar
         ref={toolbar}
         label={t.text.tools}
-        className="editor-tools sticky top-[calc(4.5rem+1px+env(safe-area-inset-top))] z-10 justify-center-safe overflow-x-auto rounded-t-panel border-b border-line medium:flex-wrap"
+        className="editor-tools sticky top-[calc(5rem+1px+env(safe-area-inset-top))] z-10 m-2 justify-center-safe overflow-x-auto rounded-panel border border-line medium:flex-wrap"
       >
         {tools.map((tool) => (
           <ReactFragment key={tool.label}>
@@ -1191,17 +1184,6 @@ export default forwardRef<MarkdownHandle, Props>(function MarkdownEditor(
           <span className="text-ink">{t.text.noColor}</span>
         </MenuItem>
       </Menu>
-      {/* The theme's three colours for a section (section-marker.mjs), and "Ingen"; the one it has is marked. */}
-      <Menu anchor={sectionAt} label={t.text.sectionColor} onClose={() => setSectionAt(null)}>
-        <MenuItem icon={Palette} selected={!active.some((a) => a.startsWith('section-'))} onClick={() => sectionColor(null)}>
-          {t.text.sectionColors.none}
-        </MenuItem>
-        {SECTION_COLORS.map((name) => (
-          <MenuItem key={name} icon={Palette} selected={active.includes(`section-${name}`)} onClick={() => sectionColor(name)}>
-            {t.text.sectionColors[name as keyof typeof t.text.sectionColors]}
-          </MenuItem>
-        ))}
-      </Menu>
       <Menu anchor={kindsAt} label={t.text.kind} onClose={() => setKindsAt(null)}>
         {kinds.map(({ label, icon, action, on }) => (
           <MenuItem key={label} icon={icon} selected={active.includes(on!)} onClick={action as () => void}>

package/src/Media.tsx

@@ -9,6 +9,7 @@
 // saved with the tick: the file moves, the pages that use it get the new address in the same commit,
 // and the old address sends on to it (addresses.ts). "+" uploads a new file, saved at once. The same
 // pictures (not the other files) are the gallery a picture is chosen from in the forms (useMediaPicker).
+// The buttons that run (add, rename, delete, upload new) show the loading indicator while they do.
 // The funnel in Filer also filters by a tag (fileTagFilter.mjs; only tags some file has).
 // The clock in the top bar, "Slettede filer", opens the files that were deleted (Deleted.tsx).
 import { useEffect, useMemo, useRef, useState, type ReactElement } from 'react';
@@ -395,6 +396,7 @@ export function useMediaPicker(media: RepoFile[], pictures: Uploads): [() => Pro
           kind="outlined"
 
           icon={UploadSimple}
+          busy={pictures.uploading}
           onClick={async () => {
             const added = await pictures.upload();
             if (added) done(publicPath(added.path));
@@ -634,6 +636,7 @@ export default function Media({ files, env, open }: { files: RepoFile[]; env: En
                 icon={Check}
                 label={t.media.saveName}
                 kind="filled"
+                busy={renaming}
                 disabled={renaming || name === stemOf(src) || !slugify(name) || slugify(name) === stemOf(src)}
               />
             </>
@@ -666,8 +669,8 @@ export default function Media({ files, env, open }: { files: RepoFile[]; env: En
       </div>
       <MediaTags key={src} src={src} files={files} env={env} />
       {code && !used.has(src) && (
-        <Button kind="outlined" icon={Trash} disabled={deleting} onClick={() => remove(src)}>
-          {deleting ? t.common.deleting : t.media.kinds[kindOf(src)].delete}
+        <Button kind="outlined" icon={Trash} busy={deleting} disabled={deleting} onClick={() => remove(src)}>
+          {t.media.kinds[kindOf(src)].delete}
         </Button>
       )}
     </>
@@ -686,7 +689,7 @@ export default function Media({ files, env, open }: { files: RepoFile[]; env: En
 
             onClick={() => (location.hash = 'slettet/filer')}
           />
-          <IconButton icon={Plus} label={t.media.add} disabled={adding} onClick={add} />
+          <IconButton icon={Plus} label={t.media.add} busy={adding} disabled={adding} onClick={add} />
         </>
       }
     >

package/src/Redirects.tsx

@@ -11,7 +11,7 @@
 // it off the list. One that has become a page or sends on since is not shown. Over each list, as over
 // the lists under "Indhold", the search, the order (kept in this browser; by address under the first
 // letter) and, over the redirects, the funnel that shows only those to one page or post, picked as a
-// chip.
+// chip. The Save and Delete buttons show the loading indicator while their save runs (Forget does not).
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { ArrowRight, ArrowsDownUp, Funnel, LinkBreak, Plus, Signpost, Trash, X } from '@phosphor-icons/react';
 import { addressOf, escape, REDIRECTS } from './addresses';
@@ -144,14 +144,16 @@ export default function Redirects({ env, tab }: { env: Env; tab?: Tab }) {
 
   const dialog = useRef<HTMLDialogElement>(null);
   const [editing, setEditing] = useState<Editing | null>(null);
-  const [saving, setSaving] = useState(false);
+  // Which store is running (null: none). Only the button that started it shows busy; all three stay disabled.
+  const [running, setRunning] = useState<'save' | 'delete' | null>(null);
+  const saving = running !== null;
   const open = (e: Editing) => {
     setEditing(e);
     dialog.current?.showModal();
   };
 
   // Saves the redirects as they are after a change, in one commit, none through another.
-  async function store(next: AllRedirects, message: string, change: string): Promise<boolean> {
+  async function store(next: AllRedirects, message: string, change: string, kind: 'save' | 'delete'): Promise<boolean> {
     const flat = flatten(next);
     if (typeof flat === 'string') {
       env.notify({ text: flat, error: true });
@@ -159,7 +161,7 @@ export default function Redirects({ env, tab }: { env: Env; tab?: Tab }) {
     }
     const changes = changesOf(flat, files!);
     if (!changes.length) return true;
-    setSaving(true);
+    setRunning(kind);
     env.notify({ text: t.common.saving });
     try {
       const oids = await env.commit(message, changes, change);
@@ -174,7 +176,7 @@ export default function Redirects({ env, tab }: { env: Env; tab?: Tab }) {
       env.notify({ text: t.common.notSaved((e as Error).message), error: true, kind: 'failed' });
       return false;
     } finally {
-      setSaving(false);
+      setRunning(null);
     }
   }
 
@@ -218,6 +220,7 @@ export default function Redirects({ env, tab }: { env: Env; tab?: Tab }) {
       setRedirect(all, from, to),
       editing.isNew ? siteT.redirects.commit.add(from, to) : siteT.redirects.commit.change(from, to),
       t.app.changes[editing.isNew ? 'added' : 'edited'](t.app.changes.redirect(from)),
+      'save',
     );
     if (!done) return;
     // Sent on: no longer an address that does not exist.
@@ -234,7 +237,7 @@ export default function Redirects({ env, tab }: { env: Env; tab?: Tab }) {
     const flat = flatten(all);
     if (typeof flat === 'string') return env.notify({ text: flat, error: true });
     const change = t.app.changes.deleted(t.app.changes.redirect(from));
-    if (await store(setRedirect(flat, from, null), siteT.redirects.commit.delete(from), change)) dialog.current?.close();
+    if (await store(setRedirect(flat, from, null), siteT.redirects.commit.delete(from), change, 'delete')) dialog.current?.close();
   }
 
   async function drop(path: string) {
@@ -430,8 +433,8 @@ export default function Redirects({ env, tab }: { env: Env; tab?: Tab }) {
                 onChange={(e) => setEditing({ ...editing, to: e.target.value })}
               />
             </div>
-            <Button type="submit" disabled={saving}>
-              {saving ? t.common.saving : m ? t.redirects.missing.sendOn : t.common.save}
+            <Button type="submit" busy={running === 'save'} disabled={saving}>
+              {m ? t.redirects.missing.sendOn : t.common.save}
             </Button>
             {m && (
               <Button kind="outlined" icon={X} disabled={saving} onClick={() => drop(m.path)}>
@@ -439,7 +442,7 @@ export default function Redirects({ env, tab }: { env: Env; tab?: Tab }) {
               </Button>
             )}
             {!editing.isNew && (
-              <Button kind="outlined" icon={Trash} disabled={saving} onClick={() => remove(editing.from)}>
+              <Button kind="outlined" icon={Trash} busy={running === 'delete'} disabled={saving} onClick={() => remove(editing.from)}>
                 {t.redirects.deleteRedirect}
               </Button>
             )}

package/src/SectionSettings.tsx

@@ -0,0 +1,21 @@
+// The settings of a section in the sheet of BlockDialog.tsx: its colour, "None" and the theme's three (section-marker.mjs),
+// the one it has marked. Exposes the default SectionSettings; uses Option (ui.tsx), SECTION_COLORS.
+import { Option } from './ui';
+import { SECTION_COLORS } from '../lib/section-marker.mjs';
+import { t } from './i18n';
+
+/** color: the section's colour, '' for none. */
+export default function SectionSettings({ color, onChange }: { color: string; onChange: (color: string) => void }) {
+  return (
+    <div role="group" aria-label={t.text.sectionColor}>
+      <Option selected={!color} onClick={() => onChange('')}>
+        {t.text.sectionColors.none}
+      </Option>
+      {SECTION_COLORS.map((name) => (
+        <Option key={name} selected={color === name} onClick={() => onChange(name)}>
+          {t.text.sectionColors[name as keyof typeof t.text.sectionColors]}
+        </Option>
+      ))}
+    </div>
+  );
+}

package/src/SectionSettingsIcon.tsx

@@ -0,0 +1,10 @@
+// The icon of the "Section settings" tool: Material Symbols' calendar_view_day (Outlined), drawn by Svg (icon.tsx).
+// Exposes the default SectionSettingsIcon, which takes the size and class the toolbar's buttons give an icon.
+import type { Icon } from '@phosphor-icons/react';
+import { Svg } from './icon';
+
+const SectionSettingsIcon = (({ size = 20, className }: { size?: number | string; className?: string }) => (
+  <Svg name="calendar_view_day" size={Number(size)} className={className} />
+)) as unknown as Icon;
+
+export default SectionSettingsIcon;

package/src/SettingsSections.tsx

@@ -0,0 +1,57 @@
+// The layout of a settings screen with several parts (Appearance › Header, Appearance › Footer), as the page form's
+// (EntryForm.tsx): `top` (the preview) over the sections, each folding in and out under its heading (FoldSection), with
+// their "on this page" list at the window's end edge on large and wider screens (FormColumns, SectionPane, SectionList).
+// The first is open from the start. On a phone (compact) only one is open at a time, an accordion: opening one folds the
+// others; wider they open and fold each on its own, as a page's. Exposes useSettingsSections and SettingsSections. Uses
+// formSections.ts and ui.tsx.
+import type { ReactNode } from 'react';
+import { FoldSection, FormColumns, type NavigationItem, SectionList, SectionPane, useAtLeast } from './ui';
+import { useFormSections } from './formSections';
+import { t } from './i18n';
+
+/** A section of the screen: its id, its heading (its name in the list) and its fields. */
+export type SettingsSection = NavigationItem & { content: ReactNode };
+
+/** The sections' state, made by the screen, so a field that keeps it from being saved can open its section (`unfold`) and
+ * mark it in the list (`steer`) before it is scrolled to. */
+export function useSettingsSections(sections: NavigationItem[]) {
+  const single = !useAtLeast('medium');
+  return useFormSections<string>(
+    sections,
+    sections.slice(0, 1).map((s) => s.id),
+    single,
+  );
+}
+
+export function SettingsSections({
+  title,
+  top,
+  sections,
+  state,
+}: {
+  /** The screen's name, over the sections list. */
+  title: string;
+  top?: ReactNode;
+  sections: SettingsSection[];
+  state: ReturnType<typeof useSettingsSections>;
+}) {
+  return (
+    <FormColumns
+      main={
+        <>
+          {top}
+          {sections.map((s) => (
+            <FoldSection key={s.id} {...state.sectionProps(s.id)}>
+              {s.content}
+            </FoldSection>
+          ))}
+        </>
+      }
+      pane={
+        <SectionPane caption={t.forms.sections.title} title={title}>
+          <SectionList title={t.forms.sections.title} items={sections} value={state.section} onChange={state.pick} />
+        </SectionPane>
+      }
+    />
+  );
+}