add feedback and report things

src/components/admin/search/Search.svelte

@@ -8,9 +8,9 @@
     required?: boolean;
     mustMatch?: boolean;
 
-    requestSuggestions: (query: string, limit: number) => Promise<string[]>;
+    requestSuggestions: (query: string, limit: number) => Promise<{ name: string; value: string }[]>;
 
-    onSubmit?: (value: string | null) => void;
+    onSubmit?: (value: { name: string; value: string } | null) => void;
   }
 
   // html bindings
@@ -21,7 +21,7 @@
 
   // states
   let inputValue = $derived(value);
-  let suggestions = $state<string[]>([]);
+  let suggestions = $state<{ name: string; value: string }[]>([]);
   let matched = $state(false);
 
   // callbacks
@@ -34,9 +34,9 @@
 
     suggestions = await requestSuggestions(inputValue ?? '', 5);
 
-    let suggestion = suggestions.find((s) => s === inputValue);
+    let suggestion = suggestions.find((s) => s.name === inputValue);
     if (suggestion != null) {
-      inputValue = value = suggestion;
+      inputValue = value = suggestion.name;
       matched = true;
       onSubmit?.(suggestion);
     } else if (!mustMatch) {
@@ -49,8 +49,10 @@
     }
   }
 
-  function onSuggestionClick(suggestion: string) {
-    inputValue = value = suggestion;
+  function onSuggestionClick(name: string) {
+    const suggestion = suggestions.find((s) => s.name === name)!;
+
+    inputValue = value = suggestion.name;
     suggestions = [];
     onSubmit?.(suggestion);
   }
@@ -77,7 +79,7 @@
       bind:value={inputValue}
       oninput={() => onSearchInput()}
       onfocusin={() => onSearchInput()}
-      pattern={mustMatch && matched ? `^(${suggestions.join('|')})$` : undefined}
+      pattern={mustMatch && matched ? `^(${suggestions.map((s) => s.name).join('|')})$` : undefined}
     />
     {#if suggestions.length > 0}
       <ul class="absolute bg-base-200 w-full z-20 menu menu-sm rounded-box">
@@ -85,8 +87,8 @@
           <li class="w-full text-left">
             <button
               class="block w-full overflow-hidden text-ellipsis whitespace-nowrap"
-              title={suggestion}
-              onclick={() => onSuggestionClick(suggestion)}>{suggestion}</button
+              title={suggestion.name}
+              onclick={() => onSuggestionClick(suggestion.name)}>{suggestion.name}</button
             >
           </li>
         {/each}