@morphemecms/cms 0.11.0 → 0.13.0-next-20261106203613

package/src/MarkdownEditor.tsx

@@ -1,7 +1,8 @@
 // The text of a page or blog post: Milkdown (packages/editor/src/markdown.mjs) with a small toolbar.
 // The text is shown in the site's own style (the "prose" classes of the pages). On pages the site's
 // 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
+// on the site, which opens a menu (hide on the site, move; below expanded also Ret, Fjern; from expanded a tap opens the
+// side panel instead), 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. The last tool, "Section settings", opens the section's sheet (BlockDialog.tsx).
 import {
@@ -64,7 +65,8 @@ 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 { atLeastNow, Menu, MenuItem, Toolbar, ToolbarButton } from './ui';
+import { editsInPanel } from './sheetPlacement.mjs';
 import { shownAt } from './images';
 import { cropStyle, joinPicture, splitPicture } from '../lib/crop.mjs';
 import { describe, htmlBlock, type BlockProps } from './blocks';
@@ -283,8 +285,16 @@ const moves = (view: EditorView, i: number | null, locked: string[] = []): CardI
 };
 
 // The row of icons on a card (a block or a picture) in the text, opened by tapping it: items, as
-// they are when it opens. Returns how to close it.
-function cardMenu(view: EditorView, dom: HTMLElement, card: HTMLElement, name: string, items: () => (CardItem | undefined | '')[]) {
+// they are when it opens (no row when there are none). `tap` runs first on a tap that opens the row (not on one that
+// closes it): from expanded it opens the card's side panel. Returns how to close it.
+function cardMenu(
+  view: EditorView,
+  dom: HTMLElement,
+  card: HTMLElement,
+  name: string,
+  items: () => (CardItem | undefined | false | '')[],
+  tap?: () => void,
+) {
   let menu: HTMLElement | null = null;
   function close() {
     menu?.remove();
@@ -304,12 +314,13 @@ function cardMenu(view: EditorView, dom: HTMLElement, card: HTMLElement, name: s
   // `focus` (the arrow used to move the card, when it opens again on the moved card).
   function open(keyboard: boolean, focus?: string) {
     closeOpenMenu?.();
+    const shown = items().filter((it): it is CardItem => !!it);
+    if (!shown.length) return;
     menu = dom.appendChild(document.createElement('div'));
     menu.className = 'site-block-menu';
     menu.setAttribute('role', 'menu');
     menu.setAttribute('aria-label', name);
-    for (const it of items()) {
-      if (!it) continue;
+    for (const it of shown) {
       const b = menu.appendChild(document.createElement('button'));
       b.type = 'button';
       b.setAttribute('role', 'menuitem');
@@ -356,7 +367,11 @@ function cardMenu(view: EditorView, dom: HTMLElement, card: HTMLElement, name: s
     document.addEventListener('pointercancel', unlock, { capture: true, once: true });
     timer = window.setTimeout(unlock, 1000);
   });
-  card.addEventListener('click', (e) => (menu ? close() : open(e.detail === 0)));
+  card.addEventListener('click', (e) => {
+    if (menu) return close();
+    tap?.();
+    open(e.detail === 0);
+  });
   return close;
 }
 
@@ -397,7 +412,8 @@ function pictureCard(node: Node, view: EditorView, getPos: () => number | undefi
   if (cut) img.style.cssText = cut.img;
   if (node.attrs.title) img.title = node.attrs.title;
   const describe = async () => {
-    const props = await sheet()?.edit(IMAGE, { src, alt: node.attrs.alt ?? '', format, crop, decorative });
+    const props = await sheet()?.edit(IMAGE, { src, alt: node.attrs.alt ?? '', format, crop, decorative }, false, true);
+    if (props === 'remove') return remove();
     const pos = getPos();
     if (!props || pos === undefined) return;
     view.dispatch(
@@ -408,14 +424,23 @@ function pictureCard(node: Node, view: EditorView, getPos: () => number | undefi
     const pos = getPos();
     if (pos !== undefined) view.dispatch(view.state.tr.delete(pos, pos + node.nodeSize));
   };
-  const close = cardMenu(view, dom, card, t.text.image, () => {
-    const pos = getPos();
-    return [
-      { icon: pencilIcon, label: t.common.edit, action: describe },
-      ...moves(view, pos === undefined ? null : view.state.doc.resolve(pos).index(0), sheet()?.template?.locked),
-      { icon: trashIcon, label: t.common.remove, action: remove, danger: true },
-    ];
-  });
+  // From expanded a picture's sheet is the side panel: a tap opens it, and the menu has no pen or trash (Remove is in the panel).
+  const inPanelNow = () => editsInPanel(atLeastNow('expanded'), true);
+  const close = cardMenu(
+    view,
+    dom,
+    card,
+    t.text.image,
+    () => {
+      const pos = getPos();
+      return [
+        !inPanelNow() && { icon: pencilIcon, label: t.common.edit, action: describe },
+        ...moves(view, pos === undefined ? null : view.state.doc.resolve(pos).index(0), sheet()?.template?.locked),
+        !inPanelNow() && { icon: trashIcon, label: t.common.remove, action: remove, danger: true },
+      ];
+    },
+    () => inPanelNow() && void describe(),
+  );
   return { dom, update: () => false, stopEvent: () => true, ignoreMutation: () => true, destroy: close };
 }
 
@@ -468,7 +493,7 @@ async function editLink(view: EditorView) {
 /** What applies where the cursor is, or to all of the selection: 'strong', 'emphasis', 'link',
  * 'h2', 'h3', 'text' (a paragraph, not in a list or quote), 'bullet', 'ordered' and 'quote'; with a colour
  * (text-colors.mjs) 'textColor' and the colour's class ('color-accent'). For the toolbar and the selection's menu,
- * 'section' and 'section-<colour>' in a top-level H2 (sectionState.mjs), which mark them. */
+ * 'section' and 'section-<colour>' in a top-level H1 or H2 (sectionState.mjs), which mark them. */
 export function activeOf(state: EditorView['state']): Set<string> {
   const { selection, storedMarks, schema } = state;
   const { $from, from, to, empty } = selection;
@@ -528,11 +553,11 @@ type Look = {
 // The levels of the top-level headings of a document, in order.
 const levelsOf = (doc: EditorView['state']['doc']): number[] => topHeadings(doc).map(({ node }) => node.attrs.level);
 
-// Whether a heading (H2) is selected, or a part of one.
-function inH2(state: EditorView['state']) {
+// Whether a heading that starts a section (H1 or H2) is selected, or a part of one.
+function inSectionHeading(state: EditorView['state']) {
   let found = false;
   const { from, to } = state.selection;
-  state.doc.nodesBetween(from, to, (n) => void (found ||= n.type.name === 'heading' && n.attrs.level === 2));
+  state.doc.nodesBetween(from, to, (n) => void (found ||= n.type.name === 'heading' && n.attrs.level <= 2));
   return found;
 }
 
@@ -544,7 +569,7 @@ const inLabel = (state: EditorView['state']) => state.selection.$from.parent.typ
 // page's headings (`h1`: only the levels headingChoices gives for the text), a heading or a subheading, a label above the heading; the ones that apply are marked. At a still
 // cursor, bold, italic, link and colour act on the whole word, the headings on the line; a move or a keypress hides the
 // row. On a phone, where the phone's own menu is over the selection and its handles under it, the row is at the bottom
-// of the screen, over the keyboard. sections: no colour in a heading (H2), the name of a section.
+// of the screen, over the keyboard. sections: no colour in a heading (H1 or H2), the name of a section.
 function selectionMenu(ctx: Ctx, h1: boolean, sections: boolean, colors: (button: HTMLElement) => void) {
   return new Plugin({
     view(view) {
@@ -588,7 +613,7 @@ function selectionMenu(ctx: Ctx, h1: boolean, sections: boolean, colors: (button
           label: t.text.color,
           on: (s) => marked(s, 'textColor'),
           action: colors,
-          off: (s) => inLabel(s) || (sections && inH2(s)),
+          off: (s) => inLabel(s) || (sections && inSectionHeading(s)),
           word: true,
         },
         ...(h1 ? [1, 2, 3] : [2, 3]).map((level) => ({
@@ -783,8 +808,20 @@ function blockCard(
     const pos = getPos();
     return pos === undefined ? null : view.state.doc.resolve(pos).index(0);
   };
+  // What the template (collections.ts) says of this block: a locked one is only edited, and the last shown one of a block
+  // the page must have cannot be hidden or removed (stays).
+  const keeps = () => {
+    const rules = asker()?.template;
+    const type = node.attrs.type;
+    const locked = !!rules?.locked?.includes(type);
+    const shownOfType = blocksOf(view.state.doc).filter((b) => b.type === type && b.hidden === false).length;
+    // (Not written with "!" before "hidden", which Tailwind would take for a class for the site.)
+    const last = hidden === false && !!rules?.required?.includes(type) && shownOfType <= 1;
+    return { rules, locked, stays: locked || last };
+  };
   const edit = async () => {
-    const props = await asker()?.edit(node.attrs.type, node.attrs.props);
+    const props = await asker()?.edit(node.attrs.type, node.attrs.props, false, !keeps().stays);
+    if (props === 'remove') return remove();
     const here = at();
     // The block's fields as changed; still hidden if it was.
     if (props && here)
@@ -806,26 +843,29 @@ function blockCard(
   // The choices that can be made here: no "Ret" without fields (but to where it is edited instead,
   // Block.edit), no move past the start or end. By the template (collections.ts): a locked block is
   // only edited, and the last shown one of a block the page must have cannot be hidden or removed.
-  const close = cardMenu(view, dom, card, name, () => {
-    const i = top();
-    const rules = asker()?.template;
-    const type = node.attrs.type;
-    const locked = !!rules?.locked?.includes(type);
-    const shownOfType = blocksOf(view.state.doc).filter((b) => b.type === type && b.hidden === false).length;
-    // (Not written with "!" before "hidden", which Tailwind would take for a class for the site.)
-    const last = hidden === false && !!rules?.required?.includes(type) && shownOfType <= 1;
-    const stays = locked || last;
-    return [
-      block?.fields.length
-        ? { icon: pencilIcon, label: t.common.edit, action: edit }
-        : block?.edit && { icon: pencilIcon, label: block.edit.text, action: () => leaveTo(`#${block.edit!.to}`) },
-      block?.shown || (stays && hidden === false)
-        ? undefined
-        : { icon: hidden ? eyeIcon : eyeSlashIcon, label: hidden ? t.text.showOnPage : t.text.hideOnPage, action: toggle },
-      ...(locked ? [] : moves(view, i, rules?.locked)),
-      stays ? undefined : { icon: trashIcon, label: t.common.remove, action: remove, danger: true },
-    ];
-  });
+  // From expanded the block's fields are in the side panel: a tap opens it, and the menu has no pen or trash (Remove is in the panel).
+  const inPanelNow = () => editsInPanel(atLeastNow('expanded'), !!block?.fields.length);
+  const close = cardMenu(
+    view,
+    dom,
+    card,
+    name,
+    () => {
+      const i = top();
+      const { rules, locked, stays } = keeps();
+      return [
+        block?.fields.length
+          ? !inPanelNow() && { icon: pencilIcon, label: t.common.edit, action: edit }
+          : block?.edit && { icon: pencilIcon, label: block.edit.text, action: () => leaveTo(`#${block.edit!.to}`) },
+        block?.shown || (stays && hidden === false)
+          ? undefined
+          : { icon: hidden ? eyeIcon : eyeSlashIcon, label: hidden ? t.text.showOnPage : t.text.hideOnPage, action: toggle },
+        ...(locked ? [] : moves(view, i, rules?.locked)),
+        stays || inPanelNow() ? undefined : { icon: trashIcon, label: t.common.remove, action: remove, danger: true },
+      ];
+    },
+    () => inPanelNow() && void edit(),
+  );
   // A changed block is drawn anew (update false); taps on the card and its menu are not ProseMirror's.
   return {
     dom,
@@ -1039,7 +1079,7 @@ export default forwardRef<MarkdownHandle, Props>(function MarkdownEditor(
     if (!src) return;
     const sheet = blocks ?? sheetProp;
     const picked = await sheet?.edit(IMAGE, { src, alt: '' }, true);
-    if (picked) run(insertImageCommand, { src: pictureSrc(picked), alt: String(picked.alt ?? '').trim() });
+    if (picked && picked !== 'remove') run(insertImageCommand, { src: pictureSrc(picked), alt: String(picked.alt ?? '').trim() });
   }
 
   // Puts the chosen block where the cursor is (a paragraph is split around it), or after the block
@@ -1113,8 +1153,9 @@ 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)
+    // The settings of the section the cursor's H1 or H2 starts (not a fixed page's text, whose H2s are its sections' names; the front
+    // page has it for its H2s, but not for its H1, which stays the banner without a colour).
+    ...(framed && active.includes('section') && !(sections && active.includes('h1')) && (blocks ?? sheetProp)
       ? [{ label: t.text.sectionSettings, icon: SectionSettingsIcon, action: sectionSettings }]
       : []),
   ];
@@ -1168,7 +1209,7 @@ export default forwardRef<MarkdownHandle, Props>(function MarkdownEditor(
       <Toolbar
         ref={toolbar}
         label={t.text.tools}
-        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"
+        className="editor-tools sticky top-[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}>

package/src/Media.tsx

@@ -7,27 +7,18 @@
 // "Slet billede" (…) when nothing uses it (also not the site's own code, /editor/code-images.json). Its
 // name, under the title, can be changed with the pencil after it (not one the site's code uses),
 // 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
+// and the old address sends on to it (addresses.ts). The FAB 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';
-import {
-  ArrowsDownUp,
-  CalendarBlank,
-  Check,
-  ClockCounterClockwise,
-  PencilSimple,
-  Plus,
-  Trash,
-  UploadSimple,
-  X,
-} from '@phosphor-icons/react';
+import { ArrowsDownUp, CalendarBlank, Check, ClockCounterClockwise, PencilSimple, Trash, UploadSimple, X } from '@phosphor-icons/react';
 import { moveRedirects, REDIRECTS } from './addresses';
 import { changesOf, flatten, readAll, REDIRECT_FILES } from './redirectData';
 import { ask } from './ask';
 import { dateName, headed, letterOf } from './Sheet';
+import { CreateFab } from './CreateFab';
 import Screen from './Screen';
 import {
   Button,
@@ -229,8 +220,8 @@ function Gallery({
   // All the files, not only pictures (Filer), with their type.
   const all = !!used;
   // In Filer, kept for coming back to it (from a file's page); in a picker, from the start each time.
-  const [kind, setKind] = useKept<'' | Kind>(all ? 'filer-type' : null, '');
-  const [query, setQuery] = useKept(all ? 'filer-soeg' : null, '');
+  const [kind, setKind] = useKept<'' | Kind>(all ? 'files-type' : null, '');
+  const [query, setQuery] = useKept(all ? 'files-search' : null, '');
   const [sort, setSort] = useState<Sort>(() => {
     try {
       const saved = localStorage.getItem(SORT_KEY);
@@ -238,9 +229,9 @@ function Gallery({
     } catch {}
     return 'new';
   });
-  const [date, setDate] = useKept(all ? 'filer-dato' : null, '');
-  const [use, setUse] = useKept<'' | 'used' | 'unused'>(all ? 'filer-brug' : null, '');
-  const [tag, setTag] = useKept(all ? 'filer-tag' : null, '');
+  const [date, setDate] = useKept(all ? 'files-date' : null, '');
+  const [use, setUse] = useKept<'' | 'used' | 'unused'>(all ? 'files-use' : null, '');
+  const [tag, setTag] = useKept(all ? 'files-tag' : null, '');
 
   function pickSort(next: Sort) {
     setSort(next);
@@ -419,7 +410,7 @@ const codeImages = () =>
     .then((r) => (r.ok ? (r.json() as Promise<string[]>) : null))
     .catch(() => null));
 
-// open: the address of a file to show picked at once (the route filer/<address>); ignored when no such file exists.
+// open: the address of a file to show picked at once (the route files/<address>); ignored when no such file exists.
 export default function Media({ files, env, open }: { files: RepoFile[]; env: Env; open?: string }) {
   // The pictures and the other files.
   const pictures = [...mediaOf(files), ...filesOf(files)];
@@ -687,9 +678,8 @@ export default function Media({ files, env, open }: { files: RepoFile[]; env: En
             icon={ClockCounterClockwise}
             label={t.history.deletedOf(t.history.files)}
 
-            onClick={() => (location.hash = 'slettet/filer')}
+            onClick={() => (location.hash = 'deleted/files')}
           />
-          <IconButton icon={Plus} label={t.media.add} busy={adding} disabled={adding} onClick={add} />
         </>
       }
     >
@@ -727,6 +717,7 @@ export default function Media({ files, env, open }: { files: RepoFile[]; env: En
         <SheetTitle title={src ? fileName(src) : ''} onClose={() => dialog.current?.close()} />
         {!wide && src && <SheetBody>{details(src)}</SheetBody>}
       </BottomSheet>
+      <CreateFab label={t.media.add} busy={adding} disabled={adding} onClick={add} />
     </Screen>
   );
 }

package/src/MediaTags.tsx

@@ -74,11 +74,11 @@ export default function MediaTags({ src, files, env }: { src: string; files: Rep
         keep="categories"
         footer={(close) => (
           <SheetLink
-            href="#ny/kategorier"
+            href="#new/tags"
             onClick={(e) => {
               e.preventDefault();
               close();
-              leaveTo('#ny/kategorier');
+              leaveTo('#new/tags');
             }}
           >
             {t.media.createTag}

package/src/Notifications.tsx

@@ -1,4 +1,4 @@
-// "Notifikationer" (#notifikationer), which the bell in the top bar opens (Screen.tsx NotificationsLink): the
+// "Notifikationer" (#notifications), which the bell in the top bar opens (Screen.tsx NotificationsLink): the
 // notifications of the editor and the apps (notificationData.ts), newest first, each with when it came and, when it had
 // one, a link to what it is about; an app's with the app's icon. Opening it marks them seen; at the top the bin clears
 // them and the sliders open "Konto", where each type is turned on or off.
@@ -41,7 +41,7 @@ export default function Notifications() {
             disabled={!items.length}
             onClick={clearNotifications}
           />
-          <IconLink href="#konto" icon={SlidersHorizontal} label={t.library.notificationChoices} />
+          <IconLink href="#account" icon={SlidersHorizontal} label={t.library.notificationChoices} />
         </>
       }
     >

package/src/Parts.tsx

@@ -1,4 +1,4 @@
-// "Udseende" › "Dele" › "Editor" (#udseende/dele/editor): the parts only the editor has (ui.tsx: the SEO rating, the
+// "Udseende" › "Dele" › "Editor" (#appearance/parts/editor): the parts only the editor has (ui.tsx: the SEO rating, the
 // colour field, the choices of pages and icons, the form's layout …) in every state, on one screen, to see and agree on
 // how the editor looks, and below them the form fields (fields.tsx), one of each type with the settings it can have.
 // The parts the theme has too (buttons, fields, switches, lists, sheets …) are the theme's, shown under "UI-komponenter"
@@ -118,7 +118,7 @@ const GROUPS = (['buttons', 'fields', 'choices', 'lists', 'sheets', 'messages',
 }));
 
 export default function Parts({ env }: { env: Env }) {
-  const [sort, setSort] = useState('nyeste');
+  const [sort, setSort] = useState('newest');
   const [filter, setFilter] = useState('');
   const [content, setContent] = useState('');
   const [picked, setPicked] = useState('a');
@@ -155,7 +155,7 @@ export default function Parts({ env }: { env: Env }) {
   const page = useMemo(() => exampleData().relations.pages[1].value, []);
 
   return (
-    <Screen title={t.parts.screens.editor} back={{ href: '#udseende/dele', label: t.common.parts.editorParts }}>
+    <Screen title={t.parts.screens.editor} back={{ href: '#appearance/parts', label: t.common.parts.editorParts }}>
       <div className="space-y-10">
         <p className="text-muted">{t.parts.intro('packages/editor/src/ui.tsx')}</p>
         <PartsShown groups={GROUPS} keep="parts">
@@ -169,7 +169,7 @@ export default function Parts({ env }: { env: Env }) {
             </Part>
 
             <Part name="ArrowLink" use={use.arrowLink}>
-              <ArrowLink href="#udseende/farver">{sample.editColors}</ArrowLink>
+              <ArrowLink href="#appearance/colors">{sample.editColors}</ArrowLink>
             </Part>
           </PartGroup>
 
@@ -199,7 +199,7 @@ export default function Parts({ env }: { env: Env }) {
                     { value: 'top', label: sample.top },
                     { value: 'list', label: sample.inList },
                   ]}
-                  href="#udseende/dele/editor"
+                  href="#appearance/parts/editor"
                   onChange={setPlacement}
                 />
               </div>
@@ -273,7 +273,7 @@ export default function Parts({ env }: { env: Env }) {
                 max={3}
                 footer={(close) => (
                   <SheetLink
-                    href="#udseende/dele/editor"
+                    href="#appearance/parts/editor"
                     onClick={(e) => {
                       e.preventDefault();
                       close();
@@ -327,8 +327,8 @@ export default function Parts({ env }: { env: Env }) {
                     value={sort}
                     disabled={asMenu}
                     options={[
-                      { value: 'nyeste', label: sample.newest },
-                      { value: 'aeldste', label: sample.oldest },
+                      { value: 'newest', label: sample.newest },
+                      { value: 'oldest', label: sample.oldest },
                     ]}
                     onChange={setSort}
                   />
@@ -393,10 +393,10 @@ export default function Parts({ env }: { env: Env }) {
                   { icon: FolderSimple, label: sample.media, count: 42 },
                   { icon: PencilSimple, label: sample.pages, count: 12 },
                 ].map((p) => (
-                  <ListItem key={p.label} href="#udseende/dele/editor" icon={p.icon} headline={p.label} count={p.count} arrow />
+                  <ListItem key={p.label} href="#appearance/parts/editor" icon={p.icon} headline={p.label} count={p.count} arrow />
                 ))}
                 {/* With a text under its name: the icon beside the first two lines. */}
-                <ListItem href="#udseende/dele/editor" icon={Gear} headline={sample.cookieBanner} supporting={sample.cookieHint} arrow />
+                <ListItem href="#appearance/parts/editor" icon={Gear} headline={sample.cookieBanner} supporting={sample.cookieHint} arrow />
                 {/* With a picture before its name (the picture a page's colours came from). */}
                 <ListItem
                   leading={<LeadingImage src={examplePicture} />}
@@ -459,7 +459,7 @@ export default function Parts({ env }: { env: Env }) {
             <Part name="UnfoldButton, subListClass" use={use.unfold}>
               <ul className={listClass}>
                 <ListItem
-                  href="#udseende/dele/editor"
+                  href="#appearance/parts/editor"
                   headline={sample.pages}
                   actions={
                     <span className="shrink-0 pr-1.5">
@@ -477,7 +477,7 @@ export default function Parts({ env }: { env: Env }) {
                   <li className="pb-2">
                     <ul className={subListClass}>
                       {[1, 2, 3].map((n) => (
-                        <ListItem key={n} tone="sub" href="#udseende/dele/editor" headline={sample.subpage(n)} />
+                        <ListItem key={n} tone="sub" href="#appearance/parts/editor" headline={sample.subpage(n)} />
                       ))}
                     </ul>
                   </li>
@@ -534,8 +534,8 @@ export default function Parts({ env }: { env: Env }) {
                   icon={ArrowsDownUp}
                   value={sort}
                   options={[
-                    { value: 'nyeste', label: sample.newest },
-                    { value: 'aeldste', label: sample.oldest },
+                    { value: 'newest', label: sample.newest },
+                    { value: 'oldest', label: sample.oldest },
                   ]}
                   onChange={setSort}
                 />
@@ -572,8 +572,8 @@ export default function Parts({ env }: { env: Env }) {
                   search={t.common.search}
                   value={sort}
                   options={[
-                    { value: 'nyeste', label: sample.newest },
-                    { value: 'aeldste', label: sample.oldest },
+                    { value: 'newest', label: sample.newest },
+                    { value: 'oldest', label: sample.oldest },
                   ]}
                   onChange={setSort}
                 />
@@ -811,7 +811,7 @@ function fieldTypes(): FieldType[] {
         { name: 'phone', label: sample.phone, type: 'string', phone: '+45', digitsInPairs: 8 },
         { name: 'keyword', label: f.keyword, type: 'string', chips: 'one' },
         { name: 'keywords', label: f.keywords, type: 'string', chips: 'many' },
-        { name: 'linkText', label: f.linkText, type: 'string', edit: { to: 'udseende/farver', text: f.editColors } },
+        { name: 'linkText', label: f.linkText, type: 'string', edit: { to: 'appearance/colors', text: f.editColors } },
       ],
     },
     {

package/src/Redirects.tsx

@@ -1,28 +1,28 @@
-// "Videresendelser" under Indhold (#seo/videresendelser): two rows with how many
+// "Videresendelser" under Indhold (#seo/redirects): two rows with how many
 // each has, each opening a screen of its own.
-// "Alle videresendelser" (#seo/videresendelser/alle): every address of a page the site sends on elsewhere
+// "Alle videresendelser" (#seo/redirects/all): every address of a page the site sends on elsewhere
 // (redirectData.ts), by address, with where it sends to, and search. Tapping one opens a sheet where
-// where it sends to can be changed, or the redirect deleted; "+" adds a new one (in the editor's own,
+// where it sends to can be changed, or the redirect deleted; the FAB adds a new one (in the editor's own,
 // src/data/redirects.json). Each save is one commit, and none sends on through another afterwards
 // (flatten): a redirect to an address that is sent on goes straight to where that ends, and those
 // that went on through a deleted one go on to where it sent them.
-// "Ikke fundet" (#seo/videresendelser/ikke-fundet): the addresses visitors came to that do not exist (notFound.ts), most visits
+// "Ikke fundet" (#seo/redirects/not-found): the addresses visitors came to that do not exist (notFound.ts), most visits
 // first. Tapping one opens the same sheet, to send it on to a page (then it is off that list) or take
 // 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. 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 { ArrowRight, ArrowsDownUp, Funnel, LinkBreak, Signpost, Trash, X } from '@phosphor-icons/react';
 import { addressOf, escape, REDIRECTS } from './addresses';
 import { ask } from './ask';
+import { CreateFab } from './CreateFab';
 import Screen from './Screen';
 import {
   Button,
   InputChip,
   Choice,
   Group,
-  IconButton,
   listClass,
   SupportingText,
   SearchRow,
@@ -66,15 +66,15 @@ type Editing = { from: string; to: string; isNew: boolean; missing?: Missing };
 export type Tab = 'redirects' | 'missing';
 
 // Where each list opens, under "Videresendelser".
-export const TAB_ROUTES: Record<Tab, string> = { redirects: 'seo/videresendelser/alle', missing: 'seo/videresendelser/ikke-fundet' };
+export const TAB_ROUTES: Record<Tab, string> = { redirects: 'seo/redirects/all', missing: 'seo/redirects/not-found' };
 /** Where "Videresendelser" opens, under "Søgemaskineoptimering". */
-export const REDIRECTS_ROUTE = 'seo/videresendelser';
+export const REDIRECTS_ROUTE = 'seo/redirects';
 
 // The orders of each list: the redirects by their address or by the page they send to, the addresses
 // that do not exist by the visits, the last visit or the address. Kept in this browser, each its own.
 type Sort = 'az' | 'za' | 'page' | 'visits' | 'last';
 const SORTS: Record<Tab, Sort[]> = { redirects: ['az', 'za', 'page'], missing: ['visits', 'last', 'az', 'za'] };
-const sortKey = (tab: Tab) => `editor-sort-${tab === 'redirects' ? 'videresendelser' : 'ikke-fundet'}`;
+const sortKey = (tab: Tab) => `editor-sort-${tab === 'redirects' ? 'redirects' : 'not-found'}`;
 
 function savedSort(tab: Tab): Sort {
   try {
@@ -99,7 +99,7 @@ export default function Redirects({ env, tab }: { env: Env; tab?: Tab }) {
   }, []);
   const all = useMemo(() => (files ? readAll(files) : null), [files]);
   const entries = useMemo(() => (all ? entriesOf(all) : []), [all]);
-  const [query, setQuery] = useKept('videresendelser-soeg', '');
+  const [query, setQuery] = useKept('redirects-search', '');
   const q = query.trim().toLowerCase();
   const name = (to: string) => whatIsAt(to, env.relations);
   // The pages and posts the redirects send to (not a picture or another site), by their names as in the
@@ -255,7 +255,7 @@ export default function Redirects({ env, tab }: { env: Env; tab?: Tab }) {
       { tab: 'missing' as const, label: t.redirects.missing.title, icon: LinkBreak, count: missing && files ? stillMissing.length : null },
     ];
     return (
-      <Screen title={t.common.parts.redirects} wide back={backFrom('videresendelser')}>
+      <Screen title={t.common.parts.redirects} wide back={backFrom('redirects')}>
         {problem && <ProblemNote>{problem}</ProblemNote>}
         <Group>
           {rows.map((r) => (
@@ -279,17 +279,6 @@ export default function Redirects({ env, tab }: { env: Env; tab?: Tab }) {
             ? t.redirects.count(entries.length)
             : undefined
       }
-      actions={
-        tab === 'redirects' && (
-          <IconButton
-            icon={Plus}
-            label={t.redirects.new}
-
-            disabled={!files}
-            onClick={() => open({ from: '', to: '', isNew: true })}
-          />
-        )
-      }
     >
       <p className="mb-4 text-muted">{tab === 'redirects' ? t.redirects.intro : t.redirects.missing.intro}</p>
       <SearchRow
@@ -449,6 +438,9 @@ export default function Redirects({ env, tab }: { env: Env; tab?: Tab }) {
           </SheetBody>
         )}
       </BottomSheet>
+      {tab === 'redirects' && (
+        <CreateFab label={t.redirects.new} disabled={!files} onClick={() => open({ from: '', to: '', isNew: true })} />
+      )}
     </Screen>
   );
 }