Merge pull request #223 from beNative/codex/enable-arrow-key-navigation-in-search-results

Allow arrow down to focus document tree from search

Author: beNative

components/Sidebar.tsx

@@ -87,6 +87,7 @@ const findNodeAndSiblings = (nodes: DocumentNode[], id: string): {node: Document
 };
 
 const Sidebar: React.FC<SidebarProps> = (props) => {
+  const { documentTree, navigableItems, searchTerm, setSearchTerm, setSelectedIds, lastClickedId, setLastClickedId, onContextMenu, renamingNodeId, onRenameComplete, onExpandAll, onCollapseAll, commands, pendingRevealId, onRevealHandled, onNewFromClipboard, customShortcuts, onSelectTemplate, onSelectNode } = props;
   const { documentTree, navigableItems, searchTerm, setSearchTerm, setSelectedIds, lastClickedId, setLastClickedId, onContextMenu, renamingNodeId, onRenameComplete, onExpandAll, onCollapseAll, commands, pendingRevealId, onRevealHandled, onNewFromClipboard, customShortcuts, searchInputRef } = props;
   const [focusedItemId, setFocusedItemId] = useState<string | null>(null);
   const [isTemplatesCollapsed, setIsTemplatesCollapsed] = useState(false);
@@ -105,6 +106,38 @@ const Sidebar: React.FC<SidebarProps> = (props) => {
 
 
   const sidebarRef = useRef<HTMLDivElement>(null);
+  const handleSearchKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key !== 'ArrowDown') {
+        return;
+      }
+
+      const firstNavigableItem = navigableItems[0];
+      if (!firstNavigableItem) {
+        return;
+      }
+
+      event.preventDefault();
+      event.currentTarget.blur();
+      setFocusedItemId(firstNavigableItem.id);
+      setSelectedIds(new Set([firstNavigableItem.id]));
+      setLastClickedId(firstNavigableItem.id);
+
+      if (firstNavigableItem.type === 'template') {
+        onSelectTemplate(firstNavigableItem.id);
+      } else {
+        const syntheticEvent = {
+          shiftKey: false,
+          ctrlKey: false,
+          metaKey: false,
+        } as React.MouseEvent;
+        onSelectNode(firstNavigableItem.id, syntheticEvent);
+      }
+
+      sidebarRef.current?.focus();
+    },
+    [navigableItems, onSelectNode, onSelectTemplate, setLastClickedId, setSelectedIds]
+  );
   const isResizingTemplates = useRef(false);
 
   // Effect to manage focus state
@@ -446,6 +479,7 @@ const Sidebar: React.FC<SidebarProps> = (props) => {
                 placeholder="Search..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
+                onKeyDown={handleSearchKeyDown}
                 className="w-full bg-background border border-border-color rounded-md pl-9 pr-9 py-1 text-xs text-text-main focus:ring-2 focus:ring-primary focus:outline-none placeholder:text-text-secondary"
             />
             {searchTerm.trim() && (