Calendar tray icon: make today's date large and readable #1144

Open
opened 2026-10-05 12:49:41 +00:00 by kayg · 11 comments
Owner

Owner report (2026-10-05, production): "the date is barely visible here"

Follow-up to #1095. In the mode tray the Calendar icon draws today's date as a tiny number inside a full calendar outline (top bar and binding rings), so at tray size the "5" is a few pixels tall and hard to read. Owner reference: the Apple Calendar app icon, where the date number is the dominant element (a large, heavy numeral) with only a small weekday label above it.

Expected

  • The date numeral is the main shape of the icon: as large as the icon body allows (cap height about 55–60% of the icon box), semibold/bold, centred, crisp at 1x and 2x, readable at a glance. Two digits ("28") must fit without shrinking below the one-digit size by more than a small step.
  • Reduce the calendar frame to a minimal hint (e.g. a thin top bar or the rounded box only); drop the binding rings at small sizes if they crowd the number.
  • Same glyph wherever ModeIcon renders Calendar (tray, sidebar, palette Navigate, Settings), same stroke weight family as the other mode icons, uses currentColor/tokens; selected and unselected states keep contrast ≥ 3:1 for the numeral.
  • Updates at midnight and on resume.

Evidence

4x crops of the tray Calendar icon next to Tasks/Notes at 390/820/1440, light + dark, unselected and selected, with dates 5 and 28.

## Owner report (2026-10-05, production): "the date is barely visible here" Follow-up to #1095. In the mode tray the Calendar icon draws today's date as a tiny number inside a full calendar outline (top bar and binding rings), so at tray size the "5" is a few pixels tall and hard to read. Owner reference: the Apple Calendar app icon, where the date number is the dominant element (a large, heavy numeral) with only a small weekday label above it. ## Expected - The date numeral is the main shape of the icon: as large as the icon body allows (cap height about 55–60% of the icon box), semibold/bold, centred, crisp at 1x and 2x, readable at a glance. Two digits ("28") must fit without shrinking below the one-digit size by more than a small step. - Reduce the calendar frame to a minimal hint (e.g. a thin top bar or the rounded box only); drop the binding rings at small sizes if they crowd the number. - Same glyph wherever ModeIcon renders Calendar (tray, sidebar, palette Navigate, Settings), same stroke weight family as the other mode icons, uses currentColor/tokens; selected and unselected states keep contrast ≥ 3:1 for the numeral. - Updates at midnight and on resume. ## Evidence 4x crops of the tray Calendar icon next to Tasks/Notes at 390/820/1440, light + dark, unselected and selected, with dates 5 and 28.
Author
Owner

Starting #1144 on branch job/traydate-1144. Base SHA: 04afb0043c. I am locating the shared ModeIcon implementation and checking its existing date refresh behavior before changing the glyph.

Starting #1144 on branch job/traydate-1144. Base SHA: 04afb0043c559c59084e4ec12609bb9fe679cbf6. I am locating the shared ModeIcon implementation and checking its existing date refresh behavior before changing the glyph.
Author
Owner

Gate finding after merging origin/dev at f2a34dd6e9: bun run check stopped in its first perf-lint --check step. The exception ledger is over its ratchet by 1 in 13 rules (21,977 total exceptions vs a 21,964 ceiling). This branch did not edit the performance exception ledger. The production UI build and focused Calendar icon tests pass; I am recording the gate failure for the merge round.

Gate finding after merging origin/dev at f2a34dd6e9372cdd2c77c7b41c32e2c9a7a096b2: `bun run check` stopped in its first `perf-lint --check` step. The exception ledger is over its ratchet by 1 in 13 rules (21,977 total exceptions vs a 21,964 ceiling). This branch did not edit the performance exception ledger. The production UI build and focused Calendar icon tests pass; I am recording the gate failure for the merge round.
Author
Owner

Built

  • Updated the shared Calendar glyph. The numeral is now bold and large, uses currentColor, and sits in a lighter frame without binding rings. Two-digit days keep the same font height and use SVG width adjustment to fit.
  • Kept the shared local-day clock. It still updates at midnight and refreshes on focus, page show, and visibility return.

Files

  • packages/ui/src/components/ModeIcon.svelte
  • packages/ui/src/components/modeIconPaths.ts
  • apps/web/src/lib/modeIcon.svelte.test.ts

UX gaps closed

  • The date was hard to read in the Tab Bar. The shared glyph now gives it the visual priority, in selected and unselected states.
  • One and two-digit days use the same font size. Tests cover days 5 and 28, midnight rollover, and refresh on focus.

UX gaps left

  • None found in the Calendar glyph scope.

Decisions

  • DESIGN §34 does not define the Calendar glyph details. I kept the rounded frame and one divider as the calendar hint, removed the binding rings, and set the numeral to 18 viewBox units. Two-digit dates use textLength=17 with spacingAndGlyphs, so only their width changes.
  • The existing shared date clock already handles midnight and resume events, so I kept its behavior and extended the glyph tests.

Screenshots

These production Tab Bar captures use macOS platform signals. Each sheet contains eight labelled 4× crops: dates 5 and 28, light and dark, Calendar selected and unselected.

390 px Tab Bar crops
820 px Tab Bar crops
1440 px Tab Bar crops

Commits

  • Feature: 04e59e30e — Make Calendar Tab date legible at tray size
  • Head SHA: 22b98a5438865f7c80cae6a4c204af23b6035847 (includes the required merge of origin/dev at f2a34dd6e9372cdd2c77c7b41c32e2c9a7a096b2)

Gates

cargo fmt --check: passed, exit 0; no stdout.

bun run build: passed. The real production build served the screenshots.

Focused Vitest output:

 RUN  v5.0.1 /home/kayg/Developer/calternal-wt/traydate-1144/apps/web

 Test Files  1 passed (1)
      Tests  5 passed (5)
   Start at  16:48:37
   Duration  5.61s (transform 59%, environment 25%, setup 11%, tests 4%, import 1%)

  Transform  |component| transforming modules took 3.16s · 59% of tracked time, re-done on every run
             persist transforms across runs with fsModuleCache: true
             learn more: https://vitest.dev/guide/improving-performance#caching-between-reruns

bun run check stopped at its first perf-lint --check step. Output:

perf-lint: INVALID: exception ratchet: contract.blaze: 290 exceptions exceed the ratchet ceiling 289; fix the new violation instead; contract.blocked-network: 356 exceptions exceed the ratchet ceiling 355; fix the new violation instead; contract.dom-bound: 290 exceptions exceed the ratchet ceiling 289; fix the new violation instead; contract.model-bound: 290 exceptions exceed the ratchet ceiling 289; fix the new violation instead; contract.row-identity: 290 exceptions exceed the ratchet ceiling 289; fix the new violation instead; contract.snapshot: 356 exceptions exceed the ratchet ceiling 355; fix the new violation instead; coverage.profile: 356 exceptions exceed the ratchet ceiling 355; fix the new violation instead; coverage.readiness: 356 exceptions exceed the ratchet ceiling 355; fix the new violation instead; io.unresolved-call: 16191 exceptions exceed the ratchet ceiling 16190; fix the new violation instead; render.blaze-adapter: 290 exceptions exceed the ratchet ceiling 289; fix the new violation instead; render.bound: 290 exceptions exceed the ratchet ceiling 289; fix the new violation instead; render.model_byte_cap: 290 exceptions exceed the ratchet ceiling 289; fix the new violation instead; render.model_row_cap: 290 exceptions exceed the ratchet ceiling 289; fix the new violation instead; total: ledger has 21977 exceptions; ratchet total is 21964

No Rust source changed, so no crate clippy or test gate was required. cargo clean output: Removed 8626 files, 7.2GiB total. I also removed the web build output.

Known gaps

  • The web check did not reach the later storage, token, or Svelte checks. The performance exception ratchet finding is recorded in the preceding issue comment; this job did not change the performance exception ledger.
  • origin/dev advanced after the required one-time fetch and merge. The worktree now reports 2 commits ahead and 22 behind the current tracking ref (577b1b3d10fb8237144242cdc448475e2113c4c2). I did not fetch or merge a second time under the one-merge rule. The merge round should integrate current dev and rerun its combined gates.
## Built - Updated the shared Calendar glyph. The numeral is now bold and large, uses `currentColor`, and sits in a lighter frame without binding rings. Two-digit days keep the same font height and use SVG width adjustment to fit. - Kept the shared local-day clock. It still updates at midnight and refreshes on focus, page show, and visibility return. ## Files - `packages/ui/src/components/ModeIcon.svelte` - `packages/ui/src/components/modeIconPaths.ts` - `apps/web/src/lib/modeIcon.svelte.test.ts` ## UX gaps closed - The date was hard to read in the Tab Bar. The shared glyph now gives it the visual priority, in selected and unselected states. - One and two-digit days use the same font size. Tests cover days 5 and 28, midnight rollover, and refresh on focus. ## UX gaps left - None found in the Calendar glyph scope. ## Decisions - DESIGN §34 does not define the Calendar glyph details. I kept the rounded frame and one divider as the calendar hint, removed the binding rings, and set the numeral to 18 viewBox units. Two-digit dates use `textLength=17` with `spacingAndGlyphs`, so only their width changes. - The existing shared date clock already handles midnight and resume events, so I kept its behavior and extended the glyph tests. ## Screenshots These production Tab Bar captures use macOS platform signals. Each sheet contains eight labelled 4× crops: dates 5 and 28, light and dark, Calendar selected and unselected. ![390 px Tab Bar crops](https://git.kayg.org/attachments/cb180010-098e-4577-92ed-e6c822500f41) ![820 px Tab Bar crops](https://git.kayg.org/attachments/9d0fcece-3815-44ca-9272-7339157c0dee) ![1440 px Tab Bar crops](https://git.kayg.org/attachments/f1674f34-a01d-4133-b095-254f93d93639) ## Commits - Feature: `04e59e30e` — Make Calendar Tab date legible at tray size - Head SHA: `22b98a5438865f7c80cae6a4c204af23b6035847` (includes the required merge of `origin/dev` at `f2a34dd6e9372cdd2c77c7b41c32e2c9a7a096b2`) ## Gates `cargo fmt --check`: passed, exit 0; no stdout. `bun run build`: passed. The real production build served the screenshots. Focused Vitest output: ```text RUN v5.0.1 /home/kayg/Developer/calternal-wt/traydate-1144/apps/web Test Files 1 passed (1) Tests 5 passed (5) Start at 16:48:37 Duration 5.61s (transform 59%, environment 25%, setup 11%, tests 4%, import 1%) Transform |component| transforming modules took 3.16s · 59% of tracked time, re-done on every run persist transforms across runs with fsModuleCache: true learn more: https://vitest.dev/guide/improving-performance#caching-between-reruns ``` `bun run check` stopped at its first `perf-lint --check` step. Output: ```text perf-lint: INVALID: exception ratchet: contract.blaze: 290 exceptions exceed the ratchet ceiling 289; fix the new violation instead; contract.blocked-network: 356 exceptions exceed the ratchet ceiling 355; fix the new violation instead; contract.dom-bound: 290 exceptions exceed the ratchet ceiling 289; fix the new violation instead; contract.model-bound: 290 exceptions exceed the ratchet ceiling 289; fix the new violation instead; contract.row-identity: 290 exceptions exceed the ratchet ceiling 289; fix the new violation instead; contract.snapshot: 356 exceptions exceed the ratchet ceiling 355; fix the new violation instead; coverage.profile: 356 exceptions exceed the ratchet ceiling 355; fix the new violation instead; coverage.readiness: 356 exceptions exceed the ratchet ceiling 355; fix the new violation instead; io.unresolved-call: 16191 exceptions exceed the ratchet ceiling 16190; fix the new violation instead; render.blaze-adapter: 290 exceptions exceed the ratchet ceiling 289; fix the new violation instead; render.bound: 290 exceptions exceed the ratchet ceiling 289; fix the new violation instead; render.model_byte_cap: 290 exceptions exceed the ratchet ceiling 289; fix the new violation instead; render.model_row_cap: 290 exceptions exceed the ratchet ceiling 289; fix the new violation instead; total: ledger has 21977 exceptions; ratchet total is 21964 ``` No Rust source changed, so no crate clippy or test gate was required. `cargo clean` output: `Removed 8626 files, 7.2GiB total`. I also removed the web build output. ## Known gaps - The web check did not reach the later storage, token, or Svelte checks. The performance exception ratchet finding is recorded in the preceding issue comment; this job did not change the performance exception ledger. - `origin/dev` advanced after the required one-time fetch and merge. The worktree now reports 2 commits ahead and 22 behind the current tracking ref (`577b1b3d10fb8237144242cdc448475e2113c4c2`). I did not fetch or merge a second time under the one-merge rule. The merge round should integrate current `dev` and rerun its combined gates.
Author
Owner

Clarification to the gate note: the #1144 feature itself is web-only. The required origin/dev merge also carried upstream changes in crates/plugins/notes; I rebuilt the local server from that merged tree successfully. I did not run Notes-specific clippy or tests because this issue did not author or edit those crate changes.

Clarification to the gate note: the #1144 feature itself is web-only. The required origin/dev merge also carried upstream changes in `crates/plugins/notes`; I rebuilt the local server from that merged tree successfully. I did not run Notes-specific clippy or tests because this issue did not author or edit those crate changes.
Author
Owner

Orchestrator review of artifacts/traydate-1144 (head 04e59e30e): the numeral is larger but it is crammed inside a full box frame — "28" touches the frame on all four sides (tab-bar-1440-day-28-dark-unselected-macos-4x.png) and "5" nearly does. It reads cluttered, not like the owner's Apple Calendar reference (a large numeral with breathing room under a small header band).

Redesign the glyph:

  • Drop the full outline box. Use a short top band only (a thin filled or stroked bar with the two binding ticks, or the weekday initial in tiny caps if it stays legible at 1x) and the numeral below it, free-standing.
  • Numeral: optically centred under the band, clear space ≥ 1 px (at 1x) on every side within the icon box; two digits ("28") get the same cap height as one digit when they fit, else one step smaller; weight matched to the other mode icons' stroke (tokens, no 700 literal — see #1159).
  • It must still read as "calendar" next to Tasks/Notes; compare against the other icons' visual weight (same optical size).
    Show 4x crops for 5 and 28, selected/unselected, light/dark, at 1440 and 390, side by side with the Tasks and Notes icons. Merge origin/dev first. Commit; comment on #1144 with head SHA. Do not push.
Orchestrator review of artifacts/traydate-1144 (head 04e59e30e): the numeral is larger but it is crammed inside a full box frame — "28" touches the frame on all four sides (tab-bar-1440-day-28-dark-unselected-macos-4x.png) and "5" nearly does. It reads cluttered, not like the owner's Apple Calendar reference (a large numeral with breathing room under a small header band). Redesign the glyph: - Drop the full outline box. Use a short top band only (a thin filled or stroked bar with the two binding ticks, or the weekday initial in tiny caps if it stays legible at 1x) and the numeral below it, free-standing. - Numeral: optically centred under the band, clear space ≥ 1 px (at 1x) on every side within the icon box; two digits ("28") get the same cap height as one digit when they fit, else one step smaller; weight matched to the other mode icons' stroke (tokens, no 700 literal — see #1159). - It must still read as "calendar" next to Tasks/Notes; compare against the other icons' visual weight (same optical size). Show 4x crops for 5 and 28, selected/unselected, light/dark, at 1440 and 390, side by side with the Tasks and Notes icons. Merge origin/dev first. Commit; comment on #1144 with head SHA. Do not push.
Author
Owner

Starting work on job/traydate-1144 at 22b98a5438865f7c80cae6a4c204af23b6035847; the branch was based on f2a34dd6e9372cdd2c77c7b41c32e2c9a7a096b2. I am merging current origin/dev (41bf97fb2861ea6e4ea70aab7d3b15a1c9aa278d) before changing the Calendar glyph.

Starting work on `job/traydate-1144` at `22b98a5438865f7c80cae6a4c204af23b6035847`; the branch was based on `f2a34dd6e9372cdd2c77c7b41c32e2c9a7a096b2`. I am merging current `origin/dev` (`41bf97fb2861ea6e4ea70aab7d3b15a1c9aa278d`) before changing the Calendar glyph.
Author
Owner

Finding: the previous 4× crop confirms that the date nearly touches the four sides of the Calendar frame. The revised glyph removes that frame and keeps only the short binding band. The 18-unit date remains the same cap size for 5 and 28; the two-digit width is capped at 21 units, centered in the 24-unit box, and uses the shared semibold weight token to match the other Tab glyph strokes.

Finding: the previous 4× crop confirms that the date nearly touches the four sides of the Calendar frame. The revised glyph removes that frame and keeps only the short binding band. The 18-unit date remains the same cap size for 5 and 28; the two-digit width is capped at 21 units, centered in the 24-unit box, and uses the shared semibold weight token to match the other Tab glyph strokes.
Author
Owner

Finished #1144

Built

  • Removed the Calendar glyph's full outline. It now uses a short top band with two binding ticks and a free-standing date beneath it.
  • Kept the same 18-unit date size for 5 and 28. The two-digit date is centered and capped at 21 viewBox units, which leaves at least 1 CSS px on each side at the base 16 px icon size.
  • Changed the date to the shared --weight-semibold token so it sits with the other Tab glyph strokes.
  • Kept the shared ModeIcon, so the Tab Bar, navigation, Search and Settings use the same artwork. Midnight and resume updates remain covered by the existing tests.

Files

  • packages/ui/src/components/ModeIcon.svelte
  • packages/ui/src/components/modeIconPaths.ts
  • apps/web/src/lib/modeIcon.svelte.test.ts

Head SHA

8e829b33424712e74fb4c994de27fd1b137c00ba

Gate output

  • bun run check: perf-lint: PASS; 0 violations; 22104 scoped exceptions; svelte-check found 0 errors and 4 warnings in 3 files.
  • Focused test: Test Files 1 passed (1); Tests 5 passed (5).
  • bun run test: Test Files 266 passed (266); Tests 1828 passed (1828); bun run test exit code: 0.
  • bun run build exit code: 0.
  • Screenshot server build after the SPA build: Finished dev profile [unoptimized + debuginfo] target(s) in 1m 28s; cargo build exit code: 0.
  • Cleanup: Removed 8633 files, 7.2GiB total; apps/web/build was removed.
  • No Rust source changed, so Rust format, clippy and test gates did not apply.

UX gaps closed

  • The two-digit date no longer crowds a four-sided frame. The 4× evidence covers the Calendar Tab selected and unselected, with Tasks and Notes beside it, at 390, 820 and 1440 px in light and dark on macOS.

UX gaps left

  • None in the glyph scope. The shared Tab action and accessible name did not change.

Known gaps

  • bun run check still reports four existing Svelte warnings: two empty focus rulesets in AttachmentDeck.svelte and AgendaList.svelte, and two unused selectors in Notes.
  • I did not add a performance profile. This change only replaces static SVG geometry and a font-weight token; it adds no route, data work or interaction.

Decisions not specified in DESIGN

  • I used a horizontal band at y=6, ticks at x=8 and x=16, and placed the date at x=12, y=17. I chose the shared semibold weight and a 21-unit width cap to preserve the date's cap height while keeping a one-pixel side inset.

4× macOS production crops

Each sheet is 2×2: top row is day 5, bottom row is day 28; left is Calendar selected, right is Calendar unselected with Tasks selected. Each crop shows Calendar beside Tasks and Notes.

390 px · light

390 px light

390 px · dark

390 px dark

820 px · light

820 px light

820 px · dark

820 px dark

1440 px · light

1440 px light

1440 px · dark

1440 px dark

**Finished #1144** **Built** - Removed the Calendar glyph's full outline. It now uses a short top band with two binding ticks and a free-standing date beneath it. - Kept the same 18-unit date size for `5` and `28`. The two-digit date is centered and capped at 21 viewBox units, which leaves at least 1 CSS px on each side at the base 16 px icon size. - Changed the date to the shared `--weight-semibold` token so it sits with the other Tab glyph strokes. - Kept the shared `ModeIcon`, so the Tab Bar, navigation, Search and Settings use the same artwork. Midnight and resume updates remain covered by the existing tests. **Files** - `packages/ui/src/components/ModeIcon.svelte` - `packages/ui/src/components/modeIconPaths.ts` - `apps/web/src/lib/modeIcon.svelte.test.ts` **Head SHA** `8e829b33424712e74fb4c994de27fd1b137c00ba` **Gate output** - `bun run check`: `perf-lint: PASS; 0 violations; 22104 scoped exceptions`; `svelte-check found 0 errors and 4 warnings in 3 files`. - Focused test: `Test Files 1 passed (1)`; `Tests 5 passed (5)`. - `bun run test`: `Test Files 266 passed (266)`; `Tests 1828 passed (1828)`; `bun run test exit code: 0`. - `bun run build exit code: 0`. - Screenshot server build after the SPA build: `Finished dev profile [unoptimized + debuginfo] target(s) in 1m 28s`; `cargo build exit code: 0`. - Cleanup: `Removed 8633 files, 7.2GiB total`; `apps/web/build` was removed. - No Rust source changed, so Rust format, clippy and test gates did not apply. **UX gaps closed** - The two-digit date no longer crowds a four-sided frame. The 4× evidence covers the Calendar Tab selected and unselected, with Tasks and Notes beside it, at 390, 820 and 1440 px in light and dark on macOS. **UX gaps left** - None in the glyph scope. The shared Tab action and accessible name did not change. **Known gaps** - `bun run check` still reports four existing Svelte warnings: two empty focus rulesets in `AttachmentDeck.svelte` and `AgendaList.svelte`, and two unused selectors in Notes. - I did not add a performance profile. This change only replaces static SVG geometry and a font-weight token; it adds no route, data work or interaction. **Decisions not specified in DESIGN** - I used a horizontal band at y=6, ticks at x=8 and x=16, and placed the date at x=12, y=17. I chose the shared semibold weight and a 21-unit width cap to preserve the date's cap height while keeping a one-pixel side inset. **4× macOS production crops** Each sheet is 2×2: top row is day 5, bottom row is day 28; left is Calendar selected, right is Calendar unselected with Tasks selected. Each crop shows Calendar beside Tasks and Notes. 390 px · light ![390 px light](https://git.kayg.org/attachments/081d5d1e-704e-4870-bb3c-9178417de333) 390 px · dark ![390 px dark](https://git.kayg.org/attachments/36462182-5017-4ba4-b0f0-4a7d2069a503) 820 px · light ![820 px light](https://git.kayg.org/attachments/9d699da2-8307-4be7-a44d-3640de2d5626) 820 px · dark ![820 px dark](https://git.kayg.org/attachments/d6d03bab-f6d2-40e0-861b-47e4a12be192) 1440 px · light ![1440 px light](https://git.kayg.org/attachments/3615a209-c665-4a9d-b44e-ee615421a6a0) 1440 px · dark ![1440 px dark](https://git.kayg.org/attachments/220e4ace-18ef-4925-8153-23a34a9cebb9)
Author
Owner

Starting traydate3-1144 on branch job/traydate-1144 at 8e829b33424712e74fb4c994de27fd1b137c00ba. Current merge base with origin/dev: 41bf97fb2861ea6e4ea70aab7d3b15a1c9aa278d. I will replace the Calendar header ticks with the requested filled strip, capture the tray crops, merge origin/dev once before the web gates, and report the resulting head here. No push.

Starting traydate3-1144 on branch `job/traydate-1144` at `8e829b33424712e74fb4c994de27fd1b137c00ba`. Current merge base with `origin/dev`: `41bf97fb2861ea6e4ea70aab7d3b15a1c9aa278d`. I will replace the Calendar header ticks with the requested filled strip, capture the tray crops, merge `origin/dev` once before the web gates, and report the resulting head here. No push.
Author
Owner

Finding from apps/web/e2e/tray-icons-1095.mjs: the existing 4x capture fixes neither the date nor the Calendar selected state matrix; it writes selected tab crops only at 1440 px using the machine's current day. I am extending this production-build capture for days 5 and 28, selected and unselected, in light and dark at 390 and 1440 px. The existing full Tab Bar captures continue to cover 820 px too.

Finding from `apps/web/e2e/tray-icons-1095.mjs`: the existing 4x capture fixes neither the date nor the Calendar selected state matrix; it writes selected tab crops only at 1440 px using the machine's current day. I am extending this production-build capture for days 5 and 28, selected and unselected, in light and dark at 390 and 1440 px. The existing full Tab Bar captures continue to cover 820 px too.
Author
Owner

Finished traydate3-1144.

  • Branch: job/traydate-1144
  • Head SHA: 8c622927a98a8ba23119a0d2a23434e6941069e2
  • Feature commit: 75c6642ce (fix(ui): give the Calendar icon a filled header strip)
  • origin/dev merged before the final gates. No push.

Calendar now uses a filled, current-color rounded header strip above the unchanged date numeral. The strip width follows the date: 11 SVG units for one digit and 20 for two digits. The production capture freezes the local day to 5 and 28 and checks selected and unselected Calendar Tabs.

Files changed:

  • packages/ui/src/components/ModeIcon.svelte
  • packages/ui/src/components/modeIconPaths.ts
  • apps/web/src/lib/modeIcon.svelte.test.ts
  • apps/web/e2e/tray-icons-1095.mjs

Gates and evidence:

  • bun run check exited 0:
    • perf-lint: PASS; 0 violations; 22104 scoped exceptions
    • svelte-check found 0 errors and 4 warnings in 3 files
  • bun run test exited 0:
    • Test Files 266 passed (266)
    • Tests 1831 passed (1831)
    • Duration 279.57s (environment 28%, transform 26%, import 24%, tests 16%, setup 6%)
  • Production capture: PASS Tab Bar and Settings sidebar geometry with production screenshots: 6 Tabs × 3 widths (390, 820, 1440px) × 2 themes; 12 Tab crops and 16 date-state crops at 4x; macOS platform; App Sidebar and Core palette Navigate glyphs (/home/kayg/Developer/calternal-wt/traydate-1144/artifacts/trayicons-1144)
  • The four Svelte warnings are existing CSS warnings in AttachmentDeck.svelte, AgendaList.svelte, and the Notes route.

The screenshots use the macOS platform signal. Full Tab Bar and Settings screenshots cover 390, 820 and 1440 px in light and dark. The 16 requested 4x crops are attached below.

Date Calendar state 390 light 390 dark 1440 light 1440 dark
5 Selected PNG PNG PNG PNG
5 Unselected PNG PNG PNG PNG
28 Selected PNG PNG PNG PNG
28 Unselected PNG PNG PNG PNG

UX gaps closed: removed the binding ticks that read as a stray glyph and captured all requested date, selection, theme and width states. UX gaps left: none specific to this icon.

Decision: DESIGN does not set exact band geometry. I centered a 3-unit-high strip and vary its width with the numeral so it stays about as wide as the displayed date.

Finished traydate3-1144. - Branch: `job/traydate-1144` - Head SHA: `8c622927a98a8ba23119a0d2a23434e6941069e2` - Feature commit: `75c6642ce` (`fix(ui): give the Calendar icon a filled header strip`) - `origin/dev` merged before the final gates. No push. Calendar now uses a filled, current-color rounded header strip above the unchanged date numeral. The strip width follows the date: 11 SVG units for one digit and 20 for two digits. The production capture freezes the local day to 5 and 28 and checks selected and unselected Calendar Tabs. Files changed: - `packages/ui/src/components/ModeIcon.svelte` - `packages/ui/src/components/modeIconPaths.ts` - `apps/web/src/lib/modeIcon.svelte.test.ts` - `apps/web/e2e/tray-icons-1095.mjs` Gates and evidence: - `bun run check` exited 0: - `perf-lint: PASS; 0 violations; 22104 scoped exceptions` - `svelte-check found 0 errors and 4 warnings in 3 files` - `bun run test` exited 0: - `Test Files 266 passed (266)` - `Tests 1831 passed (1831)` - `Duration 279.57s (environment 28%, transform 26%, import 24%, tests 16%, setup 6%)` - Production capture: `PASS Tab Bar and Settings sidebar geometry with production screenshots: 6 Tabs × 3 widths (390, 820, 1440px) × 2 themes; 12 Tab crops and 16 date-state crops at 4x; macOS platform; App Sidebar and Core palette Navigate glyphs (/home/kayg/Developer/calternal-wt/traydate-1144/artifacts/trayicons-1144)` - The four Svelte warnings are existing CSS warnings in `AttachmentDeck.svelte`, `AgendaList.svelte`, and the Notes route. The screenshots use the macOS platform signal. Full Tab Bar and Settings screenshots cover 390, 820 and 1440 px in light and dark. The 16 requested 4x crops are attached below. | Date | Calendar state | 390 light | 390 dark | 1440 light | 1440 dark | |---|---|---|---|---|---| | 5 | Selected | [PNG](https://git.kayg.org/attachments/80f27608-4cc1-411f-905e-3ec5f2995c79) | [PNG](https://git.kayg.org/attachments/aa0932d7-0e7e-48ed-916c-263c0736cdcd) | [PNG](https://git.kayg.org/attachments/530315c9-3f7b-47c5-806f-30889f539b79) | [PNG](https://git.kayg.org/attachments/7c9c27ee-2234-442c-b29e-ec1b84014ea7) | | 5 | Unselected | [PNG](https://git.kayg.org/attachments/496b812e-a18f-4d3c-9fd7-66dad21a07c5) | [PNG](https://git.kayg.org/attachments/74a9f93e-b4f3-45d1-9c2e-f90716743839) | [PNG](https://git.kayg.org/attachments/bf468922-58ec-4da7-8586-5c4a7a45261e) | [PNG](https://git.kayg.org/attachments/636b8325-8943-428b-8cae-214e6272d235) | | 28 | Selected | [PNG](https://git.kayg.org/attachments/f7f5cfee-c1f7-4576-8569-e848020be759) | [PNG](https://git.kayg.org/attachments/a013ee8f-2c87-47fe-87c5-8eaf604d8613) | [PNG](https://git.kayg.org/attachments/a49b7927-092c-4269-97aa-d039024a28e8) | [PNG](https://git.kayg.org/attachments/a49eb853-3866-4bc8-8094-e677db088e8e) | | 28 | Unselected | [PNG](https://git.kayg.org/attachments/dbb54e70-80bb-4ed6-802d-d2bf70086532) | [PNG](https://git.kayg.org/attachments/e72f9167-5456-451c-a111-99170fcd93e2) | [PNG](https://git.kayg.org/attachments/1d7d6be7-80c8-481b-9cfb-a71a90fd904b) | [PNG](https://git.kayg.org/attachments/4370fcd5-25cd-483b-b992-06c47c22ae1b) | UX gaps closed: removed the binding ticks that read as a stray glyph and captured all requested date, selection, theme and width states. UX gaps left: none specific to this icon. Decision: DESIGN does not set exact band geometry. I centered a 3-unit-high strip and vary its width with the numeral so it stays about as wide as the displayed date.
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#1144
No description provided.