feat: add tabbed interface for ClientSettings with display, connection, and cache options

src/components/settings/ClientSettings.tsx

@@ -6,6 +6,8 @@ import { DisplaySettings } from "./DisplaySettings";
 import { KomgaSettings } from "./KomgaSettings";
 import { CacheSettings } from "./CacheSettings";
 import { BackgroundSettings } from "./BackgroundSettings";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Monitor, Network, HardDrive } from "lucide-react";
 
 interface ClientSettingsProps {
   initialConfig: KomgaConfig | null;
@@ -16,14 +18,38 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin
   const { t } = useTranslate();
 
   return (
-    <div className="container mx-auto px-4 py-8 space-y-8">
+    <div className="container mx-auto px-4 py-8 space-y-6">
       <h1 className="text-3xl font-bold">{t("settings.title")}</h1>
-      <div className="space-y-8">
+      
-        <DisplaySettings />
+      <Tabs defaultValue="display" className="w-full">
-        <BackgroundSettings />
+        <TabsList className="grid w-full grid-cols-3">
-        <KomgaSettings initialConfig={initialConfig} />
+          <TabsTrigger value="display" className="flex items-center gap-2">
-        <CacheSettings initialTTLConfig={initialTTLConfig} />
+            <Monitor className="h-4 w-4" />
-      </div>
+            {t("settings.tabs.display")}
+          </TabsTrigger>
+          <TabsTrigger value="connection" className="flex items-center gap-2">
+            <Network className="h-4 w-4" />
+            {t("settings.tabs.connection")}
+          </TabsTrigger>
+          <TabsTrigger value="cache" className="flex items-center gap-2">
+            <HardDrive className="h-4 w-4" />
+            {t("settings.tabs.cache")}
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="display" className="mt-6 space-y-6">
+          <DisplaySettings />
+          <BackgroundSettings />
+        </TabsContent>
+
+        <TabsContent value="connection" className="mt-6 space-y-6">
+          <KomgaSettings initialConfig={initialConfig} />
+        </TabsContent>
+
+        <TabsContent value="cache" className="mt-6 space-y-6">
+          <CacheSettings initialTTLConfig={initialTTLConfig} />
+        </TabsContent>
+      </Tabs>
     </div>
   );
 }

src/i18n/messages/en/common.json

@@ -67,6 +67,11 @@
   },
   "settings": {
     "title": "Preferences",
+    "tabs": {
+      "display": "Display",
+      "connection": "Connection",
+      "cache": "Cache"
+    },
     "display": {
       "title": "Display Preferences",
       "description": "Customize your library display.",

src/i18n/messages/fr/common.json

@@ -67,6 +67,11 @@
   },
   "settings": {
     "title": "Préférences",
+    "tabs": {
+      "display": "Affichage",
+      "connection": "Connexion",
+      "cache": "Cache"
+    },
     "display": {
       "title": "Préférences d'affichage",
       "description": "Personnalisez l'affichage de votre bibliothèque.",