feat: the admin settings cards read as menus: each a titled group of rows with one short line, status first, failures in words (M503 #5607)

Indexers and clients, searching, missing files, Lidarr's neighbours, AcoustID, fingerprinting, loudness, outgoing email's schedule, public address and proxies move from paragraph cards to SettingsGroup and SettingRow. Switches are role="switch". Also fixes the two type errors run 9023 found: the Lidarr test result is narrowed before its lists are read, and the tag-source save mock carries version_bumped.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/lib/components/NetworkSettingsCard.svelte

@@ -1,12 +1,18 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { Save, TriangleAlert } from 'lucide-svelte';
   import {
     getNetworkSettings,
     updateNetworkSettings,
     type NetworkSettings
   } from '#lib/api/admin.js';
   import { pushToast } from '#lib/stores/toast.svelte.js';
+  import SettingsGroup from '#lib/components/settings/SettingsGroup.svelte';
+  import SettingRow from '#lib/components/settings/SettingRow.svelte';
+
+  // Client IP detection, on Admin › Email & network: decides which address
+  // is recorded for each sign-in on the Active sessions list.
+  const button =
+    'rounded-md border border-border px-3 py-1.5 text-sm text-text-secondary hover:bg-surface-hover hover:text-text-primary disabled:opacity-50';
 
   let settings = $state<NetworkSettings | null>(null);
   let hops = $state(1);
@@ -50,86 +56,55 @@
   }
 </script>
 
-<section class="space-y-4 rounded-xl border border-border bg-surface p-5">
-  <div>
-    <h3 class="font-display text-lg font-medium text-text-primary">Client IP detection</h3>
-    <p class="mt-1 text-sm text-text-secondary">
-      How many reverse proxies sit in front of Minstrel. This decides which address is
-      recorded for each sign-in on the <span class="whitespace-nowrap">Active sessions</span> card,
-      so getting it right is what makes an unfamiliar login visible.
-    </p>
-  </div>
-
+<SettingsGroup title="Proxies" id="proxies" hint="How many reverse proxies sit in front of Minstrel.">
   {#if loadError}
-    <p class="text-sm text-action-destructive">
+    <p class="px-4 py-3 text-sm text-error-fg">
       Couldn't load network settings.
       <button type="button" class="underline hover:no-underline" onclick={load}>Try again</button>
     </p>
   {:else if settings === null}
-    <p class="text-sm text-text-secondary">Loading…</p>
+    <p class="px-4 py-3 text-sm text-text-secondary">Loading…</p>
   {:else}
-    <div class="flex flex-wrap items-end gap-3">
-      <label class="flex flex-col gap-1">
-        <span class="text-sm text-text-secondary">Trusted proxies</span>
-        <input
-          type="number"
-          min="0"
-          max={settings.max_hops}
-          bind:value={hops}
-          class="w-24 rounded border border-border bg-background px-2 py-1
-                 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-accent"
-        />
-      </label>
-      <button
-        type="button"
-        class="inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5
-               text-sm hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-accent
-               disabled:opacity-50"
-        disabled={saving || !dirty}
-        onclick={save}
-      >
-        <Save size={14} aria-hidden="true" />
+    <SettingRow
+      label="Trusted proxies"
+      for="proxy-hops"
+      hint="0 is none, 1 a proxy such as nginx or Caddy, 2 a CDN in front of it."
+    >
+      <input
+        id="proxy-hops"
+        type="number"
+        min="0"
+        max={settings.max_hops}
+        bind:value={hops}
+        class="w-20 rounded-md border border-border bg-background px-2 py-1.5 text-sm"
+      />
+      <button type="button" class={button} disabled={saving || !dirty} onclick={save}>
         {saving ? 'Saving…' : 'Save'}
       </button>
-    </div>
-
-    <!-- Verification, not decoration: the number is abstract, but "the address
-         Minstrel currently sees for YOU" is checkable against the machine
-         you're sitting at. -->
-    <dl class="grid gap-x-4 gap-y-1 text-sm sm:grid-cols-[auto_1fr]">
-      <dt class="text-text-secondary">Your address right now</dt>
-      <dd class="font-mono">{settings.detected_client_ip || 'unknown'}</dd>
-      <dt class="text-text-secondary">Direct connection from</dt>
-      <dd class="font-mono">{settings.remote_addr || 'unknown'}</dd>
-      <dt class="text-text-secondary">Forwarded chain</dt>
-      <dd class="font-mono break-all">{settings.forwarded_chain || '(none)'}</dd>
-    </dl>
-
+    </SettingRow>
     {#if suggested > 0 && settings.trusted_proxy_hops !== suggested}
-      <p class="text-sm text-text-secondary">
+      <p class="px-4 py-3 text-sm text-text-primary">
         This request arrived with {suggested}
-        {suggested === 1 ? 'forwarded address' : 'forwarded addresses'}, which usually means
-        {suggested}
-        {suggested === 1 ? 'proxy' : 'proxies'} in front of Minstrel.
+        {suggested === 1 ? 'forwarded address' : 'forwarded addresses'}, so {suggested}
+        {suggested === 1 ? 'proxy is' : 'proxies are'} likely.
       </p>
     {/if}
-
-    <div class="space-y-2 rounded border border-border bg-background p-3 text-sm">
-      <p class="flex items-start gap-2 text-text-secondary">
-        <TriangleAlert size={14} class="mt-0.5 shrink-0 text-action-destructive" aria-hidden="true" />
-        <span>
-          Count your proxies — don't guess high. This number tells Minstrel how much of the
-          <span class="font-mono">X-Forwarded-For</span> header to believe, and that header is
-          written by whoever connects. Set it higher than your real chain, or above 0 with no
-          proxy at all, and a visitor can choose which address their own session shows — which
-          defeats the point of the sessions list.
-        </span>
-      </p>
-      <ul class="ml-6 list-disc space-y-1 text-text-secondary">
-        <li><strong>0</strong> — no proxy; Minstrel is reached directly.</li>
-        <li><strong>1</strong> — one reverse proxy, e.g. nginx, Caddy or Traefik terminating TLS.</li>
-        <li><strong>2</strong> — a CDN in front of your own proxy, e.g. Cloudflare → nginx.</li>
-      </ul>
-    </div>
+    <!-- Verification, not decoration: "the address Minstrel sees for you"
+         can be checked against the machine you're at. -->
+    <SettingRow label="Your address right now">
+      <span class="font-mono text-sm">{settings.detected_client_ip || 'unknown'}</span>
+    </SettingRow>
+    <SettingRow label="Direct connection from">
+      <span class="font-mono text-sm">{settings.remote_addr || 'unknown'}</span>
+    </SettingRow>
+    <SettingRow label="Forwarded chain">
+      <span class="break-all font-mono text-sm">{settings.forwarded_chain || 'none'}</span>
+    </SettingRow>
+    <!-- X-Forwarded-For is written by whoever connects, so a depth set too
+         high lets a visitor pick the address their session shows. -->
+    <p class="px-4 py-3 text-xs text-text-secondary">
+      Count your proxies, don't guess high: set too high, a visitor can choose the address their
+      session shows.
+    </p>
   {/if}
-</section>
+</SettingsGroup>