feat(topics): add the Topics preview area, its navigation entry and its switch

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

src/components/settings/__tests__/preview-section.test.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import { I18nProvider } from "@/lib/i18n/context";
+import { queryKeys } from "@/lib/query-keys";
+import { PreviewSection } from "../preview-section";
+import { primeLocales } from "@/__tests__/helpers/prime-locales";
+
+primeLocales("de");
+
+function render(topics: boolean | undefined, locale: "en" | "de" = "en") {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false, refetchOnMount: false } },
+  });
+  if (topics !== undefined) {
+    client.setQueryData(queryKeys.previewFeatures(), { topics });
+  }
+  return renderToStaticMarkup(
+    <I18nProvider initialLocale={locale}>
+      <QueryClientProvider client={client}>
+        <PreviewSection />
+      </QueryClientProvider>
+    </I18nProvider>,
+  );
+}
+
+const switchState = (html: string, state: "true" | "false") =>
+  new RegExp(
+    `data-slot="settings-preview-topics-switch"[^>]*aria-checked="${state}"|aria-checked="${state}"[^>]*data-slot="settings-preview-topics-switch"`,
+  ).test(html);
+
+describe("<PreviewSection>", () => {
+  it("shows the Topics switch off by default, saved on change", () => {
+    const html = render(false);
+    expect(switchState(html, "false")).toBe(true);
+    expect(html).toContain("Topics");
+    expect(html).toContain('data-slot="preview-badge"');
+    // A switch, no Save: one save model per card.
+    expect(html).not.toContain('type="submit"');
+    // Nothing to open while it is off.
+    expect(html).not.toContain('data-slot="settings-preview-topics-open"');
+  });
+
+  it("reads on once the person switched it on and offers the way in", () => {
+    const html = render(true);
+    expect(switchState(html, "true")).toBe(true);
+    expect(html).toMatch(
+      /data-slot="settings-preview-topics-open"[^>]*href="\/topics"|href="\/topics"[^>]*data-slot="settings-preview-topics-open"/,
+    );
+  });
+
+  it("names the switch by its visible title and leaks no raw key", () => {
+    const html = render(false, "de");
+    expect(html).toContain('aria-labelledby="settings-preview-topics-title"');
+    expect(html).toContain("Themen");
+    expect(html).not.toContain("settings.preview.");
+    expect(html).not.toContain("nav.previewBadge");
+  });
+});

src/components/settings/__tests__/settings-shell.test.tsx

@@ -170,19 +170,12 @@ describe("SETTINGS_SECTION_SLUGS", () => {
       // v1.23 — "Data & Privacy" assembles the export / deletion / retention /
       // encryption / session / activity pieces into one pane, after `advanced`.
       "privacy",
+      // Per-user preview opt-ins, in the System group before About.
+      "preview",
       "about",
     ]);
   });
 
-  it("lists no Preview features page until the topic pages ship", () => {
-    // The stored flag and its API stay; the page and its nav entry return
-    // with the first preview the switch actually turns on.
-    expect(isSettingsSectionSlug("preview")).toBe(false);
-    expect(SETTINGS_SECTIONS.some((s) => s.slug === ("preview" as never))).toBe(
-      false,
-    );
-  });
-
   it("`isSettingsSectionSlug` accepts known slugs and rejects others", () => {
     for (const slug of SETTINGS_SECTION_SLUGS) {
       expect(isSettingsSectionSlug(slug)).toBe(true);
@@ -249,6 +242,7 @@ describe("<SettingsShell>", () => {
       gesundheitsakte: "data",
       privacy: "data",
       advanced: "data",
+      preview: "system",
       about: "system",
     });
     // Every routable section has a nav entry, and nothing else does.

src/components/settings/preview-section.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+/**
+ * Settings > System > Preview features.
+ *
+ * One switch per preview feature, each off until the person turns it on, each
+ * saved the moment it changes (`PATCH /api/settings/preview-features`). A
+ * preview adds something beside what is there and never replaces a page.
+ *
+ * The switch is the person's own and stays theirs while they act on somebody
+ * else's record. Saving refreshes the account payload too, because the
+ * navigation reads the flag from there: the Topics entry appears or goes the
+ * moment the switch moves.
+ */
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import Link from "next/link";
+import { Layers } from "lucide-react";
+
+import { toastWrittenOutcome } from "@/components/outcome/outcome-toast";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { SettingsCardHeader } from "@/components/settings/_card-header";
+import { PreviewBadge } from "@/components/topics/preview-badge";
+import { InlineAction } from "@/components/ui/inline-action";
+import { QueryErrorRow } from "@/components/ui/query-error-row";
+import { Switch } from "@/components/ui/switch";
+import { apiGet, apiPatch } from "@/lib/api/api-fetch";
+import { showErrorToast } from "@/lib/errors/error-toast";
+import { useTranslations } from "@/lib/i18n/context";
+import { queryKeys } from "@/lib/query-keys";
+import {
+  DEFAULT_PREVIEW_FEATURES,
+  type PreviewFeatures,
+} from "@/lib/settings/preview-features";
+
+export function PreviewSection() {
+  const { t } = useTranslations();
+  const queryClient = useQueryClient();
+  const key = queryKeys.previewFeatures();
+
+  const query = useQuery({
+    queryKey: key,
+    queryFn: () => apiGet<PreviewFeatures>("/api/settings/preview-features"),
+  });
+  const features = query.data ?? DEFAULT_PREVIEW_FEATURES;
+
+  const toggle = useMutation({
+    mutationKey: key,
+    mutationFn: (topics: boolean) =>
+      apiPatch<PreviewFeatures>("/api/settings/preview-features", { topics }),
+    onMutate: async (topics) => {
+      await queryClient.cancelQueries({ queryKey: key });
+      const previous = queryClient.getQueryData<PreviewFeatures>(key);
+      queryClient.setQueryData<PreviewFeatures>(key, {
+        ...(previous ?? DEFAULT_PREVIEW_FEATURES),
+        topics,
+      });
+      return { previous };
+    },
+    onSuccess: (saved, topics) => {
+      if (saved) queryClient.setQueryData(key, saved);
+      void queryClient.invalidateQueries({ queryKey: queryKeys.authMe() });
+      toastWrittenOutcome(
+        "success",
+        topics
+          ? t("settings.preview.topics.savedOn")
+          : t("settings.preview.topics.savedOff"),
+      );
+    },
+    onError: (failure, _topics, context) => {
+      queryClient.setQueryData(key, context?.previous);
+      showErrorToast(t("settings.savingError"), { cause: failure });
+    },
+  });
+
+  return (
+    <SettingsCard data-slot="settings-preview-topics">
+      <SettingsCardHeader
+        anchor="preview-topics"
+        icon={Layers}
+        title={t("settings.preview.topics.title")}
+        titleId="settings-preview-topics-title"
+        titleAccessory={<PreviewBadge label={t("nav.previewBadge")} />}
+        description={t("settings.preview.topics.description")}
+        status={
+          <Switch
+            data-slot="settings-preview-topics-switch"
+            checked={features.topics}
+            disabled={query.isLoading || toggle.isPending}
+            onCheckedChange={(next) => toggle.mutate(next)}
+            aria-labelledby="settings-preview-topics-title"
+          />
+        }
+      />
+      {query.isError ? (
+        <QueryErrorRow
+          inset
+          error={query.error}
+          slot="settings-preview-error"
+          message={t("settings.preview.loadError")}
+          onRetry={() => void query.refetch()}
+        />
+      ) : null}
+      <p className="text-sm">{t("settings.preview.topics.detail")}</p>
+      {features.topics ? (
+        <p className="text-sm">
+          <InlineAction asChild tone="primary" size="sm">
+            <Link href="/topics" data-slot="settings-preview-topics-open">
+              {t("settings.preview.topics.open")}
+            </Link>
+          </InlineAction>
+        </p>
+      ) : null}
+    </SettingsCard>
+  );
+}

src/components/settings/settings-section-loader.tsx

@@ -124,6 +124,10 @@ const LOADERS: Record<
     import("@/components/settings/privacy-section").then(
       (m) => m.PrivacySection,
     ),
+  preview: () =>
+    import("@/components/settings/preview-section").then(
+      (m) => m.PreviewSection,
+    ),
 };
 
 const SECTIONS: Record<SettingsSectionSlug, ComponentType<SectionProps>> = {
@@ -158,6 +162,7 @@ const SECTIONS: Record<SettingsSectionSlug, ComponentType<SectionProps>> = {
   export: dynamic(LOADERS.export, { loading: () => <SectionLoading /> }),
   advanced: dynamic(LOADERS.advanced, { loading: () => <SectionLoading /> }),
   privacy: dynamic(LOADERS.privacy, { loading: () => <SectionLoading /> }),
+  preview: dynamic(LOADERS.preview, { loading: () => <SectionLoading /> }),
 };
 
 /**

src/components/settings/settings-shell.tsx

@@ -26,6 +26,7 @@ import {
   CloudSun,
   Download,
   FileHeart,
+  FlaskConical,
   Gauge,
   Info,
   KeyRound,
@@ -274,6 +275,12 @@ export const SETTINGS_SECTIONS: readonly SettingsSection[] = [
     group: "data",
   },
   // ── System ──
+  {
+    slug: "preview",
+    titleKey: "settings.sections.preview.title",
+    icon: FlaskConical,
+    group: "system",
+  },
   {
     slug: "about",
     titleKey: "settings.sections.about.title",