fix(illness): align the journal settings page with the Settings pattern

The illness settings sub-page rendered bare sections with text-sm headings
and no card surface, breaking from the canonical Settings layout the
Stimmung and Medikamente sections follow. Wrap each block in a SettingsCard
with a SettingsCardHeader (neutral icon, text-lg title, short muted
description), so the view and order controls read as first-class Settings
cards consistent with the rest of the surface.

messages/de.json

@@ -6692,6 +6692,10 @@
   "illness": {
     "title": "Krankheitstagebuch",
     "subtitle": "Ein rückblickendes Protokoll deiner Krankheits- und Beschwerde-Episoden.",
+    "settings": {
+      "viewDescription": "Wähle, ob Episoden als Karten oder als kompakte Liste erscheinen.",
+      "orderDescription": "Ziehe deine Episoden in die gewünschte Reihenfolge."
+    },
     "customize": "Krankheitstagebuch anpassen",
     "newEpisode": "Neue Episode",
     "logDay": "Tag erfassen",

messages/en.json

@@ -6692,6 +6692,10 @@
   "illness": {
     "title": "Illness journal",
     "subtitle": "A retrospective log of your illness and condition episodes.",
+    "settings": {
+      "viewDescription": "Choose whether episodes show as cards or as a compact list.",
+      "orderDescription": "Drag your episodes into the order you want to see them in."
+    },
     "customize": "Customize illness journal",
     "newEpisode": "New episode",
     "logDay": "Log a day",

messages/es.json

@@ -6692,6 +6692,10 @@
   "illness": {
     "title": "Diario de enfermedad",
     "subtitle": "Un registro retrospectivo de tus episodios de enfermedad y dolencias.",
+    "settings": {
+      "viewDescription": "Elige si los episodios se muestran como tarjetas o como lista compacta.",
+      "orderDescription": "Arrastra tus episodios al orden en que quieres verlos."
+    },
     "customize": "Personalizar diario de enfermedad",
     "newEpisode": "Nuevo episodio",
     "logDay": "Registrar un día",

messages/fr.json

@@ -6692,6 +6692,10 @@
   "illness": {
     "title": "Journal de maladie",
     "subtitle": "Un suivi rétrospectif de vos épisodes de maladie et d'affections.",
+    "settings": {
+      "viewDescription": "Choisis si les épisodes s'affichent en cartes ou en liste compacte.",
+      "orderDescription": "Fais glisser tes épisodes dans l'ordre où tu veux les voir."
+    },
     "customize": "Personnaliser le journal de maladie",
     "newEpisode": "Nouvel épisode",
     "logDay": "Enregistrer un jour",

messages/it.json

@@ -6692,6 +6692,10 @@
   "illness": {
     "title": "Diario delle malattie",
     "subtitle": "Un registro retrospettivo dei tuoi episodi di malattia e disturbi.",
+    "settings": {
+      "viewDescription": "Scegli se gli episodi appaiono come schede o come elenco compatto.",
+      "orderDescription": "Trascina i tuoi episodi nell'ordine in cui vuoi vederli."
+    },
     "customize": "Personalizza diario delle malattie",
     "newEpisode": "Nuovo episodio",
     "logDay": "Registra un giorno",

messages/pl.json

@@ -6692,6 +6692,10 @@
   "illness": {
     "title": "Dziennik chorób",
     "subtitle": "Retrospektywny zapis Twoich epizodów chorób i dolegliwości.",
+    "settings": {
+      "viewDescription": "Wybierz, czy epizody mają być wyświetlane jako karty czy zwarta lista.",
+      "orderDescription": "Przeciągnij epizody w kolejność, w jakiej chcesz je widzieć."
+    },
     "customize": "Dostosuj dziennik chorób",
     "newEpisode": "Nowy epizod",
     "logDay": "Zapisz dzień",

src/components/illness/illness-settings.tsx

@@ -6,8 +6,18 @@
  * Reached from the wrench beside the page's "hinzufügen" button. Lets the
  * user reorder conditions/episodes + pick the card-vs-list page view. Order
  * + view persist client-side via `useModuleListPrefs("illness")`.
+ *
+ * v1.18.9 — restructured onto the canonical Settings pattern: each block is a
+ * `<SettingsCard>` with a `<SettingsCardHeader>` (neutral icon + `text-lg`
+ * title + a short muted description), matching the Stimmung / Medikamente
+ * sections rather than the bespoke bare-`<section>` headings it carried
+ * before.
  */
+import { Eye, ListOrdered } from "lucide-react";
+
 import { Skeleton } from "@/components/ui/skeleton";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { useTranslations, useFormatters } from "@/lib/i18n/context";
 import { ModuleViewToggle } from "@/components/module-list/module-view-toggle";
 import {
@@ -37,23 +47,22 @@ export function IllnessSettings() {
   }));
 
   return (
-    <div className="space-y-8">
-      <section className="space-y-3">
-        <div className="flex items-center justify-between gap-3">
-          <h2 className="text-sm font-semibold">
-            {t("moduleList.viewHeading")}
-          </h2>
-          <ModuleViewToggle view={prefs.view} onChange={setView} />
-        </div>
-        <p className="text-muted-foreground text-sm">
-          {t("moduleList.viewDescription")}
-        </p>
-      </section>
+    <div className="space-y-6">
+      <SettingsCard id="illness-view" className="scroll-mt-28 space-y-4">
+        <SettingsCardHeader
+          icon={Eye}
+          title={t("moduleList.viewHeading")}
+          description={t("illness.settings.viewDescription")}
+          status={<ModuleViewToggle view={prefs.view} onChange={setView} />}
+        />
+      </SettingsCard>
 
-      <section className="space-y-3">
-        <h2 className="text-sm font-semibold">
-          {t("moduleList.reorder.heading")}
-        </h2>
+      <SettingsCard id="illness-order" className="scroll-mt-28 space-y-4">
+        <SettingsCardHeader
+          icon={ListOrdered}
+          title={t("moduleList.reorder.heading")}
+          description={t("illness.settings.orderDescription")}
+        />
         {isLoading ? (
           <div className="space-y-2">
             {Array.from({ length: 3 }, (_, i) => (
@@ -63,7 +72,7 @@ export function IllnessSettings() {
         ) : (
           <ModuleOrderEditor items={reorderItems} onChange={setOrder} />
         )}
-      </section>
+      </SettingsCard>
     </div>
   );
 }