@morphemecms/cms 0.12.0 → 0.13.0-next-20261106203613

package/src/movedRoutes.test.mjs

@@ -4,21 +4,138 @@ 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');
+  assert.equal(movedRoute('header'), 'appearance/header');
 });
 
 test('the old footer form opens Appearance › Footer', () => {
-  assert.equal(movedRoute('src/data/footer.json'), 'udseende/footer');
+  assert.equal(movedRoute('src/data/footer.json'), 'appearance/footer');
 });
 
 test('an address that has not moved stays', () => {
-  assert.equal(movedRoute('udseende/header'), 'udseende/header');
-  assert.equal(movedRoute('lister'), 'lister');
+  assert.equal(movedRoute('appearance/header'), 'appearance/header');
+  assert.equal(movedRoute('lists'), 'lists');
 });
 
 test('the extra moves come first', () => {
-  assert.equal(movedRoute('butik', { butik: 'indstillinger/appstore' }), 'indstillinger/appstore');
-  assert.equal(movedRoute('tema', { butik: 'x' }), 'udseende');
+  assert.equal(movedRoute('butik', { butik: 'settings/appstore' }), 'settings/appstore');
+  assert.equal(movedRoute('tema', { butik: 'x' }), 'appearance');
+});
+
+test('only the old prefix of an address is renamed, the rest stays', () => {
+  const renamed = { indstillinger: 'settings', 'udseende/dele': 'appearance/parts', liste: 'list' };
+  assert.equal(movedRoute('indstillinger/appstore', {}, renamed), 'settings/appstore');
+  assert.equal(movedRoute('udseende/dele/liste/kontakt', {}, renamed), 'appearance/parts/liste/kontakt');
+});
+
+test('a key segment * matches any one segment and keeps it', () => {
+  const renamed = { 'apps/*/indstillinger': 'apps/*/settings' };
+  assert.equal(movedRoute('apps/x/indstillinger/variant', {}, renamed), 'apps/x/settings/variant');
+  assert.equal(movedRoute('apps/x/om', {}, renamed), 'apps/x/om');
+});
+
+test('data inside an address is not renamed', () => {
+  assert.equal(movedRoute('files/filer/doc.pdf'), 'files/filer/doc.pdf');
+  assert.equal(movedRoute('blog/farver'), 'blog/farver');
+  assert.equal(movedRoute('list/temaer'), 'list/temaer');
+});
+
+test('old prefixes are renamed, the data after them stays', () => {
+  assert.equal(movedRoute('filer/filer/doc.pdf'), 'files/filer/doc.pdf');
+  assert.equal(movedRoute('liste/temaer'), 'list/temaer');
+  assert.equal(movedRoute('udseende/dele/liste/kontakt'), 'appearance/parts/list/kontakt');
+  assert.equal(movedRoute('indstillinger/appstore'), 'settings/appstore');
+  assert.equal(movedRoute('udseende/farver'), 'appearance/colors');
+});
+
+test('every old route prefix opens the screen where it is now', () => {
+  const cases = {
+    indstillinger: 'settings',
+    'indstillinger/appstore/temaer': 'settings/appstore/themes',
+    'apps/google-analytics/indstillinger': 'apps/google-analytics/settings',
+    'apps/udvikler/acme': 'apps/developer/acme',
+    'apps/cms-version/om': 'apps/cms-version/about',
+    'apps/content-colors/indstillinger/variant': 'apps/content-colors/settings/variant',
+    udseende: 'appearance',
+    'udseende/temaer': 'appearance/themes',
+    'udseende/temaer/material': 'appearance/themes/material',
+    'udseende/ikonpakker': 'appearance/icon-packs',
+    'udseende/bevaegelse': 'appearance/motion',
+    'udseende/sidekolonne': 'appearance/side-column',
+    'udseende/farver/reservefarver': 'appearance/colors/fallback-colors',
+    'udseende/dele': 'appearance/parts',
+    'udseende/dele/editor': 'appearance/parts/editor',
+    'udseende/dele/blokke': 'appearance/parts/blocks',
+    'udseende/dele/vaerdier': 'appearance/parts/values',
+    'udseende/standardsider': 'appearance/default-pages',
+    'udseende/logo': 'appearance/logo',
+    maaling: 'analytics',
+    'maaling/google-analytics': 'analytics/google-analytics',
+    privatliv: 'privacy',
+    'privatliv/cookiebanner': 'privacy/cookie-banner',
+    'privatliv/samtykker': 'privacy/consents',
+    'privatliv/privatlivssider': 'privacy/privacy-pages',
+    lister: 'lists',
+    liste: 'list',
+    'liste/priser/cookiescanner': 'list/priser/cookiescanner',
+    'liste/kategorier': 'list/tags',
+    ny: 'new',
+    'ny/popups/mailchimp': 'new/popups/mailchimp',
+    'ny/kategorier': 'new/tags',
+    'ny/udtalelser': 'new/testimonials',
+    slettet: 'deleted',
+    'slettet/priser': 'deleted/priser',
+    'slettet/kategorier': 'deleted/tags',
+    'slettet/udtalelser': 'deleted/testimonials',
+    'liste/udtalelser': 'list/testimonials',
+    'liste/mobilmenu': 'list/mobile-menu',
+    'slettet/mobilmenu': 'deleted/mobile-menu',
+    'slettet/filer': 'deleted/files',
+    virksomheden: 'company',
+    'virksomheden/kontakt': 'company/contact',
+    'virksomheden/sociale-medier': 'company/social-media',
+    'virksomheden/betaling/mobilepay': 'company/payment/mobilepay',
+    blokke: 'blocks',
+    'blokke/accordion': 'blocks/accordion',
+    filer: 'files',
+    'seo/videresendelser': 'seo/redirects',
+    'seo/videresendelser/alle': 'seo/redirects/all',
+    'seo/videresendelser/ikke-fundet': 'seo/redirects/not-found',
+    'seo/interne-links': 'seo/internal-links',
+    'seo/vurdering': 'seo/rating',
+    blokvalg: 'block-settings',
+    avanceret: 'advanced',
+    licenser: 'licenses',
+    konto: 'account',
+    notifikationer: 'notifications',
+    'licenser/mit': 'licenses/mit',
+  };
+  for (const [old, now] of Object.entries(cases)) assert.equal(movedRoute(old), now, old);
+});
+
+test('a new address stays', () => {
+  assert.equal(movedRoute('settings/appstore'), 'settings/appstore');
+  assert.equal(movedRoute('blog/mit-indlaeg'), 'blog/mit-indlaeg');
+});
+
+test('a moved address wins over a renamed segment', () => {
+  assert.equal(movedRoute('tema', {}, { tema: 'x' }), 'appearance');
+});
+
+test('an old route to the app store opens it at its English route', () => {
+  assert.equal(movedRoute('indstillinger/appstore'), 'settings/appstore');
+});
+
+test('the old colours route opens the colours screen under Appearance', () => {
+  assert.equal(movedRoute('farver'), 'appearance/colors');
+});
+
+test('an old parts route keeps a list id and opens at its English route', () => {
+  assert.equal(movedRoute('udseende/dele/liste/kontakt'), 'appearance/parts/list/kontakt');
+});
+
+test('the old theme routes open the screens under Appearance', () => {
+  assert.equal(movedRoute('tema'), 'appearance');
+  assert.equal(movedRoute('tema/dele/editor'), 'appearance/parts/editor');
 });
 
 test('the old booking and newsletter settings open the apps by their permanent ids', () => {

package/src/nav.ts

@@ -9,7 +9,7 @@ type Step = { at: number; prev: string | null };
 
 const step = () => history.state as Step | null;
 
-/** The screen of an address ("#liste/sider" → "liste/sider", "#" → ""); one with a broken %-sign is
+/** The screen of an address ("#list/sider" → "list/sider", "#" → ""); one with a broken %-sign is
  * the start screen. */
 export function screenOf(hash: string) {
   try {

package/src/notificationData.ts

@@ -1,4 +1,4 @@
-// The notifications (#notifikationer, Notifications.tsx): what the editor and the apps have to say that is worth
+// The notifications (#notifications, Notifications.tsx): what the editor and the apps have to say that is worth
 // reading again, newest first, with when it came and the link it had. Each has a type: the editor's own (`site`: the
 // site is updated or not, `saved`: something is saved, deleted, restored or installed, `failed`: it could not be,
 // `updates`: an app from the store updated on its own, AppList.tsx autoUpdate), or

package/src/schema.ts

@@ -77,7 +77,7 @@ export type Field = {
    * picked when it is made). */
   locked?: boolean;
   /** select: the choices on a page of their own under the form, at its address with the field's name after it
-   * (#apps/content-colors/indstillinger/variant), in place of the sheet, drawn by this with what each gives (a picture of
+   * (#apps/content-colors/settings/variant), in place of the sheet, drawn by this with what each gives (a picture of
    * it); the field links there. Only a field of a part's own form (CompanyForm.tsx: an app's settings), not one in a
    * group or a list; elsewhere the choices are in the sheet. */
   page?: ComponentType<FieldPageProps>;
@@ -162,7 +162,7 @@ export type Template = {
  * bar opens the booking sheet, as "Book en tid" does), else the entry itself opens. */
 export type Opens = { label: string; as?: string };
 
-/** A place in the editor (a route, e.g. 'virksomheden/kontakt') and the text of the link to it. */
+/** A place in the editor (a route, e.g. 'company/contact') and the text of the link to it. */
 export type Edit = { to: string; text: string };
 
 // A kind of item in a list of blocks (a fixed page's sections; in the editor cards in its text, SectionsField.tsx).

package/src/site.ts

@@ -9,7 +9,7 @@ import { appIdOf, installedApps, withKinds, type AppDefinition, type AppList, ty
 import { appBlocks, appFiles, appFolders, appPictures, appShared, appStores } from './appFiles';
 import type { BlockDefinition, SiteBlock } from './blocks';
 import type { ListRows } from './fields';
-import { siteT, siteText, t, translatingSite } from './i18n';
+import { inSiteLanguage, siteT, siteText, t, translatingSite } from './i18n';
 import { byText, type Block, type Collection, type DataFile, type Edit, type Field, type OwnedList, type Part } from './schema';
 import { blockTypeOf, type SharedTexts } from './shared';
 import { appFolder, needsOf, SCREENSHOTS, shotFile } from './store';
@@ -19,17 +19,40 @@ const written = new WeakMap<object, object>();
 /** A collection, a file, a part or a block as the site wrote it, in its language: for the commits. */
 export const asWritten = <T extends object>(shown: T): T => (written.get(shown) as T | undefined) ?? shown;
 
-// Only the keys a thing has, so it is the same as it was but for its texts.
-function shown<T extends object>(from: T, texts: Partial<T>): T {
+// Only the keys a thing has, so it is the same as it was but for its texts. `link`: remember `from` as what it was written as.
+function shownAs<T extends object>(from: T, texts: Partial<T>, link: boolean): T {
   const to = { ...from };
   for (const key of Object.keys(texts) as (keyof T)[]) if (from[key] !== undefined) to[key] = texts[key]!;
-  written.set(to, from);
+  if (link) written.set(to, from);
   return to;
 }
 
 /** The site's parts with every text of theirs said by `say`: the label, the hint, the link elsewhere,
- * the message of a pattern, the options, a switch's two words … of each field, block, file and part. */
-export function translator(say: (text: string) => string) {
+ * the message of a pattern, the options, a switch's two words … of each field, block, file and part.
+ * `sayWritten`: what asWritten gives back for each thing it returns, with its texts said by it (the standard parts'
+ * English in the site's language, inSiteLanguage); without it, asWritten gives back the thing as it was. */
+export function translator(say: (text: string) => string, sayWritten?: (text: string) => string) {
+  const shownTexts = build(say, !sayWritten);
+  if (!sayWritten) return shownTexts;
+  const writtenTexts = build(sayWritten, false);
+  const both =
+    <A extends object>(one: (x: A) => A, said: (x: A) => A) =>
+    (x: A): A => {
+      const to = one(x);
+      written.set(to, said(x));
+      return to;
+    };
+  return {
+    ...shownTexts,
+    block: both(shownTexts.block, writtenTexts.block),
+    collection: both(shownTexts.collection, writtenTexts.collection),
+    part: both(shownTexts.part, writtenTexts.part),
+    app: both(shownTexts.app, writtenTexts.app),
+  } as typeof shownTexts;
+}
+
+function build(say: (text: string) => string, link: boolean) {
+  const shown = <T extends object>(from: T, texts: Partial<T>): T => shownAs(from, texts, link);
   const maybe = (text?: string) => (text === undefined ? text : say(text));
   const edit = (e?: Edit) => e && { ...e, text: say(e.text) };
   const field = (f: Field): Field =>
@@ -94,7 +117,8 @@ export function translator(say: (text: string) => string) {
 /** A colour under "Farver" (colorFields in @site/colors): its CSS variable without "--", its name and what it is for. */
 type ColorField = (typeof site.colorFields)[number];
 
-const local = translator(siteText);
+// A commit names a part in the site's language: the standard parts' English texts through inSiteLanguage, the site's own as written.
+const local = translator(siteText, inSiteLanguage);
 const each = <T>(all: T[], one: (x: T) => T) => (translatingSite ? all.map(one) : all);
 
 // The screens under "Blokke" of the blocks with shared texts (shared.ts in the block's folder), named and
@@ -117,7 +141,7 @@ function sharedPartsOf(blocks: Folders<BlockDefinition>, shared: Folders<SharedT
         fields,
         defaults: values,
         preview: { type, ...preview },
-        back: { href: '#blokke', label: t.common.parts.blocks },
+        back: { href: '#blocks', label: t.common.parts.blocks },
       },
     ];
   });
@@ -142,7 +166,7 @@ export const writtenBlockParts: Part[] = [...site.blockParts, ...sharedParts, ..
 /** The parts of "Virksomheden"; one with parts of its own (Part.parts) has them going back to it. */
 export const companyParts = each(
   site.companyParts.map((p) =>
-    p.parts ? { ...p, parts: p.parts.map((s) => ({ ...s, back: { href: `#virksomheden/${p.id}`, label: p.label } })) } : p,
+    p.parts ? { ...p, parts: p.parts.map((s) => ({ ...s, back: { href: `#company/${p.id}`, label: p.label } })) } : p,
   ),
   local.part,
 );
@@ -155,9 +179,9 @@ export const partScreens = site.partScreens.map((s) => ({
     local.part,
   ),
 }));
-/** The site's own parts under "Udseende" (#udseende, Library.tsx Theme), after the logo and icon, each going back to it. */
+/** The site's own parts under "Udseende" (#appearance, Library.tsx Theme), after the logo and icon, each going back to it. */
 export const appearance = each(
-  site.appearance.map((p) => ({ ...p, back: { href: '#udseende', label: t.common.parts.appearance } })),
+  site.appearance.map((p) => ({ ...p, back: { href: '#appearance', label: t.common.parts.appearance } })),
   local.part,
 );
 /** Where a screen goes back to: the start screen. The menu's sections ("Indhold" …) are lists in the drawer, not screens,
@@ -190,7 +214,7 @@ export const placeOf = (id: string): string | undefined => groups.find((g) => g.
  * ("Udseende › Standardsider"): the part with its field in the file of the standard pages. */
 export function standardPageAt(key: string): string {
   const chosenIn = (p: Part) => p.file === site.config.standardPages && !!p.fields?.some((f) => f.name === key);
-  const screen = [{ id: 'udseende', label: t.common.parts.appearance, parts: appearance }, ...partScreens].find((s) =>
+  const screen = [{ id: 'appearance', label: t.common.parts.appearance, parts: appearance }, ...partScreens].find((s) =>
     s.parts.some(chosenIn),
   );
   if (!screen) return '';
@@ -314,7 +338,7 @@ export const icons = {
   ),
 };
 
-/** The short lists, under "Lister" (#lister): the site's, the standard blocks' and the apps', which go back there too. */
+/** The short lists, under "Lister" (#lists): the site's, the standard blocks' and the apps', which go back there too. */
 export const lists = [...site.lists, ...ownedLists.map((l) => l.id)];
 
 /** The lists under "Lister" now: the site's, the standard blocks' and those of the apps installed, without the cookie

package/src/standard/accordion/index.tsx

@@ -14,7 +14,7 @@ export default defineBlock({
   label: t.blocks.accordion.label,
   icon: Rows,
   hint: t.blocks.accordion.hint,
-  edit: { to: 'blokke/accordion', text: t.blocks.accordion.edit },
+  edit: { to: 'blocks/accordion', text: t.blocks.accordion.edit },
   fields: [
     ...headFields,
     {

package/src/standard/accordion/shared.ts

@@ -5,7 +5,7 @@ import { siteT, t } from '../../i18n';
 import { defineShared } from '../../shared';
 
 /** The rows it is shown with where no page has it: its screen under "Blokke" and "Tilgængelige
- * blokke" (index.tsx). In the site's language, like the drawing. */
+ * blocks" (index.tsx). In the site's language, like the drawing. */
 export const example = { items: siteT.blocks.accordion.example.map((label) => ({ label, href: '' })) };
 
 export default defineShared({

package/src/standard/buttons/index.tsx

@@ -11,7 +11,7 @@ export default defineBlock({
   label: t.blocks.buttons.label,
   icon: CursorClick,
   hint: t.blocks.buttons.hint,
-  edit: { to: 'blokke/buttons', text: t.blocks.buttons.edit },
+  edit: { to: 'blocks/buttons', text: t.blocks.buttons.edit },
   fields: [{ ...buttonList, hint: t.blocks.buttons.itemsHint }],
   preview: true,
   detail: (p) => [

package/src/standard/cards/index.tsx

@@ -13,7 +13,7 @@ export default defineBlock({
   label: t.blocks.cards.label,
   icon: Cards,
   hint: t.blocks.cards.hint,
-  edit: { to: 'blokke/cards', text: t.blocks.cards.edit },
+  edit: { to: 'blocks/cards', text: t.blocks.cards.edit },
   fields: [
     ...headFields,
     // An icon is the empty choice: so are the cards from before there was a choice.

package/src/standard/cards/shared.ts

@@ -4,7 +4,7 @@ import { siteT, t } from '../../i18n';
 import { defineShared } from '../../shared';
 
 /** The cards it is shown with where no page has it: its screen under "Blokke" and "Tilgængelige
- * blokke" (index.tsx). In the site's language, like the drawing. With a page, so the link's text,
+ * blocks" (index.tsx). In the site's language, like the drawing. With a page, so the link's text,
  * which is edited there, is on them. */
 export const example = { items: siteT.blocks.cards.example.map((c) => ({ ...c, href: '/' })) };
 

package/src/standard/cookies/index.tsx

@@ -11,7 +11,7 @@ export default defineBlock({
   label: t.blocks.cookies.label,
   icon: Cookie,
   hint: t.blocks.cookies.hint,
-  edit: { to: `liste/${config.lists.cookies}`, text: t.blocks.cookies.edit },
+  edit: { to: `list/${config.lists.cookies}`, text: t.blocks.cookies.edit },
   fields: [],
   example: {},
 });

package/src/standard/posts/index.tsx

@@ -49,7 +49,7 @@ export default defineBlock({
   label: t.blocks.posts.label,
   icon: Newspaper,
   hint: t.blocks.posts.hint,
-  edit: { to: 'blokke/posts', text: t.blocks.posts.edit },
+  edit: { to: 'blocks/posts', text: t.blocks.posts.edit },
   fields: [
     ...headFields,
     // A list (the empty choice: so are the blocks from before there was a choice), or the newest large over the list

package/src/standard/testimonials/index.tsx

@@ -36,7 +36,7 @@ export default defineBlock({
   label: t.blocks.testimonials.label,
   icon: Quotes,
   hint: t.blocks.testimonials.hint,
-  edit: { to: `liste/${config.lists.testimonials}`, text: t.blocks.testimonials.edit },
+  edit: { to: `list/${config.lists.testimonials}`, text: t.blocks.testimonials.edit },
   fields: [
     ...headFields,
     {

package/src/standard/testimonials/list.ts

@@ -35,7 +35,7 @@ export default function testimonialsList(say: Messages): OwnedList {
         to: 'categories',
         multiple: true,
         add: own.addTag,
-        edit: { to: `ny/${config.lists.tags}`, text: own.entries.createTag },
+        edit: { to: `new/${config.lists.tags}`, text: own.entries.createTag },
       },
       { name: 'frontPage', label: own.entries.frontPage, type: 'boolean', default: true },
     ],

package/src/store.ts

@@ -1,4 +1,4 @@
-// The app store ("Indstillinger" › "Appstore", #indstillinger/appstore, AppList.tsx): the apps that are not in the site
+// The app store ("Indstillinger" › "Appstore", #settings/appstore, AppList.tsx): the apps that are not in the site
 // and can be installed. The store is reached through the site's Worker (/api/store/catalog, /api/store/files/<oid>;
 // the Worker holds the site's key to it, and the editor never calls the store itself): each app of its catalog with
 // its id, its version and the version of the contract it is written to (APP_API), its name, who made it, its icon
@@ -190,10 +190,10 @@ export type StoreRecord = { version: string; ref: string; files: StoreFile[] };
 /** The store's address in the editor, under "Indstillinger" (its apps; its themes at STORE_THEMES), its address
  * before (STORE_BEFORE, which opens it, App.tsx MOVED), and that of a developer's page (DEVELOPER_ROUTE/<slug>); no
  * app can have the ids of the last two. */
-export const STORE_ROUTE = 'indstillinger/appstore';
-export const STORE_THEMES = 'indstillinger/appstore/temaer';
+export const STORE_ROUTE = 'settings/appstore';
+export const STORE_THEMES = 'settings/appstore/themes';
 export const STORE_BEFORE = 'apps/butik';
-export const DEVELOPER_ROUTE = 'apps/udvikler';
+export const DEVELOPER_ROUTE = 'apps/developer';
 
 /** An app's folder in the site, and the note in it of where it came from. */
 export const appFolder = (id: string) => `${config.apps.folder}/${id}`;

package/src/tagUses.d.mts

@@ -11,7 +11,7 @@ export function promotionTags(d: Record<string, unknown>): string[];
  */
 export function tagUses<F extends TagFile>(files: F[], folders: TagFolders): Map<string, Map<string, F>>;
 /**
- * A file record's use of a tag: the Filer address the file record is for, as a path under filer/.
+ * A file record's use of a tag: the Filer address the file record is for, as a path under files/.
  * @param {TagFile} file
  * @param {string} folder the file records folder
  * @returns {{ path: string; name: string } | null}

package/src/tagUses.mjs

@@ -87,7 +87,7 @@ export function tagUses(files, folders) {
 }
 
 /**
- * A file record's use of a tag: the Filer address the file record is for, as a path under filer/.
+ * A file record's use of a tag: the Filer address the file record is for, as a path under files/.
  * @param {TagFile} file
  * @param {string} folder the file records folder
  * @returns {{ path: string; name: string } | null}
@@ -95,7 +95,7 @@ export function tagUses(files, folders) {
 export function recordUse(file, folder) {
   const record = folder !== undefined && isRecordPath(file.path, folder) ? parseRecord(file.text) : null;
   if (!record) return null;
-  return { path: `filer${record.src}`, name: record.src.slice(record.src.lastIndexOf('/') + 1) };
+  return { path: `files${record.src}`, name: record.src.slice(record.src.lastIndexOf('/') + 1) };
 }
 
 /**

package/src/tagUses.test.mjs

@@ -127,7 +127,7 @@ test('taggedWith lists the file records with a tag in their categories', () => {
 
 test('recordUse gives the Filer path and the file name of a file record', () => {
   assert.deepEqual(recordUse(andromeda, 'src/data/files'), {
-    path: 'filer/images/uploads/2026/10/andromeda.webp',
+    path: 'files/images/uploads/2026/10/andromeda.webp',
     name: 'andromeda.webp',
   });
 });

package/src/ui.tsx

@@ -1,7 +1,7 @@
 // The editor's parts: every button, field, switch, chip and row a screen is made of, each with one
 // look, set here. A screen uses these and never writes the classes of a button or a field itself
 // (CLAUDE.md), so the editor looks the same everywhere and a change here changes it everywhere. They
-// are all shown, in every state, on the screen #udseende/dele (Parts.tsx). The screen itself, with its top bar,
+// are all shown, in every state, on the screen #appearance/parts (Parts.tsx). The screen itself, with its top bar,
 // is Screen.tsx.
 import {
   useEffect,
@@ -1096,7 +1096,7 @@ const PAGE_STATES: PageState[] = ['published', 'draft', 'unlisted', 'scheduled']
  * menu links to it and its date. */
 export type Pickable = { value: string; label: string; state?: PageState; inMenu?: boolean; date?: string };
 
-type PickSort = 'nyeste' | 'aeldste' | 'az' | 'za';
+type PickSort = 'newest' | 'oldest' | 'az' | 'za';
 type InMenu = '' | 'in' | 'out';
 
 /** The order and the filters of a sheet of choices (PagePicker, MultiChoice), as over the lists: the arrows with A–Å and
@@ -1106,7 +1106,7 @@ type InMenu = '' | 'in' | 'out';
  * and `arrange` orders and filters choices. */
 export function usePickTools(all: Pickable[], keep: string) {
   const dated = all.some((o) => o.date);
-  const sorts: PickSort[] = dated ? ['nyeste', 'aeldste', 'az', 'za'] : ['az', 'za'];
+  const sorts: PickSort[] = dated ? ['newest', 'oldest', 'az', 'za'] : ['az', 'za'];
   const sortKey = `editor-sort-valg-${keep}`;
   const [savedSort, setSort] = useState<PickSort | null>(() => {
     try {
@@ -1151,8 +1151,8 @@ export function usePickTools(all: Pickable[], keep: string) {
 
   const byDate = (a: Pickable, b: Pickable) => (b.date ?? '').localeCompare(a.date ?? '');
   const compare: Record<PickSort, (a: Pickable, b: Pickable) => number> = {
-    nyeste: (a, b) => byDate(a, b) || byText(a.label, b.label),
-    aeldste: (a, b) => byDate(b, a) || byText(a.label, b.label),
+    newest: (a, b) => byDate(a, b) || byText(a.label, b.label),
+    oldest: (a, b) => byDate(b, a) || byText(a.label, b.label),
     az: (a, b) => byText(a.label, b.label),
     za: (a, b) => byText(b.label, a.label),
   };
@@ -2740,11 +2740,11 @@ function MainRail({ label, onOpen, children }: { label: string; onOpen: () => vo
 // menu button. The header cell starts at the drawer items' outer edge: the row has no start padding, and the header (the
 // account row, the back row) brings the items' inline padding itself, so its pill (editor.css, .editor-main-drawer-header)
 // has the shape of an item's and the avatar or arrow stands over the items' icons. The button is centred on the 1.5rem box
-// of the items' trailing arrows (a negative end margin from the button's own width). A divider (middle inset) stands under the row.
+// of the items' trailing arrows (a negative end margin from the button's own width). The row is the top bar's height (`--top-app-bar-height`), so the divider (middle inset) under it stands level with the top bar's line.
 function MainDrawerMenuButton({ onClick, header }: { onClick: () => void; header?: ReactNode }) {
   return (
     <>
-      <div className="editor-main-drawer-header mt-2 mb-3 flex items-center gap-1 p-(--navigation-drawer-item-padding,0_1rem) py-0 ps-0">
+      <div className="editor-main-drawer-header flex min-h-(--top-app-bar-height,4rem) items-center gap-1 p-(--navigation-drawer-item-padding,0_1rem) py-0 ps-0">
         <div className="min-w-0 flex-1">{header}</div>
         <MenuButton label={t.library.closeMenu} open onClick={onClick} className="-me-[calc((var(--icon-button-width)-1.5rem)/2)]" />
       </div>

package/theme/layouts/Base.astro

@@ -164,7 +164,7 @@ const jsonLd = {
   </head>
   <body class="flex min-h-dvh flex-col">
     <a
-      href="#hovedindhold"
+      href="#main-content"
       class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:rounded-full focus:bg-accent focus:px-4 focus:py-2 focus:text-on-accent"
     >
       {siteT.theme.skipToContent}
@@ -172,7 +172,7 @@ const jsonLd = {
 
     <Header />
 
-    <main id="hovedindhold" class="flex-1">
+    <main id="main-content" class="flex-1">
       <slot />
     </main>