@morphemecms/cms 0.7.1 → 0.8.0

package/site/schema.ts

@@ -3,6 +3,7 @@
 // What is said of the business and the person beyond the contact details is the site's (@site/schema).
 // Only facts that are on the site; no ratings or reviews.
 import { site } from './site';
+import { sameAsOf } from './social.mjs';
 import { schema as facts } from '@site/schema';
 
 /** What a site says of itself in the structured data (@site/schema). */
@@ -61,6 +62,7 @@ export const business = {
   hasMap: site.mapsUrl,
   ...(facts.offers ? { hasOfferCatalog: { '@id': abs(facts.offers) } } : {}),
   ...(facts.person ? { founder: { '@id': ids.person }, employee: { '@id': ids.person } } : {}),
+  ...(site.social.profiles.length ? { sameAs: sameAsOf(site.social.profiles) } : {}),
 };
 
 export const businessRef = { '@type': facts.businessType, '@id': ids.business, name: site.name, url: abs('/') };

package/site/site.ts

@@ -1,5 +1,6 @@
-// Name, title, phone, email, address and CVR number: contact.json; the texts of "Book en tid": booking.json (the calendar
-// is the app Calendly's, src/apps/calendly/); the menus: menu.json and mobile-menu.json; the shared texts of the other blocks: their shared.ts, with those saved in
+// Name, title, phone, email, address and CVR number: contact.json; the profiles and share buttons: social.json (optional, an
+// older site has none); the texts of "Book en tid": booking.json (the calendar is the app Calendly's, src/apps/calendly/);
+// the menus: menu.json and mobile-menu.json; the shared texts of the other blocks: their shared.ts, with those saved in
 // blocks.json over them (`blockTexts`).
 // The site's owner edits them in the editor (/editor/); what the editor does not edit is the site's config
 // (src/site/config.ts).
@@ -10,6 +11,7 @@ import mobileMenu from '@data/mobile-menu.json';
 import blocks from '@data/blocks.json';
 import standardPages from '@data/standard-pages.json';
 import { config } from '@site/config';
+import { socialOf } from './social.mjs';
 import { sharedTexts, type SharedTexts } from '@morphemecms/cms/src/shared';
 import { standardShared } from '@morphemecms/cms/src/standard/sharedTexts';
 
@@ -19,6 +21,9 @@ const phoneIntl = `${contact.phone.trim().startsWith('+') ? '+' : '+45'}${contac
 // The CVR number, when it is filled in ("Virksomheden" › "Kontakt").
 const { cvr = '' } = contact as typeof contact & { cvr?: string };
 
+// Optional file: an older site has no social.json, so it is read with a glob, not an import.
+const socialFile = Object.values(import.meta.glob<Record<string, unknown>>('/src/data/social.json', { eager: true, import: 'default' }))[0];
+
 export const site = {
   name: contact.name,
   role: contact.role,
@@ -52,6 +57,8 @@ export const site = {
   /** The owner's picture (config.ts), or '' when the site has none. */
   portrait: config.picture?.src ?? '',
   portraitAlt: config.picture?.alt ?? '',
+  /** Profiles and share buttons (Company › Social media, social.json); all buttons on without the file. */
+  social: socialOf(socialFile),
   /** The logo in the structured data (config.ts), '/logo.svg' unless the site says otherwise. */
   logo: config.logo || '/logo.svg',
 };

package/site/social.d.mts

@@ -0,0 +1,37 @@
+/** @typedef {(typeof PROFILE_IDS)[number]} ProfileId */
+/** @typedef {(typeof SHARE_IDS)[number]} ShareId */
+/** @typedef {{ profiles: { id: ProfileId, url: string }[], share: ShareId[] }} Social */
+/**
+ * @param {Record<string, unknown> | undefined} raw
+ * @returns {Social}
+ */
+export function socialOf(raw: Record<string, unknown> | undefined): Social;
+/**
+ * @param {{ url: string, title: string, picture?: string }} post
+ * @param {ShareId[]} share
+ * @returns {{ id: ShareId, href?: string }[]}
+ */
+export function shareLinks(post: {
+    url: string;
+    title: string;
+    picture?: string;
+}, share: ShareId[]): {
+    id: ShareId;
+    href?: string;
+}[];
+/**
+ * @param {Social['profiles']} profiles
+ * @returns {string[]}
+ */
+export function sameAsOf(profiles: Social["profiles"]): string[];
+export const PROFILE_IDS: readonly ["facebook", "instagram", "linkedin", "x", "youtube", "tiktok", "pinterest"];
+export const SHARE_IDS: readonly ["facebook", "x", "linkedin", "pinterest", "copy-link"];
+export type ProfileId = (typeof PROFILE_IDS)[number];
+export type ShareId = (typeof SHARE_IDS)[number];
+export type Social = {
+    profiles: {
+        id: ProfileId;
+        url: string;
+    }[];
+    share: ShareId[];
+};

package/site/social.mjs

@@ -0,0 +1,92 @@
+// The site's social settings (src/data/social.json, Company > Social media in the editor): its profiles, for the structured
+// data (sameAs), and the share buttons under a blog post, with their addresses. Exposes socialOf, shareLinks, sameAsOf.
+
+export const PROFILE_IDS = /** @type {const} */ (['facebook', 'instagram', 'linkedin', 'x', 'youtube', 'tiktok', 'pinterest']);
+export const SHARE_IDS = /** @type {const} */ (['facebook', 'x', 'linkedin', 'pinterest', 'copy-link']);
+/** @typedef {(typeof PROFILE_IDS)[number]} ProfileId */
+/** @typedef {(typeof SHARE_IDS)[number]} ShareId */
+/** @typedef {{ profiles: { id: ProfileId, url: string }[], share: ShareId[] }} Social */
+
+/**
+ * @param {Record<string, unknown> | undefined} raw
+ * @returns {Social}
+ */
+export function socialOf(raw) {
+  const data = raw || {};
+
+  // Profiles
+  const profiles = [];
+  for (const id of PROFILE_IDS) {
+    const value = data[id];
+    if (typeof value === 'string') {
+      const trimmed = value.trim();
+      if (trimmed !== '') {
+        profiles.push({ id, url: trimmed });
+      }
+    }
+  }
+
+  // Share switches
+  const switchMap = {
+    facebook: 'shareFacebook',
+    x: 'shareX',
+    linkedin: 'shareLinkedin',
+    pinterest: 'sharePinterest',
+    'copy-link': 'shareCopyLink',
+  };
+
+  const share = [];
+  for (const id of SHARE_IDS) {
+    const key = switchMap[id];
+    const val = data[key];
+    if (val !== false) {
+      share.push(id);
+    }
+  }
+
+  return { profiles, share };
+}
+
+/**
+ * @param {{ url: string, title: string, picture?: string }} post
+ * @param {ShareId[]} share
+ * @returns {{ id: ShareId, href?: string }[]}
+ */
+export function shareLinks(post, share) {
+  const links = [];
+  const url = encodeURIComponent(post.url);
+  const title = encodeURIComponent(post.title);
+  const picture = post.picture ? encodeURIComponent(post.picture) : '';
+
+  for (const id of share) {
+    let item = { id };
+
+    if (id === 'facebook') {
+      item.href = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
+    } else if (id === 'x') {
+      item.href = `https://x.com/intent/post?url=${url}&text=${title}`;
+    } else if (id === 'linkedin') {
+      item.href = `https://www.linkedin.com/sharing/share-offsite/?url=${url}`;
+    } else if (id === 'pinterest') {
+      if (post.picture && post.picture !== '') {
+        item.href = `https://pinterest.com/pin/create/button/?url=${url}&media=${picture}&description=${title}`;
+      } else {
+        continue;
+      }
+    } else if (id === 'copy-link') {
+      // No href, just { id: 'copy-link' }
+    }
+
+    links.push(item);
+  }
+
+  return links;
+}
+
+/**
+ * @param {Social['profiles']} profiles
+ * @returns {string[]}
+ */
+export function sameAsOf(profiles) {
+  return profiles.map((p) => p.url);
+}

package/site/social.test.mjs

@@ -0,0 +1,80 @@
+import { strict as assert } from 'node:assert';
+import { test } from 'node:test';
+import { socialOf, shareLinks, sameAsOf } from './social.mjs';
+
+test('no file', () => {
+  assert.deepEqual(socialOf(undefined), { profiles: [], share: ['facebook', 'x', 'linkedin', 'pinterest', 'copy-link'] });
+});
+
+test('empty object', () => {
+  assert.deepEqual(socialOf({}), { profiles: [], share: ['facebook', 'x', 'linkedin', 'pinterest', 'copy-link'] });
+});
+
+test('empty profiles are dropped', () => {
+  assert.deepEqual(socialOf({ facebook: '', x: '  ', linkedin: ' https://linkedin.com/in/a ' }).profiles, [
+    { id: 'linkedin', url: 'https://linkedin.com/in/a' },
+  ]);
+});
+
+test('profiles keep a fixed order', () => {
+  assert.deepEqual(
+    socialOf({ pinterest: 'https://p', facebook: 'https://f' }).profiles.map((p) => p.id),
+    ['facebook', 'pinterest'],
+  );
+});
+
+test('a switch turns a button off', () => {
+  assert.deepEqual(socialOf({ shareX: false }).share, ['facebook', 'linkedin', 'pinterest', 'copy-link']);
+});
+
+test('all switches off', () => {
+  assert.deepEqual(
+    socialOf({ shareFacebook: false, shareX: false, shareLinkedin: false, sharePinterest: false, shareCopyLink: false }).share,
+    [],
+  );
+});
+
+test('x encodes the address and title', () => {
+  assert.deepEqual(shareLinks({ url: 'https://a.dk/b c/', title: 'Hi & bye' }, ['x']), [
+    { id: 'x', href: 'https://x.com/intent/post?url=https%3A%2F%2Fa.dk%2Fb%20c%2F&text=Hi%20%26%20bye' },
+  ]);
+});
+
+test('facebook', () => {
+  assert.deepEqual(shareLinks({ url: 'https://a.dk/p/', title: 'T' }, ['facebook']), [
+    { id: 'facebook', href: 'https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fa.dk%2Fp%2F' },
+  ]);
+});
+
+test('linkedin', () => {
+  assert.deepEqual(shareLinks({ url: 'https://a.dk/p/', title: 'T' }, ['linkedin']), [
+    { id: 'linkedin', href: 'https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fa.dk%2Fp%2F' },
+  ]);
+});
+
+test('pinterest with a picture', () => {
+  assert.deepEqual(shareLinks({ url: 'https://a.dk/p/', title: 'T', picture: 'https://a.dk/i.webp' }, ['pinterest']), [
+    {
+      id: 'pinterest',
+      href: 'https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fa.dk%2Fp%2F&media=https%3A%2F%2Fa.dk%2Fi.webp&description=T',
+    },
+  ]);
+});
+
+test('pinterest without a picture is left out', () => {
+  assert.deepEqual(shareLinks({ url: 'https://a.dk/p/', title: 'T' }, ['pinterest', 'copy-link']), [{ id: 'copy-link' }]);
+});
+
+test('sameAs with no profiles', () => {
+  assert.deepEqual(sameAsOf([]), []);
+});
+
+test('sameAs keeps the order', () => {
+  assert.deepEqual(
+    sameAsOf([
+      { id: 'facebook', url: 'https://f' },
+      { id: 'x', url: 'https://x' },
+    ]),
+    ['https://f', 'https://x'],
+  );
+});

package/site/theme.d.mts

@@ -1,3 +1,5 @@
+/** What is wrong with a theme's styles/global.css import (`css` is the file's text): null when it is right. */
+export function importProblem(theme: any, css: any): string | null;
 /** The choice of icon pack made under "Indstillinger" › "Udseende" › "Ikonpakker" (src/data/icons.json, `{ "pack": "<id>"
  * }`), or undefined while none is made (then the theme's is used). */
 export function chosenPack(): any;

package/site/theme.mjs

@@ -34,12 +34,16 @@ export const themeFolder = (theme) =>
 // What the standard theme has, as its folder in src/themes/: what the site's pages (packages/editor/pages/) and the editor
 // (src/site/) take from it as @theme. Besides these, the look of its blocks (blocks/<type>/) and what they import.
 // Another theme needs only theme.json and styles/global.css (OWN_FILES); the rest it may have, else it is the
-// standard theme's.
+// standard theme's. A theme may replace each part of the post page (components/Post*, ShareRow, RelatedPosts) by a file
+// of the same name.
 export const THEME_FILES = [
   'theme.json',
   'styles/global.css',
   'layouts/PageLayout.astro',
   'layouts/PostLayout.astro',
+  ...['PostHeader.astro', 'PostAuthor.astro', 'PostMeta.tsx', 'ShareRow.astro', 'PostCard.tsx', 'RelatedPosts.astro'].map(
+    (f) => `components/${f}`,
+  ),
   ...['Home', 'Blog', 'Category', 'New', 'NotFound'].map((t) => `templates/${t}.astro`),
   'editor/previews.tsx',
   'editor/looks.mjs',
@@ -63,9 +67,19 @@ const CONTRACT_FILES = ['index.tsx', 'shared.ts', 'texts.ts', 'list.ts', 'fields
 // How a block looked before it was drawn from its view, once on the site and once in the editor: now View.tsx.
 const OLD_LOOK = ['Site.astro', 'draw.tsx'];
 
-// An import of the UI components (ui.css) or of the standard theme's CSS that has them (base.css, global.css); the
-// standard theme's own global.css imports ./base.css.
-const UI_IMPORT = /@import\s+['"](?:@morphemecms\/cms\/theme\/styles\/|\.\/)(?:ui|base|global)\.css['"]/;
+// The standard theme's own global.css imports ./base.css.
+const STANDARD_IMPORT = /@import\s+['"]\.\/base\.css['"]/;
+// Every other theme imports the standard theme's global.css, so Material is its fallback.
+const FALLBACK_IMPORT = /@import\s+['"]@morphemecms\/cms\/theme\/styles\/global\.css['"]/;
+
+/** What is wrong with a theme's styles/global.css import (`css` is the file's text): null when it is right. */
+export function importProblem(theme, css) {
+  if (theme === STANDARD_THEME)
+    return STANDARD_IMPORT.test(css) ? null : `${themeFolder(theme)}/styles/global.css: importerer ikke ./base.css.`;
+  return FALLBACK_IMPORT.test(css)
+    ? null
+    : `${themeFolder(theme)}/styles/global.css: importerer ikke standardtemaet, som er temaets fallback: @import '@morphemecms/cms/theme/styles/global.css' øverst.`;
+}
 
 const folders = (url) =>
   existsSync(url)
@@ -312,13 +326,13 @@ export function themeProblems(theme) {
   if (theme === STANDARD_THEME)
     for (const type of standard)
       if (!has(`${themeFolder(theme)}/blocks/${type}/View.tsx`)) problems.push(`${themeFolder(theme)}/blocks/${type}/View.tsx mangler.`);
-  // Every theme draws the UI components (styles/ui.css: the buttons and icon buttons): it imports them, itself or
-  // through the standard theme's base.css or global.css.
+  // Every theme builds on the standard theme. Another theme imports the standard theme's global.css, so a style it does
+  // not write is Material's; the standard theme's own imports ./base.css.
   const css = `${themeFolder(theme)}/styles/global.css`;
-  if (has(css) && !UI_IMPORT.test(readFileSync(new URL(css, root), 'utf8')))
-    problems.push(
-      `${css}: importerer ikke temaets UI-dele (knapperne): @import '@morphemecms/cms/theme/styles/ui.css', eller standardtemaets base.css eller global.css, der gør det.`,
-    );
+  if (has(css)) {
+    const problem = importProblem(theme, readFileSync(new URL(css, root), 'utf8'));
+    if (problem !== null) problems.push(problem);
+  }
   for (const type of folders(new URL(`${themeFolder(theme)}/blocks/`, root))) {
     const dir = `${themeFolder(theme)}/blocks/${type}`;
     if (!standard.has(type)) problems.push(`${dir}: et tema kan kun have udseendet af en standardblok, og "${type}" er ikke en.`);

package/site/themeImport.test.mjs

@@ -0,0 +1,40 @@
+// Tests of importProblem (site/theme.mjs): every theme imports Material's global.css as its fallback.
+// Run with `node --test site/themeImport.test.mjs`.
+import { strict as assert } from 'node:assert';
+import { registerHooks } from 'node:module';
+import { test } from 'node:test';
+
+// theme.mjs imports this package by its name, which only works from an installed copy: point the name at this folder.
+const PACKAGE = '@morphemecms/cms/';
+const pkg = new URL('../', import.meta.url);
+registerHooks({
+  resolve: (specifier, context, next) =>
+    specifier.startsWith(PACKAGE) ? next(new URL(specifier.slice(PACKAGE.length), pkg).href, context) : next(specifier, context),
+});
+const { importProblem } = await import('./theme.mjs');
+
+const GLOBAL = '@morphemecms/cms/theme/styles/global.css';
+
+test('another theme that imports the standard theme is right', () => {
+  assert.equal(importProblem('venus', `@import '${GLOBAL}';`), null);
+  assert.equal(importProblem('venus', `@import "${GLOBAL}";`), null);
+});
+
+test('another theme that imports base.css is told to import global.css', () => {
+  const problem = importProblem('venus', `@import '@morphemecms/cms/theme/styles/base.css';`);
+  assert.ok(problem.includes(GLOBAL));
+});
+
+test('another theme that imports ui.css is told where', () => {
+  const problem = importProblem('venus', `@import '@morphemecms/cms/theme/styles/ui.css';`);
+  assert.ok(problem.includes('src/themes/venus/styles/global.css'));
+});
+
+test('another theme with no import has a problem', () => {
+  assert.equal(typeof importProblem('venus', ':root { --radius: 1rem; }'), 'string');
+});
+
+test('the standard theme imports ./base.css', () => {
+  assert.equal(importProblem('saturn', `@import './base.css';`), null);
+  assert.ok(importProblem('saturn', ':root {}').includes('./base.css'));
+});

package/src/EntryForm.tsx

@@ -4,8 +4,8 @@
 // gives the same page). A new address (Adresse) moves the page or post, with a redirect from the
 // old one (addresses.ts). The Filer files the page newly refers to get the page's tags in the same commit (autoTags.mjs).
 // An earlier version (Versions.tsx) is opened as changes that are not saved,
-// at the address the page or post has now.
-// The form's sections are listed in a pane (large and wider) or a side sheet (below): SectionList in ui.tsx.
+// at the address the page or post has now. Its preview draft says whether it is a post (post, for the lead).
+// The form's sections are listed as "on this page" in a card at the end of the form (large and wider only): SectionList in ui.tsx.
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { slugify, slugOf, type Field, type MarkdownCollection } from './schema';
@@ -34,20 +34,7 @@ import { isOver } from '../lib/notice.mjs';
 import { splitPicture } from '../lib/crop.mjs';
 import { asStandardTemplate, blockProblems, notOffered, siteBlocks } from './registry';
 import { FieldInput, Fields, useWrongField, WrongField, type FieldContext } from './fields';
-import { Article, ClockCounterClockwise, Eye, MagnifyingGlass, ShareNetwork, SlidersHorizontal } from '@phosphor-icons/react';
-import {
-  CheckList,
-  FoldSection,
-  FormColumns,
-  type NavigationItem,
-  SectionList,
-  SectionPane,
-  SectionSheet,
-  SectionsButton,
-  SharePreview,
-  useAtLeast,
-  useInView,
-} from './ui';
+import { CheckList, FoldSection, FormColumns, type NavigationItem, SectionList, SectionPane, SharePreview, useInView } from './ui';
 import FormFrame, { savedStatus, useSavedAt } from './FormFrame';
 import { usePagePreview } from './pagePreview';
 import { savedOn, VersionList, VersionNotice, WithVersions, type ShownVersion } from './Versions';
@@ -67,8 +54,8 @@ const SHARE = SHARE_FIELDS;
 // The sections of the form, under each other on one page, each folding in and out under its heading (FoldSection in
 // ui.tsx): the text with the title and heading (open from the start), the status, the other fields, those for search
 // engines, those for social media, and the earlier versions (folded from the start, so the page is short; nothing is remembered till
-// the next time). Its list (on large and wider screens in a pane at the end of the form, narrower in a side sheet from the
-// button at the right of the top bar) opens one and scrolls to it, and marks the one in view. A field that keeps the form from being
+// the next time). Its list (an "on this page" card at the end of the form, on large and wider screens only) opens one and
+// scrolls to it, and marks the one in view. A field that keeps the form from being
 // saved has its section opened and is scrolled to (FieldInput in fields.tsx).
 type Section = 'content' | 'status' | 'other' | 'seo' | 'share' | 'versions';
 const sectionOf = (path: string): Section => {
@@ -226,19 +213,16 @@ function Form({
     (text) => notify({ text, error: true }),
     (path) => unfold(sectionOf(path)),
   );
-  // On large and wider screens: the sections pane at the end of the form, until its button puts it away; narrower, the
-  // sections are in a side sheet, opened by the same button.
-  const large = useAtLeast('large');
-  const [pane, setPane] = useState(true);
-  const [sheet, setSheet] = useState(false);
+  // The form's name, in the top bar and over the sections list (the "on this page" card, on large and wider screens).
+  const formTitle = isNew ? collection.create! : String(initial.title || collection.singular);
   const has = (id: Section) => collection.fields.some(inSection(id));
   const sections: NavigationItem[] = [
-    { id: 'content', label: t.forms.sections.content, icon: Article },
-    ...(has('status') ? [{ id: 'status', label: t.forms.sections.status, icon: Eye }] : []),
-    ...(has('other') ? [{ id: 'other', label: t.forms.otherFields, icon: SlidersHorizontal }] : []),
-    ...(has('seo') ? [{ id: 'seo', label: t.forms.seo, icon: MagnifyingGlass }] : []),
-    ...(has('share') ? [{ id: 'share', label: t.forms.share, icon: ShareNetwork }] : []),
-    ...(isNew ? [] : [{ id: 'versions', label: t.history.versions, icon: ClockCounterClockwise }]),
+    { id: 'content', label: t.forms.sections.content },
+    ...(has('status') ? [{ id: 'status', label: t.forms.sections.status }] : []),
+    ...(has('other') ? [{ id: 'other', label: t.forms.otherFields }] : []),
+    ...(has('seo') ? [{ id: 'seo', label: t.forms.seo }] : []),
+    ...(has('share') ? [{ id: 'share', label: t.forms.share }] : []),
+    ...(isNew ? [] : [{ id: 'versions', label: t.history.versions }]),
   ];
   const shows = (id: Section) => sections.some((s) => s.id === id);
   // The section in view, marked in the sections list: while the page scrolls, the last one whose top is above a third of the
@@ -291,8 +275,7 @@ function Form({
       cancelAnimationFrame(frame);
     };
   }, []);
-  // Opens a section and scrolls to it (or to `box` in it: the text), after the side sheet below large has been told to close (the page does
-  // not scroll while a dialog is open). It is opened at once (flushSync), so it is there to scroll to.
+  // Opens a section and scrolls to it (or to `box` in it: the text). It is opened at once (flushSync), so it is there to scroll to.
   const textBox = useRef<HTMLDivElement>(null);
   const goTo = (id: Section, box?: HTMLElement | null) => {
     if (!open.has(id)) flushSync(() => unfold(id));
@@ -644,7 +627,9 @@ function Form({
         shell: isNew || (relaid && others.length) ? others : url,
         heading: h1?.heading ?? (changes('title', 'heading') ? String(values.heading || named().title) : undefined),
         headingHtml: h1?.html,
-        // A post's picture at the top (a page has its pictures in its text).
+        // A post has a picture field (a page has its pictures in its text); the preview splits only a post's lead.
+        post: collection.fields.some((f) => f.name === 'image'),
+        // A post's picture at the top.
         image:
           collection.fields.some((f) => f.name === 'image') && changes('image', 'imageAlt', 'imageDecorative')
             ? values.image
@@ -673,17 +658,10 @@ function Form({
     <Fields.Provider value={fields}>
       <WrongField.Provider value={wrongField.field}>
         <FormFrame
-          title={isNew ? collection.create! : String(initial.title || collection.singular)}
+          title={formTitle}
           back={{ href: `#liste/${collection.id}`, label: collection.label }}
           status={savedStatus({ savedAt, saving, deleting, isNew })}
           view={isNew ? undefined : url}
-          drawer={
-            <SectionsButton
-              label={t.forms.sections.title}
-              open={large ? pane : sheet}
-              onClick={() => (large ? setPane(!pane) : setSheet(true))}
-            />
-          }
           dirty={dirty}
           saving={saving || deleting}
           deleting={deleting}
@@ -757,28 +735,13 @@ function Form({
               </>
             }
             pane={
-              pane ? (
-                <SectionPane title={t.forms.sections.title} open>
-                  <SectionList title={t.forms.sections.title} items={sections} value={section} onChange={pick} />
-                </SectionPane>
-              ) : undefined
+              <SectionPane caption={t.forms.sections.title} title={formTitle}>
+                <SectionList title={t.forms.sections.title} items={sections} value={section} onChange={pick} />
+              </SectionPane>
             }
           />
         </FormFrame>
         {blockDialog}
-        {!large && (
-          <SectionSheet title={t.forms.sections.title} open={sheet} onClose={() => setSheet(false)}>
-            <SectionList
-              title={t.forms.sections.title}
-              items={sections}
-              value={section}
-              onChange={(id) => {
-                setSheet(false);
-                pick(id);
-              }}
-            />
-          </SectionSheet>
-        )}
         {picker}
         {previewSheet}
       </WrongField.Provider>

package/src/FormFrame.tsx

@@ -1,7 +1,7 @@
 // What every form in the editor has around its fields: the top bar with the way back and a link to
 // the page on the site, "Slet" below the fields where entries can be deleted, and a bar at the bottom
-// of the screen with "Gem", 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.
+// 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
 // what is in the form, before it is saved (pagePreview.tsx).
@@ -32,7 +32,7 @@ type Props<T extends string> = {
   view?: string;
   /** More in the top bar, before the link to the site. */
   actions?: ReactNode;
-  /** The button at the end of the top bar, after the account (a form's SectionsButton in ui.tsx). */
+  /** The button at the end of the top bar, after the account. */
   drawer?: ReactNode;
   /** The form's tabs, in the top bar (Screen). */
   tabs?: TabChoice<T>;
@@ -206,8 +206,8 @@ export default function FormFrame<T extends string>({
       {(dirty || saving) && (
         <div className="editor-save-bar fixed inset-x-0 bottom-0 z-20 border-t border-line bg-surface/90 pb-[env(safe-area-inset-bottom)] backdrop-blur-md">
           <div className="mx-auto max-w-3xl px-4 py-3 medium:px-6">
-            {/* "Forhåndsvis" beside "Gem". */}
-            <div className={onPreview ? 'grid grid-cols-[auto_1fr] gap-2' : ''}>
+            {/* "Forhåndsvis" beside "Gem": across the bar on a phone, at its end from medium. */}
+            <div className={['gap-2 medium:flex medium:justify-end', onPreview && 'grid grid-cols-[auto_1fr]'].filter(Boolean).join(' ')}>
               {onPreview && (
                 <Button kind="outlined" icon={Binoculars} aria-haspopup="dialog" onClick={onPreview}>
                   {t.preview.button}

package/src/Parts.tsx

@@ -7,9 +7,6 @@
 import { useMemo, useRef, useState } from 'react';
 import {
   AppWindow,
-  Article,
-  Eye,
-  SlidersHorizontal,
   Gear,
   ArrowDown,
   ArrowsDownUp,
@@ -97,8 +94,6 @@ import {
   MenuRow,
   SectionList,
   SectionPane,
-  SectionSheet,
-  SectionsButton,
 } from './ui';
 import { FieldList, Fields, useWrongField, WrongField, type FieldContext } from './fields';
 import { newValue, problemAt } from './check';
@@ -146,12 +141,11 @@ export default function Parts({ env }: { env: Env }) {
   const [picture, setPicture] = useState(examplePicture);
   const [folded, setFolded] = useState<number | null>(0);
   const [sectionOpen, setSectionOpen] = useState<number | null>(0);
-  const [sectionsSheet, setSectionsSheet] = useState(false);
   const [sectionPicked, setSectionPicked] = useState('content');
   const sectionItems = [
-    { id: 'content', label: t.forms.sections.content, icon: Article },
-    { id: 'status', label: t.forms.sections.status, icon: Eye, badge: 2 },
-    { id: 'other', label: t.forms.otherFields, icon: SlidersHorizontal },
+    { id: 'content', label: t.forms.sections.content },
+    { id: 'status', label: t.forms.sections.status, badge: 2 },
+    { id: 'other', label: t.forms.otherFields },
   ];
   const [tags, setTags] = useState(['a', 'b']);
   const dialog = useRef<HTMLDialogElement>(null);
@@ -707,28 +701,12 @@ export default function Parts({ env }: { env: Env }) {
               </div>
             </Part>
 
-            <Part name="SectionList, SectionPane, SectionSheet, SectionsButton" use={use.sectionList}>
-              <div className="space-y-4">
-                <div className={row}>
-                  <SectionsButton label={t.forms.sections.title} open={sectionsSheet} onClick={() => setSectionsSheet(true)} />
-                </div>
-                <div className="max-w-sm">
-                  <SectionPane title={t.forms.sections.title} open>
-                    <SectionList title={t.forms.sections.title} items={sectionItems} value={sectionPicked} onChange={setSectionPicked} />
-                  </SectionPane>
-                </div>
+            <Part name="SectionList, SectionPane" use={use.sectionList}>
+              <div className="max-w-xs">
+                <SectionPane caption={t.forms.sections.title} title={examples.pages[0]}>
+                  <SectionList title={t.forms.sections.title} items={sectionItems} value={sectionPicked} onChange={setSectionPicked} />
+                </SectionPane>
               </div>
-              <SectionSheet title={t.forms.sections.title} open={sectionsSheet} onClose={() => setSectionsSheet(false)}>
-                <SectionList
-                  title={t.forms.sections.title}
-                  items={sectionItems}
-                  value={sectionPicked}
-                  onChange={(id) => {
-                    setSectionPicked(id);
-                    setSectionsSheet(false);
-                  }}
-                />
-              </SectionSheet>
             </Part>
 
             <Part name="SharePreview" use={use.sharePreview}>