From 1c59eabf5f812be3746af9f5602691db2d2a4af7 Mon Sep 17 00:00:00 2001
From: Illia Filippov <filippov.illia.ukr@gmail.com>
Date: Thu, 25 Dec 2025 12:35:40 +0100
Subject: [PATCH] refactor(path-input): optimize entry rendering and clarify
 keydown handling in comments

- Replaced inline entry mapping with a memoized entryItems component for improved performance.
- Clarified keydown event handling comments to enhance understanding of ESC key behavior in relation to modal interactions.
---
 apps/ui/src/components/ui/path-input.tsx | 38 +++++++++++++-----------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/apps/ui/src/components/ui/path-input.tsx b/apps/ui/src/components/ui/path-input.tsx
index c9f79f34..73eefd7c 100644
--- a/apps/ui/src/components/ui/path-input.tsx
+++ b/apps/ui/src/components/ui/path-input.tsx
@@ -212,7 +212,7 @@ function PathInput({
   // Global keyboard shortcut to activate search (/)
   useEffect(() => {
     const handleGlobalKeyDown = (e: globalThis.KeyboardEvent) => {
-      // Activate search with '/' key (unless in an input field)
+      // Activate search with '/' key (unless in an input field or contenteditable)
       if (
         e.key === '/' &&
         !isEditing &&
@@ -230,7 +230,9 @@ function PathInput({
       }
     };
 
-    window.addEventListener('keydown', handleGlobalKeyDown, true); // Use capture phase for ESC handling and prevent parent modal from closing when search is open
+    // Use capture phase to intercept ESC before parent modal handlers
+    // This allows us to close search first, then let ESC bubble to close modal on second press
+    window.addEventListener('keydown', handleGlobalKeyDown, true);
     return () => window.removeEventListener('keydown', handleGlobalKeyDown, true);
   }, [isEditing, isSearchOpen, entries.length]);
 
@@ -251,6 +253,21 @@ function PathInput({
 
   const breadcrumbs = useMemo(() => parseBreadcrumbs(currentPath), [currentPath]);
 
+  const entryItems = useMemo(
+    () =>
+      entries.map((entry) => (
+        <CommandItem key={entry.path} value={entry.name} onSelect={() => handleSelectEntry(entry)}>
+          {entry.isDirectory ? (
+            <Folder className="w-3.5 h-3.5 text-brand-500 mr-2" />
+          ) : (
+            <File className="w-3.5 h-3.5 text-muted-foreground mr-2" />
+          )}
+          <span className="flex-1 truncate font-mono text-xs">{entry.name}</span>
+        </CommandItem>
+      )),
+    [entries, handleSelectEntry]
+  );
+
   const showBreadcrumbs = currentPath && !isEditing && !loading && !error;
 
   return (
@@ -314,22 +331,7 @@ function PathInput({
                   </div>
                   <CommandList className="scrollbar-styled">
                     <CommandEmpty>No files or directories found</CommandEmpty>
-                    <CommandGroup>
-                      {entries.map((entry) => (
-                        <CommandItem
-                          key={entry.path}
-                          value={entry.name}
-                          onSelect={() => handleSelectEntry(entry)}
-                        >
-                          {entry.isDirectory ? (
-                            <Folder className="w-3.5 h-3.5 text-brand-500 mr-2" />
-                          ) : (
-                            <File className="w-3.5 h-3.5 text-muted-foreground mr-2" />
-                          )}
-                          <span className="flex-1 truncate font-mono text-xs">{entry.name}</span>
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
+                    <CommandGroup>{entryItems}</CommandGroup>
                   </CommandList>
                 </Command>
               </div>