From fbf14fceb82edb9c7ebb2328a5ffdf165c9438d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 10 May 2026 11:02:27 +0200
Subject: [PATCH] fix(mood-chart): make chartKey opt-in and don't leak overlay
 state across pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The MoodChart component defaulted chartKey to "mood", which meant
every consumer that omitted the prop — including /insights and the
recommendation-card mini chart — picked up the dashboard's persisted
overlay prefs and rendered the settings cog. Toggling Trend on
/insights would silently flip the dashboard mood chart on next paint
because both reads shared the same persistence key.

Drop the default; the dashboard now passes chartKey="mood" explicitly
and ad-hoc surfaces stay clean (no cog, default overlays). Also wraps
the title row's right-side container with flex-wrap + justify-end so
the 4 range tabs + cog don't push the card horizontally on Pixel-5
when the comparison caption is also in the row.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/app/page.tsx                     |  6 +++++-
 src/components/charts/mood-chart.tsx | 22 ++++++++++++++--------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 97622d85c..abbed4fd4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -979,7 +979,11 @@ export default function DashboardPage() {
             order: widgetOrder("mood"),
             count: moodSummary?.count ?? 0,
             node: (
-              <MoodChart key="mood-chart" compareBaseline={compareBaseline} />
+              <MoodChart
+                key="mood-chart"
+                compareBaseline={compareBaseline}
+                chartKey="mood"
+              />
             ),
           });
         }
diff --git a/src/components/charts/mood-chart.tsx b/src/components/charts/mood-chart.tsx
index 5c11b51c6..9a74a6404 100644
--- a/src/components/charts/mood-chart.tsx
+++ b/src/components/charts/mood-chart.tsx
@@ -77,7 +77,9 @@ interface MoodChartProps {
   /**
    * v1.4.18 — per-chart overlay-prefs key. When supplied, the chart
    * mounts the overlay-controls dropdown and reads its three toggle
-   * states from the persisted user prefs. Default: "mood".
+   * states from the persisted user prefs. Omit (default) when the
+   * chart is being rendered ad-hoc on /insights or any other read-
+   * only surface — the cog stays hidden and overlays are clean.
    */
   chartKey?: ChartOverlayKey;
 }
@@ -270,7 +272,7 @@ export function MoodChart({
   mini = false,
   windowOverride,
   compareBaseline = "none",
-  chartKey = "mood",
+  chartKey,
 }: MoodChartProps) {
   const { isAuthenticated } = useAuth();
   const { t } = useTranslations();
@@ -547,7 +549,7 @@ export function MoodChart({
             )}
           </div>
           {!mini && (
-            <div className="flex items-center gap-1">
+            <div className="flex flex-wrap items-center justify-end gap-1">
               {TIME_RANGES_KEYS.map((r) => (
                 <Button
                   key={r.labelKey}
@@ -562,11 +564,15 @@ export function MoodChart({
                 </Button>
               ))}
               {/* v1.4.18 — overlay-controls dropdown next to the
-                  range tabs. */}
-              <ChartOverlayControls
-                prefs={overlayPrefs.prefs}
-                onChange={overlayPrefs.setPrefs}
-              />
+                  range tabs. Only painted when the chart is bound to
+                  a persistent chartKey; ad-hoc usages (/insights mood
+                  preview, recommendation card) stay clean. */}
+              {chartKey ? (
+                <ChartOverlayControls
+                  prefs={overlayPrefs.prefs}
+                  onChange={overlayPrefs.setPrefs}
+                />
+              ) : null}
             </div>
           )}
         </div>