feat : update

components/admin/glossary-manager.tsx

@@ -9,10 +9,10 @@ import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 
 import { addGlossaryAlias, removeGlossaryAlias } from "@/app/admin/actions";
+import { CatalogDropdown } from "@/components/admin/ui/catalog-select";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { FuzzyCombobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "@/components/ui/combobox";
 import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
@@ -106,32 +106,14 @@ export function GlossaryManager({
             </Field>
             <Field>
               <FieldLabel>รายการ</FieldLabel>
-              <FuzzyCombobox
+              <CatalogDropdown
                 items={catalogs[kind]}
                 searchNames={(value) => [value.name, ...aliases.filter((entry) => entry.kind === kind && entry.catalogKey === value.key).map((entry) => entry.alias)]}
-                value={item}
-                onValueChange={setItem}
-                itemToStringLabel={(value) => value.name}
-                itemToStringValue={(value) => value.name}
-              >
-                <ComboboxInput placeholder="ค้นหารายการ…" showClear />
-                <ComboboxContent>
-                  <ComboboxEmpty>ไม่พบรายการ</ComboboxEmpty>
-                  <ComboboxList>
-                    {(catalogItem) => (
-                      <ComboboxItem key={catalogItem.key} value={catalogItem}>
-                        <span className={cn(
-                          "relative size-8 shrink-0 overflow-hidden rounded-md bg-muted",
-                          rarityGradientClass(catalogItem.rarity),
-                        )}>
-                          <Image src={catalogItem.imageUrl} alt="" fill className="object-contain" />
-                        </span>
-                        {catalogItem.name}
-                      </ComboboxItem>
-                    )}
-                  </ComboboxList>
-                </ComboboxContent>
-              </FuzzyCombobox>
+                value={item?.key ?? ""}
+                onValueChange={(key) => setItem(catalogs[kind].find((value) => value.key === key) ?? null)}
+                placeholder="ค้นหารายการ…"
+                rarityBackground
+              />
             </Field>
             <Field>
               <FieldLabel htmlFor="glossary-alias">Shortcut</FieldLabel>