kayg/calternal

Watch

Fork 0

CHROME: no heading bars anywhere; floating glass buttons + progressive blur (Quick Look first, then every surface) #577

New issue

Open

opened 2026-10-01 05:29:12 +00:00 by kayg · 2 comments

kayg commented

2026-10-01 05:29:12 +00:00

Owner

Owner rule (2026-10-01): "please no heading bars like these ever! only floating buttons and progressive blur! apple style!"

Screenshot: the Quick Look viewer shows an opaque header bar across the top: file icon, "4-day-training.pdf", "3 of 614 · 5.5 MB · 2026-09-28" on the left, and a pill of ‹ › link download info ✕ on the right, on a solid band above the document.
Rule (add to DESIGN §34 chrome and to CONTEXT): no surface may have a heading bar, band or strip. Titles and actions float over the content as glass pills/buttons, and the content scrolls underneath with the shared ProgressiveBlur scroll-edge effect (as in iOS 26/visionOS viewers: Photos, Files Quick Look).
Fix:

Quick Look (packages/ui/src/components/viewer/QuickLook.svelte): the content (document/photo/video) goes edge to edge. The title + meta become a floating glass pill at the top-leading corner, and the navigation and actions a floating pill group at the top-trailing corner. The top edge uses ProgressiveBlur only, with no band. The pills auto-hide after inactivity on touch/pointer idle (Apple Photos behaviour) and stay for keyboard focus.
Sweep: find every other heading bar/band (sheet headers, dialog headers, the composer, inspector, settings sheets, the photo viewer, the PDF viewer) and convert them in the shared surface primitives (OverlaySurface/PopoverSurface/FloatingSurface), not per screen. List every surface you changed, with before/after screenshots.
A guard check: a lint/test that fails if a surface header uses a solid or semi-opaque background band (tokens-only rule, #287).
Web gates + the viewer e2e. Screenshots at 390/820/1440 in both themes for Quick Look on a PDF, a photo and a video.

## Owner rule (2026-10-01): "please no heading bars like these ever! only floating buttons and progressive blur! apple style!" Screenshot: the Quick Look viewer shows an opaque **header bar** across the top: file icon, "4-day-training.pdf", "3 of 614 · 5.5 MB · 2026-09-28" on the left, and a pill of ‹ › link download info ✕ on the right, on a solid band above the document. **Rule (add to DESIGN §34 chrome and to CONTEXT):** no surface may have a heading bar, band or strip. Titles and actions **float** over the content as glass pills/buttons, and the content scrolls underneath with the shared **ProgressiveBlur** scroll-edge effect (as in iOS 26/visionOS viewers: Photos, Files Quick Look). **Fix:** 1. Quick Look (`packages/ui/src/components/viewer/QuickLook.svelte`): the content (document/photo/video) goes edge to edge. The title + meta become a floating glass pill at the top-leading corner, and the navigation and actions a floating pill group at the top-trailing corner. The top edge uses ProgressiveBlur only, with no band. The pills auto-hide after inactivity on touch/pointer idle (Apple Photos behaviour) and stay for keyboard focus. 2. **Sweep:** find every other heading bar/band (sheet headers, dialog headers, the composer, inspector, settings sheets, the photo viewer, the PDF viewer) and convert them in the **shared** surface primitives (OverlaySurface/PopoverSurface/FloatingSurface), not per screen. List every surface you changed, with before/after screenshots. 3. A guard check: a lint/test that fails if a surface header uses a solid or semi-opaque background band (tokens-only rule, #287). Web gates + the viewer e2e. Screenshots at 390/820/1440 in both themes for Quick Look on a PDF, a photo and a video.

kayg commented

2026-10-01 05:31:13 +00:00

Author

Owner

Owner (2026-10-01): "code reuse please!" The floating chrome already exists. The main page header is exactly this pattern: the title floats top-left, the action pills float top-right, and content scrolls under ProgressiveBlur. Build no new header. Reuse:

packages/ui/src/components/ModeHeader.svelte (floating title + actions layout),
Pill.svelte / PillGroup.svelte / PrimaryPill.svelte (the glass button pills, with the warm tooltips),
ProgressiveBlur.svelte (the scroll-edge fade).

Quick Look, sheets, dialogs, the composer and the inspector render their title and actions through the same component (extend ModeHeader with a surface variant if a prop is needed; no copy). Delete each surface's own header markup and CSS as you convert it. The final report must show the net lines removed. A duplicated header is a defect (reuse gate).

**Owner (2026-10-01): "code reuse please!"** The floating chrome already exists. The main page header is exactly this pattern: the title floats top-left, the action pills float top-right, and content scrolls under ProgressiveBlur. **Build no new header.** Reuse: - `packages/ui/src/components/ModeHeader.svelte` (floating title + actions layout), - `Pill.svelte` / `PillGroup.svelte` / `PrimaryPill.svelte` (the glass button pills, with the warm tooltips), - `ProgressiveBlur.svelte` (the scroll-edge fade). Quick Look, sheets, dialogs, the composer and the inspector render their title and actions **through the same component** (extend ModeHeader with a `surface` variant if a prop is needed; no copy). Delete each surface's own header markup and CSS as you convert it. The final report must show the net lines removed. A duplicated header is a defect (reuse gate).

kayg referenced this issue

2026-10-01 06:31:27 +00:00

TOP ROW: Finder-style contextual toolbar for every Tab: back/forward, view modes, Sort & Group, action capsule, expanding search (2/3) #582

kayg referenced this issue

2026-10-01 06:31:28 +00:00

INSPECTOR in the Tab Bar morph: Space/⌘I, follows selection like Finder, inline editing, + tag pill, linked notes (3/3) #583

kayg referenced this issue

2026-10-02 13:11:25 +00:00

REUSE: give the progressive edge blur filter stack one owner #799

kayg commented

2026-10-02 17:20:25 +00:00

Author

Owner

Evidence from Chrome audit #862 (2026-10-02):

packages/ui/src/components/OverlaySurface.svelte:769-799,893-902 renders a full-width sheet title row with optional leading and trailing controls above the scrolling body.
Quick Look also renders a separate title and actions row in normal flow: packages/ui/src/components/viewer/QuickLook.svelte:190-209,303-318.
The Share sheet adds its own title and Close row inside the sheet: apps/web/src/lib/files/ShareDialog.svelte:292-297,472-477.
The Notifications panel uses a sticky heading row and adds a chrome background and border after scrolling: apps/web/src/lib/notifications/InboxPanel.svelte:248-251,420-438.

These rows remain after the DESIGN §34 decision. The shared surface should keep titles and actions as floating glass pills over the content, without a full-width heading row.

Evidence from Chrome audit #862 (2026-10-02): - `packages/ui/src/components/OverlaySurface.svelte:769-799,893-902` renders a full-width sheet title row with optional leading and trailing controls above the scrolling body. - Quick Look also renders a separate title and actions row in normal flow: `packages/ui/src/components/viewer/QuickLook.svelte:190-209,303-318`. - The Share sheet adds its own title and Close row inside the sheet: `apps/web/src/lib/files/ShareDialog.svelte:292-297,472-477`. - The Notifications panel uses a sticky heading row and adds a chrome background and border after scrolling: `apps/web/src/lib/notifications/InboxPanel.svelte:248-251,420-438`. These rows remain after the DESIGN §34 decision. The shared surface should keep titles and actions as floating glass pills over the content, without a full-width heading row.

kayg referenced this issue

2026-10-02 17:22:13 +00:00

Audit: chrome rules (one bar, no right sidebar, tooltips with shortcuts, icon tray) #862

kayg referenced this issue

2026-10-03 12:51:31 +00:00

Issue hygiene sweep 2026-10-03 #1008

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

kayg/calternal#577

No description provided.

Rows
Columns