From bf648203f0b58722f82688326c4d12af85993c4c Mon Sep 17 00:00:00 2001
From: Bram <78373894+BramSuurdje@users.noreply.github.com>
Date: Wed, 14 Jan 2026 10:08:44 +0100
Subject: [PATCH] Add search filtering to CommandDialog for improved script
 search functionality (#10800)

---
 frontend/src/components/command-menu.tsx | 17 +++++++++++++++--
 frontend/src/components/ui/command.tsx   | 11 ++++++++---
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/command-menu.tsx b/frontend/src/components/command-menu.tsx
index 5753d0a38..9d4cb9442 100644
--- a/frontend/src/components/command-menu.tsx
+++ b/frontend/src/components/command-menu.tsx
@@ -194,7 +194,20 @@ function CommandMenu() {
         </TooltipProvider>
       </div>
 
-      <CommandDialog open={open} onOpenChange={setOpen}>
+      <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;
+        }}
+      >
         <DialogTitle className="sr-only">Search scripts</DialogTitle>
         <CommandInput placeholder="Search for a script..." />
         <CommandList>
@@ -204,7 +217,7 @@ function CommandMenu() {
               {scripts.map(script => (
                 <CommandItem
                   key={`script:${script.slug}`}
-                  value={`${script.name}-${script.type}`}
+                  value={`${script.name} ${script.type} ${script.description || ""}`}
                   onSelect={() => {
                     setOpen(false);
                     router.push(`/scripts?id=${script.slug}`);
diff --git a/frontend/src/components/ui/command.tsx b/frontend/src/components/ui/command.tsx
index 8fd9b91ed..265a4064f 100644
--- a/frontend/src/components/ui/command.tsx
+++ b/frontend/src/components/ui/command.tsx
@@ -24,13 +24,18 @@ const Command = React.forwardRef<
 ));
 Command.displayName = CommandPrimitive.displayName;
 
-type CommandDialogProps = {} & DialogProps;
+type CommandDialogProps = {
+  filter?: (value: string, search: string, keywords?: string[]) => number;
+} & DialogProps;
 
-function CommandDialog({ children, ...props }: CommandDialogProps) {
+function CommandDialog({ children, filter, ...props }: CommandDialogProps) {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command
+          filter={filter}
+          className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+        >
           {children}
         </Command>
       </DialogContent>