@morphemecms/cms 0.5.0 → 0.7.0

package/src/ContainmentParts.tsx

@@ -1,11 +1,15 @@
-// "Dele" › "UI-komponenter" (BlockParts.tsx), the group "Dialoger, ark og karrusel": the theme's dialog, bottom sheet and carousel
-// (packages/editor/theme/ui/, through @site/editor) as the site draws them, with made-up texts and the plain picture: a
-// basic dialog, one with an icon, a list and a divider, the container alone (a pop-up's box) and a full-screen one; the
-// modal bottom sheet and the standard one collapsed, half expanded and expanded at the bottom of a frame with a page
-// behind it (it can be dragged and tapped there, as on the site); and the carousel in each of Material's layouts. Only
-// the standard sheet and the carousels do something here; the buttons lead nowhere.
+// "Dele" › "UI-komponenter" (BlockParts.tsx), the group "Dialoger, ark og karrusel": the theme's dialog, bottom sheet and
+// carousel (packages/editor/theme/ui/, through @site/editor) as the site draws them, with made-up texts and the plain
+// picture: a basic dialog, one with an icon, a list and a divider, the container alone (a pop-up's box) and a
+// full-screen one; the modal bottom sheet, three times, one per wide (a button opens it in a real dialog: on a phone at
+// half height, pulled up to full height; on a computer a dialog, a side sheet or a sheet with margins) and the standard
+// one collapsed, half expanded and expanded (and with the resize and collapse buttons) at the bottom of a frame with a
+// page behind it (it can be dragged and tapped there, as on the site; from the medium width they become a side sheet,
+// and one with wide="sheet" stays a sheet); and the carousel in each of Material's
+// layouts. The modal sheet, the standard sheet and the carousels do something here; the other buttons lead nowhere.
 import type { ReactNode } from 'react';
-import { SiteBottomSheet, SiteButton, SiteCarousel, SiteCheckbox, SiteDialog, SiteTextField, bottomSheetCoverClass } from './themeUi';
+import { SiteBottomSheet, SiteButton, SiteCarousel, SiteCheckbox, SiteDialog, SiteTextField } from './themeUi';
+import ModalSheetSample from './ModalSheetSample';
 import { Part } from './PartsShown';
 import { Preview } from './ui';
 import { examplePicture } from './examples';
@@ -44,7 +48,7 @@ function Dialogs() {
     </>
   );
   return (
-    <div className="grid gap-6 p-4 lg:grid-cols-2">
+    <div className="grid gap-6 p-4 expanded:grid-cols-2">
       <Shown label={say.dialogKinds.basic}>
         <SiteDialog headline={say.heading} supportingText={say.text} actions={actions} />
       </Shown>
@@ -87,37 +91,85 @@ function Dialogs() {
 }
 
 function BottomSheets() {
-  const standard = (state: 'collapsed' | 'half-expanded' | 'expanded', label: string) => (
+  // The frame holds the sheet (contain: layout) and is as high as a phone screen to it (a size container).
+  const frame = (label: string, sheet: ReactNode) => (
     <Shown label={label}>
-      {/* The frame holds the sheet (contain: layout) and is as high as a screen to it (a size container). */}
-      <div className="[container-type:size] relative h-96 overflow-hidden rounded-xl border border-line [contain:layout]">
+      <div className="[container-type:size] relative h-160 overflow-hidden rounded-xl border border-line [contain:layout]">
         <p className="p-4 text-muted">{say.page}</p>
-        <SiteBottomSheet
-          kind="standard"
-          state={state}
-          headline={say.heading}
-          supportingText={say.sheetText}
-          dragHandleLabel={say.dragHandle}
-        >
-          {numbers.slice(0, 4).map((n) => (
-            <p key={n} className="mb-3 text-muted">
-              {say.text}
-            </p>
-          ))}
-        </SiteBottomSheet>
+        {sheet}
       </div>
     </Shown>
   );
+  const texts = (count: number) =>
+    Array.from({ length: count }, (_, i) => (
+      <p key={i + 1} className="mb-3 text-muted">
+        {say.text}
+      </p>
+    ));
+  const standard = (state: 'collapsed' | 'half-expanded' | 'expanded', label: string) =>
+    frame(
+      label,
+      <SiteBottomSheet
+        kind="standard"
+        state={state}
+        headline={say.heading}
+        supportingText={say.sheetText}
+        peek={say.sheetPeek}
+        dragHandleLabel={say.dragHandle}
+      >
+        {texts(4)}
+      </SiteBottomSheet>,
+    );
   return (
-    <div className="grid gap-6 p-4 lg:grid-cols-2">
+    <div className="grid gap-6 p-4 expanded:grid-cols-2">
       <Shown label={say.sheetKinds.modal}>
-        <SiteBottomSheet headline={say.heading} supportingText={say.sheetText} closeLabel={say.close} footer={say.footer} height="18rem">
-          <p className={bottomSheetCoverClass}>{say.text}</p>
-        </SiteBottomSheet>
+        <ModalSheetSample />
+      </Shown>
+      <Shown label={say.sheetKinds.modalSideSheet}>
+        <ModalSheetSample wide="side-sheet" label={say.openSideSheet} />
+      </Shown>
+      <Shown label={say.sheetKinds.modalSheet}>
+        <ModalSheetSample wide="sheet" label={say.openWideSheet} />
       </Shown>
       {standard('collapsed', say.sheetKinds.collapsed)}
       {standard('half-expanded', say.sheetKinds.halfExpanded)}
       {standard('expanded', say.sheetKinds.expanded)}
+      {frame(
+        say.sheetKinds.wideSheet,
+        <SiteBottomSheet
+          kind="standard"
+          wide="sheet"
+          headline={say.heading}
+          supportingText={say.sheetText}
+          dragHandleLabel={say.dragHandle}
+        >
+          {texts(4)}
+        </SiteBottomSheet>,
+      )}
+      {frame(
+        say.sheetKinds.fixed,
+        <SiteBottomSheet kind="standard" states={['expanded']} dragHandle={false} label={say.sheetLabel}>
+          <p className="text-muted">{say.text}</p>
+        </SiteBottomSheet>,
+      )}
+      {frame(
+        say.sheetKinds.resizeButton,
+        <SiteBottomSheet kind="standard" headline={say.heading} dragHandle={false} resizeLabel={say.resize}>
+          {texts(4)}
+        </SiteBottomSheet>,
+      )}
+      {frame(
+        say.sheetKinds.collapseButton,
+        <SiteBottomSheet
+          kind="standard"
+          state="expanded"
+          headline={say.heading}
+          dragHandleLabel={say.dragHandle}
+          collapseLabel={say.collapse}
+        >
+          {texts(12)}
+        </SiteBottomSheet>,
+      )}
     </div>
   );
 }

package/src/Deleted.tsx

@@ -4,12 +4,14 @@
 // in one commit, under its old name: a page or post at its old address (not when another has it, or
 // the site sends it on, which it says, and where to), a price or testimonial last in the list. A
 // file from "Filer" is shown in a sheet first (FileView.tsx; a PDF, a video or a zip file with its icon
-// and name over it), with "Gendan" under it.
+// and name over it), with "Gendan" under it, and comes back with its record of tags (fileRecords.mjs) when it
+// was deleted together with it and no live record has its address.
 import { useEffect, useRef, useState } from 'react';
 import { ArrowCounterClockwise } from '@phosphor-icons/react';
 import Screen from './Screen';
 import { Button, listClass, BottomSheet, SheetTitle, EmptyNote, SheetBody, ProblemNote, ListItem } from './ui';
-import { fileKindOf, typeOf } from './images';
+import { fileKindOf, publicPath, typeOf } from './images';
+import { deletedRecordFor, recordsIn } from './fileRecords.mjs';
 import { fileIcons, FileView, kindOf } from './FileView';
 import { ask } from './ask';
 import { REDIRECT_FILES } from './redirectData';
@@ -99,14 +101,26 @@ export default function Deleted({ id, files, env }: { id: string; files: RepoFil
         const { order: _, ...rest } = JSON.parse(file.text) as Record<string, unknown>;
         content = `${JSON.stringify({ order: env.nextOrder(collection!), ...rest }, null, 2)}\n`;
       }
+      // A file from "Filer" comes back with its record of tags: the one deleted in the same commit (same time).
+      const changes: { path: string; content: string | Uint8Array; oid: string | null }[] = [{ path: file.path, content, oid: null }];
+      if (pictures) {
+        const deletedRecords = await env.deleted(config.fileRecords, { text: true });
+        const record = deletedRecordFor(publicPath(file.path), file.at, deletedRecords, recordsIn(files, config.fileRecords));
+        if (record) changes.push({ path: record.path, content: record.text, oid: null });
+      }
       const what = pictures ? siteT.media.kinds[kindOf(file.path)].word : asWritten(collection!).singular;
       const change = t.app.changes.restored(kindAndName(pictures ? t.media.kinds[kindOf(file.path)].word : collection!.singular, name));
       const oids = await env.commit(
         siteT.history.commit.restoreDeleted(what, `"${pictures ? fileName(file.path) : slugOf(file.path, folder)}"`),
-        [{ path: file.path, content, oid: null }],
+        changes,
         change,
       );
-      env.onSaved({ path: file.path, oid: oids[file.path], text: typeof content === 'string' ? content : '' });
+      env.onSaved(
+        { path: file.path, oid: oids[file.path], text: typeof content === 'string' ? content : '' },
+        changes.length > 1
+          ? { files: changes.slice(1).map((c) => ({ path: c.path, oid: oids[c.path], text: String(c.content) })), removed: [] }
+          : undefined,
+      );
       setDeleted((all) => all?.filter((f) => f.path !== file.path) ?? null);
       dialog.current?.close();
       env.notify({ text: savedText(change), kind: 'saved', edit: pictures ? undefined : { to: file.path, text: t.history.open } });

package/src/EditorFooter.tsx

@@ -0,0 +1,14 @@
+// The editor's footer: one line under the content of every screen (Screen.tsx), with a link to "Licenser" (#licenser,
+// Licenses.tsx). Exposes EditorFooter. Uses LinkButton from ui.tsx; the safe area at the bottom is Screen's main.
+import { t } from './i18n';
+import { LinkButton } from './ui';
+
+export default function EditorFooter() {
+  return (
+    <footer className="mt-12 flex justify-center">
+      <LinkButton href="#licenser" kind="text" size="small">
+        {t.common.parts.licenses}
+      </LinkButton>
+    </footer>
+  );
+}

package/src/EntryForm.tsx

@@ -2,8 +2,10 @@
 // Only what was changed is written: untouched fields keep their exact text, and the body is only
 // rewritten by Milkdown when the text was edited (packages/editor/scripts/editor-roundtrip.mjs checks that this
 // gives the same page). A new address (Adresse) moves the page or post, with a redirect from the
-// old one (addresses.ts). An earlier version (Versions.tsx) is opened as changes that are not saved,
+// 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.
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { slugify, slugOf, type Field, type MarkdownCollection } from './schema';
@@ -22,8 +24,11 @@ import { useBlockDialog } from './BlockDialog';
 import { blockHtml } from '../lib/blocks.mjs';
 import { sectionBlocks } from './blocks';
 import { looksOf, pageH1 } from './sections.mjs';
-import { shownAt, useUploads } from './images';
-import { useMediaPicker } from './Media';
+import { sectionInView, spyLine } from '../lib/section-in-view.mjs';
+import { publicPath, shownAt, useUploads } from './images';
+import { filerAddresses, useMediaPicker } from './Media';
+import { autoTagChanges, newlyUsed } from './autoTags.mjs';
+import { recordsIn } from './fileRecords.mjs';
 import { inUse, problemAt } from './check';
 import { isOver } from '../lib/notice.mjs';
 import { splitPicture } from '../lib/crop.mjs';
@@ -34,11 +39,13 @@ import {
   CheckList,
   FoldSection,
   FormColumns,
-  ModalNavigationDrawer,
-  NavigationDrawer,
-  NavigationDrawerButton,
   type NavigationItem,
+  SectionList,
+  SectionPane,
+  SectionSheet,
+  SectionsButton,
   SharePreview,
+  useAtLeast,
   useInView,
 } from './ui';
 import FormFrame, { savedStatus, useSavedAt } from './FormFrame';
@@ -60,8 +67,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 navigation drawer (on a wide computer screen in the right column, narrower from the icon 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 (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
 // 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 => {
@@ -102,9 +109,8 @@ export const newMarkdown = (collection: MarkdownCollection, off: string[] = []):
 
 // The address of a saved page or post: a page's own `path`, or else /<file name>/ (packages/editor/site/content.ts).
 // '' for a new one.
-// Where the redirects are, as the start screen has it: its group (the site's), or "Indstillinger", › "Søgemaskineoptimering" › "Videresendelser" ›
-// "Alle videresendelser".
-const redirectsPath = () => [placeOf('seo'), t.common.parts.seo, t.common.parts.redirects, t.redirects.all].filter(Boolean).join(' › ');
+// Where the redirects are, as the menu has it: "Indhold" › "Videresendelser" › "Alle videresendelser".
+const redirectsPath = () => [placeOf('videresendelser'), t.common.parts.redirects, t.redirects.all].filter(Boolean).join(' › ');
 
 function addressNow(collection: MarkdownCollection, file: RepoFile, data: Record<string, unknown>) {
   if (!file.path) return '';
@@ -220,8 +226,11 @@ function Form({
     (text) => notify({ text, error: true }),
     (path) => unfold(sectionOf(path)),
   );
-  // On a wide computer screen: the navigation drawer beside the form, until its icon puts it away.
-  const [drawer, setDrawer] = useState(true);
+  // 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);
   const has = (id: Section) => collection.fields.some(inSection(id));
   const sections: NavigationItem[] = [
     { id: 'content', label: t.forms.sections.content, icon: Article },
@@ -232,8 +241,8 @@ function Form({
     ...(isNew ? [] : [{ id: 'versions', label: t.history.versions, icon: ClockCounterClockwise }]),
   ];
   const shows = (id: Section) => sections.some((s) => s.id === id);
-  // The section in view, marked in the drawer: while the page scrolls, the last one whose top is above a third of the
-  // screen (at the bottom of the page, the last one in view). A tap in the drawer marks its own and scrolls there; the
+  // The section in view, marked in the sections list: while the page scrolls, the last one whose top is above a third of the
+  // screen (at the bottom of the page, the last one in view). A tap in the list marks its own and scrolls there; the
   // mark stays meanwhile (`steering`, until the scroll ends).
   const [section, setSection] = useState<Section>('content');
   const boxes = useRef<Partial<Record<Section, HTMLElement | null>>>({});
@@ -249,7 +258,7 @@ function Form({
   // The sections that are open; at first only the text (and "Søgemaskiner" when it is opened at it, `opening`).
   const [open, setOpen] = useState<ReadonlySet<Section>>(() => new Set(['content', ...(opening === 'seo' ? ['seo' as const] : [])]));
   const unfold = (id: Section) => setOpen((was) => (was.has(id) ? was : new Set([...was, id])));
-  // A section opened by its heading is marked in the drawer; one folded, the one in view now (the page is shorter,
+  // A section opened by its heading is marked in the sections list; one folded, the one in view now (the page is shorter,
   // without a scroll).
   const toggle = (id: Section) => {
     const opening = !open.has(id);
@@ -267,14 +276,11 @@ function Form({
     spy.current = () => {
       frame = 0;
       if (performance.now() < steering.current) return;
-      const bottom = innerHeight + scrollY >= document.documentElement.scrollHeight - 8;
-      const line = bottom ? innerHeight - 96 : innerHeight / 3;
-      let here: Section | undefined;
-      for (const id of order.current) {
-        const top = boxes.current[id]?.getBoundingClientRect().top;
-        if (top !== undefined && (here === undefined || top <= line)) here = id;
-      }
-      if (here) setSection(here);
+      const atBottom = innerHeight + scrollY >= document.documentElement.scrollHeight - 8;
+      const tops: Record<string, number | undefined> = {};
+      for (const id of order.current) tops[id] = boxes.current[id]?.getBoundingClientRect().top;
+      const here = sectionInView(order.current, tops, spyLine(innerHeight, atBottom));
+      if (here) setSection(here as Section);
     };
     const onScroll = () => {
       if (!frame) frame = requestAnimationFrame(spy.current);
@@ -285,7 +291,7 @@ function Form({
       cancelAnimationFrame(frame);
     };
   }, []);
-  // Opens a section and scrolls to it (or to `box` in it: the text), after the drawer on a phone has closed (the page does
+  // 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.
   const textBox = useRef<HTMLDivElement>(null);
   const goTo = (id: Section, box?: HTMLElement | null) => {
@@ -301,11 +307,11 @@ function Form({
     if (shows('seo')) goTo('seo');
   }, []);
   // The field marked as wrong is scrolled to by itself (FieldInput), its section opened (useWrongField) and marked in the
-  // drawer.
+  // sections list.
   useEffect(() => {
     if (wrongField.field) steer(sectionOf(wrongField.field.path));
   }, [wrongField.field?.at]);
-  // A section: where it is, for the drawer, its heading (its name in the drawer), and whether it is open.
+  // A section: where it is, for the sections list, its heading (its name in the list), and whether it is open.
   const sectionProps = (id: Section) => ({
     ref: (el: HTMLElement | null) => void (boxes.current[id] = el),
     title: sections.find((s) => s.id === id)!.label,
@@ -362,7 +368,9 @@ function Form({
     site: sharing,
   });
 
-  // A picture is kept in the browser until "Gem", which uploads it with the page.
+  // A picture is kept in the browser until "Gem", which uploads it with the page. A file in Filer the page refers to
+  // now and did not in its last saved version (a picture, a PDF field, a link) gets the page's tags at "Gem" (autoTags.mjs).
+  const tagged = collection.fields.some((f) => f.name === 'categories' && f.type === 'relation' && f.to === 'categories');
   const pictures = useUploads(notify);
   const [pickImage, picker] = useMediaPicker(env.media, pictures);
 
@@ -525,12 +533,22 @@ function Form({
     // Pictures that were added and are still used.
     const used = pictures.usedIn(next);
     const removed = base.path && path !== base.path ? [base.path] : [];
+    // The page's tags to the Filer files it newly refers to (the text as last saved against the text now), in the same commit.
+    const recordChanges = tagged
+      ? autoTagChanges(
+          recordsIn(env.files, config.fileRecords),
+          config.fileRecords,
+          newlyUsed(isNew ? '' : base.text, next, [...new Set([...filerAddresses(env.files), ...used.map((u) => publicPath(u.path))])]),
+          Array.isArray(saved.categories) ? (saved.categories as string[]) : [],
+        )
+      : [];
     const changes: Change[] = [
       { path, content: next, oid: path === base.path ? base.oid || null : null },
       ...removed.map((p) => ({ path: p, content: null, oid: base.oid })),
       ...others.map((f) => ({ path: f.path, content: f.text, oid: f.oid })),
       ...redirectChanges,
       ...used.map((u) => ({ path: u.path, content: u.bytes, oid: null })),
+      ...recordChanges,
     ];
     const what = `"${slugOf(path, collection.folder)}"`;
     const message = moved
@@ -565,6 +583,9 @@ function Form({
           ...redirectChanges
             .filter((c) => c.path === REDIRECTS)
             .map((c) => ({ path: REDIRECTS, oid: oids[REDIRECTS], text: String(c.content) })),
+          ...recordChanges
+            .filter((c) => typeof c.content === 'string')
+            .map((c) => ({ path: c.path, oid: oids[c.path], text: String(c.content) })),
         ],
         removed,
       });
@@ -657,14 +678,11 @@ function Form({
           status={savedStatus({ savedAt, saving, deleting, isNew })}
           view={isNew ? undefined : url}
           drawer={
-            <>
-              <div className="contents xl:hidden">
-                <ModalNavigationDrawer title={t.forms.sections.title} items={sections} value={section} onChange={pick} />
-              </div>
-              <div className="hidden xl:contents">
-                <NavigationDrawerButton label={t.forms.sections.title} open={drawer} onClick={() => setDrawer(!drawer)} />
-              </div>
-            </>
+            <SectionsButton
+              label={t.forms.sections.title}
+              open={large ? pane : sheet}
+              onClick={() => (large ? setPane(!pane) : setSheet(true))}
+            />
           }
           dirty={dirty}
           saving={saving || deleting}
@@ -673,12 +691,10 @@ function Form({
           onPreview={showPreview}
           onDelete={collection.deletable && !isNew ? () => env.remove(collection, base, setDeleting) : undefined}
           deleteLabel={t.forms.deleteOne(collection.singular)}
-          panel
         >
           {version && <VersionNotice version={version} onCurrent={() => onVersion(null)} />}
           <FormColumns
             sticky
-            wideOnly
             main={
               <>
                 <FoldSection {...sectionProps('content')}>
@@ -700,6 +716,7 @@ function Form({
                           : undefined
                       }
                       sections={front}
+                      frame
                     />
                   </div>
                 </FoldSection>
@@ -739,10 +756,29 @@ function Form({
                 )}
               </>
             }
-            side={drawer && <NavigationDrawer title={t.forms.sections.title} items={sections} value={section} onChange={pick} />}
+            pane={
+              pane ? (
+                <SectionPane title={t.forms.sections.title} open>
+                  <SectionList title={t.forms.sections.title} items={sections} value={section} onChange={pick} />
+                </SectionPane>
+              ) : undefined
+            }
           />
         </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

@@ -13,7 +13,6 @@ import { hasUnsaved, setUnsaved } from './deploy';
 import { askToNotify } from './notificationData';
 import { choose } from './ask';
 import { when } from './when';
-import { useSidebar } from './sidebar';
 import type { Env } from './App';
 import { t } from './i18n';
 
@@ -33,7 +32,7 @@ type Props<T extends string> = {
   view?: string;
   /** More in the top bar, before the link to the site. */
   actions?: ReactNode;
-  /** The icon of the form's navigation drawer, the last in the top bar (Screen). */
+  /** The button at the end of the top bar, after the account (a form's SectionsButton in ui.tsx). */
   drawer?: ReactNode;
   /** The form's tabs, in the top bar (Screen). */
   tabs?: TabChoice<T>;
@@ -150,8 +149,6 @@ export default function FormFrame<T extends string>({
   wide,
   children,
 }: Props<T>) {
-  // On a computer the save bar starts where the sidebar (or its rail, sidebar.ts) ends.
-  const sidebar = useSidebar();
   const save = useRef(onSave);
   save.current = onSave;
   useEffect(() => {
@@ -207,10 +204,8 @@ export default function FormFrame<T extends string>({
         </div>
       )}
       {(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 ${sidebar ? 'md:left-64' : 'md:left-18'}`}
-        >
-          <div className="mx-auto max-w-3xl px-4 py-3 md:px-6">
+        <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' : ''}>
               {onPreview && (