mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-10 13:22:14 +00:00
Marc-André Bombeck
774bc37382
The Layout hub links, the global injection-site exclusion card, and the mobile passkey list hand-rolled their own card surfaces with rounded-lg or sm:p-5 padding, drifting from the SettingsCard contract (rounded-xl, p-4 md:p-6). Wrap them in SettingsCard so every settings surface paints the same radius, border, and padding. Content and behaviour are unchanged.
90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import {
|
|
ChevronRight,
|
|
LayoutDashboard,
|
|
TrendingUp,
|
|
type LucideIcon,
|
|
} from "lucide-react";
|
|
|
|
import { useTranslations } from "@/lib/i18n/context";
|
|
import { SettingsCard } from "./settings-card";
|
|
|
|
/**
|
|
* v1.17.1 (F-2) — the one "Layout & Personalization" home.
|
|
*
|
|
* Before this section, "how my app is laid out" was scattered across
|
|
* several unrelated settings sections with no shared framing. This
|
|
* section is the single front door for the arrangement editors: it
|
|
* presents them as one consistent set of cards and links to each editor,
|
|
* which keep their own routes and mutation flows intact.
|
|
*
|
|
* v1.18.0 (S5) — Medications (Medikamente) and Mood (Stimmung) graduated
|
|
* to their own top-level nav entries, so the hub now hosts only the
|
|
* dashboard + insights arrangement editors.
|
|
*/
|
|
interface LayoutLink {
|
|
href: string;
|
|
icon: LucideIcon;
|
|
titleKey: string;
|
|
descriptionKey: string;
|
|
}
|
|
|
|
const LAYOUT_LINKS: ReadonlyArray<LayoutLink> = [
|
|
{
|
|
href: "/settings/dashboard",
|
|
icon: LayoutDashboard,
|
|
titleKey: "settings.sections.layout.dashboard.title",
|
|
descriptionKey: "settings.sections.layout.dashboard.description",
|
|
},
|
|
{
|
|
href: "/settings/insights",
|
|
icon: TrendingUp,
|
|
titleKey: "settings.sections.layout.insights.title",
|
|
descriptionKey: "settings.sections.layout.insights.description",
|
|
},
|
|
// v1.18.0 (S5) — Medications (Medikamente) and Mood (Stimmung) graduated
|
|
// to their own top-level nav entries, so they are no longer linked from
|
|
// the Layout hub. Only the dashboard + insights arrangement editors
|
|
// remain here.
|
|
];
|
|
|
|
export function LayoutSection() {
|
|
const { t } = useTranslations();
|
|
|
|
// The visible heading + subtitle are painted by `SettingsShell` from the
|
|
// section slug; this body is the hub link list.
|
|
return (
|
|
<ul className="space-y-3">
|
|
{LAYOUT_LINKS.map((link) => {
|
|
const Icon = link.icon;
|
|
return (
|
|
<li key={link.href}>
|
|
<SettingsCard
|
|
as={Link}
|
|
href={link.href}
|
|
className="hover:bg-accent/40 group flex items-center gap-4 transition-colors"
|
|
>
|
|
<Icon
|
|
className="text-muted-foreground h-5 w-5 shrink-0"
|
|
aria-hidden="true"
|
|
/>
|
|
<div className="min-w-0 flex-1 space-y-0.5">
|
|
<p className="text-sm font-semibold">{t(link.titleKey)}</p>
|
|
<p className="text-muted-foreground text-xs">
|
|
{t(link.descriptionKey)}
|
|
</p>
|
|
</div>
|
|
<ChevronRight
|
|
className="text-muted-foreground/60 group-hover:text-foreground h-4 w-4 shrink-0 transition-colors"
|
|
aria-hidden="true"
|
|
/>
|
|
</SettingsCard>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
);
|
|
}
|