@morphemecms/cms 0.5.0 → 0.7.0

package/src/Library.tsx

@@ -1,4 +1,4 @@
-// The start screen of the editor (the parts of the site in groups, like a phone's settings) and the
+// The start screen of the editor (empty but for its title, status and FAB) and the
 // list of each part: blog posts newest first, the rest by name, prices and testimonials in their order
 // on the site (with arrows to move them), and a search. Lists that are not in an order of their own can
 // be sorted another way (a list of kinds, by its kinds too); the choice is kept in this browser. Pages
@@ -15,7 +15,6 @@ import {
   ClockCounterClockwise,
   CircleHalf,
   FileText,
-  Gauge,
   GithubLogo,
   GoogleLogo,
   List as ListIcon,
@@ -33,6 +32,7 @@ import { byText, entryData, type Collection, type Part, type PartScreen } from '
 import { config, countsOf, header, relationsOf, siteName } from '@site/editor';
 import { iconPack, iconPacks } from './iconPacks';
 import { theme, themes, type ThemeInfo } from './themes';
+import { StartFab } from './StartFab';
 import { StartStatus } from './StartStatus';
 import {
   appearance,
@@ -41,13 +41,11 @@ import {
   blockParts,
   collections,
   companyParts,
-  groups,
   icons,
   lists,
   listsShown,
   partScreens,
   seoParts,
-  settings,
 } from './site';
 import { readFields, splitFrontmatter } from './frontmatter.mjs';
 import { ConflictError, type RepoFile, type Viewer } from './github';
@@ -108,6 +106,7 @@ import {
   useThemeCatalog,
 } from './ThemeStore';
 import { STANDARD_THEME, STORE_ROUTE } from './store';
+import { REDIRECTS_ROUTE } from './Redirects';
 import { MOTION_SCHEMES, schemeInUse, type MotionScheme } from '../lib/motion';
 import { applyMotion } from './theme';
 import { colorsOf } from './Colors';
@@ -118,12 +117,12 @@ import { offBlocks } from './registry';
 import { sideChoicesOf, sideSettingOf } from './SideColumn';
 
 // Where a part opens: its list, or the file itself when it is one file (the menu).
-const hrefOf = (c: Collection) => (c.kind === 'files' && c.files.length === 1 ? `#${c.files[0].file}` : `#liste/${c.id}`);
+export const hrefOf = (c: Collection) => (c.kind === 'files' && c.files.length === 1 ? `#${c.files[0].file}` : `#liste/${c.id}`);
 
 const countOf = (c: Collection, files: RepoFile[]): number =>
   c.kind === 'files' ? c.files.length : files.filter((f) => f.path.startsWith(`${c.folder}/`)).length;
 
-// A part's name, where it opens, and how many entries it has (null for one file).
+// A part's name, where it opens, and how many entries it has (null for one file): for the main drawer (MainMenu.tsx).
 export function partOf(id: string, files: RepoFile[]): { label: string; href: string; count: number | null } {
   const { parts } = t.common;
   if (id === 'virksomheden') return { label: parts.company, href: '#virksomheden', count: null };
@@ -135,6 +134,26 @@ export function partOf(id: string, files: RepoFile[]): { label: string; href: st
   if (id === 'blokvalg') return { label: parts.blockSettings, href: '#blokvalg', count: null };
   if (id === 'apps') return { label: parts.apps, href: '#apps', count: null };
   if (id === 'appstore') return { label: t.apps.find, href: `#${STORE_ROUTE}`, count: null };
+  if (id === 'videresendelser') return { label: parts.redirects, href: `#${REDIRECTS_ROUTE}`, count: null };
+  const seoPart = seoParts.find((p) => p.id === id);
+  if (seoPart) return { label: seoPart.label, href: `#seo/${id}`, count: null };
+  // The screens under "Udseende" (Theme): the ones the editor has, then the site's own (appearance).
+  const appearanceLabel = {
+    temaer: parts.themes,
+    ikonpakker: parts.iconPacks,
+    bevaegelse: parts.motion,
+    sidekolonne: parts.sideColumn,
+    farver: parts.colors,
+    logo: parts.brand,
+    dele: parts.editorParts,
+  }[id];
+  const appearancePart = appearanceLabel ?? appearance.find((p) => p.id === id)?.label;
+  if (appearancePart) return { label: appearancePart, href: `#udseende/${id}`, count: null };
+  // The parts of a screen with parts ("Privatliv"): where each opens, or its screen's address with its id.
+  for (const screen of partScreens) {
+    const own = screen.parts.find((p) => p.id === id);
+    if (own) return { label: own.label, href: own.href ?? `#${screen.id}/${id}`, count: null };
+  }
   if (id === 'morpheme') return { label: parts.morpheme, href: `#${CMS_ROUTE}`, count: null };
   if (id === 'avanceret') return { label: parts.advanced, href: '#avanceret', count: null };
   if (id === 'licenser') return { label: parts.licenses, href: '#licenser', count: null };
@@ -145,7 +164,7 @@ export function partOf(id: string, files: RepoFile[]): { label: string; href: st
   return { label: c.label, href: hrefOf(c), count: c.kind === 'files' && c.files.length === 1 ? null : countOf(c, files) };
 }
 
-/** The parts of a group on the start screen (and in the sidebar), A–Å by their names in the editor's language. */
+/** The parts of a group on a screen with parts (Parts), A–Å by their names in the editor's language. */
 export const partsIn = (ids: string[], files: RepoFile[]) =>
   ids.map((id) => ({ id, ...partOf(id, files) })).sort((a, b) => byText(a.label, b.label));
 
@@ -156,41 +175,18 @@ function PartRow({ id, label, href, count }: { id: string } & ReturnType<typeof
   return <ListItem href={href} icon={icons[id]} headline={label} count={count} arrow />;
 }
 
-// The start screen, with the CMS version and when the site was last updated (StartStatus.tsx) under the title;
-// on a computer the groups two side by side.
-export function Start({ files, builtAt }: { files: RepoFile[]; builtAt: Date | null }) {
+// The start screen: the site's name, the CMS version and when the site was last updated (built on Cloudflare, App.tsx), as StartStatus.tsx shows them, under it, and the FAB
+// menu for a new page or post (StartFab.tsx). The parts of the site are in the main drawer (MainMenu.tsx); the rest is left empty for now.
+export function Start({ builtAt }: { builtAt: Date | null }) {
   return (
     <Screen
       title={siteName}
       wide
       status={<StartStatus builtAt={builtAt} />}
-      // The notifications, the settings and the account in the top bar, on a phone too (Screen.tsx).
+      // The notifications and the account in the top bar, on a phone too (Screen.tsx).
       home
     >
-      <div className="md:grid md:grid-cols-2 md:items-start md:gap-x-6">
-        {groups.map((g) => (
-          <Group key={g.title} title={g.title}>
-            {partsIn(g.ids, files).map((p) => (
-              <PartRow key={p.id} {...p} />
-            ))}
-          </Group>
-        ))}
-      </div>
-    </Screen>
-  );
-}
-
-/** "Indstillinger" (#indstillinger), which the gear in the top bar opens (Screen.tsx SettingsLink): the settings of the
- * whole site (settings in packages/editor/defaults/editor.ts: "Analytics", "Apps", "Privatliv", "Promovering", "Søgemaskineoptimering",
- * "Udseende"), A–Å as a group of the start screen, each going back here (backFrom). */
-export function Settings({ files }: { files: RepoFile[] }) {
-  return (
-    <Screen title={t.common.parts.settings} wide back={{ href: '#', label: siteName }}>
-      <Group>
-        {partsIn(settings, files).map((p) => (
-          <PartRow key={p.id} {...p} />
-        ))}
-      </Group>
+      <StartFab />
     </Screen>
   );
 }
@@ -264,7 +260,7 @@ function themeStatus(id: string, files: RepoFile[]): string | undefined {
 }
 
 /** "Temaer" (#udseende/temaer): the themes installed (src/themes/, packages/editor/src/themes.ts; and one from the store the site's build
- * does not have yet, as "Installeres …"), by name, each with its picture, its version and who made it, and whether it is
+ * does not have yet, as "Installeres…"), by name, each with its picture, its version and who made it, and whether it is
  * in use or the store has a newer version, opening its page (ThemePage). More are in "Appstore", under "Indstillinger". */
 export function Themes({ env, files }: { env: Env; files: RepoFile[] }) {
   const catalog = useThemeCatalog(env);
@@ -528,15 +524,11 @@ export function PartsHome() {
   return <Parts title={t.common.parts.editorParts} route="udseende/dele" parts={parts} back={backToAppearance} />;
 }
 
-/** "Søgemaskineoptimering" (#seo) under Indstillinger: "SEO-vurdering" (SeoScores.tsx, #seo/vurdering), "Videresendelser"
- * (Redirects.tsx, #seo/videresendelser) and then the site's own parts (seoParts: "Interne links"), each on a screen of
- * its own (CompanyForm.tsx). */
+/** "Søgemaskineoptimering" (#seo), no longer in the menu: "Videresendelser" (Redirects.tsx, #seo/videresendelser) and then
+ * the site's own parts (seoParts: "Interne links"), each on a screen of its own (CompanyForm.tsx). "SEO-vurdering"
+ * (SeoScores.tsx, #seo/vurdering) is hidden: nothing links to it. */
 export function Seo() {
-  const parts: Part[] = [
-    { id: 'vurdering', label: t.seo.title, icon: Gauge },
-    { id: 'videresendelser', label: t.common.parts.redirects, icon: icons.videresendelser },
-    ...seoParts,
-  ];
+  const parts: Part[] = [{ id: 'videresendelser', label: t.common.parts.redirects, icon: icons.videresendelser }, ...seoParts];
   return <Parts title={t.common.parts.seo} route="seo" parts={parts} back={backFrom('seo')} />;
 }
 
@@ -1342,16 +1334,19 @@ export function List({ collection, tab, files, env }: { collection: Collection;
       />
     );
   };
+  const privacyScreen = partScreens.find((s) => s.id === 'privatliv');
   return (
     <Screen
       title={collection.label}
       wide
       back={
-        lists.includes(collection.id)
-          ? { href: '#lister', label: t.common.parts.lists }
-          : header.includes(collection.id)
-            ? { href: '#header', label: t.common.parts.header }
-            : { href: '#', label: siteName }
+        collection.id === config.lists.cookies && privacyScreen
+          ? { href: `#${privacyScreen.id}`, label: privacyScreen.label }
+          : lists.includes(collection.id)
+            ? { href: '#lister', label: t.common.parts.lists }
+            : header.includes(collection.id)
+              ? { href: '#header', label: t.common.parts.header }
+              : { href: '#', label: siteName }
       }
       tabs={
         appTabs.length > 0
@@ -1491,8 +1486,8 @@ export function List({ collection, tab, files, env }: { collection: Collection;
 function Under({ item, address, children }: { item: Item; address?: boolean; children: ReactNode }) {
   return (
     <span className="flex gap-6">
-      {address && <span className="hidden min-w-0 flex-1 truncate md:block">{item.path}</span>}
-      <span className="min-w-0 truncate md:ml-auto md:shrink-0 md:text-right">{children}</span>
+      {address && <span className="hidden min-w-0 flex-1 truncate expanded:block">{item.path}</span>}
+      <span className="min-w-0 truncate expanded:ml-auto expanded:shrink-0 expanded:text-right">{children}</span>
     </span>
   );
 }

package/src/Licenses.tsx

@@ -1,7 +1,8 @@
 // "Licenser" (#licenser), under "Indstillinger": the third-party work the site and the editor are made with, as the
 // site was last built (/editor/licenses.json, licensesIntegration in packages/editor/lib/licenses.mjs), with a search by
 // name, who made it and the licence's name. First the icon packs (the system's, each with the sets it takes icons from
-// besides its own), then what the editor and the site's own code bring (the npm packages shipped in what is downloaded),
+// besides its own), then what the editor and the site's own code bring (the npm packages shipped in what is downloaded,
+// the CMS's own licence "Morpheme CMS itself" first, with its version),
 // then each theme the site is built with and each app installed, under its name: its own licence first, then what it
 // brings (what it declares, its icon packs and what is shipped through them alone). Each row has the work's name, its
 // version, licence and who made it, and what it is and where it is used; one with a text opens it
@@ -15,9 +16,12 @@ import { backFrom } from './site';
 import { apps } from './registry';
 import { themes } from './themes';
 import { byText } from './schema';
+import { PACKAGE } from '../lib/cms-version.mjs';
 import { locale, t } from './i18n';
 import {
+  CMS_NAME,
   loadLicenses,
+  splitCms,
   UNLICENSED,
   type LicensedWork,
   type LicenseKind,
@@ -115,18 +119,20 @@ function WorkRow({ work, owners, places, open = true }: { work: LicensedWork; ow
   );
 }
 
-/** An app's or a theme's own licence, first in its group. */
+/** An app's, a theme's or the CMS's own licence (`name`: whose), first in its group. */
 function OwnRow({
   owner,
+  name,
   open = true,
 }: {
   open?: boolean;
-  owner: Pick<LicenseOwner, 'id' | 'kind' | 'key' | 'name' | 'author' | 'license' | 'version'> & { text?: string | null };
+  name: string;
+  owner: Pick<LicenseOwner, 'author' | 'license' | 'version'> & { id: string; text?: string | null };
 }) {
   return (
     <LicenseRow
       icon={Certificate}
-      name={t.licenses.own(ownerName(owner))}
+      name={t.licenses.own(name)}
       lines={[byline(owner.license, owner.author)]}
       version={owner.version}
       href={open && owner.text ? hrefOf(owner.id) : undefined}
@@ -165,18 +171,23 @@ export default function Licenses() {
   const owners = file?.owners ?? [];
   // The system's icon packs (a theme's own are under it, `where` it).
   const packs = file ? sorted(file.works.filter((w) => w.kind === 'icons' && !w.where.some((x) => x.startsWith('tema/')))) : [];
-  const system = file ? sorted(file.works.filter((w) => w.kind !== 'icons' && w.where.some((x) => x === 'editor' || x === 'site'))) : [];
+  // What the editor and the site bring: the CMS's own licence first, the rest A–Å.
+  const { cms, rest: system } = splitCms(
+    file ? sorted(file.works.filter((w) => w.kind !== 'icons' && w.where.some((x) => x === 'editor' || x === 'site'))) : [],
+  );
+  const ownCms = cms && (fits(cms) || matches(CMS_NAME)) ? cms : null;
   // The themes the site is built with, then the apps installed, each A–Å.
   const inUse = owners
     .filter((o) => o.inUse)
     .sort((a, b) => (a.kind === b.kind ? byText(ownerName(a), ownerName(b)) : a.kind === 'theme' ? -1 : 1));
   const groups = [
-    { key: 'icons', title: t.licenses.icons, own: null, works: packs.filter(fits) },
-    { key: 'system', title: t.licenses.system, own: null, works: system.filter(fits) },
+    { key: 'icons', title: t.licenses.icons, own: null, ownName: '', works: packs.filter(fits) },
+    { key: 'system', title: t.licenses.system, own: ownCms, ownName: CMS_NAME, works: system.filter(fits) },
     ...inUse.map((o) => ({
       key: o.id,
       title: o.kind === 'app' ? t.licenses.app(ownerName(o)) : t.licenses.theme(ownerName(o)),
       own: matches(ownerName(o), o.author, o.license, licenseName(o.license)) ? o : null,
+      ownName: ownerName(o),
       works: file ? worksOf(o, file).filter(fits) : [],
     })),
   ].filter((g) => g.own || g.works.length);
@@ -193,7 +204,7 @@ export default function Licenses() {
           {groups.length ? (
             groups.map((g) => (
               <Group key={g.key} title={g.title}>
-                {g.own && <OwnRow owner={g.own} />}
+                {g.own && <OwnRow owner={g.own} name={g.ownName} />}
                 {g.works.map((w) => (
                   <WorkRow key={w.id} work={w} owners={owners} places={g.key === 'system' || g.key === 'icons'} />
                 ))}
@@ -228,7 +239,8 @@ export function LicensePage({ id }: { id: string }) {
   const file = useLicenses();
   const work = file?.works.find((w) => w.id === id);
   const owner = file?.owners.find((o) => o.id === id);
-  const name = work?.name ?? (owner ? t.licenses.own(ownerName(owner)) : t.common.parts.licenses);
+  const isCms = work?.id === PACKAGE;
+  const name = isCms ? t.licenses.own(CMS_NAME) : (work?.name ?? (owner ? t.licenses.own(ownerName(owner)) : t.common.parts.licenses));
   const text = work?.text ?? owner?.text;
   const back = { href: `#${LICENSES_ROUTE}`, label: t.common.parts.licenses };
   return (
@@ -240,7 +252,11 @@ export function LicensePage({ id }: { id: string }) {
       ) : (
         <>
           <Group>
-            {work ? <WorkRow work={work} owners={file?.owners ?? []} places open={false} /> : <OwnRow owner={owner!} open={false} />}
+            {work && !isCms ? (
+              <WorkRow work={work} owners={file?.owners ?? []} places open={false} />
+            ) : (
+              <OwnRow owner={(work ?? owner)!} name={isCms ? CMS_NAME : ownerName(owner!)} open={false} />
+            )}
           </Group>
           <section className="mb-8">
             <GroupTitle>{t.licenses.text}</GroupTitle>
@@ -292,7 +308,7 @@ export function OwnerLicenses({
   };
   return (
     <Group title={t.common.parts.licenses}>
-      <OwnRow owner={self} />
+      <OwnRow owner={self} name={ownerName(self)} />
       {owner && file
         ? worksOf(owner, file).map((w) => <WorkRow key={w.id} work={w} owners={file.owners} places={false} />)
         : (declared.thirdParty ?? []).map((x, i) =>

package/src/MainDrawerParts.tsx

@@ -0,0 +1,60 @@
+// The main drawer and its menu button on #udseende/dele/editor (Parts.tsx): the modal drawer in its two levels (sections, and
+// a section's list with the back row and a fold-out), opened from a button, so it can be tried at any width, and the menu
+// button open and closed. Exposes MainDrawerSample. Uses MainDrawer and its parts from ui.tsx.
+import { useState } from 'react';
+import { icons } from './site';
+import { t } from './i18n';
+import {
+  Button,
+  MainDrawer,
+  MainDrawerBack,
+  MainDrawerFold,
+  MainDrawerItem,
+  MainDrawerLevel,
+  MainDrawerSectionItem,
+  MainDrawerSubitem,
+  MenuButton,
+} from './ui';
+
+const { parts } = t.common;
+
+export function MainDrawerSample() {
+  const [open, setOpen] = useState(false);
+  const [section, setSection] = useState<string | null>(null);
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      <Button kind="outlined" onClick={() => setOpen(true)}>
+        {t.library.openMenu}
+      </Button>
+      <MenuButton label={t.library.openMenu} onClick={() => setOpen(true)} />
+      <MenuButton label={t.library.closeMenu} open onClick={() => setOpen(false)} />
+      <MainDrawer
+        label={t.library.navigation}
+        open={open}
+        onOpenChange={setOpen}
+        onEscape={() => {
+          const inList = section !== null;
+          setSection(null);
+          return inList;
+        }}
+        variant="modal"
+      >
+        {section === null ? (
+          <MainDrawerLevel>
+            <MainDrawerItem href="" icon={icons.home} label={parts.company} />
+            <MainDrawerSectionItem icon={icons.globalt} label={parts.header} selected onClick={() => setSection('globalt')} />
+            <MainDrawerSectionItem icon={icons.udseende} label={parts.appearance} onClick={() => setSection('udseende')} />
+          </MainDrawerLevel>
+        ) : (
+          <MainDrawerLevel focus="list">
+            <MainDrawerBack label={t.library.mainMenu} onClick={() => setSection(null)} />
+            <MainDrawerFold href="" icon={icons.header} label={parts.header} open>
+              <MainDrawerSubitem href="" label={parts.apps} selected />
+            </MainDrawerFold>
+            <MainDrawerItem href="" icon={icons.seo} label={parts.seo} count={3} />
+          </MainDrawerLevel>
+        )}
+      </MainDrawer>
+    </div>
+  );
+}

package/src/MainMenu.tsx

@@ -0,0 +1,136 @@
+// The editor's main menu (App.tsx renders it): the drawer (ui.tsx MainDrawer) in two levels. The first lists Home and the
+// sections; a section opens its list, under a back row, with the open screen marked and its fold-out folded out. Apps lists
+// Appstore and a row per app installed. From medium and wider the first level is also the collapsed navigation rail
+// (MainRailItem), whose sections open the drawer at their list. Exposes MainMenu. The tree and the open place are lib/menu.mjs
+// (menuTree, currentPlace); it only wires them to the drawer.
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { config, header } from '@site/editor';
+import { currentPlace, menuTree } from '../lib/menu.mjs';
+import { STORE_ROUTE } from './store';
+import { collectionOf } from './schema';
+import { apps, collections, groups, icons, lists, partScreens } from './site';
+import { partOf } from './Library';
+import { childrenOf } from './menuChildren';
+import { t } from './i18n';
+import { useMenuOpen } from './menuOpen';
+import {
+  MainDrawer,
+  MainDrawerBack,
+  MainDrawerFold,
+  MainDrawerItem,
+  MainDrawerLevel,
+  MainDrawerSectionItem,
+  MainDrawerSubitem,
+  MainRailItem,
+  MainRailSectionItem,
+} from './ui';
+import type { RepoFile } from './github';
+
+export function MainMenu({ route, files }: { route: string; files: RepoFile[] | null }) {
+  const { open, setOpen } = useMenuOpen();
+  const tree = useMemo(
+    () =>
+      menuTree(
+        groups,
+        (id: string) => partOf(id, files ?? []),
+        (id: string) => childrenOf(id, files ?? []),
+      ),
+    [files],
+  );
+  // A file being edited (a page, a post) is open under its list; the same call as wave 3's in App.tsx.
+  const collection = collectionOf(collections, route)?.collection;
+  const place = currentPlace(route, tree, {
+    open: collection?.id,
+    lists,
+    header,
+    partScreens: partScreens.map((s) => s.id),
+    cookies: config.lists.cookies,
+    store: STORE_ROUTE,
+  });
+  // The section whose list is shown (null: the first level). It follows the route's section, and the drawer opening.
+  const [shown, setShown] = useState<string | null>(place.section);
+  const [focus, setFocus] = useState<'list' | 'top' | undefined>();
+  const shownRef = useRef(shown);
+  shownRef.current = shown;
+  // The section a click in the rail asked for: the drawer opens at its list instead of at the route's section.
+  const asked = useRef<string | null>(null);
+  useEffect(() => {
+    setShown(asked.current ?? place.section);
+    setFocus(asked.current ? 'list' : undefined);
+    asked.current = null;
+  }, [place.section, open]);
+  const openAt = (section: string) => {
+    asked.current = section;
+    setOpen(true);
+  };
+  const show = (section: string | null) => {
+    setFocus(section === null ? 'top' : 'list');
+    setShown(section);
+  };
+  // Escape in a section's list goes to the first level; at the first level it is not used, so the modal drawer closes.
+  const onEscape = useCallback(() => {
+    if (shownRef.current === null) return false;
+    setFocus('top');
+    setShown(null);
+    return true;
+  }, []);
+  // Every level stays in the page (the screen check finds the screens from the links); the ones not shown are `hidden`.
+  const sections = tree.filter((entry) => entry.href === undefined);
+  return (
+    <MainDrawer
+      label={t.library.navigation}
+      open={open}
+      onOpenChange={setOpen}
+      onEscape={onEscape}
+      rail={tree.map((entry) =>
+        entry.href !== undefined ? (
+          <MainRailItem key={entry.id} href={entry.href} icon={icons[entry.id]} label={entry.label} selected={route === ''} />
+        ) : (
+          <MainRailSectionItem
+            key={entry.id}
+            icon={icons[entry.id]}
+            label={entry.label}
+            selected={place.section === entry.id}
+            onClick={() => openAt(entry.id)}
+          />
+        ),
+      )}
+    >
+      <MainDrawerLevel shown={shown === null} focus={focus}>
+        {tree.map((entry) =>
+          entry.href !== undefined ? (
+            <MainDrawerItem key={entry.id} href={entry.href} icon={icons[entry.id]} label={entry.label} selected={route === ''} />
+          ) : (
+            <MainDrawerSectionItem
+              key={entry.id}
+              icon={icons[entry.id]}
+              label={entry.label}
+              selected={place.section === entry.id}
+              onClick={() => show(entry.id)}
+            />
+          ),
+        )}
+      </MainDrawerLevel>
+      {sections.map((section) => (
+        <MainDrawerLevel key={section.id} shown={shown === section.id} focus={focus}>
+          <MainDrawerBack label={t.library.mainMenu} onClick={() => show(null)} />
+          {section.items.map(({ id, label, href, count, children }) => {
+            const here = place.section === section.id && place.item === id;
+            const shownCount = files ? count : null;
+            // An app's row has the app's icon (an installed app is a row of Apps, lib/menu.mjs).
+            const icon = (section.id === 'apps' && apps.find((a) => a.id === id)?.icon) || icons[id];
+            return children ? (
+              <MainDrawerFold key={id} href={href} icon={icon} label={label} count={shownCount} selected={here && !place.child} open={here}>
+                {children.map((child) => (
+                  <MainDrawerSubitem key={child.id} href={child.href} label={child.label} selected={here && place.child === child.id} />
+                ))}
+              </MainDrawerFold>
+            ) : (
+              <MainDrawerItem key={id} href={href} icon={icon} label={label} count={shownCount} selected={here} />
+            );
+          })}
+        </MainDrawerLevel>
+      ))}
+    </MainDrawer>
+  );
+}