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 (
{Array.from({ length: columns }, (_, column) => ( -
+
+ {columns === 2 && ( + + {column === 0 ? 'Left' : 'Right'} + + )} + {blocksIn(column).map((block) => ( onAdd(section, column)} > - {columns === 2 ? (column === 0 ? 'Add left' : 'Add right') : 'Add block'} + Add block
))}