@morphemecms/cms 0.13.0 → 0.14.0-next-20261107093528

package/site/apps.ts

@@ -1,11 +1,17 @@
-// The apps on the site (src/apps/<app>/, packages/editor/src/apps.ts): which are installed under
-// "Indstillinger" › "Apps" in the editor (apps.json), and each app's settings (apps/<app>.json), as the
+// The apps on the site (src/apps/<app>/, packages/editor/src/apps.ts): which are installed (and which of them are
+// turned off) under "Indstillinger" › "Apps" in the editor (apps.json), and each app's settings (apps/<app>.json), as the
 // site's build reads them. What an app puts on every page (AppSlot.astro) is there only while it is
 // installed; what was made with it (a pop-up, a block on a page) stays when it is uninstalled.
 import data from '@data/apps.json';
+import { activeOf, readAppsFile } from '../lib/appsFile.mjs';
 
-/** The ids of the apps installed. */
-export const installed: string[] = Array.isArray(data.installed) ? data.installed.map(String) : [];
+const state = readAppsFile(JSON.stringify(data));
+
+/** The ids of the apps installed, also those turned off. */
+export const installed: string[] = state.installed;
+
+/** The ids of the apps installed and not turned off: what runs, and puts something on the site. */
+export const active: string[] = activeOf(state);
 
 // Each app's saved settings, by its id (the file's name).
 const saved = Object.fromEntries(

package/site/consent.ts

@@ -1,5 +1,5 @@
 // What the cookie banner asks about: the categories of cookies (@morphemecms/cms/lib/cookieCategories.mjs) of what the
-// installed apps load with their settings (`cookies` in their index.ts: Google Analytics statistics, Google Ads
+// active apps (installed, not turned off) load with their settings (`cookies` in their index.ts: Google Analytics statistics, Google Ads
 // marketing, Google Tag Manager both), each a yes or no of its own; and whether the site has the banner (and
 // "Cookieindstillinger" in the footer) at all: when it is switched on ("Privatliv" › "Cookiebanner",
 // src/data/cookies.json) and there is something to ask about. For the theme (Base.astro, Footer.astro,
@@ -8,7 +8,7 @@ import type { AppDefinition } from '../src/apps';
 import { appIdOf } from '../src/apps';
 import { CONSENT_CATEGORIES, type ConsentCategory } from '../lib/cookieCategories.mjs';
 import cookies from '@data/cookies.json';
-import { installed, settingsOf } from './apps';
+import { active, settingsOf } from './apps';
 
 // Only the apps' index.ts, without their blocks (as opens.ts).
 const appFiles = import.meta.glob<{ default: AppDefinition }>('/src/apps/*/index.ts', { eager: true });
@@ -16,7 +16,7 @@ const appFiles = import.meta.glob<{ default: AppDefinition }>('/src/apps/*/index
 const asked = new Set(
   Object.entries(appFiles).flatMap(([path, { default: app }]) => {
     const id = appIdOf(path);
-    return installed.includes(id) ? (app.cookies?.(settingsOf(id, app.settings?.values)) ?? []) : [];
+    return active.includes(id) ? (app.cookies?.(settingsOf(id, app.settings?.values)) ?? []) : [];
   }),
 );
 

package/site/defineSite.mjs

@@ -54,7 +54,7 @@ const CHOICES = {
 
 /** The same on every site. */
 const STANDARD = {
-  /** The Worker's settings: the editor turns R2 caching on and off in them ("Indstillinger" › "Avanceret", src/r2Caching.ts). */
+  /** The Worker's settings: the editor turns R2 caching on and off in them (Settings › Developer › Caching and builds, src/r2Caching.ts). */
   wrangler: 'wrangler.jsonc',
   /** The folders the editor loads: the blog posts, the pages, the data files, the pictures and the PDFs, videos and zip
    * files (shown with the pictures in "Filer", at /filer/<name> on the site). */

package/site/icons.d.mts

@@ -154,6 +154,7 @@ export const MATERIAL_SYMBOLS: {
     desktop: string;
     'device-mobile': string;
     'door-open': string;
+    'dots-three-vertical': string;
     'download-simple': string;
     'envelope-simple': string;
     'envelope-simple-fill': string;
@@ -345,6 +346,7 @@ export const LUCIDE: {
     desktop: string;
     'device-mobile': string;
     'door-open': string;
+    'dots-three-vertical': string;
     'download-simple': string;
     'envelope-simple': string;
     'envelope-simple-fill': string;
@@ -536,6 +538,7 @@ export const PACK_MAPS: {
         desktop: string;
         'device-mobile': string;
         'door-open': string;
+        'dots-three-vertical': string;
         'download-simple': string;
         'envelope-simple': string;
         'envelope-simple-fill': string;
@@ -725,6 +728,7 @@ export const PACK_MAPS: {
         desktop: string;
         'device-mobile': string;
         'door-open': string;
+        'dots-three-vertical': string;
         'download-simple': string;
         'envelope-simple': string;
         'envelope-simple-fill': string;

package/site/icons.mjs

@@ -168,6 +168,7 @@ export const MATERIAL_SYMBOLS = {
   desktop: 'desktop_windows',
   'device-mobile': 'mobile',
   'door-open': 'door_open',
+  'dots-three-vertical': 'more_vert',
   'download-simple': 'download',
   'envelope-simple': 'mail',
   'envelope-simple-fill': 'mail-fill',
@@ -360,6 +361,7 @@ export const LUCIDE = {
   desktop: 'monitor',
   'device-mobile': 'smartphone',
   'door-open': 'door-open',
+  'dots-three-vertical': 'ellipsis-vertical',
   'download-simple': 'download',
   'envelope-simple': 'mail',
   'envelope-simple-fill': 'mail-fill',

package/site/pageColors.ts

@@ -1,5 +1,5 @@
 // The colours of one page, for the theme (Base.astro, which knows no app by name): the site's own (src/data/colors.json,
-// "Farver"), changed by the apps installed that change a page's colours (hooks/page-colors.ts, PageColorsHook in
+// "Farver"), changed by the active apps (installed, not turned off) that change a page's colours (hooks/page-colors.ts, PageColorsHook in
 // @morphemecms/cms/lib/hooks.ts), in the order of their ids, each given the colours the one before left. An app gets the
 // page's address, its pictures, its own settings, the colours' roles, and the pixels of a picture read small, so it
 // never reads the site's files itself; what it gives is kept only when it is the site's colours, by their names, and
@@ -12,7 +12,7 @@ import path from 'node:path';
 import sharp from 'sharp';
 import colors from '@data/colors.json';
 import { colorFields, colorPairs, colorRoles } from '@site/colors';
-import { installed, settingsOf } from './apps';
+import { active, settingsOf } from './apps';
 import { appIdOf, type AppDefinition } from '@morphemecms/cms/src/apps';
 import { colorProblems, lowContrast, MODES, type Colors } from '@morphemecms/cms/lib/colors';
 import { completeColors } from '@morphemecms/cms/lib/dynamic-colors';
@@ -31,7 +31,7 @@ const appFiles = import.meta.glob<{ default: AppDefinition }>('/src/apps/*/index
 const hookFiles = import.meta.glob<{ default: PageColorsHook }>('/src/apps/*/hooks/page-colors.ts', { eager: true });
 const hooks = Object.entries(hookFiles)
   .map(([file, { default: hook }]) => ({ id: appIdOf(file), hook }))
-  .filter(({ id }) => installed.includes(id))
+  .filter(({ id }) => active.includes(id))
   .sort((a, b) => a.id.localeCompare(b.id))
   .map(({ id, hook }) => ({
     id,

package/site/siteCsp.d.mts

@@ -1,4 +1,4 @@
-/** What the site's installed apps load from elsewhere, and the addresses allowed in the editor.
+/** What the site's active apps (installed, not turned off) load from elsewhere, and the addresses allowed in the editor.
  * @returns {import('../lib/csp.mjs').Sources[]} */
 export function siteSources(): import("../lib/csp.mjs").Sources[];
 /** What is wrong with the addresses allowed in the editor (src/data/csp.json): not JSON, or not written as an app's

package/site/siteCsp.mjs

@@ -6,6 +6,7 @@
 // Read by the build (packages/editor/astro.mjs) and by npm run check:content (appCspProblems), so no TypeScript here.
 import { existsSync, readdirSync, readFileSync } from 'node:fs';
 import { pathToFileURL } from 'node:url';
+import { activeOf, readAppsFile } from '../lib/appsFile.mjs';
 import { allows, sourcesProblems } from '../lib/csp.mjs';
 
 // The site's src/, from its root (the working directory).
@@ -22,10 +23,10 @@ const appSources = (app) => {
 const ALLOWED = new URL('data/csp.json', SRC);
 const allowedSources = () => (existsSync(ALLOWED) ? JSON.parse(readFileSync(ALLOWED, 'utf8')) : {});
 
-/** What the site's installed apps load from elsewhere, and the addresses allowed in the editor.
+/** What the site's active apps (installed, not turned off) load from elsewhere, and the addresses allowed in the editor.
  * @returns {import('../lib/csp.mjs').Sources[]} */
 export function siteSources() {
-  return [...(json('data/apps.json').installed ?? []).map(appSources), allowedSources()];
+  return [...activeOf(readAppsFile(readFileSync(new URL('data/apps.json', SRC), 'utf8'))).map(appSources), allowedSources()];
 }
 
 /** What is wrong with the addresses allowed in the editor (src/data/csp.json): not JSON, or not written as an app's

package/src/ActionParts.tsx

@@ -1,4 +1,4 @@
-// "Dele" › "UI-komponenter" (BlockParts.tsx), the group "Handlinger": the theme's buttons that do more than one thing
+// "Parts" › "UI-komponenter" (BlockParts.tsx), the group "Handlinger": the theme's buttons that do more than one thing
 // (packages/editor/theme/ui/, through @site/editor) as the site draws them: button groups in both kinds with toggles on
 // and off, in every size and in both shapes, segmented buttons with one and with several chosen, split buttons in their
 // kinds and sizes, closed and with the menu open, and FAB menus in their colour sets, from FABs of each size, closed

package/src/Advanced.tsx

@@ -1,4 +1,4 @@
-// "Avanceret" (#advanced), under "Indstillinger": R2 caching, the copy of the site's files in Cloudflare R2 the Worker
+// "Caching and builds" (#developer/caching), under "Developer" (Library.tsx Developer): R2 caching, the copy of the site's files in Cloudflare R2 the Worker
 // answers the editor from (packages/editor/worker/files.js), turned on and off with "Aktiveret" in the Worker's settings (r2Caching.ts),
 // saved at once in its own commit. Off, the Worker asks GitHub for everything. It can only be turned on when Cloudflare
 // has the bucket (the Worker asks, /api/r2), else a deploy would fail; under the switch, why not, and, until the site is
@@ -13,7 +13,7 @@ import { EmptyNote, GroupTitle, LinkButton, MenuRow, ProblemNote, SupportingText
 import { ConflictError, type RepoFile } from './github';
 import type { Env } from './App';
 import { savedText } from './deploy';
-import { backFrom } from './site';
+import { backToDeveloper } from './Library';
 import {
   bucketOf,
   JURISDICTIONS,
@@ -32,7 +32,7 @@ import { buildSettingsOf, withBuildSetting, type BuildSetting } from './buildSet
 import { BUILD_SETTINGS_PATH } from '../lib/build-settings.mjs';
 import { siteT, t } from './i18n';
 
-export const ADVANCED_ROUTE = 'advanced';
+export const CACHING_ROUTE = 'developer/caching';
 
 // "Placering" when Cloudflare places the bucket (no jurisdiction).
 const AUTO = 'auto';
@@ -170,7 +170,7 @@ export default function Advanced({ env }: { env: Env }) {
   }
 
   return (
-    <Screen title={t.common.parts.advanced} wide back={backFrom(ADVANCED_ROUTE)}>
+    <Screen title={t.common.parts.caching} wide back={backToDeveloper}>
       <section className="mb-8">
         <GroupTitle>{t.advanced.r2Caching}</GroupTitle>
         <div className="px-4">

package/src/App.tsx

@@ -26,16 +26,17 @@
 //                    appearance/footer the footer's texts and links with its preview (FooterSettings.tsx; once at src/data/footer.json),
 //                    appearance/colors the colours (Colors.tsx;
 //                    appearance/colors/fallback-colors the site's own while an app changes the pages'),
-//                    appearance/parts the parts (Library.tsx PartsHome): appearance/parts/editor the editor's, every
-//                    one in every state (Parts.tsx), appearance/parts/ui the theme's UI components, appearance/parts/blocks the
-//                    blocks, the standard ones and the apps', and appearance/parts/list/<list> each kind of a list of kinds
-//                    ("Promovering"), its own and the apps' (BlockParts.tsx), and appearance/parts/values the
+//   developer          the developer screens (Library.tsx Developer), under "Settings": developer/caching the copy of the site's files in R2 and the build settings (Advanced.tsx), and
+//                    developer/parts the parts (Library.tsx PartsHome): developer/parts/editor the editor's, every
+//                    one in every state (Parts.tsx), developer/parts/ui the theme's UI components, developer/parts/blocks the
+//                    blocks, the standard ones and the apps', and developer/parts/list/<list> each kind of a list of kinds
+//                    ("Promovering"), its own and the apps' (BlockParts.tsx), and developer/parts/values the
 //                    theme's design tokens, "Værdier" (Tokens.tsx)
 //   block-settings         the blocks that can be put in, "Blokindstillinger" (BlockSettings.tsx)
-//   advanced        "Avanceret", under "Indstillinger": the copy of the site's files in R2 (Advanced.tsx)
 //   morpheme         "Morpheme", under "Indstillinger": the CMS's version, a newer one and its notes, an update's progress (CmsPage.tsx)
 //   licenses         "Licenser", under "Indstillinger": the licences of what the site and the editor are made with, and
 //                    licenses/<id> one with its text (Licenses.tsx)
+//   status           "System status", from the footer: GitHub's and Cloudflare's status (ServiceStatus.tsx)
 //   apps             the apps that come with the site, apps/<app> one with its button to install it and, while it
 //                    is installed, the tabs of its page (AppList.tsx AppPage): Settings at apps/<app>, with its settings
 //                    form (also on the screen with its category, analytics/<app>, AppList.tsx settingsRoute), and
@@ -97,9 +98,10 @@ import { BlocksParts, ComponentParts, KindParts } from './BlockParts';
 import Tokens from './Tokens';
 import BrandForm from './BrandForm';
 import BlockSettings from './BlockSettings';
-import Advanced, { ADVANCED_ROUTE } from './Advanced';
+import Advanced, { CACHING_ROUTE } from './Advanced';
 import CmsPage, { CMS_ROUTE } from './CmsPage';
 import Licenses, { LICENSES_ROUTE, LicensePage } from './Licenses';
+import ServiceStatus, { STATUS_ROUTE } from './ServiceStatus';
 import { StoreThemePage } from './ThemeStore';
 import { ThemeStoreScreen } from './ThemeStoreScreen';
 import {
@@ -114,7 +116,7 @@ import {
   StoreAppPage,
   StorePage,
 } from './AppList';
-import { installedApps } from './apps';
+import { activeApps, installedApps } from './apps';
 import {
   DEVELOPER_ROUTE,
   readApp,
@@ -142,6 +144,8 @@ import {
   Account,
   Blocks,
   Company,
+  DEV_MENU_ROUTE,
+  Developer,
   List,
   Lists,
   PartsHome,
@@ -624,7 +628,7 @@ function Editor() {
 
   // What the installed apps have to say (AppNotifications in apps.ts): asked when the editor opens and every 15 minutes
   // while it is open; each comes once, at the bottom and under "Notifikationer", while its type is on (notificationData.ts).
-  const notifying = installedApps(files ?? [])
+  const notifying = activeApps(files ?? [])
     .filter((id) => apps.some((a) => a.id === id && a.notifications))
     .join();
   useEffect(() => {
@@ -784,9 +788,11 @@ function Page({ route, files, env, user, builtAt, onLogout }: PageProps) {
     return <Colors env={env} files={files} fallback={route === FALLBACK_ROUTE} />;
   if (route === 'company/logo') return <BrandForm env={env} />;
   if (route === 'block-settings') return <BlockSettings env={env} files={files} />;
-  if (route === ADVANCED_ROUTE) return <Advanced env={env} />;
+  if (route === DEV_MENU_ROUTE) return <Developer />;
+  if (route === CACHING_ROUTE) return <Advanced env={env} />;
   if (route === CMS_ROUTE) return <CmsPage />;
   if (route === LICENSES_ROUTE) return <Licenses />;
+  if (route === STATUS_ROUTE) return <ServiceStatus />;
   if (route.startsWith(`${LICENSES_ROUTE}/`)) return <LicensePage key={route} id={route.slice(LICENSES_ROUTE.length + 1)} />;
   if (route === 'apps') return <Apps env={env} files={files} />;
   if (route === STORE_ROUTE) return <StorePage env={env} files={files} />;
@@ -807,14 +813,13 @@ function Page({ route, files, env, user, builtAt, onLogout }: PageProps) {
   const [, screenApp, screenId, ...deeper] = route.split('/');
   const ownScreen =
     route.startsWith('apps/') && !deeper.length && apps.find((a) => a.id === screenApp && screenId && a.screens?.[screenId]);
-  if (ownScreen && installedApps(files).includes(ownScreen.id))
-    return <AppScreenPage key={route} app={ownScreen} id={screenId} env={env} />;
-  if (route === 'appearance/parts') return <PartsHome />;
-  if (route === 'appearance/parts/editor') return <Parts env={env} />;
-  if (route === 'appearance/parts/ui') return <ComponentParts />;
-  if (route === 'appearance/parts/blocks') return <BlocksParts />;
-  if (route.startsWith('appearance/parts/list/')) return <KindParts key={route} id={route.slice('appearance/parts/list/'.length)} />;
-  if (route === 'appearance/parts/values') return <Tokens />;
+  if (ownScreen && activeApps(files).includes(ownScreen.id)) return <AppScreenPage key={route} app={ownScreen} id={screenId} env={env} />;
+  if (route === 'developer/parts') return <PartsHome />;
+  if (route === 'developer/parts/editor') return <Parts env={env} />;
+  if (route === 'developer/parts/ui') return <ComponentParts />;
+  if (route === 'developer/parts/blocks') return <BlocksParts />;
+  if (route.startsWith('developer/parts/list/')) return <KindParts key={route} id={route.slice('developer/parts/list/'.length)} />;
+  if (route === 'developer/parts/values') return <Tokens />;
   if (route.startsWith('deleted/')) return <Deleted id={route.slice('deleted/'.length)} files={files} env={env} />;
   // company/<part>, or company/<part>/<its part> (Part.parts).
   const [, companyId, ownId, ...more] = route.split('/');

package/src/AppEnabledSwitch.tsx

@@ -0,0 +1,21 @@
+// The "Aktiveret" (Enabled) switch of an installed app, shown on its page's Settings tab directly below the app's description.
+// Exposes AppEnabledSwitch (default). Depends on ./ui (SwitchRow) and ./i18n (t).
+import { SwitchRow } from './ui';
+import { t } from './i18n';
+
+/** `enabled`: the app is not turned off; `busy`: something is saving; `onEnabled`: called with the new state. */
+export default function AppEnabledSwitch({
+  enabled,
+  busy,
+  onEnabled,
+}: {
+  enabled: boolean;
+  busy: boolean;
+  onEnabled: (on: boolean) => void;
+}) {
+  return (
+    <div className="mb-8 px-4">
+      <SwitchRow label={t.apps.enabled} texts={[t.library.on, t.library.off]} selected={enabled} disabled={busy} onChange={onEnabled} />
+    </div>
+  );
+}

package/src/AppList.tsx

@@ -1,11 +1,12 @@
 // "Indstillinger" › "Apps" (#apps): the apps installed (src/apps/, apps.ts: the site's own and those from the app store,
 // with one from the store not yet built as "Installeres…"), each with who made it under its name and, from the store,
-// that it has a newer version, with search (by name, who made it and what it does), the order (A–Å, Å–A, kept in this
+// that it has a newer version or is turned off (liveStatus, also in "Appstore"), with search (by name, who made it and what it does), the order (A–Å, Å–A, kept in this
 // browser) and headings by the first letter, as the lists under "Indhold" have. "Indstillinger" › "Appstore"
 // (#settings/appstore): all apps, those in the app store (store.ts) and the site's own, installed or not, with search (by name, what they
 // do, who made them and the words they are found by), the same order and a funnel by category (only apps: the themes are in "Theme store", ThemeStoreScreen.tsx; the search row and the
 // store notices both screens share are StoreSearchRow.tsx, StoreStatus.tsx and storeSort.tsx). An app's page
-// (#apps/<app>) is the same for every app and without examples: its name, who made it, whether it is installed, its
+// (#apps/<app>) is the same for every app and without examples: its name, who made it, whether it is installed (or turned
+// off, with the switch "Aktiveret" right below its description on the Settings tab, AppEnabledSwitch.tsx), its
 // version (from the store) and what it does, "Installer" (or "Opdater til …"); installed, it has two tabs: "Indstillinger"
 // (#apps/<app>: its settings form, saved with "Gem ændringer" in their file, config.apps.settings, also on the screen
 // under "Indstillinger" with its kind, "Analytics" or "Promovering"; AppFormPage.tsx; then what it shows itself, what it
@@ -32,7 +33,8 @@ import { ConflictError, type Change, type RepoFile } from './github';
 import { cookieChanges, inCookieList } from './cookieList';
 import type { Env } from './App';
 import { ask, choose } from './ask';
-import { installedApps, settingsFile, type SiteApp } from './apps';
+import { appsState, installedApps, settingsFile, type SiteApp } from './apps';
+import { appsFileText, withInstalled, withOff } from '../lib/appsFile.mjs';
 import { AnyIcon } from './icon';
 import {
   appCategories,
@@ -59,7 +61,7 @@ import { config } from '@site/editor';
 import { allThemes, ThemeRow, useThemeCatalog } from './ThemeStore';
 import { siteT, siteText, t } from './i18n';
 import { OwnerLicenses, StoreLicenseRows } from './Licenses';
-import { StoreFooter, StoreNotice, StoreRound, useStoreConnected, useStoreKey } from './StoreStatus';
+import { StoreNotice, StoreRound, useStoreConnected, useStoreKey } from './StoreStatus';
 import { StoreSearchRow, useStateFilter } from './StoreSearchRow';
 import { sortChoice, useSort } from './storeSort';
 import { told } from './notificationData';
@@ -68,6 +70,7 @@ import AppInfoTab from './AppInfoTab';
 import AppAdds from './AppAdds';
 import AppFormPage from './AppFormPage';
 import AppSettingsTab from './AppSettingsTab';
+import AppEnabledSwitch from './AppEnabledSwitch';
 import { INFO_KEY } from '../lib/appRoute.mjs';
 import { busyFor } from './busyAction.mjs';
 
@@ -185,6 +188,10 @@ export function kindsOf(app: SiteApp) {
 
 const statusOf = (installed: boolean) => (installed ? t.apps.installed : t.apps.notInstalled);
 
+/** What an installed app's row and page head say instead of "Installed": "Deaktiveret" while it is turned off, else "Opdatering
+ * findes" when it has a newer version; undefined when neither. */
+const liveStatus = (off: boolean, update: boolean) => (off ? t.apps.deactivated : update ? t.apps.updateFound : undefined);
+
 /** The store's catalog (store.ts) for a screen: null while it is read, 'failed' when it could not be; `skip`: not read
  * (the page of one of the site's own apps). */
 function useCatalog(env: Env, skip = false): ShownApp[] | null | 'failed' {
@@ -219,6 +226,7 @@ const storeIcon = (name?: string) => <LeadingIcon>{name && <AnyIcon name={name}
 
 export function Apps({ env, files }: { env: Env; files: RepoFile[] }) {
   const installed = installedApps(files);
+  const { off } = appsState(files);
   const catalog = useCatalog(env);
   const store = Array.isArray(catalog) ? catalog : [];
   const [query, setQuery] = useKept('apps-search', '');
@@ -236,7 +244,7 @@ export function Apps({ env, files }: { env: Env; files: RepoFile[] }) {
         publisher: a.publisher,
         hint: a.hint,
         icon: <LeadingIcon icon={a.icon} />,
-        status: updateOf(a, catalog) ? t.apps.updateFound : '',
+        status: liveStatus(off.includes(a.id), !!updateOf(a, catalog)) ?? '',
       })),
     ...installed
       .filter((id) => !apps.some((a) => a.id === id))
@@ -320,14 +328,14 @@ const developerHref = (name: string) => `#${DEVELOPER_ROUTE}/${slugify(name)}`;
 
 /** An app's row in "Appstore" and on a developer's page: its icon, its name, what it does, and whether it is installed,
  * opening its page. */
-function AppRow({ app, installed }: { app: ReturnType<typeof allApps>[number]; installed: boolean }) {
+function AppRow({ app, installed, off }: { app: ReturnType<typeof allApps>[number]; installed: boolean; off: boolean }) {
   return (
     <ListItem
       href={`#apps/${app.id}`}
       leading={app.glyph}
       headline={app.label}
       supporting={app.hint}
-      count={installed && t.apps.installed}
+      count={installed && (liveStatus(off, false) ?? t.apps.installed)}
       arrow
     />
   );
@@ -337,6 +345,7 @@ function AppRow({ app, installed }: { app: ReturnType<typeof allApps>[number]; i
  * own), each opening its page. */
 export function DeveloperPage({ slug, env, files }: { slug: string; env: Env; files: RepoFile[] }) {
   const installed = installedApps(files);
+  const { off } = appsState(files);
   const catalog = useCatalog(env);
   const themeCatalog = useThemeCatalog(env);
   const theirs = allApps(catalog)
@@ -364,7 +373,7 @@ export function DeveloperPage({ slug, env, files }: { slug: string; env: Env; fi
       {theirs.length > 0 && (
         <Group title={t.apps.developerApps}>
           {theirs.map((a) => (
-            <AppRow key={a.id} app={a} installed={installed.includes(a.id)} />
+            <AppRow key={a.id} app={a} installed={installed.includes(a.id)} off={off.includes(a.id)} />
           ))}
         </Group>
       )}
@@ -404,6 +413,7 @@ export function StorePage({ env, files }: { env: Env; files: RepoFile[] }) {
 
 function StoreScreen({ env, files, again }: { env: Env; files: RepoFile[]; again: () => void }) {
   const installed = installedApps(files);
+  const { off } = appsState(files);
   const key = useStoreKey();
   const catalog = useCatalog(env);
   const connected = useStoreConnected(env);
@@ -449,12 +459,11 @@ function StoreScreen({ env, files, again }: { env: Env; files: RepoFile[]; again
         appGroups.map((g) => (
           <Group key={g.key ?? 'all'} title={g.key ?? undefined}>
             {g.items.map((a) => (
-              <AppRow key={a.id} app={a} installed={installed.includes(a.id)} />
+              <AppRow key={a.id} app={a} installed={installed.includes(a.id)} off={off.includes(a.id)} />
             ))}
           </Group>
         ))
       )}
-      <StoreFooter keyInfo={key} again={again} />
     </Screen>
   );
 }
@@ -517,7 +526,7 @@ export async function autoUpdate(env: Env, files: RepoFile[]) {
       }
       if (changedFiles(app.id, record, current).length) continue;
       const wanted = { files: await env.store.files(next), record: recordOf(next) };
-      const changes = [...appChanges(app.id, current, wanted, installed, file), ...cookieChanges(app.id, cookiesIn(wanted.files), files)];
+      const changes = [...appChanges(app.id, current, wanted, file), ...cookieChanges(app.id, cookiesIn(wanted.files), files)];
       const change = t.app.changes.updated(kindAndName(t.app.changes.app, next.label), next.version);
       await saveApp(env, siteT.apps.commit.update(next.written, next.version), change, changes, file);
       updated.set(app.id, next.version);
@@ -542,7 +551,6 @@ function useStoreActions(env: Env, files: RepoFile[]) {
   // 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(
@@ -566,7 +574,7 @@ function useStoreActions(env: Env, files: RepoFile[]) {
       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);
+      await saveApp(env, text.commit, text.change, [...appChanges(id, current, wanted, file), ...cookies], file);
       env.notify({ text: text.done, kind: text.kind ?? 'saved' });
       return true;
     } catch (e) {
@@ -854,7 +862,7 @@ 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<'install' | 'uninstall' | null>(null);
+  const [toggling, setToggling] = useState<'install' | 'uninstall' | 'switch' | null>(null);
   const store = useStoreActions(env, files);
   const saving = !!toggling || store.saving;
   const catalog = useCatalog(env);
@@ -863,6 +871,7 @@ function AppContent({ app, env, files, tab, fields }: AppProps & { tab: AppTab;
   const inStore = Array.isArray(catalog) ? catalog.find((a) => a.id === app.id) : undefined;
   const installed = installedApps(files);
   const on = installed.includes(app.id);
+  const off = on && appsState(files).off.includes(app.id);
   // Where it is used: while it is, it cannot be uninstalled.
   const uses = on ? usesOf(app, files) : [];
   const stuck = uses.length > 0;
@@ -874,8 +883,7 @@ function AppContent({ app, env, files, tab, fields }: AppProps & { tab: AppTab;
     if (!yes && !(await ask(t.apps.askUninstall(app.label), t.apps.uninstall))) return;
     if (!yes && app.store) return store.uninstall(app.id, app.label, asWritten(app).label);
     const file = files.find((f) => f.path === config.apps.installed);
-    const next = installed.filter((id) => id !== app.id).concat(yes ? [app.id] : []);
-    const text = `${JSON.stringify({ installed: [...new Set(next)].sort() }, null, 2)}\n`;
+    const text = appsFileText(withInstalled(appsState(files), app.id, yes));
     if (text === file?.text) return;
     setToggling(yes ? 'install' : 'uninstall');
     notify({ text: yes ? t.apps.installing : t.apps.uninstalling });
@@ -895,14 +903,32 @@ function AppContent({ app, env, files, tab, fields }: AppProps & { tab: AppTab;
     }
   }
 
+  // Turned on or off, saved at once in its own commit: the app stays installed with its folder, settings and version.
+  async function turn(enabled: boolean) {
+    const file = files.find((f) => f.path === config.apps.installed);
+    const text = appsFileText(withOff(appsState(files), app.id, !enabled));
+    if (text === file?.text) return;
+    setToggling('switch');
+    try {
+      const change = t.app.changes[enabled ? 'turnedOn' : 'turnedOff'](kindAndName(t.app.changes.app, app.label));
+      const content = { path: config.apps.installed, content: text, oid: file?.oid || null };
+      await saveApp(env, siteT.apps.commit[enabled ? 'turnOn' : 'turnOff'](asWritten(app).label), change, [content], file);
+      notify({ text: change, kind: 'saved' });
+    } catch (e) {
+      notify({ text: e instanceof ConflictError ? e.message : t.common.notSaved((e as Error).message), error: true, kind: 'failed' });
+    } finally {
+      setToggling(null);
+    }
+  }
+
   return (
     <div>
       <AppHead
         icon={<LeadingIcon icon={app.icon} selected={on} />}
         label={app.label}
         publisher={app.publisher}
-        status={on && update ? t.apps.updateFound : statusOf(on)}
-        version={app.store && versionOf(app)}
+        status={(on && liveStatus(off, !!update)) || statusOf(on)}
+        version={versionOf(app) || app.version}
         hint={app.hint}
       />
       {(!on || (update && app.store)) && (
@@ -920,12 +946,14 @@ function AppContent({ app, env, files, tab, fields }: AppProps & { tab: AppTab;
       )}
       {on && tab === 'settings' ? (
         <>
+          <AppEnabledSwitch enabled={!off} busy={saving} onEnabled={turn} />
           {fields}
           <AppSettingsTab
             app={app}
             env={env}
             files={files}
             busy={saving}
+            enabled={!off}
             uninstalling={toggling === 'uninstall' || store.busy(app.id, 'uninstall')}
             stuck={stuck}
             onUninstall={() => install(false)}
@@ -946,7 +974,7 @@ function AppContent({ app, env, files, tab, fields }: AppProps & { tab: AppTab;
               id={`app/${app.id}`}
               name={app.label}
               author={app.publisher}
-              version={app.store && versionOf(app)}
+              version={versionOf(app) || app.version}
               declared={app}
             />
           }

package/src/AppSettingsTab.tsx

@@ -1,5 +1,6 @@
-// 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 (it shows the loading indicator while it uninstalls).
+// The Settings tab of an installed app's page, below its head and its settings form: what the app shows itself (`page`,
+// not while it is off), 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). The "Aktiveret" switch is AppEnabledSwitch.tsx, in AppList.tsx.
 // Exposes AppSettingsTab (default). Depends on AppAdds.tsx, AppNotificationSwitches.tsx, ./ui and notificationData.ts.
 import { Button, SupportingText } from './ui';
 import AppAdds from './AppAdds';
@@ -10,12 +11,14 @@ import type { SiteApp } from './apps';
 import { appType } from './notificationData';
 import { siteText, t } from './i18n';
 
-/** `busy`: something is saving; `uninstalling`: this app is uninstalled now; `stuck`: the app is in use, so it cannot be uninstalled; `onUninstall`: "Afinstaller". */
+/** `busy`: something is saving; `enabled`: the app is not turned off (hides `app.page` while it is off); `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,
+  enabled,
   uninstalling,
   stuck,
   onUninstall,
@@ -24,6 +27,7 @@ export default function AppSettingsTab({
   env: Env;
   files: RepoFile[];
   busy: boolean;
+  enabled: boolean;
   uninstalling: boolean;
   stuck: boolean;
   onUninstall: () => void;
@@ -34,8 +38,8 @@ export default function AppSettingsTab({
   }));
   return (
     <>
-      {/* What the app shows itself (its `page`), while it is installed. */}
-      {app.page && (
+      {/* What the app shows itself (its `page`), while it is installed and not off. */}
+      {app.page && enabled && (
         <div data-app-page={app.id}>
           <app.page api={(path, init) => env.appApi(app.id, path, init)} />
         </div>