@morphemecms/cms 0.9.0-next-20261105122349 → 0.9.0

package/site/header.mjs

@@ -0,0 +1,35 @@
+// The header's site setting (src/data/header.json, optional): a button in place of the phone icon, and the side of the
+// header the mobile menu button sits on; and the main menu's items as the header draws them. Exposes headerOf (pure;
+// missing or wrong data gives the defaults) and sortedNav. Used by site/site.ts and the editor's preview of the header
+// (src/headerPreview.mjs); the Button type is src/standard/buttons/fields.ts.
+
+/** @typedef {import('../src/standard/buttons/fields').Button} Button */
+/** @typedef {{ button: Button | null, menuSide: 'start' | 'end' }} Header */
+
+/**
+ * Reads src/data/header.json's content. Missing or wrong → defaults.
+ * @param {unknown} raw
+ * @returns {Header}
+ */
+export function headerOf(raw) {
+  const data = raw && typeof raw === 'object' ? /** @type {Record<string, any>} */ (raw) : {};
+  const { enabled, ...button } = data.button && typeof data.button === 'object' ? data.button : { enabled: false };
+  return {
+    button: enabled === true ? button : null,
+    menuSide: data.menuSide === 'end' ? 'end' : 'start',
+  };
+}
+
+/** @typedef {{ label: string, href: string }} NavLink */
+/** @typedef {NavLink & { children?: NavLink[] }} NavItem */
+
+/**
+ * The main menu's items (menu.json) as the header draws them: the sub-items in alphabetical order (Danish: æ, ø, å last).
+ * @template {NavItem} T
+ * @param {T[]} items
+ * @returns {T[]}
+ */
+export const sortedNav = (items) =>
+  items.map((item) =>
+    item.children ? { ...item, children: [...item.children].sort((a, b) => a.label.localeCompare(b.label, 'da')) } : item,
+  );

package/site/header.test.mjs

@@ -0,0 +1,59 @@
+import { strict as assert } from 'node:assert';
+import { test } from 'node:test';
+import { headerOf, sortedNav } from './header.mjs';
+
+test('no file', () => {
+  assert.deepEqual(headerOf(undefined), { button: null, menuSide: 'start' });
+});
+
+test('button off', () => {
+  assert.equal(headerOf({ button: { enabled: false, to: 'booking' } }).button, null);
+});
+
+test('button on', () => {
+  assert.deepEqual(headerOf({ button: { enabled: true, to: 'booking', label: 'Book en tid' } }).button, {
+    to: 'booking',
+    label: 'Book en tid',
+  });
+});
+
+test('menu at the end', () => {
+  assert.equal(headerOf({ menuSide: 'end' }).menuSide, 'end');
+});
+
+test('wrong menu side', () => {
+  assert.equal(headerOf({ menuSide: 'middle' }).menuSide, 'start');
+});
+
+test('wrong shapes', () => {
+  assert.deepEqual(headerOf('x'), { button: null, menuSide: 'start' });
+  assert.equal(headerOf({ button: 'x' }).button, null);
+});
+
+test('sortedNav sorts the sub-items A–Å and keeps the items in order', () => {
+  const items = [
+    { label: 'Om', href: '/om/' },
+    {
+      label: 'Behandlinger',
+      href: '/b/',
+      children: [
+        { label: 'Øre', href: '/b/oe/' },
+        { label: 'Arm', href: '/b/a/' },
+        { label: 'Zone', href: '/b/z/' },
+      ],
+    },
+  ];
+  const sorted = sortedNav(items);
+  assert.deepEqual(
+    sorted.map((i) => i.label),
+    ['Om', 'Behandlinger'],
+  );
+  assert.deepEqual(
+    sorted[1].children.map((c) => c.label),
+    ['Arm', 'Zone', 'Øre'],
+  );
+  assert.deepEqual(
+    items[1].children.map((c) => c.label),
+    ['Øre', 'Arm', 'Zone'],
+  );
+});

package/site/icons.d.mts

@@ -107,6 +107,7 @@ export const MATERIAL_SYMBOLS: {
     'arrow-up': string;
     'arrow-up-right': string;
     'arrows-down-up': string;
+    'arrows-horizontal': string;
     article: string;
     bank: string;
     bell: string;
@@ -142,6 +143,8 @@ export const MATERIAL_SYMBOLS: {
     code: string;
     coffee: string;
     columns: string;
+    'columns-plus-left': string;
+    'columns-plus-right': string;
     cookie: string;
     copy: string;
     'credit-card': string;
@@ -155,6 +158,7 @@ export const MATERIAL_SYMBOLS: {
     'envelope-simple-fill': string;
     eye: string;
     'eye-slash': string;
+    file: string;
     'file-pdf': string;
     'file-text': string;
     'file-text-fill': string;
@@ -290,6 +294,7 @@ export const LUCIDE: {
     'arrow-up': string;
     'arrow-up-right': string;
     'arrows-down-up': string;
+    'arrows-horizontal': string;
     'arrows-in-line-horizontal': string;
     'arrows-out-line-horizontal': string;
     article: string;
@@ -328,6 +333,8 @@ export const LUCIDE: {
     code: string;
     coffee: string;
     columns: string;
+    'columns-plus-left': string;
+    'columns-plus-right': string;
     cookie: string;
     copy: string;
     'credit-card': string;
@@ -341,6 +348,7 @@ export const LUCIDE: {
     'envelope-simple-fill': string;
     eye: string;
     'eye-slash': string;
+    file: string;
     'file-pdf': string;
     'file-text': string;
     'file-text-fill': string;
@@ -479,6 +487,7 @@ export const PACK_MAPS: {
         'arrow-up': string;
         'arrow-up-right': string;
         'arrows-down-up': string;
+        'arrows-horizontal': string;
         article: string;
         bank: string;
         bell: string;
@@ -514,6 +523,8 @@ export const PACK_MAPS: {
         code: string;
         coffee: string;
         columns: string;
+        'columns-plus-left': string;
+        'columns-plus-right': string;
         cookie: string;
         copy: string;
         'credit-card': string;
@@ -527,6 +538,7 @@ export const PACK_MAPS: {
         'envelope-simple-fill': string;
         eye: string;
         'eye-slash': string;
+        file: string;
         'file-pdf': string;
         'file-text': string;
         'file-text-fill': string;
@@ -660,6 +672,7 @@ export const PACK_MAPS: {
         'arrow-up': string;
         'arrow-up-right': string;
         'arrows-down-up': string;
+        'arrows-horizontal': string;
         'arrows-in-line-horizontal': string;
         'arrows-out-line-horizontal': string;
         article: string;
@@ -698,6 +711,8 @@ export const PACK_MAPS: {
         code: string;
         coffee: string;
         columns: string;
+        'columns-plus-left': string;
+        'columns-plus-right': string;
         cookie: string;
         copy: string;
         'credit-card': string;
@@ -711,6 +726,7 @@ export const PACK_MAPS: {
         'envelope-simple-fill': string;
         eye: string;
         'eye-slash': string;
+        file: string;
         'file-pdf': string;
         'file-text': string;
         'file-text-fill': string;

package/site/icons.mjs

@@ -121,6 +121,7 @@ export const MATERIAL_SYMBOLS = {
   'arrow-up': 'arrow_upward',
   'arrow-up-right': 'arrow_outward',
   'arrows-down-up': 'swap_vert',
+  'arrows-horizontal': 'width_full',
   article: 'article',
   bank: 'account_balance',
   bell: 'notifications',
@@ -156,6 +157,8 @@ export const MATERIAL_SYMBOLS = {
   code: 'code',
   coffee: 'local_cafe',
   columns: 'view_column_2',
+  'columns-plus-left': 'dock_to_right',
+  'columns-plus-right': 'dock_to_left',
   cookie: 'cookie',
   copy: 'content_copy',
   'credit-card': 'credit_card',
@@ -169,6 +172,7 @@ export const MATERIAL_SYMBOLS = {
   'envelope-simple-fill': 'mail-fill',
   eye: 'visibility',
   'eye-slash': 'visibility_off',
+  file: 'crop_portrait',
   'file-pdf': 'picture_as_pdf',
   'file-text': 'description',
   'file-text-fill': 'description-fill',
@@ -305,6 +309,7 @@ export const LUCIDE = {
   'arrow-up': 'arrow-up',
   'arrow-up-right': 'arrow-up-right',
   'arrows-down-up': 'arrow-down-up',
+  'arrows-horizontal': 'rectangle-horizontal',
   'arrows-in-line-horizontal': 'fold-horizontal',
   'arrows-out-line-horizontal': 'unfold-horizontal',
   article: 'file-text',
@@ -343,6 +348,8 @@ export const LUCIDE = {
   code: 'code',
   coffee: 'coffee',
   columns: 'columns-2',
+  'columns-plus-left': 'panel-left',
+  'columns-plus-right': 'panel-right',
   cookie: 'cookie',
   copy: 'copy',
   'credit-card': 'credit-card',
@@ -356,6 +363,7 @@ export const LUCIDE = {
   'envelope-simple-fill': 'mail-fill',
   eye: 'eye',
   'eye-slash': 'eye-off',
+  file: 'rectangle-vertical',
   'file-pdf': 'file-text',
   'file-text': 'file-text',
   'file-text-fill': 'file-text-fill',

package/site/site.ts

@@ -12,6 +12,7 @@ import blocks from '@data/blocks.json';
 import standardPages from '@data/standard-pages.json';
 import { config } from '@site/config';
 import { socialOf } from './social.mjs';
+import { headerOf, sortedNav } from './header.mjs';
 import { sharedTexts, type SharedTexts } from '@morphemecms/cms/src/shared';
 import { standardShared } from '@morphemecms/cms/src/standard/sharedTexts';
 
@@ -24,6 +25,11 @@ const { cvr = '' } = contact as typeof contact & { cvr?: string };
 // Optional file: an older site has no social.json, so it is read with a glob, not an import.
 const socialFile = Object.values(import.meta.glob<Record<string, unknown>>('/src/data/social.json', { eager: true, import: 'default' }))[0];
 
+// Optional file (header.json, "Header"): a site without it keeps the header as it is.
+const headerFile = Object.values(import.meta.glob<Record<string, unknown>>('/src/data/header.json', { eager: true, import: 'default' }))[0];
+/** The header's button (in place of the phone icon, or null) and the side of the mobile menu button. */
+export const header = headerOf(headerFile);
+
 export const site = {
   name: contact.name,
   role: contact.role,
@@ -65,13 +71,12 @@ export const site = {
 
 // Primary navigation (menu.json, "Hovedmenu"). Labels, URLs and sub-items started out as the old site's menu.
 export type NavItem = { label: string; href: string; children?: { label: string; href: string }[] };
-export const nav: NavItem[] = menu.items;
+// Sub-items in alphabetical order (Danish: æ, ø, å last), in both the desktop and the mobile menu.
+export const nav: NavItem[] = sortedNav(menu.items);
 /** Whether the header has the menu and its button ("Aktiveret" under "Hovedmenu"). */
 export const navShown = menu.enabled !== false;
 /** The links in the bar under the header on a phone (mobile-menu.json, "Mobilmenu"); none when it is turned off. */
 export const mobileNav: { label: string; href: string }[] = mobileMenu.enabled ? mobileMenu.items : [];
-// Sub-items in alphabetical order (Danish: æ, ø, å last), in both the desktop and the mobile menu.
-for (const item of nav) item.children?.sort((a, b) => a.label.localeCompare(b.label, 'da'));
 
 /** The texts every copy of a block has ("Blokke" in the editor), with {…} for what differs, by
  * the block's type: those written in its shared.ts, with the saved ones (blocks.json) over them. The

package/site/templates.ts

@@ -0,0 +1,7 @@
+// The page templates the site's theme offers: the theme in use's ("templates" in its theme.json), else the standard theme's.
+// Exposes offeredTemplates, read by PageLayout.astro and the check in scripts/check-side.mjs.
+import { templatesOf } from '../lib/page-template.mjs';
+import theme from '@theme/theme.json';
+
+/** The templates a page can choose, the first the default. */
+export const offeredTemplates: string[] = templatesOf(theme as { templates?: unknown });

package/site/theme.mjs

@@ -14,6 +14,7 @@ import { installedPacks, isIconName, packFolder, packProblems, phosphorFile, svg
 import { MATERIAL_ALL, MATERIAL_SSR, materialModule, 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 { templateProblems } from '@morphemecms/cms/lib/page-template.mjs';
 import { storeImportProblems } from './storeTheme.mjs';
 
 /** The site's choice of icon pack, `{ "pack": "<id>" }` (config.icons in src/site/config.ts). */
@@ -400,6 +401,8 @@ export function themeProblems(theme) {
       problems.push(
         `${themeFolder(theme)}/theme.json: "motion" er den bevægelse, temaet bruger, når ingen er valgt: ${MOTION_SCHEMES.map((s) => `"${s}"`).join(', ')}.`,
       );
+    // The page templates it offers (lib/page-template.mjs); without the key, the standard theme's list.
+    for (const p of templateProblems(manifest.templates)) problems.push(`${themeFolder(theme)}/theme.json: ${p}`);
     // Its own licence and the licences of what it brings (fonts, code, pictures), for "Licenser" and the store.
     problems.push(
       ...declarationProblems({

package/src/App.tsx

@@ -3,7 +3,6 @@
 //   (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/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)
@@ -22,6 +21,8 @@
 //   udseende         how the site looks (Library.tsx Theme): udseende/temaer the themes installed (Themes) and udseende/temaer/<theme>
 //                    a theme's page, with the button that swaps to it (ThemePage), udseende/ikonpakker the icon packs (IconPacks),
 //                    udseende/bevaegelse how it moves (MotionSchemes), udseende/sidekolonne the block beside the pages' text (SideColumn),
+//                    udseende/header the header's menus and settings with its preview (HeaderSettings.tsx; once at header),
+//                    udseende/footer the footer's texts and links with its preview (FooterSettings.tsx; once at src/data/footer.json),
 //                    udseende/farver the colours (Colors.tsx;
 //                    udseende/farver/reservefarver the site's own while an app changes the pages'), udseende/logo the logo
 //                    and icon (BrandForm.tsx), udseende/dele the parts (Library.tsx PartsHome): udseende/dele/editor the editor's, every
@@ -132,12 +133,13 @@ import {
 import Colors, { colorsOf, FALLBACK_ROUTE } from './Colors';
 import { applyColors, applyMotion } from './theme';
 import SideColumn from './SideColumn';
+import HeaderSettings from './HeaderSettings';
+import FooterSettings from './FooterSettings';
 import { apps, notOffered } from './registry';
 import {
   Account,
   Blocks,
   Company,
-  Header,
   List,
   Lists,
   PartsHome,
@@ -168,6 +170,7 @@ import { arrived, screenOf, up } from './nav';
 import { siteT, siteText, t } from './i18n';
 import { snackbar } from '../lib/snackbar';
 import { appRouteOf } from '../lib/appRoute.mjs';
+import { movedRoute } from './movedRoutes.mjs';
 import { appType, clearNotifications, isOn, remember, signOff, stopServerWait, syncDevice, told, waitOnServer } from './notificationData';
 import Notifications from './Notifications';
 import { EditorOwn, InEditor } from './standard/view';
@@ -262,32 +265,15 @@ function taken(address: string, relations: Record<Relation, Option[]>, redirects
   return { text: t.app.addressRedirects(address, name), redirect: { end, name, via } };
 }
 
-// Screens that have moved, by their old address: a link or a bookmark to one opens it where it is now.
-const MOVED: Record<string, string> = {
-  farver: 'udseende/farver',
-  'virksomheden/logo': 'udseende/logo',
-  'tema/blokvalg': 'blokvalg',
-  dele: 'udseende/dele',
-  tema: 'udseende',
-  'tema/farver': 'udseende/farver',
-  'tema/logo': 'udseende/logo',
-  'tema/dele': 'udseende/dele',
-  'tema/dele/editor': 'udseende/dele/editor',
-  'virksomheden/bank': 'virksomheden/betaling/bank',
-  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',
-  'promovering/mailchimp': 'apps/mailchimp',
+// The app store's screens that have moved (movedRoutes.mjs has the others).
+const STORE_MOVED: Record<string, string> = {
   [STORE_BEFORE]: STORE_ROUTE,
   [`${STORE_BEFORE}/temaer`]: STORE_THEMES,
 };
 
 // The editor's address after the "#" (nav.ts screenOf).
 function routeOf(hash: string) {
-  const route = MOVED[screenOf(hash)] ?? screenOf(hash);
+  const route = movedRoute(screenOf(hash), STORE_MOVED);
   // An app's settings: on the screen with its category, when it has one ("Analytics", AppList.tsx settingsRoute), and so
   // the pages of their fields (Field.page) after them. Otherwise they are on the Settings tab of its page: apps/<id>
   // (a field's page, apps/<id>/indstillinger/<field>, stays, drawn by the same page).
@@ -734,7 +720,6 @@ function Page({ route, files, env, user, builtAt, onLogout }: PageProps) {
   if (!route) return <Start builtAt={builtAt} />;
   if (route === 'konto') return <Account user={user} files={files} onLogout={onLogout} />;
   if (route === 'notifikationer') return <Notifications />;
-  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} />;
@@ -755,6 +740,8 @@ function Page({ route, files, env, user, builtAt, onLogout }: PageProps) {
   if (route === 'udseende/ikonpakker') return <IconPacks env={env} files={files} />;
   if (route === 'udseende/bevaegelse') return <MotionSchemes env={env} files={files} />;
   if (route === 'udseende/sidekolonne') return <SideColumn env={env} files={files} />;
+  if (route === 'udseende/header') return <HeaderSettings env={env} />;
+  if (route === 'udseende/footer') return <FooterSettings env={env} />;
   // A theme installed has its page; one from the store that is not (or not yet built), its page in the store.
   const themeShown = route.startsWith('udseende/temaer/') && themes.find((x) => x.id === route.slice(16));
   if (themeShown) return <ThemePage key={themeShown.id} of={themeShown} env={env} files={files} />;
@@ -819,7 +806,8 @@ function Page({ route, files, env, user, builtAt, onLogout }: PageProps) {
   }
 
   const found = collectionOf(collections, route);
-  const file = files.find((f) => f.path === route);
+  // An optional file (the header's) that the site has not got yet opens empty; the first save makes it.
+  const file = files.find((f) => f.path === route) ?? (found?.dataFile?.optional ? { path: route, oid: '', text: '{}\n' } : undefined);
   if (!found || !file)
     return (
       <Screen title={t.app.notFound} back={{ href: '#', label: siteName }}>

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>