feat(library) : search

src/app/libraries/[libraryId]/page.tsx

@@ -6,7 +6,7 @@ import { RefreshButton } from "@/components/library/RefreshButton";
 
 interface PageProps {
   params: { libraryId: string };
-  searchParams: { page?: string; unread?: string };
+  searchParams: { page?: string; unread?: string; search?: string };
 }
 
 const PAGE_SIZE = 20;
@@ -25,7 +25,12 @@ async function refreshLibrary(libraryId: string) {
   }
 }
 
-async function getLibrarySeries(libraryId: string, page: number = 1, unreadOnly: boolean = false) {
+async function getLibrarySeries(
+  libraryId: string,
+  page: number = 1,
+  unreadOnly: boolean = false,
+  search?: string
+) {
   try {
     const pageIndex = page - 1;
 
@@ -33,7 +38,8 @@ async function getLibrarySeries(libraryId: string, page: number = 1, unreadOnly:
       libraryId,
       pageIndex,
       PAGE_SIZE,
-      unreadOnly
+      unreadOnly,
+      search
     );
     const library = await LibraryService.getLibrary(libraryId);
 
@@ -55,7 +61,8 @@ export default async function LibraryPage({ params, searchParams }: PageProps) {
     const { data: series, library } = await getLibrarySeries(
       params.libraryId,
       currentPage,
-      unreadOnly
+      unreadOnly,
+      searchParams.search
     );
 
     return (

src/components/library/PaginatedSeriesGrid.tsx

@@ -7,6 +7,7 @@ import { useState, useEffect } from "react";
 import { Loader2, Filter } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { KomgaSeries } from "@/types/komga";
+import { SearchInput } from "./SearchInput";
 
 interface PaginatedSeriesGridProps {
   series: KomgaSeries[];
@@ -87,24 +88,29 @@ export function PaginatedSeriesGrid({
   return (
     <div className="space-y-8">
       <div className="flex items-center justify-between flex-wrap gap-4">
-        <p className="text-sm text-muted-foreground flex-1 min-w-[200px]">
-          {totalElements > 0 ? (
-            <>
-              Affichage des séries <span className="font-medium">{startIndex}</span> à{" "}
-              <span className="font-medium">{endIndex}</span> sur{" "}
-              <span className="font-medium">{totalElements}</span>
-            </>
-          ) : (
-            "Aucune série trouvée"
-          )}
-        </p>
-        <button
-          onClick={handleUnreadFilter}
-          className="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap ml-auto"
-        >
-          <Filter className="h-4 w-4" />
-          {showOnlyUnread ? "Afficher tout" : "À lire"}
-        </button>
+        <div className="flex-1">
+          <SearchInput />
+        </div>
+        <div className="flex items-center gap-4">
+          <p className="text-sm text-muted-foreground">
+            {totalElements > 0 ? (
+              <>
+                Affichage des séries <span className="font-medium">{startIndex}</span> à{" "}
+                <span className="font-medium">{endIndex}</span> sur{" "}
+                <span className="font-medium">{totalElements}</span>
+              </>
+            ) : (
+              "Aucune série trouvée"
+            )}
+          </p>
+          <button
+            onClick={handleUnreadFilter}
+            className="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap"
+          >
+            <Filter className="h-4 w-4" />
+            {showOnlyUnread ? "Afficher tout" : "À lire"}
+          </button>
+        </div>
       </div>
 
       <div className="relative">

src/components/library/SearchInput.tsx

@@ -0,0 +1,54 @@
+import { Search } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useTransition } from "react";
+import { Input } from "@/components/ui/input";
+import { debounce } from "@/lib/utils";
+
+interface SearchInputProps {
+  placeholder?: string;
+}
+
+export const SearchInput = ({ placeholder = "Rechercher une série..." }: SearchInputProps) => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [isPending, startTransition] = useTransition();
+
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (value) {
+        params.set(name, value);
+      } else {
+        params.delete(name);
+      }
+      return params.toString();
+    },
+    [searchParams]
+  );
+
+  const handleSearch = debounce((term: string) => {
+    startTransition(() => {
+      const query = createQueryString("search", term);
+      router.push(`?${query}`);
+    });
+  }, 300);
+
+  return (
+    <div className="relative w-full max-w-sm">
+      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+      <Input
+        type={isPending ? "text" : "search"}
+        placeholder={placeholder}
+        className="pl-9"
+        defaultValue={searchParams.get("search") ?? ""}
+        onChange={(e) => handleSearch(e.target.value)}
+        aria-label="Rechercher une série"
+      />
+      {isPending && (
+        <div className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2">
+          <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+        </div>
+      )}
+    </div>
+  );
+};

src/components/ui/input.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "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",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };

src/lib/services/library.service.ts

@@ -33,7 +33,8 @@ export class LibraryService extends BaseApiService {
     libraryId: string,
     page: number = 0,
     size: number = 20,
-    unreadOnly: boolean = false
+    unreadOnly: boolean = false,
+    search?: string
   ): Promise<LibraryResponse<Series>> {
     try {
       const config = await this.getKomgaConfig();
@@ -42,11 +43,12 @@ export class LibraryService extends BaseApiService {
         page: page.toString(),
         size: size.toString(),
         ...(unreadOnly && { read_status: "UNREAD,IN_PROGRESS" }),
+        ...(search && { search }),
       });
       const headers = this.getAuthHeaders(config);
 
       return this.fetchWithCache<LibraryResponse<Series>>(
-        `library-${libraryId}-series-${page}-${size}-${unreadOnly}`,
+        `library-${libraryId}-series-${page}-${size}-${unreadOnly}-${search}`,
         async () => this.fetchFromApi<LibraryResponse<Series>>(url, headers),
         "SERIES"
       );
@@ -56,6 +58,6 @@ export class LibraryService extends BaseApiService {
   }
 
   static async clearLibrarySeriesCache(libraryId: string) {
-    serverCacheService.delete(`library-${libraryId}-series`);
+    serverCacheService.deleteAll(`library-${libraryId}-series`);
   }
 }

src/lib/utils.ts

@@ -13,3 +13,20 @@ export function formatDate(date: string | Date): string {
     year: "numeric",
   });
 }
+
+export function debounce<T extends (...args: any[]) => void>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout;
+
+  return function executedFunction(...args: Parameters<T>) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}