feat: refactor UI components to utilize new Container, Section, and StatusBadge components for improved layout and styling consistency across the application

src/components/settings/BackgroundSettings.tsx

@@ -11,6 +11,7 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { GRADIENT_PRESETS } from "@/types/preferences";
 import type { BackgroundType } from "@/types/preferences";
 import { Check } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 
 export function BackgroundSettings() {
   const { t } = useTranslate();
@@ -94,16 +95,12 @@ export function BackgroundSettings() {
   };
 
   return (
-    <div className="rounded-lg border bg-card/70 backdrop-blur-md text-card-foreground shadow-sm">
-      <div className="p-5 space-y-6">
-        <div>
-          <h2 className="text-xl font-semibold flex items-center gap-2">
-            {t("settings.background.title")}
-          </h2>
-          <p className="text-sm text-muted-foreground mt-1">
-            {t("settings.background.description")}
-          </p>
-        </div>
+    <Card>
+      <CardHeader>
+        <CardTitle>{t("settings.background.title")}</CardTitle>
+        <CardDescription>{t("settings.background.description")}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
 
         <div className="space-y-6">
           {/* Type de background */}
@@ -188,8 +185,8 @@ export function BackgroundSettings() {
             </div>
           )}
         </div>
-      </div>
-    </div>
+      </CardContent>
+    </Card>
   );
 }
 

src/components/settings/CacheSettings.tsx

@@ -7,6 +7,7 @@ import { Trash2, Loader2, HardDrive } from "lucide-react";
 import { CacheModeSwitch } from "@/components/settings/CacheModeSwitch";
 import { Label } from "@/components/ui/label";
 import type { TTLConfigData } from "@/types/komga";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 
 interface CacheSettingsProps {
   initialTTLConfig: TTLConfigData | null;
@@ -186,15 +187,15 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
   };
 
   return (
-    <div className="rounded-lg border bg-card/70 backdrop-blur-md text-card-foreground shadow-sm">
-      <div className="p-5 space-y-4">
-        <div>
-          <h2 className="text-xl font-semibold flex items-center gap-2">
-            <Trash2 className="h-5 w-5" />
-            {t("settings.cache.title")}
-          </h2>
-          <p className="text-sm text-muted-foreground mt-1">{t("settings.cache.description")}</p>
-        </div>
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Trash2 className="h-5 w-5" />
+          {t("settings.cache.title")}
+        </CardTitle>
+        <CardDescription>{t("settings.cache.description")}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
 
         <div className="flex items-center justify-between mb-4">
           <div className="space-y-0.5">
@@ -370,7 +371,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
             </button>
           </div>
         </form>
-      </div>
-    </div>
+      </CardContent>
+    </Card>
   );
 }

src/components/settings/DisplaySettings.tsx

@@ -3,6 +3,7 @@ import { usePreferences } from "@/contexts/PreferencesContext";
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
 import { useToast } from "@/components/ui/use-toast";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 
 export function DisplaySettings() {
   const { t } = useTranslate();
@@ -27,87 +28,82 @@ export function DisplaySettings() {
   };
 
   return (
-    <div className="rounded-lg border bg-card/70 backdrop-blur-md text-card-foreground shadow-sm">
-      <div className="p-5 space-y-4">
-        <div>
-          <h2 className="text-xl font-semibold flex items-center gap-2">
-            {t("settings.display.title")}
-          </h2>
-          <p className="text-sm text-muted-foreground mt-1">{t("settings.display.description")}</p>
+    <Card>
+      <CardHeader>
+        <CardTitle>{t("settings.display.title")}</CardTitle>
+        <CardDescription>{t("settings.display.description")}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="space-y-0.5">
+            <Label htmlFor="thumbnails">{t("settings.display.thumbnails.label")}</Label>
+            <p className="text-sm text-muted-foreground">
+              {t("settings.display.thumbnails.description")}
+            </p>
+          </div>
+          <Switch
+            id="thumbnails"
+            checked={preferences.showThumbnails}
+            onCheckedChange={handleToggleThumbnails}
+          />
         </div>
-
-        <div className="space-y-4">
-          <div className="flex items-center justify-between">
-            <div className="space-y-0.5">
-              <Label htmlFor="thumbnails">{t("settings.display.thumbnails.label")}</Label>
-              <p className="text-sm text-muted-foreground">
-                {t("settings.display.thumbnails.description")}
-              </p>
-            </div>
-            <Switch
-              id="thumbnails"
-              checked={preferences.showThumbnails}
-              onCheckedChange={handleToggleThumbnails}
-            />
-          </div>
-          <div className="flex items-center justify-between">
-            <div className="space-y-0.5">
-              <Label htmlFor="unread-filter">{t("settings.display.unreadFilter.label")}</Label>
-              <p className="text-sm text-muted-foreground">
-                {t("settings.display.unreadFilter.description")}
-              </p>
-            </div>
-            <Switch
-              id="unread-filter"
-              checked={preferences.showOnlyUnread}
-              onCheckedChange={async (checked) => {
-                try {
-                  await updatePreferences({ showOnlyUnread: checked });
-                  toast({
-                    title: t("settings.title"),
-                    description: t("settings.komga.messages.configSaved"),
-                  });
-                } catch (error) {
-                  console.error("Erreur détaillée:", error);
-                  toast({
-                    variant: "destructive",
-                    title: t("settings.error.title"),
-                    description: t("settings.error.message"),
-                  });
-                }
-              }}
-            />
-          </div>
-          <div className="flex items-center justify-between">
-            <div className="space-y-0.5">
-              <Label htmlFor="debug-mode">{t("settings.display.debugMode.label")}</Label>
-              <p className="text-sm text-muted-foreground">
-                {t("settings.display.debugMode.description")}
-              </p>
-            </div>
-            <Switch
-              id="debug-mode"
-              checked={preferences.debug}
-              onCheckedChange={async (checked) => {
-                try {
-                  await updatePreferences({ debug: checked });
-                  toast({
-                    title: t("settings.title"),
-                    description: t("settings.komga.messages.configSaved"),
-                  });
-                } catch (error) {
-                  console.error("Erreur détaillée:", error);
-                  toast({
-                    variant: "destructive",
-                    title: t("settings.error.title"),
-                    description: t("settings.error.message"),
-                  });
-                }
-              }}
-            />
+        <div className="flex items-center justify-between">
+          <div className="space-y-0.5">
+            <Label htmlFor="unread-filter">{t("settings.display.unreadFilter.label")}</Label>
+            <p className="text-sm text-muted-foreground">
+              {t("settings.display.unreadFilter.description")}
+            </p>
           </div>
+          <Switch
+            id="unread-filter"
+            checked={preferences.showOnlyUnread}
+            onCheckedChange={async (checked) => {
+              try {
+                await updatePreferences({ showOnlyUnread: checked });
+                toast({
+                  title: t("settings.title"),
+                  description: t("settings.komga.messages.configSaved"),
+                });
+              } catch (error) {
+                console.error("Erreur détaillée:", error);
+                toast({
+                  variant: "destructive",
+                  title: t("settings.error.title"),
+                  description: t("settings.error.message"),
+                });
+              }
+            }}
+          />
         </div>
-      </div>
-    </div>
+        <div className="flex items-center justify-between">
+          <div className="space-y-0.5">
+            <Label htmlFor="debug-mode">{t("settings.display.debugMode.label")}</Label>
+            <p className="text-sm text-muted-foreground">
+              {t("settings.display.debugMode.description")}
+            </p>
+          </div>
+          <Switch
+            id="debug-mode"
+            checked={preferences.debug}
+            onCheckedChange={async (checked) => {
+              try {
+                await updatePreferences({ debug: checked });
+                toast({
+                  title: t("settings.title"),
+                  description: t("settings.komga.messages.configSaved"),
+                });
+              } catch (error) {
+                console.error("Erreur détaillée:", error);
+                toast({
+                  variant: "destructive",
+                  title: t("settings.error.title"),
+                  description: t("settings.error.message"),
+                });
+              }
+            }}
+          />
+        </div>
+      </CardContent>
+    </Card>
   );
 }

src/components/settings/KomgaSettings.tsx

@@ -5,6 +5,7 @@ import { useTranslate } from "@/hooks/useTranslate";
 import { useToast } from "@/components/ui/use-toast";
 import { Network, Loader2 } from "lucide-react";
 import type { KomgaConfig } from "@/types/komga";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 
 interface KomgaSettingsProps {
   initialConfig: KomgaConfig | null;
@@ -144,15 +145,15 @@ export function KomgaSettings({ initialConfig }: KomgaSettingsProps) {
   };
 
   return (
-    <div className="rounded-lg border bg-card/70 backdrop-blur-md text-card-foreground shadow-sm">
-      <div className="p-5 space-y-4">
-        <div>
-          <h2 className="text-xl font-semibold flex items-center gap-2">
-            <Network className="h-5 w-5" />
-            {t("settings.komga.title")}
-          </h2>
-          <p className="text-sm text-muted-foreground mt-1">{t("settings.komga.description")}</p>
-        </div>
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Network className="h-5 w-5" />
+          {t("settings.komga.title")}
+        </CardTitle>
+        <CardDescription>{t("settings.komga.description")}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
 
         {!shouldShowForm ? (
           <div className="space-y-4">
@@ -274,7 +275,7 @@ export function KomgaSettings({ initialConfig }: KomgaSettingsProps) {
             </div>
           </form>
         )}
-      </div>
-    </div>
+      </CardContent>
+    </Card>
   );
 }