docs(devbook): mise à jour des fonctionnalités de la page settings

devbook.md

@@ -46,9 +46,9 @@ Application web moderne pour la lecture de BD/mangas/comics via un serveur Komga
 - [ ] Synchronisation de l'état de lecture avec Komga
 - [ ] Revue du système de cache
   - [ ] Optimisation du cache côté serveur
-  - [ ] Gestion intelligente du TTL par type de données
+  - [x] Gestion intelligente du TTL par type de données
   - [ ] Invalidation du cache sur les mutations
-  - [ ] Stratégie de revalidation à la demande
+  - [x] Stratégie de revalidation à la demande
 
 ### Gestion des utilisateurs
 
@@ -125,14 +125,22 @@ Application web moderne pour la lecture de BD/mangas/comics via un serveur Komga
   - [x] Redirection après connexion
 - [x] Page de paramètres
   - [x] Formulaire de configuration Komga
-  - [x] Validation de l'URL du serveur
+    - [x] Validation de l'URL du serveur
-  - [x] Test de connexion en direct
+    - [x] Test de connexion en direct
-    - [x] Vérification des credentials via l'API Komga
     - [x] Gestion des erreurs détaillée
     - [x] Messages d'erreur contextuels
   - [x] Sauvegarde des préférences
     - [x] Stockage sécurisé des credentials Komga
     - [x] Persistance des paramètres
+  - [x] Configuration du cache
+    - [x] Gestion des TTL par type de données
+    - [x] Interface de configuration intuitive
+    - [x] Nettoyage du cache à la demande
+  - [x] UI/UX optimisée
+    - [x] Layout compact et centré
+    - [x] Hiérarchie visuelle claire
+    - [x] Composants redimensionnés
+    - [x] Espacement optimisé
 
 ## 📱 Interface utilisateur
 

src/app/settings/page.tsx

@@ -5,6 +5,7 @@ import { Loader2, Network, Trash2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { storageService } from "@/lib/services/storage.service";
 import { AuthError } from "@/types/auth";
+import { useToast } from "@/components/ui/use-toast";
 
 interface ErrorMessage {
   message: string;
@@ -12,7 +13,7 @@ interface ErrorMessage {
 
 export default function SettingsPage() {
   const router = useRouter();
-  const formRef = useRef<HTMLFormElement>(null);
+  const { toast } = useToast();
   const [isLoading, setIsLoading] = useState(false);
   const [isCacheClearing, setIsCacheClearing] = useState(false);
   const [error, setError] = useState<AuthError | null>(null);
@@ -22,6 +23,14 @@ export default function SettingsPage() {
     username: "",
     password: "",
   });
+  const [ttlConfig, setTTLConfig] = useState({
+    defaultTTL: 5,
+    homeTTL: 5,
+    librariesTTL: 1440,
+    seriesTTL: 5,
+    booksTTL: 5,
+    imagesTTL: 1440,
+  });
 
   useEffect(() => {
     // Charger la configuration existante
@@ -33,6 +42,12 @@ export default function SettingsPage() {
         password: savedConfig.credentials?.password || "",
       });
     }
+
+    // Charger la configuration des TTL
+    const savedTTLConfig = storageService.getTTLConfig();
+    if (savedTTLConfig) {
+      setTTLConfig(savedTTLConfig);
+    }
   }, []);
 
   const handleClearCache = async () => {
@@ -50,13 +65,17 @@ export default function SettingsPage() {
         throw new Error(data.error || "Erreur lors de la suppression du cache");
       }
 
-      setSuccess("Cache serveur supprimé avec succès");
+      toast({
-      router.refresh(); // Rafraîchir la page pour recharger les données
+        title: "Cache supprimé",
+        description: "Cache serveur supprimé avec succès",
+      });
+      router.refresh();
     } catch (error) {
       console.error("Erreur:", error);
-      setError({
+      toast({
-        code: "CACHE_CLEAR_ERROR",
+        variant: "destructive",
-        message: error instanceof Error ? error.message : "Une erreur est survenue",
+        title: "Erreur",
+        description: error instanceof Error ? error.message : "Une erreur est survenue",
       });
     } finally {
       setIsCacheClearing(false);
@@ -86,12 +105,16 @@ export default function SettingsPage() {
         throw new Error(data.error || "Erreur lors du test de connexion");
       }
 
-      setSuccess("Connexion réussie");
+      toast({
+        title: "Connexion réussie",
+        description: "La connexion au serveur Komga a été établie avec succès",
+      });
     } catch (error) {
       console.error("Erreur:", error);
-      setError({
+      toast({
-        code: "TEST_CONNECTION_ERROR",
+        variant: "destructive",
-        message: error instanceof Error ? error.message : "Une erreur est survenue",
+        title: "Erreur",
+        description: error instanceof Error ? error.message : "Une erreur est survenue",
       });
     } finally {
       setIsLoading(false);
@@ -122,151 +145,271 @@ export default function SettingsPage() {
     );
 
     setConfig(newConfig);
-    setSuccess("Configuration sauvegardée avec succès");
+    toast({
+      title: "Configuration sauvegardée",
+      description: "La configuration a été sauvegardée avec succès",
+    });
+  };
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    setConfig((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleTTLChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    setTTLConfig((prev) => ({
+      ...prev,
+      [name]: parseInt(value || "0", 10),
+    }));
+  };
+
+  const handleSaveTTL = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSuccess(null);
+
+    storageService.setTTLConfig(ttlConfig);
+    toast({
+      title: "Configuration TTL sauvegardée",
+      description: "La configuration des TTL a été sauvegardée avec succès",
+    });
   };
 
   return (
-    <div className="container py-8 space-y-8">
+    <div className="container max-w-3xl mx-auto py-8 space-y-6">
       <div className="flex items-center justify-between">
         <h1 className="text-3xl font-bold">Préférences</h1>
       </div>
 
-      <div className="space-y-6">
+      {/* Messages de succès/erreur */}
+      {error && (
+        <div className="rounded-md bg-destructive/15 p-4">
+          <p className="text-sm text-destructive">{error.message}</p>
+        </div>
+      )}
+      {success && (
+        <div className="rounded-md bg-green-500/15 p-4">
+          <p className="text-sm text-green-500">{success}</p>
+        </div>
+      )}
+
+      <div className="grid gap-6">
         {/* Section Configuration Komga */}
-        <div className="space-y-4">
+        <div className="rounded-lg border bg-card text-card-foreground shadow-sm">
-          <div>
+          <div className="p-5 space-y-4">
-            <h2 className="text-xl font-semibold">Configuration Komga</h2>
+            <div>
-            <p className="text-sm text-muted-foreground">
+              <h2 className="text-xl font-semibold flex items-center gap-2">
-              Configurez les informations de connexion à votre serveur Komga. Ces informations sont
+                <Network className="h-5 w-5" />
-              nécessaires pour accéder à votre bibliothèque.
+                Configuration Komga
-            </p>
+              </h2>
-          </div>
+              <p className="text-sm text-muted-foreground mt-1">
-          <div className="grid gap-6 md:grid-cols-2">
+                Configurez les informations de connexion à votre serveur Komga.
+              </p>
+            </div>
+
             {/* Formulaire de configuration */}
-            <div className="space-y-4">
+            <form onSubmit={handleSave} className="space-y-4">
-              <form ref={formRef} onSubmit={handleSave} className="space-y-4">
+              <div className="space-y-3">
                 <div className="space-y-2">
                   <label htmlFor="serverUrl" className="text-sm font-medium">
                     URL du serveur
                   </label>
-                  <p className="text-xs text-muted-foreground">
-                    L'adresse de votre serveur Komga, par exemple : https://komga.votredomaine.com
-                  </p>
                   <input
                     type="url"
                     id="serverUrl"
                     name="serverUrl"
                     required
-                    defaultValue={config.serverUrl}
+                    value={config.serverUrl}
-                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                    onChange={handleInputChange}
+                    className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                   />
                 </div>
                 <div className="space-y-2">
                   <label htmlFor="username" className="text-sm font-medium">
                     Nom d'utilisateur
                   </label>
-                  <p className="text-xs text-muted-foreground">
-                    Votre identifiant de connexion au serveur Komga
-                  </p>
                   <input
                     type="text"
                     id="username"
                     name="username"
                     required
-                    defaultValue={config.username}
+                    value={config.username}
-                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                    onChange={handleInputChange}
+                    className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                   />
                 </div>
                 <div className="space-y-2">
                   <label htmlFor="password" className="text-sm font-medium">
                     Mot de passe
                   </label>
-                  <p className="text-xs text-muted-foreground">
-                    Votre mot de passe de connexion au serveur Komga
-                  </p>
                   <input
                     type="password"
                     id="password"
                     name="password"
                     required
-                    defaultValue={config.password}
+                    value={config.password}
-                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                    onChange={handleInputChange}
+                    className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                   />
                 </div>
+              </div>
+              <div className="flex gap-3">
                 <button
                   type="submit"
-                  className="w-full inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+                  className="flex-1 inline-flex items-center justify-center rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
                 >
                   Sauvegarder
                 </button>
-              </form>
+                <button
-            </div>
+                  type="button"
-
+                  onClick={handleTest}
-            {/* Actions */}
+                  disabled={isLoading}
-            <div className="space-y-4">
+                  className="flex-1 inline-flex items-center justify-center rounded-md bg-secondary px-3 py-2 text-sm font-medium text-secondary-foreground ring-offset-background transition-colors hover:bg-secondary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-              <div>
+                >
-                <h3 className="text-sm font-medium">Actions</h3>
+                  {isLoading ? (
-                <p className="text-xs text-muted-foreground mb-4">
+                    <>
-                  Outils de gestion de la connexion et du cache
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                </p>
+                      Test en cours...
-                <div className="space-y-4">
+                    </>
-                  <div>
+                  ) : (
-                    <button
+                    "Tester la connexion"
-                      onClick={handleTest}
+                  )}
-                      disabled={isLoading}
+                </button>
-                      className="w-full inline-flex items-center justify-center rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground ring-offset-background transition-colors hover:bg-secondary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-                    >
-                      {isLoading ? (
-                        <>
-                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                          Test en cours...
-                        </>
-                      ) : (
-                        "Tester la connexion"
-                      )}
-                    </button>
-                    <p className="mt-1 text-xs text-muted-foreground">
-                      Vérifie que la connexion au serveur est fonctionnelle avec les paramètres
-                      actuels
-                    </p>
-                  </div>
-                  <div>
-                    <button
-                      onClick={handleClearCache}
-                      disabled={isCacheClearing}
-                      className="w-full inline-flex items-center justify-center rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground ring-offset-background transition-colors hover:bg-destructive/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-                    >
-                      {isCacheClearing ? (
-                        <>
-                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                          Suppression...
-                        </>
-                      ) : (
-                        "Supprimer le cache serveur"
-                      )}
-                    </button>
-                    <p className="mt-1 text-xs text-muted-foreground">
-                      Vide le cache du serveur pour forcer le rechargement des données. Utile en cas
-                      de problème d'affichage.
-                    </p>
-                  </div>
-                </div>
               </div>
-            </div>
+            </form>
           </div>
         </div>
 
-        {/* Messages de succès/erreur */}
+        {/* Section Configuration du Cache */}
-        {error && (
+        <div className="rounded-lg border bg-card text-card-foreground shadow-sm">
-          <div className="rounded-md bg-destructive/15 p-4">
+          <div className="p-5 space-y-4">
-            <p className="text-sm text-destructive">{error.message}</p>
+            <div>
+              <h2 className="text-xl font-semibold flex items-center gap-2">
+                <Trash2 className="h-5 w-5" />
+                Configuration du Cache
+              </h2>
+              <p className="text-sm text-muted-foreground mt-1">
+                Gérez les paramètres de mise en cache des données.
+              </p>
+            </div>
+
+            {/* Formulaire TTL */}
+            <form onSubmit={handleSaveTTL} className="space-y-4">
+              <div className="grid gap-3 sm:grid-cols-2">
+                <div className="space-y-2">
+                  <label htmlFor="defaultTTL" className="text-sm font-medium">
+                    TTL par défaut (minutes)
+                  </label>
+                  <input
+                    type="number"
+                    id="defaultTTL"
+                    name="defaultTTL"
+                    min="1"
+                    value={ttlConfig.defaultTTL}
+                    onChange={handleTTLChange}
+                    className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="homeTTL" className="text-sm font-medium">
+                    TTL page d'accueil
+                  </label>
+                  <input
+                    type="number"
+                    id="homeTTL"
+                    name="homeTTL"
+                    min="1"
+                    value={ttlConfig.homeTTL}
+                    onChange={handleTTLChange}
+                    className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="librariesTTL" className="text-sm font-medium">
+                    TTL bibliothèques
+                  </label>
+                  <input
+                    type="number"
+                    id="librariesTTL"
+                    name="librariesTTL"
+                    min="1"
+                    value={ttlConfig.librariesTTL}
+                    onChange={handleTTLChange}
+                    className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="seriesTTL" className="text-sm font-medium">
+                    TTL séries
+                  </label>
+                  <input
+                    type="number"
+                    id="seriesTTL"
+                    name="seriesTTL"
+                    min="1"
+                    value={ttlConfig.seriesTTL}
+                    onChange={handleTTLChange}
+                    className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="booksTTL" className="text-sm font-medium">
+                    TTL tomes
+                  </label>
+                  <input
+                    type="number"
+                    id="booksTTL"
+                    name="booksTTL"
+                    min="1"
+                    value={ttlConfig.booksTTL}
+                    onChange={handleTTLChange}
+                    className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="imagesTTL" className="text-sm font-medium">
+                    TTL images
+                  </label>
+                  <input
+                    type="number"
+                    id="imagesTTL"
+                    name="imagesTTL"
+                    min="1"
+                    value={ttlConfig.imagesTTL}
+                    onChange={handleTTLChange}
+                    className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  />
+                </div>
+              </div>
+              <div className="flex gap-3">
+                <button
+                  type="submit"
+                  className="flex-1 inline-flex items-center justify-center rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+                >
+                  Sauvegarder les TTL
+                </button>
+                <button
+                  type="button"
+                  onClick={handleClearCache}
+                  disabled={isCacheClearing}
+                  className="flex-1 inline-flex items-center justify-center rounded-md bg-destructive px-3 py-2 text-sm font-medium text-destructive-foreground ring-offset-background transition-colors hover:bg-destructive/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+                >
+                  {isCacheClearing ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Suppression...
+                    </>
+                  ) : (
+                    "Vider le cache"
+                  )}
+                </button>
+              </div>
+            </form>
           </div>
-        )}
+        </div>
-        {success && (
-          <div className="rounded-md bg-green-500/15 p-4">
-            <p className="text-sm text-green-500">{success}</p>
-          </div>
-        )}
       </div>
     </div>
   );