refactor(settings): split SettingsPage into components, restructure tabs

- Extract 7 sub-components into settings/components/ (AnilistTab,
  KomgaSyncCard, MetadataProvidersCard, StatusMappingsCard, ProwlarrCard,
  QBittorrentCard, TelegramCard) — SettingsPage.tsx: 2100 → 551 lines
- Add "Metadata" tab (MetadataProviders + StatusMappings)
- Rename "Integrations" → "Download Tools" (Prowlarr + qBittorrent)
- Rename "AniList" → "Reading Status" tab; Komga sync as standalone card
- Rename cards: "AniList Config" + "AniList Sync"
- Persist active tab in URL searchParams (?tab=...)
- Fix hydration mismatch on AniList redirect URL (window.location via useEffect)

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

apps/backoffice/app/(app)/settings/components/QBittorrentCard.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, Button, FormField, FormInput, Icon } from "@/app/components/ui";
+import { useTranslation } from "@/lib/i18n/context";
+
+export function QBittorrentCard({ handleUpdateSetting }: { handleUpdateSetting: (key: string, value: unknown) => Promise<void> }) {
+  const { t } = useTranslation();
+  const [qbUrl, setQbUrl] = useState("");
+  const [qbUsername, setQbUsername] = useState("");
+  const [qbPassword, setQbPassword] = useState("");
+  const [isTesting, setIsTesting] = useState(false);
+  const [testResult, setTestResult] = useState<{ success: boolean; message: string } | null>(null);
+
+  useEffect(() => {
+    fetch("/api/settings/qbittorrent")
+      .then((r) => (r.ok ? r.json() : null))
+      .then((data) => {
+        if (data) {
+          if (data.url) setQbUrl(data.url);
+          if (data.username) setQbUsername(data.username);
+          if (data.password) setQbPassword(data.password);
+        }
+      })
+      .catch(() => {});
+  }, []);
+
+  function saveQbittorrent() {
+    handleUpdateSetting("qbittorrent", {
+      url: qbUrl,
+      username: qbUsername,
+      password: qbPassword,
+    });
+  }
+
+  async function handleTestConnection() {
+    setIsTesting(true);
+    setTestResult(null);
+    try {
+      const resp = await fetch("/api/qbittorrent/test");
+      const data = await resp.json();
+      if (data.error) {
+        setTestResult({ success: false, message: data.error });
+      } else {
+        setTestResult(data);
+      }
+    } catch {
+      setTestResult({ success: false, message: "Failed to connect" });
+    } finally {
+      setIsTesting(false);
+    }
+  }
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Icon name="settings" size="md" />
+          {t("settings.qbittorrent")}
+        </CardTitle>
+        <CardDescription>{t("settings.qbittorrentDesc")}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          <div className="flex gap-4">
+            <FormField className="flex-1">
+              <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.qbittorrentUrl")}</label>
+              <FormInput
+                type="url"
+                placeholder={t("settings.qbittorrentUrlPlaceholder")}
+                value={qbUrl}
+                onChange={(e) => setQbUrl(e.target.value)}
+                onBlur={() => saveQbittorrent()}
+              />
+            </FormField>
+          </div>
+          <div className="flex gap-4">
+            <FormField className="flex-1">
+              <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.qbittorrentUsername")}</label>
+              <FormInput
+                type="text"
+                value={qbUsername}
+                onChange={(e) => setQbUsername(e.target.value)}
+                onBlur={() => saveQbittorrent()}
+              />
+            </FormField>
+            <FormField className="flex-1">
+              <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.qbittorrentPassword")}</label>
+              <FormInput
+                type="password" autoComplete="off"
+                value={qbPassword}
+                onChange={(e) => setQbPassword(e.target.value)}
+                onBlur={() => saveQbittorrent()}
+              />
+            </FormField>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <Button
+              onClick={handleTestConnection}
+              disabled={isTesting || !qbUrl || !qbUsername}
+            >
+              {isTesting ? (
+                <>
+                  <Icon name="spinner" size="sm" className="animate-spin -ml-1 mr-2" />
+                  {t("settings.testing")}
+                </>
+              ) : (
+                <>
+                  <Icon name="refresh" size="sm" className="mr-2" />
+                  {t("settings.testConnection")}
+                </>
+              )}
+            </Button>
+            {testResult && (
+              <span className={`text-sm font-medium ${testResult.success ? "text-success" : "text-destructive"}`}>
+                {testResult.message}
+              </span>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}