mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 12:32:43 +00:00
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:
1 parent
33d7a381f6
commit
60a91afaee
2 files changed
+29
-8
No files matched your search
@@ -904,20 +904,19 @@ export default function InsightsPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-8">
|
<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
|
<InsightsPageHero
|
||||||
updatedAt={advisor.payload?.cachedAt ?? heroUpdatedAt}
|
updatedAt={advisor.payload?.cachedAt ?? heroUpdatedAt}
|
||||||
onRegenerate={advisor.regenerate}
|
onRegenerate={advisor.regenerate}
|
||||||
regenerating={advisor.isRegenerating}
|
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
|
{/* v1.4.16 phase D reconcile (CRITICAL C1) — wire the polished
|
||||||
`<InsightAdvisorCard>` (severity-ordered recommendations grid +
|
`<InsightAdvisorCard>` (severity-ordered recommendations grid +
|
||||||
per-rec rationale expand + confidence meter + thumbs feedback +
|
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-generated"` — "Generated <time>"
|
||||||
* - `data-slot="insights-page-hero-baseline"` — "Based on …"
|
* - `data-slot="insights-page-hero-baseline"` — "Based on …"
|
||||||
* - `data-slot="insights-page-hero-regenerate"` — regenerate button
|
* - `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 {
|
interface InsightsPageHeroProps {
|
||||||
@@ -38,6 +41,16 @@ interface InsightsPageHeroProps {
|
|||||||
onRegenerate?: () => void;
|
onRegenerate?: () => void;
|
||||||
/** Disables the regenerate button + flips the icon to a spinner. */
|
/** Disables the regenerate button + flips the icon to a spinner. */
|
||||||
regenerating?: boolean;
|
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,
|
updatedAt,
|
||||||
onRegenerate,
|
onRegenerate,
|
||||||
regenerating = false,
|
regenerating = false,
|
||||||
|
metaSlot,
|
||||||
}: InsightsPageHeroProps) {
|
}: InsightsPageHeroProps) {
|
||||||
const { t } = useTranslations();
|
const { t } = useTranslations();
|
||||||
const generatedLine = updatedAt
|
const generatedLine = updatedAt
|
||||||
@@ -113,6 +127,14 @@ export function InsightsPageHero({
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
{metaSlot && (
|
||||||
|
<div
|
||||||
|
data-slot="insights-page-hero-meta-slot"
|
||||||
|
className="flex flex-wrap items-center gap-2 pt-2"
|
||||||
|
>
|
||||||
|
{metaSlot}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
{onRegenerate && (
|
{onRegenerate && (
|
||||||
<div className="flex shrink-0 items-start">
|
<div className="flex shrink-0 items-start">
|
||||||
|
|||||||
Reference in new issue
Block a user