feat(library) : search

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 };