feat: typed indicator dots in sidebar mini-calendar on calendar tab - #300
Merged
Conversation
When viewing the Calendar tab, the right-sidebar mini-calendar now renders up to 3 colored dots per day — one dot per item, colored by visualType — instead of the single activity-intensity dot it shared with Journal mode. Days with more items than slots prioritize diversity: one dot per unique type first, then filling remaining slots with duplicates. Example: a day with 3 events + 2 tasks + 1 snooze renders as purple + blue + orange (one of each type) rather than three purple dots. Journal tab unchanged — still shows the single emerald/amber intensity dot, so switching tabs visibly changes what the sidebar is telling you. Implementation: - visual-type-meta.ts: new dotColor field on each of 5 types (saturated hex values; reminder gets #EC4899 since chip text #FCCEE8 is too pale for a white sidebar) - day-dots.ts: pure helper buildDayDots(items) with rank-based sort achieving diversity-then-fill in a single declarative pass - day-dots.test.ts: 8 unit tests (empty, single, ordering, cap-at-3, diversity-vs-density, duplicate-fill, local-date bucketing, multi-day) - date-picker-calendar.tsx: new optional dayDots prop; JSX fork renders inline-flex dot strip when present, falls back to existing activityData path otherwise. Inline backgroundColor bypasses Tailwind JIT - global-day-panel.tsx: replaces eventActivityData memo with dayDotsData = useMemo(() => buildDayDots(eventItems)) Verification: 8/8 vitest tests pass (4ms), typecheck:node + typecheck:web clean, ESLint clean on modified files.
…mponents This update refines the visual representation of calendar items by centralizing color management through the EVENT_TYPE_COLORS utility. Key changes include: - Replaced hardcoded color values in CalendarItemChip, CalendarYearView, and visual-type-meta.ts with dynamic color assignments from EVENT_TYPE_COLORS. - Streamlined the CalendarItemChip component to utilize useMemo for chip styling, improving performance. - Updated the journal-day-panel to leverage the new color utility for event representation. These changes improve maintainability and consistency in visual styles across the calendar components.
Calendar event chips show a per-type icon before the title via a typed VISUAL_TYPE_ICONS table: reminder=AlarmClock, task=CheckSquare3, snooze=NotificationSnooze, event=Calendar03, external_event=Calendar01. Sidebar Tasks/All-Tasks tab remapped at the 'list-checks' key to render CheckmarkSquare03Icon (backward-compatible with stored user tab data). Inbox triage snooze picker header swaps Clock for NotificationSnooze. Adds CheckSquare3 and NotificationSnooze exports to icon-map.
This commit enhances the CalendarItemChip component by introducing a base color for selected items and refining the styling logic. Key changes include: - Added `getEventBaseColor` to manage background color for selected chips. - Updated the chip styling logic to differentiate between selected and non-selected states. - Improved hover effects for better user interaction feedback. These adjustments improve the visual consistency and user experience of calendar items.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Calendar tab sidebar mini-calendar now shows up to 3 typed dots per day (one dot per item, colored by
visualType) instead of the shared journal-style intensity dot. Days with many items prioritize diversity — one dot per unique type first, then fill remaining slots with duplicates.Example: a day with 3 events + 2 tasks + 1 snooze renders one purple + one blue + one orange dot, not three purple.
Journal tab unchanged — still shows the single emerald/amber intensity dot, so the two tabs now give visibly different information through the sidebar.
Files changed (6)
apps/desktop/src/renderer/src/components/calendar/visual-type-meta.ts— newdotColorfield per visualType (5 saturated hex values)apps/desktop/src/renderer/src/components/calendar/day-dots.ts(new) — pure helperbuildDayDots()with rank-based sort that achieves diversity-then-fill in one declarative passapps/desktop/src/renderer/src/components/calendar/day-dots.test.ts(new) — 8 unit tests, BDD styleapps/desktop/src/renderer/src/components/tasks/date-picker-calendar.tsx— new optionaldayDotsprop + JSX fork (inlinebackgroundColorbypasses Tailwind JIT for data-driven hexes)apps/desktop/src/renderer/src/components/day-panel/global-day-panel.tsx— wiresbuildDayDots(eventItems)for calendar mode; preservesactivityDatapath for journal modeCHANGELOG.md— new 2026-04-21 entryTest coverage
{}[event, task, task](diversity + fill)[event, task, snooze](pure diversity)[task, task, task](pure fill)Verification
pnpm vitest run day-dots.test.ts— 8/8 pass (4ms)pnpm typecheck:node,pnpm typecheck:web— cleanpnpm lint— 0 errors on modified files (913 pre-existing warnings in untouched files:tasks.tsx,template-editor.tsx,templates.tsx,yjs-ipc-provider.ts)Test plan
pnpm dev— visually confirm the Calendar tab sidebar shows typed dots#EC4899reads acceptably against the sidebar (flagged for design review below)Scope notes
Left uncommitted in the worktree (unrelated to this feature, noise from a prior session, 3700 lines of pure Prettier reformatting):
apps/desktop/src/main/ipc/generated-ipc-invoke-map.tsapps/desktop/src/preload/generated-rpc.tsThese look like regen output that was never committed. They need a separate decision (commit or reset).
Decisions flagged for review:
Reminder dot color =
#EC4899— the existing chip text#FCCEE8is too pale for a white sidebar. If design prefers a different saturated pink (e.g.,#F43F5Erose-500), it's a one-hex change invisual-type-meta.ts.Diversity-vs-density for >3-item days — current behavior is one dot per unique type first, then fill. Alternative would be first-3 items by canonical order (density). This is reversible in 2 lines of
buildDayDots.Ship-skill gates tailored for scope. Full specialist army / adversarial Codex / plan verification / eval suites were skipped — diff is 50 lines of real code with no SQL, auth, migrations, LLM trust boundary, or data-destruction surface. Gates kept: fresh unit tests, typecheck, lint, self-reviewed diff.