@morphemecms/cms 0.9.0-next-20261105122349 → 0.9.0

package/src/BlockDialog.tsx

@@ -4,7 +4,9 @@
 // so it must be inside the form's Fields.Provider. list: the blocks of this text (the site's blocks on a
 // page, the sections on a fixed page). Over the blocks to choose from, as under "Standardblokke" (Library.tsx):
 // the search, the order (A–Å, Å–A or by group, kept in this browser) and the funnel with the filter by group
-// (the standard blocks, each app's under its name), the one picked as a chip.
+// (the standard blocks, each app's under its name), the one picked as a chip. Also the sheet of a section's
+// settings (its colour, SectionSettings.tsx), which goes the same way as a block's fields: Annuller, Gem, the question when closed changed.
+// On a large screen the fields and the section settings are in a side panel instead of the dialog (sheetPlacement.mjs, .editor-side-panel).
 import { useEffect, useRef, useState, type ReactElement } from 'react';
 import { ArrowsDownUp, Image } from '@phosphor-icons/react';
 import {
@@ -23,6 +25,7 @@ import {
   ProblemNote,
   SheetList,
   SheetGroupTitle,
+  useAtLeast,
 } from './ui';
 import { htmlBlock, type BlockData, type BlockProps, type SiteBlock } from './blocks';
 import { clean, newValue, problemAt, savedValue } from './check';
@@ -36,6 +39,8 @@ import CropField, { type Cut } from './Crop';
 import { t } from './i18n';
 import { snackbar } from '../lib/snackbar';
 import { closeChanged } from './ask';
+import SectionSettings from './SectionSettings';
+import { inPanel } from './sheetPlacement.mjs';
 
 export type BlockAsk = {
   list: SiteBlock[];
@@ -49,9 +54,14 @@ export type BlockAsk = {
   choose: (offer?: { image?: boolean; have?: string[] }) => Promise<{ type: string; props: BlockProps } | null>;
   /** New props for a block in the text; null when cancelled. isNew: one about to be put in ("Indsæt"). */
   edit: (type: string, props: BlockProps, isNew?: boolean) => Promise<BlockProps | null>;
+  /** The settings of the section the cursor is in (now its colour; null: none); the new ones, or null when cancelled. */
+  section: (color: string | null) => Promise<{ color: string | null } | null>;
 };
 
-type Open = { step: 'choose'; image?: boolean; have?: string[] } | { step: 'fields'; type: string; isNew: boolean };
+type Open = { step: 'choose'; image?: boolean; have?: string[] } | { step: 'fields'; type: string; isNew: boolean } | { step: 'section' };
+
+/** The type a section's settings are answered with (not a block's). */
+const SECTION = 'section';
 
 /** The choice of a picture in the sheet ("+" in the toolbar, MarkdownEditor.tsx), and a picture in the
  * text, which is changed here like a block's fields: another from the gallery, and its description, or
@@ -108,6 +118,7 @@ export function useBlockDialog(
 ): [BlockAsk, ReactElement] {
   const blockOf = (type: string) => (type === IMAGE ? picture : type === HTML ? htmlBlock : list.find((b) => b.type === type));
   const dialog = useRef<HTMLDialogElement>(null);
+  const large = useAtLeast('large');
   const answer = useRef<(a: Answer) => void>(() => {});
   const [open, setOpen] = useState<Open | null>(null);
   const [values, setValues] = useState<BlockProps>({});
@@ -137,6 +148,7 @@ export function useBlockDialog(
       setOpen(first);
       setValues(props);
       if (first.step === 'fields') shown.current = asWritten(first.type, props);
+      if (first.step === 'section') shown.current = JSON.stringify(props.color ?? '');
       setProblem('');
       wrongField.stop(null);
       setQuery('');
@@ -163,6 +175,10 @@ export function useBlockDialog(
     template,
     data,
     choose: (offer) => ask({ step: 'choose', image: offer?.image, have: offer?.have }),
+    section: async (color) => {
+      const answered = await ask({ step: 'section' }, { color: color ?? '' });
+      return answered && { color: answered.props.color ? String(answered.props.color) : null };
+    },
     edit: async (type, props, isNew = false) => {
       const fields = blockOf(type)?.fields ?? [];
       // A block on the page with what a field it has no value for means; a new one with the defaults.
@@ -193,12 +209,23 @@ export function useBlockDialog(
   // Closed (Annuller, the cross, a swipe down, Esc, a tap beside it) with the fields changed: the owner is
   // asked whether to keep them ("Indsæt", "Gem"), leave them or stay.
   async function leave() {
+    if (open?.step === 'section') {
+      if (JSON.stringify(values.color ?? '') === shown.current) return done(null);
+      const choice = await closeChanged(t.common.save);
+      if (choice === 'keep') saveSection();
+      else if (choice === 'discard') done(null);
+      return;
+    }
     if (open?.step !== 'fields' || asWritten(open.type, values) === shown.current) return done(null);
     const choice = await closeChanged(open.isNew ? t.blocks.insert : t.common.save);
     if (choice === 'keep') save(open.type);
     else if (choice === 'discard') done(null);
   }
 
+  function saveSection() {
+    done({ type: SECTION, props: { color: values.color ?? '' } });
+  }
+
   function pickSort(next: InsertSort) {
     setSort(next);
     try {
@@ -242,10 +269,19 @@ export function useBlockDialog(
           .map((g) => ({ key: g as string | null, items: found.filter((b) => groupOf(b) === g) }))
           .filter((g) => g.items.length > 0)
       : headed(found, (b) => letterOf(b.label));
+  const panel = inPanel(open?.step, large);
+  const title = open?.step === 'section' ? t.text.sectionSettings : block ? block.label : t.blocks.insert;
+  // While the panel is open, the page makes room for it (editor.css: [data-side-panel]).
+  useEffect(() => {
+    if (!panel) return;
+    document.documentElement.setAttribute('data-side-panel', '');
+    return () => document.documentElement.removeAttribute('data-side-panel');
+  }, [panel]);
   const element = (
     <BottomSheet
       ref={dialog}
-      aria-label={block ? block.label : t.blocks.insert}
+      aria-label={title}
+      panel={panel}
       // React passes on the close of a sheet inside it (the categories, a page): only its own counts.
       onClose={(e) => e.target === e.currentTarget && answer.current(null)}
       onCancel={(e) => {
@@ -253,9 +289,10 @@ export function useBlockDialog(
         e.preventDefault();
         void leave();
       }}
-      onClick={(e) => e.target === dialog.current && void leave()}
+      // A tap beside a dialog leaves it; beside the panel is the page, which is inert while it is open.
+      onClick={(e) => !panel && e.target === dialog.current && void leave()}
     >
-      <SheetTitle title={block ? block.label : t.blocks.insert} onClose={() => void leave()} />
+      <SheetTitle title={title} onClose={() => void leave()} />
       {open?.step === 'choose' && (
         <>
           <SearchRow
@@ -327,6 +364,14 @@ export function useBlockDialog(
           </SheetList>
         </>
       )}
+      {open?.step === 'section' && (
+        <>
+          <SheetBody>
+            <SectionSettings color={String(values.color ?? '')} onChange={(color) => setValues({ color })} />
+          </SheetBody>
+          <SheetActions onCancel={() => void leave()} onDone={saveSection} done={t.common.save} />
+        </>
+      )}
       {block && open?.step === 'fields' && (
         <>
           <SheetBody>

package/src/DataFileFields.tsx

@@ -0,0 +1,35 @@
+// A single data file's fields in a form: its own ("Aktiveret") and, when it is a list (the menus), its items as the menu
+// (MenuList). DataForm.tsx draws a menu with them, and Appearance › Header (HeaderSettings.tsx) both menus. Exposes
+// DataFileFields. Uses fields.tsx (FieldList, MenuList).
+import type { DataFile } from './schema';
+import { FieldList, MenuList } from './fields';
+
+export function DataFileFields({
+  dataFile,
+  value,
+  onChange,
+  add,
+}: {
+  dataFile: DataFile;
+  value: Record<string, unknown>;
+  onChange: (v: Record<string, unknown>) => void;
+  /** "Tilføj …" under the list (MenuList `add`), where the top bar has no "+" for it. */
+  add?: boolean;
+}) {
+  const root = dataFile.root;
+  return (
+    <>
+      {dataFile.fields.length > 0 && (
+        <FieldList fields={dataFile.fields} value={value} onChange={(v) => onChange(v as Record<string, unknown>)} />
+      )}
+      {root && (
+        <MenuList
+          field={root}
+          value={(value[root.name] ?? []) as unknown[]}
+          onChange={(v) => onChange({ ...value, [root.name]: v })}
+          add={add}
+        />
+      )}
+    </>
+  );
+}

package/src/DataForm.tsx

@@ -1,26 +1,19 @@
 // A JSON file: one entry of a folder (a price, a testimonial, a category) or a single file (a fixed
 // page, the menu). The files are written as JSON.stringify(data, null, 2) like the existing ones, with
 // the keys in their order, so a save only changes what was edited. An earlier version (Versions.tsx)
-// is opened as changes that are not saved.
+// is opened as changes that are not saved. Exposes DataForm (default). Its values from the file and back: dataFileValues.ts;
+// a menu's fields: DataFileFields.tsx.
 import { useMemo, useState } from 'react';
 import { Plus } from '@phosphor-icons/react';
-import {
-  entryData,
-  entryName,
-  slugify,
-  slugOf,
-  type Collection,
-  type DataFile,
-  type Field,
-  type FilesCollection,
-  type FolderCollection,
-} from './schema';
+import { entryName, slugify, slugOf, type DataFile, type FilesCollection, type FolderCollection } from './schema';
 import { config, header, keptBy, sharing, siteName, usesOf } from '@site/editor';
 import { apps, asWritten, collections } from './site';
 import { kindDraw } from './apps';
 import { ConflictError, type RepoFile } from './github';
-import { clean, newItem, newValue, problemAt, withDefaults } from './check';
-import { FieldInput, FieldList, Fields, MenuList, useWrongField, WrongField, type FieldContext } from './fields';
+import { clean, newItem, newValue, problemAt } from './check';
+import { FieldInput, FieldList, Fields, useWrongField, WrongField, type FieldContext } from './fields';
+import { DataFileFields } from './DataFileFields';
+import { dataOf, fieldsOf, listOnly, valuesOf } from './dataFileValues';
 import SectionsField from './SectionsField';
 import { notOffered, withPageBlocks } from './registry';
 import { shownAt, useUploads } from './images';
@@ -43,16 +36,6 @@ type Props = {
   kind?: string;
 };
 
-// A file that is only a list, without fields of its own beside it (a menu with "Aktiveret" is not).
-const listOnly = (dataFile?: DataFile) => !!dataFile?.root && !dataFile.fields.length;
-
-// A file's values in the form: its data (with the defaults of fields it has none for; an entry of a list as the list has
-// it now, entryData), or a list under the field's name.
-const valuesOf = (text: string, fields: Field[], dataFile: DataFile | undefined, collection: Collection, files: RepoFile[]) => {
-  if (listOnly(dataFile)) return { [dataFile!.root!.name]: JSON.parse(text) } as Record<string, unknown>;
-  return withDefaults(fields, collection.kind === 'folder' && !dataFile ? entryData(collection, text, files) : JSON.parse(text));
-};
-
 // The form starts again with an earlier version, or with the one saved now.
 export default function DataForm(props: Props) {
   return (
@@ -75,10 +58,7 @@ function Form({
   // installed are not offered under "Indsæt" (`off`), but drawn and checked where they are, as on a page.
   const off = useMemo(() => notOffered(env.files), [env.files]);
   const fields = useMemo(
-    () =>
-      withPageBlocks(
-        dataFile ? (dataFile.root ? [...dataFile.fields, dataFile.root] : dataFile.fields) : (collection as FolderCollection).fields,
-      ),
+    () => withPageBlocks(dataFile ? fieldsOf(dataFile) : (collection as FolderCollection).fields),
     [dataFile, collection],
   );
   const [base, setBase] = useState(file);
@@ -135,10 +115,9 @@ function Form({
 
   async function save() {
     if (wrongField.stop(problemAt(fields, values))) return;
-    let data: unknown = clean(fields, values);
+    let data = dataOf(fields, values, dataFile);
     // Looked through now that it is saved (FolderCollection.fresh).
     if (collection.kind === 'folder' && collection.fresh) delete (data as Record<string, unknown>)[collection.fresh.field];
-    if (listOnly(dataFile)) data = (data as Record<string, unknown>)[dataFile!.root!.name];
     let path = base.path;
     if (isNew) {
       const folder = collection as FolderCollection;
@@ -310,10 +289,12 @@ function Form({
           title={dataFile ? dataFile.label : isNew ? collection.create! : entryName(folder!, clean(fields, initial)) || kindLabel}
           back={
             header.includes(collection.id)
-              ? { href: '#header', label: t.common.parts.header }
-              : collection.kind === 'files' && collection.files.length === 1
-                ? { href: '#', label: siteName }
-                : { href: `#liste/${collection.id}`, label: collection.label }
+              ? { href: '#udseende/header', label: t.common.parts.header }
+              : collection.id === 'footer'
+                ? { href: '#udseende/footer', label: t.common.parts.footer }
+                : collection.kind === 'files' && collection.files.length === 1
+                  ? { href: '#', label: siteName }
+                  : { href: `#liste/${collection.id}`, label: collection.label }
           }
           status={fixed ? savedStatus({ savedAt, saving, deleting }) : undefined}
           view={view}
@@ -386,10 +367,7 @@ function Form({
             />
           ) : root ? (
             <div className="space-y-6">
-              {dataFile!.fields.length > 0 && (
-                <FieldList fields={dataFile!.fields} value={values} onChange={(v) => setValues(v as Record<string, unknown>)} />
-              )}
-              <MenuList field={root} value={items} onChange={setItems} />
+              <DataFileFields dataFile={dataFile!} value={values} onChange={setValues} />
             </div>
           ) : drawn ? (
             // On a wide computer screen the drawing in the wide column and the fields beside it at the

package/src/Deleted.tsx

@@ -5,7 +5,7 @@
 // the site sends it on, which it says, and where to), a price or testimonial last in the list. A
 // file from "Filer" is shown in a sheet first (FileView.tsx; a PDF, a video or a zip file with its icon
 // and name over it), with "Gendan" under it, and comes back with its record of tags (fileRecords.mjs) when it
-// was deleted together with it and no live record has its address.
+// was deleted together with it and no live record has its address. "Gendan" shows the loading indicator while it restores.
 import { useEffect, useRef, useState } from 'react';
 import { ArrowCounterClockwise } from '@phosphor-icons/react';
 import Screen from './Screen';
@@ -44,6 +44,8 @@ export default function Deleted({ id, files, env }: { id: string; files: RepoFil
   const [deleted, setDeleted] = useState<DeletedFile[] | null>(null);
   const [problem, setProblem] = useState('');
   const [busy, setBusy] = useState(false);
+  // True only while a restore runs (not while `open` fetches the bytes); the sheet's button shows busy for it.
+  const [restoring, setRestoring] = useState(false);
   // The file shown in the sheet, and its bytes as an address the <img> can show.
   const dialog = useRef<HTMLDialogElement>(null);
   const [shown, setShown] = useState<{ file: DeletedFile; src: string; bytes: Uint8Array } | null>(null);
@@ -86,6 +88,7 @@ export default function Deleted({ id, files, env }: { id: string; files: RepoFil
     const name = nameOf(collection, file);
     if (!pictures && !(await ask(t.history.restoreAsk(name), t.history.restore))) return;
     setBusy(true);
+    setRestoring(true);
     env.notify({ text: t.history.restoring });
     try {
       let content: string | Uint8Array = file.text;
@@ -132,6 +135,7 @@ export default function Deleted({ id, files, env }: { id: string; files: RepoFil
       });
     } finally {
       setBusy(false);
+      setRestoring(false);
     }
   }
 
@@ -180,8 +184,8 @@ export default function Deleted({ id, files, env }: { id: string; files: RepoFil
             )}
             <FileView src={shown.src} name={fileName(shown.file.path)} />
             <p className="text-sm text-muted">{capital(t.history.deletedAt(when(shown.file.at), shown.file.by))}</p>
-            <Button disabled={busy} onClick={() => restore(shown.file, shown.bytes)}>
-              {busy ? t.history.restoring : t.history.restore}
+            <Button busy={restoring} disabled={busy} onClick={() => restore(shown.file, shown.bytes)}>
+              {t.history.restore}
             </Button>
           </SheetBody>
         )}

package/src/EntryForm.tsx

@@ -5,9 +5,9 @@
 // old one (addresses.ts). The Filer files the page newly refers to get the page's tags in the same commit (autoTags.mjs).
 // An earlier version (Versions.tsx) is opened as changes that are not saved,
 // at the address the page or post has now. Its preview draft says whether it is a post (post, for the lead).
-// The form's sections are listed as "on this page" in a card at the end of the form (large and wider only): SectionList in ui.tsx.
+// The form's sections are listed as "on this page" in a card at the end of the form (large and wider only): SectionList in ui.tsx;
+// which are open and the one in view: formSections.ts.
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { flushSync } from 'react-dom';
 import { slugify, slugOf, type Field, type MarkdownCollection } from './schema';
 import { config, frontLeads, headingLooks, sectionLooks, sharing, standardPages, standardPaths } from '@site/editor';
 import { asWritten, placeOf, standardPageAt } from './site';
@@ -16,15 +16,15 @@ import { addressOf, moveRedirects, REDIRECTS, retarget } from './addresses';
 import { changesOf, flatten, readAll, REDIRECT_FILES, setRedirect } from './redirectData';
 import { TAB_ROUTES } from './Redirects';
 import { choose } from './ask';
-import { sideSettingOf } from './SideColumn';
-import { sideSwitchShown } from '../lib/side-block.mjs';
+import { offeredTemplatesOf, shownTemplate, templateFieldOf } from './templateField';
+import { templateOf, templateWritten } from '../lib/page-template.mjs';
 import { booleanRead, booleanWrite, readFields, splitFrontmatter, writeFields } from './frontmatter.mjs';
 import MarkdownEditor, { type MarkdownHandle } from './MarkdownEditor';
 import { useBlockDialog } from './BlockDialog';
 import { blockHtml } from '../lib/blocks.mjs';
 import { sectionBlocks } from './blocks';
 import { looksOf, pageH1 } from './sections.mjs';
-import { sectionInView, spyLine } from '../lib/section-in-view.mjs';
+import { useFormSections } from './formSections';
 import { publicPath, shownAt, useUploads } from './images';
 import { filerAddresses, useMediaPicker } from './Media';
 import { autoTagChanges, newlyUsed } from './autoTags.mjs';
@@ -117,19 +117,23 @@ function valuesOf(collection: MarkdownCollection, file: RepoFile): Record<string
   );
 }
 
-// Scrolling to a part of the form: smoothly, unless less motion is asked for.
-const scrolling = (): ScrollBehavior => (matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth');
-
 const same = (a: unknown, b: unknown) => JSON.stringify(a) === JSON.stringify(b);
 
 // The values as they are saved: a field only in use with another's value (Field.only: "Tidspunkt" with
-// "Planlagt") is empty without it, so it leaves the file; a switch that is on when its key is missing (Field.missing,
-// "Sidekolonne") leaves the file when it is on (booleanWrite).
-const inForm = (fields: Field[], values: Record<string, unknown>) =>
+// "Planlagt") is empty without it, so it leaves the file; a switch that is on when its key is missing (Field.missing)
+// leaves the file when it is on (booleanWrite); a field of the theme's templates (Field.offered) leaves it for the theme's
+// default, `offered` (templateWritten).
+const inForm = (fields: Field[], values: Record<string, unknown>, offered: string[]) =>
   Object.fromEntries(
     fields.map((f) => [
       f.name,
-      inUse(f, fields, values) ? (f.type === 'boolean' ? booleanWrite(values[f.name], f.missing) : values[f.name]) : '',
+      !inUse(f, fields, values)
+        ? ''
+        : f.offered === 'templates'
+          ? templateWritten(values[f.name], offered)
+          : f.type === 'boolean'
+            ? booleanWrite(values[f.name], f.missing)
+            : values[f.name],
     ]),
   );
 
@@ -200,8 +204,10 @@ function Form({
   const [savedAt, setSavedAt] = useSavedAt(env, file.path);
 
   const isNew = !base.path;
-  const asSaved = useMemo(() => inForm(collection.fields, values), [collection, values]);
-  const was = useMemo(() => inForm(collection.fields, initial), [collection, initial]);
+  // The templates the theme chosen offers, for the field `offered: 'templates'.
+  const offered = useMemo(() => offeredTemplatesOf(env.files), [env.files]);
+  const asSaved = useMemo(() => inForm(collection.fields, values, offered), [collection, values, offered]);
+  const was = useMemo(() => inForm(collection.fields, initial, offered), [collection, initial, offered]);
   const changed = collection.fields.filter((f) => !same(asSaved[f.name], was[f.name]));
   const dirty = bodyChanged || changed.length > 0;
 
@@ -225,64 +231,13 @@ function Form({
     ...(isNew ? [] : [{ id: 'versions', label: t.history.versions }]),
   ];
   const shows = (id: Section) => sections.some((s) => s.id === id);
-  // The section in view, marked in the sections list: while the page scrolls, the last one whose top is above a third of the
-  // screen (at the bottom of the page, the last one in view). A tap in the list marks its own and scrolls there; the
-  // mark stays meanwhile (`steering`, until the scroll ends).
-  const [section, setSection] = useState<Section>('content');
-  const boxes = useRef<Partial<Record<Section, HTMLElement | null>>>({});
-  const order = useRef<Section[]>([]);
-  order.current = sections.map((s) => s.id as Section);
-  const steering = useRef(0);
-  const spy = useRef(() => {});
-  const steer = (id: Section) => {
-    setSection(id);
-    steering.current = performance.now() + 1500;
-    addEventListener('scrollend', () => (steering.current = 0), { once: true });
-  };
-  // The sections that are open; at first only the text (and "Søgemaskiner" when it is opened at it, `opening`).
-  const [open, setOpen] = useState<ReadonlySet<Section>>(() => new Set(['content', ...(opening === 'seo' ? ['seo' as const] : [])]));
-  const unfold = (id: Section) => setOpen((was) => (was.has(id) ? was : new Set([...was, id])));
-  // A section opened by its heading is marked in the sections list; one folded, the one in view now (the page is shorter,
-  // without a scroll).
-  const toggle = (id: Section) => {
-    const opening = !open.has(id);
-    setOpen((was) => {
-      const next = new Set(was);
-      if (opening) next.add(id);
-      else next.delete(id);
-      return next;
-    });
-    if (opening) setSection(id);
-    else requestAnimationFrame(() => spy.current());
-  };
-  useEffect(() => {
-    let frame = 0;
-    spy.current = () => {
-      frame = 0;
-      if (performance.now() < steering.current) return;
-      const atBottom = innerHeight + scrollY >= document.documentElement.scrollHeight - 8;
-      const tops: Record<string, number | undefined> = {};
-      for (const id of order.current) tops[id] = boxes.current[id]?.getBoundingClientRect().top;
-      const here = sectionInView(order.current, tops, spyLine(innerHeight, atBottom));
-      if (here) setSection(here as Section);
-    };
-    const onScroll = () => {
-      if (!frame) frame = requestAnimationFrame(spy.current);
-    };
-    addEventListener('scroll', onScroll, { passive: true });
-    return () => {
-      removeEventListener('scroll', onScroll);
-      cancelAnimationFrame(frame);
-    };
-  }, []);
-  // Opens a section and scrolls to it (or to `box` in it: the text). It is opened at once (flushSync), so it is there to scroll to.
+  // The sections: which are open, at first only the text (and "Søgemaskiner" when it is opened at it, `opening`); the one in
+  // view, marked in the sections list; a tap there opens one and scrolls to it (formSections.ts).
+  const { section, steer, unfold, goTo, pick, sectionProps } = useFormSections<Section>(sections, [
+    'content',
+    ...(opening === 'seo' ? ['seo' as const] : []),
+  ]);
   const textBox = useRef<HTMLDivElement>(null);
-  const goTo = (id: Section, box?: HTMLElement | null) => {
-    if (!open.has(id)) flushSync(() => unfold(id));
-    steer(id);
-    requestAnimationFrame(() => (box ?? boxes.current[id])?.scrollIntoView({ block: 'start', behavior: scrolling() }));
-  };
-  const pick = (id: string) => goTo(id as Section);
   // Opened from "SEO-vurdering" (SeoScores.tsx): straight to "Søgemaskiner" (open from the start, `open`).
   useEffect(() => {
     if (opening !== 'seo') return;
@@ -294,13 +249,6 @@ function Form({
   useEffect(() => {
     if (wrongField.field) steer(sectionOf(wrongField.field.path));
   }, [wrongField.field?.at]);
-  // A section: where it is, for the sections list, its heading (its name in the list), and whether it is open.
-  const sectionProps = (id: Section) => ({
-    ref: (el: HTMLElement | null) => void (boxes.current[id] = el),
-    title: sections.find((s) => s.id === id)!.label,
-    open: open.has(id),
-    onToggle: () => toggle(id),
-  });
 
   // The SEO rating at the top of "Søgemaskiner" (seo.ts), again with every change of a field while that is open and near
   // the screen (`seoBox`, what is in the section, is hidden while it is folded); the same for the preview of a shared link
@@ -460,7 +408,7 @@ function Form({
 
     // A new file gets all its filled-in fields in the order of the form; an existing one only the changed. As saved:
     // the values given (a new one without a title has its name, "Ny side 1", named()), not only those in the form.
-    const saved = inForm(collection.fields, values);
+    const saved = inForm(collection.fields, values, offered);
     const written = (isNew ? collection.fields.filter((f) => !same(saved[f.name], []) && f.type !== 'readonly') : changed).filter(
       (f) => f.name !== 'path',
     );
@@ -597,7 +545,7 @@ function Form({
   }
 
   // "Forhåndsvis": the page or post with what is changed in the form; a new one, or one whose layout is changed in the
-  // form (a field with `layout`, "Hele bredden"), in the page of another one of its kind saved with that layout, with
+  // form (a field with `layout`, the template), in the page of another one of its kind saved with that layout, with
   // all of the form put in it (pagePreview.tsx).
   const [openPreview, previewSheet] = usePagePreview();
   const showPreview = () =>
@@ -606,9 +554,11 @@ function Form({
       const relaid = !isNew && changed.some((f) => f.layout);
       const sameLayout = (data: Record<string, unknown>) =>
         layout.every((f) =>
-          f.type === 'boolean'
-            ? booleanRead(data[f.name], f.missing) === (values[f.name] === true)
-            : String(data[f.name] || '') === String(values[f.name] || ''),
+          f.offered === 'templates'
+            ? templateOf({ template: data[f.name] }, offered) === templateOf({ template: values[f.name] }, offered)
+            : f.type === 'boolean'
+              ? booleanRead(data[f.name], f.missing) === (values[f.name] === true)
+              : String(data[f.name] || '') === String(values[f.name] || ''),
         );
       const changes = (...names: string[]) => isNew || relaid || changed.some((f) => names.includes(f.name));
       const others =
@@ -648,11 +598,14 @@ function Form({
       set('date', String(v).slice(0, 10));
   };
   // The fields in use (Field.only).
-  // "Sidekolonne" only while src/data/side.json chooses a block and the page is not "Hele bredden" (sideSwitchShown).
-  const sideShown = sideSwitchShown({ block: sideSettingOf(env.files) }, values);
-  const field = (f: Field) =>
-    inUse(f, collection.fields, values) &&
-    (f.name !== 'side' || sideShown) && <FieldInput key={f.name} field={f} value={values[f.name]} onChange={(v) => onChange(f, v)} />;
+  // A field of the theme's templates (Field.offered) shows the options the theme offers, and not while only one is left.
+  const field = (f: Field) => {
+    if (!inUse(f, collection.fields, values)) return false;
+    const shown = f.offered ? templateFieldOf(f, env.files) : f;
+    if (!shown) return false;
+    const value = f.offered ? shownTemplate(shown, values[f.name]) : values[f.name];
+    return <FieldInput key={f.name} field={shown} value={value} onChange={(v) => onChange(f, v)} />;
+  };
 
   return (
     <Fields.Provider value={fields}>

package/src/FooterSettings.tsx

@@ -0,0 +1,76 @@
+// "Udseende" › "Footer" (#udseende/footer): the footer's text under the name, its two headings and its links (footer.json),
+// on one screen laid out as a page's form (SettingsSections.tsx): a preview of the footer as the form has it, on a phone and
+// a computer (partPreview.tsx), over the sections Text, Contact and Links. "Gem ændringer" saves the file in its own
+// commit (useDataFiles.ts). Exposes FooterSettings (default). Uses fields.tsx and footerPreview.mjs.
+import { useMemo } from 'react';
+import FormFrame from './FormFrame';
+import { FieldList, Fields, WrongField, type FieldContext } from './fields';
+import { useDataFiles, type DataFilePart } from './useDataFiles';
+import { SettingsSections, useSettingsSections, type SettingsSection } from './SettingsSections';
+import { PartPreview } from './partPreview';
+import { footerDraft, swapFooter } from './footerPreview.mjs';
+import { collections } from './site';
+import type { FilesCollection } from './schema';
+import type { Env } from './App';
+import { t } from './i18n';
+
+// The footer's file, by its collection (defaults/collections.ts); a site without it has nothing to show.
+const collection = collections.find((c): c is FilesCollection => c.id === 'footer' && c.kind === 'files');
+const parts: DataFilePart[] = collection ? [{ collection, dataFile: collection.files[0] }] : [];
+
+// The sections and the file's fields (by name) that each has.
+const places = [
+  { id: 'text', label: t.library.footerSections.text, names: ['text'] },
+  { id: 'contact', label: t.library.footerSections.contact, names: ['contactHeading'] },
+  { id: 'links', label: t.library.footerSections.links, names: ['linksHeading', 'links'] },
+];
+// The section a field is in (its path: "links.0.label").
+const placeOf = (path: string) => places.find((p) => p.names.includes(path.split('.')[0])) ?? places[0];
+
+// The class of a link in the footer (Footer.astro), for a footer whose page has no link to copy.
+const THEME = { linkClass: 'md-footer-item' };
+
+const back = { href: '#udseende', label: t.common.parts.appearance };
+
+export default function FooterSettings({ env }: { env: Env }) {
+  const layout = useSettingsSections(places);
+  const form = useDataFiles(env, parts, (_file, path) => {
+    const { id } = placeOf(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 = footerDraft(form.initial[0] ?? {}, form.values[0] ?? {});
+    return (doc: Document) => swapFooter(doc, draft, THEME);
+  }, [form.initial, form.values]);
+
+  const sections: SettingsSection[] = places.map((p) => ({
+    id: p.id,
+    label: p.label,
+    content: parts[0] && (
+      <WrongField.Provider value={form.wrong(0)}>
+        <FieldList
+          fields={parts[0].dataFile.fields.filter((f) => p.names.includes(f.name))}
+          value={form.values[0]}
+          onChange={(v) => form.set(0, v as Record<string, unknown>)}
+        />
+      </WrongField.Provider>
+    ),
+  }));
+
+  return (
+    <Fields.Provider value={context}>
+      <FormFrame title={t.common.parts.footer} back={back} dirty={form.dirty} saving={form.saving} onSave={form.save}>
+        <SettingsSections
+          title={t.common.parts.footer}
+          top={<PartPreview part="footer" swap={swap} />}
+          sections={sections}
+          state={layout}
+        />
+      </FormFrame>
+    </Fields.Provider>
+  );
+}

package/src/FormFrame.tsx

@@ -215,12 +215,13 @@ export default function FormFrame<T extends string>({
               )}
               <Button
                 disabled={saving}
+                busy={saving && !deleting}
                 onClick={() => {
                   askToNotify();
                   void onSave();
                 }}
               >
-                {saving ? <LoadingIndicator>{deleting ? t.app.busy.deleting : t.app.busy.saving}</LoadingIndicator> : t.common.saveChanges}
+                {t.common.saveChanges}
               </Button>
             </div>
           </div>