@morphemecms/cms 0.0.0-stage → 0.1.0

package/src/Redirects.tsx

@@ -0,0 +1,450 @@
+// "Videresendelser" under Indstillinger › "Søgemaskineoptimering" (#seo/videresendelser): 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
+// (redirects.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,
+// 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
+// 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.
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { ArrowRight, ArrowsDownUp, Funnel, LinkBreak, Plus, Signpost, Trash, X } from '@phosphor-icons/react';
+import { addressOf, escape, REDIRECTS } from './addresses';
+import { ask } from './ask';
+import Screen from './Screen';
+import {
+  Button,
+  InputChip,
+  Choice,
+  Group,
+  IconButton,
+  listClass,
+  SupportingText,
+  SearchRow,
+  useKept,
+  BottomSheet,
+  SheetTitle,
+  TextField,
+  EmptyNote,
+  SheetBody,
+  ProblemNote,
+  ListItem,
+} from './ui';
+import type { Env } from './App';
+import type { RepoFile } from './github';
+import { changesOf, entriesOf, flatten, lookup, readAll, REDIRECT_FILES, setRedirect, type AllRedirects } from './redirects';
+import type { Missing } from './notFound';
+import { when } from './when';
+import { headed, letterOf } from './Sheet';
+import { byText } from './schema';
+import { savedText } from './deploy';
+import { config, whatIsAt } from '@site/editor';
+import { siteT, t } from './i18n';
+
+// An address as typed, as one: "/ny-side/", "/" for the front page, a #part kept, the site's own
+// domain left out; a link to another site as it is. '' when nothing is typed.
+function targetOf(typed: string): string {
+  const text = typed.trim();
+  if (!text) return '';
+  const own = new RegExp(`^https?://(www\\.)?${escape(config.domain)}`, 'i');
+  if (/^https?:\/\//i.test(text) && !own.test(text)) return text;
+  const [path, part] = text.replace(own, '').split('#');
+  const base = path.replace(/\//g, '') === '' ? '/' : addressOf(path, 'page');
+  return base && part ? `${base}#${part}` : base;
+}
+
+// What the owner edits in the sheet: the redirect's address (only for a new one) and where it sends to;
+// missing: the address visitors came to that does not exist, which it sends on.
+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' };
+/** Where "Videresendelser" opens, under "Søgemaskineoptimering". */
+export const REDIRECTS_ROUTE = 'seo/videresendelser';
+
+// 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'}`;
+
+function savedSort(tab: Tab): Sort {
+  try {
+    const s = localStorage.getItem(sortKey(tab)) as Sort | null;
+    if (s && SORTS[tab].includes(s)) return s;
+  } catch {}
+  return SORTS[tab][0];
+}
+
+// An address without its slashes, for the order by address.
+const bare = (path: string) => path.replace(/^\/+|\/+$/g, '');
+
+// tab: the list that is open; without it, "Videresendelser" with the rows that open them.
+export default function Redirects({ env, tab }: { env: Env; tab?: Tab }) {
+  const [files, setFiles] = useState<RepoFile[] | null>(null);
+  const [problem, setProblem] = useState('');
+  useEffect(() => {
+    env
+      .load(REDIRECT_FILES)
+      .then(setFiles)
+      .catch((e) => setProblem(t.redirects.notLoaded((e as Error).message)));
+  }, []);
+  const all = useMemo(() => (files ? readAll(files) : null), [files]);
+  const entries = useMemo(() => (all ? entriesOf(all) : []), [all]);
+  const [query, setQuery] = useKept('videresendelser-soeg', '');
+  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
+  // lists, under "Sider" and "Blogindlæg": the funnel shows only those to one.
+  const [page, setPage] = useState('');
+  const pathOf = (to: string) => to.split('#')[0];
+  const named = [
+    ...[...env.relations.fixed, ...env.relations.pages].map((o) => ({ ...o, group: t.library.pagesGroup })),
+    ...env.relations.blog.map((o) => ({ value: `/${o.value}/`, label: o.label, group: t.redirects.postsGroup })),
+  ];
+  const sendsTo = new Set(entries.map((e) => pathOf(e.to)));
+  const pageChoices = named
+    .filter((o, i) => sendsTo.has(o.value) && named.findIndex((x) => x.value === o.value) === i)
+    .sort((a, b) => (a.group === b.group ? byText(a.label, b.label) : a.group === t.library.pagesGroup ? -1 : 1));
+  const shownPage = pageChoices.length > 1 && pageChoices.some((p) => p.value === page) ? page : '';
+  const pageName = pageChoices.find((p) => p.value === shownPage)?.label ?? '';
+
+  const [sorts, setSorts] = useState<Record<Tab, Sort>>(() => ({ redirects: savedSort('redirects'), missing: savedSort('missing') }));
+  const sort = sorts[tab ?? 'redirects'];
+  function pickSort(next: Sort) {
+    if (!tab) return;
+    setSorts({ ...sorts, [tab]: next });
+    try {
+      localStorage.setItem(sortKey(tab), next);
+    } catch {}
+  }
+  const byFrom = (a: string, b: string) => (sort === 'za' ? -1 : 1) * byText(bare(a), bare(b));
+  const shown = entries
+    .filter((e) => (!q || `${e.from} ${e.to} ${name(e.to)}`.toLowerCase().includes(q)) && (!shownPage || pathOf(e.to) === shownPage))
+    .sort((a, b) => (sort === 'page' ? byText(name(a.to), name(b.to)) || byText(bare(a.from), bare(b.from)) : byFrom(a.from, b.from)));
+  // By address under the first letter (headed, from HEADINGS_FROM); by page in one list.
+  const groups = sort === 'page' ? [{ key: null, items: shown }] : headed(shown, (e) => letterOf(bare(e.from)));
+  // undefined while it loads; null when the site does not keep them.
+  const [missing, setMissing] = useState<Missing[] | null>();
+  const [missingProblem, setMissingProblem] = useState('');
+  useEffect(() => {
+    env.notFound
+      .list()
+      .then(setMissing)
+      .catch((e) => setMissingProblem(t.redirects.missing.notLoaded((e as Error).message)));
+  }, []);
+
+  const dialog = useRef<HTMLDialogElement>(null);
+  const [editing, setEditing] = useState<Editing | null>(null);
+  const [saving, setSaving] = useState(false);
+  const open = (e: Editing) => {
+    setEditing(e);
+    dialog.current?.showModal();
+  };
+
+  // Saves the redirects as they are after a change, in one commit, none through another.
+  async function store(next: AllRedirects, message: string, change: string): Promise<boolean> {
+    const flat = flatten(next);
+    if (typeof flat === 'string') {
+      env.notify({ text: flat, error: true });
+      return false;
+    }
+    const changes = changesOf(flat, files!);
+    if (!changes.length) return true;
+    setSaving(true);
+    env.notify({ text: t.common.saving });
+    try {
+      const oids = await env.commit(message, changes, change);
+      const saved = changes.map((c) => ({ path: c.path, oid: oids[c.path], text: String(c.content) }));
+      setFiles((was) => [...(was ?? []).filter((f) => !saved.some((s) => s.path === f.path)), ...saved]);
+      // The editor's own redirects are among the app's files too.
+      const own = saved.find((f) => f.path === REDIRECTS);
+      if (own) env.onSaved(own);
+      env.notify({ text: savedText(change), kind: 'saved' });
+      return true;
+    } catch (e) {
+      env.notify({ text: t.common.notSaved((e as Error).message), error: true, kind: 'failed' });
+      return false;
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  // The addresses of the pages and posts: a redirect from one would hide it.
+  const pages = [...env.relations.pages, ...env.relations.fixed].map((o) => o.value);
+  const posts = env.relations.blog.map((o) => `/${o.value}/`);
+
+  // The addresses that still do not exist: not a page or a post now, and not sent on.
+  const look = useMemo(() => (all ? lookup(all) : null), [all]);
+  const stillMissing = (missing ?? []).filter((m) => look && !pages.includes(m.path) && !posts.includes(m.path) && !look(m.path));
+  const shownMissing = stillMissing
+    .filter((m) => !q || `${m.path} ${m.from}`.toLowerCase().includes(q))
+    .sort((a, b) => (sort === 'visits' ? b.count - a.count : sort === 'last' ? b.last.localeCompare(a.last) : byFrom(a.path, b.path)));
+  // By address under the first letter; by visits or the last visit in one list.
+  const missingGroups =
+    sort === 'az' || sort === 'za' ? headed(shownMissing, (m) => letterOf(bare(m.path))) : [{ key: null, items: shownMissing }];
+
+  // Takes addresses off the list of those that do not exist.
+  async function forget(paths: string[]): Promise<boolean> {
+    try {
+      await env.notFound.forget(paths);
+      setMissing((was) => was?.filter((m) => !paths.includes(m.path)));
+      return true;
+    } catch (e) {
+      env.notify({ text: t.redirects.missing.notForgotten((e as Error).message), error: true, kind: 'failed' });
+      return false;
+    }
+  }
+
+  async function save() {
+    if (!editing || !all) return;
+    const from = editing.isNew && !editing.missing ? addressOf(editing.from, 'page') : editing.from;
+    const to = targetOf(editing.to);
+    if (!from) return env.notify({ text: t.redirects.noFrom, error: true });
+    if (!to) return env.notify({ text: t.redirects.noTo, error: true });
+    if (to.split('#')[0] === from) return env.notify({ text: t.redirects.toSelf, error: true });
+    if (editing.isNew && (pages.includes(from) || posts.includes(from)))
+      return env.notify({ text: t.redirects.pageHas(from), error: true });
+    if (editing.isNew && entries.some((e) => e.from === from)) return env.notify({ text: t.redirects.alreadyRedirects(from), error: true });
+    const done = await store(
+      setRedirect(all, from, to),
+      editing.isNew ? siteT.redirects.commit.add(from, to) : siteT.redirects.commit.change(from, to),
+      t.app.changes[editing.isNew ? 'added' : 'edited'](t.app.changes.redirect(from)),
+    );
+    if (!done) return;
+    // Sent on: no longer an address that does not exist.
+    if (editing.missing) await forget([from]);
+    dialog.current?.close();
+  }
+
+  async function remove(from: string) {
+    if (!all) return;
+    const via = entries.filter((e) => e.from !== from && e.to.split('#')[0] === from).length;
+    const sure = await ask(t.redirects.deleteAsk(from, via), t.common.delete);
+    if (!sure) return;
+    // First straight to where it ends, so those that went on through it keep going there.
+    const flat = flatten(all);
+    if (typeof flat === 'string') return env.notify({ text: flat, error: true });
+    const change = t.app.changes.deleted(t.app.changes.redirect(from));
+    if (await store(setRedirect(flat, from, null), siteT.redirects.commit.delete(from), change)) dialog.current?.close();
+  }
+
+  async function drop(path: string) {
+    if (await forget([path])) {
+      dialog.current?.close();
+      env.notify({ text: t.redirects.missing.forgotten, kind: 'saved' });
+    }
+  }
+
+  const to = editing ? targetOf(editing.to) : '';
+  const m = editing?.missing;
+  if (!tab) {
+    const rows = [
+      { tab: 'redirects' as const, label: t.redirects.all, icon: Signpost, count: files ? entries.length : null },
+      { 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={{ href: '#seo', label: t.common.parts.seo }}>
+        {problem && <ProblemNote>{problem}</ProblemNote>}
+        <Group>
+          {rows.map((r) => (
+            <ListItem key={r.tab} href={`#${TAB_ROUTES[r.tab]}`} icon={r.icon} headline={r.label} count={r.count} arrow />
+          ))}
+        </Group>
+      </Screen>
+    );
+  }
+  return (
+    <Screen
+      title={tab === 'redirects' ? t.redirects.all : t.redirects.missing.title}
+      wide
+      back={{ href: `#${REDIRECTS_ROUTE}`, label: t.common.parts.redirects }}
+      status={
+        tab === 'missing'
+          ? missing && files
+            ? t.redirects.count(stillMissing.length)
+            : undefined
+          : files
+            ? 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
+        value={query}
+        onChange={setQuery}
+        label={tab === 'redirects' ? t.redirects.searchLabel : t.redirects.missing.searchLabel}
+        sort={
+          <Choice
+            title={t.library.sort}
+            icon={ArrowsDownUp}
+            value={sort}
+            options={SORTS[tab].map((s) => ({ value: s, label: t.redirects.sorts[s] }))}
+            onChange={pickSort}
+          />
+        }
+        filter={
+          tab === 'redirects' &&
+          pageChoices.length > 1 && (
+            <Choice
+              title={t.redirects.pageFilter}
+              icon={Funnel}
+              value={shownPage}
+              selected={!!shownPage}
+              options={[{ value: '', label: t.library.allPages }, ...pageChoices]}
+              search={t.common.search}
+              onChange={setPage}
+            />
+          )
+        }
+        className="mb-6"
+      />
+      {tab === 'redirects' && shownPage && (
+        <div className="-mt-2 mb-6 flex flex-wrap gap-2">
+          <InputChip removeLabel={t.library.removeFilter(pageName)} onRemove={() => setPage('')}>
+            {pageName}
+          </InputChip>
+        </div>
+      )}
+      {problem && <ProblemNote>{problem}</ProblemNote>}
+      {!files && !problem && <EmptyNote busy>{t.redirects.loading}</EmptyNote>}
+      {tab === 'missing' && files && (
+        <>
+          {missingProblem && <ProblemNote>{missingProblem}</ProblemNote>}
+          {missing === undefined && !missingProblem && <EmptyNote busy>{t.redirects.missing.loading}</EmptyNote>}
+          {missing === null && <EmptyNote>{t.redirects.missing.notKept}</EmptyNote>}
+          {missing &&
+            (shownMissing.length ? (
+              missingGroups.map((g) => (
+                <Group key={g.key ?? 'all'} title={g.key ?? undefined}>
+                  {g.items.map((m) => (
+                    // The address and how often it was asked for: under each other on a phone, side by side on a computer.
+                    <ListItem
+                      key={m.path}
+                      onClick={() => open({ from: m.path, to: '', isNew: true, missing: m })}
+                      headline={m.path}
+                      supporting={t.redirects.missing.seen(m.count, when(new Date(m.last)))}
+                      columns
+                    />
+                  ))}
+                </Group>
+              ))
+            ) : (
+              <ul className={listClass}>
+                <EmptyNote item>{t.redirects.missing.none(q ? query.trim() : '')}</EmptyNote>
+              </ul>
+            ))}
+        </>
+      )}
+      {tab === 'redirects' &&
+        files &&
+        (shown.length ? (
+          groups.map((g) => (
+            <Group key={g.key ?? 'all'} title={g.key ?? undefined}>
+              {g.items.map((e) => (
+                // The address and where it sends to: under each other on a phone, side by side on a computer.
+                <ListItem
+                  key={e.from}
+                  onClick={() => open({ from: e.from, to: e.to, isNew: false })}
+                  headline={e.from}
+                  supporting={
+                    <span className="flex items-start gap-1.5">
+                      <ArrowRight size={14} className="mt-1 shrink-0" />
+                      <span className="min-w-0 break-words">{name(e.to)}</span>
+                    </span>
+                  }
+                  columns
+                />
+              ))}
+            </Group>
+          ))
+        ) : (
+          <ul className={listClass}>
+            <EmptyNote item>{t.redirects.none(q ? query.trim() : '')}</EmptyNote>
+          </ul>
+        ))}
+      <BottomSheet
+        ref={dialog}
+        onClose={(e) => e.target === e.currentTarget && setEditing(null)}
+        onClick={(e) => e.target === dialog.current && dialog.current?.close()}
+      >
+        <SheetTitle
+          title={editing?.isNew && !editing.missing ? t.redirects.new : (editing?.from ?? '')}
+          onClose={() => dialog.current?.close()}
+        />
+        {editing && (
+          <SheetBody
+            onSubmit={(e) => {
+              e.preventDefault();
+              save();
+            }}
+          >
+            {m && (
+              <SupportingText>
+                {t.redirects.missing.details(
+                  m.count,
+                  when(new Date(m.first)),
+                  when(new Date(m.last)),
+                  m.from && whatIsAt(m.from, env.relations),
+                )}
+              </SupportingText>
+            )}
+            {editing.isNew && !m && (
+              <div>
+                <TextField
+                  id="redirect-from"
+                  label={t.redirects.from}
+                  hint={t.redirects.fromHint}
+                  value={editing.from}
+                  autoComplete="off"
+                  onChange={(e) => setEditing({ ...editing, from: e.target.value })}
+                />
+              </div>
+            )}
+            <div>
+              <TextField
+                id="redirect-to"
+                label={t.redirects.to}
+                hint={to ? t.redirects.sendsTo(name(to), name(to) === to && to.startsWith('/')) : t.redirects.toHint}
+                value={editing.to}
+                autoComplete="off"
+                onChange={(e) => setEditing({ ...editing, to: e.target.value })}
+              />
+            </div>
+            <Button type="submit" wide disabled={saving}>
+              {saving ? t.common.saving : m ? t.redirects.missing.sendOn : t.common.save}
+            </Button>
+            {m && (
+              <Button kind="outlined" wide icon={X} disabled={saving} onClick={() => drop(m.path)}>
+                {t.redirects.missing.forget}
+              </Button>
+            )}
+            {!editing.isNew && (
+              <Button kind="outlined" wide icon={Trash} disabled={saving} onClick={() => remove(editing.from)}>
+                {t.redirects.deleteRedirect}
+              </Button>
+            )}
+          </SheetBody>
+        )}
+      </BottomSheet>
+    </Screen>
+  );
+}

package/src/Screen.tsx

@@ -0,0 +1,184 @@
+// A screen of the editor: a top bar like in an app (a back arrow, the screen's title, actions on the
+// right) above the content. The back arrow goes to the screen above, back in the history when that is
+// the screen before (nav.ts up), so it goes the same way as the phone's back gesture. Without a back
+// arrow (the start screen), the logo is there instead. On a computer the top bar goes across the whole
+// window beside the sidebar (which has the logo and the site's name, App.tsx): at the left the way there
+// as breadcrumbs (the start screen and the screen above, when that is not the start screen), the title
+// and the status after it; at the right the actions, the notifications, the settings and the account, on every screen.
+// On a phone the notifications are on every screen too, the settings and the account only on the start screen (`home`). The bar stays at
+// the top while scrolling and keeps clear of a phone's notch. A screen's tabs (`tabs`) are the bottom of the bar, under the title,
+// as wide as the content, and stay with it. The content is as wide as a form reads
+// well, or wider for lists and the grid of files (`wide`) and for a form with its fields beside the text
+// (`panel`).
+import { useId, type ReactNode } from 'react';
+import { ArrowLeft, Bell, CaretRight, Gear, UserCircle } from '@phosphor-icons/react';
+import { settings, siteName } from '@site/editor';
+import { t } from './i18n';
+import { IconButton, IconLink, TabPanel, TabRow, TopAppBar, type TabChoice } from './ui';
+import { up } from './nav';
+import { unseen, useNotifications } from './notifications';
+
+// `label` is the screen back goes to, named by the back arrow and the breadcrumbs. `guard` takes every
+// way out of the screen (back, the breadcrumbs and the logo) and goes it, after warning about changes
+// that are not saved (FormFrame.tsx leaveTo).
+export type Back = { href: string; label: string; guard?: (go: () => void) => void };
+
+// `status`: more about the screen, e.g. when it was last saved: under the title, on a computer after it.
+// `wide`: the content is wider on a computer (lists, the files); `panel`: a form with its other fields
+// beside the text on a wide computer screen (FormColumns in ui.tsx). `drawer`: the icon of the screen's navigation
+// drawer (NavigationDrawerButton, ModalNavigationDrawer), the last in the bar, after the account. `home`: the start screen,
+// with the settings and the account on a phone too. `tabs`: the screen's tabs, in the bar, with the open one's content.
+type Props<T extends string> = {
+  title: string;
+  back?: Back;
+  status?: ReactNode;
+  actions?: ReactNode;
+  drawer?: ReactNode;
+  tabs?: TabChoice<T>;
+  home?: boolean;
+  wide?: boolean;
+  panel?: boolean;
+  children: ReactNode;
+};
+
+/** The account (#konto) in a top bar: the avatar icon, at the right of the gear. */
+export function AccountLink({ className = '' }: { className?: string }) {
+  const current = location.hash === '#konto';
+  return (
+    <IconLink
+      href="#konto"
+      icon={UserCircle}
+      label={t.common.parts.account}
+      aria-current={current ? 'page' : undefined}
+      selected={current}
+      className={className}
+    />
+  );
+}
+
+/** The bell in the top bar, at the left of the gear: the notifications (#notifikationer, Notifications.tsx), with a dot
+ * while some are not seen yet. */
+export function NotificationsLink({ className = '' }: { className?: string }) {
+  const count = unseen(useNotifications());
+  const current = location.hash === '#notifikationer';
+  return (
+    <IconLink
+      href="#notifikationer"
+      icon={Bell}
+      label={count ? t.library.notificationsNew(count) : t.library.notifications}
+      aria-current={current ? 'page' : undefined}
+      selected={current}
+      badge={count > 0}
+      className={className}
+    />
+  );
+}
+
+/** The gear in the top bar, at the left of the account: "Indstillinger" (#indstillinger, Library.tsx Settings), marked
+ * there and on the settings it opens ("Udseende", "Apps", "Analytics" … and their screens). Only when the site has any. */
+export function SettingsLink({ className = '' }: { className?: string }) {
+  if (!settings.length) return null;
+  const route = location.hash.slice(1);
+  const current = route === 'indstillinger' || settings.some((id) => route === id || route.startsWith(`${id}/`));
+  return (
+    <IconLink
+      href="#indstillinger"
+      icon={Gear}
+      label={t.common.parts.settings}
+      aria-current={current ? 'page' : undefined}
+      selected={current}
+      className={className}
+    />
+  );
+}
+
+export default function Screen<T extends string>({
+  title,
+  back,
+  status,
+  actions,
+  drawer,
+  tabs,
+  home = false,
+  wide = false,
+  panel = false,
+  children,
+}: Props<T>) {
+  const id = useId();
+  const width = wide ? 'max-w-3xl md:max-w-5xl' : panel ? 'max-w-3xl xl:max-w-6xl' : 'max-w-3xl';
+  // A link out of the screen, through `guard`: the back arrow goes up (nav.ts), the other links as links.
+  const leave = (go?: () => void) => (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (!go && !back?.guard) return;
+    e.preventDefault();
+    const href = e.currentTarget.getAttribute('href')!;
+    const way = go ?? (() => (location.hash = href));
+    if (back?.guard) back.guard(way);
+    else way();
+  };
+  return (
+    <div className="min-h-dvh">
+      <TopAppBar>
+        <div className="flex h-16 items-center gap-1 px-2 md:gap-3 md:px-6">
+          {back ? (
+            <a
+              href={back.href}
+              onClick={leave(() => up(back.href))}
+              title={t.common.backTo(back.label)}
+              aria-label={t.common.backTo(back.label)}
+              className="flex size-12 shrink-0 items-center justify-center rounded-full hover:bg-tint md:hidden"
+            >
+              <ArrowLeft size={24} />
+            </a>
+          ) : (
+            // The start screen: the logo before the name.
+            <img src="/editor/icon-192.png" alt="" className="mx-2 size-9 shrink-0 rounded-xl md:hidden" />
+          )}
+          <div className="flex min-w-0 flex-1 flex-col pl-1 md:hidden">
+            <h1 className="truncate text-xl leading-tight">{title}</h1>
+            {status && (
+              <p data-subtitle className="truncate text-xs text-muted">
+                {status}
+              </p>
+            )}
+          </div>
+          {/* On a computer: the way here, the title and the status. */}
+          <div className="hidden min-w-0 flex-1 items-center gap-x-2 md:flex">
+            {back && (
+              <nav aria-label={t.library.breadcrumbs} className="flex shrink-0 items-center gap-2 text-muted">
+                {(back.href === '#' ? [back] : [{ href: '#', label: siteName }, back]).map((c) => (
+                  <span key={c.href} className="flex items-center gap-2">
+                    <a href={c.href} onClick={leave()} className="max-w-48 truncate hover:text-accent hover:underline">
+                      {c.label}
+                    </a>
+                    <CaretRight size={14} className="shrink-0" />
+                  </span>
+                ))}
+              </nav>
+            )}
+            <h1 className="truncate font-medium">{title}</h1>
+            {status && <p className="shrink-0 text-sm text-muted">{status}</p>}
+          </div>
+          <div className="flex shrink-0 items-center justify-end gap-1">{actions}</div>
+          <NotificationsLink />
+          <SettingsLink className={home ? '' : 'hidden md:inline-grid'} />
+          <AccountLink className={home ? '' : 'hidden md:inline-grid'} />
+          {drawer}
+        </div>
+        {tabs && (
+          <div className={`mx-auto md:px-6 ${width}`}>
+            <TabRow id={id} {...tabs} />
+          </div>
+        )}
+      </TopAppBar>
+      <main className={`editor-screen mx-auto px-4 pt-6 pb-[calc(6rem+env(safe-area-inset-bottom))] md:px-6 md:pt-8 ${width}`}>
+        {tabs ? (
+          <TabPanel id={id} value={tabs.value}>
+            {children}
+          </TabPanel>
+        ) : (
+          children
+        )}
+      </main>
+    </div>
+  );
+}