feat: add global Komga search autocomplete in header

src/app/api/komga/search/route.ts

@@ -0,0 +1,72 @@
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+import { SearchService } from "@/lib/services/search.service";
+import { AppError, getErrorMessage } from "@/utils/errors";
+import { ERROR_CODES } from "@/constants/errorCodes";
+
+const MIN_QUERY_LENGTH = 2;
+const DEFAULT_LIMIT = 6;
+const MAX_LIMIT = 10;
+
+export async function GET(request: NextRequest) {
+  try {
+    const query = request.nextUrl.searchParams.get("q")?.trim() ?? "";
+    const limitParam = request.nextUrl.searchParams.get("limit");
+    const parsedLimit = limitParam ? Number(limitParam) : Number.NaN;
+    const limit = Number.isFinite(parsedLimit)
+      ? Math.max(1, Math.min(parsedLimit, MAX_LIMIT))
+      : DEFAULT_LIMIT;
+
+    if (query.length < MIN_QUERY_LENGTH) {
+      return NextResponse.json({ series: [], books: [] }, { headers: { "Cache-Control": "no-store" } });
+    }
+
+    const results = await SearchService.globalSearch(query, limit);
+
+    return NextResponse.json(
+      {
+        series: results.series.map((series) => ({
+          id: series.id,
+          title: series.metadata.title,
+          libraryId: series.libraryId,
+          booksCount: series.booksCount,
+          href: `/series/${series.id}`,
+          coverUrl: `/api/komga/images/series/${series.id}/thumbnail`,
+        })),
+        books: results.books.map((book) => ({
+          id: book.id,
+          title: book.metadata.title || book.name,
+          seriesTitle: book.seriesTitle,
+          seriesId: book.seriesId,
+          href: `/books/${book.id}`,
+          coverUrl: `/api/komga/images/books/${book.id}/thumbnail`,
+        })),
+      },
+      { headers: { "Cache-Control": "no-store" } }
+    );
+  } catch (error) {
+    if (error instanceof AppError) {
+      return NextResponse.json(
+        {
+          error: {
+            code: error.code,
+            name: "Search fetch error",
+            message: getErrorMessage(error.code),
+          },
+        },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json(
+      {
+        error: {
+          code: ERROR_CODES.SERIES.FETCH_ERROR,
+          name: "Search fetch error",
+          message: getErrorMessage(ERROR_CODES.SERIES.FETCH_ERROR),
+        },
+      },
+      { status: 500 }
+    );
+  }
+}

src/components/layout/GlobalSearch.tsx

@@ -0,0 +1,231 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { Search, BookOpen, Library } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useEffect, useMemo, useRef, useState, type FormEvent } from "react";
+import { useTranslate } from "@/hooks/useTranslate";
+import { getImageUrl } from "@/lib/utils/image-url";
+
+interface SearchSeriesResult {
+  id: string;
+  title: string;
+  href: string;
+  booksCount: number;
+}
+
+interface SearchBookResult {
+  id: string;
+  title: string;
+  seriesTitle: string;
+  href: string;
+}
+
+interface SearchResponse {
+  series: SearchSeriesResult[];
+  books: SearchBookResult[];
+}
+
+const MIN_QUERY_LENGTH = 2;
+
+export function GlobalSearch() {
+  const { t } = useTranslate();
+  const router = useRouter();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [results, setResults] = useState<SearchResponse>({ series: [], books: [] });
+
+  const hasResults = results.series.length > 0 || results.books.length > 0;
+
+  const firstResultHref = useMemo(() => {
+    if (results.series.length > 0) {
+      return results.series[0].href;
+    }
+
+    if (results.books.length > 0) {
+      return results.books[0].href;
+    }
+
+    return null;
+  }, [results.books, results.series]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (!containerRef.current?.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, []);
+
+  useEffect(() => {
+    const trimmedQuery = query.trim();
+
+    if (trimmedQuery.length < MIN_QUERY_LENGTH) {
+      setResults({ series: [], books: [] });
+      setIsLoading(false);
+      return;
+    }
+
+    const timeoutId = setTimeout(async () => {
+      try {
+        abortControllerRef.current?.abort();
+        const controller = new AbortController();
+        abortControllerRef.current = controller;
+
+        setIsLoading(true);
+
+        const response = await fetch(`/api/komga/search?q=${encodeURIComponent(trimmedQuery)}`, {
+          method: "GET",
+          signal: controller.signal,
+          cache: "no-store",
+        });
+
+        if (!response.ok) {
+          throw new Error("Search request failed");
+        }
+
+        const data = (await response.json()) as SearchResponse;
+        setResults(data);
+        setIsOpen(true);
+      } catch (error) {
+        if ((error as Error).name !== "AbortError") {
+          setResults({ series: [], books: [] });
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    }, 250);
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [query]);
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (firstResultHref) {
+      setIsOpen(false);
+      router.push(firstResultHref);
+    }
+  };
+
+  return (
+    <div ref={containerRef} className="relative w-full">
+      <form onSubmit={handleSubmit}>
+        <Search className="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          type="search"
+          value={query}
+          onFocus={() => {
+            if (query.trim().length >= MIN_QUERY_LENGTH) {
+              setIsOpen(true);
+            }
+          }}
+          onChange={(event) => setQuery(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Escape") {
+              setIsOpen(false);
+            }
+          }}
+          placeholder={t("header.search.placeholder")}
+          aria-label={t("header.search.placeholder")}
+          className="h-10 rounded-full border-border/60 bg-background/65 pl-10 pr-10 text-sm shadow-sm focus-visible:ring-primary/40"
+        />
+        {isLoading && (
+          <div className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2">
+            <div className="h-4 w-4 rounded-full border-2 border-primary border-t-transparent animate-spin" />
+          </div>
+        )}
+      </form>
+
+      {isOpen && query.trim().length >= MIN_QUERY_LENGTH && (
+        <div className="absolute left-0 right-0 top-[calc(100%+0.5rem)] z-50 overflow-hidden rounded-2xl border border-border/70 bg-background/95 shadow-xl backdrop-blur-xl">
+          <div className="max-h-[26rem] overflow-y-auto p-2">
+            {results.series.length > 0 && (
+              <div className="mb-2">
+                <div className="px-2 pb-1 pt-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+                  {t("header.search.series")}
+                </div>
+                {results.series.map((item) => (
+                  <Link
+                    key={item.id}
+                    href={item.href}
+                    onClick={() => setIsOpen(false)}
+                    className="flex items-center gap-3 rounded-xl px-3 py-2.5 transition-colors hover:bg-accent"
+                    aria-label={t("header.search.openSeries", { title: item.title })}
+                  >
+                    <img
+                      src={getImageUrl("series", item.id)}
+                      alt={item.title}
+                      loading="lazy"
+                      className="h-14 w-10 rounded object-cover bg-muted"
+                    />
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate text-base font-medium">{item.title}</p>
+                      <p className="mt-0.5 flex items-center gap-1 text-sm text-muted-foreground">
+                        <Library className="h-3 w-3" />
+                        {t("series.books", { count: item.booksCount })}
+                      </p>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            )}
+
+            {results.books.length > 0 && (
+              <div>
+                <div className="px-2 pb-1 pt-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+                  {t("header.search.books")}
+                </div>
+                {results.books.map((item) => (
+                  <Link
+                    key={item.id}
+                    href={item.href}
+                    onClick={() => setIsOpen(false)}
+                    className="flex items-center gap-3 rounded-xl px-3 py-2.5 transition-colors hover:bg-accent"
+                    aria-label={t("header.search.openBook", { title: item.title })}
+                  >
+                    <img
+                      src={getImageUrl("book", item.id)}
+                      alt={item.title}
+                      loading="lazy"
+                      className="h-14 w-10 rounded object-cover bg-muted"
+                    />
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate text-base font-medium">{item.title}</p>
+                      <p className="mt-0.5 flex items-center gap-1 text-sm text-muted-foreground">
+                        <BookOpen className="h-3 w-3" />
+                        <span className="truncate">{item.seriesTitle}</span>
+                      </p>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            )}
+
+            {!isLoading && !hasResults && (
+              <p className="px-3 py-4 text-sm text-muted-foreground">{t("header.search.empty")}</p>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/layout/Header.tsx

@@ -1,9 +1,10 @@
-import { Menu, Moon, Sun, RefreshCw } from "lucide-react";
+import { Menu, Moon, Sun, RefreshCw, Search } from "lucide-react";
 import { useTheme } from "next-themes";
 import LanguageSelector from "@/components/LanguageSelector";
 import { useTranslation } from "react-i18next";
 import { IconButton } from "@/components/ui/icon-button";
 import { useState } from "react";
+import { GlobalSearch } from "@/components/layout/GlobalSearch";
 
 interface HeaderProps {
   onToggleSidebar: () => void;
@@ -19,6 +20,7 @@ export function Header({
   const { theme, setTheme } = useTheme();
   const { t } = useTranslation();
   const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isMobileSearchOpen, setIsMobileSearchOpen] = useState(false);
 
   const toggleTheme = () => {
     setTheme(theme === "dark" ? "light" : "dark");
@@ -33,7 +35,7 @@ export function Header({
   };
 
   return (
-    <header className="sticky top-0 z-50 w-full border-b border-primary/30 bg-background/70 shadow-sm backdrop-blur-xl supports-[backdrop-filter]:bg-background/65 pt-safe relative overflow-hidden">
+    <header className="sticky top-0 z-50 w-full border-b border-primary/30 bg-background/70 shadow-sm backdrop-blur-xl supports-[backdrop-filter]:bg-background/65 pt-safe relative overflow-visible">
       <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(112deg,hsl(var(--primary)/0.24)_0%,hsl(192_85%_55%/0.2)_30%,transparent_56%),linear-gradient(248deg,hsl(338_82%_62%/0.16)_0%,transparent_46%),repeating-linear-gradient(135deg,hsl(var(--foreground)/0.03)_0_1px,transparent_1px_11px)]" />
       <div className="container relative flex h-16 max-w-screen-2xl items-center">
         <IconButton
@@ -48,20 +50,21 @@ export function Header({
 
         <div className="mr-2 flex items-center md:mr-4">
           <a className="mr-2 flex items-center md:mr-6" href="/">
-            <span className="inline-flex bg-gradient-to-r from-primary via-cyan-500 to-fuchsia-500 bg-clip-text text-sm font-bold tracking-[0.06em] text-transparent sm:hidden">
-              Strip
-            </span>
-            <span className="hidden sm:inline-flex flex-col leading-none">
-              <span className="bg-gradient-to-r from-primary via-cyan-500 to-fuchsia-500 bg-clip-text text-lg font-bold tracking-[0.08em] text-transparent">
+            <span className="inline-flex flex-col leading-none">
+              <span className="bg-gradient-to-r from-primary via-cyan-500 to-fuchsia-500 bg-clip-text text-sm font-bold tracking-[0.06em] text-transparent sm:text-lg sm:tracking-[0.08em]">
                 StripStream
               </span>
-              <span className="mt-1 text-[10px] font-medium uppercase tracking-[0.22em] text-foreground/70">
+              <span className="mt-1 hidden text-[10px] font-medium uppercase tracking-[0.22em] text-foreground/70 sm:inline">
                 comic reader
               </span>
             </span>
           </a>
         </div>
 
+        <div className="hidden min-w-0 flex-1 px-1 sm:block sm:px-3">
+          <GlobalSearch />
+        </div>
+
         <div className="ml-auto flex items-center">
           <nav className="flex items-center gap-1 rounded-full border border-border/60 bg-background/45 px-1 py-1 shadow-[0_4px_18px_-14px_rgba(0,0,0,0.65)] backdrop-blur-md">
             {showRefreshBackground && (
@@ -76,6 +79,14 @@ export function Header({
                 tooltip="Rafraîchir l'image de fond"
               />
             )}
+            <IconButton
+              onClick={() => setIsMobileSearchOpen((value) => !value)}
+              variant="ghost"
+              size="icon"
+              icon={Search}
+              className="h-9 w-9 rounded-full sm:hidden"
+              tooltip={t("header.search.placeholder")}
+            />
             <LanguageSelector />
             <button
               onClick={toggleTheme}
@@ -91,6 +102,11 @@ export function Header({
           </nav>
         </div>
       </div>
+      {isMobileSearchOpen && (
+        <div className="border-t border-border/50 bg-background/90 px-3 pb-3 pt-2 backdrop-blur-xl sm:hidden">
+          <GlobalSearch />
+        </div>
+      )}
     </header>
   );
 }

src/i18n/messages/en/common.json

@@ -454,6 +454,18 @@
     "endOfSeriesMessage": "You have finished all the books in this series!",
     "backToSeries": "Back to series"
   },
+  "header": {
+    "toggleSidebar": "Toggle sidebar",
+    "toggleTheme": "Toggle theme",
+    "search": {
+      "placeholder": "Search series and books...",
+      "empty": "No results",
+      "series": "Series",
+      "books": "Books",
+      "openSeries": "Open series {{title}}",
+      "openBook": "Open book {{title}}"
+    }
+  },
   "navigation": {
     "scrollLeft": "Scroll left",
     "scrollRight": "Scroll right",

src/i18n/messages/fr/common.json

@@ -454,7 +454,15 @@
   },
   "header": {
     "toggleSidebar": "Afficher/masquer le menu latéral",
-    "toggleTheme": "Changer le thème"
+    "toggleTheme": "Changer le thème",
+    "search": {
+      "placeholder": "Rechercher séries et tomes...",
+      "empty": "Aucun résultat",
+      "series": "Séries",
+      "books": "Tomes",
+      "openSeries": "Ouvrir la série {{title}}",
+      "openBook": "Ouvrir le tome {{title}}"
+    }
   },
   "navigation": {
     "scrollLeft": "Défiler vers la gauche",

src/lib/services/search.service.ts

@@ -0,0 +1,63 @@
+import type { KomgaBook, KomgaSeries } from "@/types/komga";
+import { ERROR_CODES } from "../../constants/errorCodes";
+import { AppError } from "../../utils/errors";
+import { BaseApiService } from "./base-api.service";
+
+interface SearchResponse<T> {
+  content: T[];
+}
+
+export interface GlobalSearchResult {
+  series: KomgaSeries[];
+  books: KomgaBook[];
+}
+
+export class SearchService extends BaseApiService {
+  private static readonly CACHE_TTL = 30;
+
+  static async globalSearch(query: string, limit: number = 6): Promise<GlobalSearchResult> {
+    const trimmedQuery = query.trim();
+
+    if (!trimmedQuery) {
+      return { series: [], books: [] };
+    }
+
+    const headers = { "Content-Type": "application/json" };
+    const searchBody = {
+      fullTextSearch: trimmedQuery,
+    };
+
+    try {
+      const [seriesResponse, booksResponse] = await Promise.all([
+        this.fetchFromApi<SearchResponse<KomgaSeries>>(
+          { path: "series/list", params: { page: "0", size: String(limit) } },
+          headers,
+          {
+            method: "POST",
+            body: JSON.stringify(searchBody),
+            revalidate: this.CACHE_TTL,
+          }
+        ),
+        this.fetchFromApi<SearchResponse<KomgaBook>>(
+          { path: "books/list", params: { page: "0", size: String(limit) } },
+          headers,
+          {
+            method: "POST",
+            body: JSON.stringify(searchBody),
+            revalidate: this.CACHE_TTL,
+          }
+        ),
+      ]);
+
+      return {
+        series: seriesResponse.content.filter((item) => !item.deleted),
+        books: booksResponse.content.filter((item) => !item.deleted),
+      };
+    } catch (error) {
+      if (error instanceof AppError) {
+        throw error;
+      }
+      throw new AppError(ERROR_CODES.SERIES.FETCH_ERROR, {}, error);
+    }
+  }
+}