the page's structure, in the editor

Add, delete and reorder a band. Those three were reached from a bar painted onto
the page until the overlays went, and have had no door since.

Shown when nothing inside the page is selected — after the band and the block,
because those are things you opened deliberately and this is what is there when
you have not.

The nav lists the same bands and is for GOING somewhere; this is for changing what
the page is made of. Two verbs on the same nouns, and mixing them would mean a nav
row that sometimes navigates and sometimes deletes.

Same reorder gesture as pages, gallery items and partners.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/sections/PageBuilderPanel.tsx

@@ -39,6 +39,7 @@ import { BlockSettings } from './BlockSettings';
 import { GalleryItems } from './GalleryItems';
 import { PartnersEditor } from './PartnersEditor';
 import { BlockMedia } from './BlockMedia';
+import { PageStructure } from './PageStructure';
 
 /**
  * The shapes a photograph block may take.
@@ -508,6 +509,21 @@ export const PageBuilderPanel = () => {
    * there alongside what it is changing. That is the contract for a jsonb column somebody can put
    * anything in: a merge would need the server to know which keys are meaningful, and it does not.
    */
+  /** Every id, in order — which is what makes two bands claiming a position impossible. */
+  const reorderSections = async (ids: number[]) => {
+    if (!page) return;
+    setError(null);
+    try {
+      await clientRef.current.put(`/fofos-admin/pages/${page.id}/sections/order`, { ids });
+      setRendered((n) => n + 1);
+    } catch (failure) {
+      setError(readableError(failure));
+    }
+  };
+
+  const reorderRef = useRef<(ids: number[]) => Promise<void>>(async () => {});
+  reorderRef.current = reorderSections;
+
   const setContent = async (component: CanvasComponent, content: Record<string, unknown>) => {
     const owner = sections.find((section) => section.components.some((one) => one.id === component.id));
     if (!page || !owner) return;
@@ -888,8 +904,29 @@ export const PageBuilderPanel = () => {
       return;
     }
 
+    /*
+      Nothing selected: the page itself, as the list of bands it is made of.
+
+      Last, after the band and the block, because those are things you opened deliberately. This is
+      what is there when you have not — and it is where adding, removing and reordering a band live,
+      now that the bars painted onto the page are gone.
+    */
+    if (page) {
+      setEditorRef.current(
+        <PageStructure
+          slug={slug ?? ''}
+          sections={sections}
+          busy={creating}
+          onAdd={() => handlersRef.current.add()}
+          onDelete={(section) => handlersRef.current.remove(section.id)}
+          onReorder={(ids) => void reorderRef.current(ids)}
+        />,
+      );
+      return;
+    }
+
     setEditorRef.current(null);
-  }, [spacing, editing, creating, device, steps, part, piece, sections, page]);
+  }, [spacing, editing, creating, device, steps, part, piece, sections, page, slug]);
 
   // Cleared on unmount, or the panel goes on offering an editor for a page nobody is looking at.
   useEffect(() => () => setEditorRef.current(null), []);