diff --git a/gitnexus-web/src/components/DirectoryPicker.tsx b/gitnexus-web/src/components/DirectoryPicker.tsx index dfb46dc6e..5f144faa6 100644 --- a/gitnexus-web/src/components/DirectoryPicker.tsx +++ b/gitnexus-web/src/components/DirectoryPicker.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useCallback } from 'react'; +import { useState, useEffect, useCallback, useRef } from 'react'; import { Folder, ChevronRight, Home, X, Loader2, AlertCircle, Check } from '@/lib/lucide-icons'; import { listDirectories, type DirEntry } from '../services/backend-client'; import { useTranslation } from 'react-i18next'; @@ -17,6 +17,7 @@ export const DirectoryPicker = ({ open, onClose, onSelect, initialDir }: Directo const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [isVisible, setIsVisible] = useState(false); + const panelRef = useRef(null); const fetchEntries = useCallback(async (dir: string) => { setLoading(true); @@ -41,6 +42,24 @@ export const DirectoryPicker = ({ open, onClose, onSelect, initialDir }: Directo } }, [open, initialDir, fetchEntries]); + useEffect(() => { + if (!open) return; + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === 'Escape') { + e.stopPropagation(); + onClose(); + } + }; + document.addEventListener('keydown', handleKeyDown); + return () => document.removeEventListener('keydown', handleKeyDown); + }, [open, onClose]); + + useEffect(() => { + if (open && panelRef.current) { + panelRef.current.focus(); + } + }, [open]); + if (!open) return null; const segments = currentDir.split('/').filter(Boolean); @@ -59,11 +78,17 @@ export const DirectoryPicker = ({ open, onClose, onSelect, initialDir }: Directo