#311 File-browser redesign (PR1): new look, multi-select, grid view, storage meter #312

Merged

Cordy merged 16 commits from feat/files-redesign into main

2026-08-25 21:21:30 +00:00

Cordy commented

2026-08-25 21:18:25 +00:00

Owner

First and largest slice of the Claude Design file-browser redesign (epic #311). Frontend-only, no backend change — ships the new visual language plus the two client-side features the mockup adds.

What changed (web/static/index.html)

New token/theme system (--paper/--ink/--accent/--rule/--sunk/…) added alongside the existing --glacier/--lichen/--slate palette (still used by the preview/admin/dialog panels), themed for light + dark, with glacier as the existing default accent (moss/ember/graphite via the existing pref). No global token values changed, so untouched panels are unaffected.
Restyled header (.top), sidebar (.navscroll + pinned .quota storage meter), toolbar (+ list/grid toggle), breadcrumb, and a real empty state.
renderRows rewritten from a <table> to CSS-grid .lr rows (icon, two-line name, size, modified, quick actions). Reuses iconFor()/the icon system verbatim; filenames escaped via the existing pvEsc (XSS-safe). Preserves folder-navigate, file-preview (pvsel), favstar, subpath, drag-drop, and dataset.name for the search filter.
Multi-select: a Set keyed by path with a single applySel() writer that marks both row and grid tile; a selection bar with bulk Download (files, looped) and bulk Delete (one confirm, loops the existing DELETE /api/v1/files), plus Clear. Clears on navigation.
Grid view: list/grid toggle persisted to cairn-prefs.gridView.
Sidebar storage meter: reuses /api/v1/quota (the same data the avatar menu shows).

#app deliberately stays flex (it holds the preview panel as a flex child). Every id, data-i18n key, event binding, and localStorage["cairn-prefs"] value is preserved; the admin rail + admin view are untouched.

Verification (in the port workflow, now removed)

node --check on all inline scripts: 0 syntax errors.
Differential jsdom load-test: loaded both the current and new index.html under fetch/matchMedia stubs — the new file introduces no new load-time errors (the whole init runs, exercising the new render/selection code).
Hooks grep: every required id + data-i18n key present; exactly one renderRows; old <table> gone.

⚠️ I can't render the embedded UI myself — please eyeball it on the dogfood. Likely polish spots: brand mark, exact spacings, dark-mode contrast.

Deferred (still in #311, need the backend)

PR2 — extend GET /api/v1/files with owner, folder itemCount, and shared/link/hold/lock status per item.
PR3 — owner column + status chips consuming PR2 (the CSS + hidden cells are already in place; personal space hides Owner).
Sortable column headers and the optional Ebony theme.

First and largest slice of the Claude Design file-browser redesign (epic #311). Frontend-only, no backend change — ships the new visual language plus the two client-side features the mockup adds. ## What changed (web/static/index.html) - **New token/theme system** (`--paper/--ink/--accent/--rule/--sunk/…`) added alongside the existing `--glacier/--lichen/--slate` palette (still used by the preview/admin/dialog panels), themed for light + dark, with glacier as the existing default accent (moss/ember/graphite via the existing pref). No global token values changed, so untouched panels are unaffected. - **Restyled** header (`.top`), sidebar (`.navscroll` + pinned `.quota` storage meter), toolbar (+ list/grid toggle), breadcrumb, and a real empty state. - **`renderRows` rewritten** from a `<table>` to CSS-grid `.lr` rows (icon, two-line name, size, modified, quick actions). Reuses `iconFor()`/the icon system verbatim; filenames escaped via the existing `pvEsc` (XSS-safe). Preserves folder-navigate, file-preview (`pvsel`), favstar, subpath, drag-drop, and `dataset.name` for the search filter. - **Multi-select**: a `Set` keyed by path with a single `applySel()` writer that marks both row and grid tile; a selection bar with **bulk Download** (files, looped) and **bulk Delete** (one confirm, loops the existing `DELETE /api/v1/files`), plus Clear. Clears on navigation. - **Grid view**: list/grid toggle persisted to `cairn-prefs.gridView`. - **Sidebar storage meter**: reuses `/api/v1/quota` (the same data the avatar menu shows). `#app` deliberately stays flex (it holds the preview panel as a flex child). Every id, `data-i18n` key, event binding, and `localStorage["cairn-prefs"]` value is preserved; the admin rail + admin view are untouched. ## Verification (in the port workflow, now removed) - `node --check` on all inline scripts: **0 syntax errors**. - **Differential jsdom load-test**: loaded both the current and new `index.html` under fetch/matchMedia stubs — the new file introduces **no new load-time errors** (the whole init runs, exercising the new render/selection code). - Hooks grep: every required id + `data-i18n` key present; exactly one `renderRows`; old `<table>` gone. ⚠️ **I can't render the embedded UI myself** — please eyeball it on the dogfood. Likely polish spots: brand mark, exact spacings, dark-mode contrast. ## Deferred (still in #311, need the backend) - **PR2** — extend `GET /api/v1/files` with `owner`, folder `itemCount`, and `shared/link/hold/lock` status per item. - **PR3** — owner column + status chips consuming PR2 (the CSS + hidden cells are already in place; personal space hides Owner). - Sortable column headers and the optional Ebony theme.

Cordy added 16 commits

2026-08-25 21:18:27 +00:00