fix(frontend): implement weighted search scoring for command menu (#11534)

* fix(frontend): implement weighted search scoring for command menu

The previous cmdk search was filtered correctly but then sorted by category
order rather than match strength. This caused "Dokpoly" to appear above
"Traefik", if you searched for Traefik, simply because its category (Containers) comes before Traefik's
category alphabetically.

- Flatten search results into a single "Search Results" group.
- Implement scoring to prioritize name matches over descriptions.
- Revert to category grouping only when the search query is empty.

* perf(frontend): optimize search logic

Limiting the results to 20 helps a lot.

frontend/src/components/command-menu.tsx

@@ -23,6 +23,34 @@ import { Button } from "./ui/button";
 import { Badge } from "./ui/badge";
 import Link from "next/link";
 
+function search(scripts: Script[], query: string): Script[] {
+  const queryLower = query.toLowerCase().trim();
+  const searchWords = queryLower.split(/\s+/).filter(Boolean);
+
+  return scripts
+    .map(script => {
+      const nameLower = script.name.toLowerCase();
+      const descriptionLower = (script.description || "").toLowerCase();
+
+      let score = 0;
+
+      for (const word of searchWords) {
+        if (nameLower.includes(word)) {
+          score += 10;
+        }
+        if (descriptionLower.includes(word)) {
+          score += 5;
+        }
+      }
+
+      return { script, score };
+    })
+    .filter(({ score }) => score > 0)
+    .sort((a, b) => b.score - a.score)
+    .slice(0, 20)
+    .map(({ script }) => script);
+}
+
 export function formattedBadge(type: string) {
   switch (type) {
     case "vm":
@@ -51,9 +79,11 @@ function getRandomScript(categories: Category[], previouslySelected: Set<string>
 }
 
 function CommandMenu() {
+  const [query, setQuery] = React.useState("");
   const [open, setOpen] = React.useState(false);
   const [links, setLinks] = React.useState<Category[]>([]);
   const [isLoading, setIsLoading] = React.useState(false);
+  const [results, setResults] = React.useState<Script[]>([]);
   const [selectedScripts, setSelectedScripts] = React.useState<Set<string>>(new Set());
   const router = useRouter();
 
@@ -70,6 +100,27 @@ function CommandMenu() {
       });
   };
 
+  React.useEffect(() => {
+    if (query.trim() === "") {
+      fetchSortedCategories();
+    }
+    else {
+      const scriptMap = new Map<string, Script>();
+
+      for (const category of links) {
+        for (const script of category.scripts || []) {
+          if (!scriptMap.has(script.slug)) {
+            scriptMap.set(script.slug, script);
+          }
+        }
+      }
+
+      const uniqueScripts = Array.from(scriptMap.values());
+      const filteredResults = search(uniqueScripts, query);
+      setResults(filteredResults);
+    }
+  }, [query]);
+
   React.useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
@@ -197,20 +248,20 @@ function CommandMenu() {
 
       <CommandDialog
         open={open}
-        onOpenChange={setOpen}
-        filter={(value: string, search: string) => {
-          const searchLower = search.toLowerCase().trim();
-          if (!searchLower)
-            return 1;
-          const valueLower = value.toLowerCase();
-          const searchWords = searchLower.split(/\s+/).filter(Boolean);
-          // All search words must appear somewhere in the value (name + description)
-          const allWordsMatch = searchWords.every((word: string) => valueLower.includes(word));
-          return allWordsMatch ? 1 : 0;
+        onOpenChange={(open) => {
+          setOpen(open);
+          if (open) {
+            setQuery("");
+            setResults([]);
+          }
         }}
       >
         <DialogTitle className="sr-only">Search scripts</DialogTitle>
-        <CommandInput placeholder="Search for a script..." />
+        <CommandInput
+          placeholder="Search for a script..."
+          onValueChange={setQuery}
+          value={query}
+        />
         <CommandList>
           <CommandEmpty>
             {isLoading ? (
@@ -233,9 +284,10 @@ function CommandMenu() {
               </div>
             )}
           </CommandEmpty>
-          {Object.entries(uniqueScriptsByCategory).map(([categoryName, scripts]) => (
-            <CommandGroup key={`category:${categoryName}`} heading={categoryName}>
-              {scripts.map(script => (
+
+          {results.length > 0 ? (
+            <CommandGroup heading="Search Results">
+              {results.map(script => (
                 <CommandItem
                   key={`script:${script.slug}`}
                   value={`${script.name} ${script.type} ${script.description || ""}`}
@@ -268,7 +320,44 @@ function CommandMenu() {
                 </CommandItem>
               ))}
             </CommandGroup>
-          ))}
+          ) : ( // When no search results, show all scripts grouped by category
+            Object.entries(uniqueScriptsByCategory).map(([categoryName, scripts]) => (
+              <CommandGroup key={`category:${categoryName}`} heading={categoryName}>
+                {scripts.map(script => (
+                  <CommandItem
+                    key={`script:${script.slug}`}
+                    value={`${script.name} ${script.type} ${script.description || ""}`}
+                    onSelect={() => {
+                      setOpen(false);
+                      router.push(`/scripts?id=${script.slug}`);
+                    }}
+                    tabIndex={0}
+                    aria-label={`Open script ${script.name}`}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        setOpen(false);
+                        router.push(`/scripts?id=${script.slug}`);
+                      }
+                    }}
+                  >
+                    <div className="flex gap-2" onClick={() => setOpen(false)}>
+                      <Image
+                        src={script.logo || `/${basePath}/logo.png`}
+                        onError={e => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
+                        unoptimized
+                        width={16}
+                        height={16}
+                        alt=""
+                        className="h-5 w-5"
+                      />
+                      <span>{script.name}</span>
+                      <span>{formattedBadge(script.type)}</span>
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            ))
+          )}
         </CommandList>
       </CommandDialog>
     </>