refactor(web): make SmtpSettingsPanel self-contained, eliminating prop drilling

SmtpSettingsPanel now owns its form state, save/test mutations, and feedback state
internally. Props reduced from 17 to 2 (initialSettings + onSettingsSaved callback).
Removes 7 useState declarations, 2 mutation definitions, and 1 handler from the parent.

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

apps/web/src/components/admin/SystemSettingsClient.tsx

@@ -3,10 +3,7 @@
 import { DEFAULT_OPENAI_MODEL } from "@capakraken/shared";
 import { useEffect, useState } from "react";
 import { trpc } from "~/lib/trpc/client.js";
-import {
-  AiProviderPanel,
-  GenerationSettingsPanel,
-} from "./system-settings/AiSettingsPanels.js";
+import { AiProviderPanel, GenerationSettingsPanel } from "./system-settings/AiSettingsPanels.js";
 import { LegacyRuntimeSecretsNotice } from "./system-settings/LegacyRuntimeSecretsNotice.js";
 import {
   type ImageProvider,
@@ -52,13 +49,6 @@ export function SystemSettingsClient() {
   const [imageProvider, setImageProvider] = useState<ImageProvider>("dalle");
   const [geminiModel, setGeminiModel] = useState("");
   const [imageSaved, setImageSaved] = useState(false);
-  const [smtpHost, setSmtpHost] = useState("");
-  const [smtpPort, setSmtpPort] = useState(587);
-  const [smtpUser, setSmtpUser] = useState("");
-  const [smtpFrom, setSmtpFrom] = useState("");
-  const [smtpTls, setSmtpTls] = useState(true);
-  const [smtpSaved, setSmtpSaved] = useState(false);
-  const [smtpTestResult, setSmtpTestResult] = useState<SaveResult | null>(null);
   const [anonymizationEnabled, setAnonymizationEnabled] = useState(false);
   const [anonymizationDomain, setAnonymizationDomain] = useState("superhartmut.de");
   const [anonymizationSaved, setAnonymizationSaved] = useState(false);
@@ -96,11 +86,6 @@ export function SystemSettingsClient() {
     setDalleEndpoint(settings.azureDalleEndpoint ?? "");
     setImageProvider((settings.imageProvider ?? "dalle") as ImageProvider);
     setGeminiModel(settings.geminiModel ?? "");
-    setSmtpHost(settings.smtpHost ?? "");
-    setSmtpPort(settings.smtpPort ?? 587);
-    setSmtpUser(settings.smtpUser ?? "");
-    setSmtpFrom(settings.smtpFrom ?? "");
-    setSmtpTls(settings.smtpTls ?? true);
     setAnonymizationEnabled(settings.anonymizationEnabled ?? false);
     setAnonymizationDomain(settings.anonymizationDomain ?? "superhartmut.de");
     setVacationDefaultDays(settings.vacationDefaultDays ?? 28);
@@ -163,21 +148,6 @@ export function SystemSettingsClient() {
     onSuccess: (data) => setRecomputeResult(data),
   });
 
-  const saveSmtpMutation = trpc.settings.updateSystemSettings.useMutation({
-    onSuccess: () => {
-      setSmtpSaved(true);
-      setSmtpTestResult(null);
-      setLegacyCleanupResult(null);
-      invalidateSystemSettings();
-      setTimeout(() => setSmtpSaved(false), 3000);
-    },
-  });
-
-  const testSmtpMutation = trpc.settings.testSmtpConnection.useMutation({
-    onSuccess: (data) => setSmtpTestResult(data),
-    onError: (error) => setSmtpTestResult({ ok: false, error: error.message }),
-  });
-
   const saveAnonymizationMutation = trpc.settings.updateSystemSettings.useMutation({
     onSuccess: () => {
       setAnonymizationSaved(true);
@@ -254,16 +224,6 @@ export function SystemSettingsClient() {
     });
   }
 
-  function handleSaveSmtp() {
-    saveSmtpMutation.mutate({
-      smtpHost: smtpHost || undefined,
-      smtpPort,
-      smtpUser: smtpUser || undefined,
-      smtpFrom: smtpFrom || undefined,
-      smtpTls,
-    });
-  }
-
   function handleSaveVacation() {
     saveVacationMutation.mutate({ vacationDefaultDays });
   }
@@ -292,8 +252,8 @@ export function SystemSettingsClient() {
 
   function handleClearLegacyRuntimeSecrets() {
     if (
-      typeof window !== "undefined"
-      && !window.confirm(
+      typeof window !== "undefined" &&
+      !window.confirm(
         "Clear all legacy runtime secrets from database storage? Environment-based deployment secrets must already be configured.",
       )
     ) {
@@ -423,25 +383,7 @@ export function SystemSettingsClient() {
         onTestGemini={() => testGeminiMutation.mutate()}
       />
 
-      <SmtpSettingsPanel
-        smtpHost={smtpHost}
-        smtpPort={smtpPort}
-        smtpUser={smtpUser}
-        smtpFrom={smtpFrom}
-        smtpTls={smtpTls}
-        smtpSaved={smtpSaved}
-        smtpTestResult={smtpTestResult}
-        smtpSecret={settings.runtimeSecrets.smtpPassword}
-        isSaving={saveSmtpMutation.isPending}
-        isTesting={testSmtpMutation.isPending}
-        onSmtpHostChange={setSmtpHost}
-        onSmtpPortChange={setSmtpPort}
-        onSmtpUserChange={setSmtpUser}
-        onSmtpFromChange={setSmtpFrom}
-        onSmtpTlsChange={setSmtpTls}
-        onSave={handleSaveSmtp}
-        onTest={() => testSmtpMutation.mutate()}
-      />
+      <SmtpSettingsPanel initialSettings={settings} onSettingsSaved={invalidateSystemSettings} />
 
       <VacationSettingsPanel
         vacationDefaultDays={vacationDefaultDays}