fix(calendar): color and click adjacent-month days in month view

[costajohnt]

Closes #5816.

Problem

Days shown from adjacent months (to fill the first/last week of the month grid) rendered as plain muted divs with no heatmap color and no click handler. Memos created on the last few days of the previous month — which appear in the current month's first grid row — looked indistinguishable from empty days, and couldn't be clicked through to their date filter.

Bug reported by @bordam with screenshots in #5816.

Fix

• CalendarCell.tsx: removed the !day.isCurrentMonth early-return that was rendering adjacent-month days as plain divs. They now flow through the normal button path with intensity class, tooltip, and click handler.
• utils.ts: removed the !day.isCurrentMonth check from getCellIntensityClass so intensity is count-based regardless of month.
• Added opacity-60 to adjacent-month cells so a visual distinction from current-month cells is preserved — adjacent-month days are still clearly secondary in the grid.

The count lookup (data[isoDate] ?? 0) and click chain (navigateToDateFilter → ?filter=displayTime:YYYY-MM-DD) already worked correctly for arbitrary dates; the data map isn't scoped to the visible month. Only the render path was gating these days out.

Test plan

• pnpm lint (tsc + biome) — clean
• pnpm build — clean
• Ran dev server with 7 test memos spanning the March/April boundary. Verified:
  • April 2026 grid top row shows 29 30 31 (March days) colored with heatmap intensity
  • Clicking March 29 navigates to /home?filter=displayTime:2026-03-29 and the March 29 memo loads
  • Adjacent-month button has aria-label="1 memo in 2026-03-29", tabindex=0, opacity-60 class, and the expected bg-primary* intensity class
  • Visual de-emphasis preserved — adjacent-month cells are clearly secondary
• No regressions on current-month cells (same render path, unchanged class chain when day.isCurrentMonth is true)

Notes

• YearCalendar uses the same component. Adjacent-month days across the year boundary (Jan card showing Dec of prior year, Dec card showing Jan of next year) get count=0 from filterDataByYear and render as EMPTY with opacity-60 — unchanged visual. Within the same year, an adjacent-month day with memos will appear colored in both its own card and the neighboring card. That's a minor visual duplication but internally consistent with how the grids have always worked, and matches the fix's intent of never hiding a day with memos behind a grid boundary.
• One drive-by comment on the issue suggested this might be "intended behavior." @bordam's rationale (coloring avoids ambiguity between empty and not-shown) is solid and the opacity-60 preserves the "this isn't the current month" signal that the concern was really about.
• No frontend unit tests added — repo convention is no vitest tests in web/src. Verified manually via dev server + type check + build.

Summary by CodeRabbit

• Bug Fixes
  • Adjacent-month cells in the activity calendar now display intensity-based colors and remain interactive, providing a consistent experience across all visible cells.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5c6061bb-35e4-4a1f-8f49-a44608652f58

📥 Commits

Reviewing files that changed from the base of the PR and between 765a8c6 and bc74f86.

📒 Files selected for processing (2)

• web/src/components/ActivityCalendar/CalendarCell.tsx
• web/src/components/ActivityCalendar/utils.ts

---

📝 Walkthrough

Walkthrough

Removes special handling for adjacent-month calendar cells that previously rendered them as non-interactive plain divs. These cells now follow the standard interactive button structure with intensity styling applied based on activity count, while maintaining visual muting through an opacity class.

Changes

Cohort / File(s)	Summary
Calendar Cell Rendering web/src/components/ActivityCalendar/CalendarCell.tsx	Removed early-return logic that forced adjacent-month cells into plain non-interactive <div> elements. Adjacent-month cells now retain standard <button> structure, click handlers, and ARIA attributes. Added conditional opacity-60 class for visual muting without altering interaction flow.
Intensity Styling Logic web/src/components/ActivityCalendar/utils.ts	Updated getCellIntensityClass to apply intensity styling to adjacent-month cells with non-zero activity counts. Previously, the function returned CELL_STYLES.EMPTY for all non-current-month cells regardless of activity.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰✨ Across the months the calendar hops,
No boundary stops our colorful view,
Adjacent days now shine their light,
Clickable, countable, vibrantly true,
Through March and April we bound in delight! 🌸

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing heatmap coloring and click behavior for adjacent-month days in month view.
Linked Issues check	✅ Passed	The PR fully addresses issue #5816 by enabling heatmap coloring and click functionality for adjacent-month days while maintaining visual de-emphasis.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the adjacent-month calendar cell behavior described in issue #5816; no extraneous modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}