-
-
setProjectNameInput(event.target.value)}
- className="add-project-modal__selection-path"
- />
+
{selectedNotice}
diff --git a/packages/web/src/components/DirectoryBrowser.tsx b/packages/web/src/components/DirectoryBrowser.tsx
index 2e1020c93..a62dcfbbb 100644
--- a/packages/web/src/components/DirectoryBrowser.tsx
+++ b/packages/web/src/components/DirectoryBrowser.tsx
@@ -1,6 +1,6 @@
"use client";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef } from "react";
import {
ArrowUpIcon,
ChevronLeftIcon,
@@ -8,9 +8,7 @@ import {
FolderIcon,
getBreadcrumbs,
joinBrowsePath,
- loadRecentPaths,
RefreshIcon,
- SidebarSection,
} from "@/components/AddProjectModal.parts";
import type { UseDirectoryBrowser } from "@/hooks/useDirectoryBrowser";
@@ -28,13 +26,17 @@ function isFolderRowTarget(target: EventTarget | null): boolean {
return target instanceof HTMLElement && target.classList.contains("add-project-browser__row");
}
+// A button/link handles Enter natively (breadcrumbs, toolbar buttons). Enter-to-descend
+// must skip those so it does not double-fire alongside the element's own activation.
+function isActivatableElement(target: EventTarget | null): boolean {
+ return target instanceof HTMLButtonElement || target instanceof HTMLAnchorElement;
+}
+
export function DirectoryBrowser({ browser }: DirectoryBrowserProps) {
const toolbarRef = useRef
(null);
const contentRef = useRef(null);
const typeaheadBufferRef = useRef("");
const typeaheadLastTsRef = useRef(0);
- const [recentOpen, setRecentOpen] = useState(true);
- const [recentPaths] = useState(() => loadRecentPaths());
const selectedIndex = useMemo(
() =>
browser.directoryEntries.findIndex(
@@ -46,11 +48,18 @@ export function DirectoryBrowser({ browser }: DirectoryBrowserProps) {
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
const target = event.target;
- const isInsideBrowser =
- target instanceof Node &&
- (toolbarRef.current?.contains(target) || contentRef.current?.contains(target));
- if (!isInsideBrowser) return;
- if (isTextEditingTarget(event.target)) return;
+ if (!(target instanceof Node)) return;
+ if (isTextEditingTarget(target)) return;
+ // In scope when the event comes from inside the browser panes OR from an
+ // ancestor that contains them (the modal dialog focused on open, document.body).
+ // The plain ancestor `.contains` checks fail for that case because the dialog
+ // is an ancestor of the panes, not a descendant.
+ const content = contentRef.current;
+ const inScope =
+ (content?.contains(target) ?? false) ||
+ (toolbarRef.current?.contains(target) ?? false) ||
+ (content !== null && target.contains(content));
+ if (!inScope) return;
if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
const now = Date.now();
@@ -86,7 +95,7 @@ export function DirectoryBrowser({ browser }: DirectoryBrowserProps) {
if (
event.key === "Enter" &&
selectedIndex >= 0 &&
- isFolderRowTarget(event.target) &&
+ (isFolderRowTarget(target) || !isActivatableElement(target)) &&
!event.metaKey &&
!event.ctrlKey &&
!event.altKey &&
@@ -101,6 +110,11 @@ export function DirectoryBrowser({ browser }: DirectoryBrowserProps) {
return () => document.removeEventListener("keydown", handleKeyDown);
}, [browser, selectedIndex]);
+ const breadcrumbs = getBreadcrumbs(browser.browsePath);
+ const currentName = breadcrumbs[breadcrumbs.length - 1]?.label ?? browser.browsePath;
+ const showCurrentFolder = browser.browsePath !== "~" && browser.currentDirectory !== null;
+ const currentSelected = browser.selectedBrowsePath === browser.browsePath;
+
return (
<>
@@ -169,70 +183,74 @@ export function DirectoryBrowser({ browser }: DirectoryBrowserProps) {
-
-