mirror of
https://github.com/thegeneralist01/archivr
synced 2026-07-22 03:05:32 +02:00
feat(frontend): focus search input on ⌘K/Ctrl+K
Add a global keydown handler that focuses (and selects) the search input when Meta+K or Ctrl+K is pressed. If the current view is not 'archive', switch to it first and focus the input after the next render frame via a pendingSearchFocus ref + requestAnimationFrame. The ⌘K hint badge in the toolbar was already present; this wires the behaviour behind it.
This commit is contained in:
parent
72cf7ff642
commit
4ca1dd7872
1 changed files with 31 additions and 0 deletions
|
|
@ -102,6 +102,8 @@ export default function App() {
|
||||||
// ── Entry detail (shared between PreviewPanel and ContextRail) ──────────
|
// ── Entry detail (shared between PreviewPanel and ContextRail) ──────────
|
||||||
const [entryDetail, setEntryDetail] = useState(null)
|
const [entryDetail, setEntryDetail] = useState(null)
|
||||||
const detailSeqRef = useRef(0)
|
const detailSeqRef = useRef(0)
|
||||||
|
const searchInputRef = useRef(null)
|
||||||
|
const pendingSearchFocus = useRef(false)
|
||||||
|
|
||||||
const humanizeTags = currentUser?.humanize_slugs ?? false;
|
const humanizeTags = currentUser?.humanize_slugs ?? false;
|
||||||
|
|
||||||
|
|
@ -266,6 +268,34 @@ export default function App() {
|
||||||
setSelectedEntryUid(prev => prev === entryUid ? null : prev)
|
setSelectedEntryUid(prev => prev === entryUid ? null : prev)
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
// ⌘K / Ctrl+K: focus the search input, switching to archive view first if needed.
|
||||||
|
useEffect(() => {
|
||||||
|
const handler = (e) => {
|
||||||
|
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
||||||
|
e.preventDefault()
|
||||||
|
if (view === 'archive') {
|
||||||
|
searchInputRef.current?.focus()
|
||||||
|
searchInputRef.current?.select()
|
||||||
|
} else {
|
||||||
|
pendingSearchFocus.current = true
|
||||||
|
setView('archive')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener('keydown', handler)
|
||||||
|
return () => document.removeEventListener('keydown', handler)
|
||||||
|
}, [view])
|
||||||
|
|
||||||
|
// After switching to archive view via ⌘K, focus the search input once rendered.
|
||||||
|
useEffect(() => {
|
||||||
|
if (view === 'archive' && pendingSearchFocus.current) {
|
||||||
|
pendingSearchFocus.current = false
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
searchInputRef.current?.focus()
|
||||||
|
searchInputRef.current?.select()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, [view])
|
||||||
const handleCaptureClick = useCallback(() => {
|
const handleCaptureClick = useCallback(() => {
|
||||||
setCaptureDialogOpen(true)
|
setCaptureDialogOpen(true)
|
||||||
}, [])
|
}, [])
|
||||||
|
|
@ -349,6 +379,7 @@ export default function App() {
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<input
|
<input
|
||||||
|
ref={searchInputRef}
|
||||||
className="search-input"
|
className="search-input"
|
||||||
type="search"
|
type="search"
|
||||||
aria-label="Search archive"
|
aria-label="Search archive"
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue