feat(calendar): redesign page with persistent filter sidebar and week… - #2408
feat(calendar): redesign page with persistent filter sidebar and week…#2408ElMagnea wants to merge 2 commits into
Conversation
… view Reworks the calendar page around a docked filter sidebar that always sits to the right of the main content, mirroring the SmartListCreator layout. The calendar navigation (Today / chevrons / Day-Week toggle, day strip and month grid) is pushed into the top of that sidebar through navbar state, so the user navigates dates and filters from the same panel. - New Day / Week view toggle. Day view renders the original chronological day rows; week view lays each period out as a 7-column grid with united day headers and 1px vertical column separators. - Persistent SUN-SAT weekday row above the date content; the row below swaps between the active-week day strip (day view) and the full month grid (week view), with the active week wrapped and has-items days marked with small dots beneath the date. - Week view eagerly pre-loads upcoming weeks via `loadMore()` so the default landing leans forward; past weeks remain reachable through the up-chevron and scroll-up. - Filter panel restyle: Simple/Advanced segmented pill (purple-700 selector, regular vs bold weight), dropdowns aligned with the Figma Certification spec via the existing MultiSelect, sliders restyled to match the Release Window thumb, and Hide section toggles switched to the purple pill in sentence case. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a major redesign of the calendar page, focusing on improved navigation and layout efficiency. By moving the calendar controls into a persistent sidebar and adding a week-view mode, the user experience is streamlined. The changes also include a comprehensive restyling of filter components to ensure consistency with the new design language. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize the Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counterproductive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
 |
|
Overall Grade |
Security Reliability Complexity Hygiene Coverage  |
Code Review Summary
| Analyzer | Status | Updated (UTC) | Details |
|---|---|---|---|
| JavaScript |  |
May 28, 2026 12:56p.m. | Review ↗ |
| Code coverage |  |
May 28, 2026 12:56p.m. | Review ↗ |
Code Coverage Summary
| Language | Line Coverage (Overall) |
|---|---|
| Aggregate | 69.5% [▼ down 0.1% from main] |
| Javascript | 69.5% [▼ down 0.1% from main] |
➟ Additional coverage metrics may have been reported. See full coverage report ↗
Important
AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new week-view calendar option alongside the existing day-view, integrating a month-wide grid and weekday headers directly into the docked filter sidebar. It also refactors the multi-select dropdown filters to use a unified MultiSelect component and updates various component styles. The review comments highlight several important issues, including a Svelte 5 state-batching issue where synchronous DOM queries on document.getElementById fail because updates are asynchronous, a TypeScript type mismatch for translation variables, a recommendation to co-locate side-effect cleanups inside Svelte 5 $effect blocks instead of using onMount, a warning against iterating over sparse arrays, and a formatting inconsistency with leading zeros in calendar day views.
- Calendar.svelte: await tick() inside handleNavigation so the scroll lookup runs after the active-date DOM update lands (was silently no-op in Svelte 5 due to batched updates).
- Calendar.svelte: replace onMount cleanup-only block with a return from the same $effect that registers filterPanelHeader, co-locating setup and teardown.
- Calendar.svelte: swap onMount import for tick.
- CalendarMonthGrid.svelte: switch sparse Array(n) to Array.from({ length: n }) so the indicator-dot loop iterates over a properly populated array.
- toCalendarDayParts.ts: format day-of-month with 'd' (no leading zero) to match the day-strip's getDate() rendering.
- en.json: type the {day} variable on button_label_go_to_calendar_day as string — toHumanDay returns a formatted string ("Today", "Tuesday, Oct 15"), not a number.
Pull request was converted to draft
|
Drafting it for now, will need some bigger changes. I'll tackle this one. |
b9271a4 to
41dd680
Compare
d6ed106 to
637bdc2
Compare
2 participants
Summary
Reworks the calendar page around a persistent filter sidebar (mirroring the SmartListCreator layout) and introduces a Week view alongside the existing Day view. The calendar navigation (Today / chevrons / Day-Week toggle, day strip, and month grid) is hoisted into the top of that sidebar through navbar state, so the user navigates dates and filters from a single panel.
Views
loadMore()so the default landing leans forward. Past weeks remain reachable through the up-chevron and scroll-up.Navigation
CalendarViewSelector).CalendarWeekdayRow) above the date content; the row below swaps between the active-week day strip and the full month grid (CalendarMonthGrid) with the active week wrapped and days that have items marked with small dots beneath the date.Filter panel restyle
MultiSelect.Test plan
loadMore()keeps the next 2-3 weeks rendered ahead of the active week.deno task client:checkanddeno task client:testboth pass.