mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 20:42:43 +00:00
Marc-André Bombeck
c68e833dcc
/topics shows a tile per topic the record holds data for, and names the empty topics and the module-hidden ones once each. /topics/<topic> shows the topic today, its signals side by side over 7, 30, 90 days or a year against their usual range, how they move together, their trends, its blocks, the single-metric pages behind it and what it is missing. Every topic links into the metric pages, which stay as they are, and each page ends on a neutral note that this is a preview. Settings > System > Preview features is listed again and switches the area on for the person reading. While it is on, the sidebar carries a Topics entry with a Beta badge directly below Insights and the phone's More sheet leads with a Topics tile; the bottom bar does not change. The pages leave for Insights when the switch is off. The charts load through the shared chart runtime. The sidebar rows move into their own module and the More sheet tile into its own component, so neither shell file grows; the lab trend wording is shared between the marker page and the metabolism topic. Copy in all nine locales.
115 lines
4.0 KiB
TypeScript
115 lines
4.0 KiB
TypeScript
"use client";
|
||
|
||
/**
|
||
* The rail's rows: the height steps every row shares and one destination
|
||
* row, collapsed or expanded. Split from `sidebar-nav.tsx`, which keeps the
|
||
* shell, the footer and the user menu.
|
||
*/
|
||
import Link from "next/link";
|
||
|
||
import type { NavDestination } from "@/components/layout/nav-model";
|
||
import { PreviewBadge } from "@/components/topics/preview-badge";
|
||
import {
|
||
Tooltip,
|
||
TooltipContent,
|
||
TooltipTrigger,
|
||
} from "@/components/ui/tooltip";
|
||
import type { medicationsPrefetchIntentProps } from "@/lib/queries/prefetch-medications";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
/**
|
||
* Height-based density for the rail. A 13-inch laptop at 100 % zoom leaves
|
||
* the browser roughly 700–860 px, and the full destination list plus the
|
||
* footer rows did not fit: the list scrolled, and on a classic-scrollbar
|
||
* platform (Windows) the rail grew a native scrollbar with arrow buttons.
|
||
* On short windows the rows close their gaps first, then step their height
|
||
* down; tall windows keep the roomy default. Desktop-only by construction —
|
||
* the rail is hidden below `md`, so the phone layout never sees these steps.
|
||
*
|
||
* Steps (rows are full-width, so the click target is the whole row):
|
||
* - default: 40 px rows, 4 px apart
|
||
* - max-height 940 px: gaps close (40 px pitch), list and user padding tighten
|
||
* - max-height 820 px: 36 px rows
|
||
* - max-height 740 px: 32 px rows — the one step under 40 px, taken only
|
||
* where the alternative is rows hidden behind a scroll edge
|
||
*/
|
||
// Disjoint height ranges, not nested max-heights: two arbitrary media
|
||
// variants on one property cascade in stylesheet order, not by how narrow
|
||
// the query is, so a nested pair let the 36 px step win on a 720 px window.
|
||
// The height steps apply to a mouse only. Under a finger (a touch tablet)
|
||
// the rows keep the 44 px touch floor and the list scrolls behind its fades
|
||
// instead. A phone held sideways never sees the rail: it keeps the phone
|
||
// shell (`shell-mobile`).
|
||
const RAIL_ROW_HEIGHT =
|
||
"min-h-10 pointer-coarse:min-h-11 [@media(hover:hover)_and_(pointer:fine)_and_(740px<height<=820px)]:min-h-9 [@media(hover:hover)_and_(pointer:fine)_and_(height<=740px)]:min-h-8";
|
||
export const RAIL_LIST_GAP = "space-y-1 [@media(max-height:940px)]:space-y-0";
|
||
export const RAIL_SHORT_PY = "[@media(max-height:940px)]:py-1.5";
|
||
|
||
/** Rail row, collapsed (icon only) or expanded (icon + label). */
|
||
export function railRowClass(collapsed: boolean): string {
|
||
return cn(
|
||
"flex items-center rounded-lg transition-colors",
|
||
RAIL_ROW_HEIGHT,
|
||
collapsed
|
||
? "justify-center px-2.5"
|
||
: "gap-3 px-3 py-1.5 text-sm font-medium",
|
||
);
|
||
}
|
||
|
||
/** One destination in the rail: an icon row when collapsed, icon and label when expanded. */
|
||
export function SidebarNavItem({
|
||
item,
|
||
label,
|
||
badge,
|
||
active,
|
||
collapsed,
|
||
intent,
|
||
}: {
|
||
item: NavDestination;
|
||
label: string;
|
||
/** The Beta mark of a preview entry, or null. */
|
||
badge: string | null;
|
||
active: boolean;
|
||
collapsed: boolean;
|
||
/** The medications prefetch handlers, on that one row. */
|
||
intent?: ReturnType<typeof medicationsPrefetchIntentProps>;
|
||
}) {
|
||
const className = cn(
|
||
railRowClass(collapsed),
|
||
active ? "bg-primary/10 text-primary" : "text-foreground hover:bg-accent",
|
||
);
|
||
if (collapsed) {
|
||
return (
|
||
<Tooltip>
|
||
<TooltipTrigger asChild>
|
||
<Link
|
||
href={item.href}
|
||
aria-current={active ? "page" : undefined}
|
||
data-tour-id={item.tourId}
|
||
{...intent}
|
||
className={className}
|
||
>
|
||
<item.icon className="h-4 w-4" />
|
||
</Link>
|
||
</TooltipTrigger>
|
||
<TooltipContent side="right" sideOffset={8}>
|
||
{label}
|
||
</TooltipContent>
|
||
</Tooltip>
|
||
);
|
||
}
|
||
return (
|
||
<Link
|
||
href={item.href}
|
||
aria-current={active ? "page" : undefined}
|
||
data-tour-id={item.tourId}
|
||
{...intent}
|
||
className={className}
|
||
>
|
||
<item.icon className="h-4 w-4" />
|
||
{label}
|
||
{badge ? <PreviewBadge label={badge} className="ml-auto" /> : null}
|
||
</Link>
|
||
);
|
||
}
|