From a0720b5160bbe9b30eebcdd6e32a37e9a3998f4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Fri, 4 Sep 2026 18:18:51 +0100
Subject: [PATCH] name the columns, not the buttons

A two-column band listed its blocks unlabelled and put the side on the add
buttons. A band whose only block was on the left therefore read as a band with
nothing on the left and two ways to fix it.

The side belongs on the group, which is the thing that has one. Left and Right
head their own lists behind a rule; the buttons say what they do.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 web/sections/BandBlocks.tsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/web/sections/BandBlocks.tsx b/web/sections/BandBlocks.tsx
index 5f601d6..a44408d 100644
--- a/web/sections/BandBlocks.tsx
+++ b/web/sections/BandBlocks.tsx
@@ -18,8 +18,14 @@ import type { CanvasComponent, CanvasSection } from '../canvas';
  * ── Columns, because adding needs one ──
  *
  * A block goes IN a column, so a flat list cannot express adding one. A one-column band shows a single
- * button and never has to ask a question it has no answer to; a two-column band shows Add left and Add
- * right.
+ * button and never has to ask a question it has no answer to.
+ *
+ * A two-column band NAMES its columns. It used to leave them unlabelled and put the side on the
+ * buttons — "Add left", "Add right" — and that reads as a flat list of blocks with two odd buttons
+ * under it: a band whose only block was on the left looked like a band with nothing on the left and
+ * two ways to fix it. The side belongs on the GROUP, which is the thing that has one; the buttons then
+ * say what they do, and an empty column is visible as an empty column rather than inferred from the
+ * absence of something.
  *
  * ── Reorder is within a column ──
  *
@@ -80,7 +86,18 @@ export const BandBlocks = ({
   return (
     <div className="flex flex-col gap-1">
       {Array.from({ length: columns }, (_, column) => (
-        <div key={column} className="flex flex-col gap-0.5">
+        <div
+          key={column}
+          // Indented behind a rule when there are two, so where one column ends is something you see
+          // rather than something you count.
+          className={`flex flex-col gap-0.5 ${columns === 2 ? 'border-l border-border/60 pl-1.5' : ''}`}
+        >
+          {columns === 2 && (
+            <span className="px-1 pt-0.5 text-[10px] font-medium tracking-wide text-muted-foreground/60 uppercase">
+              {column === 0 ? 'Left' : 'Right'}
+            </span>
+          )}
+
           {blocksIn(column).map((block) => (
             <span
               key={block.id}
@@ -131,7 +148,7 @@ export const BandBlocks = ({
             onClick={() => onAdd(section, column)}
           >
             <Plus className="size-3" />
-            {columns === 2 ? (column === 0 ? 'Add left' : 'Add right') : 'Add block'}
+            Add block
           </Button>
         </div>
       ))}