feat(insights): comparison toggle on-surface in hero meta band

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>
This commit is contained in:
Marc-André BombeckandClaude Opus 4.7 committed 2026-05-10 13:11:39 +02:00
1 parent 33d7a381f6
commit 60a91afaee
2 files changed
+29 -8

No files matched your search

+7 -8
View File
@@ -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 +
@@ -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">