@morphemecms/cms 0.9.0-next-20261105115842 → 0.9.1

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>

package/src/HeaderSettings.tsx

@@ -0,0 +1,100 @@
+// "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, blocks.ts (BlockData), 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 type { BlockData } from './blocks';
+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 theme draws the header's button from (headerThemeOf): the same site data, as the block cards have it.
+  const data: BlockData = { lists: env.lists, testimonials: env.testimonials, relations: env.relations, 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, data));
+  }, [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={