@morphemecms/cms 0.9.0-next-20261105115842 → 0.9.1

package/src/AppList.tsx

@@ -16,7 +16,7 @@
 // the addresses it loads from and sends forms to, its part of the Worker, a step in the build), the cookies it sets (and
 // whether the cookie banner asks first), who made it (a row to their page, #apps/udvikler/<name>, with all their apps),
 // and where it is used); one not installed has no tabs; installing, updating and uninstalling are each saved at once in its own commit,
-// as a block turned on or off under "Blokindstillinger". One of the site's own is installed or uninstalled in the site's
+// as a block turned on or off under "Blokindstillinger". The button pressed shows the loading indicator while it runs (busyAction.mjs). One of the site's own is installed or uninstalled in the site's
 // file of apps; one from the store is copied into the site, or deleted from it, with it (appChanges in store.ts), and
 // its page before it is installed is drawn from the store's catalog (StoreAppPage). Installed, its blocks and kinds are
 // under "Blokindstillinger" (under its name), its blocks under "Indsæt" and its kinds under "+" of their list. An app in
@@ -82,6 +82,7 @@ import AppAdds from './AppAdds';
 import AppFormPage from './AppFormPage';
 import AppSettingsTab from './AppSettingsTab';
 import { INFO_KEY } from '../lib/appRoute.mjs';
+import { busyFor } from './busyAction.mjs';
 
 export const appHref = (app: SiteApp) => `#apps/${app.id}`;
 
@@ -670,23 +671,28 @@ export async function autoUpdate(env: Env, files: RepoFile[]) {
   }
 }
 
+type StoreAction = 'install' | 'update' | 'uninstall';
+
 /** Installing, updating and uninstalling an app from the store, each saved at once in its own commit: its folder
  * copied from the store, or deleted, with the site's file of apps (appChanges in store.ts). Each says true when it
  * was saved. */
 function useStoreActions(env: Env, files: RepoFile[]) {
-  const [saving, setSaving] = useState(false);
+  // Which action runs, on which app; `asking` while a dialog waits for the user (busyAction.mjs shows only the pressed button).
+  const [running, setRunning] = useState<{ id: string; action: StoreAction; asking: boolean } | null>(null);
+  const saving = !!running;
   const installed = installedApps(files);
   const file = files.find((f) => f.path === config.apps.installed);
 
   async function change(
     id: string,
+    action: StoreAction,
     // `kind`: the notification it is when it is saved (an update is "Apps opdateret", as one on its own).
     text: { busy: string; done: string; commit: string; change: string; kind?: 'saved' | 'updates' },
     next: () => Promise<Parameters<typeof appChanges>[2]>,
     // Whether to go on, with the app's files in the site now (an update asks, when some were changed).
     go: (current: RepoFile[]) => Promise<boolean> = async () => true,
   ): Promise<boolean> {
-    setSaving(true);
+    setRunning({ id, action, asking: false });
     env.notify({ text: text.busy });
     try {
       const [current, wanted] = await Promise.all([env.folder(appFolder(id)), next()]);
@@ -694,6 +700,9 @@ function useStoreActions(env: Env, files: RepoFile[]) {
         env.notify(null);
         return false;
       }
+      // `go` cleared the message (and its dialog stopped the button being busy): saving goes on.
+      setRunning({ id, action, asking: false });
+      env.notify({ text: text.busy });
       const cookies = cookieChanges(id, wanted ? cookiesIn(wanted.files) : null, files);
       await saveApp(env, text.commit, text.change, [...appChanges(id, current, wanted, installed, file), ...cookies], file);
       env.notify({ text: text.done, kind: text.kind ?? 'saved' });
@@ -702,15 +711,17 @@ function useStoreActions(env: Env, files: RepoFile[]) {
       env.notify({ text: e instanceof ConflictError ? e.message : t.common.notSaved((e as Error).message), error: true, kind: 'failed' });
       return false;
     } finally {
-      setSaving(false);
+      setRunning(null);
     }
   }
 
   return {
     saving,
+    busy: (id: string, action: StoreAction) => busyFor(running, id, action),
     install: (app: ShownApp) =>
       change(
         app.id,
+        'install',
         {
           busy: t.apps.installing,
           done: t.apps.isInstalledSoon(app.label),
@@ -722,6 +733,7 @@ function useStoreActions(env: Env, files: RepoFile[]) {
     async update(app: ShownApp, record: StoreRecord) {
       const done = await change(
         app.id,
+        'update',
         {
           busy: t.apps.updating,
           done: t.apps.isUpdatedSoon(app.label, app.version),
@@ -732,6 +744,7 @@ function useStoreActions(env: Env, files: RepoFile[]) {
         async () => ({ files: await env.store.files(app), record: recordOf(app) }),
         async (current) => {
           env.notify(null);
+          setRunning({ id: app.id, action: 'update', asking: true });
           return askUpdate(
             app.label,
             record.version,
@@ -747,6 +760,7 @@ function useStoreActions(env: Env, files: RepoFile[]) {
     uninstall: (id: string, label: string, written: string) =>
       change(
         id,
+        'uninstall',
         {
           busy: t.apps.uninstalling,
           done: t.apps.isUninstalled(label),
@@ -839,7 +853,7 @@ function useStorePictures(env: Env, app: ShownApp | undefined) {
  * catalog: as an app's page in the site, what it adds without switches, and "Installer" (or "Afinstaller"). */
 export function StoreAppPage({ id, env, files }: { id: string; env: Env; files: RepoFile[] }) {
   const catalog = useCatalog(env);
-  const { saving, install, uninstall } = useStoreActions(env, files);
+  const { saving, busy, install, uninstall } = useStoreActions(env, files);
   const pending = installedApps(files).includes(id);
   const app = Array.isArray(catalog) ? catalog.find((a) => a.id === id) : undefined;
   const pictures = useStorePictures(env, app);
@@ -863,7 +877,7 @@ export function StoreAppPage({ id, env, files }: { id: string; env: Env; files:
           />
           {!pending && (
             <div className="mb-8">
-              <Button disabled={saving} onClick={() => install(app)}>
+              <Button disabled={saving} busy={busy(app.id, 'install')} onClick={() => install(app)}>
                 {t.apps.install}
               </Button>
             </div>
@@ -900,8 +914,8 @@ export function StoreAppPage({ id, env, files }: { id: string; env: Env; files:
         <div>
           <Button
             kind="outlined"
-
             disabled={saving}
+            busy={busy(id, 'uninstall')}
             onClick={async () => {
               const label = app?.label ?? id;
               if (await ask(t.apps.askUninstall(label), t.apps.uninstall)) uninstall(id, label, app?.written ?? id);
@@ -978,9 +992,9 @@ export function AppScreenPage({ app, id, env }: { app: SiteApp; id: string; env:
  * not installed, with the pictures, what it needs, its cookies, who made it and where it is used). */
 function AppContent({ app, env, files, tab, fields }: AppProps & { tab: AppTab; fields?: ReactNode }) {
   const notify = env.notify;
-  const [toggling, setToggling] = useState(false);
+  const [toggling, setToggling] = useState<'install' | 'uninstall' | null>(null);
   const store = useStoreActions(env, files);
-  const saving = toggling || store.saving;
+  const saving = !!toggling || store.saving;
   const catalog = useCatalog(env);
   const update = updateOf(app, catalog);
   // Its release notes as the store has them: also those of a version the site's build does not have yet.
@@ -1001,7 +1015,7 @@ function AppContent({ app, env, files, tab, fields }: AppProps & { tab: AppTab;
     const next = installed.filter((id) => id !== app.id).concat(yes ? [app.id] : []);
     const text = `${JSON.stringify({ installed: [...new Set(next)].sort() }, null, 2)}\n`;
     if (text === file?.text) return;
-    setToggling(true);
+    setToggling(yes ? 'install' : 'uninstall');
     notify({ text: yes ? t.apps.installing : t.apps.uninstalling });
     try {
       // With its cookies added to the cookie list, or those it added taken out.
@@ -1015,7 +1029,7 @@ function AppContent({ app, env, files, tab, fields }: AppProps & { tab: AppTab;
     } catch (e) {
       notify({ text: e instanceof ConflictError ? e.message : t.common.notSaved((e as Error).message), error: true, kind: 'failed' });
     } finally {
-      setToggling(false);
+      setToggling(null);
     }
   }
 
@@ -1032,11 +1046,11 @@ function AppContent({ app, env, files, tab, fields }: AppProps & { tab: AppTab;
       {(!on || (update && app.store)) && (
         <div className="mb-8">
           {on ? (
-            <Button disabled={saving} onClick={() => store.update(update!, app.store!)}>
+            <Button disabled={saving} busy={store.busy(app.id, 'update')} onClick={() => store.update(update!, app.store!)}>
               {t.apps.update(update!.version)}
             </Button>
           ) : (
-            <Button disabled={saving} onClick={() => install(true)}>
+            <Button disabled={saving} busy={toggling === 'install' || store.busy(app.id, 'install')} onClick={() => install(true)}>
               {t.apps.install}
             </Button>
           )}
@@ -1045,7 +1059,15 @@ function AppContent({ app, env, files, tab, fields }: AppProps & { tab: AppTab;
       {on && tab === 'settings' ? (
         <>
           {fields}
-          <AppSettingsTab app={app} env={env} files={files} busy={saving} stuck={stuck} onUninstall={() => install(false)} />
+          <AppSettingsTab
+            app={app}
+            env={env}
+            files={files}
+            busy={saving}
+            uninstalling={toggling === 'uninstall' || store.busy(app.id, 'uninstall')}
+            stuck={stuck}
+            onUninstall={() => install(false)}
+          />
         </>
       ) : (
         <AppInfoTab

package/src/AppSettingsTab.tsx

@@ -1,5 +1,5 @@
 // The Settings tab of an installed app's page, below its head and its settings form: what the app shows itself (`page`),
-// what it adds with its switches, its kinds of notifications with their switches, and "Afinstaller" with its text.
+// what it adds with its switches, its kinds of notifications with their switches, and "Afinstaller" with its text (it shows the loading indicator while it uninstalls).
 // Exposes AppSettingsTab (default). Depends on AppAdds.tsx, AppNotificationSwitches.tsx, ./ui and notificationData.ts.
 import { Button, SupportingText } from './ui';
 import AppAdds from './AppAdds';
@@ -10,12 +10,13 @@ import type { SiteApp } from './apps';
 import { appType } from './notificationData';
 import { siteText, t } from './i18n';
 
-/** `busy`: something is saving; `stuck`: the app is in use, so it cannot be uninstalled; `onUninstall`: "Afinstaller". */
+/** `busy`: something is saving; `uninstalling`: this app is uninstalled now; `stuck`: the app is in use, so it cannot be uninstalled; `onUninstall`: "Afinstaller". */
 export default function AppSettingsTab({
   app,
   env,
   files,
   busy,
+  uninstalling,
   stuck,
   onUninstall,
 }: {
@@ -23,6 +24,7 @@ export default function AppSettingsTab({
   env: Env;
   files: RepoFile[];
   busy: boolean;
+  uninstalling: boolean;
   stuck: boolean;
   onUninstall: () => void;
 }) {
@@ -42,7 +44,7 @@ export default function AppSettingsTab({
       {notifies.length > 0 && <AppNotificationSwitches notifies={notifies} />}
       {/* As wide as the fields and the rows above. */}
       <div>
-        <Button kind="outlined" disabled={busy || stuck} onClick={onUninstall}>
+        <Button kind="outlined" disabled={busy || stuck} busy={uninstalling} onClick={onUninstall}>
           {t.apps.uninstall}
         </Button>
         <SupportingText className="mt-2">{stuck ? t.apps.stuck : t.apps.uninstallHint}</SupportingText>

package/src/BlockDialog.tsx

@@ -4,7 +4,9 @@
 // so it must be inside the form's Fields.Provider. list: the blocks of this text (the site's blocks on a
 // page, the sections on a fixed page). Over the blocks to choose from, as under "Standardblokke" (Library.tsx):
 // the search, the order (A–Å, Å–A or by group, kept in this browser) and the funnel with the filter by group
-// (the standard blocks, each app's under its name), the one picked as a chip.
+// (the standard blocks, each app's under its name), the one picked as a chip. Also the sheet of a section's
+// settings (its colour, SectionSettings.tsx), which goes the same way as a block's fields: Annuller, Gem, the question when closed changed.
+// On a large screen the fields and the section settings are in a side panel instead of the dialog (sheetPlacement.mjs, .editor-side-panel).
 import { useEffect, useRef, useState, type ReactElement } from 'react';
 import { ArrowsDownUp, Image } from '@phosphor-icons/react';
 import {
@@ -23,6 +25,7 @@ import {
   ProblemNote,
   SheetList,
   SheetGroupTitle,
+  useAtLeast,
 } from './ui';
 import { htmlBlock, type BlockData, type BlockProps, type SiteBlock } from './blocks';
 import { clean, newValue, problemAt, savedValue } from './check';
@@ -36,6 +39,8 @@ import CropField, { type Cut } from './Crop';
 import { t } from './i18n';
 import { snackbar } from '../lib/snackbar';
 import { closeChanged } from './ask';
+import SectionSettings from './SectionSettings';
+import { inPanel } from './sheetPlacement.mjs';
 
 export type BlockAsk = {
   list: SiteBlock[];
@@ -49,9 +54,14 @@ export type BlockAsk = {
   choose: (offer?: { image?: boolean; have?: string[] }) => Promise<{ type: string; props: BlockProps } | null>;
   /** New props for a block in the text; null when cancelled. isNew: one about to be put in ("Indsæt"). */
   edit: (type: string, props: BlockProps, isNew?: boolean) => Promise<BlockProps | null>;
+  /** The settings of the section the cursor is in (now its colour; null: none); the new ones, or null when cancelled. */
+  section: (color: string | null) => Promise<{ color: string | null } | null>;
 };
 
-type Open = { step: 'choose'; image?: boolean; have?: string[] } | { step: 'fields'; type: string; isNew: boolean };
+type Open = { step: 'choose'; image?: boolean; have?: string[] } | { step: 'fields'; type: string; isNew: boolean } | { step: 'section' };
+
+/** The type a section's settings are answered with (not a block's). */
+const SECTION = 'section';
 
 /** The choice of a picture in the sheet ("+" in the toolbar, MarkdownEditor.tsx), and a picture in the
  * text, which is changed here like a block's fields: another from the gallery, and its description, or
@@ -108,6 +118,7 @@ export function useBlockDialog(
 ): [BlockAsk, ReactElement] {
   const blockOf = (type: string) => (type === IMAGE ? picture : type === HTML ? htmlBlock : list.find((b) => b.type === type));
   const dialog = useRef<HTMLDialogElement>(null);
+  const large = useAtLeast('large');
   const answer = useRef<(a: Answer) => void>(() => {});
   const [open, setOpen] = useState<Open | null>(null);
   const [values, setValues] = useState<BlockProps>({});
@@ -137,6 +148,7 @@ export function useBlockDialog(
       setOpen(first);
       setValues(props);
       if (first.step === 'fields') shown.current = asWritten(first.type, props);
+      if (first.step === 'section') shown.current = JSON.stringify(props.color ?? '');
       setProblem('');
       wrongField.stop(null);
       setQuery('');
@@ -163,6 +175,10 @@ export function useBlockDialog(
     template,
     data,
     choose: (offer) => ask({ step: 'choose', image: offer?.image, have: offer?.have }),
+    section: async (color) => {
+      const answered = await ask({ step: 'section' }, { color: color ?? '' });
+      return answered && { color: answered.props.color ? String(answered.props.color) : null };
+    },
     edit: async (type, props, isNew = false) => {
       const fields = blockOf(type)?.fields ?? [];
       // A block on the page with what a field it has no value for means; a new one with the defaults.
@@ -193,12 +209,23 @@ export function useBlockDialog(
   // Closed (Annuller, the cross, a swipe down, Esc, a tap beside it) with the fields changed: the owner is
   // asked whether to keep them ("Indsæt", "Gem"), leave them or stay.
   async function leave() {
+    if (open?.step === 'section') {
+      if (JSON.stringify(values.color ?? '') === shown.current) return done(null);
+      const choice = await closeChanged(t.common.save);
+      if (choice === 'keep') saveSection();
+      else if (choice === 'discard') done(null);
+      return;
+    }
     if (open?.step !== 'fields' || asWritten(open.type, values) === shown.current) return done(null);
     const choice = await closeChanged(open.isNew ? t.blocks.insert : t.common.save);
     if (choice === 'keep') save(open.type);
     else if (choice === 'discard') done(null);
   }
 
+  function saveSection() {
+    done({ type: SECTION, props: { color: values.color ?? '' } });
+  }
+
   function pickSort(next: InsertSort) {
     setSort(next);
     try {
@@ -242,10 +269,19 @@ export function useBlockDialog(
           .map((g) => ({ key: g as string | null, items: found.filter((b) => groupOf(b) === g) }))
           .filter((g) => g.items.length > 0)
       : headed(found, (b) => letterOf(b.label));
+  const panel = inPanel(open?.step, large);
+  const title = open?.step === 'section' ? t.text.sectionSettings : block ? block.label : t.blocks.insert;
+  // While the panel is open, the page makes room for it (editor.css: [data-side-panel]).
+  useEffect(() => {
+    if (!panel) return;
+    document.documentElement.setAttribute('data-side-panel', '');
+    return () => document.documentElement.removeAttribute('data-side-panel');
+  }, [panel]);
   const element = (
     <BottomSheet
       ref={dialog}
-      aria-label={block ? block.label : t.blocks.insert}
+      aria-label={title}
+      panel={panel}
       // React passes on the close of a sheet inside it (the categories, a page): only its own counts.
       onClose={(e) => e.target === e.currentTarget && answer.current(null)}
       onCancel={(e) => {
@@ -253,9 +289,10 @@ export function useBlockDialog(
         e.preventDefault();
         void leave();
       }}
-      onClick={(e) => e.target === dialog.current && void leave()}
+      // A tap beside a dialog leaves it; beside the panel is the page, which is inert while it is open.
+      onClick={(e) => !panel && e.target === dialog.current && void leave()}
     >
-      <SheetTitle title={block ? block.label : t.blocks.insert} onClose={() => void leave()} />
+      <SheetTitle title={title} onClose={() => void leave()} />
       {open?.step === 'choose' && (
         <>
           <SearchRow
@@ -327,6 +364,14 @@ export function useBlockDialog(
           </SheetList>
         </>
       )}
+      {open?.step === 'section' && (
+        <>
+          <SheetBody>
+            <SectionSettings color={String(values.color ?? '')} onChange={(color) => setValues({ color })} />
+          </SheetBody>
+          <SheetActions onCancel={() => void leave()} onDone={saveSection} done={t.common.save} />
+        </>
+      )}
       {block && open?.step === 'fields' && (
         <>
           <SheetBody>

package/src/DataFileFields.tsx

@@ -0,0 +1,35 @@
+// A single data file's fields in a form: its own ("Aktiveret") and, when it is a list (the menus), its items as the menu
+// (MenuList). DataForm.tsx draws a menu with them, and Appearance › Header (HeaderSettings.tsx) both menus. Exposes
+// DataFileFields. Uses fields.tsx (FieldList, MenuList).
+import type { DataFile } from './schema';
+import { FieldList, MenuList } from './fields';
+
+export function DataFileFields({
+  dataFile,
+  value,
+  onChange,
+  add,
+}: {
+  dataFile: DataFile;
+  value: Record<string, unknown>;
+  onChange: (v: Record<string, unknown>) => void;
+  /** "Tilføj …" under the list (MenuList `add`), where the top bar has no "+" for it. */
+  add?: boolean;
+}) {
+  const root = dataFile.root;
+  return (
+    <>
+      {dataFile.fields.length > 0 && (
+        <FieldList fields={dataFile.fields} value={value} onChange={(v) => onChange(v as Record<string, unknown>)} />
+      )}
+      {root && (
+        <MenuList
+          field={root}
+          value={(value[root.name] ?? []) as unknown[]}
+          onChange={(v) => onChange({ ...value, [root.name]: v })}
+          add={add}
+        />
+      )}
+    </>
+  );
+}

package/src/DataForm.tsx

@@ -1,26 +1,19 @@
 // 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.
+// is opened as changes that are not saved. Exposes DataForm (default). Its values from the file and back: dataFileValues.ts;
+// a menu's fields: DataFileFields.tsx.
 import { useMemo, useState } from 'react';
 import { Plus } from '@phosphor-icons/react';
-import {
-  entryData,
-  entryName,
-  slugify,
-  slugOf,
-  type Collection,
-  type DataFile,
-  type Field,
-  type FilesCollection,
-  type FolderCollection,
-} from './schema';
+import { entryName, slugify, slugOf, type DataFile, type FilesCollection, type FolderCollection } from './schema';
 import { config, header, keptBy, sharing, siteName, usesOf } from '@site/editor';
 import { apps, asWritten, collections } from './site';
 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 { clean, newItem, newValue, problemAt } from './check';
+import { FieldInput, FieldList, Fields, useWrongField, WrongField, type FieldContext } from './fields';
+import { DataFileFields } from './DataFileFields';
+import { dataOf, fieldsOf, listOnly, valuesOf } from './dataFileValues';
 import SectionsField from './SectionsField';
 import { notOffered, withPageBlocks } from './registry';
 import { shownAt, useUploads } from './images';
@@ -43,16 +36,6 @@ type Props = {
   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 (
@@ -75,10 +58,7 @@ function Form({
   // 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,
-      ),
+    () => withPageBlocks(dataFile ? fieldsOf(dataFile) : (collection as FolderCollection).fields),
     [dataFile, collection],
   );
   const [base, setBase] = useState(file);
@@ -135,10 +115,9 @@ function Form({
 
   async function save() {
     if (wrongField.stop(problemAt(fields, values))) return;
-    let data: unknown = clean(fields, values);
+    let data = dataOf(fields, values, dataFile);
     // 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;
@@ -310,10 +289,12 @@ function Form({
           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 }
+              ? { href: '#udseende/header', label: t.common.parts.header }
+              : collection.id === 'footer'
+                ? { href: '#udseende/footer', label: t.common.parts.footer }
+                : 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}
@@ -386,10 +367,7 @@ function Form({
             />
           ) : 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} />
+              <DataFileFields dataFile={dataFile!} value={values} onChange={setValues} />
             </div>
           ) : drawn ? (
             // On a wide computer screen the drawing in the wide column and the fields beside it at the

package/src/Deleted.tsx

@@ -5,7 +5,7 @@
 // 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, and comes back with its record of tags (fileRecords.mjs) when it
-// was deleted together with it and no live record has its address.
+// was deleted together with it and no live record has its address. "Gendan" shows the loading indicator while it restores.
 import { useEffect, useRef, useState } from 'react';
 import { ArrowCounterClockwise } from '@phosphor-icons/react';
 import Screen from './Screen';
@@ -44,6 +44,8 @@ export default function Deleted({ id, files, env }: { id: string; files: RepoFil
   const [deleted, setDeleted] = useState<DeletedFile[] | null>(null);
   const [problem, setProblem] = useState('');
   const [busy, setBusy] = useState(false);
+  // True only while a restore runs (not while `open` fetches the bytes); the sheet's button shows busy for it.
+  const [restoring, setRestoring] = 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);
@@ -86,6 +88,7 @@ export default function Deleted({ id, files, env }: { id: string; files: RepoFil
     const name = nameOf(collection, file);
     if (!pictures && !(await ask(t.history.restoreAsk(name), t.history.restore))) return;
     setBusy(true);
+    setRestoring(true);
     env.notify({ text: t.history.restoring });
     try {
       let content: string | Uint8Array = file.text;
@@ -132,6 +135,7 @@ export default function Deleted({ id, files, env }: { id: string; files: RepoFil
       });
     } finally {
       setBusy(false);
+      setRestoring(false);
     }
   }
 
@@ -180,8 +184,8 @@ export default function Deleted({ id, files, env }: { id: string; files: RepoFil
             )}
             <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 disabled={busy} onClick={() => restore(shown.file, shown.bytes)}>
-              {busy ? t.history.restoring : t.history.restore}
+            <Button busy={restoring} disabled={busy} onClick={() => restore(shown.file, shown.bytes)}>
+              {t.history.restore}
             </Button>
           </SheetBody>
         )}