diff --git a/src/components/layout/DragBar.tsx b/src/components/layout/DragBar.tsx index 88cb3d4..cc1dc96 100644 --- a/src/components/layout/DragBar.tsx +++ b/src/components/layout/DragBar.tsx @@ -8,7 +8,7 @@ const DEBOUNCE_MS = 120; export function SearchBar() { const { t } = useTranslation(); - const { searchQuery, setSearchQuery, activeTab } = useAppStore(); + const { searchQuery, setSearchQuery, activeTab, windowOpenCount } = useAppStore(); const inputRef = useRef(null); const debounceRef = useRef | null>(null); @@ -41,6 +41,16 @@ export function SearchBar() { }; }, []); + // Put the caret in the search box on every window open (settings tab hides + // the bar, so inputRef is simply null there). This lets the user type to + // filter straight away and takes focus off whichever sidebar button the OS + // restored it to — otherwise that restore reads as focus-visible and paints + // a stray ring on launch. + useEffect(() => { + const id = requestAnimationFrame(() => inputRef.current?.focus()); + return () => cancelAnimationFrame(id); + }, [windowOpenCount]); + // Auto-focus search when user starts typing (like Spotlight) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { @@ -72,7 +82,7 @@ export function SearchBar() { >
inputRef.current?.focus()} > diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx index 9b00a5e..213f8ef 100644 --- a/src/components/layout/Sidebar.tsx +++ b/src/components/layout/Sidebar.tsx @@ -44,9 +44,11 @@ export function Sidebar() { aria-label={label} onClick={() => handleTabChange(id)} className={cn( - // Keyboard users need a visible focus target: suppress the mouse-click - // outline, but keep the focus-visible ring. - 'group relative w-8 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ease-out cursor-pointer no-drag outline-none focus-visible:ring-2 focus-visible:ring-accent', + // No focus ring here: the window restores focus to the last-clicked + // sidebar button on every re-open, which browsers treat as + // focus-visible — a stray orange ring on launch. The active tab's + // accent fill already shows which view is selected. + 'group relative w-8 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ease-out cursor-pointer no-drag outline-none', isActive ? 'bg-accent/15 text-accent' : 'text-foreground/55 hover:text-foreground/80 hover:bg-surface-hover' @@ -84,7 +86,7 @@ export function Sidebar() { aria-pressed={isCapturePaused} onClick={() => toggleCapturePaused()} className={cn( - 'group relative w-8 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ease-out cursor-pointer no-drag outline-none focus-visible:ring-2 focus-visible:ring-accent', + 'group relative w-8 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ease-out cursor-pointer no-drag outline-none', isCapturePaused ? 'bg-amber-500/15 text-amber-500' : 'text-foreground/55 hover:text-foreground/80 hover:bg-surface-hover'