kayg/calternal

Watch

Fork 0

CALENDAR: Day/Week event blocks still paint a coloured side bar (inset box-shadow) — #238 missed it #279

New issue

Closed

opened 2026-09-27 23:44:40 +00:00 by kayg · 5 comments

kayg commented

2026-09-27 23:44:40 +00:00

Owner

Found by the orchestrator reviewing #247 captures (2026-09-28 01:45 CEST): Week-view events ('Morning run', 'Chrome review with the team') still show a 3 px coloured left stripe. Source on dev: packages/ui/src/components/calendar/GridColumn.svelte lines ~550, ~575, ~795, ~945: box-shadow: inset 3px 0 0 var(--c) (and inset 0 0 0 1.5px var(--c) ring on the selected state; var(--accent) variant at ~945). Owner rule: no side highlights, no border highlights; tint only (#238). Remove every inset stripe and ring; express hover/selected/dragging by tint strength (the shared eventTint helper from #238) plus the existing soft drop shadow for lifted/dragging states; keyboard focus keeps the shared focus ring. Grep the whole calendar (GridColumn, TimeGrid, MonthGrid, AgendaList, ItemPreview, YearHeatmap) and search result rows for any remaining side stripe (border-left, inset box-shadow with x-offset). Add a layout-sweep assertion: event blocks have no border-left and no inset x-offset box-shadow. Screenshots Day/Week/Month light+dark at 1440 and 390.

Found by the orchestrator reviewing #247 captures (2026-09-28 01:45 CEST): Week-view events ('Morning run', 'Chrome review with the team') still show a 3 px coloured left stripe. Source on dev: packages/ui/src/components/calendar/GridColumn.svelte lines ~550, ~575, ~795, ~945: `box-shadow: inset 3px 0 0 var(--c)` (and `inset 0 0 0 1.5px var(--c)` ring on the selected state; `var(--accent)` variant at ~945). Owner rule: no side highlights, no border highlights; tint only (#238). Remove every inset stripe and ring; express hover/selected/dragging by tint strength (the shared eventTint helper from #238) plus the existing soft drop shadow for lifted/dragging states; keyboard focus keeps the shared focus ring. Grep the whole calendar (GridColumn, TimeGrid, MonthGrid, AgendaList, ItemPreview, YearHeatmap) and search result rows for any remaining side stripe (border-left, inset box-shadow with x-offset). Add a layout-sweep assertion: event blocks have no border-left and no inset x-offset box-shadow. Screenshots Day/Week/Month light+dark at 1440 and 390.

event-tint-day-paper-1440.png

444 KiB

event-tint-day-paper-390.png

58 KiB

event-tint-day-midnight-1440.png

346 KiB

event-tint-day-midnight-390.png

74 KiB

event-tint-week-paper-1440.png

520 KiB

event-tint-week-paper-390.png

143 KiB

event-tint-week-midnight-1440.png

402 KiB

event-tint-week-midnight-390.png

126 KiB

event-tint-month-paper-1440.png

562 KiB

event-tint-month-paper-390.png

166 KiB

event-tint-month-midnight-1440.png

432 KiB

event-tint-month-midnight-390.png

144 KiB

kayg commented

2026-09-27 23:46:03 +00:00

Author

Owner

Starting Forgejo #279 on branch job/event-stripes.

Base SHA: 088e17d4fe49d6a7b41f03fcc13f5f4959346be9.

I have read CLAUDE.md, docs/DESIGN.md and CONTEXT.md. I am tracing all Calendar Event state styles and the layout sweep before removing the remaining stripe and ring effects.

Starting Forgejo #279 on branch `job/event-stripes`. Base SHA: `088e17d4fe49d6a7b41f03fcc13f5f4959346be9`. I have read `CLAUDE.md`, `docs/DESIGN.md` and `CONTEXT.md`. I am tracing all Calendar Event state styles and the layout sweep before removing the remaining stripe and ring effects.

kayg commented

2026-09-27 23:54:09 +00:00

Author

Owner

Finding from the source audit: the sweep fixtures named “Morning run” and “Chrome review with the team” are Log entries created by seedUI, and they render as .block.actual. The shared .block rules painted those blocks with a 3 px inset stripe and a selected inset ring; .block.moving and the grid creation preview also had inset stripes. Scheduled Events use .block.plan and the shared Event tint, but their selected state still added a colored drop shadow. The other Event surfaces (all-day, Month, Agenda, popover and search) already use tint fills without an inset stripe.

I removed the shared block stripes and selection ring, kept the soft moving shadow, removed the creation-preview stripe, and kept the Event selected state to tint only. The layout sweep now checks Log entry and Event blocks plus the listed Event surfaces for a left border or inset shadow. The Event tint E2E checks real Events in each state.

Finding from the source audit: the sweep fixtures named “Morning run” and “Chrome review with the team” are Log entries created by `seedUI`, and they render as `.block.actual`. The shared `.block` rules painted those blocks with a 3 px inset stripe and a selected inset ring; `.block.moving` and the grid creation preview also had inset stripes. Scheduled Events use `.block.plan` and the shared Event tint, but their selected state still added a colored drop shadow. The other Event surfaces (all-day, Month, Agenda, popover and search) already use tint fills without an inset stripe. I removed the shared block stripes and selection ring, kept the soft moving shadow, removed the creation-preview stripe, and kept the Event selected state to tint only. The layout sweep now checks Log entry and Event blocks plus the listed Event surfaces for a left border or inset shadow. The Event tint E2E checks real Events in each state.

kayg commented

2026-09-28 00:19:08 +00:00

Author

Owner

Production sweep result: apps/web/e2e/event-tint.mjs passed 29 themes, all tested Event states, and six tinted surfaces; it saved 20 production screenshots.

The full layout sweep ran the new left-border/inset-shadow assertion over its route matrix without reporting a style violation. It then exited at the existing offline fallback check: layout-sweep.mjs:2254, assert.equal(await offlineMessage.isVisible(), true), actual false. I left that expectation unchanged.

Production sweep result: `apps/web/e2e/event-tint.mjs` passed 29 themes, all tested Event states, and six tinted surfaces; it saved 20 production screenshots. The full layout sweep ran the new left-border/inset-shadow assertion over its route matrix without reporting a style violation. It then exited at the existing offline fallback check: `layout-sweep.mjs:2254`, `assert.equal(await offlineMessage.isVisible(), true)`, actual `false`. I left that expectation unchanged.

kayg commented

2026-09-28 00:53:41 +00:00

Author

Owner

Implemented Forgejo #279238 on job/event-stripes.

Built

Removed coloured left stripes and inset selection rings from calendar Log entry blocks and previews. Selected states use stronger tint; moving states retain a soft shadow, and keyboard focus keeps its visible outline.
Kept scheduled Event state styling tint-based and removed its colored selection shadow.
Added assertions to the Event tint and layout sweep checks for left borders and inset rings across base, selected, and moving states.

Files

packages/ui/src/components/calendar/GridColumn.svelte
apps/web/e2e/event-tint.mjs
apps/web/e2e/layout-sweep.mjs

Commits

Feature: a0d513e244f36ea69c340e7b05b379e1128b0e20 — fix(calendar): remove block stripes and selection rings
Merged current local dev once before final gates. Branch HEAD: f4c2a8ec9b96d2b3a30379ef02bdbfe28fa0b766 (Merge branch 'dev' into job/event-stripes).
Pushed job/event-stripes; push reported Everything up-to-date.

Gates

Post-merge results:

cargo fmt --check — exit code 0; no output.
cargo clippy --all-targets -- -D warnings — passed. Final output: Finished \dev` profile [unoptimized + debuginfo] target(s) in 8m 10s`.
cargo test — exit code 0; aggregate output: Rust test totals: 1329 passed; 0 failed; 12 ignored.
bun run check — svelte-check found 0 errors and 0 warnings.
bun run test — Test Files 90 passed (90); Tests 629 passed (629); Duration 71.38s (transform 61%, environment 14%, import 13%, tests 9%, setup 3%).
Production build passed. Event tint E2E passed: event tint e2e: 29 themes, state contrast passed on 6 Event surfaces; 20 production screenshots saved to /home/kayg/Developer/calternal-wt/event-stripes/target/event-tint-shots.

The one full layout sweep run did not finish cleanly. The new stripe assertions reported no violations, then the existing offline fallback check failed at apps/web/e2e/layout-sweep.mjs:2254: assert.equal(await offlineMessage.isVisible(), true) received false after its wait. Its expectation was left unchanged. This sweep ran before the merge; the assertion is present in the merged branch.

Screenshots

Post-merge production screenshots are attached here:

Day, Paper: 1440 px, 390 px
Day, Midnight: 1440 px, 390 px
Week, Paper: 1440 px, 390 px
Week, Midnight: 1440 px, 390 px
Month, Paper: 1440 px, 390 px
Month, Midnight: 1440 px, 390 px

Decisions

The example cards named in the issue correspond to Log entry fixtures in the layout sweep, so the shared Log entry block styles and scheduled Event styles both received assertions and tint-only state styling.
Selected states use stronger tint. Moving states keep the existing soft shadow, without a colored stripe or ring. The keyboard focus outline remains for accessibility.

Implemented Forgejo #279238 on `job/event-stripes`. ## Built - Removed coloured left stripes and inset selection rings from calendar Log entry blocks and previews. Selected states use stronger tint; moving states retain a soft shadow, and keyboard focus keeps its visible outline. - Kept scheduled Event state styling tint-based and removed its colored selection shadow. - Added assertions to the Event tint and layout sweep checks for left borders and inset rings across base, selected, and moving states. ## Files - `packages/ui/src/components/calendar/GridColumn.svelte` - `apps/web/e2e/event-tint.mjs` - `apps/web/e2e/layout-sweep.mjs` ## Commits - Feature: `a0d513e244f36ea69c340e7b05b379e1128b0e20` — `fix(calendar): remove block stripes and selection rings` - Merged current local `dev` once before final gates. Branch HEAD: `f4c2a8ec9b96d2b3a30379ef02bdbfe28fa0b766` (`Merge branch 'dev' into job/event-stripes`). - Pushed `job/event-stripes`; push reported `Everything up-to-date`. ## Gates Post-merge results: - `cargo fmt --check` — exit code 0; no output. - `cargo clippy --all-targets -- -D warnings` — passed. Final output: `Finished \`dev\` profile [unoptimized + debuginfo] target(s) in 8m 10s`. - `cargo test` — exit code 0; aggregate output: `Rust test totals: 1329 passed; 0 failed; 12 ignored`. - `bun run check` — `svelte-check found 0 errors and 0 warnings`. - `bun run test` — `Test Files 90 passed (90)`; `Tests 629 passed (629)`; `Duration 71.38s (transform 61%, environment 14%, import 13%, tests 9%, setup 3%)`. - Production build passed. Event tint E2E passed: `event tint e2e: 29 themes, state contrast passed on 6 Event surfaces; 20 production screenshots saved to /home/kayg/Developer/calternal-wt/event-stripes/target/event-tint-shots`. The one full layout sweep run did not finish cleanly. The new stripe assertions reported no violations, then the existing offline fallback check failed at `apps/web/e2e/layout-sweep.mjs:2254`: `assert.equal(await offlineMessage.isVisible(), true)` received `false` after its wait. Its expectation was left unchanged. This sweep ran before the merge; the assertion is present in the merged branch. ## Screenshots Post-merge production screenshots are attached here: - Day, Paper: [1440 px](https://git.kayg.org/attachments/2ad97cc8-9a68-4519-b38c-783befec5b29), [390 px](https://git.kayg.org/attachments/1779a927-93aa-4986-99bd-308199afc208) - Day, Midnight: [1440 px](https://git.kayg.org/attachments/1ff51051-18d3-43dc-846e-74ff5b5e39a1), [390 px](https://git.kayg.org/attachments/afa4a1bb-378e-4341-afc4-0e5b57e77032) - Week, Paper: [1440 px](https://git.kayg.org/attachments/4f371348-e0e6-4026-82a7-95d3443b517e), [390 px](https://git.kayg.org/attachments/5cd1666c-3989-4ad5-9315-f6b3d6f3f20f) - Week, Midnight: [1440 px](https://git.kayg.org/attachments/39028b5c-4edf-48d8-bd2d-f52bb1ba069d), [390 px](https://git.kayg.org/attachments/4fe2460c-9ecf-4ea6-b9ba-ae017d96dd23) - Month, Paper: [1440 px](https://git.kayg.org/attachments/3b31abc7-e0cc-4599-9369-f45abd88128d), [390 px](https://git.kayg.org/attachments/0827f8fc-f201-40a3-ba5d-224b00abf6fe) - Month, Midnight: [1440 px](https://git.kayg.org/attachments/76fe3d82-375d-4506-84c7-0b7977bd54a3), [390 px](https://git.kayg.org/attachments/8fc28ef7-bbe5-4563-945f-c9a9d97fe0ba) ## Decisions - The example cards named in the issue correspond to Log entry fixtures in the layout sweep, so the shared Log entry block styles and scheduled Event styles both received assertions and tint-only state styling. - Selected states use stronger tint. Moving states keep the existing soft shadow, without a colored stripe or ring. The keyboard focus outline remains for accessibility.

kayg referenced this issue from a commit

2026-09-28 00:57:45 +00:00

Merge job/event-stripes (#279)

kayg commented

2026-09-28 00:59:02 +00:00

Author

Owner

Merged in 55a974d3; no inset stripes remain in calendar components (grep) and the tint e2e asserts it.

Merged in 55a974d3; no inset stripes remain in calendar components (grep) and the tint e2e asserts it.

kayg closed this issue

2026-09-28 00:59:03 +00:00

kayg referenced this issue