max / goingson

Say how a table's columns are described The charter had row primitives and no columns, which is most of what a row is. It names the two generated files now, the col- class contract, the two ways of adding a column that are banned and what each of them broke, and the crate's own decision not to render webview rows. The event row line was stale in a way this section makes load-bearing: it said one class and an inline builder, and there are two tables with a modifier each.

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

Author: Max Johnson <me@maxj.phd> · 2026-07-30 16:06 UTC

Signed with PGP, not checked

Commit: 5aa314285d40d66cce3ab352e2eeb06a545bc440

Parent: 86f88e7

1 file changed, +33 insertions, -1 deletion

M docs/design-system.md +33 -1

			@@ -101,11 +101,43 @@
101	101		\| Kind \| Canonical class \| Render helper (today) \|
102	102		\|---\|---\|---\|
103	103		\| Task row \| `.row.task-row` (in `.task-table`) \| `renderTaskRow(t, index)`, `tasks-render.js` \|
104		-	\| Event row \| `.row.event-row-virtual` (in `.event-table-virtual`) \| inline in `events.js` \|
	104	+	\| Event row \| `.row.event-row-virtual.event-upcoming` or `.event-recurring` \| `renderEventRow(e, index, isPast, isRecurring)`, `events.js` \|
105	105		\| Project card \| `.card` (in `.cards-grid`) \| `renderProjectCard(p)`, `projects.js` \|
106	106		\| Contact card \| `.card.contact-card` \| inline in `contacts-render.js` \|
107	107		\| Email row \| `.row.email-item` (in `.email-list`) \| `renderEmailItem(thread)`, `emails-render.js` \|
108	108
	109	+	### Table columns: `col-<name>` and the column description
	110	+
	111	+	Three tables have columns described in `src-tauri/build.rs`: the task table and the
	112	+	two event tables (upcoming and recurring, which are two tables and not one). A
	113	+	column says what it is worth (`Essential`, `Secondary`, `Optional`), never where it
	114	+	sits. `build.rs` turns each description into two generated files:
	115	+
	116	+	- `css/tables.css`: the `grid-template-columns` track list per breakpoint, plus a
	117	+	`display: none` on each dropped column by its own class. Both halves come out of
	118	+	one call, so the tracks and the hiding cannot disagree.
	119	+	- `tables.columns.json`: the same column names, for the tests.
	120	+
	121	+	Every cell wears `col-<name>`, which is what makes a column addressable without
	122	+	counting. Add a column by adding it to the description, then giving the header in
	123	+	`index.html` and the row builder a cell with its `col-` class. The suite in
	124	+	`js/tests/run.js` fails if either one disagrees with the description in content or
	125	+	in order.
	126	+
	127	+	Never hide a column with `nth-child`, and never write a track list by hand. Both
	128	+	were how the mobile task rule came to declare four tracks for three surviving cells,
	129	+	and how the upcoming events row rendered six cells into a five-track grid with every
	130	+	cell one column left of its label.
	131	+
	132	+	The rows themselves stay hand-built in JS. makeover-webview can emit cell containers
	133	+	(`list::cells_html`) and deliberately has no webview consumer: the virtual scroller
	134	+	calls its row builder synchronously while scrolling, so reaching Rust from there
	135	+	would put an IPC round trip in a 60Hz loop. GO takes the stylesheet half and the
	136	+	`col-` vocabulary, and nothing else.
	137	+
	138	+	Per-cell classes (`.task-project`, `.event-cell-time`) still carry padding, alignment
	139	+	and colour. They are not the column; `col-<name>` is.
	140	+
109	141		### Hover-revealed row actions: `.row` + `.row-actions`
110	142		Both classes are generated (`layout.css`, makeover-layout `RowPart`). `.row-actions`
111	143		rests at `opacity: 0` with `pointer-events: none`; `.row:hover` and `.row:focus-within`