mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-09 04:50:59 +00:00
Marc-André Bombeck
a589e15f86
The hub arranges and picks what the dashboard, insights and each module show and holds no theme control, so "Appearance" promised something it does not have. It reads "Layout" in every locale, and its subtitle says what it does. In German "Darstellung" now names only the account page's language-and-units card.
68 lines
2.5 KiB
TypeScript
68 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ChevronRight } from "lucide-react";
|
|
|
|
import { useAuth } from "@/hooks/use-auth";
|
|
import { useMounted } from "@/hooks/use-mounted";
|
|
import { useTranslations } from "@/lib/i18n/context";
|
|
import { SettingsCard } from "./settings-card";
|
|
import { isSurfaceVisible } from "@/lib/modules/surface";
|
|
import { LAYOUT_GROUPS } from "./layout-groups";
|
|
|
|
/**
|
|
* v1.25.11 (#148) — the "Layout" hub (slug stays `layout`).
|
|
*
|
|
* The hub is a navigable index, NOT a stacked composition: it lists each
|
|
* module as a clickable row (title + description + chevron) that opens the
|
|
* module's own subpage at `/settings/layout/<id>`. Nothing is stacked inline;
|
|
* the per-module view/sort surfaces live on their subpages so the hub reads as
|
|
* a short, scannable directory. The visible page heading + subtitle
|
|
* ("Layout" / "Choose what …") are painted by `SettingsShell` from the
|
|
* `layout` slug; this body renders only the row list.
|
|
*
|
|
* Per-module gating fails OPEN (`!== false`): a missing key reads as enabled so
|
|
* a section never silently disappears. Groups with no owner in the surface
|
|
* map (`settings-layout:<id>`) always
|
|
* render. The filter is gated on a post-mount flag (`useMounted()`) so SSR and
|
|
* the first client paint ALWAYS emit the same fail-open list — the same
|
|
* hydration-stability contract the shell nav uses, so the module filter can
|
|
* never produce a React #418 mismatch on this surface.
|
|
*/
|
|
export function LayoutSection() {
|
|
const { t } = useTranslations();
|
|
const { user } = useAuth();
|
|
|
|
const hydrated = useMounted();
|
|
const modules = user?.modules;
|
|
const visibleGroups = LAYOUT_GROUPS.filter(
|
|
(group) =>
|
|
!hydrated || isSurfaceVisible(`settings-layout:${group.id}`, modules),
|
|
);
|
|
|
|
return (
|
|
<SettingsCard flush className="divide-border divide-y">
|
|
{visibleGroups.map((group) => (
|
|
<Link
|
|
key={group.id}
|
|
href={`/settings/layout/${group.id}`}
|
|
className="hover:bg-accent/50 flex items-center justify-between gap-4 p-4 transition-colors md:p-6"
|
|
>
|
|
<div className="min-w-0 space-y-0.5">
|
|
<p className="text-foreground text-sm font-medium">
|
|
{t(group.titleKey)}
|
|
</p>
|
|
<p className="text-muted-foreground text-sm">
|
|
{t(group.descriptionKey)}
|
|
</p>
|
|
</div>
|
|
<ChevronRight
|
|
className="text-muted-foreground h-5 w-5 shrink-0"
|
|
aria-hidden="true"
|
|
/>
|
|
</Link>
|
|
))}
|
|
</SettingsCard>
|
|
);
|
|
}
|