From 6781fd58759a83ced74df3cba7c8e71eeda1ca33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Fri, 4 Sep 2026 15:20:06 +0100
Subject: [PATCH] a band chooses whether a rule follows it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The site separates bands with an edge-to-edge line, and it was `index < sections.length - 1` — not a
decision anybody could make. Two bands that belong together, a heading beside its picture and the
carousel that continues it, read as two pages with a rule between them.

Putting both in ONE band does not solve it: a band is one row, so a full-width strip inside a
two-column band overlaps the other column. What was wanted was never one section; it was no line.

A checkbox rather than a field in the draft, because it is a switch — there is nothing to debounce, and
waiting 600ms to watch a line disappear reads as the control not working. Labelled by what it does
rather than as `divider`, which is the column name and says nothing about what you will see.

Still never on the last band: a line above the footer is the footer's own border, twice.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 web/canvas.ts                 |  2 ++
 web/sections/BandSettings.tsx | 30 +++++++++++++++++++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/web/canvas.ts b/web/canvas.ts
index f5ec30d..4438e63 100644
--- a/web/canvas.ts
+++ b/web/canvas.ts
@@ -68,6 +68,8 @@ export type CanvasComponent = {
 export type CanvasSection = {
   id: number;
   name: string;
+  /** Whether the page draws a rule beneath this band. */
+  divider?: boolean;
   /** The heading the page draws above the band, or null. Not `name` — see the site's schema. */
   title?: string | null;
   layout: 'one' | 'two';
diff --git a/web/sections/BandSettings.tsx b/web/sections/BandSettings.tsx
index 0777866..55f297f 100644
--- a/web/sections/BandSettings.tsx
+++ b/web/sections/BandSettings.tsx
@@ -26,7 +26,7 @@ export const BandSettings = ({
   blocks,
 }: {
   pageId: number;
-  band: { id: number; name: string; title?: string | null };
+  band: { id: number; name: string; title?: string | null; divider?: boolean };
   /** The builder re-reads its sections: the nav's row is this name, and the page draws this title. */
   onSaved: () => void;
   /** This band's blocks — `BandBlocks`, built by the panel that has the handlers. */
@@ -37,6 +37,7 @@ export const BandSettings = ({
   clientRef.current = client;
 
   const [draft, setDraft] = useState({ name: band.name, title: band.title ?? '' });
+  const [busyDivider, setBusyDivider] = useState(false);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [saved, flashSaved] = useFlash();
@@ -93,6 +94,33 @@ export const BandSettings = ({
         />
       </div>
 
+      {/*
+        Written on its own rather than through the draft, because it is a switch: there is nothing to
+        debounce and waiting 600ms to see a line disappear reads as the control not working.
+
+        Phrased as what it DOES — a rule under this band — rather than as `divider`, which is the column
+        name and tells somebody nothing about what they will see.
+      */}
+      <label className="flex cursor-pointer items-center gap-2 text-xs">
+        <input
+          type="checkbox"
+          className="size-3.5 accent-primary"
+          checked={band.divider !== false}
+          disabled={busyDivider}
+          onChange={async (event) => {
+            const next = event.currentTarget.checked;
+            setBusyDivider(true);
+            try {
+              await client.patch(`/fofos-admin/pages/${pageId}/sections/${band.id}`, { divider: next });
+              onSaved();
+            } finally {
+              setBusyDivider(false);
+            }
+          }}
+        />
+        A rule beneath this band
+      </label>
+
       {saved && <p className="text-xs text-success">Saved</p>}
       {error && <p className="text-xs text-destructive">{error}</p>}