CALENDAR sidebar: views below the mini calendar; mini calendar highlights the current view's range (grill) #411

Closed
opened 2026-09-29 07:48:27 +00:00 by kayg · 9 comments
Owner

Request (owner, 2026-09-29)

"views should be below the calendar in the sidebar! and the calendar should show the current view — as in if it's the week view, then those days should be highlighted! same for monthly views. grill me on this!"

Grill in progress in chat; answers get recorded in DESIGN before building.

## Request (owner, 2026-09-29) "views should be below the calendar in the sidebar! and the calendar should show the current view — as in if it's the week view, then those days should be highlighted! same for monthly views. grill me on this!" Grill in progress in chat; answers get recorded in DESIGN before building.
Author
Owner

Owner answers (2026-09-29): M1 every sidebar follows one pattern: sticky / important information at the top (the mini calendar here), then views, then the rest. M2 soft accent band, 'very bouncy and motion/space aware' (spring from #291, animates between ranges). M3 yes: filled circle for today, band for what is on screen. M4 yes, and switching must be very performant (no layout thrash; the band animates, the grid does not re-render). M5 yes (band follows the agenda's visible days live). M6–M9 still open (owner will answer later): do not build click/paging/dots behaviour changes yet.

Owner answers (2026-09-29): **M1** every sidebar follows one pattern: sticky / important information at the top (the mini calendar here), then views, then the rest. **M2** soft accent band, 'very bouncy and motion/space aware' (spring from #291, animates between ranges). **M3** yes: filled circle for today, band for what is on screen. **M4** yes, and switching must be very performant (no layout thrash; the band animates, the grid does not re-render). **M5** yes (band follows the agenda's visible days live). M6–M9 still open (owner will answer later): do not build click/paging/dots behaviour changes yet.
Author
Owner

Starting work on branch job/minical from dev base 1ad7b72895. I read CLAUDE.md, CONTEXT.md, DESIGN.md sections 29, 34, 38 and 39, and the owner answers: M1–M5 only; M6–M9 remain open.

Starting work on branch job/minical from dev base 1ad7b72895acaa85984f0f6d0748fdc02192d4f2. I read CLAUDE.md, CONTEXT.md, DESIGN.md sections 29, 34, 38 and 39, and the owner answers: M1–M5 only; M6–M9 remain open.
Author
Owner

Production review finding: the first real-server run failed at 390/light because the mini-month band style assertion did not see transform-only writes. I am checking the rendered declarations and will rerun the review after the fix.

Production review finding: the first real-server run failed at 390/light because the mini-month band style assertion did not see transform-only writes. I am checking the rendered declarations and will rerun the review after the fix.
Author
Owner

Production review finding: at 390 px, switching Agenda back to Day with reduced motion left all six mini-month bands at computed scaleX(0), even though the route was /calendar/day/2026-09-14. The phone Navigation dialog remounts the sidebar; an immediate spring settle could run before band DOM refs were bound. I am fixing band initialization at node mount.

Production review finding: at 390 px, switching Agenda back to Day with reduced motion left all six mini-month bands at computed scaleX(0), even though the route was /calendar/day/2026-09-14. The phone Navigation dialog remounts the sidebar; an immediate spring settle could run before band DOM refs were bound. I am fixing band initialization at node mount.
Author
Owner

Forgejo #411 — final report

Branch job/minical, pushed to origin/job/minical. Head: bb58dada6ba64483ce753f8322de4cabe935ff8a.

Built

  • Calendar now follows the common sidebar priority order: sticky mini month, Calendar views, then the remaining navigation.
  • Day, Week, Month and Agenda ranges use the soft role-token accent band. The band moves with transform-only spring animation; today remains filled, and the month grid buttons remain independent from the range animation.
  • Exposed calendarSidebar.visibleRange for Agenda’s live range feed from #413.
  • Added the Calendar sidebar ordering assertion and production screenshot/frame-strip review script.

Files: apps/web/src/lib/components/app-sidebar.svelte, apps/web/src/routes/calendar/[view]/[date]/+page.svelte, apps/web/src/lib/calendar/sidebarState.svelte.ts, packages/ui/src/components/calendar/MiniMonth.svelte, apps/web/e2e/calendar-view-switcher.mjs, apps/web/e2e/calendar-minical-review.mjs, apps/web/package.json.

Visual review

Production review passed at 390, 820 and 1440 px in light and dark themes: 24 screen captures and six range-motion strips (18 frames per strip). The archive is attached: minical-411-review.tar.gz.

Gates

cargo fmt --check exited 0 with no stdout.

cargo clippy --all-targets -- -D warnings was interrupted with exit 130 after about 24 minutes of dependency compilation, before project diagnostics. The last emitted lines were:

    Checking idna v1.1.0
    Checking arrayvec v0.7.8
    Checking url v2.5.8
    Checking spin v0.9.9

cargo test was not run. I stopped the Rust pass before the four-hour job limit to complete the web gates and cleanup.

bun run check output:

$ node scripts/check-type-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
Text sizes use shared role tokens.
Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/minical/apps/web
Getting Svelte diagnostics...

svelte-check found 0 errors and 0 warnings

bun run test result:

$ vitest run

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

 Test Files  125 passed (125)
      Tests  799 passed (799)
   Start at  14:20:41
   Duration  179.99s (transform 58%, environment 17%, import 13%, tests 9%, setup 3%)

Vitest also printed jsdom Window.scrollTo() and CSS parse notices; all tests passed.

Known gap

The #413 Agenda observer is not merged into dev; this change exposes the shared range signal for that integration. No server or API behavior changed.

Decisions

  • Calendar’s sidebar starts with the sticky mini month, followed by Calendar views, then remaining navigation.
  • Mini-month bands clip ranges to the visible month dates. Year has no band because M2–M5 specify Day, Week, Month and Agenda.
  • Agenda reads the visible-range signal so #413 can publish its live range. Reduced motion and the sidebar remount case preserve the current band state.
# Forgejo #411 — final report Branch `job/minical`, pushed to `origin/job/minical`. Head: `bb58dada6ba64483ce753f8322de4cabe935ff8a`. ## Built - Calendar now follows the common sidebar priority order: sticky mini month, Calendar views, then the remaining navigation. - Day, Week, Month and Agenda ranges use the soft role-token accent band. The band moves with transform-only spring animation; today remains filled, and the month grid buttons remain independent from the range animation. - Exposed `calendarSidebar.visibleRange` for Agenda’s live range feed from #413. - Added the Calendar sidebar ordering assertion and production screenshot/frame-strip review script. Files: `apps/web/src/lib/components/app-sidebar.svelte`, `apps/web/src/routes/calendar/[view]/[date]/+page.svelte`, `apps/web/src/lib/calendar/sidebarState.svelte.ts`, `packages/ui/src/components/calendar/MiniMonth.svelte`, `apps/web/e2e/calendar-view-switcher.mjs`, `apps/web/e2e/calendar-minical-review.mjs`, `apps/web/package.json`. ## Visual review Production review passed at 390, 820 and 1440 px in light and dark themes: 24 screen captures and six range-motion strips (18 frames per strip). The archive is attached: [minical-411-review.tar.gz](https://git.kayg.org/attachments/b0fa2c6f-3d73-43d6-af5e-2252b5bbbdb4). ## Gates `cargo fmt --check` exited 0 with no stdout. `cargo clippy --all-targets -- -D warnings` was interrupted with exit 130 after about 24 minutes of dependency compilation, before project diagnostics. The last emitted lines were: ```text Checking idna v1.1.0 Checking arrayvec v0.7.8 Checking url v2.5.8 Checking spin v0.9.9 ``` `cargo test` was not run. I stopped the Rust pass before the four-hour job limit to complete the web gates and cleanup. `bun run check` output: ```text $ node scripts/check-type-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json Text sizes use shared role tokens. Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/minical/apps/web Getting Svelte diagnostics... svelte-check found 0 errors and 0 warnings ``` `bun run test` result: ```text $ vitest run RUN v5.0.1 /home/kayg/Developer/calternal-wt/minical/apps/web Test Files 125 passed (125) Tests 799 passed (799) Start at 14:20:41 Duration 179.99s (transform 58%, environment 17%, import 13%, tests 9%, setup 3%) ``` Vitest also printed jsdom `Window.scrollTo()` and CSS parse notices; all tests passed. ## Known gap The #413 Agenda observer is not merged into `dev`; this change exposes the shared range signal for that integration. No server or API behavior changed. ## Decisions - Calendar’s sidebar starts with the sticky mini month, followed by Calendar views, then remaining navigation. - Mini-month bands clip ranges to the visible month dates. Year has no band because M2–M5 specify Day, Week, Month and Agenda. - Agenda reads the visible-range signal so #413 can publish its live range. Reduced motion and the sidebar remount case preserve the current band state.
Author
Owner

Resuming #411 on branch job/minical. HEAD bb58dada6b; merge base with dev c85585c695. I am tracing the sidebar mini-month surface, then will re-capture the requested 390/820/1440 light/dark production screenshots and run the web gates.

Resuming #411 on branch job/minical. HEAD bb58dada6ba64483ce753f8322de4cabe935ff8a; merge base with dev c85585c69536f3093dcc99de5e9e9adc66bb7a01. I am tracing the sidebar mini-month surface, then will re-capture the requested 390/820/1440 light/dark production screenshots and run the web gates.
Author
Owner

Finding: the square mini-month panel comes from app-sidebar.svelte .sidebar-priority { background: var(--glass-overlay-bg) }; MiniMonth.svelte has no background. The local wash spans the sticky wrapper in both cited screenshots. I removed that wash and kept the sticky positioning so the month sits on the sidebar shell glass.

Finding: the square mini-month panel comes from app-sidebar.svelte .sidebar-priority { background: var(--glass-overlay-bg) }; MiniMonth.svelte has no background. The local wash spans the sticky wrapper in both cited screenshots. I removed that wash and kept the sticky positioning so the month sits on the sidebar shell glass.
Author
Owner

Forgejo #411 — final report

Built

  • Removed the local --glass-overlay-bg wash from .sidebar-priority. The sticky mini-month now sits directly on the sidebar glass.
  • Kept the sticky placement and added a CSS comment that records the source of the surface and DESIGN §34.
  • Merged dev once before final gates.

Files: apps/web/src/lib/components/app-sidebar.svelte

Branch: job/minical
Head: 2e52f1b06b5c0a26104e87a43ad7f563da288140

Visual review

Production review passed at 390, 820 and 1440 px in light and dark for Day, Week, Month and Agenda. It produced 24 captures and six range-motion strips. The 3× Month crops show rounded band ends at the partial first and last weeks at 390 and 1440 px, in both themes. The cited Week captures show the range band on the sidebar glass.

Review output:

PASS Calendar mini-month review: production screenshots and six range-motion strips in /home/kayg/Developer/calternal-wt/minical/artifacts/minical-411

Attached evidence: minical-411-review.tar.gz

Gates

bun run check output:

$ node scripts/check-type-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
Text sizes use shared role tokens.
Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/minical/apps/web
Getting Svelte diagnostics...

svelte-check found 0 errors and 0 warnings

bun run test summary output:

 Test Files  125 passed (125)
      Tests  800 passed (800)
   Start at  15:50:24
   Duration  107.80s (transform 56%, environment 17%, import 13%, tests 10%, setup 4%)

  Transform  |component| transforming modules took 177.65s · 44% 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

Vitest also printed Could not parse CSS stylesheet and Not implemented: Window's scrollTo() method notices; all tests passed.

cargo build -p calternal-server output:

    Finished `dev` profile [unoptimized + debuginfo] target(s) in 71m 52s

Rust fmt, clippy and test gates were skipped because this change touched no Rust. cargo clean output:

     Removed 6940 files, 4.3GiB total

Known gaps

None for the requested surface and range checks.

Decisions

None outside the existing decisions. DESIGN §34 assigns the sidebar its glass surface; #411 asks the mini-month to sit directly on it.

# Forgejo #411 — final report ## Built - Removed the local `--glass-overlay-bg` wash from `.sidebar-priority`. The sticky mini-month now sits directly on the sidebar glass. - Kept the sticky placement and added a CSS comment that records the source of the surface and DESIGN §34. - Merged `dev` once before final gates. Files: `apps/web/src/lib/components/app-sidebar.svelte` Branch: `job/minical` Head: `2e52f1b06b5c0a26104e87a43ad7f563da288140` ## Visual review Production review passed at 390, 820 and 1440 px in light and dark for Day, Week, Month and Agenda. It produced 24 captures and six range-motion strips. The 3× Month crops show rounded band ends at the partial first and last weeks at 390 and 1440 px, in both themes. The cited Week captures show the range band on the sidebar glass. Review output: ```text PASS Calendar mini-month review: production screenshots and six range-motion strips in /home/kayg/Developer/calternal-wt/minical/artifacts/minical-411 ``` Attached evidence: [minical-411-review.tar.gz](https://git.kayg.org/attachments/0386128b-d352-44cf-ae05-48ce24f88b94) ## Gates `bun run check` output: ```text $ node scripts/check-type-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json Text sizes use shared role tokens. Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/minical/apps/web Getting Svelte diagnostics... svelte-check found 0 errors and 0 warnings ``` `bun run test` summary output: ```text Test Files 125 passed (125) Tests 800 passed (800) Start at 15:50:24 Duration 107.80s (transform 56%, environment 17%, import 13%, tests 10%, setup 4%) Transform |component| transforming modules took 177.65s · 44% 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 ``` Vitest also printed `Could not parse CSS stylesheet` and `Not implemented: Window's scrollTo() method` notices; all tests passed. `cargo build -p calternal-server` output: ```text Finished `dev` profile [unoptimized + debuginfo] target(s) in 71m 52s ``` Rust fmt, clippy and test gates were skipped because this change touched no Rust. `cargo clean` output: ```text Removed 6940 files, 4.3GiB total ``` ## Known gaps None for the requested surface and range checks. ## Decisions None outside the existing decisions. DESIGN §34 assigns the sidebar its glass surface; #411 asks the mini-month to sit directly on it.
Author
Owner

Merged into dev and pushed (43c1377c); orchestrator visual review passed. Deploy to calternal.cloud follows once the #356/#393 Apple GO/NO-GO clears.

Merged into dev and pushed (43c1377c); orchestrator visual review passed. Deploy to calternal.cloud follows once the #356/#393 Apple GO/NO-GO clears.
kayg closed this issue 2026-09-29 14:58:04 +00:00
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#411
No description provided.