feat(redesign): preview panel behaviour + container-query columns #324

Merged

Cordy merged 6 commits from feat/redesign3e into main

2026-08-27 15:40:20 +00:00

Cordy commented

2026-08-27 15:37:57 +00:00

Owner

Redesign phase 3, slice 5 — the last one from the files-mockup handoff.

Bug found while porting

pvsel (the "you are previewing this row" marker) was styled only as tr.pvsel > td / tr.pvsel > td:first-child. The redesign replaced the <table> with .lr grid rows, so those selectors have matched nothing since — the previewed row has been unmarked in the shipped app. Now .lr.pvsel (left accent bar + sunk plate) and .tile.pvsel (inset accent ring), kept visually distinct from selection: looking at vs in the set Delete applies to.

Behaviour

Pointer events with capture replace the document-level mouse handlers: the divider now works with touch and pen, and — because capture routes every move/up to the divider itself — the PDF-iframe swallowing that v0.6.67 patched around can no longer happen. This supersedes that patch; the pointer-events: none workaround is removed as agreed.
Keyboard resize: divider is a real role="separator", tabindex="0" — ←/→ resize (Shift for coarse), Home restores default; double-click also resets.
The cap moves to what the panel takes: pvMax() lets the panel grow only until the list hits LIST_MIN (360px), with 70% viewport as an upper bound. The old flat 70% could squeeze the list to ~100px, where no column arrangement helps.
Re-clamp on window resize — previously pvApplyWidth() ran only on open, so a panel sized on a wide window kept its pixels after the window shrank.
pvMark() is the single writer, applied to both trees and called from renderRows(), so the marker survives a sort, a reload and a list↔grid switch (the old loop walked #rows children only).
↑/↓ steps through files in the open preview, skipping folders, ignoring keystrokes in inputs/dialogs.

Columns

The row grid's breakpoints move from @media to @container list on main (820/560/400px of the list's own width). The preview panel takes width away without the viewport changing, so media queries never fired and the whole shortfall landed on the one flexible track — the filename shrank toward zero while fixed columns kept their pixels. Also adds the name's 7ch floor, lets chips shrink, and collapses chips to their glyph under 400px so status is never what disappears.

Verification

node --check all script blocks; nine anchored splices, all count=1; zero legacy tr.pvsel rules remain. Operator check: open a PDF preview, drag the divider across it and release (should stop cleanly), tab to the divider and use arrows, narrow the window with the panel open, sort with a preview open.

Redesign phase 3, slice 5 — the last one from the files-mockup handoff. ## Bug found while porting `pvsel` (the "you are previewing this row" marker) was styled **only** as `tr.pvsel > td` / `tr.pvsel > td:first-child`. The redesign replaced the `<table>` with `.lr` grid rows, so those selectors have matched nothing since — the previewed row has been unmarked in the shipped app. Now `.lr.pvsel` (left accent bar + sunk plate) and `.tile.pvsel` (inset accent ring), kept visually distinct from selection: *looking at* vs *in the set Delete applies to*. ## Behaviour - **Pointer events with capture** replace the document-level mouse handlers: the divider now works with touch and pen, and — because capture routes every move/up to the divider itself — the PDF-iframe swallowing that v0.6.67 patched around can no longer happen. **This supersedes that patch**; the `pointer-events: none` workaround is removed as agreed. - **Keyboard resize**: divider is a real `role="separator"`, `tabindex="0"` — ←/→ resize (Shift for coarse), Home restores default; double-click also resets. - **The cap moves to what the panel takes**: `pvMax()` lets the panel grow only until the list hits `LIST_MIN` (360px), with 70% viewport as an upper bound. The old flat 70% could squeeze the list to ~100px, where no column arrangement helps. - **Re-clamp on window resize** — previously `pvApplyWidth()` ran only on open, so a panel sized on a wide window kept its pixels after the window shrank. - **`pvMark()` is the single writer**, applied to both trees and called from `renderRows()`, so the marker survives a sort, a reload and a list↔grid switch (the old loop walked `#rows` children only). - **↑/↓ steps through files** in the open preview, skipping folders, ignoring keystrokes in inputs/dialogs. ## Columns The row grid's breakpoints move from `@media` to **`@container list`** on `main` (820/560/400px of the list's own width). The preview panel takes width away *without the viewport changing*, so media queries never fired and the whole shortfall landed on the one flexible track — the filename shrank toward zero while fixed columns kept their pixels. Also adds the name's `7ch` floor, lets chips shrink, and collapses chips to their glyph under 400px so status is never what disappears. ## Verification `node --check` all script blocks; nine anchored splices, all count=1; zero legacy `tr.pvsel` rules remain. Operator check: open a PDF preview, drag the divider across it and release (should stop cleanly), tab to the divider and use arrows, narrow the window with the panel open, sort with a preview open.

Cordy added 6 commits

2026-08-27 15:37:58 +00:00