heatmap improvements

[ragnep]

Summary by CodeRabbit

• Style

  • Adjusted avatar border tint and hover styling with smoother transitions and subtle shadow.
  • Restyled sidebar thumbnails and fallback icon visuals; removed image hover/scale animations.

• Refactor

  • Simplified heatmap layout and viewport handling by removing reliance on scroll-based metrics.
  • Month label sizing and placement are now explicitly computed, improving stability in loading and interactive states.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 42d938c1-29af-4592-b2b7-fd161dc4f791

📥 Commits

Reviewing files that changed from the base of the PR and between 00f926c and e1e0420.

📒 Files selected for processing (1)

• components/user/brain/userPageBrainActivityHeatmap.helpers.ts

---

📝 Walkthrough

Walkthrough

Removed viewport scroll-metric dependence from heatmap rendering and month-label placement; added column/grid sizing helpers. Updated heatmap layout classes. Also adjusted sidebar avatar/thumbnail styling and removed image hover transform animations.

Changes

Cohort / File(s)	Summary
Heatmap core & helpers components/user/brain/UserPageBrainActivityHeatmap.tsx, components/user/brain/userPageBrainActivityHeatmap.helpers.ts	Eliminated viewport-based month label clipping and scroll inputs; getPlacedMonthLabels() no longer accepts scroll/width. Added getHeatmapColumnLeftPx() and getHeatmapGridWidthPx(); updated heatmap class constants and cell hover transition gating.
Heatmap viewport hook components/user/brain/userPageBrainActivityHeatmap.viewport.ts	Removed external-store subscription and viewportMetrics; useHeatmapViewport() now returns only { viewportRef } and no longer exposes {scrollLeft, clientWidth, scrollWidth}.
Sidebar avatar / wave item styling components/user/brain/UserPageBrainSidebarMobileStrip.tsx, components/user/brain/UserPageBrainSidebarWaveItem.tsx	Adjusted border opacity to tw-border-white/[0.04], added tw-shadow-sm and tw-transition-colors; removed image/fallback hover transform/scale and transition classes, leaving tw-object-cover for images.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• heatmap loading fix #2129: Modifies the same heatmap loading/header code and hook usage this change adapts.
• Brain activity heatmap #2118: Introduced the viewport-metrics and month-label logic that this PR removes/refactors.

Suggested reviewers

• simo6529
• prxt6529

Poem

🐰 Hopping light where scrolls once led,

I count the columns, not the thread.
Labels land by simple math,
Thumbs rest still, no hover path.
A quiet grid — I tap my pad and glad. 🎋

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 14.29% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title 'heatmap improvements' is vague and generic, using non-descriptive language that doesn't convey meaningful information about the specific changes made.	Use a more descriptive title that captures the main change, such as 'Remove viewport scroll metrics from heatmap layout' or 'Refactor heatmap to use column-based positioning'.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch heatmap-mobile-performance

---

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.}

[coderabbitai]

🧹 Nitpick comments (1)

components/user/brain/UserPageBrainSidebarWaveItem.tsx (1)

84-86: Minor: Redundant background class.

tw-bg-iron-900 is applied to both the parent container (line 74) and the fallback icon wrapper (line 84). The inner one could be removed since it inherits the same background.

♻️ Optional cleanup

-          <div className="tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center tw-bg-iron-900">
+          <div className="tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center">

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/user/brain/UserPageBrainSidebarWaveItem.tsx` around lines 84 - 86,
Remove the redundant background class from the inner fallback wrapper: in the
UserPageBrainSidebarWaveItem component, delete the tw-bg-iron-900 class on the
div that wraps FallbackIcon (the inner fallback icon wrapper) since the parent
container already applies tw-bg-iron-900; keep the styling on the parent and
ensure only the parent container retains tw-bg-iron-900 so visual appearance is
unchanged.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@components/user/brain/UserPageBrainSidebarWaveItem.tsx`:
- Around line 84-86: Remove the redundant background class from the inner
fallback wrapper: in the UserPageBrainSidebarWaveItem component, delete the
tw-bg-iron-900 class on the div that wraps FallbackIcon (the inner fallback icon
wrapper) since the parent container already applies tw-bg-iron-900; keep the
styling on the parent and ensure only the parent container retains
tw-bg-iron-900 so visual appearance is unchanged.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 571abc4d-e134-4445-9c8f-cf4f7cc77e00

📥 Commits

Reviewing files that changed from the base of the PR and between 5fae065 and 00f926c.

📒 Files selected for processing (5)

• components/user/brain/UserPageBrainActivityHeatmap.tsx
• components/user/brain/UserPageBrainSidebarMobileStrip.tsx
• components/user/brain/UserPageBrainSidebarWaveItem.tsx
• components/user/brain/userPageBrainActivityHeatmap.helpers.ts
• components/user/brain/userPageBrainActivityHeatmap.viewport.ts

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud