fix(insights): place metric detail back-nav above the heading

The metric values subpage (/insights/values/[type]) and the workout
detail page rendered the back link as the first child of SubPageShell,
which paints it below the page heading. Add an optional backLink slot to
SubPageShell that renders above the header — the standard back-nav
placement — and move both pages' back links into it.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
(cherry picked from commit 72a73a52eb8295c9e70a3456972476b8c4469f07)
This commit is contained in:
Marc-André Bombeck committed 2026-06-02 13:26:10 +02:00
1 parent a9aa0b8531
commit ee845946fa
5 files changed
+57 -48

No files matched your search

+14 -13
View File
@@ -47,20 +47,21 @@ export default function InsightsMetricValuesPage({
<SubPageShell
title={t("insights.subPage.valuesPageTitle", { metric: metricLabel })}
description={t("insights.subPage.valuesPageDescription")}
backLink={
<Button
asChild
variant="ghost"
size="sm"
data-slot="metric-values-back"
className="-ml-2 w-fit"
>
<Link href="/insights">
<ArrowLeft className="mr-1 size-4" aria-hidden="true" />
{t("insights.subPage.valuesBack")}
</Link>
</Button>
}
>
<Button
asChild
variant="ghost"
size="sm"
data-slot="metric-values-back"
className="-ml-2 w-fit"
>
<Link href="/insights">
<ArrowLeft className="mr-1 size-4" aria-hidden="true" />
{t("insights.subPage.valuesBack")}
</Link>
</Button>
<MeasurementList lockedType={type} />
</SubPageShell>
);
+14 -12
View File
@@ -40,19 +40,21 @@ export default function InsightsWorkoutDetailPage({
<SubPageShell
title={t("insights.workouts.title")}
description={t("insights.workouts.description")}
backLink={
<Button
asChild
variant="ghost"
size="sm"
data-slot="workout-detail-back"
className="-ml-2 w-fit"
>
<Link href="/insights/workouts">
<ArrowLeft className="mr-1 size-4" />
{t("insights.workouts.detail.backToList")}
</Link>
</Button>
}
>
<Button
asChild
variant="ghost"
size="sm"
data-slot="workout-detail-back"
>
<Link href="/insights/workouts">
<ArrowLeft className="mr-1 size-4" />
{t("insights.workouts.detail.backToList")}
</Link>
</Button>
{isLoading ? (
<div data-slot="workout-detail-loading" className="space-y-3">
<Skeleton className="h-20 w-full rounded-lg" />
-23
View File
@@ -1,23 +0,0 @@
import { permanentRedirect } from "next/navigation";
/**
* v1.4.34 IW-D — `/settings/sources` permanent redirect.
*
* The Sources settings section was merged into `/settings/thresholds`
* (now titled "Targets & Sources" / "Zielwerte & Quellen"). The two
* editors share the same per-metric configuration shelf and reading
* them side-by-side on one page matches how a user actually thinks
* about metric configuration ("for this metric, which sources do I
* trust AND what range counts as healthy?"). Per
* `.planning/research/v1434-r-2-carryover-scope.md` §7 and
* `.planning/round-v1433-audit-menu.md` §7.1 (item 3).
*
* 308 (`permanentRedirect`) keeps the request method intact so any
* external system that POSTs (none today, but cheap insurance) follows
* through with its original method. Existing bookmarks, iOS Settings
* deep-links, and any docs that referenced `/settings/sources`
* continue to resolve.
*/
export default function SettingsSourcesRedirect(): never {
permanentRedirect("/settings/thresholds");
}
@@ -92,6 +92,23 @@ describe("<SubPageShell>", () => {
expect(probeIdx).toBeLessThan(headerEnd);
});
it("renders the back link above the heading when supplied", () => {
const html = render(
<SubPageShell
title="Weight"
backLink={<a data-slot="back-probe">back</a>}
>
<span />
</SubPageShell>,
);
// v1.8.7.1 — the back-nav leads the page, above the heading.
const backIdx = html.indexOf('data-slot="back-probe"');
const headerIdx = html.indexOf("<header");
expect(backIdx).toBeGreaterThan(-1);
expect(headerIdx).toBeGreaterThan(-1);
expect(backIdx).toBeLessThan(headerIdx);
});
it("mounts no coach launch surface when coachLaunch is omitted", () => {
const html = render(
<SubPageShell title="Pulse">
@@ -31,6 +31,15 @@ import { cn } from "@/lib/utils";
export interface SubPageShellProps {
title: string;
/**
* v1.8.7.1 — optional back-navigation control rendered ABOVE the page
* heading, the standard back-nav placement. Detail/values sub-pages
* (`/insights/values/[type]`, `/insights/workouts/[id]`) pass their
* "back to …" link here so it leads the page rather than trailing the
* content. Omitted on the mother page and category pages reached via the
* tab strip.
*/
backLink?: ReactNode;
/** Optional accent badge (status, dataset coverage, …). */
badge?: ReactNode;
/**
@@ -108,6 +117,7 @@ export interface SubPageShellProps {
export function SubPageShell({
title,
backLink,
badge,
description,
explainerMetric,
@@ -142,6 +152,8 @@ export function SubPageShell({
return (
<div data-slot="insights-subpage" className="space-y-4 md:space-y-5">
{/* v1.8.7.1 — back-nav leads the page, above the heading. */}
{backLink}
<header className="space-y-1.5">
{/* v1.8.6 — the heading row pins the Coach icon top-right while the
title / nudge / badge wrap together on the left.