feat(glossary) : allow shared shortcuts and show item images

components/admin/glossary-manager.tsx

@@ -43,14 +43,14 @@ export function GlossaryManager({
   const [item, setItem] = useState<CatalogItem | null>(null);
   const [alias, setAlias] = useState("");
   const [query, setQuery] = useState("");
-  const itemNames = useMemo(() => new Map(
+  const itemsByKey = useMemo(() => new Map(
     Object.entries(catalogs).flatMap(([catalogKind, items]) =>
-      items.map((catalogItem) => [`${catalogKind}:${catalogItem.key}`, catalogItem.name] as const),
+      items.map((catalogItem) => [`${catalogKind}:${catalogItem.key}`, catalogItem] as const),
     ),
   ), [catalogs]);
   const search = searchItems(aliases, query,
-    (entry) => `${entry.alias} ${itemNames.get(`${entry.kind}:${entry.catalogKey}`) ?? entry.catalogKey}`,
-    (entry) => [entry.alias, itemNames.get(`${entry.kind}:${entry.catalogKey}`) ?? ""]);
+    (entry) => `${entry.alias} ${itemsByKey.get(`${entry.kind}:${entry.catalogKey}`)?.name ?? entry.catalogKey}`,
+    (entry) => [entry.alias, itemsByKey.get(`${entry.kind}:${entry.catalogKey}`)?.name ?? ""]);
   const visibleAliases = search.items;
 
   const submit = () => startTransition(async () => {
@@ -147,9 +147,18 @@ export function GlossaryManager({
           </Field>
 
           {visibleAliases.map((entry) => {
-            const name = itemNames.get(`${entry.kind}:${entry.catalogKey}`);
+            const catalogItem = itemsByKey.get(`${entry.kind}:${entry.catalogKey}`);
+            const name = catalogItem?.name;
             return (
               <div key={entry.id} className="flex items-center gap-3 rounded-lg border p-3">
+                {catalogItem ? (
+                  <span className={cn(
+                    "relative size-10 shrink-0 overflow-hidden rounded-md bg-muted",
+                    rarityGradientClass(catalogItem.rarity),
+                  )}>
+                    <Image src={catalogItem.imageUrl} alt="" fill sizes="40px" className="object-contain" />
+                  </span>
+                ) : null}
                 <div className="min-w-0 flex-1">
                   <p className="font-medium">{entry.alias}</p>
                   <p className="truncate text-sm text-muted-foreground">{name ?? entry.catalogKey}</p>