@morphemecms/cms 0.5.0 → 0.7.0

package/src/Media.tsx

@@ -9,6 +9,7 @@
 // saved with the tick: the file moves, the pages that use it get the new address in the same commit,
 // and the old address sends on to it (addresses.ts). "+" uploads a new file, saved at once. The same
 // pictures (not the other files) are the gallery a picture is chosen from in the forms (useMediaPicker).
+// The funnel in Filer also filters by a tag (fileTagFilter.mjs; only tags some file has).
 // The clock in the top bar, "Slettede filer", opens the files that were deleted (Deleted.tsx).
 import { useEffect, useMemo, useRef, useState, type ReactElement } from 'react';
 import {
@@ -41,10 +42,11 @@ import {
   BottomSheet,
   SheetTitle,
   SideSheet,
-  useWide,
+  useAtLeast,
   EmptyNote,
   SheetBody,
   ListItem,
+  type Pickable,
 } from './ui';
 import type { Env } from './App';
 import type { RepoFile } from './github';
@@ -54,6 +56,9 @@ import { collections } from './site';
 import { readFields, splitFrontmatter } from './frontmatter.mjs';
 import { fileKindOf, pickedKindOf, pickImage, prepareFile, prepareImage, publicPath, showMoved, shownAt, type Uploads } from './images';
 import { fileIcons, FileView, KINDS, kindOf, type Kind } from './FileView';
+import MediaTags from './MediaTags';
+import { deleteRecord, recordsIn, renameRecord } from './fileRecords.mjs';
+import { tagFilterOptions, tagIndex, withTag } from './fileTagFilter.mjs';
 import { kindAndName, savedText } from './deploy';
 import { locale, siteT, t } from './i18n';
 
@@ -72,6 +77,9 @@ export const filesOf = (files: RepoFile[]) =>
     ? files.filter((f) => f.path.startsWith(`${FILES}/`) && fileKindOf(f.path)).sort((a, b) => a.path.localeCompare(b.path, locale))
     : [];
 
+/** The addresses on the site of every file Filer lists: the pictures, then the PDFs, videos and zip files. */
+export const filerAddresses = (files: RepoFile[]): string[] => [...mediaOf(files), ...filesOf(files)].map((f) => publicPath(f.path));
+
 // What a file that uses a picture or another file is called: a page's or post's title, a fixed page's name, an
 // entry's as its list shows it (a pop-up); null for a file the editor does not open (the list of
 // picture sizes, image-manifest.json).
@@ -171,7 +179,7 @@ function Grid({ srcs, picked, onPick }: { srcs: string[]; picked?: string | null
   const [thumbs, setThumbs] = useState<Record<string, string> | null>(null);
   useEffect(() => void thumbnails().then(setThumbs), []);
   return (
-    <ul className="grid grid-cols-3 gap-1.5 sm:grid-cols-4 md:grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] md:gap-2">
+    <ul className="grid grid-cols-3 gap-1.5 medium:grid-cols-4 expanded:grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] expanded:gap-2">
       {srcs.map((src) => (
         <li key={src}>
           <button
@@ -200,15 +208,20 @@ const monthOf = (src: string) => {
 };
 /** The pictures with search, their order and the filters, and the month between them when they are
  * in the order of their dates, the first letter when by name. used: the files a page uses (Filer): then
- * the funnel opens a sheet with both filters, by use and by type. picked: the file shown beside it. */
+ * the funnel opens a sheet with the filters by use and by type, and by tag when tags is given (each file's
+ * tags, from tagIndex) and some file has one of the tagOptions. picked: the file shown beside it. */
 function Gallery({
   srcs,
   used,
+  tags,
+  tagOptions = [],
   picked,
   onPick,
 }: {
   srcs: string[];
   used?: Set<string>;
+  tags?: Map<string, string[]>;
+  tagOptions?: Pickable[];
   picked?: string | null;
   onPick: (src: string) => void;
 }) {
@@ -226,6 +239,7 @@ function Gallery({
   });
   const [date, setDate] = useKept(all ? 'filer-dato' : null, '');
   const [use, setUse] = useKept<'' | 'used' | 'unused'>(all ? 'filer-brug' : null, '');
+  const [tag, setTag] = useKept(all ? 'filer-tag' : null, '');
 
   function pickSort(next: Sort) {
     setSort(next);
@@ -239,12 +253,16 @@ function Gallery({
   const years = [...new Set(months.filter(Boolean).map((m) => m.slice(0, 4)))];
   // The types there are files of (and the one chosen); the filter by type only when there are two or more.
   const kinds = KINDS.filter((k) => k === kind || srcs.some((src) => kindOf(src) === k));
+  // The tags some file has (and the one chosen), for the filter by tag.
+  const tagChoices = tags ? tagFilterOptions(tags, tagOptions, tag) : [];
+  const withTagged = tags ? new Set(withTag(srcs, tags, tag)) : null;
   const words = query.toLowerCase().split(/\s+/).filter(Boolean);
   const shown = srcs
     .filter((src) => words.every((w) => nameOfSrc(src).toLowerCase().includes(w)))
     .filter((src) => !date || monthOf(src) === date || monthOf(src).startsWith(`${date}-`))
     .filter((src) => !use || used?.has(src) === (use === 'used'))
     .filter((src) => !kind || kindOf(src) === kind)
+    .filter((src) => !withTagged || withTagged.has(src))
     .sort((a, b) =>
       sort === 'name'
         ? nameOfSrc(a).localeCompare(nameOfSrc(b), locale)
@@ -256,6 +274,7 @@ function Gallery({
     date && { label: dateName(date), clear: () => setDate('') },
     use && { label: use === 'used' ? t.media.inUse : t.common.notInUse, clear: () => setUse('') },
     kind && { label: t.media.kinds[kind].plural, clear: () => setKind('') },
+    tag && { label: tagOptions.find((o) => o.value === tag)?.label ?? tag, clear: () => setTag('') },
   ].filter((c) => !!c);
 
   return (
@@ -277,7 +296,7 @@ function Gallery({
           all && (
             <Filters
               title={t.media.filter}
-              selected={!!use || !!kind}
+              selected={!!use || !!kind || !!tag}
               groups={[
                 {
                   title: t.media.use,
@@ -298,6 +317,12 @@ function Gallery({
                   ],
                   onChange: (v: string) => setKind(v as typeof kind),
                 },
+                tagChoices.length > 0 && {
+                  title: t.media.tagFilter,
+                  value: tag,
+                  options: [{ value: '', label: t.media.allTags }, ...tagChoices],
+                  onChange: setTag,
+                },
               ].filter((g) => !!g)}
             />
           )
@@ -393,7 +418,8 @@ const codeImages = () =>
     .then((r) => (r.ok ? (r.json() as Promise<string[]>) : null))
     .catch(() => null));
 
-export default function Media({ files, env }: { files: RepoFile[]; env: Env }) {
+// open: the address of a file to show picked at once (the route filer/<address>); ignored when no such file exists.
+export default function Media({ files, env, open }: { files: RepoFile[]; env: Env; open?: string }) {
   // The pictures and the other files.
   const pictures = [...mediaOf(files), ...filesOf(files)];
   const [code, setCode] = useState<string[] | null>(null);
@@ -406,10 +432,13 @@ export default function Media({ files, env }: { files: RepoFile[]; env: Env }) {
       .map((f) => f.text);
     return new Set(pictures.map((p) => publicPath(p.path)).filter((src) => code?.includes(src) || texts.some((t) => t.includes(src))));
   }, [files, code]);
+  // Each file's tags, for the filter by tag.
+  const tags = useMemo(() => tagIndex(recordsIn(files, config.fileRecords)), [files]);
   const dialog = useRef<HTMLDialogElement>(null);
-  const [src, setSrc] = useState<string | null>(null);
+  const opened = open && pictures.some((p) => publicPath(p.path) === open) ? open : null;
+  const [src, setSrc] = useState<string | null>(opened);
   // On a computer the file picked is beside the grid; on a phone in a sheet.
-  const wide = useWide();
+  const wide = useAtLeast('expanded');
   const closeFile = () => {
     if (dialog.current?.open) dialog.current.close();
     else setSrc(null);
@@ -424,9 +453,13 @@ export default function Media({ files, env }: { files: RepoFile[]; env: Env }) {
       dialog.current.close();
     } else if (!wide && !dialog.current?.open) dialog.current?.showModal();
   }, [wide]);
+  // Opened at a file on a phone: the sheet opens with the screen.
+  useEffect(() => {
+    if (opened && !wide) dialog.current?.showModal();
+  }, []);
   const [adding, setAdding] = useState(false);
   const [deleting, setDeleting] = useState(false);
-  const [name, setName] = useState('');
+  const [name, setName] = useState(opened ? stemOf(opened) : '');
   const [renaming, setRenaming] = useState(false);
   // The name being changed: the field shown instead of the pencil after the name.
   const [editing, setEditing] = useState(false);
@@ -463,7 +496,7 @@ export default function Media({ files, env }: { files: RepoFile[]; env: Env }) {
     }
   }
 
-  // A file nothing uses, deleted at once in its own commit (after asking).
+  // A file nothing uses, deleted at once in its own commit (after asking), with its record of tags.
   async function remove(src: string) {
     const file = pictures.find((p) => publicPath(p.path) === src);
     if (!file || !(await ask(t.media.kinds[kindOf(src)].deleteAsk, t.common.delete))) return;
@@ -471,12 +504,13 @@ export default function Media({ files, env }: { files: RepoFile[]; env: Env }) {
     env.notify({ text: t.common.deleting });
     try {
       const change = t.app.changes.deleted(kindAndName(t.media.kinds[kindOf(src)].word, fileName(src)));
+      const record = deleteRecord(recordsIn(files, config.fileRecords), src);
       await env.commit(
         siteT.media.commit.delete(siteT.media.kinds[kindOf(src)].word, src.split('/').pop()!),
-        [{ path: file.path, content: null, oid: file.oid }],
+        [{ path: file.path, content: null, oid: file.oid }, ...(record ? [record] : [])],
         change,
       );
-      env.forget([file.path]);
+      env.forget([file.path, ...(record ? [record.path] : [])]);
       closeFile();
       env.notify({ text: savedText(change), kind: 'saved' });
     } catch (e) {
@@ -487,7 +521,8 @@ export default function Media({ files, env }: { files: RepoFile[]; env: Env }) {
   }
 
   // A new name for a picture, saved at once in one commit: the file under its new name (same folder
-  // and ending), the old one deleted, the texts with its address changed and the redirect.
+  // and ending), the old one deleted, the texts with its address changed, the redirect and the file's record of tags (same
+  // record file, its address changed).
   async function rename(src: string) {
     const file = pictures.find((p) => publicPath(p.path) === src);
     const stem = slugify(name);
@@ -496,8 +531,16 @@ export default function Media({ files, env }: { files: RepoFile[]; env: Env }) {
     const to = publicPath(path);
     if (files.some((f) => f.path === path)) return env.notify({ text: t.media.nameTaken, error: true });
     const texts = files
-      .filter((f) => f.text && f.path !== REDIRECTS && !f.path.startsWith(`${MEDIA}/`) && f.text.includes(src))
+      .filter(
+        (f) =>
+          f.text &&
+          f.path !== REDIRECTS &&
+          !f.path.startsWith(`${MEDIA}/`) &&
+          !f.path.startsWith(`${config.fileRecords}/`) &&
+          f.text.includes(src),
+      )
       .map((f) => ({ ...f, text: readdress(f.text, src, to) }));
+    const record = renameRecord(recordsIn(files, config.fileRecords), src, to);
     setRenaming(true);
     env.notify({ text: t.common.saving });
     try {
@@ -520,13 +563,20 @@ export default function Media({ files, env }: { files: RepoFile[]; env: Env }) {
           { path: file.path, content: null, oid: file.oid },
           ...texts.map((f) => ({ path: f.path, content: f.text, oid: files.find((x) => x.path === f.path)!.oid })),
           ...redirectChanges,
+          ...(record ? [record] : []),
         ],
         change,
       );
       showMoved(src, to);
       env.onSaved(
         { path, oid: oids[path], text: '' },
-        { files: [...texts, ...moved].map((f) => ({ ...f, oid: oids[f.path] })), removed: [file.path] },
+        {
+          files: [...texts, ...moved, ...(record ? [{ path: record.path, oid: '', text: String(record.content) }] : [])].map((f) => ({
+            ...f,
+            oid: oids[f.path],
+          })),
+          removed: [file.path],
+        },
       );
       setSrc(to);
       setName(stem);
@@ -615,6 +665,7 @@ export default function Media({ files, env }: { files: RepoFile[]; env: Env }) {
           <p className="text-muted">{t.media.noPages}</p>
         )}
       </div>
+      <MediaTags key={src} src={src} files={files} env={env} />
       {code && !used.has(src) && (
         <Button kind="outlined" wide icon={Trash} disabled={deleting} onClick={() => remove(src)}>
           {deleting ? t.common.deleting : t.media.kinds[kindOf(src)].delete}
@@ -640,11 +691,13 @@ export default function Media({ files, env }: { files: RepoFile[]; env: Env }) {
         </>
       }
     >
-      <div className="md:flex md:items-start md:gap-6">
+      <div className="expanded:flex expanded:items-start expanded:gap-6">
         <div className="min-w-0 flex-1">
           <Gallery
-            srcs={pictures.map((p) => publicPath(p.path))}
+            srcs={filerAddresses(files)}
             used={used}
+            tags={tags}
+            tagOptions={env.relations.categories}
             picked={wide ? src : undefined}
             onPick={(src) => {
               setSrc(src);

package/src/MediaTags.tsx

@@ -0,0 +1,91 @@
+// The tags of a file in Filer (Media.tsx): its tags as chips and "Tilføj tag", from the file's record (src/fileRecords.mjs).
+// Each change is saved at once in its own commit, one save at a time; taps during a save go into the next.
+// Exposes MediaTags; uses MultiChoice and SheetLink (ui.tsx), setTags (fileTags.mjs), writeRecords (fileRecords.mjs).
+import { useRef, useState, type ReactElement } from 'react';
+import { config } from '@site/editor';
+import type { Env } from './App';
+import { kindAndName, savedText } from './deploy';
+import { leaveTo } from './FormFrame';
+import { kindOf } from './FileView';
+import { recordFor, recordsIn, writeRecords, type StoredRecord } from './fileRecords.mjs';
+import { setTags } from './fileTags.mjs';
+import type { RepoFile } from './github';
+import { siteT, t } from './i18n';
+import { MultiChoice, SheetLink } from './ui';
+
+const fileName = (src: string) => src.split('/').pop() ?? '';
+
+export default function MediaTags({ src, files, env }: { src: string; files: RepoFile[]; env: Env }): ReactElement {
+  // The record as last stored: from the files at first, then from each save's result (the files may not have updated yet).
+  const stored = useRef<StoredRecord | undefined>(recordFor(recordsIn(files, config.fileRecords), src));
+  const [value, setValue] = useState<string[]>(stored.current?.record.categories ?? []);
+  const running = useRef(false);
+  const waiting = useRef<string[] | null>(null);
+
+  // One commit for the tags `next`; throws when it fails.
+  async function save(next: string[]) {
+    const record = setTags(stored.current?.record, src, next);
+    const [change] = writeRecords(stored.current ? [stored.current] : [], config.fileRecords, [{ src, next: record }]);
+    if (!change) return;
+    const word = t.media.kinds[kindOf(src)].word;
+    const text = t.app.changes.edited(kindAndName(word, fileName(src)));
+    const oids = await env.commit(siteT.media.commit.tags(siteT.media.kinds[kindOf(src)].word, fileName(src)), [change], text);
+    if (change.content === null) {
+      stored.current = undefined;
+      env.forget([change.path]);
+    } else {
+      stored.current = { path: change.path, oid: oids[change.path], record };
+      env.onSaved({ path: change.path, oid: oids[change.path], text: change.content });
+    }
+    env.notify({ text: savedText(text), kind: 'saved' });
+  }
+
+  // Saves the waiting value, then the next one that came meanwhile; on an error the chips go back to what is stored.
+  async function drain() {
+    running.current = true;
+    while (waiting.current) {
+      const next = waiting.current;
+      waiting.current = null;
+      try {
+        await save(next);
+      } catch (e) {
+        waiting.current = null;
+        setValue(stored.current?.record.categories ?? []);
+        env.notify({ text: t.common.notSaved((e as Error).message), error: true, kind: 'failed' });
+      }
+    }
+    running.current = false;
+  }
+
+  function change(next: string[]) {
+    setValue(next);
+    waiting.current = next;
+    if (!running.current) void drain();
+  }
+
+  return (
+    <div>
+      <p className="mb-1 font-medium">{t.media.tags}</p>
+      <MultiChoice
+        label={t.media.tags}
+        options={env.relations.categories}
+        value={value}
+        add={t.media.addTag}
+        keep="categories"
+        footer={(close) => (
+          <SheetLink
+            href="#ny/kategorier"
+            onClick={(e) => {
+              e.preventDefault();
+              close();
+              leaveTo('#ny/kategorier');
+            }}
+          >
+            {t.media.createTag}
+          </SheetLink>
+        )}
+        onChange={change}
+      />
+    </div>
+  );
+}

package/src/ModalSheetSample.tsx

@@ -0,0 +1,47 @@
+// "Dele" › "UI-komponenter": the modal bottom sheet example (ContainmentParts.tsx). A button opens the theme's modal
+// sheet in a real <dialog>, as the site does (bottomSheet() in bottomSheetControl.ts), so on a phone it opens at half
+// height (startAt), is pulled up to full height and pulled down to close. `wide` is what it becomes from the medium
+// breakpoint (BottomSheet's `wide`: a dialog, a side sheet or a sheet), `label` what the button says.
+// Exposes ModalSheetSample; uses SiteBottomSheet.
+import { useEffect, useRef } from 'react';
+import { SiteBottomSheet, SiteButton, siteBottomSheet, siteBottomSheetClass } from './themeUi';
+import { t } from './i18n';
+
+const say = t.parts.screens.containment;
+
+export default function ModalSheetSample({
+  startAt,
+  wide,
+  label,
+}: {
+  startAt?: 'half' | 'full';
+  wide?: 'dialog' | 'side-sheet' | 'sheet';
+  label?: string;
+}) {
+  const dialog = useRef<HTMLDialogElement>(null);
+  const controls = useRef<ReturnType<typeof siteBottomSheet>>(undefined);
+  useEffect(() => {
+    if (dialog.current) controls.current = siteBottomSheet(dialog.current);
+  }, []);
+  return (
+    <>
+      <SiteButton onClick={() => controls.current?.open()}>{label ?? say.openSheet}</SiteButton>
+      <dialog ref={dialog} className={siteBottomSheetClass} aria-label={say.heading}>
+        <SiteBottomSheet
+          startAt={startAt}
+          wide={wide}
+          headline={say.heading}
+          supportingText={say.sheetText}
+          closeLabel={say.close}
+          footer={say.footer}
+        >
+          {say.paragraphs.map((text) => (
+            <p key={text} className="mb-3 px-5 pt-3 text-muted">
+              {text}
+            </p>
+          ))}
+        </SiteBottomSheet>
+      </dialog>
+    </>
+  );
+}

package/src/NavigationParts.tsx

@@ -4,7 +4,8 @@
 // in the middle, with a subtitle, a long headline and collapsed), a menu (the header's pages, and actions in both
 // colours with their icons, shortcuts, texts, ticks, a choice, a disabled one, dividers, groups with a gap and with a
 // line, and a submenu drawn open), a dropdown menu closed and drawn open, the exposed dropdown menu in both kinds in
-// every state, the navigation drawer with an item's sub-pages unfolded, the tabs (only the text, as the bar of
+// every state, the navigation drawer with an item's sub-pages unfolded, and the standard one with sections, icons and counts,
+// in two levels (items with a trailing arrow, and the back row over a list), the tabs (only the text, as the bar of
 // "Mobilmenu", and primary and secondary, fixed and scrollable, with icons over and beside their labels, badges, and a
 // tab list with a tab that cannot be chosen), and the FABs and extended FABs in their colours and sizes, an extended
 // FAB also collapsed. Only drawn: the links lead nowhere, and nothing opens.
@@ -21,8 +22,10 @@ import {
   SiteMenuGroup,
   SiteMenuItem,
   SiteNavigationDrawer,
+  SiteNavigationDrawerBack,
   SiteNavigationDrawerItem,
   SiteNavigationDrawerRow,
+  SiteNavigationDrawerSection,
   SiteNavigationDrawerSubitem,
   SiteNavigationDrawerToggle,
   SiteSearch,
@@ -40,6 +43,9 @@ import { t } from './i18n';
 const say = t.parts.screens.navigation;
 const [home, open, parent, contact] = say.pages;
 const [sub, openSub] = say.subpages;
+const [mail, account] = say.drawerSections;
+const [backLabel] = say.drawerBack;
+const [inbox, messages, favourites, trash, profile] = say.drawerItems;
 const row = 'flex flex-wrap items-center gap-4';
 const kinds = ['primary', 'secondary'] as const;
 const bar = say.appBar;
@@ -204,7 +210,7 @@ export default function NavigationParts() {
             <SiteMenu groups="divider" aria-label={menus.divider}>
               {groups()}
             </SiteMenu>
-            <div className="pb-24 sm:pr-72">
+            <div className="pb-24 medium:pr-72">
               <SiteMenu aria-label={menus.share}>{groups(true)}</SiteMenu>
             </div>
           </div>
@@ -231,7 +237,7 @@ export default function NavigationParts() {
             {(['outlined', 'filled'] as const).map((kind) => {
               const options = menus.options.map((label, i) => ({ value: String(i), label, disabled: i === 3 }));
               return (
-                <div key={kind} className="grid gap-6 sm:grid-cols-2" aria-label={menus.kinds[kind]} role="group">
+                <div key={kind} className="grid gap-6 medium:grid-cols-2" aria-label={menus.kinds[kind]} role="group">
                   <SiteExposedDropdownMenu kind={kind} label={menus.field} options={options} />
                   <SiteExposedDropdownMenu kind={kind} label={menus.field} options={options} value="1" />
                   <SiteExposedDropdownMenu kind={kind} label={menus.field} options={options} value="0" supporting={menus.supporting} />
@@ -245,25 +251,65 @@ export default function NavigationParts() {
       </Part>
       <Part name="NavigationDrawer" use={say.navigationDrawer}>
         <Preview>
-          <SiteNavigationDrawer className="px-3 py-4">
-            <SiteNavigationDrawerRow>
-              <SiteNavigationDrawerItem href="">{home}</SiteNavigationDrawerItem>
-            </SiteNavigationDrawerRow>
-            <SiteNavigationDrawerRow data-active="">
-              <SiteNavigationDrawerItem href="" active>
-                {parent}
+          <div className="flex flex-wrap items-start gap-6">
+            <SiteNavigationDrawer>
+              <SiteNavigationDrawerRow>
+                <SiteNavigationDrawerItem href="">{home}</SiteNavigationDrawerItem>
+              </SiteNavigationDrawerRow>
+              <SiteNavigationDrawerRow data-active="">
+                <SiteNavigationDrawerItem href="" active>
+                  {parent}
+                </SiteNavigationDrawerItem>
+                <SiteNavigationDrawerToggle label={parent} expanded />
+              </SiteNavigationDrawerRow>
+              <SiteNavigationDrawerSubitem href="">{sub}</SiteNavigationDrawerSubitem>
+              <SiteNavigationDrawerSubitem href="" active>
+                {openSub}
+              </SiteNavigationDrawerSubitem>
+              <SiteNavigationDrawerRow>
+                <SiteNavigationDrawerItem href="">{contact}</SiteNavigationDrawerItem>
+                <SiteNavigationDrawerToggle label={contact} expanded={false} />
+              </SiteNavigationDrawerRow>
+            </SiteNavigationDrawer>
+            <SiteNavigationDrawer variant="standard">
+              <SiteNavigationDrawerSection label={mail}>
+                <SiteNavigationDrawerItem href="" icon="envelope-simple" badge={24} active>
+                  {inbox}
+                </SiteNavigationDrawerItem>
+                <SiteNavigationDrawerItem href="" icon="chats" badge={3}>
+                  {messages}
+                </SiteNavigationDrawerItem>
+                <SiteNavigationDrawerItem href="" icon="heart">
+                  {favourites}
+                </SiteNavigationDrawerItem>
+                <SiteNavigationDrawerItem href="" icon="trash">
+                  {trash}
+                </SiteNavigationDrawerItem>
+              </SiteNavigationDrawerSection>
+              <SiteNavigationDrawerSection label={account}>
+                <SiteNavigationDrawerItem href="" icon="user">
+                  {profile}
+                </SiteNavigationDrawerItem>
+              </SiteNavigationDrawerSection>
+            </SiteNavigationDrawer>
+            <SiteNavigationDrawer variant="standard">
+              <SiteNavigationDrawerItem icon="envelope-simple" trailing="arrow-right" active>
+                {mail}
               </SiteNavigationDrawerItem>
-              <SiteNavigationDrawerToggle label={parent} expanded />
-            </SiteNavigationDrawerRow>
-            <SiteNavigationDrawerSubitem href="">{sub}</SiteNavigationDrawerSubitem>
-            <SiteNavigationDrawerSubitem href="" active>
-              {openSub}
-            </SiteNavigationDrawerSubitem>
-            <SiteNavigationDrawerRow>
-              <SiteNavigationDrawerItem href="">{contact}</SiteNavigationDrawerItem>
-              <SiteNavigationDrawerToggle label={contact} expanded={false} />
-            </SiteNavigationDrawerRow>
-          </SiteNavigationDrawer>
+              <SiteNavigationDrawerItem icon="user" trailing="arrow-right">
+                {account}
+              </SiteNavigationDrawerItem>
+            </SiteNavigationDrawer>
+            <SiteNavigationDrawer variant="standard">
+              <SiteNavigationDrawerBack label={backLabel} />
+              <SiteNavigationDrawerItem href="" icon="envelope-simple" badge={24} active>
+                {inbox}
+              </SiteNavigationDrawerItem>
+              <SiteNavigationDrawerItem href="" icon="chats">
+                {messages}
+              </SiteNavigationDrawerItem>
+            </SiteNavigationDrawer>
+          </div>
         </Preview>
       </Part>
       <Part name="Tabs" use={say.tabs}>

package/src/NavigationRestParts.tsx

@@ -2,7 +2,7 @@
 // (packages/editor/theme/ui/, through @site/editor) as the site draws them, with made-up destinations: the navigation bar
 // with the open one and its badges, with vertical items, horizontal ones and both by its width, the navigation rail
 // collapsed and expanded with its menu button and FAB, in sections with a count at each destination's end (the
-// editor's sidebar), expanded over the content (modal, over its scrim), and one that
+// theme's rail, which sites use), expanded over the content (modal, over its scrim), and one that
 // hides while it is collapsed, collapsed (opened by a button beside it) and expanded, the search bar and the view it
 // opens, and the toolbars, docked and floating in both colours, across and vertical (the docked one with buttons as the
 // site's bar at the bottom of a phone; floating ones also with a FAB, and folded into it). Only drawn: the links lead