@morphemecms/cms 0.9.0-next-20261105115842 → 0.9.1

package/src/headerPreview.mjs

@@ -0,0 +1,168 @@
+// The editor's preview of the header (HeaderSettings.tsx): what the header's settings in the form change (headerDraft),
+// and those changes put into the site's page (swapHeader), in the parts Header.astro and MobileNav.astro mark with
+// data-editor: the menu's items (header-nav), the menu button (header-menu) and its side, the bar of "Mobilmenu"
+// (mobile-nav) and the button's place (header-cta). Exposes headerDraft and swapHeader. Uses site/header.mjs; a DOM (the
+// browser's, jsdom in the tests), no React: what the theme's components draw comes in as HTML.
+import { headerOf, sortedNav } from '../site/header.mjs';
+
+/** @typedef {import('../site/header.mjs').NavLink} NavLink */
+/** @typedef {import('../site/header.mjs').NavItem} NavItem */
+/** @typedef {import('../site/header.mjs').Button} Button */
+
+/**
+ * The header's three files as the form has them: menu.json, mobile-menu.json and header.json.
+ * @typedef {{ menu: Record<string, any>, mobileMenu: Record<string, any>, header: Record<string, any> }} HeaderValues
+ */
+
+/**
+ * What the form changes in the header; undefined leaves it as it is on the site. `nav` null: the menu is off (no items,
+ * no menu button); `mobileNav` empty: no bar; `button` null: the phone icon.
+ * @typedef {{ nav?: NavItem[] | null, mobileNav?: NavLink[], menuSide?: 'start' | 'end', button?: Button | null }} HeaderDraft
+ */
+
+// As site/site.ts reads the files: the menu's items unless it is off, the bar's links while it is on.
+/** @param {Record<string, any>} menu */
+const navOf = (menu) => (menu.enabled !== false ? sortedNav(menu.items ?? []).map(linkOf) : null);
+/** @param {Record<string, any>} mobileMenu */
+const mobileNavOf = (mobileMenu) => (mobileMenu.enabled ? (mobileMenu.items ?? []).map(linkOf) : []);
+// An item with only what the header shows of it.
+/** @param {Record<string, any>} item @returns {NavItem} */
+const linkOf = ({ label = '', href = '', children }) =>
+  children?.length ? { label, href, children: children.map(linkOf) } : { label, href };
+
+const same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+
+/**
+ * What the form (`now`) changes from the files as they were saved (`saved`): only what differs is in it, so the rest of
+ * the page stays exactly as on the site.
+ * @param {HeaderValues} saved
+ * @param {HeaderValues} now
+ * @returns {HeaderDraft}
+ */
+export function headerDraft(saved, now) {
+  /** @type {HeaderDraft} */
+  const draft = {};
+  const [nav, navBefore] = [navOf(now.menu), navOf(saved.menu)];
+  if (!same(nav, navBefore)) draft.nav = nav;
+  const [mobileNav, mobileBefore] = [mobileNavOf(now.mobileMenu), mobileNavOf(saved.mobileMenu)];
+  if (!same(mobileNav, mobileBefore)) draft.mobileNav = mobileNav;
+  const [header, before] = [headerOf(now.header), headerOf(saved.header)];
+  if (header.menuSide !== before.menuSide) draft.menuSide = header.menuSide;
+  if (!same(header.button, before.button)) draft.button = header.button;
+  return draft;
+}
+
+/**
+ * How the theme draws what the page may not have: the menu button's classes on each side, the button's place as HTML
+ * (when `button` changed; with data-editor="header-cta"), an empty bar of "Mobilmenu" with one tab (for a page without
+ * one), the name of an item's sub-pages button, and the page's address (for the open page's item).
+ * @typedef {{ menuClass: Record<'start' | 'end', string>, cta?: string, mobileNav: string, subpagesOf: (label: string) => string, current: string }} HeaderTheme
+ */
+
+/** @param {ParentNode} doc @param {string} name @returns {HTMLElement | null} */
+const part = (doc, name) => doc.querySelector(`[data-editor="${name}"]`);
+
+// As Header.astro marks the open page: its own address, or a page under it (not the front page's).
+/** @param {string} current @param {string} href */
+const isActive = (current, href) => current === href || (href !== '/' && current.startsWith(href));
+
+/** @param {Element | null} a @param {NavLink} link @param {boolean} active */
+function setLink(a, link, active) {
+  if (!a) return;
+  a.textContent = link.label;
+  a.setAttribute('href', link.href);
+  if (active) a.setAttribute('aria-current', 'page');
+  else a.removeAttribute('aria-current');
+}
+
+/** @param {Document} doc @param {string} html */
+function fromHtml(doc, html) {
+  const box = doc.createElement('template');
+  box.innerHTML = html.trim();
+  return box.content;
+}
+
+// The menu's items, each drawn as one of the page's: an item with sub-items as one that has them (its button and menu),
+// else as one without. A page whose menu has neither keeps it as it is.
+/** @param {HTMLElement} nav @param {NavItem[]} items @param {HeaderTheme} theme */
+function drawNav(nav, items, theme) {
+  const list = nav.querySelector('ul');
+  const rows = [...(list?.children ?? [])];
+  const plain = rows.find((li) => !li.querySelector('[data-nav-toggle]'));
+  const parent = rows.find((li) => li.querySelector('[data-nav-toggle]'));
+  if (!list || (!plain && !parent)) return;
+  const drawn = items.map((item, i) => {
+    const kids = item.children ?? [];
+    const li = /** @type {HTMLElement} */ (((kids.length && parent) || plain || parent).cloneNode(true));
+    setLink(li.querySelector('a'), item, isActive(theme.current, item.href));
+    const toggle = li.querySelector('[data-nav-toggle]');
+    const menu = toggle && li.querySelector(`[id="${toggle.getAttribute('aria-controls')}"]`);
+    if (!kids.length) {
+      toggle?.remove();
+      menu?.remove();
+      return li;
+    }
+    if (toggle && menu) {
+      menu.id = `menu-${i}`;
+      toggle.setAttribute('aria-controls', menu.id);
+      toggle.setAttribute('aria-label', theme.subpagesOf(item.label));
+      const sub = menu.querySelector('ul');
+      const one = sub?.firstElementChild;
+      if (sub && one)
+        sub.replaceChildren(
+          ...kids.map((child) => {
+            const row = /** @type {HTMLElement} */ (one.cloneNode(true));
+            setLink(row.querySelector('a'), child, theme.current === child.href);
+            return row;
+          }),
+        );
+    }
+    return li;
+  });
+  list.replaceChildren(...drawn);
+}
+
+// The bar of "Mobilmenu": its links as its tabs, the first one's look; a page without the bar gets the theme's empty one at
+// the end of the header, where MobileNav.astro is.
+/** @param {Document} doc @param {NavLink[]} links @param {HeaderTheme} theme */
+function drawMobileNav(doc, links, theme) {
+  let bar = part(doc, 'mobile-nav');
+  if (!links.length) return bar?.remove();
+  if (!bar) {
+    part(doc, 'header')?.append(fromHtml(doc, theme.mobileNav));
+    bar = part(doc, 'mobile-nav');
+  }
+  const list = bar?.querySelector('ul');
+  const one = list?.firstElementChild;
+  if (!list || !one) return;
+  list.replaceChildren(
+    ...links.map((link) => {
+      const row = /** @type {HTMLElement} */ (one.cloneNode(true));
+      setLink(row.querySelector('a'), link, isActive(theme.current, link.href));
+      return row;
+    }),
+  );
+}
+
+/**
+ * Puts what the form changes (headerDraft) into the site's page, drawn as the theme draws it (`theme`).
+ * @param {Document} doc
+ * @param {HeaderDraft} draft
+ * @param {HeaderTheme} theme
+ */
+export function swapHeader(doc, draft, theme) {
+  const nav = part(doc, 'header-nav');
+  const menu = part(doc, 'header-menu');
+  if (draft.nav === null) {
+    nav?.remove();
+    menu?.remove();
+  } else if (draft.nav && nav) drawNav(nav, draft.nav, theme);
+  if (draft.mobileNav) drawMobileNav(doc, draft.mobileNav, theme);
+  if (draft.button !== undefined && theme.cta !== undefined) part(doc, 'header-cta')?.replaceWith(fromHtml(doc, theme.cta));
+  // The menu button first in the header's row, or last (after the button's place).
+  if (draft.menuSide && menu?.isConnected && menu.parentElement) {
+    menu.className = theme.menuClass[draft.menuSide];
+    if (draft.menuSide === 'start') menu.parentElement.prepend(menu);
+    else menu.parentElement.append(menu);
+  }
+}

package/src/headerPreview.test.mjs

@@ -0,0 +1,183 @@
+// Tests headerPreview.mjs: what the header's settings in the form change (headerDraft), and those changes put into a page
+// drawn as Header.astro and MobileNav.astro draw it (swapHeader). jsdom stands in for the browser's DOM.
+// Run: node --test src/headerPreview.test.mjs
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { JSDOM } from 'jsdom';
+import { headerDraft, swapHeader } from './headerPreview.mjs';
+
+// A page with the header as the site draws it: the menu button at the start, an item without and one with sub-items, the
+// phone icon, and the bar of "Mobilmenu".
+const PAGE = `<!doctype html><html><body>
+<header data-editor="header"><div data-header-row>
+  <div data-editor="header-menu" class="start-class"><button>Menu</button></div>
+  <a href="/" class="title">Logo</a>
+  <nav data-editor="header-nav"><ul>
+    <li data-nav-item><a href="/" class="md-nav-item" aria-current="page">Forside</a></li>
+    <li data-nav-item><a href="/b/" class="md-nav-item md-nav-item-parent">Behandlinger</a>
+      <button data-nav-toggle aria-controls="menu-1" aria-label="Sider under Behandlinger"></button>
+      <div id="menu-1"><ul><li><a href="/b/a/">Arm</a></li></ul></div></li>
+  </ul></nav>
+  <a data-editor="header-cta" href="tel:12345678" aria-label="Ring 12 34 56 78">phone</a>
+</div>
+<nav data-editor="mobile-nav"><ul><li><a href="/" class="tab" aria-current="page">Forside</a></li></ul></nav>
+</header><main></main></body></html>`;
+
+const THEME = {
+  menuClass: { start: 'start-class', end: 'end-class' },
+  mobileNav: '<nav data-editor="mobile-nav" class="bar"><ul class="tabs"><li><a href="/" class="tab"></a></li></ul></nav>',
+  subpagesOf: (label) => `Sider under ${label}`,
+  current: '/',
+};
+
+const page = () => new JSDOM(PAGE).window.document;
+const part = (doc, name) => doc.querySelector(`[data-editor="${name}"]`);
+const labels = (el) => [...el.querySelectorAll(':scope > ul > li > a')].map((a) => a.textContent);
+
+const SAVED = {
+  menu: {
+    enabled: true,
+    items: [
+      { label: 'Forside', href: '/' },
+      { label: 'Behandlinger', href: '/b/', children: [{ label: 'Arm', href: '/b/a/' }] },
+    ],
+  },
+  mobileMenu: { enabled: true, items: [{ label: 'Forside', href: '/' }] },
+  header: { menuSide: 'start' },
+};
+const withChange = (change) => ({ ...SAVED, ...change });
+
+test('headerDraft: nothing changed is an empty draft', () => {
+  assert.deepEqual(headerDraft(SAVED, structuredClone(SAVED)), {});
+});
+
+test('headerDraft: the menu turned off is no items and no menu button', () => {
+  assert.deepEqual(headerDraft(SAVED, withChange({ menu: { ...SAVED.menu, enabled: false } })), { nav: null });
+});
+
+test('headerDraft: the menu items with their sub-items A–Å', () => {
+  const items = [
+    {
+      label: 'Om',
+      href: '/om/',
+      children: [
+        { label: 'Zone', href: '/z/' },
+        { label: 'Arm', href: '/a/' },
+      ],
+    },
+  ];
+  assert.deepEqual(headerDraft(SAVED, withChange({ menu: { enabled: true, items } })).nav, [
+    {
+      label: 'Om',
+      href: '/om/',
+      children: [
+        { label: 'Arm', href: '/a/' },
+        { label: 'Zone', href: '/z/' },
+      ],
+    },
+  ]);
+});
+
+test('headerDraft: "Mobilmenu" turned off is an empty bar, turned on its links', () => {
+  assert.deepEqual(headerDraft(SAVED, withChange({ mobileMenu: { ...SAVED.mobileMenu, enabled: false } })), { mobileNav: [] });
+  const off = withChange({ mobileMenu: { enabled: false, items: [{ label: 'Kontakt', href: '/kontakt/' }] } });
+  assert.deepEqual(headerDraft(off, withChange({ mobileMenu: { ...off.mobileMenu, enabled: true } })), {
+    mobileNav: [{ label: 'Kontakt', href: '/kontakt/' }],
+  });
+});
+
+test('headerDraft: the button and the menu button at the end', () => {
+  const header = { button: { enabled: true, label: 'Book', to: 'booking' }, menuSide: 'end' };
+  assert.deepEqual(headerDraft(SAVED, withChange({ header })), { menuSide: 'end', button: { label: 'Book', to: 'booking' } });
+  assert.deepEqual(headerDraft(withChange({ header }), SAVED), { menuSide: 'start', button: null });
+});
+
+test('swapHeader: an empty draft leaves the page as it is', () => {
+  const doc = page();
+  const before = doc.body.innerHTML;
+  swapHeader(doc, {}, THEME);
+  assert.equal(doc.body.innerHTML, before);
+});
+
+test('swapHeader: the menu items drawn again, with and without sub-items', () => {
+  const doc = page();
+  const nav = [
+    { label: 'Kontakt', href: '/kontakt/' },
+    {
+      label: 'Om',
+      href: '/om/',
+      children: [
+        { label: 'Hold', href: '/om/hold/' },
+        { label: 'Pris', href: '/om/pris/' },
+      ],
+    },
+    { label: 'Forside', href: '/' },
+  ];
+  swapHeader(doc, { nav }, THEME);
+  const el = part(doc, 'header-nav');
+  assert.deepEqual(labels(el), ['Kontakt', 'Om', 'Forside']);
+  const [kontakt, om, forside] = el.querySelectorAll(':scope > ul > li');
+  assert.equal(kontakt.querySelector('[data-nav-toggle]'), null);
+  assert.equal(kontakt.querySelector('a').hasAttribute('aria-current'), false);
+  assert.equal(forside.querySelector('a').getAttribute('aria-current'), 'page');
+  const toggle = om.querySelector('[data-nav-toggle]');
+  assert.equal(toggle.getAttribute('aria-controls'), 'menu-1');
+  assert.equal(toggle.getAttribute('aria-label'), 'Sider under Om');
+  assert.deepEqual(
+    [...om.querySelectorAll('#menu-1 a')].map((a) => [a.textContent, a.getAttribute('href')]),
+    [
+      ['Hold', '/om/hold/'],
+      ['Pris', '/om/pris/'],
+    ],
+  );
+});
+
+test('swapHeader: the menu off removes its items and the menu button', () => {
+  const doc = page();
+  swapHeader(doc, { nav: null }, THEME);
+  assert.equal(part(doc, 'header-nav'), null);
+  assert.equal(part(doc, 'header-menu'), null);
+});
+
+test('swapHeader: the bar of "Mobilmenu" drawn again, removed, and put in when the page has none', () => {
+  const doc = page();
+  swapHeader(
+    doc,
+    {
+      mobileNav: [
+        { label: 'A', href: '/a/' },
+        { label: 'B', href: '/b/' },
+      ],
+    },
+    THEME,
+  );
+  assert.deepEqual(labels(part(doc, 'mobile-nav')), ['A', 'B']);
+  swapHeader(doc, { mobileNav: [] }, THEME);
+  assert.equal(part(doc, 'mobile-nav'), null);
+  swapHeader(doc, { mobileNav: [{ label: 'C', href: '/' }] }, THEME);
+  const bar = part(doc, 'mobile-nav');
+  assert.equal(bar.className, 'bar');
+  assert.equal(bar.parentElement, part(doc, 'header'));
+  assert.deepEqual(labels(bar), ['C']);
+  assert.equal(bar.querySelector('a').getAttribute('aria-current'), 'page');
+});
+
+test('swapHeader: the button in place of the phone icon', () => {
+  const doc = page();
+  const cta = '<div data-editor="header-cta" class="cta"><a href="/booking/">Book</a></div>';
+  swapHeader(doc, { button: { label: 'Book', to: 'booking' } }, { ...THEME, cta });
+  assert.equal(part(doc, 'header-cta').className, 'cta');
+  assert.equal(part(doc, 'header-cta').textContent, 'Book');
+  assert.equal(doc.querySelectorAll('[data-editor="header-cta"]').length, 1);
+});
+
+test('swapHeader: the menu button at the end and back at the start', () => {
+  const doc = page();
+  swapHeader(doc, { menuSide: 'end' }, THEME);
+  const menu = part(doc, 'header-menu');
+  assert.equal(menu.className, 'end-class');
+  assert.equal(menu.parentElement.lastElementChild, menu);
+  swapHeader(doc, { menuSide: 'start' }, THEME);
+  assert.equal(menu.className, 'start-class');
+  assert.equal(menu.parentElement.firstElementChild, menu);
+});

package/src/headerTheme.tsx

@@ -0,0 +1,58 @@
+// How the theme draws the parts of the header that its settings put in, as HTML for the editor's preview of the header
+// (headerPreview.mjs HeaderTheme): the button or the phone icon in the button's place, an empty bar of "Mobilmenu", the
+// menu button's classes on each side. Exposes headerThemeOf. Uses the theme's Buttons, IconButton, Tabs and headerParts.ts.
+import Buttons from '@theme/blocks/buttons/Buttons';
+import IconButton from '@theme/ui/IconButton';
+import { tabClass } from '@theme/ui/Tabs';
+import { headerCtaClass, headerEdge, headerMenuClass, mobileNavClass, mobileNavListClass } from '@theme/components/headerParts';
+import { buttonsOf } from './standard/buttons/view';
+import type { Button } from './standard/buttons/fields';
+import type { BlockData } from './blocks';
+import { htmlOf } from './pagePreview';
+import { siteT } from './i18n';
+import type { HeaderTheme } from './headerPreview.mjs';
+
+// As Header.astro draws the button's place: the button (filled) from the medium window size up, else the phone icon.
+function ctaOf(button: Button | null, data: BlockData) {
+  if (button) {
+    return (
+      <div data-editor="header-cta" className={headerCtaClass}>
+        <Buttons buttons={buttonsOf([{ ...button, kind: 'filled' }], data)} />
+      </div>
+    );
+  }
+  const { phone } = data.site.contact;
+  return (
+    <IconButton
+      href={`tel:${phone.replace(/\s/g, '')}`}
+      icon="phone"
+      label={`${data.site.labels.call} ${phone}`}
+      className={headerEdge.end}
+      data-editor="header-cta"
+    />
+  );
+}
+
+// As MobileNav.astro draws the bar, with one tab for the links to be drawn as.
+const mobileNavHtml = () =>
+  htmlOf(
+    <nav aria-label={siteT.theme.mobileMenu} data-mobile-nav data-editor="mobile-nav" className={mobileNavClass}>
+      <ul className={mobileNavListClass}>
+        <li>
+          <a href="/" className={tabClass} />
+        </li>
+      </ul>
+    </nav>,
+  );
+
+/** The theme's parts for the preview; `button`: the header's button as the form has it (headerOf), when it changed. The
+ * HTML is drawn here, when the preview draws the page, not while the form is drawn. */
+export function headerThemeOf(button: Button | null | undefined, data: BlockData): HeaderTheme {
+  return {
+    menuClass: { start: headerMenuClass('start'), end: headerMenuClass('end') },
+    cta: button === undefined ? undefined : htmlOf(ctaOf(button, data)),
+    mobileNav: mobileNavHtml(),
+    subpagesOf: siteT.theme.subpagesOf,
+    current: '/',
+  };
+}

package/src/i18n/da-DK/common.ts

@@ -90,6 +90,7 @@ export const common: Messages['common'] = {
   parts: {
     company: 'Virksomheden',
     header: 'Header',
+    footer: 'Footer',
     lists: 'Lister',
     blocks: 'Blokskabeloner',
     media: 'Filer',

package/src/i18n/da-DK/library.ts

@@ -67,6 +67,8 @@ export const library: Messages['library'] = {
   changeMotion: 'Skift bevægelse',
   motionSaved: (change) => `${change}. Hjemmesiden får den nye bevægelse om et par minutter.`,
   motionCommit: (name) => `Editor: skift bevægelse til ${name}`,
+  headerMenuButton: 'Menuknap',
+  footerSections: { text: 'Tekst', contact: 'Kontakt', links: 'Links' },
   sideNone: 'Ingen',
   sideNoneHint: 'Siderne har ingen kolonne ved siden af teksten',
   sideEmpty: 'Ingen installeret blok kan tegnes ved siden af en sides tekst.',

package/src/i18n/da-DK/preview.ts

@@ -5,6 +5,8 @@ export const preview: Messages['preview'] = {
   title: 'Forhåndsvisning',
   size: 'Vinduesstørrelse',
   sizes: { compact: 'Kompakt', medium: 'Mellem', expanded: 'Udvidet', large: 'Stor', extraLarge: 'Ekstra stor' },
+  phone: 'Telefon',
+  computer: 'Computer',
   making: 'Henter forhåndsvisningen…',
   failed: (error) => `Kunne ikke oprette forhåndsvisningen: ${error}`,
   notHere: 'Den side kan ikke forhåndsvises',

package/src/i18n/da-DK/text.ts

@@ -22,6 +22,7 @@ export const text: Messages['text'] = {
   color: 'Farve',
   colors: { accent: 'Accentfarve', muted: 'Stille tekst' },
   noColor: 'Ingen farve',
+  sectionSettings: 'Sektionsindstillinger',
   sectionColor: 'Sektionsfarve',
   sectionColors: { none: 'Ingen', surface: 'Flade', tint: 'Tone', accent: 'Accent' },
   linkTo: 'Linket går til',

package/src/i18n/en-US/common.ts

@@ -103,6 +103,7 @@ export const common = {
   parts: {
     company: 'Business',
     header: 'Header',
+    footer: 'Footer',
     lists: 'Lists',
     blocks: 'Block templates',
     media: 'Files',

package/src/i18n/en-US/library.ts

@@ -100,6 +100,10 @@ export const library = {
   changeMotion: 'Change motion',
   motionSaved: (change: string) => `${change}. The website gets the new motion in a few minutes.`,
   motionCommit: (name: string) => `Editor: change motion to ${name}`,
+  /** Appearance › Header (HeaderSettings.tsx): the group with the menu button's side. */
+  headerMenuButton: 'Menu button',
+  /** Appearance › Footer (FooterSettings.tsx): the groups of the footer's fields. */
+  footerSections: { text: 'Text', contact: 'Contact', links: 'Links' },
   /** Under "Sidekolonne" (SideColumn.tsx): the choice of no block and what is under it, what is said when no block can be
    * drawn there, asked before one is chosen, the question's button, what is said after it is saved, and the commit, in
    * the site's language (siteT). */

package/src/i18n/en-US/preview.ts

@@ -7,6 +7,9 @@ export const preview = {
   /** How wide the page is shown: Material 3's window sizes, each at its narrowest. */
   size: 'Window size',
   sizes: { compact: 'Compact', medium: 'Medium', expanded: 'Expanded', large: 'Large', extraLarge: 'Extra-large' },
+  /** The preview of a part every page has (partPreview.tsx, the header): on a phone and on a computer. */
+  phone: 'Phone',
+  computer: 'Computer',
   making: 'Loading the preview…',
   failed: (error: string) => `Couldn’t create the preview: ${error}`,
   notHere: 'That page can’t be previewed',

package/src/i18n/en-US/text.ts

@@ -26,7 +26,8 @@ export const text = {
   color: 'Color',
   colors: { accent: 'Accent color', muted: 'Muted text' },
   noColor: 'No color',
-  /** The button for the colour of a section (an H2 and what follows it), and the choices in its menu (packages/editor/lib/section-marker.mjs). */
+  /** The button for the settings of a section (an H2 and what follows it), and its sheet's colour choices (packages/editor/lib/section-marker.mjs). */
+  sectionSettings: 'Section settings',
   sectionColor: 'Section color',
   sectionColors: { none: 'None', surface: 'Surface', tint: 'Tint', accent: 'Accent' },
   /** The sheet of a link (LinkSheet.tsx). */

package/src/images.ts

@@ -132,15 +132,18 @@ export async function prepareFile(file: File, taken: string[]): Promise<Upload>
 export const publicPath = (path: string) => path.replace(/^public/, '');
 
 // The pictures added in a form (a page, a fixed page), kept in the browser until "Gem", which saves
-// them in the same commit. upload: pick one and make it ready; added: those not saved yet, newest
+// them in the same commit. upload: pick one and make it ready; uploading: true while a chosen picture
+// is made ready (a button shows busy); added: those not saved yet, newest
 // first (offered in the gallery, MediaPicker.tsx); saving: the pictures a text uses.
 export function useUploads(notify: (status: Status) => void) {
   const [uploads, setUploads] = useState<Upload[]>([]);
+  const [uploading, setUploading] = useState(false);
 
   async function upload(): Promise<Upload | null> {
     const file = await pickImage();
     if (!file) return null;
     notify({ text: t.app.preparingPicture });
+    setUploading(true);
     try {
       const prepared = await prepareImage(file);
       setUploads((u) => [...u, prepared]);
@@ -149,6 +152,8 @@ export function useUploads(notify: (status: Status) => void) {
     } catch (e) {
       notify({ text: (e as Error).message, error: true });
       return null;
+    } finally {
+      setUploading(false);
     }
   }
 
@@ -157,7 +162,7 @@ export function useUploads(notify: (status: Status) => void) {
   const usedIn = (text: string) => uploads.filter((u) => !u.saved && text.includes(publicPath(u.path)));
   const markSaved = (pictures: Upload[]) => setUploads((all) => all.map((u) => (pictures.includes(u) ? { ...u, saved: true } : u)));
 
-  return { upload, added, usedIn, markSaved };
+  return { upload, uploading, added, usedIn, markSaved };
 }
 
 export type Uploads = ReturnType<typeof useUploads>;

package/src/menuChildren.ts

@@ -1,7 +1,6 @@
-// The second level of the main menu (MainMenu.tsx, lib/menu.mjs menuTree): the lists under Lists, the menus under Header,
+// The second level of the main menu (MainMenu.tsx, lib/menu.mjs menuTree): the lists under Lists,
 // the parts under Business, the apps installed under Apps and the two lists under Redirects. Exposes childrenOf.
 // Uses site.ts (collections, apps, companyParts), Library.tsx (hrefOf, listsShown) and Redirects.tsx (TAB_ROUTES).
-import { header } from '@site/editor';
 import { installedApps } from './apps';
 import { t } from './i18n';
 import { hrefOf } from './Library';
@@ -20,7 +19,6 @@ const listOf = (ids: string[]): MenuChild[] =>
 /** The sub-items of a menu item, in their order: none for most. */
 export function childrenOf(id: string, files: RepoFile[]): MenuChild[] {
   if (id === 'lister') return listOf(listsShown(files));
-  if (id === 'header') return listOf(header);
   if (id === 'virksomheden') return companyParts.map((p) => ({ id: p.id, label: p.label, href: `#virksomheden/${p.id}` }));
   if (id === 'apps') {
     const installed = installedApps(files);

package/src/movedRoutes.d.mts

@@ -0,0 +1,3 @@
+/** Where each moved screen is now, by its old address. */
+export const MOVED: Record<string, string>;
+export function movedRoute(route: string, more?: Record<string, string>): string;

package/src/movedRoutes.mjs

@@ -0,0 +1,35 @@
+// The editor's screens that have moved, by their old address after the "#": a link or a bookmark to one opens it where
+// it is now. Exposes MOVED and movedRoute (pure). Used by App.tsx (routeOf), which adds the app store's own.
+
+/** Where each moved screen is now, by its old address. */
+export const MOVED = /** @type {Record<string, string>} */ ({
+  farver: 'udseende/farver',
+  'virksomheden/logo': 'udseende/logo',
+  'tema/blokvalg': 'blokvalg',
+  dele: 'udseende/dele',
+  tema: 'udseende',
+  'tema/farver': 'udseende/farver',
+  'tema/logo': 'udseende/logo',
+  'tema/dele': 'udseende/dele',
+  'tema/dele/editor': 'udseende/dele/editor',
+  'virksomheden/bank': 'virksomheden/betaling/bank',
+  videresendelser: 'seo/videresendelser',
+  'videresendelser/alle': 'seo/videresendelser/alle',
+  'videresendelser/ikke-fundet': 'seo/videresendelser/ikke-fundet',
+  // The settings of the booking and newsletter apps were on a screen "Promovering"; they are on the apps' own pages now.
+  promovering: 'apps',
+  'promovering/calendly': 'apps/calendly',
+  'promovering/mailchimp': 'apps/mailchimp',
+  // The header's menus and settings were on a screen of their own under "Globalt"; they are under "Udseende" now.
+  header: 'udseende/header',
+  // The footer's form was the file's own screen; it is under "Udseende" now.
+  'src/data/footer.json': 'udseende/footer',
+});
+
+/**
+ * The address a screen is at now: where it moved to (`more` first, then MOVED), else the same address.
+ * @param {string} route
+ * @param {Record<string, string>} [more]
+ * @returns {string}
+ */
+export const movedRoute = (route, more = {}) => more[route] ?? MOVED[route] ?? route;

package/src/movedRoutes.test.mjs

@@ -0,0 +1,22 @@
+// Tests movedRoutes.mjs: an old address opens the screen where it is now, others stay.
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { movedRoute } from './movedRoutes.mjs';
+
+test('the old header screen opens Appearance › Header', () => {
+  assert.equal(movedRoute('header'), 'udseende/header');
+});
+
+test('the old footer form opens Appearance › Footer', () => {
+  assert.equal(movedRoute('src/data/footer.json'), 'udseende/footer');
+});
+
+test('an address that has not moved stays', () => {
+  assert.equal(movedRoute('udseende/header'), 'udseende/header');
+  assert.equal(movedRoute('lister'), 'lister');
+});
+
+test('the extra moves come first', () => {
+  assert.equal(movedRoute('butik', { butik: 'indstillinger/appstore' }), 'indstillinger/appstore');
+  assert.equal(movedRoute('tema', { butik: 'x' }), 'udseende');
+});