diff --git a/src/components/BoostApp.tsx b/src/components/BoostApp.tsx index 601daa5..d66753c 100644 --- a/src/components/BoostApp.tsx +++ b/src/components/BoostApp.tsx @@ -77,7 +77,11 @@ function AppShell() { const goBack = () => setTab(previousTab); useNavigationHotkeys(navigateFromCurrent); - useHotkey("app.displayName", () => setIsEditingName(true)); + const openNameEditor = () => { + setNewName(displayName); + setIsEditingName(true); + }; + useHotkey("app.displayName", openNameEditor); const saveName = () => { const trimmed = newName.trim(); @@ -156,6 +160,8 @@ function AppShell() { type="text" value={newName} onChange={(event) => setNewName(event.target.value)} + autoFocus + onFocus={(event) => event.currentTarget.select()} placeholder="Enter display name" className="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4" onKeyDown={(event) => { @@ -215,7 +221,7 @@ function AppShell() { setIsEditingName(true)} + onEditDisplayName={openNameEditor} onOpenHistory={() => setTab("history")} /> diff --git a/src/components/focus/GoalForm.tsx b/src/components/focus/GoalForm.tsx index 5bb6dc0..8f12a1e 100644 --- a/src/components/focus/GoalForm.tsx +++ b/src/components/focus/GoalForm.tsx @@ -112,16 +112,23 @@ function TagSelector({ const [allTags, setAllTags] = useState([]); const [isOpen, setIsOpen] = useState(false); const [isCreating, setIsCreating] = useState(false); - const ref = useOutsideDismiss(isOpen, () => { + const createButtonRef = useRef(null); + const close = () => { setIsOpen(false); setIsCreating(false); - }); + }; + const ref = useOutsideDismiss(isOpen, close); const addTagCombo = useHotkeyLabel("timer.addTag"); // The Tags row stays mounted but hidden below the `wide` breakpoint. useHotkey("timer.addTag", () => { if (ref.current?.getClientRects().length) setIsOpen(true); }, isActive); + // Opening (by click or Alt+Shift+T) puts focus on the first action so the keyboard can carry on. + useEffect(() => { + if (isOpen && !isCreating) createButtonRef.current?.focus(); + }, [isOpen, isCreating]); + useEffect(() => { if (isOpen) databaseService.getTags().then(setAllTags).catch((error: unknown) => console.error("Failed to load tags:", error)); }, [isOpen]); @@ -170,7 +177,12 @@ function TagSelector({ ) : null} {isOpen ? ( -
+
{ + if (event.key === "Escape" && !isCreating) close(); + }} + >
{isCreating ? ( setIsCreating(false)} /> @@ -178,6 +190,7 @@ function TagSelector({ <>
) : null}