Mode tray: Tasks icon becomes a single checkbox #1096

Open
opened 2026-10-05 06:00:04 +00:00 by kayg · 7 comments
Owner

Owner request (2026-10-05)

"The tasks icon should be a single checkbox icon?"

Replace the Tasks Tab icon (currently a list with three check rows) with a single checkbox with a check mark, in the same stroke style and optical size as the other tray icons. Use it everywhere the Tasks mode icon appears.

## Owner request (2026-10-05) "The tasks icon should be a single checkbox icon?" Replace the Tasks Tab icon (currently a list with three check rows) with a single checkbox with a check mark, in the same stroke style and optical size as the other tray icons. Use it everywhere the Tasks mode icon appears.
Author
Owner

Started #1095, #1096, and #1097 on branch job/trayicons-1095, based on df92d4da129bfead879d417aef6e0514fc56ee96 from dev.

The shared mode metadata is in apps/web/src/lib/navigation.ts, but the Tab Bar reads path strings while navigation rows use separate Lucide components. I’m consolidating the Calendar, Tasks, and Notes glyphs behind one live icon component for the Tab Bar, navigation rows, and Settings → Tabs.

Started #1095, #1096, and #1097 on branch `job/trayicons-1095`, based on `df92d4da129bfead879d417aef6e0514fc56ee96` from `dev`. The shared mode metadata is in `apps/web/src/lib/navigation.ts`, but the Tab Bar reads path strings while navigation rows use separate Lucide components. I’m consolidating the Calendar, Tasks, and Notes glyphs behind one live icon component for the Tab Bar, navigation rows, and Settings → Tabs.
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).
Author
Owner

Shipped in fix batch 1 and broke the mode tray on production: owner screenshot shows the Calendar glyph oversized with the label clipped to "Cale", and every other mode icon rendered as a tiny dot. Reverted (hotfix 4a8e22609). Redo with the tray verified in a real production build at 390/820/1440, light and dark, selected and unselected, before READY.

Shipped in fix batch 1 and broke the mode tray on production: owner screenshot shows the Calendar glyph oversized with the label clipped to "Cale", and every other mode icon rendered as a tiny dot. Reverted (hotfix 4a8e22609). Redo with the tray verified in a real production build at 390/820/1440, light and dark, selected and unselected, before READY.
Author
Owner

Starting the tray icon fixes on job/trayicons-1095.

The worktree started at 3845841b4; I fetched and fast-forwarded it to origin/dev at d1b8371f577ecff6d6b499e24c8c147e300ff71a before editing. The supplied production screenshot confirms the Calendar glyph is oversized and clipped, while the remaining Tab icons render as dots. I am tracing the shared glyph renderer, its size classes, and the Calendar date layer, then will verify screenshots and geometry tests.

Starting the tray icon fixes on `job/trayicons-1095`. The worktree started at `3845841b4`; I fetched and fast-forwarded it to `origin/dev` at `d1b8371f577ecff6d6b499e24c8c147e300ff71a` before editing. The supplied production screenshot confirms the Calendar glyph is oversized and clipped, while the remaining Tab icons render as dots. I am tracing the shared glyph renderer, its size classes, and the Calendar date layer, then will verify screenshots and geometry tests.
Author
Owner

Finding across #1095–#1097: the shared glyph renderer has a 24×24 viewBox, but its root SVG has no intrinsic width/height and no global size-icon class. The Tab Bar and sidebar depend on scoped descendant selectors such as .seg-btn svg and .item svg; those selectors do not reliably style an SVG at a child component boundary. The browser's default SVG box then participates in flex sizing: the selected Calendar glyph expands and clips its label while inactive glyphs shrink to dots. The Calendar date also uses the UI text-size token as SVG text, so it is scaled as viewBox content instead of as an icon-sized number.

I have merged the explicit revert at 4a8e22609. I am restoring the shared glyphs on that base with intrinsic dimensions, the global icon-size token on the SVG itself, and a date number sized in viewBox units. The Tasks check box and Notes pad remain in the shared glyph path table so all render sites use the same artwork.

Finding across #1095–#1097: the shared glyph renderer has a 24×24 `viewBox`, but its root SVG has no intrinsic width/height and no global `size-icon` class. The Tab Bar and sidebar depend on scoped descendant selectors such as `.seg-btn svg` and `.item svg`; those selectors do not reliably style an SVG at a child component boundary. The browser's default SVG box then participates in flex sizing: the selected Calendar glyph expands and clips its label while inactive glyphs shrink to dots. The Calendar date also uses the UI text-size token as SVG text, so it is scaled as viewBox content instead of as an icon-sized number. I have merged the explicit revert at `4a8e22609`. I am restoring the shared glyphs on that base with intrinsic dimensions, the global icon-size token on the SVG itself, and a date number sized in viewBox units. The Tasks check box and Notes pad remain in the shared glyph path table so all render sites use the same artwork.
Author
Owner

Completed as part of the shared mode glyph repair for #1095/#1096/#1097. The renderer now uses the shared size-icon token and a fixed 24×24 SVG box; Calendar's date scales in viewBox units. Geometry and production screenshots passed for all six Tabs at 390, 820 and 1440 px, light and dark, with macOS platform signals. The App Sidebar and palette Navigate rows are included.

Full final report, gate output and screenshot attachment: see the final #1095 comment. Head: 7ee080f23d1f3a74132954ea8b0e418257cbfd7c.

Ready for merge: no — bun run check is blocked by four perf-lint findings in merged dev sources, recorded in the #1095 report.

Completed as part of the shared mode glyph repair for #1095/#1096/#1097. The renderer now uses the shared `size-icon` token and a fixed 24×24 SVG box; Calendar's date scales in viewBox units. Geometry and production screenshots passed for all six Tabs at 390, 820 and 1440 px, light and dark, with macOS platform signals. The App Sidebar and palette Navigate rows are included. Full final report, gate output and screenshot attachment: see the final #1095 comment. Head: `7ee080f23d1f3a74132954ea8b0e418257cbfd7c`. **Ready for merge: no** — `bun run check` is blocked by four perf-lint findings in merged `dev` sources, recorded in the #1095 report.
Author
Owner

Final acceptance update — head is now 3b918b2e1. Production geometry/screenshot coverage includes the Settings sidebar at 390, 820 and 1440 px in light and dark, plus the Tab Bar, App Sidebar and palette Navigate rows. The final archive has 58 PNGs, attached on #1095: https://git.kayg.org/attachments/c8b7a80e-c4a1-4794-b4fd-0847b3fd61fb

The previous #1095 comments contain the full report, root-cause evidence and exact gate output. bun run check remains red on four merged-dev perf-lint findings. Ready for merge: no.

Final acceptance update — head is now `3b918b2e1`. Production geometry/screenshot coverage includes the Settings sidebar at 390, 820 and 1440 px in light and dark, plus the Tab Bar, App Sidebar and palette Navigate rows. The final archive has 58 PNGs, attached on #1095: https://git.kayg.org/attachments/c8b7a80e-c4a1-4794-b4fd-0847b3fd61fb The previous #1095 comments contain the full report, root-cause evidence and exact gate output. `bun run check` remains red on four merged-dev perf-lint findings. **Ready for merge: no.**
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#1096
No description provided.