@gogitcms/design-system 0.16.0-next.12 → 0.16.0-next.14

package/src/components/ContentBrowser.tsx

@@ -8,11 +8,12 @@ import { Button, IconButton } from "./Button";
 import { Input } from "./Input";
 import { Avatar, Badge, CheckBox, DiffStat, Divider, SectionLabel } from "./primitives";
 import { NavRow } from "./NavRow";
-import { AppShell, MobileScreen, Pane, TopBar, ThemeToggle } from "./layout";
+import { AppShell, MobileScreen, Pane, TopBar, ThemeToggle, type WindowChrome } from "./layout";
 import { Segment, type SegmentItem } from "./Segment";
 import { readDraft, writeDraft, clearDraft, subscribeDrafts, hasDraft, draftCount } from "./documentDrafts";
 import { BranchMenu, type BranchRef } from "./BranchMenu";
-import { ProjectMenu, type ProjectRef } from "./ProjectMenu";
+import { ProjectMenu, type ProjectMenuAction, type ProjectRef } from "./ProjectMenu";
+import { WorkspaceMenu, type WorkspaceMenuProps } from "./WorkspaceMenu";
 import { ChangeDetail, type DocumentChange, type FieldConflict, type ConflictChoice } from "./ChangeDetail";
 import { ApplyChangesModal, type MergeProgress } from "./ApplyChangesModal";
 import { ProtectedBranchModal } from "./ProtectedBranchModal";
@@ -39,7 +40,7 @@ import { referenceValue } from "../references";
 import { MediaBrowser } from "./MediaBrowser";
 import { FormsBrowser } from "./FormsBrowser";
 import { FORMS_NAV_KEY, formsNavKey, isFormsNavKey, parseFormsNavKey, type FormsApi } from "../forms";
-import { type HistoryApi } from "../history";
+import { relativeTime, type HistoryApi } from "../history";
 import { DocumentHistory } from "./DocumentHistory";
 import {
   MEDIA_NAV_KEY,
@@ -53,7 +54,19 @@ import {
 } from "../media";
 import type { IconName } from "../icons";
 
-export type CmsNavItem = { key: string; label: string; icon: IconName; count?: number; conflicts?: number };
+export type CmsNavItem = {
+  key: string;
+  label: string;
+  icon: IconName;
+  count?: number;
+  conflicts?: number;
+  // The item has no list of its own: selecting it opens the thing itself in the
+  // detail region — a singleton document, a plugin screen — rather than pushing
+  // a list into the master pane. The sections stay on screen with its row lit,
+  // and the pushed list's title menu leaves it out, since there is no list to
+  // switch to. Omitted for a collection, Media and Forms, which all list.
+  direct?: boolean;
+};
 // An entry in the user (avatar) menu: host settings screens and
 // plugin-contributed links. When any are present the avatar becomes a dropdown.
 export type UserMenuItem = { label: string; icon?: IconName; onSelect: () => void; testID?: string };
@@ -74,21 +87,26 @@ export type EntryField = {
   source?: string;
   format?: string;
   flavor?: string;
-  // For a media picker (`component: "media"`): which configured media set to
-  // browse, and — on a string field — which form of the path to write. `media`
-  // comes from display.media, `storeAs` from display.store_as. On an array
-  // field these describe its *items*, making each one a media picker.
+  // For a media picker (`component: "media"`, or an array whose items are —
+  // `itemComponent: "media"`): which configured media set to browse, and —
+  // for a string value — which form of the path to write. Both come from the
+  // field's `media:` block; on an array they describe its *items*.
   media?: string;
   storeAs?: string;
   // For a document picker (`component: "reference"`, or an array whose items
-  // are references): what the field points at and stores. An object-shaped
-  // reference's `fields` are the derived children — the key child and the
-  // embedded copies — which the server recomputes on every save and the
-  // editor shows read-only (docs/references.md).
+  // are — `itemComponent: "reference"`): what the field points at and stores.
+  // An object-shaped reference declares its `fields` — the key child and the
+  // embedded copies — and the copies are the server's: recomputed on every
+  // save and shown read-only here (docs/references.md).
   reference?: ReferenceDef;
   value: unknown;
   // Item type for an array field (string | number | boolean | object).
   of?: string;
+  // The control each item of an array renders, from display.item.component.
+  // `list` describes the array; what an item is — a text input, a media
+  // picker, a document picker — is declared here, never inferred from the
+  // array's media or reference block. Absent means the default for `of`.
+  itemComponent?: string;
   // Child fields for an object field (or an array whose `of` is object).
   fields?: EntryField[];
   // Object shapes a mixed-list array (component: "mixedList") can hold.
@@ -206,6 +224,12 @@ export type CmsEntry = {
   conflicted?: boolean;
   title: string;
   body: string;
+  // When this document last changed, as an ISO 8601 string. The list row shows
+  // its age in place of the file path — a document is its title and when it was
+  // last touched, and the path is one click away in the editor's Details. Hosts
+  // that have no such timestamp (the changes surface, whose rows are diffs of
+  // files) leave it off and keep the path.
+  updatedAt?: string;
   // When present, the detail pane renders a field editor instead of title/body.
   fields?: EntryField[];
   // A list entry whose full document (fields/body) hasn't loaded yet — the detail
@@ -302,14 +326,15 @@ export type ContentBrowserProps = {
   // Items shown in the avatar dropdown above Sign out. Absent/empty keeps the
   // pre-menu topbar (sign-out icon + static avatar) byte-identical.
   userMenuItems?: UserMenuItem[];
-  // When set, the content area is replaced by this node (plugin screens): on
-  // desktop the list + detail panes give way to one flexing pane, on mobile it
-  // renders as its own screen titled `contentTitle`. Sidebar and topbar stay.
+  // When set, the detail region is replaced by this node (plugin screens): on
+  // desktop it becomes one flexing pane beside the master pane, which stays on
+  // the sections with the plugin's row lit; on mobile it renders as its own
+  // screen titled `contentTitle`. The topbar stays.
   contentSlot?: React.ReactNode;
   contentTitle?: string;
   // Providing entriesEmpty switches on "collection browsing" mode: nothing is
-  // auto-selected, an empty collection selection shows this message, and an
-  // unselected document shows "Select {collection}".
+  // auto-selected, the detail region shows this message while no collection
+  // is selected, and an unselected document shows "Select {collection}".
   entriesEmpty?: string;
 
   // Controlled document selection. When onSelectEntry is provided the component
@@ -496,9 +521,33 @@ export type ContentBrowserProps = {
   onSelectProject?: (project: ProjectRef) => void;
   /** cms.config.js pins this deployment to one project: shown, but inert. */
   projectLocked?: boolean;
+
+  // ---- an app window (all optional; the web and mobile apps pass none) -----
+  // The desktop app is a window per project, moving between workspaces rather
+  // than being addressed to one by a URL. These are what that needs of the
+  // desktop layout's top bar; the mobile layout ignores them.
+  /**
+   * The workspace switcher, in place of the static workspace tag: every
+   * workspace the user belongs to, and what choosing one does.
+   */
+  workspaceMenu?: WorkspaceMenuProps;
+  /** Offers each project in the project menu in a window of its own. */
+  onOpenProjectInNewWindow?: (project: ProjectRef) => void;
+  /** Rows under the project menu's list. */
+  projectMenuActions?: ProjectMenuAction[];
+  /**
+   * Room for the platform's window controls, and the top bar marked as the
+   * window's drag region, for a host drawing its own window chrome (the
+   * desktop app's chromeless macOS window).
+   */
+  windowChrome?: WindowChrome;
   // Omitted → no "New branch" row. Rejecting a name should throw so the inline
   // form can show why.
   onCreateBranch?: (name: string) => Promise<void> | void;
+  // The repository's branch prefix ("cms/"). Every branch the editor creates —
+  // from the branch menu or the protected-branch prompt — is named under it, so
+  // both forms show it read-only ahead of the name and hand back the full name.
+  branchPrefix?: string;
 
   // The comparison target on the changes surface. When set, the top bar shows a
   // `source → target` pair instead of a single branch menu — the source is the
@@ -634,6 +683,11 @@ function EntryListItem({ entry }: { entry: CmsEntry }) {
   // what git thinks of the file: a document can be a local draft, or committed
   // and modified on the branch, or both, and they are not the same state.
   const draft = useHasDraft(entry.id);
+  // "Updated 3d ago": the age alone reads as a bare number against the title,
+  // with nothing saying what happened then. An unparseable timestamp renders as
+  // "" — fall back to the path rather than leave the row's second line blank.
+  const age = entry.updatedAt ? relativeTime(entry.updatedAt) : "";
+  const updated = age ? `Updated ${age}` : "";
   return (
     <ListRow conflicted={entry.conflicted}>
       <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
@@ -652,8 +706,8 @@ function EntryListItem({ entry }: { entry: CmsEntry }) {
             {entry.status}
           </Text>
         ) : null}
-        <Text variant="monoSm" color="tertiary" numberOfLines={1}>
-          {entry.path}
+        <Text variant="monoSm" color="tertiary" numberOfLines={1} testID="entry-subtitle">
+          {updated || entry.path}
         </Text>
       </View>
     </ListRow>
@@ -1715,8 +1769,10 @@ function ListControl({
   // what was picked: the only thing such an item can hold is a picked
   // document, so an empty slot to fill in afterwards is a step nobody wants.
   // Without a host seam there is nothing to pick from, and the button is
-  // disabled as the field's own Choose button is.
-  const reference = field.reference;
+  // disabled as the field's own Choose button is. "Reference list" is the
+  // item's declared control, not the presence of a block: an array whose
+  // items are not declared pickers is a plain list whatever else it carries.
+  const reference = field.itemComponent === "reference" ? field.reference : undefined;
   const referenceApi = useReferenceApi();
   const [pickingNew, setPickingNew] = React.useState(false);
   const addItem = () => {
@@ -1732,20 +1788,21 @@ function ListControl({
     onChange([...items, referenceValue(target, isObject ? "object" : "string", reference, undefined)]);
   };
 
-  // Items inherit the array's *item-level* display config, not the array's own
-  // component — `list` describes the array, and is not a control an item could
-  // render. An array that names a media set makes each item a media picker;
-  // everything else falls back to the default control for the item type.
+  // Items render the array's *declared* item control (display.item.component),
+  // not the array's own component — `list` describes the array, and is not a
+  // control an item could render. The media and reference blocks describe the
+  // items too, so they travel with the item; they never pick its control. An
+  // array that declares nothing falls back to the default control for `of`.
   const itemField: EntryField = {
     name: field.name,
     type: itemType,
     of: undefined,
     fields: field.fields,
     value: null,
-    ...(field.media ? { component: "media", media: field.media, storeAs: field.storeAs } : {}),
-    // An array that declares a reference makes each item a document picker, the
-    // same way an array naming a media set makes each item a media picker.
-    ...(field.reference ? { component: "reference", reference: field.reference } : {}),
+    component: field.itemComponent,
+    media: field.media,
+    storeAs: field.storeAs,
+    reference: field.reference,
   };
 
   // The list's own path, from the FieldControl wrapping this control; an item
@@ -2776,7 +2833,8 @@ function EntryDetail({
   history,
   active,
   onActivate,
-  onCollapse,
+  expanded,
+  onToggleExpand,
   onClose,
   dragHandle,
 }: {
@@ -2805,11 +2863,13 @@ function EntryDetail({
   // the header renders exactly as it did before history existed.
   history?: HistoryApi;
   // Desktop columns: `active` marks the focused column (accent + header press
-  // activates it via onActivate); onCollapse/onClose add the header rail/close
-  // controls. All omitted on mobile → unchanged single-detail behavior.
+  // activates it via onActivate); onToggleExpand/onClose add the header
+  // expand/close controls, and `expanded` says which way the expand control
+  // points. All omitted on mobile → unchanged single-detail behavior.
   active?: boolean;
   onActivate?: () => void;
-  onCollapse?: () => void;
+  expanded?: boolean;
+  onToggleExpand?: () => void;
   onClose?: () => void;
   // A drag grip rendered at the head of the breadcrumb row to reorder columns.
   dragHandle?: React.ReactNode;
@@ -3299,8 +3359,15 @@ function EntryDetail({
           onMove={canMove ? () => setPrompt("move") : undefined}
           onDelete={canDelete && deleteEntry ? deleteEntry : undefined}
         />
-        {onCollapse ? (
-          <IconButton name="panelLeft" size="sm" label="Collapse column" onPress={onCollapse} testID="column-collapse" />
+        {onToggleExpand ? (
+          <IconButton
+            name={expanded ? "minimize" : "maximize"}
+            size="sm"
+            active={expanded}
+            label={expanded ? "Collapse column" : "Expand column"}
+            onPress={onToggleExpand}
+            testID="column-expand"
+          />
         ) : null}
         {onClose ? (
           <IconButton name="x" size="sm" label="Close column" onPress={onClose} testID="column-close" />
@@ -3496,6 +3563,12 @@ const MIN_COL = 480;
 // a burst of keystrokes is one update rather than twenty.
 const DRAFT_DEBOUNCE_MS = 150;
 
+// Which pane, if any, has taken over the desktop layout: the master pane (the
+// sections or the list pushed into it), or a single document column. Expanding
+// is exclusive — one pane at a time, and everything else stops rendering — so
+// this is a single value rather than a flag per pane.
+type ExpandedPane = { kind: "master" } | { kind: "column"; id: string } | null;
+
 // A normalized desktop column, unifying the host-controlled (openTabs) and
 // self-owned (openIds) sources so the render + sizing paths stay single. `entry`
 // is undefined while a controlled tab's document loads.
@@ -4000,6 +4073,7 @@ function ModalOverlays(props: ContentBrowserProps) {
           error={props.protectedBranchError}
           onCreate={props.onCreateBranchAndSave ?? (() => {})}
           onCancel={props.onCancelProtectedSave ?? (() => {})}
+          prefix={props.branchPrefix}
         />
       ) : null}
     </>
@@ -4066,20 +4140,40 @@ function DesktopBrowser(props: ContentBrowserProps) {
 
   // ---- open document columns (ephemeral desktop state) --------------------
   // openIds are the documents shown as side-by-side columns, in display order.
-  // collapsedCols marks which columns are collapsed to a rail. Both reset when
-  // the collection changes (open columns belong to the active collection).
+  // They reset when the collection changes (open columns belong to the active
+  // collection).
   const [openIds, setOpenIds] = useState<string[]>([]);
-  const [collapsedCols, setCollapsedCols] = useState<Record<string, boolean>>({});
-  const [listCollapsed, setListCollapsed] = useState(false);
+  // The one pane that has taken over the screen, if any: the master pane, or a
+  // single document column. While it holds, nothing else renders, and the
+  // control that expanded it puts the layout back.
+  const [expanded, setExpanded] = useState<ExpandedPane>(null);
   const [region, setRegion] = useState({ w: 0, h: 0 });
-  // Resizable pane widths (desktop). Seeded from the layout defaults; dragging a
-  // seam between panes updates them live (clamped). Local, ephemeral view state.
-  const [navW, setNavW] = useState(t.layout.sidebar);
-  const [listW, setListW] = useState(340);
+  // The master pane's width. Seeded from the layout default; dragging the seam
+  // beside it updates it live (clamped). Local, ephemeral view state.
+  const [masterW, setMasterW] = useState(t.layout.master);
+  // ---- master / detail ----------------------------------------------------
+  // One pane plays the sidebar and the content list in turn. At rest it lists
+  // the sections; selecting an item that HAS a list pushes that list in, headed
+  // by a Back control and a title that doubles as a switcher. A direct item — a
+  // singleton, a plugin screen — has no list: it opens in the detail region and
+  // the sections stay put with its row lit.
+  const activeItem = navItemFor(sections, activeNavKey);
+  // Media and Forms are named even when the host supplied no row for them
+  // (a media key with no sets yet, a forms key on a host that lists forms
+  // some other way): the pushed list still needs a title.
+  const activeLabel = activeItem?.label ?? (mediaShowing ? "Media" : formsShowing ? "Forms" : "Content");
+  const pushed = !!activeNavKey && !activeItem?.direct && props.contentSlot == null;
   // The self-owned column set (openIds) is only used in non-tabbed mode; in tabbed
-  // mode the host owns it, so these maintenance effects no-op. `collapsedCols` and
-  // `listCollapsed` stay local (pure view state) in both modes.
-  useEffect(() => { if (!tabbed) { setOpenIds([]); setCollapsedCols({}); } }, [activeNavKey, tabbed]);
+  // mode the host owns it, so this maintenance effect no-ops. `expanded` stays
+  // local (pure view state) in both modes.
+  useEffect(() => { if (!tabbed) setOpenIds([]); }, [activeNavKey, tabbed]);
+  // Anything that opens in the detail region puts a full-screen master back:
+  // the thing just opened would otherwise be invisible. Called from every
+  // control in the master that does so (a list row, a media set, a form), and
+  // from the effect below for a direct item, which the host resolves.
+  const revealDetail = () => setExpanded((x) => (x?.kind === "master" ? null : x));
+  const directActive = !!activeNavKey && !pushed;
+  useEffect(() => { if (directActive) revealDetail(); }, [directActive, activeNavKey]);
   // Clear the selection when the collection changes so the detail shows its empty
   // state. In controlled mode the host owns this (the URL changes with the nav).
   useEffect(() => {
@@ -4109,8 +4203,9 @@ function DesktopBrowser(props: ContentBrowserProps) {
     // RNW surfaces the click modifiers on nativeEvent (typed without them here).
     const mods = ev?.nativeEvent as unknown as { shiftKey?: boolean; metaKey?: boolean } | undefined;
     const newColumn = !!(mods?.shiftKey || mods?.metaKey);
-    // Expand the column if this document is open but collapsed.
-    setCollapsedCols((c) => (c[e.id] ? { ...c, [e.id]: false } : c));
+    // Opening a document from a full-screen list restores the layout: the column
+    // it opens in lives in the region that list is covering.
+    revealDetail();
     // Tabbed mode: hand the intent to the host (it owns the open-tab set).
     if (tabbed) { props.onOpenEntry?.(e, { newColumn }); return; }
     // Plain click on a not-yet-open document: swap it into the active column's
@@ -4129,12 +4224,7 @@ function DesktopBrowser(props: ContentBrowserProps) {
   };
   // Closing a column drops it; if it was active, activate a neighbor (or clear).
   const closeColumn = (id: string) => {
-    setCollapsedCols((c) => {
-      if (!(id in c)) return c;
-      const cp = { ...c };
-      delete cp[id];
-      return cp;
-    });
+    setExpanded((x) => (x?.kind === "column" && x.id === id ? null : x));
     if (tabbed) { props.onCloseTab?.(id); return; }
     const idx = openIds.indexOf(id);
     const next = openIds.filter((x) => x !== id);
@@ -4149,8 +4239,11 @@ function DesktopBrowser(props: ContentBrowserProps) {
   const { checked, toggle, clear, checkedIds, checkedFolders, toggleFolder, checkedFolderKeys } = useMultiSelect(activeNavKey);
   const [movePrompt, setMovePrompt] = useState(false);
   const selected = entries.find((e) => e.id === selectedId) ?? (controlled || browsing ? null : entries[0] ?? null);
-  const activeLabel = sections.flatMap((s) => s.items).find((i) => i.key === activeNavKey)?.label ?? "Content";
   const showCreate = !!(creating && createFields && onSubmitCreate);
+  // The create form opens as a column in the detail region, which an expanded
+  // pane either hides (the list) or crowds out (a column). Starting a create
+  // puts the layout back rather than opening a form nobody can see.
+  useEffect(() => { if (showCreate) setExpanded(null); }, [showCreate]);
 
   // Folder drill-down for hierarchical collections: navigate the folder tree and
   // show only the folders + documents at the current level.
@@ -4212,16 +4305,22 @@ function DesktopBrowser(props: ContentBrowserProps) {
           canMove: !!onMove,
           collectionPath,
         }));
-  // Size the columns: one expanded column fills the region; several share it down
-  // to MIN_COL, past which the region scrolls horizontally. Collapsed rails take a
-  // fixed sliver.
-  const collapsedCount = columns.filter((c) => collapsedCols[c.id]).length;
-  const expandedCount = columns.length - collapsedCount + (showCreate ? 1 : 0);
-  const avail = Math.max(0, region.w - collapsedCount * RAIL_W);
+  // Which pane is expanded, resolved against what is actually open: a column
+  // that has since closed (or that belonged to another collection) falls back to
+  // the normal layout rather than blanking the screen.
+  const expandedCol = expanded?.kind === "column" ? columns.find((c) => c.id === expanded.id) ?? null : null;
+  const masterExpanded = expanded?.kind === "master";
+  // An expanded column is the only one on screen. The others stay open (they
+  // keep their place in openIds/openTabs, and their unsaved edits) — they are
+  // just not rendered until it collapses.
+  const shownColumns = expandedCol ? [expandedCol] : columns;
+  // Size the columns: a lone column fills the region; several share it down to
+  // MIN_COL, past which the region scrolls horizontally.
+  const colCount = shownColumns.length + (showCreate ? 1 : 0);
   let colW = MIN_COL;
-  if (region.w > 0 && expandedCount > 0) {
-    const per = avail / expandedCount;
-    colW = per >= MIN_COL ? Math.floor(per) : expandedCount <= 1 ? Math.max(1, Math.floor(avail)) : MIN_COL;
+  if (region.w > 0 && colCount > 0) {
+    const per = region.w / colCount;
+    colW = per >= MIN_COL ? Math.floor(per) : colCount <= 1 ? Math.max(1, Math.floor(region.w)) : MIN_COL;
   }
   const hasColumns = columns.length > 0 || showCreate;
 
@@ -4231,8 +4330,10 @@ function DesktopBrowser(props: ContentBrowserProps) {
   // origin plus the scroll offset), then `slotAtX` picks the gap it's nearest.
   // Reorder applies to the host (onReorderTabs) in tabbed mode or the local
   // openIds otherwise. Web-only affordance; the native shells never mount it.
-  const colIds = columns.map((c) => c.id);
-  const colWidths = columns.map((c) => (collapsedCols[c.id] ? RAIL_W : colW));
+  // Reorder operates on the columns on screen, so an expanded column — the only
+  // one rendered — has nothing to trade places with and grows no grip.
+  const colIds = shownColumns.map((c) => c.id);
+  const colWidths = shownColumns.map(() => colW);
   const idsRef = useRef(colIds);
   idsRef.current = colIds;
   const widthsRef = useRef(colWidths);
@@ -4303,34 +4404,64 @@ function DesktopBrowser(props: ContentBrowserProps) {
     <View key={key} style={{ width: 2, alignSelf: "stretch", backgroundColor: t.color.borderActive }} />
   );
 
-  const listLabel = browsing && !activeNavKey ? "Content" : activeLabel;
   const createBtn = canCreate && onStartCreate && activeNavKey ? (
     <IconButton name="plus" size="sm" label="Create" onPress={onStartCreate} testID="create-start" />
   ) : null;
 
   // Collection search + faceted filters. `search` is enabled for a real (non
-  // singleton) active collection; the icons/inputs render into the list header.
+  // singleton) active collection; the icons/inputs render into the master header.
   const search = useCollectionSearch(props, activeNavKey);
   const searchEnabled = !!props.searchable && !!activeNavKey;
   const facetFields = props.facetFields ?? [];
-  // The entry-list header swaps to a search input while a search is open.
-  const listHeader = search.open ? (
-    <SearchHeaderBar search={search} showFilter={facetFields.length > 0} />
-  ) : (
+
+  // The master pane's header. At rest it names the surface; with a list pushed
+  // in it carries Back, the list's title (a switcher when there is more than one
+  // list), and whatever controls that list has. The expand control is there in
+  // both states, exactly as a column's is.
+  const expandBtn = (
+    <IconButton
+      name={masterExpanded ? "minimize" : "maximize"}
+      size="sm"
+      active={masterExpanded}
+      label={masterExpanded ? "Collapse pane" : "Expand pane"}
+      onPress={() => setExpanded(masterExpanded ? null : { kind: "master" })}
+      testID="master-expand"
+    />
+  );
+  const masterHeader = (extras?: React.ReactNode) => (
     <>
-      <Text variant="h3" weight="semibold" style={{ flex: 1 }}>{listLabel}</Text>
-      {searchEnabled ? (
-        <>
-          <IconButton name="search" size="sm" label="Search" onPress={search.openSearch} testID="search-open" />
-          {facetFields.length > 0 ? (
-            <IconButton name="filter" size="sm" label="Filter" onPress={search.openAdvanced} testID="filter-open" />
-          ) : null}
-        </>
+      {pushed ? (
+        <IconButton name="chevronLeft" size="sm" label="Back to sections" onPress={() => onSelectNav("")} testID="master-back" />
       ) : null}
-      {createBtn}
-      <IconButton name="panelLeft" size="sm" label="Collapse list" onPress={() => setListCollapsed(true)} testID="list-collapse" />
+      {pushed ? (
+        <MasterTitle label={activeLabel} sections={sections} activeNavKey={activeNavKey} onSelect={onSelectNav} />
+      ) : (
+        <Text variant="h3" weight="semibold" style={{ flex: 1 }} testID="master-title">
+          {(props.surface ?? "edit") === "changes" ? "Changes" : "Content"}
+        </Text>
+      )}
+      {extras}
+      {expandBtn}
     </>
   );
+  // A collection's header swaps to a search input while a search is open.
+  const collectionHeader = search.open ? (
+    <SearchHeaderBar search={search} showFilter={facetFields.length > 0} />
+  ) : (
+    masterHeader(
+      <>
+        {searchEnabled ? (
+          <>
+            <IconButton name="search" size="sm" label="Search" onPress={search.openSearch} testID="search-open" />
+            {facetFields.length > 0 ? (
+              <IconButton name="filter" size="sm" label="Filter" onPress={search.openAdvanced} testID="filter-open" />
+            ) : null}
+          </>
+        ) : null}
+        {createBtn}
+      </>,
+    )
+  );
 
   // Activate a column: hand off to the host in tabbed mode (it switches the active
   // collection + URL to the tab); otherwise move the local selection.
@@ -4365,7 +4496,8 @@ function DesktopBrowser(props: ContentBrowserProps) {
           title={col.title || "Untitled"}
           active={!showCreate && col.active}
           onActivate={() => activateColumn(col)}
-          onCollapse={() => setCollapsedCols((c) => ({ ...c, [col.id]: true }))}
+          expanded={!!expandedCol}
+          onToggleExpand={() => setExpanded(expandedCol ? null : { kind: "column", id: col.id })}
           onClose={() => closeColumn(col.id)}
           dragHandle={columnGrip(col.id)}
         >
@@ -4392,7 +4524,8 @@ function DesktopBrowser(props: ContentBrowserProps) {
           folderOptions={moveFolders}
           active={!showCreate && col.active}
           onActivate={() => activateColumn(col)}
-          onCollapse={() => setCollapsedCols((c) => ({ ...c, [col.id]: true }))}
+          expanded={!!expandedCol}
+          onToggleExpand={() => setExpanded(expandedCol ? null : { kind: "column", id: col.id })}
           onClose={() => closeColumn(col.id)}
           dragHandle={columnGrip(col.id)}
         />
@@ -4406,9 +4539,10 @@ function DesktopBrowser(props: ContentBrowserProps) {
 
   const topBar = (
     <TopBar
+      windowChrome={props.windowChrome}
       left={
         <>
-          <WorkspaceTag workspace={workspace} />
+          {props.workspaceMenu ? <WorkspaceMenu {...props.workspaceMenu} /> : <WorkspaceTag workspace={workspace} />}
           {/* Project before branch: the coarser choice reads first, matching the
               URL's own order (projects/{name}/branches/{id}). */}
           <ProjectMenu
@@ -4416,6 +4550,8 @@ function DesktopBrowser(props: ContentBrowserProps) {
             projects={props.projects}
             onSelect={props.onSelectProject}
             locked={props.projectLocked}
+            onOpenInNewWindow={props.onOpenProjectInNewWindow}
+            actions={props.projectMenuActions}
           />
           <BranchMenu
             current={workspace.branch}
@@ -4423,6 +4559,7 @@ function DesktopBrowser(props: ContentBrowserProps) {
             defaultBranch={props.defaultBranch}
             onSelect={props.onSelectBranch}
             onCreate={props.onCreateBranch}
+            prefix={props.onCreateBranch ? props.branchPrefix : undefined}
           />
           {/* On the changes surface the top bar reads `source → target`: the
               branch above is the source under review, this is what it's compared
@@ -4480,8 +4617,11 @@ function DesktopBrowser(props: ContentBrowserProps) {
     />
   );
 
-  const navPane = (
-    <Pane width={navW} testID="pane-nav">
+  // The sections list — the master pane at rest. Plain rows; a row with a list
+  // pushes it in (through the host's nav key), a direct row opens its thing in
+  // the detail region and stays lit here.
+  const sectionsList = (
+    <ScrollView testID="nav-list" contentContainerStyle={{ paddingVertical: t.space(2) }}>
       {sections.map((section, i) => (
         <View key={section.title || `section-${i}`}>
           {/* An untitled section is a standalone button (Media), not a group. */}
@@ -4501,7 +4641,7 @@ function DesktopBrowser(props: ContentBrowserProps) {
           ))}
         </View>
       ))}
-    </Pane>
+    </ScrollView>
   );
 
   // A full-width read-only notice (branch frozen in a change request) below the
@@ -4511,274 +4651,206 @@ function DesktopBrowser(props: ContentBrowserProps) {
   );
   const modalOverlays = <ModalOverlays {...props} />;
 
-  // The changes surface reuses the same three-pane model as Edit, so switching
-  // between them doesn't relayout the screen — only what each pane contains
-  // changes. Everything that mutates a document (create, bulk select, search,
-  // folder drill-down, tabs, autosave) is deliberately absent: this describes a
-  // comparison between two branches, not a document you can save.
-  if ((props.surface ?? "edit") === "changes") {
-    const changeCount = entries.length;
-    return (
-      <AppShell testID="desktop-shell" topBar={topBar} banner={readOnlyBanner}>
-        {navPane}
-        <ResizeHandle width={navW} min={180} max={420} onChange={setNavW} testID="resize-nav" />
-
-        <Pane
-          width={listW}
-          testID="pane-changes"
-          scroll={false}
-          header={<PaneTitle title={activeNavKey ? activeLabel : "Changes"} />}
-        >
-          {!activeNavKey ? (
-            <View style={{ flex: 1, alignItems: "center", justifyContent: "center", padding: t.space(6) }}>
-              <Text variant="body" color="tertiary" testID="changes-empty">
-                {entriesEmpty ?? "Select a collection"}
-              </Text>
-            </View>
-          ) : (
-            <EntriesList
-              variant="desktop"
-              entries={entries}
-              selectedId={selectedId}
-              onOpenEntry={(entry) => activate(entry)}
-              header={
-                <View style={{ paddingHorizontal: t.space(4), paddingVertical: t.space(2) }}>
-                  <Text variant="label" color="tertiary">
-                    {`${changeCount} changed`}
-                  </Text>
-                </View>
-              }
-              folders={[]}
-              onFolderPress={() => {}}
-            />
-          )}
-        </Pane>
-        <ResizeHandle width={listW} min={260} max={640} onChange={setListW} testID="resize-list" />
+  const changes = (props.surface ?? "edit") === "changes";
+  const emptyDetail = (message: string, testID: string) => (
+    <View style={{ flex: 1, alignItems: "center", justifyContent: "center", padding: t.space(6) }}>
+      <Text variant="body" color="tertiary" testID={testID}>{message}</Text>
+    </View>
+  );
 
-        <ChangeDetail
-          change={props.selectedChange}
-          loading={props.loadingChange}
-          emptyMessage={activeNavKey ? "Select a change" : "No changes on this branch"}
-          conflicts={props.selectedConflicts}
-          onResolveConflict={props.onResolveConflict}
-        />
-        {modalOverlays}
-      </AppShell>
+  // What the master pane holds and how it is headed, by what is pushed into it.
+  // Nothing pushed → the sections. The changes surface, Media and Forms each
+  // push a list of their own kind; a collection pushes its entries. The header
+  // is the same shape throughout, so switching between them moves nothing.
+  let masterHeaderNode: React.ReactNode;
+  let masterBody: React.ReactNode;
+  if (!pushed) {
+    masterHeaderNode = masterHeader();
+    masterBody = sectionsList;
+  } else if (changes) {
+    // The changes list: the same rows as the editor's, carrying a status and a
+    // diff stat instead of a draft badge. Everything that mutates a document
+    // (create, bulk select, search, folder drill-down) is deliberately absent:
+    // this describes a comparison between two branches, not something to edit.
+    masterHeaderNode = masterHeader();
+    masterBody = (
+      <EntriesList
+        variant="desktop"
+        entries={entries}
+        selectedId={selectedId}
+        onOpenEntry={(entry) => { revealDetail(); activate(entry); }}
+        header={
+          <View style={{ paddingHorizontal: t.space(4), paddingVertical: t.space(2) }}>
+            <Text variant="label" color="tertiary">
+              {`${entries.length} changed`}
+            </Text>
+          </View>
+        }
+        folders={[]}
+        onFolderPress={() => {}}
+      />
     );
-  }
-
-  // A plugin screen replaces the list + detail panes with one flexing pane;
-  // the sidebar keeps its place (and its highlight, via the host's nav key).
-  if (props.contentSlot != null) {
-    return (
-      <AppShell testID="desktop-shell" topBar={topBar} banner={readOnlyBanner}>
-        {navPane}
-        <ResizeHandle width={navW} min={180} max={420} onChange={setNavW} testID="resize-nav" />
-        <Pane flex={1} testID="pane-plugin" scroll={false}>
-          {props.contentSlot}
-        </Pane>
-        {modalOverlays}
-      </AppShell>
+  } else if (formsShowing && props.forms) {
+    // The forms list sits where a collection's documents would. Opening a form
+    // hands the detail region to FormsBrowser, which owns the two levels beneath
+    // (submissions → one submission); the list stays here so you can switch.
+    masterHeaderNode = masterHeader();
+    masterBody = (
+      <FormsBrowser
+        api={props.forms}
+        form={null}
+        onSelectForm={(name) => { revealDetail(); onSelectNav(name ? formsNavKey(name) : FORMS_NAV_KEY); }}
+        variant="desktop"
+      />
     );
-  }
-
-  // Media reuses the three-pane model rather than replacing it: the content pane
-  // lists the media sets exactly where a collection's documents would be, and the
-  // details pane holds the browser for whichever set is selected. Selecting a set
-  // goes through onSelectNav, so it lands in the URL like any other selection.
-  // Forms enter through the same content column every other surface uses: the
-  // list of forms sits exactly where a collection's documents would, at the
-  // list width, with the empty state beside it. A list of half a dozen rows
-  // stretched across everything after the sidebar reads as a different kind of
-  // screen than Edit, Changes and Media, when it is the same kind of screen.
-  //
-  // Opening a form is where forms stop fitting the three-pane model, and so it
-  // is where they leave it: that surface is two more levels deep (submissions →
-  // one submission), and threading those through panes meant for collection →
-  // document → editor would give a pane whose meaning changes with the level.
-  // FormsBrowser owns its own split from there.
-  if (formsShowing && props.forms) {
-    if (!activeForm) {
-      return (
-        <AppShell testID="desktop-shell" topBar={topBar} banner={readOnlyBanner}>
-          {navPane}
-          <ResizeHandle width={navW} min={180} max={420} onChange={setNavW} testID="resize-nav" />
-
-          <Pane width={listW} testID="pane-forms" scroll={false} header={<PaneTitle title="Forms" />}>
-            <FormsBrowser
-              api={props.forms}
-              form={null}
-              onSelectForm={(name) => onSelectNav(name ? formsNavKey(name) : FORMS_NAV_KEY)}
-              variant="desktop"
+  } else if (mediaShowing) {
+    // Media lists its sets here and browses the chosen one in the detail region.
+    // Selecting a set goes through onSelectNav, so it lands in the URL like any
+    // other selection.
+    masterHeaderNode = masterHeader();
+    masterBody = (
+      <MediaSetList
+        sets={mediaSets}
+        selected={mediaSet}
+        onSelect={(name) => { revealDetail(); onSelectNav(mediaNavKey(name)); }}
+      />
+    );
+  } else {
+    masterHeaderNode = collectionHeader;
+    masterBody = search.advanced ? (
+      <AdvancedSearch
+        fields={facetFields}
+        initial={search.draft}
+        onChange={search.setDraft}
+        onApply={search.applyDraft}
+        matchCount={search.matchCount}
+        counting={search.counting}
+      />
+    ) : (
+      <EntriesList
+        variant="desktop"
+        entries={visibleEntries}
+        selectedId={selectedId}
+        onOpenEntry={openEntry}
+        header={
+          showChecks && selectedCount > 0 && (onBulkDelete || canBulkMove) ? (
+            <SelectionBar
+              count={selectedCount}
+              onClear={clear}
+              onMove={canBulkMove ? () => setMovePrompt(true) : undefined}
+              onDelete={onBulkDelete ? async () => { await onBulkDelete(moveIds); clear(); } : undefined}
             />
-          </Pane>
-          <ResizeHandle width={listW} min={260} max={640} onChange={setListW} testID="resize-forms" />
-
-          <View style={{ flex: 1, alignItems: "center", justifyContent: "center", padding: t.space(6) }}>
-            <Text variant="body" color="tertiary" testID="forms-empty">Select a form</Text>
-          </View>
-          {modalOverlays}
-        </AppShell>
-      );
-    }
-    return (
-      <AppShell testID="desktop-shell" topBar={topBar} banner={readOnlyBanner}>
-        {navPane}
-        <ResizeHandle width={navW} min={180} max={420} onChange={setNavW} testID="resize-nav" />
-        <Pane flex={1} testID="pane-forms" scroll={false}>
-          <FormsBrowser
-            api={props.forms}
-            form={activeForm}
-            onSelectForm={(name) => onSelectNav(name ? formsNavKey(name) : FORMS_NAV_KEY)}
-            selectedId={props.selectedSubmissionId ?? null}
-            onSelectSubmission={props.onSelectSubmission}
-            variant="desktop"
-          />
-        </Pane>
-        {modalOverlays}
-      </AppShell>
+          ) : (
+            <View style={{ paddingHorizontal: t.space(4), paddingVertical: t.space(2), flexDirection: "row", alignItems: "center", gap: t.space(1.5) }}>
+              <Text variant="label" color="tertiary">
+                {`${totalEntries ?? entries.length} entries`}
+              </Text>
+              {/* The count is of documents with unsaved edits in this
+                  browser — the same state the rows below badge as Draft.
+                  It replaced workspace.changed here, which every host
+                  passed as a constant and which therefore told nobody
+                  anything. Rendered only when there is something to
+                  report: a permanent "0 uncommitted" is furniture. */}
+              {draftsOpen > 0 ? (
+                <>
+                  <Text variant="label" color="tertiary">·</Text>
+                  <Text variant="label" color="primary" testID="uncommitted-count">
+                    {`${draftsOpen} uncommitted`}
+                  </Text>
+                </>
+              ) : null}
+            </View>
+          )
+        }
+        upRow={
+          hierarchical && folder.length > 0 ? (
+            <PressableRow onPress={() => setFolder(folder.slice(0, -1))}>
+              <UpListItem parentLabel={parentLabel(folder, activeLabel)} currentPath={folder.join("/")} />
+            </PressableRow>
+          ) : null
+        }
+        folders={
+          hierarchical
+            ? folderNames.map((name) => ({
+              name,
+              count: countItems(node!.folders.get(name)!),
+              key: [...folder, name].join("/"),
+            }))
+            : []
+        }
+        onFolderPress={(name) => setFolder([...folder, name])}
+        showChecks={showChecks}
+        checked={checked}
+        onToggleEntry={toggle}
+        showFolderChecks={canBulkMove}
+        checkedFolders={checkedFolders}
+        onToggleFolder={toggleFolder}
+        // Pagination is driven by the flat list; the folder drill-down loads
+        // the whole set up front, so hasMore is false there.
+        hasMore={!hierarchical && hasMoreEntries}
+        loadingMore={loadingMoreEntries}
+        onLoadMore={onLoadMoreEntries}
+      />
     );
   }
 
-  if (mediaShowing) {
-    return (
-      <AppShell testID="desktop-shell" topBar={topBar} banner={readOnlyBanner}>
-        {navPane}
-        <ResizeHandle width={navW} min={180} max={420} onChange={setNavW} testID="resize-nav" />
-
-        <Pane width={listW} testID="pane-media-sets" scroll={false} header={<PaneTitle title="Media" />}>
-          <MediaSetList
-            sets={mediaSets}
-            selected={mediaSet}
-            onSelect={(name) => onSelectNav(mediaNavKey(name))}
-          />
-        </Pane>
-        <ResizeHandle width={listW} min={240} max={520} onChange={setListW} testID="resize-media-sets" />
+  // The master pane, expandable to the whole screen, and gone while a document
+  // column has it. Its body owns its own scrolling (a FlatList, or the sections
+  // ScrollView), so the pane itself does not.
+  const masterPane = (
+    <Pane width={masterExpanded ? undefined : masterW} testID="pane-master" scroll={false} header={masterHeaderNode}>
+      {masterBody}
+    </Pane>
+  );
 
-        {mediaSet ? (
-          <MediaBrowser set={mediaSet} label={mediaSetLabel(mediaSets, mediaSet)} variant="desktop" />
-        ) : (
-          <View style={{ flex: 1, alignItems: "center", justifyContent: "center", padding: t.space(6) }}>
-            <Text variant="body" color="tertiary" testID="media-sets-empty">Select a media collection</Text>
-          </View>
-        )}
-        {modalOverlays}
-      </AppShell>
+  // The detail region, by what the master has pushed. A plugin screen and an
+  // open form take it whole; Media browses the chosen set; the changes surface
+  // shows the selected diff; the editor shows its document columns.
+  let detail: React.ReactNode;
+  if (changes) {
+    detail = (
+      <ChangeDetail
+        change={props.selectedChange}
+        loading={props.loadingChange}
+        emptyMessage={activeNavKey ? "Select a change" : (entriesEmpty ?? "No changes on this branch")}
+        conflicts={props.selectedConflicts}
+        onResolveConflict={props.onResolveConflict}
+      />
     );
-  }
-
-  return (
-    <AppShell testID="desktop-shell" topBar={topBar} banner={readOnlyBanner}>
-      {/* content types */}
-      {navPane}
-
-      {/* draggable seam: resize the nav pane */}
-      <ResizeHandle width={navW} min={180} max={420} onChange={setNavW} testID="resize-nav" />
-
-      {/* entries — collapsible to a rotated-label rail */}
-      {listCollapsed ? (
-        <CollapsedRail
-          testID="list-rail"
-          label={listLabel}
-          onExpand={() => setListCollapsed(false)}
-          trailing={createBtn}
+  } else if (props.contentSlot != null) {
+    detail = (
+      <Pane flex={1} testID="pane-plugin" scroll={false} borderRight={false}>
+        {props.contentSlot}
+      </Pane>
+    );
+  } else if (formsShowing && props.forms) {
+    detail = activeForm ? (
+      <Pane flex={1} testID="pane-forms" scroll={false} borderRight={false}>
+        <FormsBrowser
+          api={props.forms}
+          form={activeForm}
+          onSelectForm={(name) => onSelectNav(name ? formsNavKey(name) : FORMS_NAV_KEY)}
+          selectedId={props.selectedSubmissionId ?? null}
+          onSelectSubmission={props.onSelectSubmission}
+          variant="desktop"
         />
-      ) : (
-        <Pane
-          width={listW}
-          testID="pane-entries"
-          scroll={false}
-          header={listHeader}
-        >
-          {search.advanced ? (
-            <AdvancedSearch
-              fields={facetFields}
-              initial={search.draft}
-              onChange={search.setDraft}
-              onApply={search.applyDraft}
-              matchCount={search.matchCount}
-              counting={search.counting}
-            />
-          ) : browsing && !activeNavKey ? (
-            <View style={{ flex: 1, alignItems: "center", justifyContent: "center", padding: t.space(6) }}>
-              <Text variant="body" color="tertiary" testID="entries-empty">{entriesEmpty}</Text>
-            </View>
-          ) : (
-            <EntriesList
-              variant="desktop"
-              entries={visibleEntries}
-              selectedId={selectedId}
-              onOpenEntry={openEntry}
-              header={
-                showChecks && selectedCount > 0 && (onBulkDelete || canBulkMove) ? (
-                  <SelectionBar
-                    count={selectedCount}
-                    onClear={clear}
-                    onMove={canBulkMove ? () => setMovePrompt(true) : undefined}
-                    onDelete={onBulkDelete ? async () => { await onBulkDelete(moveIds); clear(); } : undefined}
-                  />
-                ) : (
-                  <View style={{ paddingHorizontal: t.space(4), paddingVertical: t.space(2), flexDirection: "row", alignItems: "center", gap: t.space(1.5) }}>
-                    <Text variant="label" color="tertiary">
-                      {`${totalEntries ?? entries.length} entries`}
-                    </Text>
-                    {/* The count is of documents with unsaved edits in this
-                        browser — the same state the rows below badge as Draft.
-                        It replaced workspace.changed here, which every host
-                        passed as a constant and which therefore told nobody
-                        anything. Rendered only when there is something to
-                        report: a permanent "0 uncommitted" is furniture. */}
-                    {draftsOpen > 0 ? (
-                      <>
-                        <Text variant="label" color="tertiary">·</Text>
-                        <Text variant="label" color="primary" testID="uncommitted-count">
-                          {`${draftsOpen} uncommitted`}
-                        </Text>
-                      </>
-                    ) : null}
-                  </View>
-                )
-              }
-              upRow={
-                hierarchical && folder.length > 0 ? (
-                  <PressableRow onPress={() => setFolder(folder.slice(0, -1))}>
-                    <UpListItem parentLabel={parentLabel(folder, activeLabel)} currentPath={folder.join("/")} />
-                  </PressableRow>
-                ) : null
-              }
-              folders={
-                hierarchical
-                  ? folderNames.map((name) => ({
-                    name,
-                    count: countItems(node!.folders.get(name)!),
-                    key: [...folder, name].join("/"),
-                  }))
-                  : []
-              }
-              onFolderPress={(name) => setFolder([...folder, name])}
-              showChecks={showChecks}
-              checked={checked}
-              onToggleEntry={toggle}
-              showFolderChecks={canBulkMove}
-              checkedFolders={checkedFolders}
-              onToggleFolder={toggleFolder}
-              // Pagination is driven by the flat list; the folder drill-down loads
-              // the whole set up front, so hasMore is false there.
-              hasMore={!hierarchical && hasMoreEntries}
-              loadingMore={loadingMoreEntries}
-              onLoadMore={onLoadMoreEntries}
-            />
-          )}
-        </Pane>
-      )}
-
-      {/* draggable seam: resize the entry list (only while it's expanded) */}
-      {listCollapsed ? null : (
-        <ResizeHandle width={listW} min={260} max={640} onChange={setListW} testID="resize-list" />
-      )}
-
-      {/* detail — a horizontally-scrolling row of side-by-side document columns.
-          Each open column is its own editor focus-mode viewport (see `column`). */}
+      </Pane>
+    ) : (
+      emptyDetail("Select a form", "forms-empty")
+    );
+  } else if (mediaShowing) {
+    detail = mediaSet ? (
+      <MediaBrowser set={mediaSet} label={mediaSetLabel(mediaSets, mediaSet)} variant="desktop" />
+    ) : (
+      emptyDetail("Select a media collection", "media-sets-empty")
+    );
+  } else {
+    // A horizontally-scrolling row of side-by-side document columns. Each open
+    // column is its own editor focus-mode viewport (see `columnView`). Unmounted
+    // while the master has the screen; the columns keep their state through
+    // that, since the host owns the open-tab set and the drafts live outside
+    // this tree.
+    detail = (
       <View
         testID="pane-detail"
         ref={detailRef}
@@ -4801,27 +4873,13 @@ function DesktopBrowser(props: ContentBrowserProps) {
             scrollEventThrottle={16}
             onScroll={(ev) => { scrollXRef.current = ev.nativeEvent.contentOffset.x; }}
           >
-            {columns.flatMap((col, i) => {
+            {shownColumns.flatMap((col, i) => {
               const nodes: React.ReactNode[] = [];
               if (dragId && overSlot === i) nodes.push(dropIndicator(`drop-${i}`));
-              nodes.push(
-                collapsedCols[col.id] ? (
-                  <CollapsedRail
-                    key={col.id}
-                    testID={`column-${col.id}`}
-                    label={col.title || col.entry?.title || "Untitled"}
-                    onExpand={() => setCollapsedCols((c) => ({ ...c, [col.id]: false }))}
-                    onClose={() => closeColumn(col.id)}
-                    dragHandle={columnGrip(col.id)}
-                    dimmed={dragId === col.id}
-                  />
-                ) : (
-                  columnView(col)
-                ),
-              );
+              nodes.push(columnView(col));
               return nodes;
             })}
-            {dragId && overSlot === columns.length ? dropIndicator("drop-end") : null}
+            {dragId && overSlot === shownColumns.length ? dropIndicator("drop-end") : null}
             {showCreate ? (
               <View
                 testID="column-create"
@@ -4846,12 +4904,33 @@ function DesktopBrowser(props: ContentBrowserProps) {
           </ScrollView>
         ) : (
           <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+            {/* With nothing pushed the region says what to do; a pushed list
+                says what to pick from it; a direct item is on its way and
+                needs no prompt. */}
             <Text variant="body" color="tertiary" testID="detail-empty">
-              {browsing ? (activeNavKey ? `Select ${activeLabel}` : "") : "No entry selected."}
+              {!browsing
+                ? "No entry selected."
+                : !activeNavKey
+                ? entriesEmpty
+                : activeItem?.direct
+                ? ""
+                : `Select ${activeLabel}`}
             </Text>
           </View>
         )}
       </View>
+    );
+  }
+
+  return (
+    <AppShell testID="desktop-shell" topBar={topBar} banner={readOnlyBanner}>
+      {expandedCol ? null : masterPane}
+      {/* draggable seam: resize the master pane — there is nothing to resize it
+          against once a pane has taken the screen */}
+      {masterExpanded || expandedCol ? null : (
+        <ResizeHandle width={masterW} min={260} max={640} onChange={setMasterW} testID="resize-master" />
+      )}
+      {masterExpanded ? null : detail}
       {movePrompt && onBulkMove ? (
         <PromptDialog
           title={`Move ${selectedCount} item${selectedCount === 1 ? "" : "s"}`}
@@ -5274,10 +5353,6 @@ function MobileBrowser(props: ContentBrowserProps) {
   );
 }
 
-// Width of a collapsed rail (the content list or a document column). Narrow,
-// full-height, with its label rotated 90° — clicking the body re-expands it.
-const RAIL_W = 44;
-
 // RN's typed `cursor` only allows auto/pointer; react-native-web forwards any CSS
 // cursor to the DOM. Cast these desktop-only affordances through ViewStyle.
 const CURSOR_COL_RESIZE = { cursor: "col-resize" } as unknown as ViewStyle;
@@ -5354,14 +5429,15 @@ function ResizeHandle({
 
 // CustomColumn is a column whose body is a caller-supplied node rather than the
 // document editor (OpenTab.content). It reproduces the editor column's header
-// chrome — grip, active accent, collapse, close — so a plugin's column is a
+// chrome — grip, active accent, expand, close — so a plugin's column is a
 // peer of the document columns rather than something visibly bolted on. The
 // body gets no padding and no scroll container: an iframe wants the whole box.
 function CustomColumn({
   title,
   active,
   onActivate,
-  onCollapse,
+  expanded,
+  onToggleExpand,
   onClose,
   dragHandle,
   children,
@@ -5369,7 +5445,8 @@ function CustomColumn({
   title: string;
   active?: boolean;
   onActivate?: () => void;
-  onCollapse?: () => void;
+  expanded?: boolean;
+  onToggleExpand?: () => void;
   onClose?: () => void;
   dragHandle?: React.ReactNode;
   children: React.ReactNode;
@@ -5391,8 +5468,15 @@ function CustomColumn({
         <Pressable onPress={onActivate} style={{ flex: 1 }}>
           <Text variant="monoSm" numberOfLines={1}>{title}</Text>
         </Pressable>
-        {onCollapse ? (
-          <IconButton name="panelLeft" size="sm" label="Collapse column" onPress={onCollapse} testID="column-collapse" />
+        {onToggleExpand ? (
+          <IconButton
+            name={expanded ? "minimize" : "maximize"}
+            size="sm"
+            active={expanded}
+            label={expanded ? "Collapse column" : "Expand column"}
+            onPress={onToggleExpand}
+            testID="column-expand"
+          />
         ) : null}
         {onClose ? (
           <IconButton name="x" size="sm" label="Close column" onPress={onClose} testID="column-close" />
@@ -5403,72 +5487,6 @@ function CustomColumn({
   );
 }
 
-// CollapsedRail is the thin vertical strip a collapsed pane becomes. It mirrors
-// the expanded pane's header: an optional top control row (a trailing slot such
-// as the create "+", and/or a close button) over a pressable body whose rotated
-// label matches the header's title. onExpand fires on a body press.
-function CollapsedRail({
-  label,
-  onExpand,
-  onClose,
-  trailing,
-  dragHandle,
-  dimmed,
-  testID,
-}: {
-  label: string;
-  onExpand: () => void;
-  onClose?: () => void;
-  trailing?: React.ReactNode;
-  // A drag grip (column rails) rendered above the close button in the control row.
-  dragHandle?: React.ReactNode;
-  // Dim the rail while it's the column being dragged.
-  dimmed?: boolean;
-  testID?: string;
-}) {
-  const t = useTheme();
-  return (
-    <View
-      testID={testID}
-      style={{
-        width: RAIL_W, alignSelf: "stretch", minHeight: 0, overflow: "hidden",
-        borderRightWidth: 1, borderRightColor: t.color.borderSubtle,
-        backgroundColor: t.color.surfacePage,
-        opacity: dimmed ? 0.5 : 1,
-      }}
-    >
-      {trailing || onClose || dragHandle ? (
-        <View
-          style={{
-            height: t.layout.topbar, alignItems: "center", justifyContent: "center", gap: t.space(1),
-            borderBottomWidth: 1, borderBottomColor: t.color.borderSubtle,
-          }}
-        >
-          {dragHandle}
-          {trailing}
-          {onClose ? <IconButton name="x" size="sm" label="Close" onPress={onClose} testID="rail-close" /> : null}
-        </View>
-      ) : null}
-      <Pressable
-        onPress={onExpand}
-        style={({ hovered, pressed }: { hovered?: boolean; pressed: boolean }) => ({
-          flex: 1, alignItems: "center", justifyContent: "center", gap: t.space(3),
-          backgroundColor: hovered || pressed ? t.color.surfaceHover : "transparent",
-        })}
-      >
-        <Icon name="chevronRight" size={14} color={t.color.textTertiary} />
-        {/* rotate doesn't change the layout box, so the pre-rotation width becomes
-            the label's on-screen height; overflow:hidden on the rail clips it. */}
-        <View style={{ transform: [{ rotate: "90deg" }] }}>
-          <Text variant="monoSm" weight="medium" numberOfLines={1} style={{ width: 240, textAlign: "center" }}>
-            {label}
-          </Text>
-        </View>
-      </Pressable>
-    </View>
-  );
-}
-
 // Small Pressable wrapper so list items get press feedback without duplicating.
 // Row press feedback: the selected row holds a stronger tint (surfaceActive) so
 // it stays distinct from the lighter hover tint (surfaceHover) on other rows.
@@ -5530,23 +5548,6 @@ function mediaSetLabel(sets: MediaSetInfo[], name: string): string {
   return set ? titleCaseWord(set.name) : titleCaseWord(name);
 }
 
-// PaneTitle is the content pane's heading for the surfaces with no controls
-// beside it — Changes, Media, Forms.
-//
-// Deliberately the same Text the collection header uses (`listHeader`), and
-// nothing else. Pane's header row already supplies the height, the horizontal
-// padding and the rule beneath, so the padded wrapper this used to add sat
-// inside that padding and pushed the title a step right of every collection's —
-// at `body` rather than `h3`, so it read a size smaller too. Switching between
-// Posts and Media moved the heading twice over.
-function PaneTitle({ title }: { title: string }) {
-  return (
-    <Text variant="h3" weight="semibold" style={{ flex: 1 }}>
-      {title}
-    </Text>
-  );
-}
-
 // MediaSetList is the content pane under Media: one row per media collection,
 // sitting exactly where a collection's documents sit. Each row shows how many
 // files the set holds and the glob it is discovered by, since that glob is the
@@ -5594,15 +5595,138 @@ function MediaSetList({
   );
 }
 
-// navRowActive reports whether a sidebar row should read as current. The Media
-// button stays lit while a set beneath it is open ("media:uploads"), because the
-// set is not itself a sidebar row — losing the highlight there would leave the
-// sidebar showing nothing selected while media is plainly on screen.
+// navRowActive reports whether a sections row should read as current. The Media
+// button stays lit while a set beneath it is open ("media:uploads"), and Forms
+// while a form is, because neither the set nor the form is itself a row —
+// losing the highlight there would leave the sections showing nothing selected
+// while media or a form is plainly on screen.
 function navRowActive(itemKey: string, activeNavKey: string): boolean {
   if (itemKey === MEDIA_NAV_KEY) return isMediaNavKey(activeNavKey);
+  if (itemKey === FORMS_NAV_KEY) return isFormsNavKey(activeNavKey);
   return itemKey === activeNavKey;
 }
 
+// navItemFor resolves the sections row a nav key belongs to — the row itself,
+// or, for a media set or a form, the Media or Forms row they sit beneath.
+function navItemFor(sections: CmsNavSection[], key: string): CmsNavItem | undefined {
+  if (!key) return undefined;
+  for (const s of sections) {
+    for (const item of s.items) {
+      if (navRowActive(item.key, key)) return item;
+    }
+  }
+  return undefined;
+}
+
+// MasterTitle heads the master pane while a list is pushed into it. It is the
+// list's name and, when there is more than one list to choose from, a menu of
+// the rest — so switching collections does not go back through the sections.
+// Direct items (singletons, plugin screens) are left out: they have no list to
+// switch to. With a single list to offer there is no menu at all, matching the
+// branch and project menus' rule against a dead affordance.
+//
+// The menu sits inside the pane's header, which stacks above the pane body and
+// clips to the pane — so it is positioned against the header row, spans the
+// pane's width, and scrolls past a height the pane could not show.
+function MasterTitle({
+  label,
+  sections,
+  activeNavKey,
+  onSelect,
+}: {
+  label: string;
+  sections: CmsNavSection[];
+  activeNavKey: string;
+  onSelect: (key: string) => void;
+}) {
+  const t = useTheme();
+  const [open, setOpen] = useState(false);
+  const listed = sections
+    .map((s) => ({ ...s, items: s.items.filter((i) => !i.direct) }))
+    .filter((s) => s.items.length > 0);
+  const count = listed.reduce((n, s) => n + s.items.length, 0);
+  if (count < 2) {
+    return (
+      <Text variant="h3" weight="semibold" style={{ flex: 1 }} numberOfLines={1} testID="master-title">
+        {label}
+      </Text>
+    );
+  }
+  const rowStyle = ({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => ({
+    flexDirection: "row" as const, alignItems: "center" as const, gap: t.space(2),
+    paddingHorizontal: t.space(3), paddingVertical: t.space(2),
+    backgroundColor: hovered || pressed ? t.color.surfaceHover : "transparent",
+  });
+  return (
+    <>
+      <Pressable
+        testID="master-title"
+        accessibilityRole="button"
+        accessibilityLabel={`${label}. Switch collection`}
+        aria-expanded={open}
+        onPress={() => setOpen((v) => !v)}
+        style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: t.space(1.5), minWidth: 0 }}
+      >
+        <Text variant="h3" weight="semibold" numberOfLines={1} style={{ flexShrink: 1 }}>{label}</Text>
+        <Icon name="chevronDown" size={14} color={t.color.textTertiary} />
+      </Pressable>
+      {open ? (
+        <>
+          {/* A catcher so a click anywhere in the pane dismisses; above the
+              header's other controls so none of them fires through it. */}
+          <Pressable
+            onPress={() => setOpen(false)}
+            testID="master-menu-backdrop"
+            style={{ position: "absolute", top: -2000, left: -2000, right: -2000, bottom: -2000, zIndex: 15 }}
+          />
+          <View
+            testID="master-menu"
+            style={{
+              position: "absolute", top: t.layout.topbar - t.space(1), left: t.space(2), right: t.space(2),
+              maxHeight: 420, zIndex: 20,
+              backgroundColor: t.color.surfaceRaised, borderWidth: 1, borderColor: t.color.borderDefault,
+              borderRadius: t.radius.md, paddingVertical: t.space(1),
+            }}
+          >
+            <ScrollView>
+              {listed.map((section, i) => (
+                <View key={section.title || `section-${i}`}>
+                  {section.title ? <SectionLabel>{section.title}</SectionLabel> : null}
+                  {section.items.map((item) => {
+                    const active = navRowActive(item.key, activeNavKey);
+                    return (
+                      <Pressable
+                        key={item.key}
+                        testID={`master-option-${item.key}`}
+                        accessibilityRole="menuitem"
+                        aria-current={active ? "page" : undefined}
+                        onPress={() => { setOpen(false); if (!active) onSelect(item.key); }}
+                        style={rowStyle}
+                      >
+                        <Icon
+                          name={active ? "check" : item.icon}
+                          size={15}
+                          color={active ? t.color.textPrimary : t.color.textSecondary}
+                        />
+                        <Text variant="sm" weight={active ? "semibold" : "regular"} numberOfLines={1} style={{ flex: 1 }}>
+                          {item.label}
+                        </Text>
+                        {item.count != null ? (
+                          <Text variant="monoSm" color="tertiary">{String(item.count)}</Text>
+                        ) : null}
+                      </Pressable>
+                    );
+                  })}
+                </View>
+              ))}
+            </ScrollView>
+          </View>
+        </>
+      ) : null}
+    </>
+  );
+}
+
 // navLabelFor finds the sidebar label for a nav key, so a pane header shows the
 // same words the user clicked rather than re-deriving them from the key.
 function navLabelFor(sections: CmsNavSection[], key: string): string | undefined {