Toolbar buttons without their pill group (Settings sheet header, Notes sidebar) #1085

Open
opened 2026-10-05 03:23:54 +00:00 by kayg · 5 comments
Owner

Owner report (2026-10-05 08:44–08:49 IST, iPhone, production 269b1b51b, dark theme). Screenshots: owner's four phone captures (Day view during horizontal swipe, Day view at rest, Settings → Account sheet, Agenda).

"Look at the top right buttons, they're just there without a toolbar/pill. That's the case in the notes view sidebar too."

Action buttons (Copy link, ⋯) appear as bare circles without the shared toolbar pill group in: the Settings sheet header (link button alone at top right), and the Notes sidebar header. Every toolbar cluster uses the same glass pill group as the Calendar header (Copy link + ⋯ in one pill), with warm tooltips and shortcuts (CLAUDE.md Chrome rules).

## Owner report (2026-10-05 08:44–08:49 IST, iPhone, production 269b1b51b, dark theme). Screenshots: owner's four phone captures (Day view during horizontal swipe, Day view at rest, Settings → Account sheet, Agenda). "Look at the top right buttons, they're just there without a toolbar/pill. That's the case in the notes view sidebar too." Action buttons (Copy link, ⋯) appear as bare circles without the shared toolbar pill group in: the Settings sheet header (link button alone at top right), and the Notes sidebar header. Every toolbar cluster uses the same glass pill group as the Calendar header (Copy link + ⋯ in one pill), with warm tooltips and shortcuts (CLAUDE.md Chrome rules).
Author
Owner

Starting this toolbar audit in job/mchrome-1084 at 269b1b51b (origin/dev / production). I am checking the existing PillGroup and header owners first, then will cover Settings, Notes, and other bare action clusters found in the touched chrome.

Starting this toolbar audit in job/mchrome-1084 at 269b1b51b (origin/dev / production). I am checking the existing PillGroup and header owners first, then will cover Settings, Notes, and other bare action clusters found in the touched chrome.
Author
Owner

Finding: Settings uses separate one-button PillGroups for Back and Copy link. Notes already groups New note and More, but its LinkedHeading Copy link remains outside that action island. I am moving both Copy link actions into their existing shared PillGroups and keeping the heading's stable deep link and context-menu action.

Finding: Settings uses separate one-button PillGroups for Back and Copy link. Notes already groups New note and More, but its LinkedHeading Copy link remains outside that action island. I am moving both Copy link actions into their existing shared PillGroups and keeping the heading's stable deep link and context-menu action.
Author
Owner

Final report

Implemented with job/mchrome-1084 from dev at 269b1b51b. Head: 689069950b89b02768ea19c203e452184f16478d.

Settings Back and Copy link now share one glass pill group. In Notes, New, Copy link and More share one action island, and the duplicate inline Copy link is hidden. This closes the extra-pills and duplicate-link gaps while retaining shared touch targets, labels, keyboard access and Copy link behavior.

Focused component tests and the production WebKit review passed. The Notes perf-VM run (lock held) verified all three toolbar buttons in one group. Empty-Home opens: p50/p95 644 / 798.6 ms, CPU 31.53 s, mean/peak RSS 607,542,126 / 629,837,824 bytes. 500-Note burst: p50/p95 601.9 / 742.1 ms, CPU 80.62 s, mean/peak RSS 658,972,672 / 702,558,208 bytes. No baseline exists for this action; these are reference numbers only.

Screenshots are from the real production build in WebKit with macOS platform emulation, at 390, 430, 820 and 1440 px in light and dark:

Capture Before After
notes-sidebar-1440-dark before after
notes-sidebar-1440-light before after
notes-sidebar-390-dark before after
notes-sidebar-390-light before after
notes-sidebar-430-dark before after
notes-sidebar-430-light before after
notes-sidebar-820-dark before after
notes-sidebar-820-light before after

No UX gaps remain for the Settings or Notes action groups. No Rust code changed. READY FOR MERGE: yes.

## Final report Implemented with `job/mchrome-1084` from `dev` at `269b1b51b`. Head: `689069950b89b02768ea19c203e452184f16478d`. Settings Back and Copy link now share one glass pill group. In Notes, New, Copy link and More share one action island, and the duplicate inline Copy link is hidden. This closes the extra-pills and duplicate-link gaps while retaining shared touch targets, labels, keyboard access and Copy link behavior. Focused component tests and the production WebKit review passed. The Notes perf-VM run (lock held) verified all three toolbar buttons in one group. Empty-Home opens: p50/p95 `644 / 798.6 ms`, CPU `31.53 s`, mean/peak RSS `607,542,126 / 629,837,824 bytes`. 500-Note burst: p50/p95 `601.9 / 742.1 ms`, CPU `80.62 s`, mean/peak RSS `658,972,672 / 702,558,208 bytes`. No baseline exists for this action; these are reference numbers only. Screenshots are from the real production build in WebKit with macOS platform emulation, at 390, 430, 820 and 1440 px in light and dark: | Capture | Before | After | | --- | --- | --- | | `notes-sidebar-1440-dark` | [before](https://git.kayg.org/attachments/f77fc888-3152-4178-a3f6-50c8bddd0722) | [after](https://git.kayg.org/attachments/fc9c186e-bb64-4b2c-a204-2e26ab40c6c1) | | `notes-sidebar-1440-light` | [before](https://git.kayg.org/attachments/405f12f4-5032-4d5d-8189-8f675febf141) | [after](https://git.kayg.org/attachments/c58e95f3-1373-4e62-9a2c-c73d0ca92a72) | | `notes-sidebar-390-dark` | [before](https://git.kayg.org/attachments/2c57620f-9d50-4411-a7c1-9a7a68b02005) | [after](https://git.kayg.org/attachments/70f6b21a-1492-4158-90ae-6b86ce98e540) | | `notes-sidebar-390-light` | [before](https://git.kayg.org/attachments/e0b47dbc-d3cc-440a-8d6f-86e8eb66fb33) | [after](https://git.kayg.org/attachments/fe38383a-0f85-4b60-bc1a-23a06a6b6481) | | `notes-sidebar-430-dark` | [before](https://git.kayg.org/attachments/366fa607-06c6-421b-9781-e1f3985f319d) | [after](https://git.kayg.org/attachments/d5fc201e-d580-421c-b492-06fc3880ea9c) | | `notes-sidebar-430-light` | [before](https://git.kayg.org/attachments/08604134-ba2c-4ceb-b869-99d0fd71e165) | [after](https://git.kayg.org/attachments/28db44c8-126e-49d3-874f-a6712edfa649) | | `notes-sidebar-820-dark` | [before](https://git.kayg.org/attachments/36824c34-b0c2-4ce5-9c00-e30f0b10d1aa) | [after](https://git.kayg.org/attachments/1c2232e8-23fc-48a4-8ca7-edb53cee365b) | | `notes-sidebar-820-light` | [before](https://git.kayg.org/attachments/2ad84766-0742-4a83-8bc3-8d0fc715a6e3) | [after](https://git.kayg.org/attachments/5abd2ad2-a87e-4118-8696-50d2b1519df1) | No UX gaps remain for the Settings or Notes action groups. No Rust code changed. **READY FOR MERGE: yes.**
Author
Owner

Final report update

Final head: 4cae714b169302faebfe0030f72e8c24794d24d1 on job/mchrome-1084, based on dev at 269b1b51b. The final scope audit found a third bare header cluster in the shared Inspector: Copy link and Close. It now uses one accessible PillGroup; when no Copy link exists, Close uses the shared single-action pill. This applies to the phone sheet and desktop popover. The Settings Back/Copy link and Notes New/Copy link/More groups remain in place.

UX gaps closed

  • Inspector Copy link and Close share one action island when both actions exist.
  • Inspector uses the shared single-action form when only Close exists.
  • A real Calendar Log opens the Inspector through the Day preview; the production WebKit check asserts both controls are inside the same group.

UX gaps left

  • None for the three audited action groups. The separate Calendar mid-swipe screenshot caveat is recorded on #1082.

Screenshots

These are real production WebKit screenshots with macOS platform emulation. They cover Settings, Notes and Calendar Inspector at 390, 430, 820 and 1440 px in light and dark. Settings includes collapsed-title states. The matrix includes all earlier Settings/Notes captures and the new Inspector before/after captures.

Settings sheet header screenshots, cross-linked from #1084:

Capture Before After
settings-account-1440-dark before after
settings-account-1440-light before after
settings-account-390-dark before after
settings-account-390-light before after
settings-account-430-dark before after
settings-account-430-light before after
settings-account-820-dark before after
settings-account-820-light before after
settings-account-collapsed-390-dark before after
settings-account-collapsed-390-light before after
settings-account-collapsed-430-dark before after
settings-account-collapsed-430-light before after
settings-account-collapsed-820-dark before after
settings-account-collapsed-820-light before after

Notes sidebar and Inspector screenshots:

Capture Before After
calendar-day-inspector-1440-dark before after
calendar-day-inspector-1440-light before after
calendar-day-inspector-390-dark before after
calendar-day-inspector-390-light before after
calendar-day-inspector-430-dark before after
calendar-day-inspector-430-light before after
calendar-day-inspector-820-dark before after
calendar-day-inspector-820-light before after
notes-sidebar-1440-dark before after
notes-sidebar-1440-light before after
notes-sidebar-390-dark before after
notes-sidebar-390-light before after
notes-sidebar-430-dark before after
notes-sidebar-430-light before after
notes-sidebar-820-dark before after
notes-sidebar-820-light before after

Performance

The locked perf-VM Notes run verified three Notes toolbar action buttons in one group. Empty-Home opens: p50/p95 644 / 798.6 ms, CPU 31.53 s, mean/peak RSS 607,542,126 / 629,837,824 bytes. With 500 real Notes and a 50-open burst: p50/p95 601.9 / 742.1 ms, CPU 80.62 s, mean/peak RSS 658,972,672 / 702,558,208 bytes. No matching baseline exists, so these numbers are a feature reference only.

Final gates

bun run check:

perf-lint: PASS; 0 violations; 18996 scoped exceptions
User browser caches use userStorage; only documented device/public-link exceptions remain.
Glass alpha, blur and backdrop-filter roles use packages/ui/src/tokens.css.
Text sizes and UI shape values use shared role tokens.
Keyboard focus rings use the shared focus tokens.
UI transitions and animation options use shared motion tokens or documented exceptions.
svelte-check found 0 errors and 4 warnings in 3 files

Focused Vitest:

Test Files  2 passed (2)
      Tests  26 passed (26)

Production build:

Compressed 534 static variants; saved 9833416 bytes.

Production WebKit review (Mac platform emulation, 390/430/820/1440 px, light/dark):

PASS WebKit production review inspector-after: 4 widths × 2 themes

No Rust source changed, so Rust gates did not apply. cargo clean completed with Removed 0 files.

DESIGN.md §34 was already clear; the shared PillGroup is reused for each bare header cluster found. No Rust source changed. READY FOR MERGE: yes.

## Final report update Final head: `4cae714b169302faebfe0030f72e8c24794d24d1` on `job/mchrome-1084`, based on `dev` at `269b1b51b`. The final scope audit found a third bare header cluster in the shared Inspector: Copy link and Close. It now uses one accessible `PillGroup`; when no Copy link exists, Close uses the shared single-action pill. This applies to the phone sheet and desktop popover. The Settings Back/Copy link and Notes New/Copy link/More groups remain in place. ### UX gaps closed - Inspector Copy link and Close share one action island when both actions exist. - Inspector uses the shared single-action form when only Close exists. - A real Calendar Log opens the Inspector through the Day preview; the production WebKit check asserts both controls are inside the same group. ### UX gaps left - None for the three audited action groups. The separate Calendar mid-swipe screenshot caveat is recorded on #1082. ### Screenshots These are real production WebKit screenshots with macOS platform emulation. They cover Settings, Notes and Calendar Inspector at 390, 430, 820 and 1440 px in light and dark. Settings includes collapsed-title states. The matrix includes all earlier Settings/Notes captures and the new Inspector before/after captures. Settings sheet header screenshots, cross-linked from #1084: | Capture | Before | After | | --- | --- | --- | | `settings-account-1440-dark` | [before](https://git.kayg.org/attachments/425b6f42-babf-4a18-b2f1-71b5c55dc77e) | [after](https://git.kayg.org/attachments/42e560e9-294a-48cb-82b4-77ac293b2f73) | | `settings-account-1440-light` | [before](https://git.kayg.org/attachments/89f487ef-9393-4c94-ad44-3d990aba22ad) | [after](https://git.kayg.org/attachments/4921a1e2-ab9a-41a1-8b59-271ac5afe165) | | `settings-account-390-dark` | [before](https://git.kayg.org/attachments/03827257-a713-41d7-89fe-0265ebf306a2) | [after](https://git.kayg.org/attachments/5e918aa5-67bf-41fa-8e25-6b3437952e46) | | `settings-account-390-light` | [before](https://git.kayg.org/attachments/a0ba276b-467f-41d8-821e-be3b9a6dede8) | [after](https://git.kayg.org/attachments/7baee7c8-5c05-4e8b-88a1-e7e467083aaf) | | `settings-account-430-dark` | [before](https://git.kayg.org/attachments/adc1260f-5c24-4e9f-8b16-dac4f630f314) | [after](https://git.kayg.org/attachments/8caf95d5-8d8a-4f74-be1c-2581357b4eec) | | `settings-account-430-light` | [before](https://git.kayg.org/attachments/0eb2fc0c-5d91-46fc-a42a-78342e55c248) | [after](https://git.kayg.org/attachments/f504d09f-1961-4fbb-9488-ab2c020eeba1) | | `settings-account-820-dark` | [before](https://git.kayg.org/attachments/c0c398d0-0139-492f-9cf6-69495672f7b6) | [after](https://git.kayg.org/attachments/d4e5697d-d395-48ed-92a8-cbcd60a7e376) | | `settings-account-820-light` | [before](https://git.kayg.org/attachments/d671c0f3-3f96-4c5d-b036-ed39068f1b2f) | [after](https://git.kayg.org/attachments/a16cd594-97c5-4f1f-a83e-7cc6d875ba9a) | | `settings-account-collapsed-390-dark` | [before](https://git.kayg.org/attachments/4a819b96-699f-4e05-b56a-48cd17d3e194) | [after](https://git.kayg.org/attachments/8a66e618-6fbc-499f-9814-940a6a6a4348) | | `settings-account-collapsed-390-light` | [before](https://git.kayg.org/attachments/535a6d53-1718-4cb2-b575-124e26942795) | [after](https://git.kayg.org/attachments/9e7067c0-5875-4a73-8791-5370db5e774c) | | `settings-account-collapsed-430-dark` | [before](https://git.kayg.org/attachments/427dce42-fa0b-4670-bf17-a171505de7df) | [after](https://git.kayg.org/attachments/78d59310-6257-4abf-9b5f-ab3c727c1cef) | | `settings-account-collapsed-430-light` | [before](https://git.kayg.org/attachments/03204f35-6733-4324-8d1f-40679828e92e) | [after](https://git.kayg.org/attachments/92d7ee00-d0aa-471c-bc72-1bf361d017c7) | | `settings-account-collapsed-820-dark` | [before](https://git.kayg.org/attachments/f3169a0c-3f14-40c0-b6fc-0b75d53b4700) | [after](https://git.kayg.org/attachments/f69242d4-2d6a-4c51-80ac-cb9f365b3ac7) | | `settings-account-collapsed-820-light` | [before](https://git.kayg.org/attachments/19172f9a-ec77-43a3-8efc-b7f993ea7b43) | [after](https://git.kayg.org/attachments/4c8e6b5e-4930-4302-ac6f-981a1ca161f0) | Notes sidebar and Inspector screenshots: | Capture | Before | After | | --- | --- | --- | | `calendar-day-inspector-1440-dark` | [before](https://git.kayg.org/attachments/601336ec-42c8-44d3-af3a-5de84cfa383b) | [after](https://git.kayg.org/attachments/d174129b-d2f3-49bd-ac5a-41e578da97df) | | `calendar-day-inspector-1440-light` | [before](https://git.kayg.org/attachments/d211d5b4-8a26-4517-a241-1f3e1cb68367) | [after](https://git.kayg.org/attachments/99fd1bfa-51e2-4a39-9fa8-4ac1ac2b53d8) | | `calendar-day-inspector-390-dark` | [before](https://git.kayg.org/attachments/97efe632-6279-42ea-a41d-4313ab2539db) | [after](https://git.kayg.org/attachments/137d405a-cf6f-439d-bbbe-bf01ba4d0655) | | `calendar-day-inspector-390-light` | [before](https://git.kayg.org/attachments/91c7a3c4-28ab-4192-994a-2632bb4faec8) | [after](https://git.kayg.org/attachments/ca47b586-2155-4d63-9807-51e63a991dd0) | | `calendar-day-inspector-430-dark` | [before](https://git.kayg.org/attachments/60ad68fe-95ab-4c01-8cf1-1c47f567cb7a) | [after](https://git.kayg.org/attachments/8dd5e676-c5c9-461d-b175-d09b0c7c6011) | | `calendar-day-inspector-430-light` | [before](https://git.kayg.org/attachments/ba00fc1c-f361-47d4-b00c-ec9d9606f3f3) | [after](https://git.kayg.org/attachments/5906a964-11bb-4c5b-ba07-2bc8660fe9d5) | | `calendar-day-inspector-820-dark` | [before](https://git.kayg.org/attachments/61fd9e8d-8d4d-4a82-a496-3323de21f21d) | [after](https://git.kayg.org/attachments/3a5e2b9e-a5cf-48ac-a668-eb18bc2cd556) | | `calendar-day-inspector-820-light` | [before](https://git.kayg.org/attachments/dbea9453-eb08-4572-bedf-ceea50a2838e) | [after](https://git.kayg.org/attachments/d245d527-5089-48a8-9387-91bb1a6e9a09) | | `notes-sidebar-1440-dark` | [before](https://git.kayg.org/attachments/f77fc888-3152-4178-a3f6-50c8bddd0722) | [after](https://git.kayg.org/attachments/fc9c186e-bb64-4b2c-a204-2e26ab40c6c1) | | `notes-sidebar-1440-light` | [before](https://git.kayg.org/attachments/405f12f4-5032-4d5d-8189-8f675febf141) | [after](https://git.kayg.org/attachments/c58e95f3-1373-4e62-9a2c-c73d0ca92a72) | | `notes-sidebar-390-dark` | [before](https://git.kayg.org/attachments/2c57620f-9d50-4411-a7c1-9a7a68b02005) | [after](https://git.kayg.org/attachments/70f6b21a-1492-4158-90ae-6b86ce98e540) | | `notes-sidebar-390-light` | [before](https://git.kayg.org/attachments/e0b47dbc-d3cc-440a-8d6f-86e8eb66fb33) | [after](https://git.kayg.org/attachments/fe38383a-0f85-4b60-bc1a-23a06a6b6481) | | `notes-sidebar-430-dark` | [before](https://git.kayg.org/attachments/366fa607-06c6-421b-9781-e1f3985f319d) | [after](https://git.kayg.org/attachments/d5fc201e-d580-421c-b492-06fc3880ea9c) | | `notes-sidebar-430-light` | [before](https://git.kayg.org/attachments/08604134-ba2c-4ceb-b869-99d0fd71e165) | [after](https://git.kayg.org/attachments/28db44c8-126e-49d3-874f-a6712edfa649) | | `notes-sidebar-820-dark` | [before](https://git.kayg.org/attachments/36824c34-b0c2-4ce5-9c00-e30f0b10d1aa) | [after](https://git.kayg.org/attachments/1c2232e8-23fc-48a4-8ca7-edb53cee365b) | | `notes-sidebar-820-light` | [before](https://git.kayg.org/attachments/2ad84766-0742-4a83-8bc3-8d0fc715a6e3) | [after](https://git.kayg.org/attachments/5abd2ad2-a87e-4118-8696-50d2b1519df1) | ### Performance The locked perf-VM Notes run verified three Notes toolbar action buttons in one group. Empty-Home opens: p50/p95 `644 / 798.6 ms`, CPU `31.53 s`, mean/peak RSS `607,542,126 / 629,837,824 bytes`. With 500 real Notes and a 50-open burst: p50/p95 `601.9 / 742.1 ms`, CPU `80.62 s`, mean/peak RSS `658,972,672 / 702,558,208 bytes`. No matching baseline exists, so these numbers are a feature reference only. ### Final gates `bun run check`: ```text perf-lint: PASS; 0 violations; 18996 scoped exceptions User browser caches use userStorage; only documented device/public-link exceptions remain. Glass alpha, blur and backdrop-filter roles use packages/ui/src/tokens.css. Text sizes and UI shape values use shared role tokens. Keyboard focus rings use the shared focus tokens. UI transitions and animation options use shared motion tokens or documented exceptions. svelte-check found 0 errors and 4 warnings in 3 files ``` Focused Vitest: ```text Test Files 2 passed (2) Tests 26 passed (26) ``` Production build: ```text Compressed 534 static variants; saved 9833416 bytes. ``` Production WebKit review (Mac platform emulation, 390/430/820/1440 px, light/dark): ```text PASS WebKit production review inspector-after: 4 widths × 2 themes ``` No Rust source changed, so Rust gates did not apply. `cargo clean` completed with `Removed 0 files`. `DESIGN.md` §34 was already clear; the shared `PillGroup` is reused for each bare header cluster found. No Rust source changed. **READY FOR MERGE: yes.**
Author
Owner

Deployed to production 2026-10-05 09:42 CEST in fix batch 1 (d1b8371f5).

Deployed to production 2026-10-05 09:42 CEST in fix batch 1 (d1b8371f5).
Sign in to join this conversation.
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#1085
No description provided.