feat: add global Komga search autocomplete in header
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 5m50s
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 5m50s
This commit is contained in:
231
src/components/layout/GlobalSearch.tsx
Normal file
231
src/components/layout/GlobalSearch.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user