feat(dashboard): single BP tile, equal-height tile strip, settings dashboard/thresholds split

Bucket A of the v1.4.3 polish pass.

Tile-strip width drifted past the chart-strip width by 16px on >=md
because the strip used `-mx-2 px-2` to bleed two pixels past the
parent for a snap-scroll feel. The bleed is real on mobile — the
horizontal-scroll affordance only reads as a scroll if the first/last
tiles touch the viewport edge — but on tablet/desktop where the row
fits without scrolling it just made the tile group visibly wider than
the charts below. Now `md:mx-0 md:px-0` drops the bleed once charts
fit inline, so the two strips share the same content box.

Tile heights varied because the blood-pressure tile rendered as two
stacked TrendCards (sys + dia) inside one tile slot while every
other tile was a single TrendCard. The cleaner fix is one TrendCard
that displays the paired value as `117/79` — TrendCard now accepts an
optional `secondary: { latest, avg7, avg30 }` and the dashboard pushes
ONE BP entry instead of a Fragment of two. Tile count drops from 6
to 5, the strip stops wrapping awkwardly, and the BP card carries
the systolic sparkline + traffic-light tooltip while the diastolic
value rides along under the same heading. Each tile wrapper got
`flex` and the card itself `flex h-full flex-col`, so flex-stretch
inside the strip can do its job and the avg7/avg30 row pins to the
bottom.

Settings nav split: the section formerly titled "Übersicht" was
renamed to "Dashboard" (the term every user already knows from the
main nav), and the embedded Persönliche Zielwerte panel moved out
into its own top-level settings section under `/settings/thresholds`.
Two reasons: the panel is heavy (one card per metric) and was
visually buried behind the layout customizer, and "Übersicht" leaked
internal vocabulary — neither the route slug nor the surrounding nav
entries used it. Tests guarding slug order + section count updated
in lockstep.

Touched:
  - messages/de.json, messages/en.json
  - src/app/page.tsx (dashboard tile strip)
  - src/app/settings/[section]/page.tsx (route wiring)
  - src/components/charts/trend-card.tsx (secondary-metric prop)
  - src/components/settings/section-slugs.ts
  - src/components/settings/settings-shell.tsx (new entry + icon)
  - src/components/settings/section-placeholder.tsx
  - src/components/settings/dashboard-section.tsx (drop ThresholdsSection)
  - src/components/settings/thresholds-settings-section.tsx (new)
  - src/components/settings/__tests__/{sections,settings-shell}.test.tsx

Tests + typecheck green (669/669).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/app/page.tsx

@@ -460,66 +460,50 @@ export default function DashboardPage() {
           });
         }
         if (showBpCards) {
+          // BP renders as ONE tile with paired sys/dia values (e.g. "117/79")
+          // so the strip width matches the chart strip below — and so the
+          // tile count stays at 5 instead of 6 with a wrap-around. The
+          // sparkline/trend arrow follows the systolic value (the common
+          // primary signal); the colour-banding tooltips cover sys only
+          // because dia uses a different target range and stuffing both
+          // into one hint became unreadable on mobile.
           trendCards.push({
             id: "bp",
             order: widgetOrder("bp"),
             node: (
-              <React.Fragment key="bp">
-                <TrendCard
-                  label={t("dashboard.bloodPressureSys")}
-                  latest={sys?.latest ?? null}
-                  unit="mmHg"
-                  avg7={sys?.avg7 ?? null}
-                  avg30={sys?.avg30 ?? null}
-                  avg7ColorClass={getRangeColorClass(sys?.avg7, {
-                    range: bpSysRange,
-                  })}
-                  avg30ColorClass={getRangeColorClass(sys?.avg30, {
-                    range: bpSysRange,
-                  })}
-                  avg7Hint={getRangeHint(
-                    "mmHg",
-                    { range: bpSysRange },
-                    t,
-                    fmt.number,
-                  )}
-                  avg30Hint={getRangeHint(
-                    "mmHg",
-                    { range: bpSysRange },
-                    t,
-                    fmt.number,
-                  )}
-                  slope30={sys?.slope30 ?? null}
-                  icon={Heart}
-                />
-                <TrendCard
-                  label={t("dashboard.bloodPressureDia")}
-                  latest={dia?.latest ?? null}
-                  unit="mmHg"
-                  avg7={dia?.avg7 ?? null}
-                  avg30={dia?.avg30 ?? null}
-                  avg7ColorClass={getRangeColorClass(dia?.avg7, {
-                    range: bpDiaRange,
-                  })}
-                  avg30ColorClass={getRangeColorClass(dia?.avg30, {
-                    range: bpDiaRange,
-                  })}
-                  avg7Hint={getRangeHint(
-                    "mmHg",
-                    { range: bpDiaRange },
-                    t,
-                    fmt.number,
-                  )}
-                  avg30Hint={getRangeHint(
-                    "mmHg",
-                    { range: bpDiaRange },
-                    t,
-                    fmt.number,
-                  )}
-                  slope30={dia?.slope30 ?? null}
-                  icon={Heart}
-                />
-              </React.Fragment>
+              <TrendCard
+                key="bp"
+                label={t("dashboard.bloodPressure")}
+                latest={sys?.latest ?? null}
+                unit="mmHg"
+                avg7={sys?.avg7 ?? null}
+                avg30={sys?.avg30 ?? null}
+                avg7ColorClass={getRangeColorClass(sys?.avg7, {
+                  range: bpSysRange,
+                })}
+                avg30ColorClass={getRangeColorClass(sys?.avg30, {
+                  range: bpSysRange,
+                })}
+                avg7Hint={getRangeHint(
+                  "mmHg",
+                  { range: bpSysRange },
+                  t,
+                  fmt.number,
+                )}
+                avg30Hint={getRangeHint(
+                  "mmHg",
+                  { range: bpSysRange },
+                  t,
+                  fmt.number,
+                )}
+                slope30={sys?.slope30 ?? null}
+                icon={Heart}
+                secondary={{
+                  latest: dia?.latest ?? null,
+                  avg7: dia?.avg7 ?? null,
+                  avg30: dia?.avg30 ?? null,
+                }}
+              />
             ),
           });
         }
@@ -868,14 +852,14 @@ export default function DashboardPage() {
              * touch.
              */}
             <div
-              className="-mx-2 flex snap-x snap-mandatory gap-3 overflow-x-auto px-2 pb-2"
+              className="-mx-2 flex snap-x snap-mandatory items-stretch gap-3 overflow-x-auto px-2 pb-2 md:mx-0 md:px-0"
               data-slot="dashboard-tile-strip"
               data-tile-count={trendCards.length}
             >
               {trendCards.map((entry) => (
                 <div
                   key={entry.id}
-                  className="shrink-0 grow basis-[10rem] snap-start"
+                  className="flex shrink-0 grow basis-[10rem] snap-start"
                 >
                   {entry.node}
                 </div>

src/app/settings/[section]/page.tsx

@@ -10,6 +10,7 @@ import { DashboardSection } from "@/components/settings/dashboard-section";
 import { IntegrationsSection } from "@/components/settings/integrations-section";
 import { NotificationsSection } from "@/components/settings/notifications-section";
 import { SectionPlaceholder } from "@/components/settings/section-placeholder";
+import { ThresholdsSettingsSection } from "@/components/settings/thresholds-settings-section";
 import {
   SETTINGS_SECTION_SLUGS,
   isSettingsSectionSlug,
@@ -42,6 +43,7 @@ const SECTION_COMPONENTS: Record<
   integrations: IntegrationsSection,
   notifications: NotificationsSection,
   dashboard: DashboardSection,
+  thresholds: ThresholdsSettingsSection,
   api: ApiSection,
   advanced: AdvancedSection,
 };