Files
tolaria/src/hooks/useNoteListKeyboard.ts
lucaronin d8b61dd62f feat: optimize note open and trash/archive latency
Latency root causes:
1. handleSelectNote/handleReplaceActiveTab awaited IPC before updating
   activeTabPath — zero visual feedback for 50-200ms file I/O
2. Trash/archive called updateEntry AFTER two sequential IPC calls —
   note stayed visible in list for 100-400ms

Optimizations:
- Content prefetch cache: hover on NoteItem and keyboard arrow
  navigation pre-load note content via IPC. When user clicks, content is
  already in memory — eliminates the IPC round-trip entirely.
- Optimistic trash/archive/restore/unarchive: updateEntry runs
  immediately, frontmatter writes happen async. On failure, UI rolls
  back and shows error toast.
- Rapid-switch safety: sequence counter (navSeqRef) ensures only the
  latest navigation sets activeTabPath — prevents stale content flash
  when user clicks multiple notes in quick succession.
- Prefetch cache cleared on vault reload to prevent stale content after
  external edits.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 13:28:46 +01:00

64 lines
2.4 KiB
TypeScript

import { useState, useCallback, useEffect, useRef } from 'react'
import type { VirtuosoHandle } from 'react-virtuoso'
import type { VaultEntry } from '../types'
import { prefetchNoteContent } from './useTabManagement'
interface NoteListKeyboardOptions {
items: VaultEntry[]
selectedNotePath: string | null
onOpen: (entry: VaultEntry) => void
enabled: boolean
}
export function useNoteListKeyboard({
items, selectedNotePath, onOpen, enabled,
}: NoteListKeyboardOptions) {
const [highlightedIndex, setHighlightedIndex] = useState(-1)
const virtuosoRef = useRef<VirtuosoHandle>(null)
// Reset highlight when items change (filter/sort/selection changed)
useEffect(() => {
setHighlightedIndex(-1) // eslint-disable-line react-hooks/set-state-in-effect -- reset on data change
}, [items])
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
if (!enabled || items.length === 0) return
if (e.metaKey || e.ctrlKey || e.altKey) return
if (e.key === 'ArrowDown') {
e.preventDefault()
setHighlightedIndex(prev => {
const next = Math.min((prev < 0 ? -1 : prev) + 1, items.length - 1)
virtuosoRef.current?.scrollToIndex({ index: next, behavior: 'auto' })
if (next >= 0 && next < items.length) prefetchNoteContent(items[next].path)
return next
})
} else if (e.key === 'ArrowUp') {
e.preventDefault()
setHighlightedIndex(prev => {
const next = Math.max((prev < 0 ? items.length : prev) - 1, 0)
virtuosoRef.current?.scrollToIndex({ index: next, behavior: 'auto' })
if (next >= 0 && next < items.length) prefetchNoteContent(items[next].path)
return next
})
} else if (e.key === 'Enter' && highlightedIndex >= 0 && highlightedIndex < items.length) {
e.preventDefault()
onOpen(items[highlightedIndex])
}
}, [enabled, items, highlightedIndex, onOpen])
const handleFocus = useCallback(() => {
if (highlightedIndex >= 0 || items.length === 0) return
const activeIdx = selectedNotePath
? items.findIndex(n => n.path === selectedNotePath)
: -1
setHighlightedIndex(activeIdx >= 0 ? activeIdx : 0)
}, [highlightedIndex, items, selectedNotePath])
const highlightedPath = (highlightedIndex >= 0 && highlightedIndex < items.length)
? items[highlightedIndex].path
: null
return { highlightedPath, handleKeyDown, handleFocus, virtuosoRef }
}