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

@@ -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.