Refactor JSON editor and command menu components (#12492)

- Moved the search function to the JSON editor for better organization.
- Improved search functionality in the command menu with a new filtering approach.
- Cleaned up unused imports and optimized state management.
- Enhanced user experience by refining the search results display and handling.
- Updated error handling for JSON import and file reading processes.

frontend/src/components/command-menu.tsx

@@ -1,6 +1,7 @@
-import { useRouter } from "next/navigation";
 import { ArrowRightIcon, Sparkles } from "lucide-react";
+import { useRouter } from "next/navigation";
 import Image from "next/image";
+import Link from "next/link";
 import React from "react";
 
 import type { Category, Script } from "@/lib/types";
@@ -21,35 +22,6 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/t
 import { DialogTitle } from "./ui/dialog";
 import { Button } from "./ui/button";
 import { Badge } from "./ui/badge";
-import Link from "next/link";
-
-export 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) {
@@ -79,11 +51,9 @@ 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();
 
@@ -100,27 +70,6 @@ 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)) {
@@ -248,46 +197,49 @@ function CommandMenu() {
 
       <CommandDialog
         open={open}
-        onOpenChange={(open) => {
-          setOpen(open);
-          if (open) {
-            setQuery("");
-            setResults([]);
-          }
+        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;
         }}
       >
         <DialogTitle className="sr-only">Search scripts</DialogTitle>
-        <CommandInput
-          placeholder="Search for a script..."
-          onValueChange={setQuery}
-          value={query}
-        />
+        <CommandInput placeholder="Search for a script..." />
         <CommandList>
           <CommandEmpty>
-            {isLoading ? (
-              "Searching..."
-            ) : (
-              <div className="flex flex-col items-center justify-center py-6 text-center">
-                <p className="text-sm text-muted-foreground">No scripts match your search.</p>
-                <div className="mt-4">
-                  <p className="text-xs text-muted-foreground mb-2">Want to add a new script?</p>
-                  <Button variant="outline" size="sm" asChild>
-                    <Link
-                      href={`https://github.com/community-scripts/${basePath}/tree/main/docs/contribution/GUIDE.md`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      Documentation <ArrowRightIcon className="ml-2 h-4 w-4" />
-                    </Link>
-                  </Button>
-                </div>
-              </div>
-            )}
+            {isLoading
+              ? (
+                  "Searching..."
+                )
+              : (
+                  <div className="flex flex-col items-center justify-center py-6 text-center">
+                    <p className="text-sm text-muted-foreground">No scripts match your search.</p>
+                    <div className="mt-4">
+                      <p className="text-xs text-muted-foreground mb-2">Want to add a new script?</p>
+                      <Button variant="outline" size="sm" asChild>
+                        <Link
+                          href={`https://github.com/community-scripts/${basePath}/tree/main/docs/contribution/GUIDE.md`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          Documentation
+                          {" "}
+                          <ArrowRightIcon className="ml-2 h-4 w-4" />
+                        </Link>
+                      </Button>
+                    </div>
+                  </div>
+                )}
           </CommandEmpty>
-
-          {results.length > 0 ? (
-            <CommandGroup heading="Search Results">
-              {results.map(script => (
+          {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 || ""}`}
@@ -320,44 +272,7 @@ 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>
     </>