a band shows its blocks, from one shared list

Selecting a band showed its name and title and nothing about what was in it — so
adding a block to the thing you were looking at meant going back out to the page.

BandBlocks is that list, used by the band's editor and nested under every band in
the page's structure. Same list, same actions, one component; the galleries panel
taught that lesson once already.

Blocks reorder within a column now. Across columns is the same call — the write
carries the column — but a list per column has no gesture for crossing between
them, and inventing one here would be guessing.

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

web/sections/PageBuilderPanel.tsx

@@ -40,6 +40,7 @@ import { GalleryItems } from './GalleryItems';
 import { PartnersEditor } from './PartnersEditor';
 import { BlockMedia } from './BlockMedia';
 import { PageStructure } from './PageStructure';
+import { BandBlocks } from './BandBlocks';
 
 /**
  * The shapes a photograph block may take.
@@ -524,6 +525,24 @@ export const PageBuilderPanel = () => {
   const reorderRef = useRef<(ids: number[]) => Promise<void>>(async () => {});
   reorderRef.current = reorderSections;
 
+  /** The order of one column's blocks. The column travels with the ids — see the site's query. */
+  const reorderBlocks = async (section: CanvasSection, column: number, ids: number[]) => {
+    if (!page) return;
+    setError(null);
+    try {
+      await clientRef.current.put(
+        `/fofos-admin/pages/${page.id}/sections/${section.id}/components/order`,
+        { column, ids },
+      );
+      setRendered((n) => n + 1);
+    } catch (failure) {
+      setError(readableError(failure));
+    }
+  };
+
+  const reorderBlocksRef = useRef<typeof reorderBlocks>(async () => {});
+  reorderBlocksRef.current = reorderBlocks;
+
   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;
@@ -899,7 +918,21 @@ export const PageBuilderPanel = () => {
     const band = !piece && part ? sections.find((section) => String(section.id) === part) : null;
     if (band && page) {
       setEditorRef.current(
-        <BandSettings pageId={page.id} band={band} onSaved={() => setRendered((n) => n + 1)} />,
+        <BandSettings
+          pageId={page.id}
+          band={band}
+          onSaved={() => setRendered((n) => n + 1)}
+          blocks={
+            <BandBlocks
+              slug={slug ?? ''}
+              section={band}
+              busy={creating}
+              onAdd={(one, column) => handlersRef.current.addComponent(one, column)}
+              onDelete={(one) => handlersRef.current.removeComponent(one)}
+              onReorder={(one, column, ids) => void reorderBlocksRef.current(one, column, ids)}
+            />
+          }
+        />,
       );
       return;
     }
@@ -922,6 +955,7 @@ export const PageBuilderPanel = () => {
           onReorder={(ids) => void reorderRef.current(ids)}
           onAddComponent={(section, column) => handlersRef.current.addComponent(section, column)}
           onDeleteComponent={(block) => handlersRef.current.removeComponent(block)}
+          onReorderComponents={(section, column, ids) => void reorderBlocksRef.current(section, column, ids)}
         />,
       );
       return;