Merge branch 'main' into codex/enable-arrow-key-navigation-in-search-results

Author: beNative

App.tsx

@@ -22,7 +22,7 @@ import UpdateNotification from './components/UpdateNotification';
 import CreateFromTemplateModal from './components/CreateFromTemplateModal';
 import DocumentHistoryView from './components/PromptHistoryView';
 import FolderOverview, { type FolderOverviewMetrics, type FolderSearchResult, type RecentDocumentSummary, type DocTypeCount, type LanguageCount } from './components/FolderOverview';
-import { PlusIcon, FolderPlusIcon, TrashIcon, GearIcon, InfoIcon, TerminalIcon, DocumentDuplicateIcon, PencilIcon, CopyIcon, CommandIcon, CodeIcon, FolderDownIcon, FormatIcon, SparklesIcon, SaveIcon, CheckIcon, DatabaseIcon, ExpandAllIcon, CollapseAllIcon, ArrowUpIcon, ArrowDownIcon, LockClosedIcon, LockOpenIcon } from './components/Icons';
+import { PlusIcon, FolderPlusIcon, TrashIcon, GearIcon, InfoIcon, TerminalIcon, DocumentDuplicateIcon, PencilIcon, CopyIcon, CommandIcon, CodeIcon, FolderDownIcon, FormatIcon, SparklesIcon, SaveIcon, CheckIcon, DatabaseIcon, ExpandAllIcon, CollapseAllIcon, ArrowUpIcon, ArrowDownIcon, LockClosedIcon, LockOpenIcon, SearchIcon } from './components/Icons';
 import AboutModal from './components/AboutModal';
 import Header from './components/Header';
 import CustomTitleBar from './components/CustomTitleBar';
@@ -367,6 +367,7 @@ export const MainApp: React.FC = () => {
     const isLoggerResizing = useRef(false);
     const commandPaletteTargetRef = useRef<HTMLDivElement>(null);
     const commandPaletteInputRef = useRef<HTMLInputElement>(null);
+    const documentTreeSearchInputRef = useRef<HTMLInputElement>(null);
     const dragCounter = useRef(0);
     const ensureNodeVisibleRef = useRef<(node: Pick<DocumentOrFolder, 'id' | 'type' | 'parentId'>) => void>();
 
@@ -768,6 +769,14 @@ export const MainApp: React.FC = () => {
         setSelectedIds(new Set(navigableItems.map(item => item.id)));
     }, [navigableItems, setSelectedIds]);
 
+    const handleFocusDocumentTreeSearch = useCallback(() => {
+        const input = documentTreeSearchInputRef.current;
+        if (input) {
+            input.focus();
+            input.select();
+        }
+    }, [documentTreeSearchInputRef]);
+
     const handleMoveSelectionUp = useCallback(() => {
         const primaryId = getPrimarySelectionId();
         if (!primaryId) {
@@ -2630,6 +2639,7 @@ export const MainApp: React.FC = () => {
         { id: 'rename-item', name: 'Rename Selected Item', action: handleRenameSelection, category: 'File', icon: PencilIcon, shortcut: ['F2'], keywords: 'rename edit title' },
         { id: 'delete-item', name: 'Delete Selection', action: () => handleDeleteSelection(selectedIds), category: 'File', icon: TrashIcon, shortcut: ['Delete'], keywords: 'remove discard' },
         { id: 'document-tree-select-all', name: 'Select All Tree Items', action: handleDocumentTreeSelectAll, category: 'Document Tree', icon: CheckIcon, shortcut: ['Control', 'A'], keywords: 'select highlight all tree' },
+        { id: 'document-tree-focus-search', name: 'Focus Document Tree Search', action: handleFocusDocumentTreeSearch, category: 'Document Tree', icon: SearchIcon, shortcut: ['F4'], keywords: 'focus search tree find' },
         { id: 'document-tree-expand-all', name: 'Expand All Tree Folders', action: handleExpandAll, category: 'Document Tree', icon: ExpandAllIcon, shortcut: ['Control', 'Alt', 'ArrowRight'], keywords: 'open folders tree expand' },
         { id: 'document-tree-collapse-all', name: 'Collapse All Tree Folders', action: handleCollapseAll, category: 'Document Tree', icon: CollapseAllIcon, shortcut: ['Control', 'Alt', 'ArrowLeft'], keywords: 'close folders tree collapse' },
         { id: 'document-tree-move-selection-up', name: 'Move Selection Up', action: handleMoveSelectionUp, category: 'Document Tree', icon: ArrowUpIcon, shortcut: ['Alt', 'ArrowUp'], keywords: 'reorder move up tree' },
@@ -2644,7 +2654,7 @@ export const MainApp: React.FC = () => {
         { id: 'toggle-info', name: 'Toggle Info View', action: () => { addLog('INFO', 'Command: Toggle Info View.'); setView(v => v === 'info' ? 'editor' : 'info'); }, category: 'View', icon: InfoIcon, keywords: 'help docs readme' },
         { id: 'open-about', name: 'About DocForge', action: handleOpenAbout, category: 'Help', icon: SparklesIcon, keywords: 'about credits information' },
         { id: 'toggle-logs', name: 'Toggle Logs Panel', action: () => { addLog('INFO', 'Command: Toggle Logs Panel.'); setIsLoggerVisible(v => !v); }, category: 'View', icon: TerminalIcon, keywords: 'debug console' },
-    ], [handleNewDocument, handleOpenNewCodeFileModal, handleNewRootFolder, handleNewSubfolder, handleDeleteSelection, handleNewTemplate, toggleSettingsView, handleDuplicateSelection, handleRenameSelection, selectedIds, addLog, handleToggleCommandPalette, handleFormatDocument, handleOpenAbout, handleNewDocumentFromClipboard, handleDocumentTreeSelectAll, handleExpandAll, handleCollapseAll, handleMoveSelectionUp, handleMoveSelectionDown, handleCopySelectionContent, handleSaveSelectionToFile, activeDocument?.locked, handleToggleActiveDocumentLock]);
+    ], [handleNewDocument, handleOpenNewCodeFileModal, handleNewRootFolder, handleNewSubfolder, handleDeleteSelection, handleNewTemplate, toggleSettingsView, handleDuplicateSelection, handleRenameSelection, selectedIds, addLog, handleToggleCommandPalette, handleFormatDocument, handleOpenAbout, handleNewDocumentFromClipboard, handleDocumentTreeSelectAll, handleFocusDocumentTreeSearch, handleExpandAll, handleCollapseAll, handleMoveSelectionUp, handleMoveSelectionDown, handleCopySelectionContent, handleSaveSelectionToFile, activeDocument?.locked, handleToggleActiveDocumentLock]);
 
     const enrichedCommands = useMemo(() => {
       return commands.map(command => {
@@ -2800,7 +2810,7 @@ export const MainApp: React.FC = () => {
                 return;
             }
 
-            if (command?.category === 'Document Tree') {
+            if (command?.category === 'Document Tree' && command.id !== 'document-tree-focus-search') {
                 const target = e.target as HTMLElement | null;
                 const isWithinSidebar = target?.closest('[data-component="document-tree-sidebar"]');
                 if (!isWithinSidebar) {
@@ -3022,6 +3032,7 @@ export const MainApp: React.FC = () => {
                                         onCollapseAll={handleCollapseAll}
                                         searchTerm={searchTerm}
                                         setSearchTerm={setSearchTerm}
+                                        searchInputRef={documentTreeSearchInputRef}
                                         onContextMenu={handleContextMenu}
                                         renamingNodeId={renamingNodeId}
                                         onRenameComplete={() => setRenamingNodeId(null)}

components/ContextMenu.tsx

@@ -155,7 +155,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({ isOpen, position, items, onCl
         maxHeight: menuStyle.maxHeight ? menuStyle.maxHeight : undefined,
         overflowY: menuStyle.overflowY,
       }}
-      className="fixed z-50 w-56 rounded-md bg-secondary p-1.5 shadow-2xl border border-border-color animate-fade-in-fast"
+      className="fixed z-50 w-[16.8rem] rounded-md bg-secondary p-1.5 shadow-2xl border border-border-color animate-fade-in-fast"
     >
       <ul className="space-y-1">
         {/* Fix: Restructured the type guard to check for a property on the desired object type directly, which ensures proper type narrowing for the MenuItem union. */}

components/Sidebar.tsx

@@ -54,6 +54,7 @@ interface SidebarProps {
   customShortcuts: Record<string, string[]>;
   pendingRevealId: string | null;
   onRevealHandled: () => void;
+  searchInputRef: React.RefObject<HTMLInputElement>;
 
   activeDocumentLocked: boolean;
 
@@ -87,6 +88,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);
   const [templatesPanelHeight, setTemplatesPanelHeight] = useState(DEFAULT_TEMPLATES_PANEL_HEIGHT);
@@ -354,6 +356,18 @@ const Sidebar: React.FC<SidebarProps> = (props) => {
       return;
     }
 
+    const focusSearchShortcut = getEffectiveShortcut('document-tree-focus-search');
+    if (matchesShortcut(e, focusSearchShortcut)) {
+      e.preventDefault();
+      e.stopPropagation();
+      const input = searchInputRef.current;
+      if (input) {
+        input.focus();
+        input.select();
+      }
+      return;
+    }
+
     const copyShortcut = getEffectiveShortcut('document-tree-copy-content');
     if (matchesShortcut(e, copyShortcut)) {
       e.preventDefault();
@@ -460,6 +474,7 @@ const Sidebar: React.FC<SidebarProps> = (props) => {
         <div className="relative w-full">
             <SearchIcon className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary pointer-events-none" />
             <input
+                ref={searchInputRef}
                 type="text"
                 placeholder="Search..."
                 value={searchTerm}