From d2211c5e9ed0eb3aa2cd19f3fb2198e95a819a83 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Fri, 22 Mar 2024 10:42:45 -0700
Subject: [PATCH] Filtering for cmd palette

---
 src-tauri/src/main.rs                 |  2 +-
 src-web/components/CommandPalette.tsx | 24 +++++++++++++++++-------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 5790feeb..b0b66d40 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -23,7 +23,7 @@ use log::{debug, error, info, warn};
 use rand::random;
 use serde_json::{json, Value};
 use sqlx::migrate::Migrator;
-use sqlx::sqlite::{SqliteConnectOptions, SqliteJournalMode};
+use sqlx::sqlite::{SqliteConnectOptions};
 use sqlx::types::Json;
 use sqlx::{Pool, Sqlite, SqlitePool};
 #[cfg(target_os = "macos")]
diff --git a/src-web/components/CommandPalette.tsx b/src-web/components/CommandPalette.tsx
index a25e8e2d..a781e1fa 100644
--- a/src-web/components/CommandPalette.tsx
+++ b/src-web/components/CommandPalette.tsx
@@ -15,6 +15,7 @@ export function CommandPalette({ onClose }: { onClose: () => void }) {
   const activeEnvironmentId = useActiveEnvironmentId();
   const workspaces = useWorkspaces();
   const requests = useRequests();
+  const [command, setCommand] = useState<string>('');
 
   const items = useMemo<{ label: string; onSelect: () => void; key: string }[]>(() => {
     const items = [];
@@ -47,10 +48,17 @@ export function CommandPalette({ onClose }: { onClose: () => void }) {
     return items;
   }, [activeEnvironmentId, requests, routes, workspaces]);
 
-  const handleSelectAndClose = (cb: () => void) => {
-    onClose();
-    cb();
-  };
+  const filteredItems = useMemo(() => {
+    return items.filter((v) => v.label.toLowerCase().includes(command.toLowerCase()));
+  }, [command, items]);
+
+  const handleSelectAndClose = useCallback(
+    (cb: () => void) => {
+      onClose();
+      cb();
+    },
+    [onClose],
+  );
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
@@ -59,13 +67,13 @@ export function CommandPalette({ onClose }: { onClose: () => void }) {
       } else if (e.key === 'ArrowUp') {
         setSelectedIndex((prev) => prev - 1);
       } else if (e.key === 'Enter') {
-        const item = items[selectedIndex];
+        const item = filteredItems[selectedIndex];
         if (item) {
           handleSelectAndClose(item.onSelect);
         }
       }
     },
-    [items, onClose, selectedIndex],
+    [filteredItems, handleSelectAndClose, selectedIndex],
   );
 
   return (
@@ -76,11 +84,13 @@ export function CommandPalette({ onClose }: { onClose: () => void }) {
           name="command"
           label="Command"
           placeholder="Type a command"
+          defaultValue=""
+          onChange={setCommand}
           onKeyDown={handleKeyDown}
         />
       </div>
       <div className="h-full px-1.5 overflow-y-auto">
-        {items.map((v, i) => (
+        {filteredItems.map((v, i) => (
           <CommandPaletteItem
             active={i === selectedIndex}
             key={v.key}