From ed99d207e426dc8365e984ab5d48978a286ba582 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Sat, 20 Jun 2026 16:56:42 +0200 Subject: [PATCH] fix(settings): align the Vorsorge settings card with the shared pattern Adopt the standard SettingsCard + SettingsCardHeader contract for the three Vorsorge settings groups (view, order, manage): bordered card surface, neutral muted section icon, text-lg title, and a short muted description, replacing the bare sections with text-sm headings so the surface reads like every other Settings section. Add a reorder description string across all locales. --- messages/de.json | 1 + messages/en.json | 1 + messages/es.json | 1 + messages/fr.json | 1 + messages/it.json | 1 + messages/pl.json | 1 + .../vorsorge-settings.tsx | 157 ++++++++++-------- 7 files changed, 90 insertions(+), 73 deletions(-) diff --git a/messages/de.json b/messages/de.json index 17022908c..ee24a0605 100644 --- a/messages/de.json +++ b/messages/de.json @@ -6472,6 +6472,7 @@ "viewDescription": "Lege fest, ob die Einträge als Karten oder als kompakte Liste angezeigt werden.", "reorder": { "heading": "Reihenfolge", + "description": "Ziehe die Einträge, um ihre Reihenfolge festzulegen.", "empty": "Noch keine Einträge zum Sortieren." } }, diff --git a/messages/en.json b/messages/en.json index 2f03a8198..e531d45ae 100644 --- a/messages/en.json +++ b/messages/en.json @@ -6472,6 +6472,7 @@ "viewDescription": "Choose whether entries show as cards or as a compact list.", "reorder": { "heading": "Order", + "description": "Drag the entries to set the order they appear in.", "empty": "No entries to reorder yet." } }, diff --git a/messages/es.json b/messages/es.json index 5612ce688..45552dd4d 100644 --- a/messages/es.json +++ b/messages/es.json @@ -6472,6 +6472,7 @@ "viewDescription": "Elige si las entradas se muestran como tarjetas o como lista compacta.", "reorder": { "heading": "Orden", + "description": "Arrastra las entradas para definir el orden en que aparecen.", "empty": "Aún no hay entradas para ordenar." } }, diff --git a/messages/fr.json b/messages/fr.json index fd4b6835b..bd8cfacd8 100644 --- a/messages/fr.json +++ b/messages/fr.json @@ -6472,6 +6472,7 @@ "viewDescription": "Choisissez si les entrées s'affichent en cartes ou en liste compacte.", "reorder": { "heading": "Ordre", + "description": "Faites glisser les entrées pour définir leur ordre d'affichage.", "empty": "Aucune entrée à réordonner pour l'instant." } }, diff --git a/messages/it.json b/messages/it.json index 1b26acae6..a2f2e8def 100644 --- a/messages/it.json +++ b/messages/it.json @@ -6472,6 +6472,7 @@ "viewDescription": "Scegli se le voci appaiono come schede o come elenco compatto.", "reorder": { "heading": "Ordine", + "description": "Trascina le voci per definire l'ordine in cui appaiono.", "empty": "Nessuna voce da riordinare." } }, diff --git a/messages/pl.json b/messages/pl.json index 4b7dc46f0..d0d4ade09 100644 --- a/messages/pl.json +++ b/messages/pl.json @@ -6472,6 +6472,7 @@ "viewDescription": "Wybierz, czy pozycje mają być pokazywane jako karty czy jako zwarta lista.", "reorder": { "heading": "Kolejność", + "description": "Przeciągnij pozycje, aby ustawić kolejność ich wyświetlania.", "empty": "Brak pozycji do uporządkowania." } }, diff --git a/src/components/measurement-reminders/vorsorge-settings.tsx b/src/components/measurement-reminders/vorsorge-settings.tsx index e710f983c..979394b31 100644 --- a/src/components/measurement-reminders/vorsorge-settings.tsx +++ b/src/components/measurement-reminders/vorsorge-settings.tsx @@ -10,10 +10,14 @@ * `useModuleListPrefs("vorsorge")`; the toggles persist through the existing * reminder PATCH route. */ +import { ArrowUpDown, LayoutGrid, ListChecks } from "lucide-react"; + import { Card, CardContent } from "@/components/ui/card"; import { Switch } from "@/components/ui/switch"; import { Skeleton } from "@/components/ui/skeleton"; import { useTranslations } from "@/lib/i18n/context"; +import { SettingsCard } from "@/components/settings/settings-card"; +import { SettingsCardHeader } from "@/components/settings/_card-header"; import { ModuleViewToggle } from "@/components/module-list/module-view-toggle"; import { ModuleOrderEditor, @@ -52,82 +56,89 @@ export function VorsorgeSettings() { : t("measurementReminders.selfPlanned"), })); + // v1.18.10 (W7) — the three Vorsorge settings groups adopt the shared + // `SettingsCard` + `SettingsCardHeader` contract (rounded-xl bordered + // surface, neutral muted icon, `text-lg` title, short muted description) + // so this surface reads like every other Settings section instead of bare + // `
` blocks with `text-sm` headings. return ( -
-
-
-

- {t("moduleList.viewHeading")} -

- -
-

- {t("moduleList.viewDescription")} -

-
+
+ + } + /> + -
-

- {t("moduleList.reorder.heading")} -

- {isLoading ? ( -
- {Array.from({ length: 3 }, (_, i) => ( - - ))} -
- ) : ( - - )} -
- -
-

- {t("measurementReminders.manage.title")} -

-

- {t("measurementReminders.manage.description")} -

- {isLoading ? ( - - ) : (reminders?.length ?? 0) === 0 ? ( -

- {t("measurementReminders.manage.empty")} -

- ) : ( - - - {ordered.map((reminder) => ( -
- - {resolveLabel(reminder, t)} - - - update.mutate({ - id: reminder.id, - body: { enabled: next }, - }) - } - disabled={update.isPending} - // L3 — label each row's Switch by its own name span so SR - // users hear the reminder name (plus the switch role's - // on/off state) instead of N identical generic labels. - aria-labelledby={`vorsorge-reminder-label-${reminder.id}`} - /> -
+ + +
+ {isLoading ? ( +
+ {Array.from({ length: 3 }, (_, i) => ( + ))} - - - )} -
+
+ ) : ( + + )} +
+ + + + +
+ {isLoading ? ( + + ) : (reminders?.length ?? 0) === 0 ? ( +

+ {t("measurementReminders.manage.empty")} +

+ ) : ( + + + {ordered.map((reminder) => ( +
+ + {resolveLabel(reminder, t)} + + + update.mutate({ + id: reminder.id, + body: { enabled: next }, + }) + } + disabled={update.isPending} + // L3 — label each row's Switch by its own name span so SR + // users hear the reminder name (plus the switch role's + // on/off state) instead of N identical generic labels. + aria-labelledby={`vorsorge-reminder-label-${reminder.id}`} + /> +
+ ))} + + + )} +
+ ); }