@morphemecms/cms 0.11.0 → 0.13.0-next-20261106203613

package/src/BlockDialog.tsx

@@ -7,11 +7,12 @@
 // (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.
 // The fields and the section settings are in the theme's side sheet (sheetPlacement.mjs): a standard one beside the page from
-// medium (not modal: the page stays usable, .editor-side-sheet in editor.css), a modal one over the page below it
+// expanded (not modal: the page stays usable, .editor-side-sheet in editor.css), a modal one over the page below it
 // (fields only; the section settings are a sheet from the bottom there). Both end with Gem (Indsæt) and Annuller.
 // Their open, close, focus and Escape are the theme's (sideSheet() and standardSideSheet(), sideSheetControl.ts); leave() is their beforeClose.
-// Another block tapped while one is open closes the open one first (the question when changed). Exposes useBlockDialog, IMAGE.
-import { useEffect, useId, useRef, useState, type ReactElement } from 'react';
+// Another block tapped while one is open closes the open one first (the question when changed). In the standard side sheet a
+// card already in the text also has "Remove" after Cancel in the actions (the answer 'remove'). Exposes useBlockDialog, IMAGE.
+import { useEffect, useId, useRef, useState, type CSSProperties, type ReactElement } from 'react';
 import { ArrowsDownUp, Image } from '@phosphor-icons/react';
 import {
   Button,
@@ -46,6 +47,7 @@ import { snackbar } from '../lib/snackbar';
 import { closeChanged } from './ask';
 import SectionSettings from './SectionSettings';
 import { sheetLook } from './sheetPlacement.mjs';
+import { setPanelOpen } from './sidePanel';
 import { SiteSideSheet, siteSideSheet, siteSideSheetDialogClass, siteStandardSideSheet } from './themeUi';
 
 export type BlockAsk = {
@@ -58,13 +60,17 @@ export type BlockAsk = {
    * than once, unless the template says how many (have: the types in the text now, one for each, IMAGE for a picture).
    * image: a picture is offered first, and chosen as the type IMAGE. */
   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>;
+  /** New props for a block in the text; null when cancelled. isNew: one about to be put in ("Indsæt"). removable: the
+   * card may be removed, so the side panel has "Remove"; 'remove' when it is tapped (never when removable is not true). */
+  edit: (type: string, props: BlockProps, isNew?: boolean, removable?: boolean) => Promise<BlockProps | 'remove' | 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 } | { step: 'section' };
+type Open =
+  | { step: 'choose'; image?: boolean; have?: string[] }
+  | { step: 'fields'; type: string; isNew: boolean; removable?: boolean }
+  | { step: 'section' };
 
 /** The type a section's settings are answered with (not a block's). */
 const SECTION = 'section';
@@ -99,7 +105,7 @@ const picture: SiteBlock = {
     },
   ],
 };
-type Answer = { type: string; props: BlockProps } | null;
+type Answer = { type: string; props: BlockProps } | 'remove' | null;
 
 // Text as searched: lower case, without accents (as in PagePicker.tsx).
 const plain = (s: string) =>
@@ -110,7 +116,7 @@ const plain = (s: string) =>
 
 type InsertSort = 'az' | 'za' | 'group';
 const INSERT_SORTS: InsertSort[] = ['az', 'za', 'group'];
-const INSERT_SORT_KEY = 'editor-sort-indsaet';
+const INSERT_SORT_KEY = 'editor-sort-insert';
 
 // A block's group: the app's name for an app's block, otherwise the standard blocks (also the picture and HTML).
 const groupOf = (b: SiteBlock) => (b.app ? (apps.find((a) => a.id === b.app)?.label ?? b.app) : t.blockSettings.standard);
@@ -124,13 +130,13 @@ 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);
-  // The modal side sheet's <dialog> (below medium) and its controls; the standard one's box (from medium).
+  // The modal side sheet's <dialog> (below expanded) and its controls; the standard one's box (from expanded).
   const sideDialog = useRef<HTMLDialogElement>(null);
   const sideControls = useRef<ReturnType<typeof siteSideSheet> | null>(null);
   const standard = useRef<HTMLDivElement>(null);
   const standardControls = useRef<ReturnType<typeof siteStandardSideSheet> | null>(null);
   const headingId = useId();
-  const medium = useAtLeast('medium');
+  const expanded = useAtLeast('expanded');
   const answer = useRef<(a: Answer) => void>(() => {});
   const [open, setOpen] = useState<Open | null>(null);
   // What is open now (set at once, where `open` follows a render later), the look it has, when the last one has closed
@@ -186,7 +192,7 @@ export function useBlockDialog(
   };
 
   // Which dialog is open follows the look of the step: the sheet from the bottom, or the modal side sheet (below).
-  const look: string = open ? sheetLook(open.step, medium) : 'sheet';
+  const look: string = open ? sheetLook(open.step, expanded) : 'sheet';
   lookNow.current = look;
   useEffect(() => {
     const sheet = dialog.current;
@@ -202,7 +208,7 @@ export function useBlockDialog(
     return false;
   };
 
-  // The modal side sheet (below medium).
+  // The modal side sheet (below expanded).
   useEffect(() => {
     const d = sideDialog.current;
     if (look !== 'modal-side-sheet' || !d) return;
@@ -214,11 +220,12 @@ export function useBlockDialog(
     };
   }, [look]);
 
-  // The standard side sheet (from medium): the page makes room for it (editor.css: [data-side-panel]), the focus moves
+  // The standard side sheet (from expanded): the page makes room for it (editor.css: [data-side-panel]), the focus moves
   // into it and back to what had it before when it closes.
   useEffect(() => {
     if (look !== 'side-sheet') return;
     document.documentElement.setAttribute('data-side-panel', '');
+    setPanelOpen(true);
     const box = standard.current?.querySelector<HTMLElement>('[data-side-sheet-container]');
     if (box) {
       standardControls.current = siteStandardSideSheet(box, { beforeClose });
@@ -227,6 +234,7 @@ export function useBlockDialog(
     return () => {
       standardControls.current = null;
       document.documentElement.removeAttribute('data-side-panel');
+      setPanelOpen(false);
     };
   }, [look]);
 
@@ -254,16 +262,23 @@ export function useBlockDialog(
     list,
     template,
     data,
-    choose: (offer) => ask({ step: 'choose', image: offer?.image, have: offer?.have }),
+    choose: async (offer) => {
+      const answered = await ask({ step: 'choose', image: offer?.image, have: offer?.have });
+      return answered === 'remove' ? null : answered;
+    },
     section: async (color) => {
       const answered = await ask({ step: 'section' }, { color: color ?? '' });
-      return answered && { color: answered.props.color ? String(answered.props.color) : null };
+      if (!answered || answered === 'remove') return null;
+      return { color: answered.props.color ? String(answered.props.color) : null };
     },
-    edit: async (type, props, isNew = false) => {
+    edit: async (type, props, isNew = false, removable = 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.
-      const a = await ask({ step: 'fields', type, isNew }, isNew ? { ...newValue(fields), ...props } : savedValue(fields, props));
-      return a && a.props;
+      const a = await ask(
+        { step: 'fields', type, isNew, removable },
+        isNew ? { ...newValue(fields), ...props } : savedValue(fields, props),
+      );
+      return a === 'remove' ? a : a && a.props;
     },
   };
 
@@ -378,6 +393,12 @@ export function useBlockDialog(
             <Button kind="outlined" onClick={() => void leave()}>
               {t.common.cancel}
             </Button>
+            {open.step === 'fields' && open.removable && !open.isNew && look === 'side-sheet' && (
+              // After Save and Cancel in the start-aligned row, in the error colour (the theme's text button with its colour variable).
+              <Button kind="text" style={{ '--button-text-text': 'var(--error)' } as CSSProperties} onClick={() => done('remove')}>
+                {t.common.remove}
+              </Button>
+            )}
           </>
         }
       >

package/src/BlockParts.tsx

@@ -1,5 +1,5 @@
-// "Dele" › "UI-komponenter" (#udseende/dele/ui), "Dele" › "Blokke" (#udseende/dele/blokke) and "Dele" › a list of kinds
-// ("Promovering", #udseende/dele/liste/<id>): how the site looks, every part in every version, to see and agree on it.
+// "Dele" › "UI-komponenter" (#appearance/parts/ui), "Dele" › "Blokke" (#appearance/parts/blocks) and "Dele" › a list of kinds
+// ("Promovering", #appearance/parts/list/<id>): how the site looks, every part in every version, to see and agree on it.
 // "UI-komponenter" also has the active theme's coverage (summary, mark on each part, filter by style) and the site frame's parts.
 // "UI-komponenter" has the theme's UI components (its buttons and icon buttons, text fields and checkboxes …,
 // packages/editor/theme/ui/, through @site/editor) in every kind, size and state; "Blokke" every block, the standard
@@ -52,7 +52,7 @@ import { t } from './i18n';
 import { Svg } from './icon';
 
 const { screens } = t.parts;
-const back = { href: '#udseende/dele', label: t.common.parts.editorParts };
+const back = { href: '#appearance/parts', label: t.common.parts.editorParts };
 
 // The fields filled in with the plain picture where they have none (a card's, a list's items').
 function pictured(fields: Field[], props: BlockProps): BlockProps {
@@ -520,7 +520,7 @@ function CardParts() {
   );
 }
 
-/** "Dele" › "UI-komponenter" (#udseende/dele/ui): the theme's UI components in every kind, size and state. */
+/** "Dele" › "UI-komponenter" (#appearance/parts/ui): the theme's UI components in every kind, size and state. */
 export function ComponentParts() {
   const groups = [
     { id: 'ui', title: screens.ui },
@@ -587,7 +587,7 @@ export function ComponentParts() {
   );
 }
 
-/** "Dele" › "Blokke" (#udseende/dele/blokke): every block, the standard ones and then the apps', each a group of its
+/** "Dele" › "Blokke" (#appearance/parts/blocks): every block, the standard ones and then the apps', each a group of its
  * own, in all its versions. */
 export function BlocksParts() {
   const data = useMemo(exampleData, []);
@@ -616,7 +616,7 @@ export function BlocksParts() {
 /** The lists of kinds ("Promovering"), each a screen of "Dele". */
 export const kindLists = () => collections.filter((c): c is FolderCollection => c.kind === 'folder' && !!c.kinds && !!c.fields?.length);
 
-/** "Dele" › a list of kinds ("Promovering", #udseende/dele/liste/<id>): each of its kinds as the site draws it, its own
+/** "Dele" › a list of kinds ("Promovering", #appearance/parts/list/<id>): each of its kinds as the site draws it, its own
  * (FolderCollection.draws: the pop-up, the bars) and the apps' (AppKind: Mailchimp's signup, once for each of its
  * states), each a group of its own, as a new one of the kind with the made-up texts (kindExample). */
 export function KindParts({ id }: { id: string }) {

package/src/BlockSettings.tsx

@@ -1,4 +1,4 @@
-// "Blokke" › "Blokindstillinger" (#blokvalg): the blocks that can be put in the text of a page, in
+// "Blokke" › "Blokindstillinger" (#block-settings): the blocks that can be put in the text of a page, in
 // groups, the editor's standard blocks (packages/editor/src/standard/) and those of each app installed under "Apps",
 // under the app's name (e.g. "Mailchimp",
 // src/apps/, AppList.tsx; an app not installed has none here), each with how many pages it is on at its right
@@ -243,7 +243,7 @@ export function KindSwitch({ app, list, env, files }: { app: SiteApp; list: stri
 type Sort = 'group' | 'az' | 'za';
 const SORTS: Sort[] = ['group', 'az', 'za'];
 // The order picked last time, in this browser.
-const SORT_KEY = 'editor-sort-blokvalg';
+const SORT_KEY = 'editor-sort-block-settings';
 type OnOff = '' | 'on' | 'off';
 type Use = '' | 'used' | 'unused';
 

package/src/BrandForm.tsx

@@ -1,4 +1,4 @@
-// "Udseende" › "Logo og ikon" (#udseende/logo): a new logo (the mark by the site's name) and a new icon (the browser
+// "Udseende" › "Logo og ikon" (#appearance/logo): a new logo (the mark by the site's name) and a new icon (the browser
 // tab, Google and the editor's app icon), made from a picture the owner picks (brand.ts), in the site's colours
 // ("Farver"). Both are saved together in one commit with "Gem ændringer".
 import { useEffect, useState } from 'react';
@@ -120,7 +120,7 @@ export default function BrandForm({ env }: { env: Env }) {
   return (
     <FormFrame
       title={t.common.parts.brand}
-      back={{ href: '#udseende', label: t.common.parts.appearance }}
+      back={{ href: '#appearance', label: t.common.parts.appearance }}
       dirty={dirty}
       saving={saving || drawing}
       onSave={save}

package/src/Colors.tsx

@@ -1,4 +1,4 @@
-// "Udseende" › "Farver" (#udseende/farver): the site's colours, for light and dark mode, in the site's file of
+// "Udseende" › "Farver" (#appearance/colors): the site's colours, for light and dark mode, in the site's file of
 // colours (config.colors, packages/editor/lib/colors.ts). The first tab, "Generator", where the screen starts, or one
 // mode at a time, picked with the tabs after it, and the editor is shown in the mode while the screen is open
 // (theme.ts holdTheme). Each mode has a little page drawn in its colours, the pairs that are too hard to
@@ -15,7 +15,7 @@
 // farver", src/apps/content-colors/: pageColors in packages/editor/site/pageColors.ts). While an app installed changes the pages'
 // colours (hooks/page-colors.ts), each mode shows the pages' colours instead (PageColors), as the site was last built
 // (/editor/page-colors.json, packages/editor/scripts/page-colors.mjs): first a notice that the apps give them, with a button to the
-// site's own, which are only the fallback ("Reservefarver", #udseende/farver/reservefarver, a page of the same form, so
+// site's own, which are only the fallback ("Reservefarver", #appearance/colors/fallback-colors, a page of the same form, so
 // what is unsaved stays), then the apps, each to its settings, the pages with colours from a picture (the picture, the
 // page and its colours in the mode open), and those with the site's own. Saved with "Gem ændringer" in one commit; the
 // editor shows the new colours at once (theme.ts applyColors), the site when it is built again.
@@ -112,7 +112,7 @@ const CHANGE = t.app.changes.edited(t.app.changes.colors);
 type Tab = Mode | 'generator';
 
 /** The page with the site's own colours, while an app changes the pages' colours: the fallback. */
-export const FALLBACK_ROUTE = 'udseende/farver/reservefarver';
+export const FALLBACK_ROUTE = 'appearance/colors/fallback-colors';
 
 /** The apps installed that change the pages' colours (hooks/page-colors.ts). */
 const colorApps = (files: RepoFile[]) => {
@@ -139,7 +139,7 @@ export default function Colors({ env, files, fallback }: { env: Env; files: Repo
   const changing = useMemo(() => colorApps(files), [files]);
   useEffect(() => () => holdTheme(null), []);
   // While an app changes the pages' colours, the modes show the pages', and the site's own are on a page of the form.
-  useFormPages(changing.length ? ['udseende/farver', FALLBACK_ROUTE] : []);
+  useFormPages(changing.length ? ['appearance/colors', FALLBACK_ROUTE] : []);
   const ownShown = fallback || !changing.length;
   const appNames = new Intl.ListFormat(locale).format(changing.map((a) => a.label));
   const file = files.find((f) => f.path === config.colors);
@@ -207,8 +207,8 @@ export default function Colors({ env, files, fallback }: { env: Env; files: Repo
       title={changing.length && fallback ? t.colors.pages.fallback : t.common.parts.colors}
       back={
         changing.length && fallback
-          ? { href: '#udseende/farver', label: t.common.parts.colors, guard: (go) => go() }
-          : { href: '#udseende', label: t.common.parts.appearance }
+          ? { href: '#appearance/colors', label: t.common.parts.colors, guard: (go) => go() }
+          : { href: '#appearance', label: t.common.parts.appearance }
       }
       dirty={dirty}
       saving={saving}

package/src/CompanyForm.tsx

@@ -113,7 +113,7 @@ export default function CompanyForm({ part, env, files, at: route, page }: Props
       ) : (
         <FormFrame
           title={part.label}
-          back={part.back ?? { href: '#virksomheden', label: t.common.parts.company }}
+          back={part.back ?? { href: '#company', label: t.common.parts.company }}
           dirty={dirty}
           saving={saving}
           onSave={save}

package/src/Consents.tsx

@@ -1,4 +1,4 @@
-// "Samtykker" (#privatliv/samtykker, Part.opens 'consents'): the visitors' answers in the cookie banner, as the site's
+// "Consents" (#privacy/consents, Part.opens 'consents'): the visitors' answers in the cookie banner, as the site's
 // Worker keeps them (consentData.ts, packages/editor/worker/consent.js), newest first, so the site can show that a visitor said yes. Over
 // the list the search by consent id (the one the banner shows the visitor under "Cookieindstillinger", asked of the
 // Worker, so older answers are found too) and the order (kept in this browser); in the top bar the download of all of
@@ -32,7 +32,7 @@ import { t } from './i18n';
 
 type Sort = 'newest' | 'oldest';
 const SORTS: Sort[] = ['newest', 'oldest'];
-const SORT_KEY = 'editor-sort-samtykker';
+const SORT_KEY = 'editor-sort-consents';
 
 // The yes and the no of an answer as one line, in the banner's order: "Ja: Statistik · Nej: Marketing".
 function summary(answer: ConsentAnswer) {
@@ -46,7 +46,7 @@ function summary(answer: ConsentAnswer) {
 }
 
 export default function Consents({ env, back }: { env: Env; back: { href: string; label: string } }) {
-  const [query, setQuery] = useKept('samtykker-soeg', '');
+  const [query, setQuery] = useKept('consents-search', '');
   const [sort, setSort] = useState<Sort>(() => {
     try {
       const saved = localStorage.getItem(SORT_KEY);

package/src/CreateFab.tsx

@@ -0,0 +1,8 @@
+// A screen's one create action as a FAB (Files, Redirects, a single-file list form): a button, busy and
+// disabled as the screen says. Exposes CreateFab. Uses FabMenu (ui.tsx).
+import { Plus } from '@phosphor-icons/react';
+import { FabMenu } from './ui';
+
+export function CreateFab({ label, onClick, busy, disabled }: { label: string; onClick: () => void; busy?: boolean; disabled?: boolean }) {
+  return <FabMenu icon={Plus} label={label} items={[{ icon: Plus, label, onClick, busy, disabled }]} />;
+}

package/src/DataForm.tsx

@@ -4,7 +4,6 @@
 // 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 { 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';
@@ -12,6 +11,7 @@ import { kindDraw } from './apps';
 import { ConflictError, type RepoFile } from './github';
 import { clean, newItem, newValue, problemAt } from './check';
 import { FieldInput, FieldList, Fields, useWrongField, WrongField, type FieldContext } from './fields';
+import { CreateFab } from './CreateFab';
 import { DataFileFields } from './DataFileFields';
 import { dataOf, fieldsOf, listOnly, valuesOf } from './dataFileValues';
 import SectionsField from './SectionsField';
@@ -21,7 +21,7 @@ import { splitPicture } from '../lib/crop.mjs';
 import { useMediaPicker } from './Media';
 import FormFrame, { savedStatus, useSavedAt } from './FormFrame';
 import { savedOn, VersionNotice, VersionsButton, WithVersions, type ShownVersion } from './Versions';
-import { Button, CheckList, FoldSection, FormColumns, Group, IconButton, Preview, FormHeading, SharePreview, Notice, ListItem } from './ui';
+import { Button, CheckList, FoldSection, FormColumns, Group, Preview, FormHeading, SharePreview, Notice, ListItem } from './ui';
 import { SearchPreview } from './SearchPreview';
 import { searchedAs } from './googleResult.mjs';
 import { plain, SEO_FIELDS, seoRating, SHARE_FIELDS, sharedAs } from './seo';
@@ -34,7 +34,7 @@ type Props = {
   dataFile?: DataFile;
   file: RepoFile;
   env: Env;
-  /** A new entry of this kind (FolderCollection.kinds), picked under "+". */
+  /** A new entry of this kind (FolderCollection.kinds), picked in the list's create FAB menu. */
   kind?: string;
 };
 
@@ -294,7 +294,7 @@ function Form({
       label: v.label,
       node: draw({ ...values, ...v.props }, { lists: env.lists, testimonials: env.testimonials, relations: env.relations, site: env.site }),
     }));
-  // A file that is a list (the menus) is added to with "+" in the top bar, like the other lists; its own fields
+  // A file that is a list (the menus) is added to with the FAB, like the other lists; its own fields
   // ("Aktiveret") stand above it.
   const root = dataFile?.root;
   // Where the entry is used on the site (a tag: its posts, testimonials, promotions and blocks), each opening it.
@@ -309,28 +309,16 @@ function Form({
           title={dataFile ? dataFile.label : isNew ? collection.create! : entryName(folder!, clean(fields, initial)) || kindLabel}
           back={
             header.includes(collection.id)
-              ? { href: '#udseende/header', label: t.common.parts.header }
+              ? { href: '#appearance/header', label: t.common.parts.header }
               : collection.id === 'footer'
-                ? { href: '#udseende/footer', label: t.common.parts.footer }
+                ? { href: '#appearance/footer', label: t.common.parts.footer }
                 : collection.kind === 'files' && collection.files.length === 1
                   ? { href: '#', label: siteName }
-                  : { href: `#liste/${collection.id}`, label: collection.label }
+                  : { href: `#list/${collection.id}`, label: collection.label }
           }
           status={fixed ? savedStatus({ savedAt, saving, deleting }) : undefined}
           view={view}
-          actions={
-            <>
-              {!isNew && <VersionsButton env={env} path={base.path} onPick={onVersion} />}
-              {root && (
-                <IconButton
-                  icon={Plus}
-                  label={t.forms.addOne(root.singular!)}
-
-                  onClick={() => setItems([...items, newItem(root)])}
-                />
-              )}
-            </>
-          }
+          actions={!isNew && <VersionsButton env={env} path={base.path} onPick={onVersion} />}
           dirty={dirty}
           saving={saving || deleting}
           deleting={deleting}
@@ -424,6 +412,8 @@ function Form({
               ))}
             </Group>
           )}
+          {/* A single-file list: a new item in it. */}
+          {root && <CreateFab label={t.forms.addOne(root.singular!)} onClick={() => setItems([...items, newItem(root)])} />}
         </FormFrame>
         {picker}
       </WrongField.Provider>

package/src/Deleted.tsx

@@ -38,7 +38,7 @@ const fileName = (path: string) => path.split('/').pop() ?? path;
 
 export default function Deleted({ id, files, env }: { id: string; files: RepoFile[]; env: Env }) {
   // The files from "Filer" (pictures, PDFs, videos, zip files), not a list's.
-  const pictures = id === 'filer';
+  const pictures = id === 'files';
   const collection = pictures ? undefined : collections.find((c) => c.id === id && restorable(c));
   const folder = pictures ? MEDIA : collection && collection.kind !== 'files' ? collection.folder : '';
   const [deleted, setDeleted] = useState<DeletedFile[] | null>(null);
@@ -62,12 +62,12 @@ export default function Deleted({ id, files, env }: { id: string; files: RepoFil
   if (!folder)
     return (
       <Screen title={t.app.notFound} back={{ href: '#', label: siteName }}>
-        <EmptyNote>{t.app.nothingAt(`slettet/${id}`)}</EmptyNote>
+        <EmptyNote>{t.app.nothingAt(`deleted/${id}`)}</EmptyNote>
       </Screen>
     );
 
   const label = pictures ? t.history.files : collection!.label;
-  const back = pictures ? { href: '#filer', label: t.common.parts.media } : { href: `#liste/${id}`, label: collection!.label };
+  const back = pictures ? { href: '#files', label: t.common.parts.media } : { href: `#list/${id}`, label: collection!.label };
 
   async function open(file: DeletedFile) {
     if (!pictures) return restore(file);

package/src/EditorFooter.tsx

@@ -1,4 +1,4 @@
-// The editor's footer: one line under the content of every screen (Screen.tsx), with a link to "Licenser" (#licenser,
+// The editor's footer: one line under the content of every screen (Screen.tsx), with a link to "Licenser" (#licenses,
 // Licenses.tsx). Exposes EditorFooter. Uses LinkButton from ui.tsx; the safe area at the bottom is Screen's main.
 import { t } from './i18n';
 import { LinkButton } from './ui';
@@ -6,7 +6,7 @@ import { LinkButton } from './ui';
 export default function EditorFooter() {
   return (
     <footer className="mt-12 flex justify-center">
-      <LinkButton href="#licenser" kind="text" size="small">
+      <LinkButton href="#licenses" kind="text" size="small">
         {t.common.parts.licenses}
       </LinkButton>
     </footer>

package/src/EntryForm.tsx

@@ -99,7 +99,7 @@ export const newMarkdown = (collection: MarkdownCollection, off: string[] = []):
 // The address of a saved page or post: a page's own `path`, or else /<file name>/ (packages/editor/site/content.ts).
 // '' for a new one.
 // Where the redirects are, as the menu has it: "Indhold" › "Videresendelser" › "Alle videresendelser".
-const redirectsPath = () => [placeOf('videresendelser'), t.common.parts.redirects, t.redirects.all].filter(Boolean).join(' › ');
+const redirectsPath = () => [placeOf('redirects'), t.common.parts.redirects, t.redirects.all].filter(Boolean).join(' › ');
 
 function addressNow(collection: MarkdownCollection, file: RepoFile, data: Record<string, unknown>) {
   if (!file.path) return '';
@@ -623,7 +623,7 @@ function Form({
       <WrongField.Provider value={wrongField.field}>
         <FormFrame
           title={formTitle}
-          back={{ href: `#liste/${collection.id}`, label: collection.label }}
+          back={{ href: `#list/${collection.id}`, label: collection.label }}
           status={savedStatus({ savedAt, saving, deleting, isNew })}
           view={isNew ? undefined : url}
           dirty={dirty}
@@ -641,7 +641,7 @@ function Form({
               <>
                 <FoldSection {...sectionProps('content')}>
                   {collection.fields.filter((f) => TOP.includes(f.name) && !STATUS.includes(f.name)).map(field)}
-                  <div ref={textBox} className="scroll-mt-[calc(5rem+env(safe-area-inset-top))]">
+                  <div ref={textBox} className="scroll-mt-[calc(1rem+env(safe-area-inset-top))]">
                     <span className="mb-1 block font-medium">{t.forms.text}</span>
                     <MarkdownEditor
                       ref={text}

package/src/FooterSettings.tsx

@@ -1,4 +1,4 @@
-// "Udseende" › "Footer" (#udseende/footer): the footer's text under the name, its two headings and its links (footer.json),
+// "Udseende" › "Footer" (#appearance/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.
@@ -30,7 +30,7 @@ const placeOf = (path: string) => places.find((p) => p.names.includes(path.split
 // 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 };
+const back = { href: '#appearance', label: t.common.parts.appearance };
 
 export default function FooterSettings({ env }: { env: Env }) {
   const layout = useSettingsSections(places);

package/src/FormFrame.tsx

@@ -3,7 +3,8 @@
 // of the screen with "Gem" (across the bar on a phone, at its end from medium), which is only there when something
 // has been changed. Messages are shown by the app (Env.notify); the first "Gem" asks whether the editor may also send notifications.
 // Leaving with changes that are not saved asks first, to save them or not (in the editor's dialog;
-// closing or reloading the page asks in the browser's own). "Forhåndsvis" beside "Gem" and in the top bar shows the page with
+// closing or reloading the page asks in the browser's own). "Forhåndsvis" beside "Gem" and, as a page action (Screen.tsx `pageActions`:
+// the end of the title row from expanded, the top bar below it), shows the page with
 // what is in the form, before it is saved (pagePreview.tsx).
 import { useEffect, useRef, useState, type ReactNode } from 'react';
 import { ArrowSquareOut, Binoculars, Trash } from '@phosphor-icons/react';
@@ -177,9 +178,9 @@ export default function FormFrame<T extends string>({
       drawer={drawer}
       tabs={tabs}
       back={{ guard: leaveTo, ...back }}
-      actions={
+      actions={actions}
+      pageActions={
         <>
-          {actions}
           {onPreview && <IconButton icon={Binoculars} label={t.preview.button} aria-haspopup="dialog" onClick={onPreview} />}
           {view && <IconLink href={view} target="_blank" rel="noopener" label={t.app.viewOnSite} icon={ArrowSquareOut} />}
         </>

package/src/HeaderSettings.tsx

@@ -1,4 +1,4 @@
-// "Udseende" › "Header" (#udseende/header): what is in the header on every page, on one screen laid out as a page's form
+// "Udseende" › "Header" (#appearance/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
@@ -19,7 +19,7 @@ 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 FILES = { menu: 'menu', mobileMenu: 'mobile-menu', header: 'header-button' } 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] }] : [];
@@ -51,7 +51,7 @@ const shapeOf = (values: Values) => ({
   header: values[at(FILES.header)] ?? {},
 });
 
-const back = { href: '#udseende', label: t.common.parts.appearance };
+const back = { href: '#appearance', label: t.common.parts.appearance };
 
 export default function HeaderSettings({ env }: { env: Env }) {
   const layout = useSettingsSections(places);

package/src/Keywords.tsx

@@ -26,7 +26,7 @@ type Keyword = { word: string; primary: boolean; title: string; href: string; ad
 type Counts = Record<string, { href: string; pages: number }>;
 
 type Sort = 'az' | 'za' | 'most' | 'fewest';
-const SORT_KEY = 'editor-sort-soegeord';
+const SORT_KEY = 'editor-sort-keywords';
 function savedSort(): Sort {
   try {
     const s = localStorage.getItem(SORT_KEY);
@@ -85,11 +85,11 @@ function keywordsOf(files: RepoFile[]): Keyword[] {
 }
 
 export default function Keywords({ files }: { files: RepoFile[] }) {
-  const [query, setQuery] = useKept('soegeord-soeg', '');
+  const [query, setQuery] = useKept('keywords-search', '');
   const [sort, setSort] = useState(savedSort);
-  const [which, setWhich] = useKept<'' | 'primary' | 'secondary'>('soegeord-slags', '');
-  const [linked, setLinked] = useKept<'' | 'with' | 'without'>('soegeord-links', '');
-  const [kind, setKind] = useKept('soegeord-side', '');
+  const [which, setWhich] = useKept<'' | 'primary' | 'secondary'>('keywords-kind', '');
+  const [linked, setLinked] = useKept<'' | 'with' | 'without'>('keywords-links', '');
+  const [kind, setKind] = useKept('keywords-page', '');
   // undefined while they load; null when the site has none (not built since they came, or offline).
   const [counts, setCounts] = useState<Counts | null>();
   useEffect(() => {