@morphemecms/cms 0.5.0 → 0.7.0

package/site/materialSymbols.mjs

@@ -0,0 +1,19 @@
+// The Material Symbols (Outlined) files as the module `virtual:material-symbols-ssr`, answered by themePlugin (theme.mjs):
+// all of them as text on the server render (so a backup icon, icon.tsx, is in the built page's HTML at once), nothing in the browser
+// (where src/materialIcons.ts is the one lazy chunk). Exposes MATERIAL_SSR and materialSsrModule(). Reads @material-symbols/svg-400.
+import { readdirSync, readFileSync } from 'node:fs';
+import { pathToFileURL } from 'node:url';
+
+/** The virtual module's id as imported (packages/editor/src/icon.tsx). */
+export const MATERIAL_SSR = 'virtual:material-symbols-ssr';
+
+/** The module's source: `{ '/node_modules/@material-symbols/svg-400/outlined/<name>.svg': '<svg …>' }`, the keys as
+ * import.meta.glob names them (src/materialIcons.ts). With `ssr` false: an empty object. */
+export function materialSsrModule(ssr) {
+  if (!ssr) return 'export default {};';
+  const dir = new URL('node_modules/@material-symbols/svg-400/outlined/', pathToFileURL(`${process.cwd()}/`));
+  const files = {};
+  for (const name of readdirSync(dir))
+    if (name.endsWith('.svg')) files[`/node_modules/@material-symbols/svg-400/outlined/${name}`] = readFileSync(new URL(name, dir), 'utf8');
+  return `export default ${JSON.stringify(files)};`;
+}

package/site/sections.ts

@@ -1,3 +1,3 @@
 // The space above a section of the blog page and the 404 page (packages/editor/site/standardPages.ts): less above the first, right
 // under the page's header.
-export const space = (i: number) => (i === 0 ? 'mt-10 md:mt-14' : 'mt-16 md:mt-24');
+export const space = (i: number) => (i === 0 ? 'mt-10 medium:mt-14' : 'mt-16 medium:mt-24');

package/site/theme.d.mts

@@ -66,7 +66,7 @@ export function themePlugin(): {
         optimizeDeps?: undefined;
     };
     resolveId(source: any, importer: any): string | null;
-    load(id: any): string | null;
+    load(id: any, options: any): string | null;
 };
 /** What a block is missing to be drawn from its view (packages/editor/src/standard/view.tsx): a standard block's
  * contract its view.ts and load.ts, an app's block (src/apps/<app>/blocks/<type>/) its viewOf.ts, load.ts and View.tsx; and the

package/site/theme.mjs

@@ -11,6 +11,7 @@ import { fileURLToPath, pathToFileURL } from 'node:url';
 import { svgParts } from '@morphemecms/cms/lib/svg.mjs';
 import { declarationProblems, ownerId } from '@morphemecms/cms/lib/licenses.mjs';
 import { installedPacks, isIconName, packFolder, packProblems, phosphorFile, svgProblems, usedIcons } from './icons.mjs';
+import { MATERIAL_SSR, materialSsrModule } from './materialSymbols.mjs';
 import { ICON_PACK_FILE, ICON_PACK_LICENSE, SYSTEM_PACKS, THEME_PACKS_FOLDER, packInUse, packTheme, themePackId } from './iconPacks.mjs';
 import { MOTION_SCHEMES } from '@morphemecms/cms/lib/motion-schemes.mjs';
 import { storeImportProblems } from './storeTheme.mjs';
@@ -226,6 +227,7 @@ const PHOSPHOR_REACT = '@phosphor-icons/react';
 const PHOSPHOR_FILE = /@phosphor-icons\/core\/assets\/(?:regular|fill)\/([a-z0-9-]+)\.svg\?raw$/;
 const REACT_ICONS = '\0site-theme-icons';
 const FILE_ICON = '\0site-theme-icon:';
+const MATERIAL_SSR_ID = `\0${MATERIAL_SSR}`;
 
 /** The React component's name of a Phosphor icon by its file's name (`caret-right` → CaretRight), when Phosphor has it. */
 const reactName = (name) => {
@@ -455,6 +457,8 @@ export const aliases = () => ({
  * pack and no icons of its own nothing is changed. The pack is read when the site is built, so a new choice
  * (src/data/icons.json) or theme is in the site and the editor after the next build. */
 export function themePlugin() {
+  // With forward slashes, as Vite writes ids: on Windows a mixed id (C:\…\theme\components/MobileNav.astro) hides a
+  // component's script from Astro, which looks it up with forward slashes.
   const themes = [activeTheme(), STANDARD_THEME].map((t) => fileURLToPath(new URL(`${themeFolder(t)}/`, root)).replaceAll('\\', '/'));
   const icons = themeIcons();
   const own = Object.keys(icons).length > 0;
@@ -467,6 +471,7 @@ export function themePlugin() {
       // The theme's icons import Phosphor's own.
       if (source === PHOSPHOR_REACT) return own && importer !== REACT_ICONS ? REACT_ICONS : null;
       if (source === ALL_ICONS) return '\0' + ALL_ICONS;
+      if (source === MATERIAL_SSR) return MATERIAL_SSR_ID;
       const icon = source.match(PHOSPHOR_FILE)?.[1];
       if (icon) return svgParts(icons[icon]) ? FILE_ICON + icon : null;
       if (source.startsWith('@site/')) return siteFile(source.slice('@site/'.length));
@@ -479,7 +484,8 @@ export function themePlugin() {
           if (statSync(dir + file + ext, { throwIfNoEntry: false })?.isFile()) return dir + file + ext;
       return null;
     },
-    load(id) {
+    load(id, options) {
+      if (id === MATERIAL_SSR_ID) return materialSsrModule(options?.ssr);
       if (id === REACT_ICONS) return reactIcons(icons);
       if (id === '\0' + ALL_ICONS)
         return allIconsModule(fileURLToPath(new URL('node_modules/@phosphor-icons/core/assets/regular/', root)), icons);

package/src/ActionParts.tsx

@@ -187,7 +187,7 @@ export default function ActionParts() {
                 <SiteFabMenu key={size} size={size} icon="chats" label={say.contact} closeLabel={say.close} items={fabItems} />
               ))}
             </div>
-            <div className="grid gap-6 sm:grid-cols-2">
+            <div className="grid gap-6 medium:grid-cols-2">
               {fabMenuKinds.map((kind) => (
                 <div key={kind} className="flex justify-end pt-52">
                   <SiteFabMenu kind={kind} icon="chats" label={say.contact} closeLabel={say.close} items={fabItems} open />

package/src/Advanced.tsx

@@ -3,10 +3,13 @@
 // saved at once in its own commit. Off, the Worker asks GitHub for everything. It can only be turned on when Cloudflare
 // has the bucket (the Worker asks, /api/r2), else a deploy would fail; under the switch, why not, and, until the site is
 // built with the change, that it comes then. Above it, where the bucket is kept ("Placering": placed by Cloudflare, or
-// within the EU), changed only while it is off, also in its own commit.
+// within the EU, a MenuRow with the choice in a dropdown at the right), changed only while it is off, also in its own commit. Under it, the two build switches ("Builds":
+// fast content builds, paid build plan) in src/data/build.json (buildSettings.ts), each saved at once in its own commit. The paid
+// build plan can only be turned on when Cloudflare says the account has Workers Paid (the Worker asks, /api/plan); under it, why not.
 import { useEffect, useState } from 'react';
+import { ArrowSquareOut } from '@phosphor-icons/react';
 import Screen from './Screen';
-import { EmptyNote, FormField, GroupTitle, ProblemNote, SegmentedButton, SupportingText, SwitchRow } from './ui';
+import { EmptyNote, GroupTitle, LinkButton, MenuRow, ProblemNote, SupportingText, SwitchRow } from './ui';
 import { ConflictError, type RepoFile } from './github';
 import type { Env } from './App';
 import { savedText } from './deploy';
@@ -17,12 +20,16 @@ import {
   jurisdictionName,
   jurisdictionOf,
   r2CachingOn,
+  planStatus,
   r2Status,
   withJurisdiction,
   withR2Caching,
   type BucketState,
+  type PaidState,
 } from './r2Caching';
 import { config } from '@site/editor';
+import { buildSettingsOf, withBuildSetting, type BuildSetting } from './buildSettings';
+import { BUILD_SETTINGS_PATH } from '../lib/build-settings.mjs';
 import { siteT, t } from './i18n';
 
 export const ADVANCED_ROUTE = 'avanceret';
@@ -30,12 +37,21 @@ export const ADVANCED_ROUTE = 'avanceret';
 // "Placering" when Cloudflare places the bucket (no jurisdiction).
 const AUTO = 'auto';
 
+// Cloudflare's dashboard sends on to the account's Billing page.
+const BILLING_URL = 'https://dash.cloudflare.com/?to=/:account/billing';
+
 export default function Advanced({ env }: { env: Env }) {
   const [file, setFile] = useState<RepoFile | null>(null);
   const [status, setStatus] = useState<{ bound: boolean; bucket: BucketState } | null>(null);
+  // The build settings file: undefined while it loads, null when the site has none yet (the defaults apply).
+  const [build, setBuild] = useState<RepoFile | null | undefined>(undefined);
+  // What Cloudflare says of the account's plan: null while it is asked.
+  const [paid, setPaid] = useState<PaidState | null>(null);
+  const [buildProblem, setBuildProblem] = useState('');
   const [problem, setProblem] = useState('');
   const [saving, setSaving] = useState(false);
   useEffect(() => {
+    planStatus().then(setPaid);
     env
       .load([config.wrangler])
       .then(([found]) => {
@@ -44,6 +60,10 @@ export default function Advanced({ env }: { env: Env }) {
         ask(found.text);
       })
       .catch((e) => setProblem(t.advanced.notLoaded((e as Error).message)));
+    env
+      .load([BUILD_SETTINGS_PATH])
+      .then(([found]) => setBuild(found ?? null))
+      .catch((e) => setBuildProblem(t.advanced.buildSettingsNotLoaded((e as Error).message)));
   }, []);
 
   // What Cloudflare says of the bucket the settings name, where they say it is kept.
@@ -74,26 +94,64 @@ export default function Advanced({ env }: { env: Env }) {
     ...(jurisdiction && !(JURISDICTIONS as readonly string[]).includes(jurisdiction) ? [jurisdiction] : []),
   ];
 
-  async function save(text: string, message: string, change: string): Promise<boolean> {
-    if (!file) return false;
-    const path = file.path;
+  // Saves one file as its own commit (`oid` null: a new file); the file as saved, or null when it was not.
+  async function commitFile(path: string, oid: string | null, text: string, message: string, change: string): Promise<RepoFile | null> {
     setSaving(true);
     env.notify({ text: t.common.saving });
     try {
-      const oids = await env.commit(message, [{ path, content: text, oid: file.oid }], change);
+      const oids = await env.commit(message, [{ path, content: text, oid }], change);
       const saved = { path, oid: oids[path], text };
-      setFile(saved);
       env.onSaved(saved);
       env.notify({ text: savedText(change), kind: 'saved' });
-      return true;
+      return saved;
     } catch (e) {
       env.notify({ text: e instanceof ConflictError ? e.message : t.common.notSaved((e as Error).message), error: true, kind: 'failed' });
-      return false;
+      return null;
     } finally {
       setSaving(false);
     }
   }
 
+  async function save(text: string, message: string, change: string): Promise<boolean> {
+    if (!file) return false;
+    const saved = await commitFile(file.path, file.oid, text, message, change);
+    if (saved) setFile(saved);
+    return !!saved;
+  }
+
+  const settings = buildSettingsOf(build?.text);
+  const buildSwitches: { key: BuildSetting; label: string; hint: string; change: string; commit: (on: boolean) => string }[] = [
+    {
+      key: 'contentLane',
+      label: t.advanced.fastContentBuilds,
+      hint: t.advanced.fastContentBuildsHint,
+      change: t.app.changes.fastContentBuilds,
+      commit: siteT.advanced.fastContentBuildsCommit,
+    },
+    {
+      key: 'paidBuilds',
+      label: t.advanced.paidBuilds,
+      hint: t.advanced.paidBuildsHint,
+      change: t.app.changes.paidBuilds,
+      commit: siteT.advanced.paidBuildsCommit,
+    },
+  ];
+
+  // Paid builds are off until Cloudflare says the account has Workers Paid; on, they can always be turned off.
+  const paidLocked = (key: BuildSetting, on: boolean) => key === 'paidBuilds' && !on && paid !== 'yes';
+
+  async function turnBuild(key: BuildSetting, next: boolean, commit: (on: boolean) => string, change: string) {
+    if (build === undefined || (next && paidLocked(key, settings[key]))) return;
+    const saved = await commitFile(
+      BUILD_SETTINGS_PATH,
+      build?.oid ?? null,
+      withBuildSetting(build?.text, key, next),
+      commit(next),
+      t.app.changes[next ? 'turnedOn' : 'turnedOff'](change),
+    );
+    if (saved) setBuild(saved);
+  }
+
   async function turn(next: boolean) {
     if (!file || on === null || (next && !ready)) return;
     await save(
@@ -124,17 +182,14 @@ export default function Advanced({ env }: { env: Env }) {
             <ProblemNote>{t.advanced.noLine}</ProblemNote>
           ) : (
             <>
-              <div className="mb-6">
-                <FormField label={t.advanced.place} hint={t.advanced.placeHint}>
-                  <SegmentedButton
-                    label={t.advanced.place}
-                    value={jurisdiction ?? AUTO}
-                    options={places.map((p) => ({ value: p, label: p === AUTO ? t.advanced.placeAuto : jurisdictionName(p) }))}
-                    disabled={saving || on}
-                    onChange={place}
-                  />
-                </FormField>
-              </div>
+              <MenuRow
+                label={t.advanced.place}
+                hint={t.advanced.placeHint}
+                value={jurisdiction ?? AUTO}
+                options={places.map((p) => ({ value: p, label: p === AUTO ? t.advanced.placeAuto : jurisdictionName(p) }))}
+                disabled={saving || on}
+                onChange={place}
+              />
               <SwitchRow
                 label={t.blockSettings.active}
                 texts={[t.library.on, t.library.off]}
@@ -147,6 +202,32 @@ export default function Advanced({ env }: { env: Env }) {
           )}
         </div>
       </section>
+      <section className="mb-8">
+        <GroupTitle>{t.advanced.builds}</GroupTitle>
+        <div className="px-4">
+          {buildProblem ? (
+            <ProblemNote>{buildProblem}</ProblemNote>
+          ) : (
+            <>
+              {buildSwitches.map(({ key, label, hint, change, commit }) => (
+                <SwitchRow
+                  key={key}
+                  label={label}
+                  hint={hint}
+                  texts={[t.library.on, t.library.off]}
+                  selected={settings[key]}
+                  disabled={saving || build === undefined || paidLocked(key, settings[key])}
+                  onChange={(next) => turnBuild(key, next, commit, change)}
+                />
+              ))}
+              {paid && !settings.paidBuilds && paid !== 'yes' && <SupportingText className="mt-2">{t.advanced.plan[paid]}</SupportingText>}
+              <LinkButton href={BILLING_URL} target="_blank" rel="noopener" kind="text" size="small" icon={ArrowSquareOut}>
+                {t.advanced.billing}
+              </LinkButton>
+            </>
+          )}
+        </div>
+      </section>
     </Screen>
   );
 }

package/src/App.tsx

@@ -1,19 +1,19 @@
 // The editor at /editor/ (docs/editor.md): sign in with GitHub, pick a part of the site, edit and
-// save. The address after # says what is open, so reloading keeps it:
+// save. The layout: the full-height navigation rail or drawer (MainMenu.tsx) with, beside it, the top bar (topBarSlot.tsx) over the screen. The address after # says what is open, so reloading keeps it:
 //   (empty)          the start page
 //   liste/<id>       the list of a part, e.g. liste/priser, and liste/<id>/<app> a tab an installed app adds to it
 //                    (AppDefinition.tabs): liste/cookies/cookiescanner
 //   header           what is in the header on every page (the menu)
 //   lister           the short lists (the testimonials, the apps' lists)
-//   indstillinger    the settings of the whole site (Library.tsx Settings), opened by the gear in the top bar:
-//                    indstillinger/appstore the app store, its apps, and indstillinger/appstore/temaer its themes (AppList.tsx StorePage)
+//   indstillinger/appstore   the app store, its apps, and indstillinger/appstore/temaer its themes (AppList.tsx StorePage); the
+//                    other settings are screens of their own, in the drawer's last section (MainMenu.tsx)
 //   ny/<id>          a new entry, ny/<id>/<kind> one of a kind (a pop-up: standard, or an app's)
 //   virksomheden     the business, and virksomheden/<part> its parts: kontakt, betaling; and
 //                    virksomheden/betaling/<part> its own parts: mobilepay, bank
 //   <screen>         a screen with parts of the site's own (partScreens), and <screen>/<part> its parts:
 //                    privatliv/cookiebanner, privatliv/privatlivssider, or one of the editor's own screens (Part.opens):
 //                    privatliv/samtykker the visitors' answers in the cookie banner (Consents.tsx); and the settings of the apps installed with
-//                    its category: maaling/google-analytics, promovering/calendly
+//                    its category: maaling/google-analytics
 //   filer            the uploaded pictures, PDFs, videos and zip files (Media.tsx)
 //   seo              "Søgemaskineoptimering" (Library.tsx Seo): seo/videresendelser the redirects' two lists
 //                    (Redirects.tsx): seo/videresendelser/alle the redirects, and seo/videresendelser/ikke-fundet
@@ -138,10 +138,8 @@ import {
   List,
   Lists,
   PartsHome,
-  partsIn,
   PartsScreen,
   Seo,
-  Settings,
   Start,
   Theme,
   ThemePage,
@@ -150,24 +148,14 @@ import {
   MotionSchemes,
   motionOf,
 } from './Library';
-import {
-  appearance,
-  asWritten,
-  blockParts,
-  collections,
-  companyParts,
-  groups,
-  icons,
-  listRowsOf,
-  lists,
-  partScreens,
-  seoParts,
-} from './site';
-import { config, header, relationsOf, type SiteData, siteName, siteOf, testimonialsOf, usedBy, whatIsAt } from '@site/editor';
+import { appearance, asWritten, blockParts, collections, companyParts, listRowsOf, partScreens, seoParts } from './site';
+import { config, relationsOf, type SiteData, siteName, siteOf, testimonialsOf, usedBy, whatIsAt } from '@site/editor';
 import { themes } from './themes';
 import Screen from './Screen';
-import { Button, EmptyNote, NavigationRail, NavigationRailItem, NavigationRailSection, ProblemNote, startRipples } from './ui';
-import { setSidebar, useSidebar } from './sidebar';
+import { Button, EmptyNote, ProblemNote, startRipples } from './ui';
+import { useMenuOpen } from './menuOpen';
+import { MainMenu } from './MainMenu';
+import { TopBarLayout } from './topBarSlot';
 import { Ask, ask } from './ask';
 import { LinkAsk } from './LinkSheet';
 import { type ListRows, type Option, type TestimonialRow } from './fields';
@@ -285,6 +273,10 @@ const MOVED: Record<string, string> = {
   videresendelser: 'seo/videresendelser',
   'videresendelser/alle': 'seo/videresendelser/alle',
   'videresendelser/ikke-fundet': 'seo/videresendelser/ikke-fundet',
+  // The settings of the booking and newsletter apps were on a screen "Promovering"; they are on the apps' own pages now.
+  promovering: 'apps',
+  'promovering/calendly': 'apps/calendly/indstillinger',
+  'promovering/mailchimp': 'apps/mailchimp/indstillinger',
   [STORE_BEFORE]: STORE_ROUTE,
   [`${STORE_BEFORE}/temaer`]: STORE_THEMES,
 };
@@ -317,11 +309,6 @@ function Editor() {
   // Whether someone is signed in (the Worker keeps the sign-in, packages/editor/worker/session.js): null until the Worker or this
   // browser's copy of the files (cache.ts) has said.
   const [signedIn, setSignedIn] = useState<boolean | null>(null);
-  // Whether the sidebar is open on a computer (sidebar.ts).
-  const sidebar = useSidebar();
-  // While it is closed: the mouse over the rail, which then shows the whole sidebar over the content.
-  const [peek, setPeek] = useState(false);
-  const peekTimer = useRef(0);
   const [user, setUser] = useState<Viewer | null>(null);
   const [files, setFiles] = useState<RepoFile[] | null>(null);
   const [error, setError] = useState('');
@@ -329,10 +316,11 @@ function Editor() {
   // Counts the visits to an address: a form starts fresh on each, but not when a new entry that was
   // just saved gets its own address.
   const [visit, setVisit] = useState(0);
-  // The messages at the bottom stand in the middle of the content, next to the sidebar (editor.css).
+  // The messages at the bottom and the save bar stand next to the standard drawer while it is open (editor.css).
+  const { open: menuOpen } = useMenuOpen();
   useEffect(() => {
-    document.documentElement.dataset.sidebar = sidebar ? 'open' : 'closed';
-  }, [sidebar]);
+    document.documentElement.dataset.sidebar = menuOpen ? 'open' : 'closed';
+  }, [menuOpen]);
   // Stops waiting for the last save to be on the site.
   const stopWaiting = useRef<() => void>(undefined);
   // What the saves the editor waits for the website to have changed (save).
@@ -679,97 +667,35 @@ function Editor() {
     );
   }
 
-  // The part of the site that is open, for the sidebar: the menu under "Header", the lists and testimonials under
-  // "Lister", the front page under "Udseende".
-  const open = collectionOf(collections, route)?.collection;
-  const part = open?.id || route.replace(/^(liste|ny|slettet)\/([^/]+).*/, '$2');
-  const current = lists.includes(part)
-    ? 'lister'
-    : header.includes(part)
-      ? 'header'
-      : part.startsWith('virksomheden')
-        ? 'virksomheden'
-        : part.startsWith('blokke')
-          ? 'blokke'
-          : part.startsWith('udseende')
-            ? 'udseende'
-            : part.startsWith('seo')
-              ? 'seo'
-              : part.startsWith('apps')
-                ? 'apps'
-                : (partScreens.find((s) => part.startsWith(`${s.id}/`))?.id ?? part);
-
   return (
     <>
-      <div className="md:flex">
-        {/* On a computer: the parts of the site in the theme's navigation rail, expanded and collapsed with its menu
-          button; under it, while expanded, the logo and the name, which go to the start screen (the account is in the
-          top bar, Screen.tsx). Collapsed, the mouse over it shows it expanded over the content for a moment (a short wait
-          first, so passing over it does not), until the mouse leaves. On a phone, the start screen is the menu. */}
-        <aside
-          className="sticky top-0 z-30 hidden h-dvh shrink-0 pt-[env(safe-area-inset-top)] md:flex"
-          onPointerEnter={(e) => {
-            if (sidebar || e.pointerType !== 'mouse') return;
-            peekTimer.current = window.setTimeout(() => setPeek(true), 150);
-          }}
-          onPointerLeave={() => {
-            clearTimeout(peekTimer.current);
-            setPeek(false);
-          }}
-        >
-          <NavigationRail
-            label={t.library.sidebar}
-            menuLabel={sidebar ? t.library.closeSidebar : t.library.openSidebar}
-            expanded={sidebar}
-            peek={peek}
-            onExpandedChange={(open) => {
-              setPeek(false);
-              setSidebar(open);
-            }}
-            header={
-              <a href="#" className="flex min-w-0 items-center gap-3 font-semibold">
-                <img src="/editor/icon-192.png" alt="" className="size-7 shrink-0 rounded-lg" />
-                <span className="truncate">{siteName}</span>
-              </a>
-            }
-          >
-            {groups.map((g) => (
-              <NavigationRailSection key={g.title} label={g.title}>
-                {partsIn(g.ids, files ?? []).map(({ id, label, href, count }) => (
-                  <NavigationRailItem
-                    key={id}
-                    href={href}
-                    icon={icons[id]}
-                    label={label}
-                    count={files ? count : null}
-                    selected={current === id}
-                  />
-                ))}
-              </NavigationRailSection>
-            ))}
-          </NavigationRail>
-        </aside>
-
-        <div className="min-w-0 flex-1">
-          {files ? (
-            <>
-              {user && !user.canSave && (
-                <p className="bg-accent px-4 py-3 pt-[calc(0.75rem+env(safe-area-inset-top))] text-center text-sm text-on-accent">
-                  {t.app.cannotSave(user.login)}
-                </p>
-              )}
+      <TopBarLayout
+        aside={<MainMenu route={route} files={files} />}
+        above={
+          files &&
+          user &&
+          !user.canSave && (
+            <p className="bg-accent px-4 py-3 pt-[calc(0.75rem+env(safe-area-inset-top))] text-center text-sm text-on-accent">
+              {t.app.cannotSave(user.login)}
+            </p>
+          )
+        }
+      >
+        <>
+          <div className="editor-content min-w-0 flex-1">
+            {files ? (
               <Page key={visit} route={route} files={files} env={env} user={user} builtAt={builtAt} onLogout={signOut} />
-            </>
-          ) : (
-            <Screen title={siteName}>
-              <EmptyNote busy={!error}>{error || t.app.loading}</EmptyNote>
-            </Screen>
-          )}
-        </div>
-
-        <LinkAsk groups={linkGroups} />
-        <Ask />
-      </div>
+            ) : (
+              <Screen title={siteName}>
+                <EmptyNote busy={!error}>{error || t.app.loading}</EmptyNote>
+              </Screen>
+            )}
+          </div>
+
+          <LinkAsk groups={linkGroups} />
+          <Ask />
+        </>
+      </TopBarLayout>
     </>
   );
 }
@@ -809,15 +735,15 @@ function formAt(route: string, files: RepoFile[]): { part: Part; at: string; pag
 type PageProps = { route: string; files: RepoFile[]; env: Env; user: Viewer | null; builtAt: Date | null; onLogout: () => void };
 
 function Page({ route, files, env, user, builtAt, onLogout }: PageProps) {
-  if (!route) return <Start files={files} builtAt={builtAt} />;
+  if (!route) return <Start builtAt={builtAt} />;
   if (route === 'konto') return <Account user={user} files={files} onLogout={onLogout} />;
   if (route === 'notifikationer') return <Notifications />;
-  if (route === 'indstillinger') return <Settings files={files} />;
   if (route === 'header') return <Header files={files} />;
   if (route === 'lister') return <Lists files={files} />;
   if (route === 'virksomheden') return <Company files={files} />;
   if (route === 'blokke') return <Blocks files={files} />;
-  if (route === 'filer') return <Media files={files} env={env} />;
+  if (route === 'filer' || route.startsWith('filer/'))
+    return <Media key={route} files={files} env={env} open={route === 'filer' ? undefined : '/' + route.slice('filer/'.length)} />;
   if (route === 'seo') return <Seo />;
   if (route === REDIRECTS_ROUTE) return <Redirects env={env} />;
   if (route === SEO_SCORES_ROUTE) return <SeoScores files={files} env={env} />;

package/src/AppList.tsx

@@ -1,5 +1,5 @@
 // "Indstillinger" › "Apps" (#apps): the apps installed (src/apps/, apps.ts: the site's own and those from the app store,
-// with one from the store not yet built as "Installeres …"), each with who made it under its name and, from the store,
+// with one from the store not yet built as "Installeres…"), each with who made it under its name and, from the store,
 // that it has a newer version, with search (by name, who made it and what it does), the order (A–Å, Å–A, kept in this
 // browser) and headings by the first letter, as the lists under "Indhold" have. "Indstillinger" › "Appstore"
 // (#indstillinger/appstore): all apps, those in the app store (store.ts) and the site's own, installed or not, with search (by name, what they

package/src/BlockParts.tsx

@@ -291,7 +291,7 @@ function ButtonParts() {
  * prefix and a suffix, the error's icon, a password with its button, a counter, read-only, and several lines (growing,
  * and three rows); and a checkbox empty, ticked, with a line, disabled, indeterminate and wrong. */
 function FieldParts() {
-  const fields = 'grid gap-6 sm:grid-cols-2';
+  const fields = 'grid gap-6 medium:grid-cols-2';
   return (
     <>
       <Part name="TextField" use={screens.textField}>
@@ -380,7 +380,7 @@ function CardParts() {
     <>
       <Part name="Card" use={say.card}>
         <Preview>
-          <div className="grid gap-4 p-4 sm:grid-cols-2">
+          <div className="grid gap-4 p-4 medium:grid-cols-2">
             {cardKinds.map((k) => (
               <SiteCard key={k} kind={k}>
                 <p className="font-medium">{say.kinds[k]}</p>
@@ -402,7 +402,7 @@ function CardParts() {
       </Part>
       <Part name="List" use={say.list}>
         <Preview>
-          <div className="grid items-start gap-4 p-4 lg:grid-cols-2">
+          <div className="grid items-start gap-4 p-4 expanded:grid-cols-2">
             <SiteCard>
               <SiteList>
                 <SiteListItem headline={one} />

package/src/Colors.tsx

@@ -359,7 +359,7 @@ export default function Colors({ env, files, fallback }: { env: Env; files: Repo
           first={preview(mode)}
           main={
             <>
-              <div className="grid gap-5 sm:grid-cols-2">
+              <div className="grid gap-5 medium:grid-cols-2">
                 {colorFields.map((field) => {
                   const id = `color-${mode}-${field.name}`;
                   return (

package/src/CommunicationParts.tsx

@@ -66,7 +66,7 @@ export default function CommunicationParts() {
               </div>
             </Example>
           </div>
-          <SiteNavigationDrawer className="px-3 py-4">
+          <SiteNavigationDrawer>
             <SiteNavigationDrawerRow>
               <SiteNavigationDrawerItem href="">{say.home}</SiteNavigationDrawerItem>
             </SiteNavigationDrawerRow>