From bbff6ab1439dc3ba2ae09d314e68b25164bdb73e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 21 Jun 2026 14:01:37 +0200
Subject: [PATCH] fix(mood): full-saturate the time-of-day chart and mood
 calendar

The v1.19.0 saturation fix missed two surfaces: the mood-by-time-of-day
bars and the mood calendar still rendered populated values at 0.55
opacity, reading as a dimmed glitch. Drop the dimming on populated bars
and cells (and the legend swatches); keep the quiet tint only on the
no-data empty state.
---
 src/components/charts/mood-heatmap.tsx              |  7 +++++--
 .../insights/mood/mood-time-of-day-chart.tsx        | 13 ++++++++-----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/charts/mood-heatmap.tsx b/src/components/charts/mood-heatmap.tsx
index 749e613e5..c1c547447 100644
--- a/src/components/charts/mood-heatmap.tsx
+++ b/src/components/charts/mood-heatmap.tsx
@@ -271,7 +271,10 @@ export function MoodHeatmap({
                 height={cellSize}
                 rx={2}
                 fill={cell.color}
-                fillOpacity={cell.cell ? 0.55 : 1}
+                // v1.19.1 — populated days render at full saturation so the
+                // mood band reads clearly; only the no-entry cells stay the
+                // quiet `--secondary` empty-state tint.
+                fillOpacity={1}
                 className="cursor-pointer"
                 onPointerEnter={(e) => {
                   if (e.pointerType === "touch") return;
@@ -331,7 +334,7 @@ export function MoodHeatmap({
           <span key={label} className="flex items-center gap-1">
             <div
               className="h-3 w-3 rounded-sm"
-              style={{ backgroundColor: color, opacity: 0.55 }}
+              style={{ backgroundColor: color }}
             />
             {label}
           </span>
diff --git a/src/components/insights/mood/mood-time-of-day-chart.tsx b/src/components/insights/mood/mood-time-of-day-chart.tsx
index e1e8f61bc..5a5aa102b 100644
--- a/src/components/insights/mood/mood-time-of-day-chart.tsx
+++ b/src/components/insights/mood/mood-time-of-day-chart.tsx
@@ -84,10 +84,9 @@ export function MoodTimeOfDayChart({
             data={data}
             margin={{ top: 8, right: 12, bottom: 8, left: 0 }}
           >
-            {/* Muted chart language — same treatment as the weekday/distribution
-                siblings: `--muted-foreground` axis ticks, a quiet comment-grey
-                target guide, and 0.55 bar fill so the level hues inform without
-                shouting. */}
+            {/* Quiet chart language — `--muted-foreground` axis ticks and a
+                comment-grey target guide. The bars themselves render at full
+                saturation (v1.19.1) so the mood level hues read clearly. */}
             <XAxis
               dataKey="label"
               tick={{ fontSize: 11, fill: "var(--muted-foreground)" }}
@@ -130,7 +129,10 @@ export function MoodTimeOfDayChart({
                 ];
               }}
             />
-            <Bar dataKey="value" radius={[3, 3, 0, 0]} fillOpacity={0.55}>
+            {/* v1.19.1 — populated buckets render at full saturation so the
+                level hues read clearly; only the no-data buckets keep the quiet
+                `--secondary` empty-state tint. */}
+            <Bar dataKey="value" radius={[3, 3, 0, 0]}>
               {data.map((row) => (
                 <Cell
                   key={row.bucket}
@@ -139,6 +141,7 @@ export function MoodTimeOfDayChart({
                       ? "var(--secondary)"
                       : colorForScore(row.avgScore)
                   }
+                  fillOpacity={row.avgScore == null ? 0.55 : 1}
                 />
               ))}
             </Bar>