feat : add fuzzy matching for searching

components/admin/create-guide-flow.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+import { searchItems } from "@/lib/search";
+import { SearchNotice } from "@/components/search-notice";
+
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { ArrowLeftIcon, CheckIcon, SearchIcon } from "lucide-react";
@@ -28,12 +31,10 @@ export function CreateGuideFlow({ characters, existingKeys }: { characters: Char
   const [overview, setOverview] = useState("");
   const [pending, startTransition] = useTransition();
   const existing = useMemo(() => new Set(existingKeys), [existingKeys]);
-  const filtered = characters.filter((character) =>
-    [character.name, ...character.aliases]
-      .join(" ")
-      .toLocaleLowerCase("th")
-      .includes(query.trim().toLocaleLowerCase("th")),
-  );
+  const search = searchItems(characters, query,
+    (character) => [character.name, ...character.aliases].join(" "),
+    (character) => [character.name, ...character.aliases]);
+  const filtered = search.items;
 
   if (selected) {
     return (
@@ -79,6 +80,7 @@ export function CreateGuideFlow({ characters, existingKeys }: { characters: Char
         <InputGroupAddon><SearchIcon /></InputGroupAddon>
         <InputGroupInput value={query} onChange={(event) => setQuery(event.target.value)} placeholder="ค้นหาตัวละคร…" aria-label="ค้นหาตัวละคร" />
       </InputGroup>
+      <SearchNotice fuzzy={search.fuzzy} />
       <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
         {filtered.map((character) => {
           const disabled = existing.has(character.key);