App: phone/desktop list chrome from the approved mockup (slice 1)

kayg commented

2026-10-17 00:47:12 +00:00

Owner

Refs #469, closes #511. Slice 1 of bringing the approved chrome mockup (issue/469-chrome-mockup-3) into the app. Not merged; waits for kayg.

Ported

Lists (Journal, All notes, tags, Pinned, Trash; phone and desktop): group headings are H2s in the title's face, sentence case; no "Today" pill in the list rows or the note header; list/gallery as a springy morph (morphLayout), glass gallery cards (the shared dense step, no blur per card). The gallery keeps windowing: a band of two cards is one windowed row.
Phone: large title placed lower with the count as a subtitle; headings share the title's left edge, rows are indented 16 pt.
Phone top chrome (apps/web/src/chrome/): floating glass pills (back; header pill that fades in when the title scrolls away; ⋯ and, when a page registers one, Share in one grouped pill with no divider), icon sizes from the mockup (glyph.ts), a short progressive blur (packages/ui/src/chrome/ProgressiveBlur.svelte) that is display: none until content is under it. What ⋯ holds comes from a page-actions registry (pages.ts, plugins/), what the header says from a header-source registry (header/).
Glass and look: float tint 0.30 / 0.36, blur 20, sat 180 (already the shared values); dense step 0.48 (the mockup is finalising it); look v2 ink, paper, shadows and radii as tokens; line height 1.6 and body 17 px kept (not v2's dense scale).
Text: #506's commit cherry-picked (no global antialiased; light body 460, ui 440).
"+" raises the keyboard inside the tap (hidden-field hand-over), then the editor puts the caret in the title. Verified on the iPhone simulator.

Decisions to look at

Share is not drawn yet: sharing is out of scope, and no fake buttons. The pill is the round ⋯ alone until a page calls registerPageShare; the grouped styling is in place.
Pills are on the list screens and the Trash only. A note keeps its band and back button; the note's header pill needs the heading tracker for the editor's own DOM, which is a later slice. Places has no pills yet.
Light panels keep their old tint: v2's lighter-ink, more see-through panel failed the contrast spec (4.5:1 on dawn/day) so only v2's inks, paper, shadows and radii are taken in light. Dark panels take v2's.
Dark dim 30% -> 42%: on v2's nearly black paper a 30% dim was not a different colour (phone-edges needs ΔE > 2).
The header pill fades through its glass layer and words, not an opacity on the pill (an opacity around glass failed glass.spec's backdrop-root check).

Tests

New e2e/list-chrome.spec.ts (title, subtitle, H2, indent, no Today pill, pills and blur, header pill follows the list, gallery, + focus).
e2e/colors.ts: phone-bars and phone-edges parse oklab() (the paper now computes to it); no threshold changed.
contrast.spec hides the + button while measuring (a row scrolled under it measured the button).
chromium-390, chromium-1440, contrast: the full suite once, then the affected specs again at the final commit: all green. webkit-390 and webkit-1440: same; the only failures were a 30 s timeout of tree.spec Style sheet under host load (passes alone, in 10 s) and results-folder collisions from my own parallel runs (rerun green). Dev baseline passes touch-select, tree, bar-stays, backdrops, links, pwa-update on webkit.
bun run check: 0 errors, the same 12 warnings.

Screenshots and the perf table are on #511.

🤖 Generated with Claude Code

https://claude.ai/code/session_019QGa6qjALuHyi8H1naGp6b

Refs #469, closes #511. Slice 1 of bringing the approved chrome mockup (`issue/469-chrome-mockup-3`) into the app. Not merged; waits for kayg. ## Ported - **Lists** (Journal, All notes, tags, Pinned, Trash; phone and desktop): group headings are H2s in the title's face, sentence case; no "Today" pill in the list rows or the note header; list/gallery as a springy morph (`morphLayout`), glass gallery cards (the shared dense step, no blur per card). The gallery keeps windowing: a band of two cards is one windowed row. - **Phone**: large title placed lower with the count as a subtitle; headings share the title's left edge, rows are indented 16 pt. - **Phone top chrome** (`apps/web/src/chrome/`): floating glass pills (back; header pill that fades in when the title scrolls away; ⋯ and, when a page registers one, Share in one grouped pill with no divider), icon sizes from the mockup (`glyph.ts`), a short progressive blur (`packages/ui/src/chrome/ProgressiveBlur.svelte`) that is `display: none` until content is under it. What ⋯ holds comes from a page-actions registry (`pages.ts`, `plugins/`), what the header says from a header-source registry (`header/`). - **Glass and look**: float tint 0.30 / 0.36, blur 20, sat 180 (already the shared values); dense step 0.48 (the mockup is finalising it); look v2 ink, paper, shadows and radii as tokens; line height 1.6 and body 17 px kept (not v2's dense scale). - **Text**: #506's commit cherry-picked (no global antialiased; light body 460, ui 440). - **"+"** raises the keyboard inside the tap (hidden-field hand-over), then the editor puts the caret in the title. Verified on the iPhone simulator. ## Decisions to look at - **Share is not drawn yet**: sharing is out of scope, and no fake buttons. The pill is the round ⋯ alone until a page calls `registerPageShare`; the grouped styling is in place. - **Pills are on the list screens and the Trash only.** A note keeps its band and back button; the note's header pill needs the heading tracker for the editor's own DOM, which is a later slice. Places has no pills yet. - **Light panels keep their old tint**: v2's lighter-ink, more see-through panel failed the contrast spec (4.5:1 on dawn/day) so only v2's inks, paper, shadows and radii are taken in light. Dark panels take v2's. - **Dark dim 30% -> 42%**: on v2's nearly black paper a 30% dim was not a different colour (phone-edges needs ΔE > 2). - The header pill fades through its glass layer and words, not an opacity on the pill (an opacity around glass failed glass.spec's backdrop-root check). ## Tests - New `e2e/list-chrome.spec.ts` (title, subtitle, H2, indent, no Today pill, pills and blur, header pill follows the list, gallery, + focus). - `e2e/colors.ts`: phone-bars and phone-edges parse `oklab()` (the paper now computes to it); no threshold changed. - contrast.spec hides the + button while measuring (a row scrolled under it measured the button). - chromium-390, chromium-1440, contrast: the full suite once, then the affected specs again at the final commit: all green. webkit-390 and webkit-1440: same; the only failures were a 30 s timeout of `tree.spec` Style sheet under host load (passes alone, in 10 s) and results-folder collisions from my own parallel runs (rerun green). Dev baseline passes touch-select, tree, bar-stays, backdrops, links, pwa-update on webkit. - `bun run check`: 0 errors, the same 12 warnings. Screenshots and the perf table are on #511. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_019QGa6qjALuHyi8H1naGp6b

kayg added 6 commits

2026-10-17 00:47:12 +00:00

Text: the system's own font smoothing, and a heavier light body weight (#492 ) 5843b093ca

Drops the global -webkit-font-smoothing: antialiased (it thins text on macOS) and the dark-only resets it needed. Light --body-weight 410 -> 460, --ui-weight 420 -> 440; dark unchanged.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019QGa6qjALuHyi8H1naGp6b

Port the approved list chrome: lower large title with count subtitle, H2 group headings, indented rows, list/gallery morph, floating top pills with progressive blur, one glass material and look v2 tokens, + focuses the title (#469 , #511 ) e0fa954a41

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019QGa6qjALuHyi8H1naGp6b

Tests: the list chrome (title, headings, pills, gallery, + focus) (#469 , #511 ) de6e57b268

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019QGa6qjALuHyi8H1naGp6b

Fix: header pill fades without opacity around its glass; oklab paper in the edge tests; light panels keep their contrast (#469 , #511 ) e9980533a7

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019QGa6qjALuHyi8H1naGp6b

Fix: deeper dark dim for the nearly black paper; the pills test follows a list with enough rows (#469 , #511 ) cc2cdf658c

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019QGa6qjALuHyi8H1naGp6b

Test: the contrast measurement sees the glass under the + button, not the button (#469 , #511 )

CI / server (pull_request) Successful in 26s

Details

CI / rust (pull_request) Successful in 1m59s

Details

CI / web (pull_request) Failing after 51m32s

Details

61faad656f

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019QGa6qjALuHyi8H1naGp6b

kayg referenced this pull request

2026-10-17 03:40:01 +00:00

Swipe gestures on rows everywhere: research, then grill #400

kayg referenced this pull request

2026-10-17 06:17:35 +00:00

App: phone/desktop list chrome from the approved mockup (slice 1) #522

kayg commented

2026-10-17 06:17:36 +00:00

Author

Owner

Replaced by #522: rebased onto train v (dev + #518 + #519, with #513 and #520). Closing.

kayg closed this pull request

2026-10-17 06:17:37 +00:00

kayg referenced this pull request

2026-10-17 06:17:37 +00:00

App: phone/desktop list chrome from the approved mockup (slice 1) #511

CI / server (pull_request) Successful in 26s

Details

CI / rust (pull_request) Successful in 1m59s

Details

CI / web (pull_request) Failing after 51m32s

Details

Pull request closed

This pull request cannot be reopened because the branch was deleted.

Rows
Columns

App: phone/desktop list chrome from the approved mockup (slice 1) #516

Ported

Decisions to look at

Tests

Pull request closed