feat(favorites): add button and local store choice

devbook.md

@@ -8,11 +8,10 @@ Application web moderne pour la lecture de BD/mangas/comics via un serveur Komga
 
 ### 📚 Gestion des séries
 
-- [ ] Système de favoris
+- [x] Système de favoris
-  - [ ] Ajout/suppression des favoris
+  - [x] Ajout/suppression des favoris (stockage local)
   - [ ] Menu dédié dans la sidebar
   - [ ] Carousel dédié dans sur la homepage de toutes les séries favorites
-  - [ ] Synchronisation avec Komga
 - [ ] Vue liste/grille configurable
 - [ ] Filtres et tri avancés
 - [ ] Recherche globale
@@ -260,3 +259,7 @@ Application web moderne pour la lecture de BD/mangas/comics via un serveur Komga
   - [x] Tomes
   - [x] Progression de lecture
   - [x] Images et miniatures
+
+### Gestion des séries
+
+- [x] Système de favoris (ajout/retrait d'une série des favoris)

package-lock.json

@@ -10,9 +10,9 @@
       "dependencies": {
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
-        "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-slot": "^1.1.2",
         "@radix-ui/react-toast": "^1.2.6",
-        "class-variance-authority": "^0.7.0",
+        "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^0.323.0",
         "next": "^14.1.0",
@@ -20,6 +20,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "sharp": "^0.33.2",
+        "sonner": "^1.7.4",
         "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7",
         "zod": "^3.22.4"
@@ -1296,7 +1297,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
       "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
-      "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.1"
       },
@@ -2394,7 +2394,6 @@
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
       "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
-      "license": "Apache-2.0",
       "dependencies": {
         "clsx": "^2.1.1"
       },
@@ -5966,6 +5965,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/sonner": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-1.7.4.tgz",
+      "integrity": "sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw==",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",

package.json

@@ -12,19 +12,19 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-toast": "^1.2.6",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.323.0",
     "next": "^14.1.0",
     "next-themes": "^0.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "sharp": "^0.33.2",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.22.4",
+    "zod": "^3.22.4"
-    "sharp": "^0.33.2"
   },
   "devDependencies": {
     "@types/node": "^20.11.16",

src/components/series/SeriesHeader.tsx

@@ -1,17 +1,28 @@
 "use client";
 
 import Image from "next/image";
-import { ImageOff } from "lucide-react";
+import { ImageOff, Book, BookOpen, BookMarked } from "lucide-react";
 import { KomgaSeries } from "@/types/komga";
 import { useState, useEffect } from "react";
+import { FavoriteService } from "@/lib/services/favorite.service";
+import { Star, StarOff } from "lucide-react";
+import { Button } from "../ui/button";
+import { useToast } from "@/components/ui/use-toast";
+import { cn } from "@/lib/utils";
 
 interface SeriesHeaderProps {
   series: KomgaSeries;
-  serverUrl: string;
+  onSeriesUpdate?: (series: KomgaSeries) => void;
+}
+
+interface ReadingStatusInfo {
+  label: string;
+  className: string;
+  icon: React.ElementType;
 }
 
 // Fonction utilitaire pour obtenir les informations de lecture d'une série
-const getReadingStatusInfo = (series: KomgaSeries) => {
+const getReadingStatusInfo = (series: KomgaSeries): ReadingStatusInfo => {
   const { booksCount, booksReadCount, booksUnreadCount } = series;
   const booksInProgressCount = booksCount - (booksReadCount + booksUnreadCount);
 
@@ -19,6 +30,7 @@ const getReadingStatusInfo = (series: KomgaSeries) => {
     return {
       label: "Lu",
       className: "bg-green-500/10 text-green-500",
+      icon: BookOpen,
     };
   }
 
@@ -26,22 +38,31 @@ const getReadingStatusInfo = (series: KomgaSeries) => {
     return {
       label: `${booksReadCount}/${booksCount}`,
       className: "bg-blue-500/10 text-blue-500",
+      icon: BookMarked,
     };
   }
 
   return {
     label: "Non lu",
     className: "bg-yellow-500/10 text-yellow-500",
+    icon: Book,
   };
 };
 
-export function SeriesHeader({ series, serverUrl }: SeriesHeaderProps) {
+export const SeriesHeader = ({ series, onSeriesUpdate }: SeriesHeaderProps) => {
+  const { toast } = useToast();
   const [languageDisplay, setLanguageDisplay] = useState<string>(series.metadata.language);
   const [imageError, setImageError] = useState(false);
-  const [readingStatus, setReadingStatus] = useState<{
+  const [readingStatus, setReadingStatus] = useState<ReadingStatusInfo>(
-    label: string;
+    getReadingStatusInfo(series)
-    className: string;
+  );
-  } | null>(null);
+  const [isFavorite, setIsFavorite] = useState(FavoriteService.isFavorite(series.id));
+  const [isLoading, setIsLoading] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   useEffect(() => {
     setReadingStatus(getReadingStatusInfo(series));
@@ -61,78 +82,158 @@ export function SeriesHeader({ series, serverUrl }: SeriesHeaderProps) {
     }
   }, [series.metadata.language]);
 
-  const getSeriesThumbnailUrl = (seriesId: string) => {
+  const handleToggleFavorite = () => {
-    return `/api/komga/images/series/${seriesId}/thumbnail`;
+    try {
+      setIsLoading(true);
+      if (isFavorite) {
+        FavoriteService.removeFromFavorites(series.id);
+      } else {
+        FavoriteService.addToFavorites(series.id);
+      }
+      setIsFavorite(!isFavorite);
+      if (onSeriesUpdate) {
+        onSeriesUpdate({ ...series, favorite: !isFavorite });
+      }
+      toast({
+        title: isFavorite ? "Retiré des favoris" : "Ajouté aux favoris",
+        variant: "default",
+      });
+    } catch (error) {
+      toast({
+        title: "Une erreur est survenue",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
   };
 
+  const StatusIcon = readingStatus.icon;
+
   return (
-    <div className="flex flex-col md:flex-row gap-8">
+    <div className="relative w-full min-h-[300px]">
-      {/* Couverture */}
+      {/* Fond flou */}
-      <div className="w-48 shrink-0">
+      <div className="absolute inset-0 overflow-hidden">
-        <div className="relative aspect-[2/3] rounded-lg overflow-hidden bg-muted">
+        {!imageError && (
-          {!imageError ? (
+          <div className="relative w-full h-full">
             <Image
-              src={getSeriesThumbnailUrl(series.id)}
+              src={`/api/komga/images/series/${series.id}/thumbnail`}
-              alt={`Couverture de ${series.metadata.title}`}
+              alt=""
               fill
-              className="object-cover"
+              className="object-cover opacity-10 blur-2xl scale-110"
-              onError={() => setImageError(true)}
+              priority
+              unoptimized
             />
-          ) : (
+          </div>
-            <div className="w-full h-full flex items-center justify-center">
+        )}
-              <ImageOff className="w-12 h-12" />
-            </div>
-          )}
-        </div>
       </div>
 
-      {/* Informations */}
+      {/* Contenu */}
-      <div className="flex-1 space-y-4">
+      <div className="relative container mx-auto px-4 py-8">
-        <div>
+        <div className="flex flex-col md:flex-row gap-8 items-center md:items-start">
-          <h1 className="text-3xl font-bold">{series.metadata.title}</h1>
+          {/* Image de couverture */}
-          <div className="mt-2 flex flex-wrap gap-2">
+          <div className="shrink-0">
-            {readingStatus && (
+            {!imageError ? (
-              <span
+              <div className="relative">
-                className={`inline-block px-2 py-1 rounded-full text-xs ${readingStatus.className}`}
+                <Image
-              >
+                  src={`/api/komga/images/series/${series.id}/thumbnail`}
-                {readingStatus.label}
+                  alt={series.name}
-              </span>
+                  width={200}
+                  height={300}
+                  className="rounded-lg shadow-xl hover:shadow-2xl transition-shadow duration-200"
+                  onError={() => setImageError(true)}
+                  priority
+                  unoptimized
+                />
+              </div>
+            ) : (
+              <div className="w-[200px] h-[300px] bg-muted rounded-lg flex items-center justify-center">
+                <ImageOff className="w-12 h-12" />
+              </div>
             )}
           </div>
-        </div>
 
-        {series.metadata.summary && (
+          {/* Informations */}
-          <p className="text-muted-foreground">{series.metadata.summary}</p>
+          <div className="flex-1 text-center md:text-left space-y-4">
-        )}
+            <div className="flex flex-col md:flex-row items-center gap-4">
+              <h1 className="text-4xl font-bold">{series.name}</h1>
+              {mounted && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={handleToggleFavorite}
+                  disabled={isLoading}
+                  className={cn(
+                    "hover:bg-primary/20",
+                    isFavorite && "bg-yellow-500/10 hover:bg-yellow-500/20"
+                  )}
+                  aria-label={isFavorite ? "Retirer des favoris" : "Ajouter aux favoris"}
+                >
+                  {isFavorite ? (
+                    <Star className="w-6 h-6 text-yellow-400 fill-yellow-400" />
+                  ) : (
+                    <StarOff className="w-6 h-6" />
+                  )}
+                </Button>
+              )}
+            </div>
 
-        <div className="space-y-1 text-sm text-muted-foreground">
+            {/* Métadonnées */}
-          {series.metadata.publisher && (
+            <div className="flex flex-wrap gap-4 items-center justify-center md:justify-start text-sm">
-            <div>
+              {series.metadata.publisher && (
-              <span className="font-medium">Éditeur :</span> {series.metadata.publisher}
+                <span className="text-muted-foreground">{series.metadata.publisher}</span>
+              )}
+              {languageDisplay && (
+                <span className="text-muted-foreground capitalize">{languageDisplay}</span>
+              )}
+              {series.metadata.status && (
+                <span className="text-muted-foreground capitalize">
+                  {series.metadata.status.toLowerCase()}
+                </span>
+              )}
             </div>
-          )}
+
-          {series.metadata.genres?.length > 0 && (
+            {/* Stats */}
-            <div>
+            <div className="flex flex-wrap gap-4 items-center justify-center md:justify-start">
-              <span className="font-medium">Genres :</span> {series.metadata.genres.join(", ")}
+              <div
+                className={cn(
+                  "px-3 py-1.5 rounded-full flex items-center gap-2",
+                  readingStatus.className
+                )}
+              >
+                <StatusIcon className="w-4 h-4" />
+                <span className="text-sm font-medium">{readingStatus.label}</span>
+              </div>
+              <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                <span>{series.booksCount} tomes</span>
+                <span>{series.booksReadCount} lus</span>
+                <span>{series.booksInProgressCount} en cours</span>
+              </div>
             </div>
-          )}
+
-          {series.metadata.tags?.length > 0 && (
+            {/* Description */}
-            <div>
+            {series.metadata.summary && (
-              <span className="font-medium">Tags :</span> {series.metadata.tags.join(", ")}
+              <p className="text-muted-foreground line-clamp-3 max-w-2xl">
-            </div>
+                {series.metadata.summary}
-          )}
+              </p>
-          {series.metadata.language && (
+            )}
-            <div>
+
-              <span className="font-medium">Langue :</span> {languageDisplay}
+            {/* Tags et genres */}
-            </div>
+            {(series.metadata.tags?.length > 0 || series.metadata.genres?.length > 0) && (
-          )}
+              <div className="flex flex-wrap gap-2">
-          {series.metadata.ageRating && (
+                {[...(series.metadata.genres || []), ...(series.metadata.tags || [])].map((tag) => (
-            <div>
+                  <span
-              <span className="font-medium">Âge recommandé :</span> {series.metadata.ageRating}+
+                    key={tag}
-            </div>
+                    className="px-2 py-1 text-xs rounded-full bg-primary/10 text-primary-foreground"
-          )}
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
         </div>
       </div>
     </div>
   );
-}
+};

src/components/ui/button.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

src/lib/constants.ts

@@ -3,4 +3,5 @@ export const STORAGE_KEYS = {
   CREDENTIALS: "komgaCredentials",
   USER: "stripUser",
   TTL_CONFIG: "ttlConfig",
+  FAVORITES: "stripstream_favorites",
 } as const;

src/lib/services/favorite.service.ts

@@ -0,0 +1,31 @@
+import { storageService } from "./storage.service";
+
+export class FavoriteService {
+  /**
+   * Vérifie si une série est dans les favoris
+   */
+  static isFavorite(seriesId: string): boolean {
+    return storageService.isFavorite(seriesId);
+  }
+
+  /**
+   * Ajoute une série aux favoris
+   */
+  static addToFavorites(seriesId: string): void {
+    storageService.addFavorite(seriesId);
+  }
+
+  /**
+   * Retire une série des favoris
+   */
+  static removeFromFavorites(seriesId: string): void {
+    storageService.removeFavorite(seriesId);
+  }
+
+  /**
+   * Récupère tous les IDs des séries favorites
+   */
+  static getAllFavoriteIds(): string[] {
+    return storageService.getFavorites();
+  }
+}

src/lib/services/storage.service.ts

@@ -5,6 +5,7 @@ const {
   CREDENTIALS: KOMGACREDENTIALS_KEY,
   USER: USER_KEY,
   TTL_CONFIG: TTL_CONFIG_KEY,
+  FAVORITES: FAVORITES_KEY,
 } = STORAGE_KEYS;
 
 interface TTLConfig {
@@ -16,7 +17,7 @@ interface TTLConfig {
   imagesTTL: number;
 }
 
-class StorageService {
+export class StorageService {
   private static instance: StorageService;
 
   private constructor() {}
@@ -170,6 +171,51 @@ class StorageService {
       ttlConfig: TTL_CONFIG_KEY,
     };
   }
+
+  getFavorites(): string[] {
+    try {
+      const favorites = localStorage.getItem(FAVORITES_KEY);
+      return favorites ? JSON.parse(favorites) : [];
+    } catch (error) {
+      console.error("Erreur lors de la récupération des favoris:", error);
+      return [];
+    }
+  }
+
+  addFavorite(seriesId: string): void {
+    try {
+      const favorites = this.getFavorites();
+      if (!favorites.includes(seriesId)) {
+        favorites.push(seriesId);
+        localStorage.setItem(FAVORITES_KEY, JSON.stringify(favorites));
+      }
+    } catch (error) {
+      console.error("Erreur lors de l'ajout aux favoris:", error);
+    }
+  }
+
+  removeFavorite(seriesId: string): void {
+    try {
+      const favorites = this.getFavorites();
+      const index = favorites.indexOf(seriesId);
+      if (index > -1) {
+        favorites.splice(index, 1);
+        localStorage.setItem(FAVORITES_KEY, JSON.stringify(favorites));
+      }
+    } catch (error) {
+      console.error("Erreur lors de la suppression des favoris:", error);
+    }
+  }
+
+  isFavorite(seriesId: string): boolean {
+    try {
+      const favorites = this.getFavorites();
+      return favorites.includes(seriesId);
+    } catch (error) {
+      console.error("Erreur lors de la vérification des favoris:", error);
+      return false;
+    }
+  }
 }
 
 export const storageService = StorageService.getInstance();

src/types/komga.ts

@@ -30,8 +30,12 @@ export interface KomgaSeries {
   booksCount: number;
   booksReadCount: number;
   booksUnreadCount: number;
+  booksInProgressCount: number;
   metadata: SeriesMetadata;
   booksMetadata: BooksMetadata;
+  deleted: boolean;
+  oneshot: boolean;
+  favorite: boolean;
 }
 
 export interface SeriesMetadata {