2026-03-16 19:36:00 +01:00
|
|
|
import { useState, useMemo, useCallback, useEffect, memo } from 'react'
|
2026-03-19 06:41:40 +01:00
|
|
|
import type { VaultEntry, SidebarSelection, ModifiedFile, NoteStatus, InboxPeriod } from '../types'
|
2026-03-18 03:43:23 +01:00
|
|
|
import type { NoteListFilter } from '../utils/noteListHelpers'
|
2026-03-20 23:03:17 +01:00
|
|
|
import { countByFilter, countAllByFilter, countInboxByPeriod } from '../utils/noteListHelpers'
|
2026-03-16 19:36:00 +01:00
|
|
|
import { NoteItem } from './NoteItem'
|
2026-03-09 13:05:18 +01:00
|
|
|
import { prefetchNoteContent } from '../hooks/useTabManagement'
|
2026-02-27 15:14:21 +01:00
|
|
|
import { BulkActionBar } from './BulkActionBar'
|
2026-03-16 19:36:00 +01:00
|
|
|
import { useMultiSelect } from '../hooks/useMultiSelect'
|
feat: keyboard-first navigation — menu bar shortcuts, note list nav, inspector Tab/Enter (#158)
* feat: keyboard-first navigation — menu bar shortcuts, note list nav, inspector Tab/Enter
- Add missing menu bar items: Archive Note (⌘E), Trash Note (⌘⌫),
Find in Vault (⌘⇧F), Go Back (⌘[), Go Forward (⌘])
- Wire new menu events through useMenuEvents → useAppCommands
- Note list: ↑↓ moves highlight, Enter opens selected note (useNoteListKeyboard hook)
- Inspector properties: Tab between rows, Enter to start editing
- Settings panel: auto-focus first input on open
- Extract StatusDot, StateBadge, noteItemStyle from NoteItem (reduces complexity)
- Extract dispatchActiveTabEvent/dispatchOptionalEvent from useMenuEvents
- 21 new tests (useNoteListKeyboard + useMenuEvents for new events)
- All 1275 frontend tests pass, 319 Rust tests pass
- CodeScene quality gates: passed (NoteItem improved from 22→18 complexity)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* design: keyboard-first-nav wireframes (note list highlight, menu shortcuts, inspector tab nav)
* test: add search.rs coverage for fallback branches (qmd_uri_to_vault_path, extract_clean_snippet)
* chore: exclude search.rs and lib.rs from coverage (qmd integration + Tauri setup code)
---------
Co-authored-by: Test <test@test.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 19:32:15 +01:00
|
|
|
import { useNoteListKeyboard } from '../hooks/useNoteListKeyboard'
|
2026-03-16 19:36:00 +01:00
|
|
|
import { NoteListHeader } from './note-list/NoteListHeader'
|
2026-03-18 03:43:23 +01:00
|
|
|
import { FilterPills } from './note-list/FilterPills'
|
2026-03-19 06:41:40 +01:00
|
|
|
import { InboxFilterPills } from './note-list/InboxFilterPills'
|
2026-03-16 19:36:00 +01:00
|
|
|
import { EntityView, ListView } from './note-list/NoteListViews'
|
|
|
|
|
import { DeletedNotesBanner } from './note-list/TrashWarningBanner'
|
|
|
|
|
import { routeNoteClick, toggleSetMember, resolveHeaderTitle } from './note-list/noteListUtils'
|
2026-02-22 10:18:05 +01:00
|
|
|
import {
|
2026-03-16 19:36:00 +01:00
|
|
|
useTypeEntryMap, useNoteListData, useNoteListSearch,
|
|
|
|
|
useNoteListSort, useMultiSelectKeyboard, useModifiedFilesState,
|
|
|
|
|
} from './note-list/noteListHooks'
|
2026-02-17 18:45:34 +01:00
|
|
|
|
2026-02-14 18:22:42 +01:00
|
|
|
interface NoteListProps {
|
|
|
|
|
entries: VaultEntry[]
|
2026-02-14 19:44:39 +01:00
|
|
|
selection: SidebarSelection
|
2026-02-14 20:07:23 +01:00
|
|
|
selectedNote: VaultEntry | null
|
2026-03-18 03:43:23 +01:00
|
|
|
noteListFilter: NoteListFilter
|
|
|
|
|
onNoteListFilterChange: (filter: NoteListFilter) => void
|
2026-03-19 06:41:40 +01:00
|
|
|
inboxPeriod?: InboxPeriod
|
|
|
|
|
onInboxPeriodChange?: (period: InboxPeriod) => void
|
2026-02-24 16:35:47 +01:00
|
|
|
modifiedFiles?: ModifiedFile[]
|
2026-03-02 23:25:54 +01:00
|
|
|
modifiedFilesError?: string | null
|
2026-02-24 15:54:24 +01:00
|
|
|
getNoteStatus?: (path: string) => NoteStatus
|
2026-02-27 22:43:19 +01:00
|
|
|
sidebarCollapsed?: boolean
|
2026-02-14 20:07:23 +01:00
|
|
|
onSelectNote: (entry: VaultEntry) => void
|
2026-02-23 20:12:54 +01:00
|
|
|
onReplaceActiveTab: (entry: VaultEntry) => void
|
2026-02-14 21:14:16 +01:00
|
|
|
onCreateNote: () => void
|
2026-02-27 15:14:21 +01:00
|
|
|
onBulkArchive?: (paths: string[]) => void
|
|
|
|
|
onBulkTrash?: (paths: string[]) => void
|
2026-03-12 00:06:33 +01:00
|
|
|
onBulkRestore?: (paths: string[]) => void
|
|
|
|
|
onBulkDeletePermanently?: (paths: string[]) => void
|
|
|
|
|
onEmptyTrash?: () => void
|
2026-03-03 11:22:04 +01:00
|
|
|
onUpdateTypeSort?: (path: string, key: string, value: string | number | boolean | string[] | null) => void
|
|
|
|
|
updateEntry?: (path: string, patch: Partial<VaultEntry>) => void
|
2026-03-19 08:47:25 +01:00
|
|
|
onOpenInNewWindow?: (entry: VaultEntry) => void
|
2026-02-14 19:44:39 +01:00
|
|
|
}
|
|
|
|
|
|
2026-03-19 08:47:25 +01:00
|
|
|
function NoteListInner({ entries, selection, selectedNote, noteListFilter, onNoteListFilterChange, inboxPeriod = 'month', onInboxPeriodChange, modifiedFiles, modifiedFilesError, getNoteStatus, sidebarCollapsed, onSelectNote, onReplaceActiveTab, onCreateNote, onBulkArchive, onBulkTrash, onBulkRestore, onBulkDeletePermanently, onEmptyTrash, onUpdateTypeSort, updateEntry, onOpenInNewWindow }: NoteListProps) {
|
refactor: extract hooks and components from NoteListInner for code health
Split NoteListInner (190 lines, 14 props) into focused units:
- useNoteListSort: sort state, migration, type frontmatter persistence
- useNoteListSearch: search/query state and toggle
- useMultiSelectKeyboard: keyboard shortcuts for bulk actions
- useModifiedFilesState: modified file tracking and status resolution
- NoteListHeader: 52px header bar with sort, search, and create
Also extracted pure helpers (handleEscapeKey, handleSelectAllKey,
handleBulkActionKey, resolveEmptyText, deriveEffectiveSort, etc.)
to reduce cyclomatic complexity in remaining functions.
NoteListInner body: 190 → 48 lines. CodeScene health: 8.54 → 9.36.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-05 15:53:15 +01:00
|
|
|
const { modifiedPathSet, modifiedSuffixes, resolvedGetNoteStatus } = useModifiedFilesState(modifiedFiles, getNoteStatus)
|
2026-03-18 03:43:23 +01:00
|
|
|
|
|
|
|
|
const isSectionGroup = selection.kind === 'sectionGroup'
|
2026-03-31 11:14:50 +02:00
|
|
|
const isFolderView = selection.kind === 'folder'
|
2026-03-19 06:41:40 +01:00
|
|
|
const isInboxView = selection.kind === 'filter' && selection.filter === 'inbox'
|
2026-03-20 23:03:17 +01:00
|
|
|
const isAllNotesView = selection.kind === 'filter' && selection.filter === 'all'
|
2026-03-31 11:14:50 +02:00
|
|
|
const showFilterPills = isSectionGroup || isFolderView || isAllNotesView
|
2026-03-20 23:03:17 +01:00
|
|
|
const subFilter = showFilterPills ? noteListFilter : undefined
|
2026-03-18 03:43:23 +01:00
|
|
|
|
|
|
|
|
const filterCounts = useMemo(
|
2026-03-31 11:14:50 +02:00
|
|
|
() => isSectionGroup ? countByFilter(entries, selection.type) : (isAllNotesView || isFolderView) ? countAllByFilter(entries) : { open: 0, archived: 0, trashed: 0 },
|
|
|
|
|
[entries, isSectionGroup, isAllNotesView, isFolderView, selection],
|
2026-03-18 03:43:23 +01:00
|
|
|
)
|
|
|
|
|
|
2026-03-19 06:41:40 +01:00
|
|
|
const inboxCounts = useMemo(
|
|
|
|
|
() => isInboxView ? countInboxByPeriod(entries) : { week: 0, month: 0, quarter: 0, all: 0 },
|
|
|
|
|
[entries, isInboxView],
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const { listSort, listDirection, customProperties, handleSortChange, sortPrefs, typeDocument } = useNoteListSort({ entries, selection, modifiedPathSet, modifiedSuffixes, subFilter, inboxPeriod: isInboxView ? inboxPeriod : undefined, onUpdateTypeSort, updateEntry })
|
refactor: extract hooks and components from NoteListInner for code health
Split NoteListInner (190 lines, 14 props) into focused units:
- useNoteListSort: sort state, migration, type frontmatter persistence
- useNoteListSearch: search/query state and toggle
- useMultiSelectKeyboard: keyboard shortcuts for bulk actions
- useModifiedFilesState: modified file tracking and status resolution
- NoteListHeader: 52px header bar with sort, search, and create
Also extracted pure helpers (handleEscapeKey, handleSelectAllKey,
handleBulkActionKey, resolveEmptyText, deriveEffectiveSort, etc.)
to reduce cyclomatic complexity in remaining functions.
NoteListInner body: 190 → 48 lines. CodeScene health: 8.54 → 9.36.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-05 15:53:15 +01:00
|
|
|
const { search, setSearch, query, searchVisible, toggleSearch } = useNoteListSearch()
|
|
|
|
|
const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set())
|
|
|
|
|
|
|
|
|
|
const typeEntryMap = useTypeEntryMap(entries)
|
2026-03-19 06:41:40 +01:00
|
|
|
const { isEntityView, isTrashView, isArchivedView, searched, searchedGroups, expiredTrashCount } = useNoteListData({ entries, selection, query, listSort, listDirection, modifiedPathSet, modifiedSuffixes, subFilter, inboxPeriod: isInboxView ? inboxPeriod : undefined })
|
refactor: extract hooks and components from NoteListInner for code health
Split NoteListInner (190 lines, 14 props) into focused units:
- useNoteListSort: sort state, migration, type frontmatter persistence
- useNoteListSearch: search/query state and toggle
- useMultiSelectKeyboard: keyboard shortcuts for bulk actions
- useModifiedFilesState: modified file tracking and status resolution
- NoteListHeader: 52px header bar with sort, search, and create
Also extracted pure helpers (handleEscapeKey, handleSelectAllKey,
handleBulkActionKey, resolveEmptyText, deriveEffectiveSort, etc.)
to reduce cyclomatic complexity in remaining functions.
NoteListInner body: 190 → 48 lines. CodeScene health: 8.54 → 9.36.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-05 15:53:15 +01:00
|
|
|
const isChangesView = selection.kind === 'filter' && selection.filter === 'changes'
|
2026-03-16 03:42:40 +01:00
|
|
|
const deletedCount = useMemo(
|
|
|
|
|
() => isChangesView ? (modifiedFiles ?? []).filter((f) => f.status === 'deleted').length : 0,
|
|
|
|
|
[isChangesView, modifiedFiles],
|
|
|
|
|
)
|
refactor: extract hooks and components from NoteListInner for code health
Split NoteListInner (190 lines, 14 props) into focused units:
- useNoteListSort: sort state, migration, type frontmatter persistence
- useNoteListSearch: search/query state and toggle
- useMultiSelectKeyboard: keyboard shortcuts for bulk actions
- useModifiedFilesState: modified file tracking and status resolution
- NoteListHeader: 52px header bar with sort, search, and create
Also extracted pure helpers (handleEscapeKey, handleSelectAllKey,
handleBulkActionKey, resolveEmptyText, deriveEffectiveSort, etc.)
to reduce cyclomatic complexity in remaining functions.
NoteListInner body: 190 → 48 lines. CodeScene health: 8.54 → 9.36.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-05 15:53:15 +01:00
|
|
|
const entitySelection = isEntityView && selection.kind === 'entity' ? selection : null
|
|
|
|
|
|
|
|
|
|
const noteListKeyboard = useNoteListKeyboard({ items: searched, selectedNotePath: selectedNote?.path ?? null, onOpen: onReplaceActiveTab, enabled: !isEntityView })
|
|
|
|
|
const multiSelect = useMultiSelect(searched, selectedNote?.path ?? null)
|
2026-03-20 23:03:17 +01:00
|
|
|
useEffect(() => { multiSelect.clear() }, [selection, noteListFilter]) // eslint-disable-line react-hooks/exhaustive-deps -- clear on selection/filter change
|
2026-02-16 16:56:44 +01:00
|
|
|
|
refactor: extract hooks and components from NoteListInner for code health
Split NoteListInner (190 lines, 14 props) into focused units:
- useNoteListSort: sort state, migration, type frontmatter persistence
- useNoteListSearch: search/query state and toggle
- useMultiSelectKeyboard: keyboard shortcuts for bulk actions
- useModifiedFilesState: modified file tracking and status resolution
- NoteListHeader: 52px header bar with sort, search, and create
Also extracted pure helpers (handleEscapeKey, handleSelectAllKey,
handleBulkActionKey, resolveEmptyText, deriveEffectiveSort, etc.)
to reduce cyclomatic complexity in remaining functions.
NoteListInner body: 190 → 48 lines. CodeScene health: 8.54 → 9.36.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-05 15:53:15 +01:00
|
|
|
const handleClickNote = useCallback((entry: VaultEntry, e: React.MouseEvent) => {
|
2026-03-19 08:47:25 +01:00
|
|
|
routeNoteClick(entry, e, { onReplace: onReplaceActiveTab, onSelect: onSelectNote, onOpenInNewWindow, multiSelect })
|
|
|
|
|
}, [onReplaceActiveTab, onSelectNote, onOpenInNewWindow, multiSelect])
|
refactor: extract hooks and components from NoteListInner for code health
Split NoteListInner (190 lines, 14 props) into focused units:
- useNoteListSort: sort state, migration, type frontmatter persistence
- useNoteListSearch: search/query state and toggle
- useMultiSelectKeyboard: keyboard shortcuts for bulk actions
- useModifiedFilesState: modified file tracking and status resolution
- NoteListHeader: 52px header bar with sort, search, and create
Also extracted pure helpers (handleEscapeKey, handleSelectAllKey,
handleBulkActionKey, resolveEmptyText, deriveEffectiveSort, etc.)
to reduce cyclomatic complexity in remaining functions.
NoteListInner body: 190 → 48 lines. CodeScene health: 8.54 → 9.36.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-05 15:53:15 +01:00
|
|
|
|
|
|
|
|
const handleBulkArchive = useCallback(() => { const paths = [...multiSelect.selectedPaths]; multiSelect.clear(); onBulkArchive?.(paths) }, [multiSelect, onBulkArchive])
|
|
|
|
|
const handleBulkTrash = useCallback(() => { const paths = [...multiSelect.selectedPaths]; multiSelect.clear(); onBulkTrash?.(paths) }, [multiSelect, onBulkTrash])
|
2026-03-12 00:06:33 +01:00
|
|
|
const handleBulkRestore = useCallback(() => { const paths = [...multiSelect.selectedPaths]; multiSelect.clear(); onBulkRestore?.(paths) }, [multiSelect, onBulkRestore])
|
|
|
|
|
const handleBulkDeletePermanently = useCallback(() => { const paths = [...multiSelect.selectedPaths]; multiSelect.clear(); onBulkDeletePermanently?.(paths) }, [multiSelect, onBulkDeletePermanently])
|
2026-03-18 03:43:23 +01:00
|
|
|
const handleBulkUnarchive = useCallback(() => { const paths = [...multiSelect.selectedPaths]; multiSelect.clear(); onBulkRestore?.(paths) }, [multiSelect, onBulkRestore])
|
|
|
|
|
const bulkArchiveOrRestore = isTrashView ? handleBulkRestore : isArchivedView ? handleBulkUnarchive : handleBulkArchive
|
2026-03-12 00:06:33 +01:00
|
|
|
const bulkTrashOrDelete = isTrashView ? handleBulkDeletePermanently : handleBulkTrash
|
|
|
|
|
useMultiSelectKeyboard(multiSelect, isEntityView, bulkArchiveOrRestore, bulkTrashOrDelete)
|
refactor: extract hooks and components from NoteListInner for code health
Split NoteListInner (190 lines, 14 props) into focused units:
- useNoteListSort: sort state, migration, type frontmatter persistence
- useNoteListSearch: search/query state and toggle
- useMultiSelectKeyboard: keyboard shortcuts for bulk actions
- useModifiedFilesState: modified file tracking and status resolution
- NoteListHeader: 52px header bar with sort, search, and create
Also extracted pure helpers (handleEscapeKey, handleSelectAllKey,
handleBulkActionKey, resolveEmptyText, deriveEffectiveSort, etc.)
to reduce cyclomatic complexity in remaining functions.
NoteListInner body: 190 → 48 lines. CodeScene health: 8.54 → 9.36.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-05 15:53:15 +01:00
|
|
|
|
|
|
|
|
const renderItem = useCallback((entry: VaultEntry) => (
|
2026-03-09 13:05:18 +01:00
|
|
|
<NoteItem key={entry.path} entry={entry} isSelected={selectedNote?.path === entry.path} isMultiSelected={multiSelect.selectedPaths.has(entry.path)} isHighlighted={entry.path === noteListKeyboard.highlightedPath} noteStatus={resolvedGetNoteStatus(entry.path)} typeEntryMap={typeEntryMap} onClickNote={handleClickNote} onPrefetch={prefetchNoteContent} />
|
refactor: extract hooks and components from NoteListInner for code health
Split NoteListInner (190 lines, 14 props) into focused units:
- useNoteListSort: sort state, migration, type frontmatter persistence
- useNoteListSearch: search/query state and toggle
- useMultiSelectKeyboard: keyboard shortcuts for bulk actions
- useModifiedFilesState: modified file tracking and status resolution
- NoteListHeader: 52px header bar with sort, search, and create
Also extracted pure helpers (handleEscapeKey, handleSelectAllKey,
handleBulkActionKey, resolveEmptyText, deriveEffectiveSort, etc.)
to reduce cyclomatic complexity in remaining functions.
NoteListInner body: 190 → 48 lines. CodeScene health: 8.54 → 9.36.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-05 15:53:15 +01:00
|
|
|
), [selectedNote?.path, handleClickNote, typeEntryMap, resolvedGetNoteStatus, multiSelect.selectedPaths, noteListKeyboard.highlightedPath])
|
|
|
|
|
|
|
|
|
|
const toggleGroup = useCallback((label: string) => { setCollapsedGroups((prev) => toggleSetMember(prev, label)) }, [])
|
|
|
|
|
const title = resolveHeaderTitle(selection, typeDocument)
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="flex flex-col select-none overflow-hidden border-r border-border bg-card text-foreground" style={{ height: '100%' }}>
|
2026-03-12 00:06:33 +01:00
|
|
|
<NoteListHeader title={title} typeDocument={typeDocument} isEntityView={isEntityView} isTrashView={isTrashView} trashCount={searched.length} listSort={listSort} listDirection={listDirection} customProperties={customProperties} sidebarCollapsed={sidebarCollapsed} searchVisible={searchVisible} search={search} onSortChange={handleSortChange} onCreateNote={onCreateNote} onOpenType={onReplaceActiveTab} onToggleSearch={toggleSearch} onSearchChange={setSearch} onEmptyTrash={onEmptyTrash} />
|
2026-03-31 11:38:13 +02:00
|
|
|
<div className="relative flex flex-1 flex-col overflow-hidden outline-none" style={{ minHeight: 0 }} tabIndex={0} onKeyDown={noteListKeyboard.handleKeyDown} onFocus={noteListKeyboard.handleFocus} data-testid="note-list-container">
|
2026-03-16 03:55:52 +01:00
|
|
|
<div className="flex-1 overflow-hidden" style={{ minHeight: 0 }}>
|
|
|
|
|
{entitySelection ? (
|
|
|
|
|
<EntityView entity={entitySelection.entry} groups={searchedGroups} query={query} collapsedGroups={collapsedGroups} sortPrefs={sortPrefs} onToggleGroup={toggleGroup} onSortChange={handleSortChange} renderItem={renderItem} typeEntryMap={typeEntryMap} onClickNote={handleClickNote} />
|
|
|
|
|
) : (
|
2026-03-19 06:41:40 +01:00
|
|
|
<ListView isTrashView={isTrashView} isArchivedView={isArchivedView} isChangesView={isChangesView} isInboxView={isInboxView} changesError={modifiedFilesError} expiredTrashCount={expiredTrashCount} deletedCount={deletedCount} searched={searched} query={query} renderItem={renderItem} virtuosoRef={noteListKeyboard.virtuosoRef} />
|
2026-03-16 03:55:52 +01:00
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
{isChangesView && deletedCount > 0 && <DeletedNotesBanner count={deletedCount} />}
|
2026-03-31 11:38:13 +02:00
|
|
|
{showFilterPills && <FilterPills active={noteListFilter} counts={filterCounts} onChange={onNoteListFilterChange} position="bottom" />}
|
|
|
|
|
{isInboxView && onInboxPeriodChange && <InboxFilterPills active={inboxPeriod} counts={inboxCounts} onChange={onInboxPeriodChange} position="bottom" />}
|
2026-02-14 18:22:42 +01:00
|
|
|
</div>
|
2026-02-27 15:14:21 +01:00
|
|
|
{multiSelect.isMultiSelecting && (
|
2026-03-18 03:43:23 +01:00
|
|
|
<BulkActionBar count={multiSelect.selectedPaths.size} isTrashView={isTrashView} isArchivedView={isArchivedView} onArchive={handleBulkArchive} onTrash={handleBulkTrash} onRestore={handleBulkRestore} onDeletePermanently={handleBulkDeletePermanently} onUnarchive={handleBulkUnarchive} onClear={multiSelect.clear} />
|
2026-02-27 15:14:21 +01:00
|
|
|
)}
|
2026-02-14 18:22:42 +01:00
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
2026-02-17 17:14:36 +01:00
|
|
|
|
|
|
|
|
export const NoteList = memo(NoteListInner)
|