From 60a91afaee8c1252868796fc1691bd351c69de42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 10 May 2026 13:11:13 +0200
Subject: [PATCH] feat(insights): comparison toggle on-surface in hero meta
 band
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move the Vormonat / Vorjahr comparison toggle from a standalone row
below the page hero into the hero's own meta slot. The previous
layout read as three stacked cards with separate header / control
bands — hero, then comparison toggle, then advisor card — and the
toggle row had no other content, so it just hung there in the gap.

Folding the toggle into the hero clusters every page-level control
(personal-baseline indicator, Generated timestamp, Regenerate
button, comparison baseline) into one band. The hero now exposes a
generic `metaSlot` prop so future page-level controls can join the
band without another component refactor.

Settings → Dashboard remains the power-user backdoor for either
surface; the dashboard's on-surface toggle stays gone (Marc said it
crowded the tile strip too much).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/app/insights/page.tsx                     | 15 ++++++-------
 .../insights/insights-page-hero.tsx           | 22 +++++++++++++++++++
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/app/insights/page.tsx b/src/app/insights/page.tsx
index 98d378ea1..8b2f5839e 100644
--- a/src/app/insights/page.tsx
+++ b/src/app/insights/page.tsx
@@ -904,20 +904,19 @@ export default function InsightsPage() {
 
   return (
     <div className="space-y-8">
+      {/* v1.4.19 A3 — comparison toggle is now mounted INSIDE the hero
+          meta band (alongside personal-baseline indicator + Generated
+          timestamp + Regenerate button). The previous standalone band
+          below the hero made the page read as three stacked cards
+          with separate header / control rows; folding the toggle into
+          the hero clusters every page-level control in one place. */}
       <InsightsPageHero
         updatedAt={advisor.payload?.cachedAt ?? heroUpdatedAt}
         onRegenerate={advisor.regenerate}
         regenerating={advisor.isRegenerating}
+        metaSlot={<CompareToggle />}
       />
 
-      {/* v1.4.16 phase D reconcile (CRITICAL C3) — on-surface comparison
-          toggle. Mirrors the dashboard placement so flipping Vormonat /
-          Vorjahr is one tap on the page that uses it, not 3 clicks
-          via Settings → Dashboard. */}
-      <div className="flex items-center justify-end">
-        <CompareToggle />
-      </div>
-
       {/* v1.4.16 phase D reconcile (CRITICAL C1) — wire the polished
           `<InsightAdvisorCard>` (severity-ordered recommendations grid +
           per-rec rationale expand + confidence meter + thumbs feedback +
diff --git a/src/components/insights/insights-page-hero.tsx b/src/components/insights/insights-page-hero.tsx
index c6155a2ee..bcb104050 100644
--- a/src/components/insights/insights-page-hero.tsx
+++ b/src/components/insights/insights-page-hero.tsx
@@ -29,6 +29,9 @@ import { useTranslations } from "@/lib/i18n/context";
  *   - `data-slot="insights-page-hero-generated"`    — "Generated <time>"
  *   - `data-slot="insights-page-hero-baseline"`     — "Based on …"
  *   - `data-slot="insights-page-hero-regenerate"`   — regenerate button
+ *   - `data-slot="insights-page-hero-meta-slot"`    — v1.4.19 A3 page-
+ *                                                     level meta slot
+ *                                                     (comparison toggle)
  */
 
 interface InsightsPageHeroProps {
@@ -38,6 +41,16 @@ interface InsightsPageHeroProps {
   onRegenerate?: () => void;
   /** Disables the regenerate button + flips the icon to a spinner. */
   regenerating?: boolean;
+  /**
+   * v1.4.19 A3 — page-level metadata slot. The comparison-baseline
+   * toggle is mounted into the hero meta row (next to the personal-
+   * baseline indicator + the "Generated …" caption) instead of
+   * standing alone above the advisor card. Keeps every page-level
+   * control in one band so the surface stops feeling like three
+   * stacked cards with separate refresh / toggle / header
+   * affordances.
+   */
+  metaSlot?: React.ReactNode;
 }
 
 /**
@@ -64,6 +77,7 @@ export function InsightsPageHero({
   updatedAt,
   onRegenerate,
   regenerating = false,
+  metaSlot,
 }: InsightsPageHeroProps) {
   const { t } = useTranslations();
   const generatedLine = updatedAt
@@ -113,6 +127,14 @@ export function InsightsPageHero({
               </>
             )}
           </div>
+          {metaSlot && (
+            <div
+              data-slot="insights-page-hero-meta-slot"
+              className="flex flex-wrap items-center gap-2 pt-2"
+            >
+              {metaSlot}
+            </div>
+          )}
         </div>
         {onRegenerate && (
           <div className="flex shrink-0 items-start">