@morphemecms/cms 0.11.0 → 0.12.0

package/src/BlockDialog.tsx

@@ -7,11 +7,12 @@
 // (the standard blocks, each app's under its name), the one picked as a chip. Also the sheet of a section's
 // settings (its colour, SectionSettings.tsx), which goes the same way as a block's fields: Annuller, Gem, the question when closed changed.
 // The fields and the section settings are in the theme's side sheet (sheetPlacement.mjs): a standard one beside the page from
-// medium (not modal: the page stays usable, .editor-side-sheet in editor.css), a modal one over the page below it
+// expanded (not modal: the page stays usable, .editor-side-sheet in editor.css), a modal one over the page below it
 // (fields only; the section settings are a sheet from the bottom there). Both end with Gem (Indsæt) and Annuller.
 // Their open, close, focus and Escape are the theme's (sideSheet() and standardSideSheet(), sideSheetControl.ts); leave() is their beforeClose.
-// Another block tapped while one is open closes the open one first (the question when changed). Exposes useBlockDialog, IMAGE.
-import { useEffect, useId, useRef, useState, type ReactElement } from 'react';
+// Another block tapped while one is open closes the open one first (the question when changed). In the standard side sheet a
+// card already in the text also has "Remove" after Cancel in the actions (the answer 'remove'). Exposes useBlockDialog, IMAGE.
+import { useEffect, useId, useRef, useState, type CSSProperties, type ReactElement } from 'react';
 import { ArrowsDownUp, Image } from '@phosphor-icons/react';
 import {
   Button,
@@ -46,6 +47,7 @@ import { snackbar } from '../lib/snackbar';
 import { closeChanged } from './ask';
 import SectionSettings from './SectionSettings';
 import { sheetLook } from './sheetPlacement.mjs';
+import { setPanelOpen } from './sidePanel';
 import { SiteSideSheet, siteSideSheet, siteSideSheetDialogClass, siteStandardSideSheet } from './themeUi';
 
 export type BlockAsk = {
@@ -58,13 +60,17 @@ export type BlockAsk = {
    * than once, unless the template says how many (have: the types in the text now, one for each, IMAGE for a picture).
    * image: a picture is offered first, and chosen as the type IMAGE. */
   choose: (offer?: { image?: boolean; have?: string[] }) => Promise<{ type: string; props: BlockProps } | null>;
-  /** New props for a block in the text; null when cancelled. isNew: one about to be put in ("Indsæt"). */
-  edit: (type: string, props: BlockProps, isNew?: boolean) => Promise<BlockProps | null>;
+  /** New props for a block in the text; null when cancelled. isNew: one about to be put in ("Indsæt"). removable: the
+   * card may be removed, so the side panel has "Remove"; 'remove' when it is tapped (never when removable is not true). */
+  edit: (type: string, props: BlockProps, isNew?: boolean, removable?: boolean) => Promise<BlockProps | 'remove' | null>;
   /** The settings of the section the cursor is in (now its colour; null: none); the new ones, or null when cancelled. */
   section: (color: string | null) => Promise<{ color: string | null } | null>;
 };
 
-type Open = { step: 'choose'; image?: boolean; have?: string[] } | { step: 'fields'; type: string; isNew: boolean } | { step: 'section' };
+type Open =
+  | { step: 'choose'; image?: boolean; have?: string[] }
+  | { step: 'fields'; type: string; isNew: boolean; removable?: boolean }
+  | { step: 'section' };
 
 /** The type a section's settings are answered with (not a block's). */
 const SECTION = 'section';
@@ -99,7 +105,7 @@ const picture: SiteBlock = {
     },
   ],
 };
-type Answer = { type: string; props: BlockProps } | null;
+type Answer = { type: string; props: BlockProps } | 'remove' | null;
 
 // Text as searched: lower case, without accents (as in PagePicker.tsx).
 const plain = (s: string) =>
@@ -124,13 +130,13 @@ export function useBlockDialog(
 ): [BlockAsk, ReactElement] {
   const blockOf = (type: string) => (type === IMAGE ? picture : type === HTML ? htmlBlock : list.find((b) => b.type === type));
   const dialog = useRef<HTMLDialogElement>(null);
-  // The modal side sheet's <dialog> (below medium) and its controls; the standard one's box (from medium).
+  // The modal side sheet's <dialog> (below expanded) and its controls; the standard one's box (from expanded).
   const sideDialog = useRef<HTMLDialogElement>(null);
   const sideControls = useRef<ReturnType<typeof siteSideSheet> | null>(null);
   const standard = useRef<HTMLDivElement>(null);
   const standardControls = useRef<ReturnType<typeof siteStandardSideSheet> | null>(null);
   const headingId = useId();
-  const medium = useAtLeast('medium');
+  const expanded = useAtLeast('expanded');
   const answer = useRef<(a: Answer) => void>(() => {});
   const [open, setOpen] = useState<Open | null>(null);
   // What is open now (set at once, where `open` follows a render later), the look it has, when the last one has closed
@@ -186,7 +192,7 @@ export function useBlockDialog(
   };
 
   // Which dialog is open follows the look of the step: the sheet from the bottom, or the modal side sheet (below).
-  const look: string = open ? sheetLook(open.step, medium) : 'sheet';
+  const look: string = open ? sheetLook(open.step, expanded) : 'sheet';
   lookNow.current = look;
   useEffect(() => {
     const sheet = dialog.current;
@@ -202,7 +208,7 @@ export function useBlockDialog(
     return false;
   };
 
-  // The modal side sheet (below medium).
+  // The modal side sheet (below expanded).
   useEffect(() => {
     const d = sideDialog.current;
     if (look !== 'modal-side-sheet' || !d) return;
@@ -214,11 +220,12 @@ export function useBlockDialog(
     };
   }, [look]);
 
-  // The standard side sheet (from medium): the page makes room for it (editor.css: [data-side-panel]), the focus moves
+  // The standard side sheet (from expanded): the page makes room for it (editor.css: [data-side-panel]), the focus moves
   // into it and back to what had it before when it closes.
   useEffect(() => {
     if (look !== 'side-sheet') return;
     document.documentElement.setAttribute('data-side-panel', '');
+    setPanelOpen(true);
     const box = standard.current?.querySelector<HTMLElement>('[data-side-sheet-container]');
     if (box) {
       standardControls.current = siteStandardSideSheet(box, { beforeClose });
@@ -227,6 +234,7 @@ export function useBlockDialog(
     return () => {
       standardControls.current = null;
       document.documentElement.removeAttribute('data-side-panel');
+      setPanelOpen(false);
     };
   }, [look]);
 
@@ -254,16 +262,23 @@ export function useBlockDialog(
     list,
     template,
     data,
-    choose: (offer) => ask({ step: 'choose', image: offer?.image, have: offer?.have }),
+    choose: async (offer) => {
+      const answered = await ask({ step: 'choose', image: offer?.image, have: offer?.have });
+      return answered === 'remove' ? null : answered;
+    },
     section: async (color) => {
       const answered = await ask({ step: 'section' }, { color: color ?? '' });
-      return answered && { color: answered.props.color ? String(answered.props.color) : null };
+      if (!answered || answered === 'remove') return null;
+      return { color: answered.props.color ? String(answered.props.color) : null };
     },
-    edit: async (type, props, isNew = false) => {
+    edit: async (type, props, isNew = false, removable = false) => {
       const fields = blockOf(type)?.fields ?? [];
       // A block on the page with what a field it has no value for means; a new one with the defaults.
-      const a = await ask({ step: 'fields', type, isNew }, isNew ? { ...newValue(fields), ...props } : savedValue(fields, props));
-      return a && a.props;
+      const a = await ask(
+        { step: 'fields', type, isNew, removable },
+        isNew ? { ...newValue(fields), ...props } : savedValue(fields, props),
+      );
+      return a === 'remove' ? a : a && a.props;
     },
   };
 
@@ -378,6 +393,12 @@ export function useBlockDialog(
             <Button kind="outlined" onClick={() => void leave()}>
               {t.common.cancel}
             </Button>
+            {open.step === 'fields' && open.removable && !open.isNew && look === 'side-sheet' && (
+              // After Save and Cancel in the start-aligned row, in the error colour (the theme's text button with its colour variable).
+              <Button kind="text" style={{ '--button-text-text': 'var(--error)' } as CSSProperties} onClick={() => done('remove')}>
+                {t.common.remove}
+              </Button>
+            )}
           </>
         }
       >

package/src/CreateFab.tsx

@@ -0,0 +1,8 @@
+// A screen's one create action as a FAB (Files, Redirects, a single-file list form): a button, busy and
+// disabled as the screen says. Exposes CreateFab. Uses FabMenu (ui.tsx).
+import { Plus } from '@phosphor-icons/react';
+import { FabMenu } from './ui';
+
+export function CreateFab({ label, onClick, busy, disabled }: { label: string; onClick: () => void; busy?: boolean; disabled?: boolean }) {
+  return <FabMenu icon={Plus} label={label} items={[{ icon: Plus, label, onClick, busy, disabled }]} />;
+}

package/src/DataForm.tsx

@@ -4,7 +4,6 @@
 // is opened as changes that are not saved. Exposes DataForm (default). Its values from the file and back: dataFileValues.ts;
 // a menu's fields: DataFileFields.tsx.
 import { useMemo, useState } from 'react';
-import { Plus } from '@phosphor-icons/react';
 import { entryName, slugify, slugOf, type DataFile, type FilesCollection, type FolderCollection } from './schema';
 import { config, header, keptBy, sharing, siteName, usesOf } from '@site/editor';
 import { apps, asWritten, collections } from './site';
@@ -12,6 +11,7 @@ import { kindDraw } from './apps';
 import { ConflictError, type RepoFile } from './github';
 import { clean, newItem, newValue, problemAt } from './check';
 import { FieldInput, FieldList, Fields, useWrongField, WrongField, type FieldContext } from './fields';
+import { CreateFab } from './CreateFab';
 import { DataFileFields } from './DataFileFields';
 import { dataOf, fieldsOf, listOnly, valuesOf } from './dataFileValues';
 import SectionsField from './SectionsField';
@@ -21,7 +21,7 @@ import { splitPicture } from '../lib/crop.mjs';
 import { useMediaPicker } from './Media';
 import FormFrame, { savedStatus, useSavedAt } from './FormFrame';
 import { savedOn, VersionNotice, VersionsButton, WithVersions, type ShownVersion } from './Versions';
-import { Button, CheckList, FoldSection, FormColumns, Group, IconButton, Preview, FormHeading, SharePreview, Notice, ListItem } from './ui';
+import { Button, CheckList, FoldSection, FormColumns, Group, Preview, FormHeading, SharePreview, Notice, ListItem } from './ui';
 import { SearchPreview } from './SearchPreview';
 import { searchedAs } from './googleResult.mjs';
 import { plain, SEO_FIELDS, seoRating, SHARE_FIELDS, sharedAs } from './seo';
@@ -34,7 +34,7 @@ type Props = {
   dataFile?: DataFile;
   file: RepoFile;
   env: Env;
-  /** A new entry of this kind (FolderCollection.kinds), picked under "+". */
+  /** A new entry of this kind (FolderCollection.kinds), picked in the list's create FAB menu. */
   kind?: string;
 };
 
@@ -294,7 +294,7 @@ function Form({
       label: v.label,
       node: draw({ ...values, ...v.props }, { lists: env.lists, testimonials: env.testimonials, relations: env.relations, site: env.site }),
     }));
-  // A file that is a list (the menus) is added to with "+" in the top bar, like the other lists; its own fields
+  // A file that is a list (the menus) is added to with the FAB, like the other lists; its own fields
   // ("Aktiveret") stand above it.
   const root = dataFile?.root;
   // Where the entry is used on the site (a tag: its posts, testimonials, promotions and blocks), each opening it.
@@ -318,19 +318,7 @@ function Form({
           }
           status={fixed ? savedStatus({ savedAt, saving, deleting }) : undefined}
           view={view}
-          actions={
-            <>
-              {!isNew && <VersionsButton env={env} path={base.path} onPick={onVersion} />}
-              {root && (
-                <IconButton
-                  icon={Plus}
-                  label={t.forms.addOne(root.singular!)}
-
-                  onClick={() => setItems([...items, newItem(root)])}
-                />
-              )}
-            </>
-          }
+          actions={!isNew && <VersionsButton env={env} path={base.path} onPick={onVersion} />}
           dirty={dirty}
           saving={saving || deleting}
           deleting={deleting}
@@ -424,6 +412,8 @@ function Form({
               ))}
             </Group>
           )}
+          {/* A single-file list: a new item in it. */}
+          {root && <CreateFab label={t.forms.addOne(root.singular!)} onClick={() => setItems([...items, newItem(root)])} />}
         </FormFrame>
         {picker}
       </WrongField.Provider>

package/src/EntryForm.tsx

@@ -641,7 +641,7 @@ function Form({
               <>
                 <FoldSection {...sectionProps('content')}>
                   {collection.fields.filter((f) => TOP.includes(f.name) && !STATUS.includes(f.name)).map(field)}
-                  <div ref={textBox} className="scroll-mt-[calc(5rem+env(safe-area-inset-top))]">
+                  <div ref={textBox} className="scroll-mt-[calc(1rem+env(safe-area-inset-top))]">
                     <span className="mb-1 block font-medium">{t.forms.text}</span>
                     <MarkdownEditor
                       ref={text}

package/src/FormFrame.tsx

@@ -3,7 +3,8 @@
 // of the screen with "Gem" (across the bar on a phone, at its end from medium), which is only there when something
 // has been changed. Messages are shown by the app (Env.notify); the first "Gem" asks whether the editor may also send notifications.
 // Leaving with changes that are not saved asks first, to save them or not (in the editor's dialog;
-// closing or reloading the page asks in the browser's own). "Forhåndsvis" beside "Gem" and in the top bar shows the page with
+// closing or reloading the page asks in the browser's own). "Forhåndsvis" beside "Gem" and, as a page action (Screen.tsx `pageActions`:
+// the end of the title row from expanded, the top bar below it), shows the page with
 // what is in the form, before it is saved (pagePreview.tsx).
 import { useEffect, useRef, useState, type ReactNode } from 'react';
 import { ArrowSquareOut, Binoculars, Trash } from '@phosphor-icons/react';
@@ -177,9 +178,9 @@ export default function FormFrame<T extends string>({
       drawer={drawer}
       tabs={tabs}
       back={{ guard: leaveTo, ...back }}
-      actions={
+      actions={actions}
+      pageActions={
         <>
-          {actions}
           {onPreview && <IconButton icon={Binoculars} label={t.preview.button} aria-haspopup="dialog" onClick={onPreview} />}
           {view && <IconLink href={view} target="_blank" rel="noopener" label={t.app.viewOnSite} icon={ArrowSquareOut} />}
         </>

package/src/Library.tsx

@@ -21,7 +21,6 @@ import {
   ListBullets,
   Moon,
   Palette,
-  Plus,
   Ruler,
   Shapes,
   SignOut,
@@ -33,6 +32,7 @@ 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 { ListFab } from './ListFab';
 import { StartStatus } from './StartStatus';
 import {
   appearance,
@@ -60,14 +60,12 @@ import {
   Group,
   IconButton,
   LeadingIcon,
-  NewChoice,
   SearchRow,
   useKept,
   SegmentedButton,
   UnfoldButton,
   GroupTitle,
   SwitchRow,
-  IconLink,
   ScoreRing,
   scoreOf,
   Button,
@@ -178,7 +176,7 @@ function PartRow({ id, label, href, count }: { id: string } & ReturnType<typeof
 }
 
 // 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.
+// menu for a new page or post (StartFab.tsx); each list has its own FAB for a new entry (ListFab.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
@@ -1374,13 +1372,6 @@ export function List({ collection, tab, files, env }: { collection: Collection;
               onClick={() => (location.hash = `slettet/${collection.id}`)}
             />
           )}
-          {/* Of more than one kind (a pop-up: Standard or an app's, e.g. Mailchimp): a sheet to pick it. */}
-          {collection.create &&
-            (kinds.length > 1 ? (
-              <NewChoice title={collection.create} options={kinds} onChange={(kind) => (location.hash = `#ny/${collection.id}/${kind}`)} />
-            ) : (
-              <IconLink href={`#ny/${collection.id}`} label={collection.create!} icon={Plus} />
-            ))}
         </>
       }
     >
@@ -1479,6 +1470,8 @@ export function List({ collection, tab, files, env }: { collection: Collection;
       ) : (
         <p className="mb-8 px-1 text-muted">{t.common.noMatch}</p>
       )}
+      {/* A new entry: the list's FAB, or a FAB menu of its kinds when it has several (a pop-up: Standard or an app's, e.g. Mailchimp). */}
+      <ListFab collection={collection} kinds={kinds} />
     </Screen>
   );
 }

package/src/ListFab.tsx

@@ -0,0 +1,13 @@
+// The create FAB of a list (List in Library.tsx): its own create action, or a menu of its kinds when it has several.
+// Exposes ListFab. Uses FabMenu (ui.tsx), listFab (fabScreens.ts) and the icons of site.ts.
+import { Plus } from '@phosphor-icons/react';
+import { listFab } from './fabScreens';
+import { icons } from './site';
+import { FabMenu } from './ui';
+
+export function ListFab({ collection, kinds }: { collection: { id: string; create?: string }; kinds: { value: string; label: string }[] }) {
+  // One action is the FAB's (the +); each of several kinds has its list's icon.
+  const actions = listFab(collection, kinds);
+  const icon = actions.length > 1 ? (icons[collection.id] ?? Plus) : Plus;
+  return <FabMenu icon={Plus} label={collection.create ?? ''} items={actions.map((a) => ({ ...a, icon }))} />;
+}

package/src/MarkdownEditor.tsx

@@ -1,7 +1,8 @@
 // The text of a page or blog post: Milkdown (packages/editor/src/markdown.mjs) with a small toolbar.
 // The text is shown in the site's own style (the "prose" classes of the pages). On pages the site's
 // blocks (src/apps/<app>/blocks/) can be put in the text with a button; each is a card with the block as it looks
-// on the site, which opens a menu (Ret, hide on the site, move, Fjern), with a free line kept between
+// on the site, which opens a menu (hide on the site, move; below expanded also Ret, Fjern; from expanded a tap opens the
+// side panel instead), with a free line kept between
 // two cards to write in. A fixed page's sections are such a text too (SectionsField.tsx), so both look
 // and work the same. The last tool, "Section settings", opens the section's sheet (BlockDialog.tsx).
 import {
@@ -64,7 +65,8 @@ import { sectionFrame } from './sectionFrame';
 import { IMAGE, type BlockAsk } from './BlockDialog';
 import SectionSettingsIcon from './SectionSettingsIcon';
 import { askLink } from './LinkSheet';
-import { Menu, MenuItem, Toolbar, ToolbarButton } from './ui';
+import { atLeastNow, Menu, MenuItem, Toolbar, ToolbarButton } from './ui';
+import { editsInPanel } from './sheetPlacement.mjs';
 import { shownAt } from './images';
 import { cropStyle, joinPicture, splitPicture } from '../lib/crop.mjs';
 import { describe, htmlBlock, type BlockProps } from './blocks';
@@ -283,8 +285,16 @@ const moves = (view: EditorView, i: number | null, locked: string[] = []): CardI
 };
 
 // The row of icons on a card (a block or a picture) in the text, opened by tapping it: items, as
-// they are when it opens. Returns how to close it.
-function cardMenu(view: EditorView, dom: HTMLElement, card: HTMLElement, name: string, items: () => (CardItem | undefined | '')[]) {
+// they are when it opens (no row when there are none). `tap` runs first on a tap that opens the row (not on one that
+// closes it): from expanded it opens the card's side panel. Returns how to close it.
+function cardMenu(
+  view: EditorView,
+  dom: HTMLElement,
+  card: HTMLElement,
+  name: string,
+  items: () => (CardItem | undefined | false | '')[],
+  tap?: () => void,
+) {
   let menu: HTMLElement | null = null;
   function close() {
     menu?.remove();
@@ -304,12 +314,13 @@ function cardMenu(view: EditorView, dom: HTMLElement, card: HTMLElement, name: s
   // `focus` (the arrow used to move the card, when it opens again on the moved card).
   function open(keyboard: boolean, focus?: string) {
     closeOpenMenu?.();
+    const shown = items().filter((it): it is CardItem => !!it);
+    if (!shown.length) return;
     menu = dom.appendChild(document.createElement('div'));
     menu.className = 'site-block-menu';
     menu.setAttribute('role', 'menu');
     menu.setAttribute('aria-label', name);
-    for (const it of items()) {
-      if (!it) continue;
+    for (const it of shown) {
       const b = menu.appendChild(document.createElement('button'));
       b.type = 'button';
       b.setAttribute('role', 'menuitem');
@@ -356,7 +367,11 @@ function cardMenu(view: EditorView, dom: HTMLElement, card: HTMLElement, name: s
     document.addEventListener('pointercancel', unlock, { capture: true, once: true });
     timer = window.setTimeout(unlock, 1000);
   });
-  card.addEventListener('click', (e) => (menu ? close() : open(e.detail === 0)));
+  card.addEventListener('click', (e) => {
+    if (menu) return close();
+    tap?.();
+    open(e.detail === 0);
+  });
   return close;
 }
 
@@ -397,7 +412,8 @@ function pictureCard(node: Node, view: EditorView, getPos: () => number | undefi
   if (cut) img.style.cssText = cut.img;
   if (node.attrs.title) img.title = node.attrs.title;
   const describe = async () => {
-    const props = await sheet()?.edit(IMAGE, { src, alt: node.attrs.alt ?? '', format, crop, decorative });
+    const props = await sheet()?.edit(IMAGE, { src, alt: node.attrs.alt ?? '', format, crop, decorative }, false, true);
+    if (props === 'remove') return remove();
     const pos = getPos();
     if (!props || pos === undefined) return;
     view.dispatch(
@@ -408,14 +424,23 @@ function pictureCard(node: Node, view: EditorView, getPos: () => number | undefi
     const pos = getPos();
     if (pos !== undefined) view.dispatch(view.state.tr.delete(pos, pos + node.nodeSize));
   };
-  const close = cardMenu(view, dom, card, t.text.image, () => {
-    const pos = getPos();
-    return [
-      { icon: pencilIcon, label: t.common.edit, action: describe },
-      ...moves(view, pos === undefined ? null : view.state.doc.resolve(pos).index(0), sheet()?.template?.locked),
-      { icon: trashIcon, label: t.common.remove, action: remove, danger: true },
-    ];
-  });
+  // From expanded a picture's sheet is the side panel: a tap opens it, and the menu has no pen or trash (Remove is in the panel).
+  const inPanelNow = () => editsInPanel(atLeastNow('expanded'), true);
+  const close = cardMenu(
+    view,
+    dom,
+    card,
+    t.text.image,
+    () => {
+      const pos = getPos();
+      return [
+        !inPanelNow() && { icon: pencilIcon, label: t.common.edit, action: describe },
+        ...moves(view, pos === undefined ? null : view.state.doc.resolve(pos).index(0), sheet()?.template?.locked),
+        !inPanelNow() && { icon: trashIcon, label: t.common.remove, action: remove, danger: true },
+      ];
+    },
+    () => inPanelNow() && void describe(),
+  );
   return { dom, update: () => false, stopEvent: () => true, ignoreMutation: () => true, destroy: close };
 }
 
@@ -468,7 +493,7 @@ async function editLink(view: EditorView) {
 /** What applies where the cursor is, or to all of the selection: 'strong', 'emphasis', 'link',
  * 'h2', 'h3', 'text' (a paragraph, not in a list or quote), 'bullet', 'ordered' and 'quote'; with a colour
  * (text-colors.mjs) 'textColor' and the colour's class ('color-accent'). For the toolbar and the selection's menu,
- * 'section' and 'section-<colour>' in a top-level H2 (sectionState.mjs), which mark them. */
+ * 'section' and 'section-<colour>' in a top-level H1 or H2 (sectionState.mjs), which mark them. */
 export function activeOf(state: EditorView['state']): Set<string> {
   const { selection, storedMarks, schema } = state;
   const { $from, from, to, empty } = selection;
@@ -528,11 +553,11 @@ type Look = {
 // The levels of the top-level headings of a document, in order.
 const levelsOf = (doc: EditorView['state']['doc']): number[] => topHeadings(doc).map(({ node }) => node.attrs.level);
 
-// Whether a heading (H2) is selected, or a part of one.
-function inH2(state: EditorView['state']) {
+// Whether a heading that starts a section (H1 or H2) is selected, or a part of one.
+function inSectionHeading(state: EditorView['state']) {
   let found = false;
   const { from, to } = state.selection;
-  state.doc.nodesBetween(from, to, (n) => void (found ||= n.type.name === 'heading' && n.attrs.level === 2));
+  state.doc.nodesBetween(from, to, (n) => void (found ||= n.type.name === 'heading' && n.attrs.level <= 2));
   return found;
 }
 
@@ -544,7 +569,7 @@ const inLabel = (state: EditorView['state']) => state.selection.$from.parent.typ
 // page's headings (`h1`: only the levels headingChoices gives for the text), a heading or a subheading, a label above the heading; the ones that apply are marked. At a still
 // cursor, bold, italic, link and colour act on the whole word, the headings on the line; a move or a keypress hides the
 // row. On a phone, where the phone's own menu is over the selection and its handles under it, the row is at the bottom
-// of the screen, over the keyboard. sections: no colour in a heading (H2), the name of a section.
+// of the screen, over the keyboard. sections: no colour in a heading (H1 or H2), the name of a section.
 function selectionMenu(ctx: Ctx, h1: boolean, sections: boolean, colors: (button: HTMLElement) => void) {
   return new Plugin({
     view(view) {
@@ -588,7 +613,7 @@ function selectionMenu(ctx: Ctx, h1: boolean, sections: boolean, colors: (button
           label: t.text.color,
           on: (s) => marked(s, 'textColor'),
           action: colors,
-          off: (s) => inLabel(s) || (sections && inH2(s)),
+          off: (s) => inLabel(s) || (sections && inSectionHeading(s)),
           word: true,
         },
         ...(h1 ? [1, 2, 3] : [2, 3]).map((level) => ({
@@ -783,8 +808,20 @@ function blockCard(
     const pos = getPos();
     return pos === undefined ? null : view.state.doc.resolve(pos).index(0);
   };
+  // What the template (collections.ts) says of this block: a locked one is only edited, and the last shown one of a block
+  // the page must have cannot be hidden or removed (stays).
+  const keeps = () => {
+    const rules = asker()?.template;
+    const type = node.attrs.type;
+    const locked = !!rules?.locked?.includes(type);
+    const shownOfType = blocksOf(view.state.doc).filter((b) => b.type === type && b.hidden === false).length;
+    // (Not written with "!" before "hidden", which Tailwind would take for a class for the site.)
+    const last = hidden === false && !!rules?.required?.includes(type) && shownOfType <= 1;
+    return { rules, locked, stays: locked || last };
+  };
   const edit = async () => {
-    const props = await asker()?.edit(node.attrs.type, node.attrs.props);
+    const props = await asker()?.edit(node.attrs.type, node.attrs.props, false, !keeps().stays);
+    if (props === 'remove') return remove();
     const here = at();
     // The block's fields as changed; still hidden if it was.
     if (props && here)
@@ -806,26 +843,29 @@ function blockCard(
   // The choices that can be made here: no "Ret" without fields (but to where it is edited instead,
   // Block.edit), no move past the start or end. By the template (collections.ts): a locked block is
   // only edited, and the last shown one of a block the page must have cannot be hidden or removed.
-  const close = cardMenu(view, dom, card, name, () => {
-    const i = top();
-    const rules = asker()?.template;
-    const type = node.attrs.type;
-    const locked = !!rules?.locked?.includes(type);
-    const shownOfType = blocksOf(view.state.doc).filter((b) => b.type === type && b.hidden === false).length;
-    // (Not written with "!" before "hidden", which Tailwind would take for a class for the site.)
-    const last = hidden === false && !!rules?.required?.includes(type) && shownOfType <= 1;
-    const stays = locked || last;
-    return [
-      block?.fields.length
-        ? { icon: pencilIcon, label: t.common.edit, action: edit }
-        : block?.edit && { icon: pencilIcon, label: block.edit.text, action: () => leaveTo(`#${block.edit!.to}`) },
-      block?.shown || (stays && hidden === false)
-        ? undefined
-        : { icon: hidden ? eyeIcon : eyeSlashIcon, label: hidden ? t.text.showOnPage : t.text.hideOnPage, action: toggle },
-      ...(locked ? [] : moves(view, i, rules?.locked)),
-      stays ? undefined : { icon: trashIcon, label: t.common.remove, action: remove, danger: true },
-    ];
-  });
+  // From expanded the block's fields are in the side panel: a tap opens it, and the menu has no pen or trash (Remove is in the panel).
+  const inPanelNow = () => editsInPanel(atLeastNow('expanded'), !!block?.fields.length);
+  const close = cardMenu(
+    view,
+    dom,
+    card,
+    name,
+    () => {
+      const i = top();
+      const { rules, locked, stays } = keeps();
+      return [
+        block?.fields.length
+          ? !inPanelNow() && { icon: pencilIcon, label: t.common.edit, action: edit }
+          : block?.edit && { icon: pencilIcon, label: block.edit.text, action: () => leaveTo(`#${block.edit!.to}`) },
+        block?.shown || (stays && hidden === false)
+          ? undefined
+          : { icon: hidden ? eyeIcon : eyeSlashIcon, label: hidden ? t.text.showOnPage : t.text.hideOnPage, action: toggle },
+        ...(locked ? [] : moves(view, i, rules?.locked)),
+        stays || inPanelNow() ? undefined : { icon: trashIcon, label: t.common.remove, action: remove, danger: true },
+      ];
+    },
+    () => inPanelNow() && void edit(),
+  );
   // A changed block is drawn anew (update false); taps on the card and its menu are not ProseMirror's.
   return {
     dom,
@@ -1039,7 +1079,7 @@ export default forwardRef<MarkdownHandle, Props>(function MarkdownEditor(
     if (!src) return;
     const sheet = blocks ?? sheetProp;
     const picked = await sheet?.edit(IMAGE, { src, alt: '' }, true);
-    if (picked) run(insertImageCommand, { src: pictureSrc(picked), alt: String(picked.alt ?? '').trim() });
+    if (picked && picked !== 'remove') run(insertImageCommand, { src: pictureSrc(picked), alt: String(picked.alt ?? '').trim() });
   }
 
   // Puts the chosen block where the cursor is (a paragraph is split around it), or after the block
@@ -1113,8 +1153,9 @@ export default forwardRef<MarkdownHandle, Props>(function MarkdownEditor(
         : []),
     { label: t.text.undo, icon: ArrowUUpLeft, action: () => run(undoCommand) },
     { label: t.text.redo, icon: ArrowUUpRight, action: () => run(redoCommand) },
-    // The settings of the section the cursor's H2 starts (not a fixed page's text, whose H2s are its sections' names; the front page has it).
-    ...(framed && active.includes('section') && (blocks ?? sheetProp)
+    // The settings of the section the cursor's H1 or H2 starts (not a fixed page's text, whose H2s are its sections' names; the front
+    // page has it for its H2s, but not for its H1, which stays the banner without a colour).
+    ...(framed && active.includes('section') && !(sections && active.includes('h1')) && (blocks ?? sheetProp)
       ? [{ label: t.text.sectionSettings, icon: SectionSettingsIcon, action: sectionSettings }]
       : []),
   ];
@@ -1168,7 +1209,7 @@ export default forwardRef<MarkdownHandle, Props>(function MarkdownEditor(
       <Toolbar
         ref={toolbar}
         label={t.text.tools}
-        className="editor-tools sticky top-[calc(5rem+1px+env(safe-area-inset-top))] z-10 m-2 justify-center-safe overflow-x-auto rounded-panel border border-line medium:flex-wrap"
+        className="editor-tools sticky top-[env(safe-area-inset-top)] z-10 m-2 justify-center-safe overflow-x-auto rounded-panel border border-line medium:flex-wrap"
       >
         {tools.map((tool) => (
           <ReactFragment key={tool.label}>

package/src/Media.tsx

@@ -7,27 +7,18 @@
 // "Slet billede" (…) when nothing uses it (also not the site's own code, /editor/code-images.json). Its
 // name, under the title, can be changed with the pencil after it (not one the site's code uses),
 // 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
+// and the old address sends on to it (addresses.ts). The FAB 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 buttons that run (add, rename, delete, upload new) show the loading indicator while they do.
 // 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 {
-  ArrowsDownUp,
-  CalendarBlank,
-  Check,
-  ClockCounterClockwise,
-  PencilSimple,
-  Plus,
-  Trash,
-  UploadSimple,
-  X,
-} from '@phosphor-icons/react';
+import { ArrowsDownUp, CalendarBlank, Check, ClockCounterClockwise, PencilSimple, Trash, UploadSimple, X } from '@phosphor-icons/react';
 import { moveRedirects, REDIRECTS } from './addresses';
 import { changesOf, flatten, readAll, REDIRECT_FILES } from './redirectData';
 import { ask } from './ask';
 import { dateName, headed, letterOf } from './Sheet';
+import { CreateFab } from './CreateFab';
 import Screen from './Screen';
 import {
   Button,
@@ -689,7 +680,6 @@ export default function Media({ files, env, open }: { files: RepoFile[]; env: En
 
             onClick={() => (location.hash = 'slettet/filer')}
           />
-          <IconButton icon={Plus} label={t.media.add} busy={adding} disabled={adding} onClick={add} />
         </>
       }
     >
@@ -727,6 +717,7 @@ export default function Media({ files, env, open }: { files: RepoFile[]; env: En
         <SheetTitle title={src ? fileName(src) : ''} onClose={() => dialog.current?.close()} />
         {!wide && src && <SheetBody>{details(src)}</SheetBody>}
       </BottomSheet>
+      <CreateFab label={t.media.add} busy={adding} disabled={adding} onClick={add} />
     </Screen>
   );
 }