@morphemecms/cms 0.0.0-stage → 0.1.0

package/src/DataForm.tsx

@@ -0,0 +1,434 @@
+// A JSON file: one entry of a folder (a price, a testimonial, a category) or a single file (a fixed
+// page, the menu). The files are written as JSON.stringify(data, null, 2) like the existing ones, with
+// the keys in their order, so a save only changes what was edited. An earlier version (Versions.tsx)
+// is opened as changes that are not saved.
+import { useMemo, useState } from 'react';
+import { Plus } from '@phosphor-icons/react';
+import {
+  entryData,
+  entryName,
+  slugify,
+  slugOf,
+  type Collection,
+  type DataFile,
+  type Field,
+  type FilesCollection,
+  type FolderCollection,
+} from './schema';
+import { config, header, keptBy, sharing, siteName, usesOf } from '@site/editor';
+import { apps, asWritten, collections } from './site';
+import { kindDraw } from './apps';
+import { ConflictError, type RepoFile } from './github';
+import { clean, newItem, newValue, problemAt, withDefaults } from './check';
+import { FieldInput, FieldList, Fields, MenuList, useWrongField, WrongField, type FieldContext } from './fields';
+import SectionsField from './SectionsField';
+import { notOffered, withPageBlocks } from './registry';
+import { shownAt, useUploads } from './images';
+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 { plain, SEO_FIELDS, seoRating, SHARE_FIELDS, sharedAs } from './seo';
+import type { Env } from './App';
+import { kindAndName, lower, nameOf, savedText } from './deploy';
+import { siteT, t } from './i18n';
+
+type Props = {
+  collection: FolderCollection | FilesCollection;
+  dataFile?: DataFile;
+  file: RepoFile;
+  env: Env;
+  /** A new entry of this kind (FolderCollection.kinds), picked under "+". */
+  kind?: string;
+};
+
+// A file that is only a list, without fields of its own beside it (a menu with "Aktiveret" is not).
+const listOnly = (dataFile?: DataFile) => !!dataFile?.root && !dataFile.fields.length;
+
+// A file's values in the form: its data (with the defaults of fields it has none for; an entry of a list as the list has
+// it now, entryData), or a list under the field's name.
+const valuesOf = (text: string, fields: Field[], dataFile: DataFile | undefined, collection: Collection, files: RepoFile[]) => {
+  if (listOnly(dataFile)) return { [dataFile!.root!.name]: JSON.parse(text) } as Record<string, unknown>;
+  return withDefaults(fields, collection.kind === 'folder' && !dataFile ? entryData(collection, text, files) : JSON.parse(text));
+};
+
+// The form starts again with an earlier version, or with the one saved now.
+export default function DataForm(props: Props) {
+  return (
+    <WithVersions notify={props.env.notify}>
+      {(version, onVersion) => <Form {...props} version={version} onVersion={onVersion} />}
+    </WithVersions>
+  );
+}
+
+function Form({
+  collection,
+  dataFile,
+  file,
+  env,
+  kind,
+  version,
+  onVersion,
+}: Props & { version: ShownVersion | null; onVersion: (v: ShownVersion | null) => void }) {
+  // A fixed page's sections with every block a page can have (`pageBlocks`); those turned off or of an app not
+  // installed are not offered under "Indsæt" (`off`), but drawn and checked where they are, as on a page.
+  const off = useMemo(() => notOffered(env.files), [env.files]);
+  const fields = useMemo(
+    () =>
+      withPageBlocks(
+        dataFile ? (dataFile.root ? [...dataFile.fields, dataFile.root] : dataFile.fields) : (collection as FolderCollection).fields,
+      ),
+    [dataFile, collection],
+  );
+  const [base, setBase] = useState(file);
+  const isNew = !base.path;
+  const kinds = collection.kind === 'folder' ? collection.kinds : undefined;
+  const initial = useMemo(
+    () =>
+      isNew
+        ? { ...newValue(fields), ...(kinds && kind ? { [kinds]: kind } : {}) }
+        : valuesOf(base.text, fields, dataFile, collection, env.files),
+    [base],
+  );
+  const [values, setValues] = useState<Record<string, unknown>>(() =>
+    version ? valuesOf(version.text, fields, dataFile, collection, env.files) : initial,
+  );
+  const notify = env.notify;
+  // A form that cannot be saved: why, as a message, and the field marked (useWrongField in fields.tsx), with the section
+  // it is in opened first (below).
+  const wrongField = useWrongField(
+    (text) => notify({ text, error: true }),
+    (path) => {
+      const name = path.split('.')[0];
+      if (SEO_FIELDS.includes(name)) setSeoOpen(true);
+      if (SHARE_FIELDS.includes(name)) setShareOpen(true);
+    },
+  );
+  // The sections for search engines and social media, folded from the start, as on a page (EntryForm.tsx).
+  const [seoOpen, setSeoOpen] = useState(false);
+  const [shareOpen, setShareOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const dirty = JSON.stringify(values) !== JSON.stringify(initial);
+
+  // A file is named by its label, as in its list (Forside, Menu …); a fixed page (`pages`) says when it was last saved.
+  const fixed = collection.kind === 'files' && !!collection.pages;
+  // When a fixed page was last saved, in the top bar as on the pages.
+  const [savedAt, setSavedAt] = useSavedAt(env, fixed ? base.path : '');
+
+  // Pictures in the text of a fixed page (the front page's picture …), saved with the file.
+  const pictures = useUploads(notify);
+  const [pickImage, picker] = useMediaPicker(env.media, pictures);
+  const context: FieldContext = {
+    relations: env.relations,
+    lists: env.lists,
+    testimonials: env.testimonials,
+    site: env.site,
+    pickImage,
+    // A fixed page's address, for what is shown on it (a button among its sections that opens a promotion).
+    page: fixed && dataFile!.view.endsWith('/') ? dataFile!.view : undefined,
+  };
+
+  // Only the pages (the fixed ones here) link to themselves on the site.
+  const view = fixed ? dataFile!.view : undefined;
+
+  async function save() {
+    if (wrongField.stop(problemAt(fields, values))) return;
+    let data: unknown = clean(fields, values);
+    // Looked through now that it is saved (FolderCollection.fresh).
+    if (collection.kind === 'folder' && collection.fresh) delete (data as Record<string, unknown>)[collection.fresh.field];
+    if (listOnly(dataFile)) data = (data as Record<string, unknown>)[dataFile!.root!.name];
+    let path = base.path;
+    if (isNew) {
+      const folder = collection as FolderCollection;
+      // Of a kind without a field to name it (the contact bar), by the kind's name, in the site's language. Only the
+      // fields of its kind count (`data`): not the default of another kind's name.
+      const named = data as Record<string, unknown>;
+      const from = [folder.slugFrom].flat().find((name) => String(named[name] ?? '').trim());
+      const writtenKind = asWritten(folder)
+        .fields.find((f) => f.name === folder.kinds)
+        ?.options?.find((o) => o.value === kindNow)?.label;
+      const slug = slugify(String((from && named[from]) || writtenKind || ''));
+      if (!slug) return notify({ text: t.forms.nameNeedsLetters, error: true });
+      // With -2, -3 … when the name is taken (a second bar, named Handlingslinje like the first).
+      path = `${folder.folder}/${slug}.json`;
+      for (let n = 2; env.files.some((f) => f.path === path); n++) path = `${folder.folder}/${slug}-${n}.json`;
+      // A new entry comes last; `order` is the first key, as in the existing files.
+      if (folder.orderable) data = { order: env.nextOrder(folder), ...(data as object) };
+    }
+    const text = `${JSON.stringify(data, null, 2)}\n`;
+    if (text === base.text) return notify({ text: t.forms.nothingToSave });
+    // Something on the site needs it as it was (a button that opens a promotion on a page): where, with a link there.
+    const kept = !isNew && !dataFile ? keptBy(collection, path, data as Record<string, unknown>, env.files) : null;
+    if (kept) return notify(kept);
+    const what = dataFile ? asWritten(dataFile).label.toLowerCase() : `"${slugOf(path, (collection as FolderCollection).folder)}"`;
+    const used = pictures.usedIn(text);
+    const message = isNew
+      ? siteT.forms.commit.create(asWritten(collection).create!, what)
+      : version
+        ? siteT.history.commit.restoreVersion(dataFile ? what : `${asWritten(collection).singular} ${what}`, savedOn(version))
+        : dataFile
+          ? siteT.forms.commit.edit(what)
+          : siteT.forms.commit.editOne(asWritten(collection).singular, what);
+    const changes = [{ path, content: text, oid: base.oid || null }, ...used.map((u) => ({ path: u.path, content: u.bytes, oid: null }))];
+    const entry = dataFile ? lower(dataFile.label) : kindAndName(collection.singular, nameOf(collection, { path, text }));
+    const change = isNew ? t.app.changes.created(entry) : version ? t.app.changes.restored(entry) : t.app.changes.edited(entry);
+    setSaving(true);
+    notify({ text: t.common.saving });
+    try {
+      const oids = await env.commit(message, changes, change);
+      pictures.markSaved(used);
+      if (fixed) setSavedAt(new Date());
+      const saved = { path, oid: oids[path], text };
+      setBase(saved);
+      setValues(listOnly(dataFile) ? { [dataFile!.root!.name]: JSON.parse(text) } : JSON.parse(text));
+      env.onSaved(saved);
+      notify({ text: savedText(change), kind: 'saved' });
+      // The version is now the one saved: the form as usual again.
+      if (version) onVersion(null);
+      return true;
+    } catch (e) {
+      notify({ text: e instanceof ConflictError ? e.message : t.common.notSaved((e as Error).message), error: true, kind: 'failed' });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  // A fixed page is laid out like a page: its H1, its text (the introduction and the sections), then
+  // the other fields, the first its address.
+  const text = fields.find((f) => f.type === 'blocks');
+  const top = text ? fields.filter((f) => f.name === 'heading') : [];
+  const others = text ? fields.filter((f) => f !== text && !top.includes(f) && f.name !== text.intro) : fields;
+  // The fields for search engines (a fixed page's, a tag's) in their own section at the end, which folds in and out, with
+  // the SEO rating first, as on a page (EntryForm.tsx): its H1 is its own field (the heading, a tag's name), and an empty
+  // Google description is the introduction's (a tag's: a text with the number of its posts, Category.astro). Then the
+  // picture when it is shared under "Sociale medier", under a preview of the shared link, as on a page.
+  const seoFields = others.filter((f) => SEO_FIELDS.includes(f.name));
+  const shareFields = others.filter((f) => SHARE_FIELDS.includes(f.name));
+  const rest = others.filter((f) => !seoFields.includes(f) && !shareFields.includes(f));
+  const seoNow = JSON.stringify([
+    values.heading,
+    values.name,
+    values.intro,
+    values.seoTitle,
+    values.seoDescription,
+    values.keyword,
+    values.noindex,
+    values.canonical,
+  ]);
+  const rating = useMemo(() => {
+    if (!seoFields.length) return [];
+    const h1 = String(values.heading ?? values.name ?? '');
+    const intro = text?.intro ? String(values[text.intro] ?? '') : '';
+    return seoRating({
+      post: false,
+      title: h1,
+      h1,
+      body: intro,
+      seoTitle: String(values.seoTitle ?? ''),
+      seoDescription: String(values.seoDescription ?? ''),
+      descriptionFrom: intro.trim() ? t.forms.seoRating.fromIntro : t.forms.seoRating.fromCount,
+      // The blog page's, which has the same fields as a page.
+      keyword: String(values.keyword ?? ''),
+      noindex: values.noindex === true,
+      canonical: String(values.canonical ?? ''),
+      relations: env.relations,
+    });
+  }, [seoNow, seoFields.length]);
+  const seoSection = seoFields.length > 0 && (
+    <FoldSection title={t.forms.seo} open={seoOpen} onToggle={() => setSeoOpen(!seoOpen)}>
+      {rating.length > 0 && <CheckList title={t.forms.seoRating.title} items={rating} />}
+      <FieldList fields={seoFields} value={values} onChange={(v) => setValues(v as Record<string, unknown>)} />
+    </FoldSection>
+  );
+  // The link as shared (BlogIndex.astro): the heading or the tag's name with the site's name after it, and the
+  // introduction or, on a tag, the number of its posts on the blog.
+  const card = () => {
+    const name = String(values.heading ?? values.name ?? '');
+    const intro = text?.intro ? plain(String(values[text.intro] ?? '')) : '';
+    const tag = collection.kind === 'folder' && base.path ? slugOf(base.path, collection.folder) : '';
+    const count = env.site.posts.filter((p) => p.categories.includes(tag)).length;
+    return sharedAs({
+      title: name,
+      seoTitle: String(values.seoTitle ?? ''),
+      seoDescription: String(values.seoDescription ?? ''),
+      shareImage: String(values.shareImage ?? ''),
+      description: intro || (collection.kind === 'folder' ? siteT.forms.tagShared(count, name) : ''),
+      site: sharing,
+    });
+  };
+  const shared = shareFields.length > 0 && shareOpen ? card() : null;
+  const shareSection = shareFields.length > 0 && (
+    <FoldSection title={t.forms.share} open={shareOpen} onToggle={() => setShareOpen(!shareOpen)}>
+      {shared && (
+        <SharePreview
+          image={shownAt(splitPicture(shared.image).src)}
+          domain={config.domain}
+          title={shared.title}
+          description={shared.description}
+        />
+      )}
+      <FieldList fields={shareFields} value={values} onChange={(v) => setValues(v as Record<string, unknown>)} />
+    </FoldSection>
+  );
+  // The other fields as they are now, for the previews of the sections (MarkdownEditor.tsx draws
+  // them again when these change, not at every key in the text).
+  const othersNow = JSON.stringify(Object.fromEntries(others.map((f) => [f.name, values[f.name]])));
+  const page = useMemo(() => dataFile && { file: dataFile.file, values: JSON.parse(othersNow) as Record<string, unknown> }, [othersNow]);
+  const field = (f: (typeof fields)[number]) => (
+    <FieldInput key={f.name} field={f} value={values[f.name]} onChange={(v) => setValues({ ...values, [f.name]: v })} />
+  );
+
+  const folder = collection.kind === 'folder' ? collection : null;
+  // An entry of a list of kinds (Promovering): how it looks on the site, with the fields as they are now,
+  // beside them; drawn by its kind, an app's (AppKind.draw, or its part in the list's own drawing, kindDraw; once for each
+  // of its variants: Mailchimp's before and after a signup) or the list's own (FolderCollection.draws: the pop-up).
+  const kindField = folder?.kinds ? folder.fields.find((f) => f.name === folder.kinds) : undefined;
+  const kindNow = kindField ? String(values[kindField.name] ?? kindField.default ?? '') : '';
+  const kindLabel = kindField?.options?.find((o) => o.value === kindNow)?.label ?? '';
+  const appKind = apps.find((a) => a.id === kindNow)?.kinds?.[collection.id];
+  const draw = (appKind && kindDraw(appKind, folder ?? undefined)) ?? folder?.draws?.[kindNow];
+  const drawn =
+    draw &&
+    (appKind?.variants ?? [{ label: '', props: {} }]).map((v) => ({
+      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
+  // ("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.
+  const uses = useMemo(() => (folder && !isNew ? usesOf(folder, env.files)(base) : []), [folder, isNew, env.files, base]);
+  const items = root ? ((values[root.name] ?? []) as unknown[]) : [];
+  const setItems = (v: unknown) => setValues({ ...values, [root!.name]: v });
+
+  return (
+    <Fields.Provider value={context}>
+      <WrongField.Provider value={wrongField.field}>
+        <FormFrame
+          title={dataFile ? dataFile.label : isNew ? collection.create! : entryName(folder!, clean(fields, initial)) || kindLabel}
+          back={
+            header.includes(collection.id)
+              ? { href: '#header', label: t.common.parts.header }
+              : collection.kind === 'files' && collection.files.length === 1
+                ? { href: '#', label: siteName }
+                : { href: `#liste/${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)])}
+                />
+              )}
+            </>
+          }
+          dirty={dirty}
+          saving={saving || deleting}
+          deleting={deleting}
+          onSave={save}
+          onDelete={folder?.deletable && !isNew ? () => env.remove(folder, base, setDeleting) : undefined}
+          deleteLabel={t.forms.deleteOne(collection.singular)}
+          panel={!!text || !!drawn}
+          wide={!!root}
+        >
+          {version && <VersionNotice version={version} onCurrent={() => onVersion(null)} />}
+          {/* Added by something else and not yet looked through (FolderCollection.fresh): saved, it no longer is. */}
+          {folder?.fresh && values[folder.fresh.field] === true && (
+            <Notice
+              title={folder.fresh.label(values)}
+              action={
+                <Button kind="outlined" size="small" disabled={saving} onClick={() => void save()}>
+                  {folder.fresh.approve}
+                </Button>
+              }
+            >
+              {folder.fresh.notice}
+            </Notice>
+          )}
+          {text ? (
+            <FormColumns
+              main={
+                <>
+                  {top.map(field)}
+                  <SectionsField
+                    field={text}
+                    value={(values[text.name] ?? []) as Record<string, unknown>[]}
+                    intro={text.intro ? String(values[text.intro] ?? '') : undefined}
+                    page={page}
+                    off={off}
+                    onChange={(sections, intro) =>
+                      setValues((v) => ({ ...v, [text.name]: sections, ...(text.intro ? { [text.intro]: intro } : {}) }))
+                    }
+                  />
+                </>
+              }
+              side={
+                <>
+                  <FormHeading first>{t.forms.otherFields}</FormHeading>
+                  <FieldInput
+                    field={{ name: 'path', label: t.forms.address, type: 'readonly' }}
+                    value={dataFile!.view}
+                    onChange={() => {}}
+                  />
+                  {rest.map(field)}
+                  {seoSection}
+                  {shareSection}
+                </>
+              }
+            />
+          ) : root ? (
+            <div className="space-y-6">
+              {dataFile!.fields.length > 0 && (
+                <FieldList fields={dataFile!.fields} value={values} onChange={(v) => setValues(v as Record<string, unknown>)} />
+              )}
+              <MenuList field={root} value={items} onChange={setItems} />
+            </div>
+          ) : drawn ? (
+            // On a wide computer screen the drawing in the wide column and the fields beside it at the
+            // right (FormColumns, as under "Standardblokke"); narrower, the fields and then the drawing.
+            <FormColumns
+              first={<FieldList fields={fields} value={values} onChange={(v) => setValues(v as Record<string, unknown>)} />}
+              main={
+                <div>
+                  <p className="mb-2 font-medium">{t.company.preview}</p>
+                  <div className="space-y-6">
+                    {drawn.map((d) => (
+                      <section key={d.label}>
+                        {d.label && <h3 className="mb-2 text-sm font-medium text-muted">{d.label}</h3>}
+                        <Preview>{d.node}</Preview>
+                      </section>
+                    ))}
+                  </div>
+                </div>
+              }
+            />
+          ) : seoFields.length ? (
+            <div className="space-y-6">
+              <FieldList fields={rest} value={values} onChange={(v) => setValues(v as Record<string, unknown>)} />
+              {seoSection}
+              {shareSection}
+            </div>
+          ) : (
+            <FieldList fields={fields} value={values} onChange={(v) => setValues(v as Record<string, unknown>)} />
+          )}
+          {uses.length > 0 && (
+            <Group title={t.forms.usedOn}>
+              {uses.map((u) => (
+                <ListItem key={u.path} href={`#${u.path}`} headline={u.name} arrow />
+              ))}
+            </Group>
+          )}
+        </FormFrame>
+        {picker}
+      </WrongField.Provider>
+    </Fields.Provider>
+  );
+}

package/src/Deleted.tsx

@@ -0,0 +1,177 @@
+// "Slettede …" behind the clock in the top bar of a list that can be deleted from (blog posts, tags,
+// promotions, prices, testimonials) and of "Filer": what was deleted from its folder in the last commits that changed it
+// (github.ts deletedFiles), newest first, with when and by whom. Tapping one asks, then brings it back
+// in one commit, under its old name: a page or post at its old address (not when another has it, or
+// the site sends it on, which it says, and where to), a price or testimonial last in the list. A
+// file from "Filer" is shown in a sheet first (FileView.tsx; a PDF, a video or a zip file with its icon
+// and name over it), with "Gendan" under it.
+import { useEffect, useRef, useState } from 'react';
+import { ArrowCounterClockwise } from '@phosphor-icons/react';
+import Screen from './Screen';
+import { Button, listClass, BottomSheet, SheetTitle, EmptyNote, SheetBody, ProblemNote, ListItem } from './ui';
+import { fileKindOf, typeOf } from './images';
+import { fileIcons, FileView, kindOf } from './FileView';
+import { ask } from './ask';
+import { REDIRECT_FILES } from './redirects';
+import { slugOf, type Collection } from './schema';
+import { asWritten, collections } from './site';
+import { ConflictError, type DeletedFile, type RepoFile } from './github';
+import type { Env } from './App';
+import { when } from './when';
+import { kindAndName, nameOf, savedText } from './deploy';
+import { config, siteName } from '@site/editor';
+import { locale, siteT, t } from './i18n';
+
+/** The collections whose lists have "Slettede …" (the clock in the top bar): those that can be deleted from. */
+export const restorable = (c: Collection) => c.kind !== 'files' && !!c.deletable;
+
+const MEDIA = config.folders.media;
+/** The folder of PDFs, videos and zip files, deleted from under "Filer" too. */
+const FILES: string | undefined = (config.folders as { files?: string }).files;
+
+// "i dag kl. 13.42" as "I dag kl. 13.42".
+const capital = (s: string) => s.charAt(0).toLocaleUpperCase(locale) + s.slice(1);
+
+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 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);
+  const [problem, setProblem] = useState('');
+  const [busy, setBusy] = useState(false);
+  // The file shown in the sheet, and its bytes as an address the <img> can show.
+  const dialog = useRef<HTMLDialogElement>(null);
+  const [shown, setShown] = useState<{ file: DeletedFile; src: string; bytes: Uint8Array } | null>(null);
+
+  useEffect(() => {
+    if (!folder) return;
+    // Under "Filer", the pictures' and the other files' together, newest first.
+    const folders = pictures && FILES ? [folder, FILES] : [folder];
+    Promise.all(folders.map((f) => env.deleted(f, { text: !pictures })))
+      .then((all) => setDeleted(all.flat().sort((a, b) => +new Date(b.at) - +new Date(a.at))))
+      .catch((e) => setProblem(t.history.deletedNotLoaded((e as Error).message)));
+  }, [folder]);
+
+  if (!folder)
+    return (
+      <Screen title={t.app.notFound} back={{ href: '#', label: siteName }}>
+        <EmptyNote>{t.app.nothingAt(`slettet/${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 };
+
+  async function open(file: DeletedFile) {
+    if (!pictures) return restore(file);
+    setBusy(true);
+    try {
+      const bytes = await env.bytes(file.oid);
+      const type = typeOf(file.path);
+      setShown({ file, bytes, src: URL.createObjectURL(new Blob([bytes as BlobPart], type ? { type } : undefined)) });
+      dialog.current?.showModal();
+    } catch (e) {
+      env.notify({ text: t.history.notRestored((e as Error).message), error: true });
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function restore(file: DeletedFile, bytes?: Uint8Array) {
+    const name = nameOf(collection, file);
+    if (!pictures && !(await ask(t.history.restoreAsk(name), t.history.restore))) return;
+    setBusy(true);
+    env.notify({ text: t.history.restoring });
+    try {
+      let content: string | Uint8Array = file.text;
+      if (pictures) content = bytes ?? (await env.bytes(file.oid));
+      else if (collection!.kind === 'markdown') {
+        // A post's address is its file name; not when another page or post has it now, or the site
+        // sends it on elsewhere (the redirects as they are now).
+        const address = `/${slugOf(file.path, collection!.folder)}/`;
+        const taken = env.taken(address, await env.load(REDIRECT_FILES));
+        if (taken) return env.notify({ text: t.history.restoreTaken(taken.text), error: true });
+      } else if (collection!.kind === 'folder' && collection!.orderable) {
+        // Last in the list, as a new one; `order` is the first key, as in the other files.
+        const { order: _, ...rest } = JSON.parse(file.text) as Record<string, unknown>;
+        content = `${JSON.stringify({ order: env.nextOrder(collection!), ...rest }, null, 2)}\n`;
+      }
+      const what = pictures ? siteT.media.kinds[kindOf(file.path)].word : asWritten(collection!).singular;
+      const change = t.app.changes.restored(kindAndName(pictures ? t.media.kinds[kindOf(file.path)].word : collection!.singular, name));
+      const oids = await env.commit(
+        siteT.history.commit.restoreDeleted(what, `"${pictures ? fileName(file.path) : slugOf(file.path, folder)}"`),
+        [{ path: file.path, content, oid: null }],
+        change,
+      );
+      env.onSaved({ path: file.path, oid: oids[file.path], text: typeof content === 'string' ? content : '' });
+      setDeleted((all) => all?.filter((f) => f.path !== file.path) ?? null);
+      dialog.current?.close();
+      env.notify({ text: savedText(change), kind: 'saved', edit: pictures ? undefined : { to: file.path, text: t.history.open } });
+    } catch (e) {
+      env.notify({
+        text: e instanceof ConflictError ? e.message : t.history.notRestored((e as Error).message),
+        error: true,
+        kind: 'failed',
+      });
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  // A PDF's or zip file's icon, over its name in the sheet (a picture and a video show themselves).
+  const shownKind = shown && fileKindOf(shown.file.path);
+  const ShownIcon = shownKind && shownKind !== 'video' ? fileIcons[shownKind] : null;
+
+  return (
+    <Screen title={t.history.deletedOf(label)} wide back={back}>
+      <p className="mb-4 text-muted">{t.history.deletedNote}</p>
+      {problem && <ProblemNote>{problem}</ProblemNote>}
+      {!deleted && !problem && <EmptyNote busy>{t.history.loadingDeleted}</EmptyNote>}
+      {deleted && (
+        <ul className={listClass}>
+          {deleted.map((f) => (
+            <ListItem
+              key={f.path}
+              onClick={() => open(f)}
+              disabled={busy}
+              headline={nameOf(collection, f)}
+              supporting={capital(t.history.deletedAt(when(f.at), f.by))}
+              truncate
+              arrow={ArrowCounterClockwise}
+            />
+          ))}
+          {!deleted.length && <EmptyNote item>{t.history.noneDeleted}</EmptyNote>}
+        </ul>
+      )}
+      <BottomSheet
+        ref={dialog}
+        onClose={(e) => {
+          if (e.target !== e.currentTarget) return;
+          if (shown) URL.revokeObjectURL(shown.src);
+          setShown(null);
+        }}
+        onClick={(e) => e.target === dialog.current && dialog.current?.close()}
+      >
+        <SheetTitle title={shown ? fileName(shown.file.path) : ''} onClose={() => dialog.current?.close()} />
+        {shown && (
+          <SheetBody>
+            {ShownIcon && (
+              <p className="flex items-center gap-3 font-medium">
+                <ShownIcon size={36} className="shrink-0 text-muted" />
+                <span className="min-w-0 break-all">{fileName(shown.file.path)}</span>
+              </p>
+            )}
+            <FileView src={shown.src} name={fileName(shown.file.path)} />
+            <p className="text-sm text-muted">{capital(t.history.deletedAt(when(shown.file.at), shown.file.by))}</p>
+            <Button wide disabled={busy} onClick={() => restore(shown.file, shown.bytes)}>
+              {busy ? t.history.restoring : t.history.restore}
+            </Button>
+          </SheetBody>
+        )}
+      </BottomSheet>
+    </Screen>
+  );
+}