+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| src | +
+
+ |
+ 40.9% | +45/110 | +50% | +11/22 | +13.51% | +5/37 | +45% | +45/100 | +
| src/components | +
+
+ |
+ 54.44% | +710/1304 | +50.75% | +540/1064 | +50.11% | +210/419 | +57.02% | +629/1103 | +
| src/components/ui | +
+
+ |
+ 19.67% | +12/61 | +22.85% | +8/35 | +16.07% | +9/56 | +19.67% | +12/61 | +
| src/hooks | +
+
+ |
+ 27.51% | +153/556 | +16.45% | +38/231 | +26.01% | +32/123 | +29.77% | +145/487 | +
| src/lib | +
+
+ |
+ 100% | +1/1 | +100% | +0/0 | +100% | +1/1 | +100% | +1/1 | +
| src/utils | +
+
+ |
+ 46.85% | +82/175 | +45.37% | +54/119 | +52.17% | +12/23 | +49.37% | +79/160 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 | + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + +1x + + + + + + + + +1x + + + + + + +22x +22x +22x +22x +22x +22x +22x +22x +22x +22x +22x +22x +22x +22x + +22x +22x + + +22x +21x +14x + + + + + + +22x + + + + + + + +22x +7x +7x +7x + + + + +22x + + + + +22x + + + +22x + + + + +22x + + + + + + + + + +22x + + + + + + + +22x + + + + + + +22x + + + + + +22x + + + + + +22x + + + + + + + + +22x + + +1x + + + + + + +22x + + + + + + + + + + +22x + + + +22x + + + +22x + + + +22x + + + + + + + + + + + +22x + +22x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useCallback, useEffect, useMemo, useState } from 'react'
+import { Sidebar } from './components/Sidebar'
+import { NoteList } from './components/NoteList'
+import { Editor } from './components/Editor'
+import { ResizeHandle } from './components/ResizeHandle'
+import { CreateNoteDialog } from './components/CreateNoteDialog'
+import { CreateTypeDialog } from './components/CreateTypeDialog'
+import { QuickOpenPalette } from './components/QuickOpenPalette'
+import { Toast } from './components/Toast'
+import { CommitDialog } from './components/CommitDialog'
+import { StatusBar } from './components/StatusBar'
+import { useVaultLoader } from './hooks/useVaultLoader'
+import { useNoteActions } from './hooks/useNoteActions'
+import { useAppKeyboard } from './hooks/useAppKeyboard'
+import { isTauri } from './mock-tauri'
+import { useKeyboardNavigation } from './hooks/useKeyboardNavigation'
+import type { SidebarSelection, GitCommit } from './types'
+import './App.css'
+
+// Type declaration for mock content storage
+declare global {
+ interface Window {
+ __mockContent?: Record<string, string>
+ }
+}
+
+const DEFAULT_SELECTION: SidebarSelection = { kind: 'filter', filter: 'all' }
+
+// In web/browser mode: only Demo v2 (no real vault access)
+// In native Tauri mode: Demo v2 + real Laputa vault
+const VAULTS = isTauri()
+ ? [
+ { label: 'Demo v2', path: '/Users/luca/Workspace/laputa-app/demo-vault-v2' },
+ { label: 'Laputa', path: '/Users/luca/Laputa' },
+ ]
+ : [
+ { label: 'Demo v2', path: '/Users/luca/Workspace/laputa-app/demo-vault-v2' },
+ ]
+
+const BUILT_IN_TYPE_NAMES = new Set([
+ 'Project', 'Experiment', 'Responsibility', 'Procedure',
+ 'Person', 'Event', 'Topic', 'Type', 'Note', 'Essay',
+ 'Quarter', 'Journal', 'Evergreen',
+])
+
+function App() {
+ const [selection, setSelection] = useState<SidebarSelection>(DEFAULT_SELECTION)
+ const [sidebarWidth, setSidebarWidth] = useState(250)
+ const [noteListWidth, setNoteListWidth] = useState(300)
+ const [inspectorWidth, setInspectorWidth] = useState(280)
+ const [inspectorCollapsed, setInspectorCollapsed] = useState(false)
+ const [gitHistory, setGitHistory] = useState<GitCommit[]>([])
+ const [showCreateDialog, setShowCreateDialog] = useState(false)
+ const [createNoteDefaultType, setCreateNoteDefaultType] = useState<string | undefined>()
+ const [showCreateTypeDialog, setShowCreateTypeDialog] = useState(false)
+ const [showQuickOpen, setShowQuickOpen] = useState(false)
+ const [showCommitDialog, setShowCommitDialog] = useState(false)
+ const [toastMessage, setToastMessage] = useState<string | null>(null)
+ const [vaultPath, setVaultPath] = useState(VAULTS[0].path)
+ const [showAIChat, setShowAIChat] = useState(false)
+
+ const vault = useVaultLoader(vaultPath)
+ const notes = useNoteActions(vault.addEntry, vault.updateContent, vault.entries, setToastMessage)
+
+ // Derive custom types from vault (Type entries not in built-in list)
+ const customTypes = useMemo(
+ () => vault.entries
+ .filter((e) => e.isA === 'Type' && !BUILT_IN_TYPE_NAMES.has(e.title))
+ .map((e) => e.title)
+ .sort(),
+ [vault.entries],
+ )
+
+ // Reset UI state when vault changes
+ const handleSwitchVault = useCallback((path: string) => {
+ setVaultPath(path)
+ setSelection(DEFAULT_SELECTION)
+ setGitHistory([])
+ notes.closeAllTabs()
+ }, [notes])
+
+ // Load git history when active tab changes
+ useEffect(() => {
+ Eif (!notes.activeTabPath) {
+ setGitHistory([])
+ return
+ }
+ vault.loadGitHistory(notes.activeTabPath).then(setGitHistory)
+ }, [notes.activeTabPath, vault.loadGitHistory])
+
+ const openCreateDialog = useCallback((type?: string) => {
+ setCreateNoteDefaultType(type)
+ setShowCreateDialog(true)
+ }, [])
+
+ const openCreateTypeDialog = useCallback(() => {
+ setShowCreateTypeDialog(true)
+ }, [])
+
+ const handleCreateType = useCallback((name: string) => {
+ notes.handleCreateType(name)
+ setToastMessage(`Type "${name}" created`)
+ }, [notes, setToastMessage])
+
+ const handleCustomizeType = useCallback((typeName: string, icon: string, color: string) => {
+ const typeEntry = vault.entries.find((e) => e.isA === 'Type' && e.title === typeName)
+ if (!typeEntry) return
+ // Update icon and color in frontmatter (two separate calls)
+ notes.handleUpdateFrontmatter(typeEntry.path, 'icon', icon)
+ notes.handleUpdateFrontmatter(typeEntry.path, 'color', color)
+ // Also update the entry in-memory for instant UI feedback
+ vault.updateEntry(typeEntry.path, { icon, color })
+ }, [vault, notes])
+
+ const handleTrashNote = useCallback(async (path: string) => {
+ const now = new Date().toISOString().slice(0, 10)
+ await notes.handleUpdateFrontmatter(path, 'trashed', true)
+ await notes.handleUpdateFrontmatter(path, 'trashed_at', now)
+ vault.updateEntry(path, { trashed: true, trashedAt: Date.now() / 1000 })
+ setToastMessage('Note moved to trash')
+ }, [notes, vault, setToastMessage])
+
+ const handleRestoreNote = useCallback(async (path: string) => {
+ await notes.handleUpdateFrontmatter(path, 'trashed', false)
+ await notes.handleDeleteProperty(path, 'trashed_at')
+ vault.updateEntry(path, { trashed: false, trashedAt: null })
+ setToastMessage('Note restored from trash')
+ }, [notes, vault, setToastMessage])
+
+ const handleArchiveNote = useCallback(async (path: string) => {
+ await notes.handleUpdateFrontmatter(path, 'archived', true)
+ vault.updateEntry(path, { archived: true })
+ setToastMessage('Note archived')
+ }, [notes, vault, setToastMessage])
+
+ const handleUnarchiveNote = useCallback(async (path: string) => {
+ await notes.handleUpdateFrontmatter(path, 'archived', false)
+ vault.updateEntry(path, { archived: false })
+ setToastMessage('Note unarchived')
+ }, [notes, vault, setToastMessage])
+
+ const handleReorderSections = useCallback((orderedTypes: { typeName: string; order: number }[]) => {
+ for (const { typeName, order } of orderedTypes) {
+ const typeEntry = vault.entries.find((e) => e.isA === 'Type' && e.title === typeName)
+ if (!typeEntry) continue
+ notes.handleUpdateFrontmatter(typeEntry.path, 'order', order)
+ vault.updateEntry(typeEntry.path, { order })
+ }
+ }, [vault, notes])
+
+ useAppKeyboard({
+ onQuickOpen: () => setShowQuickOpen(true),
+ onCreateNote: openCreateDialog,
+ onSave: () => setToastMessage('Saved'),
+ onTrashNote: handleTrashNote,
+ onArchiveNote: handleArchiveNote,
+ activeTabPathRef: notes.activeTabPathRef,
+ handleCloseTabRef: notes.handleCloseTabRef,
+ })
+
+ useKeyboardNavigation({
+ tabs: notes.tabs,
+ activeTabPath: notes.activeTabPath,
+ entries: vault.entries,
+ selection,
+ allContent: vault.allContent,
+ onSwitchTab: notes.handleSwitchTab,
+ onReplaceActiveTab: notes.handleReplaceActiveTab,
+ onSelectNote: notes.handleSelectNote,
+ })
+
+ const handleSidebarResize = useCallback((delta: number) => {
+ setSidebarWidth((w) => Math.max(150, Math.min(400, w + delta)))
+ }, [])
+
+ const handleNoteListResize = useCallback((delta: number) => {
+ setNoteListWidth((w) => Math.max(200, Math.min(500, w + delta)))
+ }, [])
+
+ const handleInspectorResize = useCallback((delta: number) => {
+ setInspectorWidth((w) => Math.max(200, Math.min(500, w - delta)))
+ }, [])
+
+ const handleCommitPush = useCallback(async (message: string) => {
+ setShowCommitDialog(false)
+ try {
+ const result = await vault.commitAndPush(message)
+ setToastMessage(result)
+ vault.loadModifiedFiles()
+ } catch (err) {
+ console.error('Commit failed:', err)
+ setToastMessage(`Commit failed: ${err}`)
+ }
+ }, [vault])
+
+ const activeTab = notes.tabs.find((t) => t.entry.path === notes.activeTabPath) ?? null
+
+ return (
+ <div className="app-shell">
+ <div className="app">
+ <div className="app__sidebar" style={{ width: sidebarWidth }}>
+ <Sidebar entries={vault.entries} selection={selection} onSelect={setSelection} onSelectNote={notes.handleSelectNote} onCreateType={openCreateDialog} onCreateNewType={openCreateTypeDialog} onCustomizeType={handleCustomizeType} onReorderSections={handleReorderSections} modifiedCount={vault.modifiedFiles.length} onCommitPush={() => setShowCommitDialog(true)} />
+ </div>
+ <ResizeHandle onResize={handleSidebarResize} />
+ <div className="app__note-list" style={{ width: noteListWidth }}>
+ <NoteList entries={vault.entries} selection={selection} selectedNote={activeTab?.entry ?? null} allContent={vault.allContent} modifiedFiles={vault.modifiedFiles} onSelectNote={notes.handleSelectNote} onCreateNote={openCreateDialog} />
+ </div>
+ <ResizeHandle onResize={handleNoteListResize} />
+ <div className="app__editor">
+ <Editor
+ tabs={notes.tabs}
+ activeTabPath={notes.activeTabPath}
+ entries={vault.entries}
+ onSwitchTab={notes.handleSwitchTab}
+ onCloseTab={notes.handleCloseTab}
+ onReorderTabs={notes.handleReorderTabs}
+ onNavigateWikilink={notes.handleNavigateWikilink}
+ onLoadDiff={vault.loadDiff}
+ onLoadDiffAtCommit={vault.loadDiffAtCommit}
+ isModified={vault.isFileModified}
+ onCreateNote={openCreateDialog}
+ inspectorCollapsed={inspectorCollapsed}
+ onToggleInspector={() => setInspectorCollapsed((c) => !c)}
+ inspectorWidth={inspectorWidth}
+ onInspectorResize={handleInspectorResize}
+ inspectorEntry={activeTab?.entry ?? null}
+ inspectorContent={activeTab?.content ?? null}
+ allContent={vault.allContent}
+ gitHistory={gitHistory}
+ onUpdateFrontmatter={notes.handleUpdateFrontmatter}
+ onDeleteProperty={notes.handleDeleteProperty}
+ onAddProperty={notes.handleAddProperty}
+ showAIChat={showAIChat}
+ onToggleAIChat={() => setShowAIChat(c => !c)}
+ vaultPath={vaultPath}
+ onTrashNote={handleTrashNote}
+ onRestoreNote={handleRestoreNote}
+ onArchiveNote={handleArchiveNote}
+ onUnarchiveNote={handleUnarchiveNote}
+ />
+ </div>
+ </div>
+ <StatusBar noteCount={vault.entries.length} vaultPath={vaultPath} vaults={VAULTS} onSwitchVault={handleSwitchVault} />
+ <Toast message={toastMessage} onDismiss={() => setToastMessage(null)} />
+ <QuickOpenPalette
+ open={showQuickOpen}
+ entries={vault.entries}
+ onSelect={notes.handleSelectNote}
+ onClose={() => setShowQuickOpen(false)}
+ />
+ <CreateNoteDialog
+ open={showCreateDialog}
+ onClose={() => setShowCreateDialog(false)}
+ onCreate={notes.handleCreateNote}
+ defaultType={createNoteDefaultType}
+ customTypes={customTypes}
+ />
+ <CreateTypeDialog
+ open={showCreateTypeDialog}
+ onClose={() => setShowCreateTypeDialog(false)}
+ onCreate={handleCreateType}
+ />
+ <CommitDialog
+ open={showCommitDialog}
+ modifiedCount={vault.modifiedFiles.length}
+ onCommit={handleCommitPush}
+ onClose={() => setShowCommitDialog(false)}
+ />
+ </div>
+ )
+}
+
+export default App
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +2x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState, useRef, useEffect, useMemo } from 'react'
+import type { VaultEntry } from '../types'
+import {
+ X, Plus, PaperPlaneRight, Copy, ArrowClockwise,
+ TextIndent, Sparkle, Key, MagnifyingGlass, Minus,
+} from '@phosphor-icons/react'
+import {
+ type ChatMessage, getApiKey, setApiKey,
+ buildSystemPrompt, MODEL_OPTIONS,
+} from '../utils/ai-chat'
+import { useAIChat } from '../hooks/useAIChat'
+
+// --- Sub-components ---
+
+interface AIChatPanelProps {
+ entry: VaultEntry | null
+ allContent: Record<string, string>
+ entries?: VaultEntry[]
+ onClose: () => void
+}
+
+function TypingIndicator() {
+ return (
+ <div className="flex items-start gap-2" style={{ padding: '8px 12px' }}>
+ <div style={{ display: 'flex', gap: 4, padding: '10px 0' }}>
+ <span className="typing-dot" />
+ <span className="typing-dot" style={{ animationDelay: '0.2s' }} />
+ <span className="typing-dot" style={{ animationDelay: '0.4s' }} />
+ </div>
+ </div>
+ )
+}
+
+function ContextPill({ note, onRemove }: { note: VaultEntry; onRemove: () => void }) {
+ return (
+ <span
+ className="flex items-center gap-1"
+ style={{
+ background: 'var(--accent-green-light)',
+ borderRadius: 99, fontSize: 11,
+ padding: '2px 6px 2px 8px', color: 'var(--foreground)', maxWidth: 160,
+ }}
+ >
+ <span className="truncate">{note.title}</span>
+ <button
+ className="flex items-center justify-center shrink-0 border-none bg-transparent p-0 cursor-pointer text-muted-foreground hover:text-foreground"
+ onClick={onRemove} title={`Remove ${note.title}`}
+ >
+ <Minus size={10} weight="bold" />
+ </button>
+ </span>
+ )
+}
+
+function ContextSearchDropdown({
+ entries, contextPaths, onAdd, onClose,
+}: {
+ entries: VaultEntry[]; contextPaths: Set<string>
+ onAdd: (entry: VaultEntry) => void; onClose: () => void
+}) {
+ const [query, setQuery] = useState('')
+ const inputRef = useRef<HTMLInputElement>(null)
+ useEffect(() => { inputRef.current?.focus() }, [])
+
+ const filtered = useMemo(() => {
+ const q = query.toLowerCase()
+ return entries
+ .filter(e => !contextPaths.has(e.path))
+ .filter(e => !q || e.title.toLowerCase().includes(q) || (e.isA ?? '').toLowerCase().includes(q))
+ .slice(0, 8)
+ }, [entries, contextPaths, query])
+
+ return (
+ <div className="absolute left-0 right-0 bg-background border border-border rounded shadow-lg z-10"
+ style={{ top: '100%', maxHeight: 240, overflow: 'hidden' }}>
+ <div className="flex items-center gap-1 border-b border-border" style={{ padding: '4px 8px' }}>
+ <MagnifyingGlass size={12} className="text-muted-foreground shrink-0" />
+ <input ref={inputRef} value={query} onChange={e => setQuery(e.target.value)}
+ onKeyDown={e => e.key === 'Escape' && onClose()} placeholder="Search notes..."
+ className="flex-1 border-none bg-transparent text-foreground outline-none"
+ style={{ fontSize: 12, padding: '2px 0' }} />
+ </div>
+ <div style={{ overflow: 'auto', maxHeight: 200 }}>
+ {filtered.map(entry => (
+ <button key={entry.path}
+ className="flex items-center gap-2 w-full text-left border-none bg-transparent cursor-pointer hover:bg-accent text-foreground"
+ style={{ padding: '6px 10px', fontSize: 12 }}
+ onClick={() => { onAdd(entry); onClose() }}>
+ <span className="text-muted-foreground" style={{ fontSize: 10, minWidth: 60 }}>{entry.isA ?? 'Note'}</span>
+ <span className="truncate">{entry.title}</span>
+ </button>
+ ))}
+ {filtered.length === 0 && (
+ <div className="text-muted-foreground text-center" style={{ padding: 12, fontSize: 12 }}>No matching notes</div>
+ )}
+ </div>
+ </div>
+ )
+}
+
+function ApiKeyDialog({ onClose }: { onClose: () => void }) {
+ const [key, setKey] = useState(getApiKey())
+ return (
+ <div className="fixed inset-0 flex items-center justify-center z-50" style={{ background: 'rgba(0,0,0,0.4)' }}>
+ <div className="bg-background border border-border rounded-lg shadow-xl" style={{ width: 400, padding: 20 }}>
+ <h3 className="text-foreground" style={{ fontSize: 14, fontWeight: 600, margin: '0 0 12px' }}>Anthropic API Key</h3>
+ <p className="text-muted-foreground" style={{ fontSize: 12, margin: '0 0 12px', lineHeight: 1.5 }}>
+ Enter your Anthropic API key. Stored locally in your browser.
+ </p>
+ <input type="password" value={key} onChange={e => setKey(e.target.value)} placeholder="sk-ant-..."
+ className="w-full border border-border bg-transparent text-foreground rounded"
+ style={{ fontSize: 13, padding: '8px 10px', outline: 'none', marginBottom: 12 }} />
+ <div className="flex justify-end gap-2">
+ <button className="border border-border bg-transparent text-foreground rounded cursor-pointer hover:bg-accent"
+ style={{ fontSize: 12, padding: '6px 14px' }} onClick={onClose}>Cancel</button>
+ <button className="border-none rounded cursor-pointer"
+ style={{ fontSize: 12, padding: '6px 14px', background: 'var(--primary)', color: 'white' }}
+ onClick={() => { setApiKey(key); onClose() }}>Save</button>
+ </div>
+ </div>
+ </div>
+ )
+}
+
+function AssistantMessage({ msg, onRetry }: { msg: ChatMessage; onRetry: () => void }) {
+ return (
+ <div>
+ <div style={{ fontSize: 13, lineHeight: 1.6, whiteSpace: 'pre-wrap' }}
+ dangerouslySetInnerHTML={{
+ __html: msg.content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\n/g, '<br/>'),
+ }} />
+ <div className="flex items-center gap-3" style={{ marginTop: 4 }}>
+ <button className="border-none bg-transparent p-0 text-muted-foreground cursor-pointer hover:underline"
+ style={{ fontSize: 11 }} onClick={() => navigator.clipboard.writeText(msg.content)}>
+ <Copy size={12} style={{ marginRight: 3, verticalAlign: 'middle' }} />Copy
+ </button>
+ <button className="border-none bg-transparent p-0 text-muted-foreground cursor-pointer hover:underline"
+ style={{ fontSize: 11 }} onClick={onRetry}>
+ <ArrowClockwise size={12} style={{ marginRight: 3, verticalAlign: 'middle' }} />Retry
+ </button>
+ <button className="border-none bg-transparent p-0 text-muted-foreground cursor-pointer hover:underline"
+ style={{ fontSize: 11 }}>
+ <TextIndent size={12} style={{ marginRight: 3, verticalAlign: 'middle' }} />Insert
+ </button>
+ </div>
+ </div>
+ )
+}
+
+function StreamingContent({ content }: { content: string }) {
+ return (
+ <div style={{ marginBottom: 12 }}>
+ <div style={{ fontSize: 13, lineHeight: 1.6, whiteSpace: 'pre-wrap' }}
+ dangerouslySetInnerHTML={{
+ __html: content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\n/g, '<br/>'),
+ }} />
+ </div>
+ )
+}
+
+function UserBubble({ content }: { content: string }) {
+ return (
+ <div className="flex justify-end">
+ <div style={{
+ background: 'var(--primary)', color: 'white',
+ borderRadius: '12px 12px 2px 12px', maxWidth: '85%',
+ padding: '8px 12px', fontSize: 13, lineHeight: 1.5, whiteSpace: 'pre-wrap',
+ }}>{content}</div>
+ </div>
+ )
+}
+
+function formatTokens(n: number): string {
+ return n < 1000 ? String(n) : `${(n / 1000).toFixed(1)}k`
+}
+
+const QUICK_ACTIONS = [
+ { label: 'Summarize', message: 'Summarize this note' },
+ { label: 'Expand', message: 'Expand this note with more detail' },
+ { label: 'Fix grammar', message: 'Fix grammar and improve readability' },
+]
+
+// --- Context management hook ---
+
+function useContextNotes(entry: VaultEntry | null) {
+ const [contextNotes, setContextNotes] = useState<VaultEntry[]>([])
+
+ useEffect(() => {
+ if (entry) {
+ setContextNotes(prev => prev.some(n => n.path === entry.path) ? prev : [entry, ...prev])
+ }
+ }, [entry?.path]) // eslint-disable-line react-hooks/exhaustive-deps
+
+ const addNote = (note: VaultEntry) => {
+ setContextNotes(prev => prev.some(n => n.path === note.path) ? prev : [...prev, note])
+ }
+ const removeNote = (path: string) => {
+ setContextNotes(prev => prev.filter(n => n.path !== path))
+ }
+ const paths = useMemo(() => new Set(contextNotes.map(n => n.path)), [contextNotes])
+
+ return { contextNotes, addNote, removeNote, paths }
+}
+
+// --- Main component ---
+
+export function AIChatPanel({ entry, allContent, entries = [], onClose }: AIChatPanelProps) {
+ const [input, setInput] = useState('')
+ const [model, setModel] = useState<string>(MODEL_OPTIONS[0].value)
+ const [showSearch, setShowSearch] = useState(false)
+ const [showApiKeyDialog, setShowApiKeyDialog] = useState(false)
+ const messagesEndRef = useRef<HTMLDivElement>(null)
+
+ const ctx = useContextNotes(entry)
+ const chat = useAIChat(entry, allContent, ctx.contextNotes, model)
+
+ const contextInfo = useMemo(
+ () => buildSystemPrompt(ctx.contextNotes, allContent, model),
+ [ctx.contextNotes, allContent, model],
+ )
+
+ useEffect(() => {
+ messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+ }, [chat.messages, chat.isStreaming, chat.streamingContent])
+
+ const handleSend = () => { chat.sendMessage(input); setInput('') }
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend() }
+ }
+
+ return (
+ <aside className="flex flex-1 flex-col overflow-hidden border-l border-border bg-background text-foreground">
+ <PanelHeader onApiKey={() => setShowApiKeyDialog(true)} onClear={chat.clearConversation} onClose={onClose} />
+
+ <ContextBar
+ notes={ctx.contextNotes} entries={entries} contextPaths={ctx.paths}
+ tokenCount={contextInfo.totalTokens} truncated={contextInfo.truncated}
+ showSearch={showSearch} onToggleSearch={() => setShowSearch(!showSearch)}
+ onAdd={ctx.addNote} onRemove={ctx.removeNote} onCloseSearch={() => setShowSearch(false)}
+ />
+
+ <MessageList
+ messages={chat.messages} isStreaming={chat.isStreaming}
+ streamingContent={chat.streamingContent} onRetry={chat.retryMessage}
+ messagesEndRef={messagesEndRef}
+ />
+
+ <QuickActionsBar actions={QUICK_ACTIONS} disabled={chat.isStreaming}
+ onAction={msg => { chat.sendMessage(msg); setInput('') }} />
+
+ <InputArea model={model} onModelChange={setModel} input={input} onInputChange={setInput}
+ onKeyDown={handleKeyDown} onSend={handleSend} disabled={chat.isStreaming || !input.trim()} />
+
+ {showApiKeyDialog && <ApiKeyDialog onClose={() => setShowApiKeyDialog(false)} />}
+
+ <style>{`
+ .typing-dot {
+ width: 6px; height: 6px; border-radius: 50%;
+ background: var(--muted-foreground);
+ animation: typing-bounce 1.2s infinite ease-in-out;
+ }
+ @keyframes typing-bounce {
+ 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+ 40% { opacity: 1; transform: scale(1); }
+ }
+ `}</style>
+ </aside>
+ )
+}
+
+// --- Extracted layout sections ---
+
+function PanelHeader({ onApiKey, onClear, onClose }: { onApiKey: () => void; onClear: () => void; onClose: () => void }) {
+ return (
+ <div className="flex shrink-0 items-center border-b border-border" style={{ height: 45, padding: '0 12px', gap: 8 }}>
+ <Sparkle size={16} className="shrink-0 text-muted-foreground" />
+ <span className="flex-1 text-muted-foreground" style={{ fontSize: 13, fontWeight: 600 }}>AI Chat</span>
+ <button className="shrink-0 border-none bg-transparent p-1 text-muted-foreground cursor-pointer hover:text-foreground transition-colors"
+ onClick={onApiKey} title="API Key settings">
+ <Key size={14} weight={getApiKey() ? 'fill' : 'regular'} />
+ </button>
+ <button className="shrink-0 border-none bg-transparent p-1 text-muted-foreground cursor-pointer hover:text-foreground transition-colors"
+ onClick={onClear} title="New conversation"><Plus size={16} /></button>
+ <button className="shrink-0 border-none bg-transparent p-1 text-muted-foreground cursor-pointer hover:text-foreground transition-colors"
+ onClick={onClose} title="Close AI Chat"><X size={16} /></button>
+ </div>
+ )
+}
+
+function ContextBar({
+ notes, entries, contextPaths, tokenCount, truncated,
+ showSearch, onToggleSearch, onAdd, onRemove, onCloseSearch,
+}: {
+ notes: VaultEntry[]; entries: VaultEntry[]; contextPaths: Set<string>
+ tokenCount: number; truncated: boolean
+ showSearch: boolean; onToggleSearch: () => void
+ onAdd: (note: VaultEntry) => void; onRemove: (path: string) => void; onCloseSearch: () => void
+}) {
+ return (
+ <div className="relative flex shrink-0 flex-wrap items-center gap-1.5 border-b border-border" style={{ padding: '6px 12px' }}>
+ {notes.map(note => (
+ <ContextPill key={note.path} note={note} onRemove={() => onRemove(note.path)} />
+ ))}
+ <button
+ className="flex items-center gap-0.5 border border-dashed border-border bg-transparent text-muted-foreground cursor-pointer hover:text-foreground rounded-full"
+ style={{ fontSize: 11, padding: '2px 8px' }} onClick={onToggleSearch} title="Add note to context">
+ <Plus size={10} weight="bold" /><span>Add</span>
+ </button>
+ {notes.length > 0 && (
+ <span className="text-muted-foreground ml-auto" style={{ fontSize: 10 }}>
+ ~{formatTokens(tokenCount)} tokens{truncated && ' (truncated)'}
+ </span>
+ )}
+ {showSearch && (
+ <ContextSearchDropdown entries={entries} contextPaths={contextPaths} onAdd={onAdd} onClose={onCloseSearch} />
+ )}
+ </div>
+ )
+}
+
+function MessageList({
+ messages, isStreaming, streamingContent, onRetry, messagesEndRef,
+}: {
+ messages: ChatMessage[]; isStreaming: boolean; streamingContent: string
+ onRetry: (idx: number) => void; messagesEndRef: React.RefObject<HTMLDivElement | null>
+}) {
+ return (
+ <div className="flex-1 overflow-y-auto" style={{ padding: 12 }}>
+ {messages.length === 0 && !isStreaming && (
+ <div className="flex flex-col items-center justify-center text-center text-muted-foreground" style={{ paddingTop: 40 }}>
+ <Sparkle size={24} style={{ marginBottom: 8, opacity: 0.5 }} />
+ <p style={{ fontSize: 13, margin: '0 0 4px' }}>Ask anything about your notes</p>
+ <p style={{ fontSize: 11, margin: 0, opacity: 0.6 }}>
+ {getApiKey() ? 'Connected to Anthropic API' : 'Set API key for real AI responses'}
+ </p>
+ </div>
+ )}
+ {messages.map((msg, idx) => (
+ <div key={msg.id} style={{ marginBottom: 12 }}>
+ {msg.role === 'user'
+ ? <UserBubble content={msg.content} />
+ : <AssistantMessage msg={msg} onRetry={() => onRetry(idx)} />}
+ </div>
+ ))}
+ {isStreaming && streamingContent && <StreamingContent content={streamingContent} />}
+ {isStreaming && !streamingContent && <TypingIndicator />}
+ <div ref={messagesEndRef} />
+ </div>
+ )
+}
+
+function QuickActionsBar({
+ actions, disabled, onAction,
+}: {
+ actions: { label: string; message: string }[]; disabled: boolean; onAction: (msg: string) => void
+}) {
+ return (
+ <div className="flex shrink-0 flex-wrap items-center gap-1.5 border-t border-border" style={{ padding: '8px 12px' }}>
+ {actions.map(a => (
+ <button key={a.label}
+ className="cursor-pointer bg-transparent text-foreground hover:bg-accent transition-colors"
+ style={{ fontSize: 11, border: '1px solid var(--border)', borderRadius: 99, padding: '3px 10px' }}
+ onClick={() => onAction(a.message)} disabled={disabled}>
+ {a.label}
+ </button>
+ ))}
+ </div>
+ )
+}
+
+function InputArea({
+ model, onModelChange, input, onInputChange, onKeyDown, onSend, disabled,
+}: {
+ model: string; onModelChange: (m: string) => void
+ input: string; onInputChange: (v: string) => void
+ onKeyDown: (e: React.KeyboardEvent) => void; onSend: () => void; disabled: boolean
+}) {
+ return (
+ <div className="flex shrink-0 flex-col border-t border-border" style={{ padding: '8px 12px' }}>
+ <div style={{ marginBottom: 6 }}>
+ <select value={model} onChange={e => onModelChange(e.target.value)}
+ className="border border-border bg-transparent text-muted-foreground"
+ style={{ fontSize: 11, borderRadius: 4, padding: '2px 6px', outline: 'none' }}>
+ {MODEL_OPTIONS.map(opt => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
+ </select>
+ </div>
+ <div className="flex items-end gap-2">
+ <textarea value={input} onChange={e => onInputChange(e.target.value)} onKeyDown={onKeyDown}
+ placeholder="Ask about your notes..." rows={1}
+ className="flex-1 resize-none border border-border bg-transparent text-foreground"
+ style={{ fontSize: 13, borderRadius: 8, padding: '8px 10px', outline: 'none', lineHeight: 1.4, maxHeight: 100, fontFamily: 'inherit' }} />
+ <button className="shrink-0 flex items-center justify-center border-none cursor-pointer transition-colors"
+ style={{ background: 'var(--primary)', color: 'white', borderRadius: 8, width: 32, height: 34 }}
+ onClick={onSend} disabled={disabled} title="Send message">
+ <PaperPlaneRight size={16} />
+ </button>
+ </div>
+ </div>
+ )
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +3x + + + + + +16x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +3x + + +16x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { memo } from 'react'
+import type { VaultEntry } from '../types'
+import { cn } from '@/lib/utils'
+import {
+ MagnifyingGlass,
+ GitBranch,
+ CursorText,
+ Sparkle,
+ SlidersHorizontal,
+ DotsThree,
+ Trash,
+ ArrowCounterClockwise,
+ Archive,
+ ArrowUUpLeft,
+} from '@phosphor-icons/react'
+
+interface BreadcrumbBarProps {
+ entry: VaultEntry
+ wordCount: number
+ isModified: boolean
+ showDiffToggle: boolean
+ diffMode: boolean
+ diffLoading: boolean
+ onToggleDiff: () => void
+ showAIChat?: boolean
+ onToggleAIChat?: () => void
+ inspectorCollapsed?: boolean
+ onToggleInspector?: () => void
+ onTrash?: () => void
+ onRestore?: () => void
+ onArchive?: () => void
+ onUnarchive?: () => void
+}
+
+const DISABLED_ICON_STYLE = { opacity: 0.4, cursor: 'not-allowed' } as const
+
+function BreadcrumbActions({ entry, showDiffToggle, diffMode, diffLoading, onToggleDiff,
+ showAIChat, onToggleAIChat, inspectorCollapsed, onToggleInspector,
+ onTrash, onRestore, onArchive, onUnarchive,
+}: Omit<BreadcrumbBarProps, 'wordCount' | 'isModified'>) {
+ return (
+ <div className="flex items-center" style={{ gap: 12 }}>
+ <button
+ className="flex items-center justify-center border-none bg-transparent p-0 text-muted-foreground cursor-pointer hover:text-foreground transition-colors"
+ title="Search in file"
+ >
+ <MagnifyingGlass size={16} />
+ </button>
+ {showDiffToggle ? (
+ <button
+ className={cn(
+ "flex items-center justify-center border-none bg-transparent p-0 cursor-pointer transition-colors",
+ diffMode ? "text-foreground" : "text-muted-foreground hover:text-foreground"
+ )}
+ onClick={onToggleDiff}
+ disabled={diffLoading}
+ title={diffLoading ? 'Loading diff...' : diffMode ? 'Back to editor' : 'Show diff'}
+ >
+ <GitBranch size={16} />
+ </button>
+ ) : (
+ <button
+ className="flex items-center justify-center border-none bg-transparent p-0 text-muted-foreground"
+ style={DISABLED_ICON_STYLE}
+ title="No changes"
+ tabIndex={-1}
+ >
+ <GitBranch size={16} />
+ </button>
+ )}
+ <button
+ className="flex items-center justify-center border-none bg-transparent p-0 text-muted-foreground"
+ style={DISABLED_ICON_STYLE}
+ title="Coming soon"
+ tabIndex={-1}
+ >
+ <CursorText size={16} />
+ </button>
+ <button
+ className={cn(
+ "flex items-center justify-center border-none bg-transparent p-0 cursor-pointer transition-colors",
+ showAIChat ? "" : "text-muted-foreground hover:text-foreground"
+ )}
+ style={showAIChat ? { color: 'var(--primary)' } : undefined}
+ onClick={onToggleAIChat}
+ title={showAIChat ? 'Close AI Chat' : 'Open AI Chat'}
+ >
+ <Sparkle size={16} weight={showAIChat ? 'fill' : 'regular'} />
+ </button>
+ {entry.archived ? (
+ <button
+ className="flex items-center justify-center border-none bg-transparent p-0 cursor-pointer transition-colors text-muted-foreground hover:text-foreground"
+ onClick={onUnarchive}
+ title="Unarchive (Cmd+E)"
+ >
+ <ArrowUUpLeft size={16} />
+ </button>
+ ) : (
+ <button
+ className="flex items-center justify-center border-none bg-transparent p-0 cursor-pointer transition-colors text-muted-foreground hover:text-foreground"
+ onClick={onArchive}
+ title="Archive (Cmd+E)"
+ >
+ <Archive size={16} />
+ </button>
+ )}
+ {entry.trashed ? (
+ <button
+ className="flex items-center justify-center border-none bg-transparent p-0 cursor-pointer transition-colors text-muted-foreground hover:text-foreground"
+ onClick={onRestore}
+ title="Restore from trash"
+ >
+ <ArrowCounterClockwise size={16} />
+ </button>
+ ) : (
+ <button
+ className="flex items-center justify-center border-none bg-transparent p-0 cursor-pointer transition-colors text-muted-foreground hover:text-destructive"
+ onClick={onTrash}
+ title="Move to trash (Cmd+Delete)"
+ >
+ <Trash size={16} />
+ </button>
+ )}
+ {inspectorCollapsed && (
+ <button
+ className="flex items-center justify-center border-none bg-transparent p-0 text-muted-foreground cursor-pointer hover:text-foreground transition-colors"
+ onClick={onToggleInspector}
+ title="Open Properties"
+ >
+ <SlidersHorizontal size={16} />
+ </button>
+ )}
+ <button
+ className="flex items-center justify-center border-none bg-transparent p-0 text-muted-foreground"
+ style={DISABLED_ICON_STYLE}
+ title="Coming soon"
+ tabIndex={-1}
+ >
+ <DotsThree size={16} />
+ </button>
+ </div>
+ )
+}
+
+export const BreadcrumbBar = memo(function BreadcrumbBar({
+ entry, wordCount, isModified, ...actionProps
+}: BreadcrumbBarProps) {
+ return (
+ <div
+ className="flex shrink-0 items-center justify-between"
+ style={{
+ height: 45,
+ background: 'var(--background)',
+ borderBottom: '1px solid var(--border)',
+ padding: '6px 16px',
+ }}
+ >
+ {/* Left: breadcrumb */}
+ <div className="flex items-center gap-1" style={{ fontSize: 12 }}>
+ <span className="text-muted-foreground">{entry.isA || 'Note'}</span>
+ <span className="text-muted-foreground" style={{ margin: '0 2px' }}>›</span>
+ <span className="font-medium text-foreground">{entry.title}</span>
+ <span className="text-muted-foreground" style={{ margin: '0 4px' }}>·</span>
+ <span className="text-muted-foreground">{wordCount.toLocaleString()} words</span>
+ {isModified && (
+ <>
+ <span className="text-muted-foreground" style={{ margin: '0 4px' }}>·</span>
+ <span className="font-semibold" style={{ color: 'var(--accent-yellow)' }}>M</span>
+ </>
+ )}
+ </div>
+
+ {/* Right: action icons */}
+ <BreadcrumbActions entry={entry} {...actionProps} />
+ </div>
+ )
+})
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 | + + + + + + + + + + + + +22x +22x + +22x +7x + + + + + +22x + + + + + +22x + + + + + + + + +22x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState, useEffect, useRef } from 'react'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+
+interface CommitDialogProps {
+ open: boolean
+ modifiedCount: number
+ onCommit: (message: string) => void
+ onClose: () => void
+}
+
+export function CommitDialog({ open, modifiedCount, onCommit, onClose }: CommitDialogProps) {
+ const [message, setMessage] = useState('')
+ const inputRef = useRef<HTMLTextAreaElement>(null)
+
+ useEffect(() => {
+ Iif (open) {
+ setMessage('')
+ setTimeout(() => inputRef.current?.focus(), 50)
+ }
+ }, [open])
+
+ const handleSubmit = () => {
+ const trimmed = message.trim()
+ if (!trimmed) return
+ onCommit(trimmed)
+ }
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+ e.preventDefault()
+ handleSubmit()
+ } else if (e.key === 'Escape') {
+ onClose()
+ }
+ }
+
+ return (
+ <Dialog open={open} onOpenChange={(isOpen) => { if (!isOpen) onClose() }}>
+ <DialogContent showCloseButton={false} className="sm:max-w-[420px]">
+ <DialogHeader>
+ <div className="flex items-center justify-between">
+ <DialogTitle>Commit & Push</DialogTitle>
+ <Badge variant="secondary" className="text-xs">
+ {modifiedCount} file{modifiedCount !== 1 ? 's' : ''} changed
+ </Badge>
+ </div>
+ </DialogHeader>
+ <textarea
+ ref={inputRef}
+ className="w-full resize-y rounded-lg border border-input bg-[var(--bg-input)] px-3 py-2.5 text-[13px] text-foreground placeholder:text-muted-foreground outline-none transition-colors focus:border-ring"
+ placeholder="Commit message..."
+ value={message}
+ onChange={(e) => setMessage(e.target.value)}
+ onKeyDown={handleKeyDown}
+ rows={3}
+ />
+ <DialogFooter className="flex-row items-center justify-between sm:justify-between">
+ <span className="text-[11px] text-muted-foreground">Cmd+Enter to commit</span>
+ <div className="flex gap-2">
+ <Button variant="outline" onClick={onClose}>
+ Cancel
+ </Button>
+ <Button onClick={handleSubmit} disabled={!message.trim()}>
+ Commit & Push
+ </Button>
+ </div>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ )
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 | + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + +22x +22x +22x + +22x +7x + + + + + + +22x + + + + + + + +22x + + + + + + + + + + + + + + + + + + + + + + + +176x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState, useRef, useEffect } from 'react'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { cn } from '@/lib/utils'
+
+const BUILT_IN_TYPES = [
+ 'Note',
+ 'Project',
+ 'Experiment',
+ 'Responsibility',
+ 'Procedure',
+ 'Person',
+ 'Event',
+ 'Topic',
+] as const
+
+export type NoteType = (typeof BUILT_IN_TYPES)[number]
+
+interface CreateNoteDialogProps {
+ open: boolean
+ onClose: () => void
+ onCreate: (title: string, type: string) => void
+ defaultType?: string
+ /** Custom types from the vault (Type documents not in built-in list) */
+ customTypes?: string[]
+}
+
+export function CreateNoteDialog({ open, onClose, onCreate, defaultType, customTypes = [] }: CreateNoteDialogProps) {
+ const [title, setTitle] = useState('')
+ const [type, setType] = useState<string>('Note')
+ const inputRef = useRef<HTMLInputElement>(null)
+
+ useEffect(() => {
+ Iif (open) {
+ setTitle('')
+ setType(defaultType ?? 'Note')
+ setTimeout(() => inputRef.current?.focus(), 50)
+ }
+ }, [open, defaultType])
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault()
+ const trimmed = title.trim()
+ if (!trimmed) return
+ onCreate(trimmed, type)
+ onClose()
+ }
+
+ return (
+ <Dialog open={open} onOpenChange={(isOpen) => { if (!isOpen) onClose() }}>
+ <DialogContent showCloseButton={false} className="sm:max-w-[420px]">
+ <DialogHeader>
+ <DialogTitle>Create New Note</DialogTitle>
+ </DialogHeader>
+ <form onSubmit={handleSubmit} className="space-y-4">
+ <div className="space-y-1.5">
+ <label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+ Title
+ </label>
+ <Input
+ ref={inputRef}
+ placeholder="Enter note title..."
+ value={title}
+ onChange={(e) => setTitle(e.target.value)}
+ />
+ </div>
+ <div className="space-y-1.5">
+ <label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+ Type
+ </label>
+ <div className="flex flex-wrap gap-1.5">
+ {BUILT_IN_TYPES.map((t) => (
+ <Button
+ key={t}
+ type="button"
+ variant={type === t ? 'default' : 'outline'}
+ size="sm"
+ className={cn(
+ "rounded-full text-xs",
+ type === t && "bg-primary text-primary-foreground"
+ )}
+ onClick={() => setType(t)}
+ >
+ {t}
+ </Button>
+ ))}
+ {customTypes.map((t) => (
+ <Button
+ key={t}
+ type="button"
+ variant={type === t ? 'default' : 'outline'}
+ size="sm"
+ className={cn(
+ "rounded-full text-xs",
+ type === t
+ ? "bg-[var(--accent-blue)] text-white"
+ : "border-[var(--accent-blue)] text-[var(--accent-blue)]"
+ )}
+ onClick={() => setType(t)}
+ >
+ {t}
+ </Button>
+ ))}
+ </div>
+ </div>
+ <DialogFooter>
+ <Button type="button" variant="outline" onClick={onClose}>
+ Cancel
+ </Button>
+ <Button type="submit" disabled={!title.trim()}>
+ Create
+ </Button>
+ </DialogFooter>
+ </form>
+ </DialogContent>
+ </Dialog>
+ )
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 | + + + + + + + + + + + +38x +38x + +38x +15x +7x +7x + + + +38x +3x +3x +3x +2x +2x + + +38x + + + + + + + + + + + + + + +4x + + + + + + + + + + + + + + + + + + + | import { useState, useRef, useEffect } from 'react'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+
+interface CreateTypeDialogProps {
+ open: boolean
+ onClose: () => void
+ onCreate: (name: string) => void
+}
+
+export function CreateTypeDialog({ open, onClose, onCreate }: CreateTypeDialogProps) {
+ const [name, setName] = useState('')
+ const inputRef = useRef<HTMLInputElement>(null)
+
+ useEffect(() => {
+ if (open) {
+ setName('')
+ setTimeout(() => inputRef.current?.focus(), 50)
+ }
+ }, [open])
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault()
+ const trimmed = name.trim()
+ if (!trimmed) return
+ onCreate(trimmed)
+ onClose()
+ }
+
+ return (
+ <Dialog open={open} onOpenChange={(isOpen) => { if (!isOpen) onClose() }}>
+ <DialogContent showCloseButton={false} className="sm:max-w-[380px]">
+ <DialogHeader>
+ <DialogTitle>Create New Type</DialogTitle>
+ </DialogHeader>
+ <form onSubmit={handleSubmit} className="space-y-4">
+ <div className="space-y-1.5">
+ <label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+ Type Name
+ </label>
+ <Input
+ ref={inputRef}
+ placeholder="e.g. Recipe, Book, Habit..."
+ value={name}
+ onChange={(e) => setName(e.target.value)}
+ />
+ <p className="text-xs text-muted-foreground">
+ Creates a type document. Its properties become defaults for new docs of this type.
+ </p>
+ </div>
+ <DialogFooter>
+ <Button type="button" variant="outline" onClick={onClose}>
+ Cancel
+ </Button>
+ <Button type="submit" disabled={!name.trim()}>
+ Create
+ </Button>
+ </DialogFooter>
+ </form>
+ </DialogContent>
+ </Dialog>
+ )
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { cn } from '@/lib/utils'
+
+interface DiffViewProps {
+ diff: string
+}
+
+export function DiffView({ diff }: DiffViewProps) {
+ if (!diff) {
+ return (
+ <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+ No changes to display
+ </div>
+ )
+ }
+
+ const lines = diff.split('\n')
+
+ return (
+ <div className="font-mono text-[13px] leading-relaxed py-3">
+ {lines.map((line, i) => {
+ let lineClass = 'text-secondary-foreground'
+ if (line.startsWith('+') && !line.startsWith('+++')) {
+ lineClass = 'bg-[rgba(76,175,80,0.12)] text-[#4caf50]'
+ } else if (line.startsWith('-') && !line.startsWith('---')) {
+ lineClass = 'bg-[rgba(244,67,54,0.12)] text-[#f44336]'
+ } else if (line.startsWith('@@')) {
+ lineClass = 'bg-[rgba(33,150,243,0.08)] text-primary italic'
+ } else if (line.startsWith('diff') || line.startsWith('index') || line.startsWith('---') || line.startsWith('+++') || line.startsWith('new file')) {
+ lineClass = 'bg-muted text-muted-foreground font-semibold'
+ }
+
+ return (
+ <div key={i} className={cn("flex min-h-[22px] px-4", lineClass)}>
+ <span className="w-10 shrink-0 text-right pr-3 text-muted-foreground select-none">
+ {i + 1}
+ </span>
+ <span className="flex-1 whitespace-pre-wrap break-all px-2">
+ {line || '\u00A0'}
+ </span>
+ </div>
+ )
+ })}
+ </div>
+ )
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 | + + + + + + + +3x + + + + + + + + + + + + +3x + + +3x + + + + + +3x + + +152x +84x + + + + +16x +16x +208x +16x + + + +16x +16x +16x + + + + + + + + + + + + + + + + + + + +16x +16x +16x +16x + +16x + +16x +16x + +118x +118x +76x +76x + + + +16x + + + + + + + + + +16x + + + + + + + +16x + + + + + + + + + + + + + +16x + + + + + + + + +16x +76x + + + + + + + + + + +76x +16x +16x +16x + + + + + + + + + + + + + +16x + + + + + + + + + + +60x +14x + + +46x + + + + + + + + + + +46x + + + + + + + + + + +46x + + + + + + + + + +16x + + + + + + + + + + + + + + + + + + + + + + + + + + + + +76x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useMemo, useState, useCallback } from 'react'
+import type { VaultEntry } from '../types'
+import type { FrontmatterValue } from './Inspector'
+import type { ParsedFrontmatter } from '../utils/frontmatter'
+import { EditableValue, TagPillList } from './EditableValue'
+import { Button } from '@/components/ui/button'
+import { getTypeColor, getTypeLightColor } from '../utils/typeColors'
+
+const STATUS_STYLES: Record<string, { bg: string; color: string }> = {
+ Active: { bg: 'var(--accent-green-light)', color: 'var(--accent-green)' },
+ Done: { bg: 'var(--accent-blue-light)', color: 'var(--accent-blue)' },
+ Paused: { bg: 'var(--accent-yellow-light)', color: 'var(--accent-yellow)' },
+ Archived: { bg: 'var(--accent-blue-light)', color: 'var(--muted-foreground)' },
+ Dropped: { bg: 'var(--accent-red-light)', color: 'var(--accent-red)' },
+ Open: { bg: 'var(--accent-green-light)', color: 'var(--accent-green)' },
+ Closed: { bg: 'var(--accent-blue-light)', color: 'var(--muted-foreground)' },
+ 'Not started': { bg: 'var(--accent-blue-light)', color: 'var(--muted-foreground)' },
+ Draft: { bg: 'var(--accent-yellow-light)', color: 'var(--accent-yellow)' },
+ Mixed: { bg: 'var(--accent-yellow-light)', color: 'var(--accent-yellow)' },
+}
+
+const DEFAULT_STATUS_STYLE = { bg: 'var(--accent-blue-light)', color: 'var(--muted-foreground)' }
+
+// Keys that are relationships (contain wikilinks)
+export const RELATIONSHIP_KEYS = new Set([
+ 'Belongs to', 'Related to', 'Events', 'Has Data', 'Owner',
+ 'Advances', 'Parent', 'Children', 'Has', 'Notes',
+])
+
+// Keys to skip showing in Properties
+const SKIP_KEYS = new Set(['aliases', 'notion_id', 'workspace'])
+
+export function containsWikilinks(value: FrontmatterValue): boolean {
+ if (typeof value === 'string') return /^\[\[.*\]\]$/.test(value)
+ Eif (Array.isArray(value)) return value.some(v => typeof v === 'string' && /^\[\[.*\]\]$/.test(v))
+ return false
+}
+
+function countWords(content: string | null): number {
+ Iif (!content) return 0
+ const stripped = content.replace(/^---[\s\S]*?---\n?/, '')
+ const words = stripped.trim().split(/\s+/).filter((w) => w.length > 0)
+ return words.length
+}
+
+function formatDate(timestamp: number | null): string {
+ Iif (!timestamp) return '\u2014'
+ const d = new Date(timestamp * 1000)
+ return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+export function DynamicPropertiesPanel({
+ entry,
+ content,
+ frontmatter,
+ onUpdateProperty,
+ onDeleteProperty,
+ onAddProperty,
+ onNavigate,
+}: {
+ entry: VaultEntry
+ content: string | null
+ frontmatter: ParsedFrontmatter
+ onUpdateProperty?: (key: string, value: FrontmatterValue) => void
+ onDeleteProperty?: (key: string) => void
+ onAddProperty?: (key: string, value: FrontmatterValue) => void
+ onNavigate?: (target: string) => void
+}) {
+ const [editingKey, setEditingKey] = useState<string | null>(null)
+ const [showAddDialog, setShowAddDialog] = useState(false)
+ const [newKey, setNewKey] = useState('')
+ const [newValue, setNewValue] = useState('')
+
+ const wordCount = countWords(content)
+
+ const propertyEntries = useMemo(() => {
+ return Object.entries(frontmatter)
+ .filter(([key, value]) => {
+ Iif (SKIP_KEYS.has(key)) return false
+ if (RELATIONSHIP_KEYS.has(key)) return false
+ Iif (containsWikilinks(value)) return false
+ return true
+ })
+ }, [frontmatter])
+
+ const handleSaveValue = useCallback((key: string, newValue: string) => {
+ setEditingKey(null)
+ if (onUpdateProperty) {
+ if (newValue.toLowerCase() === 'true') onUpdateProperty(key, true)
+ else if (newValue.toLowerCase() === 'false') onUpdateProperty(key, false)
+ else if (!isNaN(Number(newValue)) && newValue.trim() !== '') onUpdateProperty(key, Number(newValue))
+ else onUpdateProperty(key, newValue)
+ }
+ }, [onUpdateProperty])
+
+ const handleSaveList = useCallback((key: string, newItems: string[]) => {
+ if (onUpdateProperty) {
+ if (newItems.length === 0) onDeleteProperty?.(key)
+ else if (newItems.length === 1) onUpdateProperty(key, newItems[0])
+ else onUpdateProperty(key, newItems)
+ }
+ }, [onUpdateProperty, onDeleteProperty])
+
+ const handleAddProperty = useCallback(() => {
+ if (newKey.trim() && onAddProperty) {
+ if (newValue.includes(',')) {
+ const items = newValue.split(',').map(s => s.trim()).filter(s => s)
+ onAddProperty(newKey.trim(), items.length === 1 ? items[0] : items)
+ } else {
+ onAddProperty(newKey.trim(), newValue.trim() || '')
+ }
+ setNewKey('')
+ setNewValue('')
+ setShowAddDialog(false)
+ }
+ }, [newKey, newValue, onAddProperty])
+
+ const handleAddKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter') handleAddProperty()
+ else if (e.key === 'Escape') {
+ setShowAddDialog(false)
+ setNewKey('')
+ setNewValue('')
+ }
+ }
+
+ const renderEditableValue = (key: string, value: FrontmatterValue) => {
+ Iif (value === null || value === undefined) {
+ return (
+ <EditableValue
+ value="" isEditing={editingKey === key}
+ onStartEdit={() => setEditingKey(key)}
+ onSave={(v) => handleSaveValue(key, v)}
+ onCancel={() => setEditingKey(null)}
+ />
+ )
+ }
+
+ if (key === 'Status' || key.includes('Status')) {
+ const statusStr = String(value)
+ const style = STATUS_STYLES[statusStr] ?? DEFAULT_STATUS_STYLE
+ Iif (editingKey === key) {
+ return (
+ <input
+ className="w-full rounded border border-ring bg-muted px-2 py-1 text-[13px] text-foreground outline-none focus:border-primary"
+ type="text" defaultValue={statusStr}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') handleSaveValue(key, (e.target as HTMLInputElement).value)
+ if (e.key === 'Escape') setEditingKey(null)
+ }}
+ onBlur={(e) => handleSaveValue(key, e.target.value)}
+ autoFocus
+ />
+ )
+ }
+ return (
+ <span
+ className="inline-block min-w-0 cursor-pointer truncate transition-opacity hover:opacity-80"
+ style={{ backgroundColor: style.bg, color: style.color, borderRadius: 16, padding: '1px 6px', fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, fontWeight: 600, letterSpacing: '1.2px', textTransform: 'uppercase' as const }}
+ onClick={() => setEditingKey(key)} title={statusStr}
+ >
+ {statusStr}
+ </span>
+ )
+ }
+
+ if (Array.isArray(value)) {
+ return <TagPillList items={value.map(String)} onSave={(items) => handleSaveList(key, items)} label={key} />
+ }
+
+ Iif (key.includes('Created') || key.includes('Modified') || key.includes('time') || key.includes('Date')) {
+ return (
+ <EditableValue
+ value={String(value)} isEditing={editingKey === key}
+ onStartEdit={() => setEditingKey(key)}
+ onSave={(v) => handleSaveValue(key, v)}
+ onCancel={() => setEditingKey(null)}
+ />
+ )
+ }
+
+ Iif (typeof value === 'boolean') {
+ return (
+ <button
+ className="rounded border border-border bg-transparent px-2 py-0.5 text-xs text-secondary-foreground transition-colors hover:bg-muted"
+ onClick={() => onUpdateProperty?.(key, !value)}
+ >
+ {value ? '\u2713 Yes' : '\u2717 No'}
+ </button>
+ )
+ }
+
+ return (
+ <EditableValue
+ value={String(value)} isEditing={editingKey === key}
+ onStartEdit={() => setEditingKey(key)}
+ onSave={(v) => handleSaveValue(key, v)}
+ onCancel={() => setEditingKey(null)}
+ />
+ )
+ }
+
+ return (
+ <div>
+ <div className="flex flex-col gap-2">
+ {entry.isA && (
+ <div className="flex items-center justify-between">
+ <span className="font-mono-overline shrink-0 text-muted-foreground">Type</span>
+ {onNavigate ? (
+ <button
+ className="min-w-0 truncate border-none text-right cursor-pointer hover:opacity-80"
+ style={{
+ background: getTypeLightColor(entry.isA),
+ color: getTypeColor(entry.isA),
+ borderRadius: 6,
+ padding: '2px 8px',
+ fontSize: 12,
+ fontWeight: 500,
+ }}
+ onClick={() => onNavigate(`type/${entry.isA!.toLowerCase()}`)}
+ title={entry.isA}
+ >
+ {entry.isA}
+ </button>
+ ) : (
+ <span className="text-right text-[12px] text-secondary-foreground">{entry.isA}</span>
+ )}
+ </div>
+ )}
+
+ {propertyEntries.map(([key, value]) => (
+ <div key={key} className="group/prop flex items-center justify-between">
+ <span className="font-mono-overline flex shrink-0 items-center gap-1 text-muted-foreground">
+ {key}
+ {onDeleteProperty && (
+ <button
+ className="border-none bg-transparent p-0 text-sm leading-none text-muted-foreground opacity-0 transition-all hover:text-destructive group-hover/prop:opacity-100"
+ onClick={() => onDeleteProperty(key)} title="Delete property"
+ >
+ ×
+ </button>
+ )}
+ </span>
+ {renderEditableValue(key, value)}
+ </div>
+ ))}
+
+ <div className="flex items-center justify-between">
+ <span className="font-mono-overline shrink-0 text-muted-foreground">Modified</span>
+ <span className="text-right text-[12px] text-secondary-foreground">{formatDate(entry.modifiedAt)}</span>
+ </div>
+ <div className="flex items-center justify-between">
+ <span className="font-mono-overline shrink-0 text-muted-foreground">Words</span>
+ <span className="text-right text-[12px] text-secondary-foreground">{wordCount}</span>
+ </div>
+ </div>
+
+ {showAddDialog ? (
+ <div className="mt-3 flex flex-col gap-2 rounded-md border border-border bg-muted p-3">
+ <input
+ className="w-full rounded border border-ring bg-muted px-2 py-1 text-[13px] text-foreground outline-none focus:border-primary"
+ type="text" placeholder="Property name" value={newKey}
+ onChange={(e) => setNewKey(e.target.value)} onKeyDown={handleAddKeyDown} autoFocus
+ />
+ <input
+ className="w-full rounded border border-ring bg-muted px-2 py-1 text-[13px] text-foreground outline-none focus:border-primary"
+ type="text" placeholder="Value" value={newValue}
+ onChange={(e) => setNewValue(e.target.value)} onKeyDown={handleAddKeyDown}
+ />
+ <div className="flex justify-end gap-2">
+ <Button size="xs" onClick={handleAddProperty} disabled={!newKey.trim()}>Add</Button>
+ <Button size="xs" variant="outline" onClick={() => { setShowAddDialog(false); setNewKey(''); setNewValue('') }}>Cancel</Button>
+ </div>
+ </div>
+ ) : (
+ <button
+ className="mt-3 w-full cursor-pointer border border-border bg-transparent text-center text-muted-foreground transition-colors hover:border-primary hover:text-primary disabled:cursor-not-allowed disabled:opacity-50"
+ style={{ borderRadius: 6, padding: '6px 12px', fontSize: 12 }}
+ onClick={() => setShowAddDialog(true)} disabled={!onAddProperty}
+ >
+ + Add property
+ </button>
+ )}
+ </div>
+ )
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 | + + + + + + + + + + + + + + +46x + +46x + + + + + + + + +46x + + + + + + + + + + + + + +46x + + + + + + + + + + + + + + + + + + + +14x +14x +14x +14x + +14x + + + + +14x + + + + + + + + + + + + +14x + + + + +14x + + + + + + + +14x + + + + + + + + + + + + + + +14x + + +42x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState } from 'react'
+
+export function EditableValue({
+ value,
+ onSave,
+ onCancel,
+ isEditing,
+ onStartEdit
+}: {
+ value: string
+ onSave: (newValue: string) => void
+ onCancel: () => void
+ isEditing: boolean
+ onStartEdit: () => void
+}) {
+ const [editValue, setEditValue] = useState(value)
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter') {
+ onSave(editValue)
+ } else if (e.key === 'Escape') {
+ setEditValue(value)
+ onCancel()
+ }
+ }
+
+ Iif (isEditing) {
+ return (
+ <input
+ className="w-full rounded border border-ring bg-muted px-2 py-1 text-[13px] text-foreground outline-none focus:border-primary"
+ type="text"
+ value={editValue}
+ onChange={(e) => setEditValue(e.target.value)}
+ onKeyDown={handleKeyDown}
+ onBlur={() => onSave(editValue)}
+ autoFocus
+ />
+ )
+ }
+
+ return (
+ <span
+ className="min-w-0 cursor-pointer truncate rounded px-1 py-0.5 text-right text-secondary-foreground transition-colors hover:bg-muted"
+ onClick={onStartEdit}
+ title={value || 'Click to edit'}
+ >
+ {value || '\u2014'}
+ </span>
+ )
+}
+
+export function TagPillList({
+ items,
+ onSave,
+ label,
+}: {
+ items: string[]
+ onSave: (newItems: string[]) => void
+ label: string
+}) {
+ const [editingIndex, setEditingIndex] = useState<number | null>(null)
+ const [editValue, setEditValue] = useState('')
+ const [isAddingNew, setIsAddingNew] = useState(false)
+ const [newValue, setNewValue] = useState('')
+
+ const handleStartEdit = (index: number) => {
+ setEditingIndex(index)
+ setEditValue(items[index])
+ }
+
+ const handleSaveEdit = () => {
+ if (editingIndex !== null) {
+ const newItems = [...items]
+ if (editValue.trim()) {
+ newItems[editingIndex] = editValue.trim()
+ } else {
+ newItems.splice(editingIndex, 1)
+ }
+ onSave(newItems)
+ setEditingIndex(null)
+ }
+ }
+
+ const handleDeleteItem = (index: number) => {
+ const newItems = items.filter((_, i) => i !== index)
+ onSave(newItems)
+ }
+
+ const handleAddNew = () => {
+ if (newValue.trim()) {
+ onSave([...items, newValue.trim()])
+ setNewValue('')
+ setIsAddingNew(false)
+ }
+ }
+
+ const handleKeyDown = (e: React.KeyboardEvent, action: 'edit' | 'add') => {
+ if (e.key === 'Enter') {
+ if (action === 'edit') handleSaveEdit()
+ else handleAddNew()
+ } else if (e.key === 'Escape') {
+ if (action === 'edit') {
+ setEditingIndex(null)
+ setEditValue('')
+ } else {
+ setIsAddingNew(false)
+ setNewValue('')
+ }
+ }
+ }
+
+ return (
+ <div className="flex flex-wrap items-center gap-1">
+ {items.map((item, idx) =>
+ editingIndex === idx ? (
+ <input
+ key={idx}
+ className="rounded-full border border-ring bg-muted px-2 py-0.5 text-[11px] text-foreground outline-none focus:border-primary"
+ style={{ width: Math.max(60, editValue.length * 7 + 16) }}
+ type="text"
+ value={editValue}
+ onChange={(e) => setEditValue(e.target.value)}
+ onKeyDown={(e) => handleKeyDown(e, 'edit')}
+ onBlur={handleSaveEdit}
+ autoFocus
+ />
+ ) : (
+ <span
+ key={idx}
+ className="group/pill inline-flex cursor-pointer items-center gap-0.5 rounded-full py-0.5 pl-2 pr-1 transition-colors"
+ style={{
+ backgroundColor: 'var(--accent-blue-light)',
+ color: 'var(--accent-blue)',
+ fontSize: 11,
+ fontWeight: 500,
+ }}
+ onClick={() => handleStartEdit(idx)}
+ title="Click to edit"
+ >
+ {item}
+ <button
+ className="ml-0.5 inline-flex h-3.5 w-3.5 items-center justify-center rounded-full border-none bg-transparent p-0 text-[10px] leading-none opacity-0 transition-all hover:bg-[var(--accent-red-light)] hover:text-[var(--accent-red)] group-hover/pill:opacity-100"
+ style={{ color: 'var(--accent-blue)' }}
+ onClick={(e) => {
+ e.stopPropagation()
+ handleDeleteItem(idx)
+ }}
+ title="Remove"
+ >
+ ×
+ </button>
+ </span>
+ )
+ )}
+ {isAddingNew ? (
+ <input
+ className="rounded-full border border-ring bg-muted px-2 py-0.5 text-[11px] text-foreground outline-none focus:border-primary"
+ style={{ width: Math.max(60, newValue.length * 7 + 16) }}
+ type="text"
+ value={newValue}
+ onChange={(e) => setNewValue(e.target.value)}
+ onKeyDown={(e) => handleKeyDown(e, 'add')}
+ onBlur={() => {
+ if (newValue.trim()) handleAddNew()
+ else { setIsAddingNew(false); setNewValue('') }
+ }}
+ placeholder={`${label}...`}
+ autoFocus
+ />
+ ) : (
+ <button
+ className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-dashed border-[var(--accent-blue)] bg-transparent p-0 text-[12px] leading-none text-[var(--accent-blue)] transition-colors hover:bg-[var(--accent-blue-light)]"
+ onClick={() => setIsAddingNew(true)}
+ title={`Add ${label.toLowerCase()}`}
+ >
+ +
+ </button>
+ )}
+ </div>
+ )
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 +497 +498 +499 +500 +501 +502 +503 +504 +505 +506 +507 +508 +509 +510 +511 +512 +513 +514 +515 +516 +517 +518 +519 +520 +521 +522 +523 +524 +525 +526 +527 +528 +529 +530 +531 +532 +533 +534 +535 +536 +537 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +2x + +2x + + + + + + + + + + + + + + + + + + + + + + + + + + +2x + + + + + + + + + + + + + + + + + + + + + + + + + + +2x + + + + + + + + +8x +8x +8x + + +8x +8x + + +8x +8x +8x +8x + + + + + + + + +8x +8x + + +8x +8x + + + + + + + + +8x + + + + + + + + + + + + + + + +8x + + + + + + + + + + + + + + +2x + + + + + + + + + +33x +33x +33x + + +33x +33x + + +33x + + + + + + + + + + + + + + + + + + + + + + + + + + +33x +33x +33x +33x + + +33x + +33x +11x + +33x +33x + + + +33x + + + + + +33x + + + + + +33x +33x +33x + + +33x + + +33x + +33x + +8x +8x + +8x +8x +8x +8x +1x +7x + + + + + + + + + + + + + +8x + +8x + +8x + +8x + + + + +8x +8x +8x + +8x +8x +8x +8x +8x + +8x +1x + +8x + +8x +8x + + + + + + + + + + +8x + + +8x + + + + + + +33x +33x +18x +18x + + + + +18x + + +33x +33x +33x + +33x +18x +18x + + +33x + + + + + + + + + + + + + + + + + + +33x + + + + + + + + + + + + + +33x +33x + + +33x + + + + + + + + + +33x + + + + + + + + + + + + + + + + + + + +33x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +33x +25x + + + + + + + + + + + + + + +8x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useEffect, useState, useCallback, useMemo, useRef, memo } from 'react'
+import { BlockNoteSchema, defaultInlineContentSpecs } from '@blocknote/core'
+import { filterSuggestionItems } from '@blocknote/core/extensions'
+import { createReactInlineContentSpec, useCreateBlockNote, SuggestionMenuController } from '@blocknote/react'
+import { BlockNoteView } from '@blocknote/mantine'
+import '@blocknote/mantine/style.css'
+import { invoke, convertFileSrc } from '@tauri-apps/api/core'
+import { isTauri } from '../mock-tauri'
+import type { VaultEntry, GitCommit } from '../types'
+import { Inspector, type FrontmatterValue } from './Inspector'
+import { AIChatPanel } from './AIChatPanel'
+import { DiffView } from './DiffView'
+import { ResizeHandle } from './ResizeHandle'
+import { TabBar } from './TabBar'
+import { BreadcrumbBar } from './BreadcrumbBar'
+import { useEditorTheme } from '../hooks/useTheme'
+import { splitFrontmatter, preProcessWikilinks, injectWikilinks, countWords } from '../utils/wikilinks'
+import './Editor.css'
+import './EditorTheme.css'
+
+interface Tab {
+ entry: VaultEntry
+ content: string
+}
+
+interface EditorProps {
+ tabs: Tab[]
+ activeTabPath: string | null
+ entries: VaultEntry[]
+ onSwitchTab: (path: string) => void
+ onCloseTab: (path: string) => void
+ onReorderTabs?: (fromIndex: number, toIndex: number) => void
+ onNavigateWikilink: (target: string) => void
+ onLoadDiff?: (path: string) => Promise<string>
+ onLoadDiffAtCommit?: (path: string, commitHash: string) => Promise<string>
+ isModified?: (path: string) => boolean
+ onCreateNote?: () => void
+ // Inspector props
+ inspectorCollapsed: boolean
+ onToggleInspector: () => void
+ inspectorWidth: number
+ onInspectorResize: (delta: number) => void
+ inspectorEntry: VaultEntry | null
+ inspectorContent: string | null
+ allContent: Record<string, string>
+ gitHistory: GitCommit[]
+ onUpdateFrontmatter?: (path: string, key: string, value: FrontmatterValue) => Promise<void>
+ onDeleteProperty?: (path: string, key: string) => Promise<void>
+ onAddProperty?: (path: string, key: string, value: FrontmatterValue) => Promise<void>
+ showAIChat?: boolean
+ onToggleAIChat?: () => void
+ vaultPath?: string
+ onTrashNote?: (path: string) => void
+ onRestoreNote?: (path: string) => void
+ onArchiveNote?: (path: string) => void
+ onUnarchiveNote?: (path: string) => void
+}
+
+// --- Custom Inline Content: WikiLink ---
+
+// Module-level cache so the WikiLink renderer (defined outside React) can access entries
+const _wikilinkEntriesRef: { current: VaultEntry[] } = { current: [] }
+
+const TYPE_COLOR_MAP: Record<string, string> = {
+ red: 'var(--accent-red)',
+ orange: 'var(--accent-orange)',
+ yellow: 'var(--accent-yellow)',
+ green: 'var(--accent-green)',
+ blue: 'var(--accent-blue)',
+ purple: 'var(--accent-purple)',
+}
+
+function resolveWikilinkColor(target: string): string | undefined {
+ const entries = _wikilinkEntriesRef.current
+ if (!entries.length) return undefined
+ // Find the target entry by title or filename slug
+ const entry = entries.find(
+ e => e.title === target || e.filename.replace(/\.md$/, '') === target
+ )
+ if (!entry) return undefined
+ // If entry is itself a Type, use its own color
+ if (entry.isA === 'Type' && entry.color) return TYPE_COLOR_MAP[entry.color]
+ // Otherwise look up the type entry
+ if (entry.isA) {
+ const typeEntry = entries.find(e => e.isA === 'Type' && e.title === entry.isA)
+ if (typeEntry?.color) return TYPE_COLOR_MAP[typeEntry.color]
+ }
+ return undefined
+}
+
+const WikiLink = createReactInlineContentSpec(
+ {
+ type: "wikilink" as const,
+ propSchema: {
+ target: { default: "" },
+ },
+ content: "none",
+ },
+ {
+ render: (props) => {
+ const target = props.inlineContent.props.target
+ const color = resolveWikilinkColor(target)
+ return (
+ <span
+ className="wikilink"
+ data-target={target}
+ style={color ? { color, textDecorationColor: color } : undefined}
+ >
+ {target}
+ </span>
+ )
+ },
+ }
+)
+
+// --- Schema with wikilink ---
+
+const schema = BlockNoteSchema.create({
+ inlineContentSpecs: {
+ ...defaultInlineContentSpecs,
+ wikilink: WikiLink,
+ },
+})
+
+/** Single BlockNote editor view — content is swapped via replaceBlocks */
+function SingleEditorView({ editor, entries, onNavigateWikilink }: { editor: ReturnType<typeof useCreateBlockNote>; entries: VaultEntry[]; onNavigateWikilink: (target: string) => void }) {
+ const navigateRef = useRef(onNavigateWikilink)
+ navigateRef.current = onNavigateWikilink
+ const { cssVars } = useEditorTheme()
+
+ // Keep module-level ref in sync so WikiLink renderer can access vault entries
+ useEffect(() => {
+ _wikilinkEntriesRef.current = entries
+ }, [entries])
+
+ useEffect(() => {
+ const container = document.querySelector('.editor__blocknote-container')
+ Iif (!container) return
+ const handler = (e: MouseEvent) => {
+ const wikilink = (e.target as HTMLElement).closest('.wikilink')
+ if (wikilink) {
+ e.preventDefault()
+ e.stopPropagation()
+ const target = (wikilink as HTMLElement).dataset.target
+ if (target) navigateRef.current(target)
+ }
+ }
+ container.addEventListener('click', handler as EventListener, true)
+ return () => container.removeEventListener('click', handler as EventListener, true)
+ }, [editor])
+
+ const baseItems = useMemo(
+ () => entries.map(entry => ({
+ title: entry.title,
+ aliases: [entry.filename.replace(/\.md$/, ''), ...entry.aliases],
+ group: entry.isA || 'Note',
+ entryTitle: entry.title,
+ })),
+ [entries]
+ )
+
+ const getWikilinkItems = useCallback(async (query: string) => {
+ const items = baseItems.map(item => ({
+ ...item,
+ onItemClick: () => {
+ editor.insertInlineContent([
+ {
+ type: 'wikilink' as const,
+ props: { target: item.entryTitle },
+ },
+ " ",
+ ])
+ },
+ }))
+ return filterSuggestionItems(items, query)
+ }, [baseItems, editor])
+
+ return (
+ <div className="editor__blocknote-container" style={cssVars as React.CSSProperties}>
+ <BlockNoteView
+ editor={editor}
+ theme="light"
+ >
+ <SuggestionMenuController
+ triggerCharacter="[["
+ getItems={getWikilinkItems}
+ />
+ </BlockNoteView>
+ </div>
+ )
+}
+
+export const Editor = memo(function Editor({
+ tabs, activeTabPath, entries, onSwitchTab, onCloseTab, onReorderTabs, onNavigateWikilink, onLoadDiff, onLoadDiffAtCommit, isModified, onCreateNote,
+ inspectorCollapsed, onToggleInspector, inspectorWidth, onInspectorResize,
+ inspectorEntry, inspectorContent, allContent, gitHistory,
+ onUpdateFrontmatter, onDeleteProperty, onAddProperty,
+ showAIChat, onToggleAIChat,
+ vaultPath,
+ onTrashNote, onRestoreNote,
+ onArchiveNote, onUnarchiveNote,
+}: EditorProps) {
+ const [diffMode, setDiffMode] = useState(false)
+ const [diffContent, setDiffContent] = useState<string | null>(null)
+ const [diffLoading, setDiffLoading] = useState(false)
+
+ // Ref for vaultPath so the uploadFile closure always sees the latest value
+ const vaultPathRef = useRef(vaultPath)
+ vaultPathRef.current = vaultPath
+
+ // Single editor instance — reused across all tabs
+ const editor = useCreateBlockNote({
+ schema,
+ uploadFile: async (file: File) => {
+ if (isTauri() && vaultPathRef.current) {
+ // Tauri mode: save to vault/attachments and return a stable asset URL
+ const buf = await file.arrayBuffer()
+ const bytes = new Uint8Array(buf)
+ let binary = ''
+ for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i])
+ const base64 = btoa(binary)
+ const savedPath = await invoke<string>('save_image', {
+ vaultPath: vaultPathRef.current,
+ filename: file.name,
+ data: base64,
+ })
+ return convertFileSrc(savedPath)
+ }
+ // Browser dev mode: use data URL (survives reload, acceptable for dev)
+ return new Promise<string>((resolve, reject) => {
+ const reader = new FileReader()
+ reader.onload = () => resolve(reader.result as string)
+ reader.onerror = () => reject(reader.error)
+ reader.readAsDataURL(file)
+ })
+ },
+ })
+ // Cache parsed blocks per tab path for instant switching
+ const tabCacheRef = useRef<Map<string, any[]>>(new Map())
+ const prevActivePathRef = useRef<string | null>(null)
+ const editorMountedRef = useRef(false)
+ const pendingSwapRef = useRef<(() => void) | null>(null)
+
+ // Track editor mount state
+ useEffect(() => {
+ // Check if already mounted (prosemirrorView exists)
+ if (editor.prosemirrorView) {
+ editorMountedRef.current = true
+ }
+ const cleanup = editor.onMount(() => {
+ editorMountedRef.current = true
+ // Execute any pending content swap that was queued before mount.
+ // Defer via queueMicrotask so BlockNote's internal flushSync calls
+ // don't collide with React's commit phase.
+ Iif (pendingSwapRef.current) {
+ const swap = pendingSwapRef.current
+ pendingSwapRef.current = null
+ queueMicrotask(swap)
+ }
+ })
+ return cleanup
+ }, [editor])
+
+ // Swap document content when active tab changes.
+ // Uses queueMicrotask to defer BlockNote mutations outside React's commit phase,
+ // avoiding flushSync-inside-lifecycle errors that silently prevent content from rendering.
+ useEffect(() => {
+ const cache = tabCacheRef.current
+ const prevPath = prevActivePathRef.current
+
+ // Save current editor state for the tab we're leaving
+ Iif (prevPath && prevPath !== activeTabPath && editorMountedRef.current) {
+ cache.set(prevPath, editor.document)
+ }
+ prevActivePathRef.current = activeTabPath
+
+ if (!activeTabPath) return
+
+ const tab = tabs.find(t => t.entry.path === activeTabPath)
+ Iif (!tab) return
+
+ const applyBlocks = (blocks: any[]) => {
+ try {
+ const current = editor.document
+ if (current.length > 0 && blocks.length > 0) {
+ editor.replaceBlocks(current, blocks)
+ I} else if (blocks.length > 0) {
+ editor.insertBlocks(blocks, current[0], 'before')
+ }
+ } catch (err) {
+ console.error('applyBlocks failed, trying fallback:', err)
+ try {
+ const html = editor.blocksToHTMLLossy(blocks)
+ editor._tiptapEditor.commands.setContent(html)
+ } catch (err2) {
+ console.error('Fallback also failed:', err2)
+ }
+ }
+ }
+
+ const targetPath = activeTabPath
+
+ const doSwap = () => {
+ // Guard: bail if user switched tabs since this swap was scheduled
+ Iif (prevActivePathRef.current !== targetPath) return
+
+ Iif (cache.has(targetPath)) {
+ applyBlocks(cache.get(targetPath)!)
+ return
+ }
+
+ const [, rawBody] = splitFrontmatter(tab.content)
+ const body = rawBody.replace(/^# [^\n]*\n?/, '').trimStart()
+ const preprocessed = preProcessWikilinks(body)
+
+ try {
+ const result = editor.tryParseMarkdownToBlocks(preprocessed)
+ const handleBlocks = (blocks: any[]) => {
+ Iif (prevActivePathRef.current !== targetPath) return
+ const withWikilinks = injectWikilinks(blocks)
+ // Only cache non-empty results to avoid poisoning the cache
+ if (withWikilinks.length > 0) {
+ cache.set(targetPath, withWikilinks)
+ }
+ applyBlocks(withWikilinks)
+ }
+ if (result && typeof (result as any).then === 'function') {
+ (result as unknown as Promise<any[]>).then(handleBlocks).catch((err) => {
+ console.error('Async markdown parse failed:', err)
+ })
+ } else E{
+ handleBlocks(result as any[])
+ }
+ } catch (err) {
+ console.error('Failed to parse/swap editor content:', err)
+ }
+ }
+
+ if (editor.prosemirrorView) {
+ // Defer the swap outside React's commit phase so BlockNote's internal
+ // flushSync calls don't collide with React's rendering lifecycle.
+ queueMicrotask(doSwap)
+ } else E{
+ pendingSwapRef.current = doSwap
+ }
+ }, [activeTabPath, tabs, editor])
+
+ // Clean up cache entries when tabs are closed
+ const tabPathsRef = useRef<Set<string>>(new Set())
+ useEffect(() => {
+ const currentPaths = new Set(tabs.map(t => t.entry.path))
+ for (const path of tabPathsRef.current) {
+ if (!currentPaths.has(path)) {
+ tabCacheRef.current.delete(path)
+ }
+ }
+ tabPathsRef.current = currentPaths
+ }, [tabs])
+
+ const activeTab = tabs.find((t) => t.entry.path === activeTabPath) ?? null
+ const isLoadingNewTab = activeTabPath !== null && !activeTab
+ const showDiffToggle = activeTab && (diffMode || isModified?.(activeTab.entry.path))
+
+ useEffect(() => {
+ setDiffMode(false)
+ setDiffContent(null)
+ }, [activeTabPath])
+
+ const handleToggleDiff = useCallback(async () => {
+ if (diffMode) {
+ setDiffMode(false)
+ setDiffContent(null)
+ return
+ }
+ if (!activeTabPath || !onLoadDiff) return
+ setDiffLoading(true)
+ try {
+ const diff = await onLoadDiff(activeTabPath)
+ setDiffContent(diff)
+ setDiffMode(true)
+ } catch (err) {
+ console.warn('Failed to load diff:', err)
+ } finally {
+ setDiffLoading(false)
+ }
+ }, [diffMode, activeTabPath, onLoadDiff])
+
+ const handleViewCommitDiff = useCallback(async (commitHash: string) => {
+ if (!activeTabPath || !onLoadDiffAtCommit) return
+ setDiffLoading(true)
+ try {
+ const diff = await onLoadDiffAtCommit(activeTabPath, commitHash)
+ setDiffContent(diff)
+ setDiffMode(true)
+ } catch (err) {
+ console.warn('Failed to load commit diff:', err)
+ } finally {
+ setDiffLoading(false)
+ }
+ }, [activeTabPath, onLoadDiffAtCommit])
+
+ const activeModified = activeTab ? isModified?.(activeTab.entry.path) ?? false : false
+ const wordCount = activeTab ? countWords(activeTab.content) : 0
+
+ const tabBar = (
+ <TabBar
+ tabs={tabs}
+ activeTabPath={activeTabPath}
+ onSwitchTab={onSwitchTab}
+ onCloseTab={onCloseTab}
+ onCreateNote={onCreateNote}
+ onReorderTabs={onReorderTabs}
+ />
+ )
+
+ const breadcrumbBar = activeTab ? (
+ <BreadcrumbBar
+ entry={activeTab.entry}
+ wordCount={wordCount}
+ isModified={activeModified}
+ showDiffToggle={!!showDiffToggle}
+ diffMode={diffMode}
+ diffLoading={diffLoading}
+ onToggleDiff={handleToggleDiff}
+ showAIChat={showAIChat}
+ onToggleAIChat={onToggleAIChat}
+ inspectorCollapsed={inspectorCollapsed}
+ onToggleInspector={onToggleInspector}
+ onTrash={onTrashNote ? () => onTrashNote(activeTab.entry.path) : undefined}
+ onRestore={onRestoreNote ? () => onRestoreNote(activeTab.entry.path) : undefined}
+ onArchive={onArchiveNote ? () => onArchiveNote(activeTab.entry.path) : undefined}
+ onUnarchive={onUnarchiveNote ? () => onUnarchiveNote(activeTab.entry.path) : undefined}
+ />
+ ) : null
+
+ const rightPanel = showAIChat ? (
+ <div
+ className="shrink-0 flex flex-col min-h-0"
+ style={{ width: inspectorWidth, height: '100%' }}
+ >
+ <AIChatPanel
+ entry={inspectorEntry}
+ allContent={allContent}
+ entries={entries}
+ onClose={() => onToggleAIChat?.()}
+ />
+ </div>
+ ) : inspectorCollapsed ? null : (
+ <div
+ className="shrink-0 flex flex-col min-h-0"
+ style={{ width: inspectorWidth, height: '100%' }}
+ >
+ <Inspector
+ collapsed={inspectorCollapsed}
+ onToggle={onToggleInspector}
+ entry={inspectorEntry}
+ content={inspectorContent}
+ entries={entries}
+ allContent={allContent}
+ gitHistory={gitHistory}
+ onNavigate={onNavigateWikilink}
+ onViewCommitDiff={handleViewCommitDiff}
+ onUpdateFrontmatter={onUpdateFrontmatter}
+ onDeleteProperty={onDeleteProperty}
+ onAddProperty={onAddProperty}
+ />
+ </div>
+ )
+
+ if (tabs.length === 0) {
+ return (
+ <div className="editor flex flex-col min-h-0 overflow-hidden bg-background text-foreground">
+ {tabBar}
+ <div className="flex flex-1 min-h-0">
+ <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-muted-foreground">
+ <p className="m-0 text-[15px]">Select a note to start editing</p>
+ <span className="text-xs text-muted-foreground">Cmd+P to search · Cmd+N to create</span>
+ </div>
+ {(showAIChat || !inspectorCollapsed) && <ResizeHandle onResize={onInspectorResize} />}
+ {rightPanel}
+ </div>
+ </div>
+ )
+ }
+
+ return (
+ <div className="editor flex flex-col min-h-0 overflow-hidden bg-background text-foreground">
+ {tabBar}
+ <div className="flex flex-1 min-h-0">
+ <div className="flex flex-1 flex-col min-w-0 min-h-0">
+ {breadcrumbBar}
+ {diffMode && (
+ <div className="flex-1 overflow-auto">
+ <button
+ className="flex items-center gap-1.5 px-4 py-2 text-xs text-primary bg-muted border-b border-border cursor-pointer hover:bg-accent transition-colors w-full border-t-0 border-l-0 border-r-0"
+ onClick={handleToggleDiff}
+ title="Back to editor"
+ >
+ <span style={{ fontSize: 14, lineHeight: 1 }}>←</span>
+ Back to editor
+ </button>
+ <DiffView diff={diffContent ?? ''} />
+ </div>
+ )}
+ {!diffMode && activeTab && (
+ <div
+ style={{
+ display: 'flex',
+ flex: 1,
+ flexDirection: 'column',
+ minHeight: 0,
+ }}
+ >
+ <SingleEditorView
+ editor={editor}
+ entries={entries}
+ onNavigateWikilink={onNavigateWikilink}
+ />
+ </div>
+ )}
+ {isLoadingNewTab && !diffMode && (
+ <div className="flex flex-1 flex-col gap-3 p-8 animate-pulse" style={{ minHeight: 0 }}>
+ <div className="h-6 w-2/5 rounded bg-muted" />
+ <div className="h-4 w-4/5 rounded bg-muted" />
+ <div className="h-4 w-3/5 rounded bg-muted" />
+ <div className="h-4 w-4/5 rounded bg-muted" />
+ <div className="h-4 w-2/5 rounded bg-muted" />
+ </div>
+ )}
+ </div>
+ {(showAIChat || !inspectorCollapsed) && <ResizeHandle onResize={onInspectorResize} />}
+ {rightPanel}
+ </div>
+ </div>
+ )
+})
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 | + + + + + + + + + + + +3x + + + + + + + + + + + +30x + + + + + + + + + + + + + + + + + + + + + +42x + + + + +28x +28x +28x +28x +56x + + + + +29x +29x +29x + + + +28x +28x +10x +10x +10x +10x +10x + + + + + +28x +28x + + + + +28x +28x +28x +28x +28x +28x +28x +28x +28x + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + +16x +16x +16x +16x + +16x +16x +118x + +42x +42x + +42x + +42x + + + +16x + +16x + + + + + + + + + +16x + + + + +16x + + + + + +28x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +41x +40x +16x +16x +16x +16x + +16x +6x +2x +2x +2x +2x + + + + + + + + + + +16x + + + + + + + + + +2x +2x +2x +2x + + + + +1x + + + + + + + + + + + + + + + + + + + +9x +9x +9x +9x +9x +9x + + + + + + +16x + + + + + + + +9x + + + + +1x + + + + + + + + + + + + + + + + + + + +24x + + + + + + + + + + + + + + + + + + + + + + + +41x +41x + +41x + + + +41x + + + +41x + + + +41x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useMemo, useCallback, useState, useRef } from 'react'
+import type { ComponentType, SVGAttributes } from 'react'
+import type { VaultEntry, GitCommit } from '../types'
+import { cn } from '@/lib/utils'
+import {
+ SlidersHorizontal, X, Wrench, Flask, Target, ArrowsClockwise,
+ Users, CalendarBlank, Tag, FileText, StackSimple, Trash,
+} from '@phosphor-icons/react'
+import { parseFrontmatter, type ParsedFrontmatter } from '../utils/frontmatter'
+import { DynamicPropertiesPanel, RELATIONSHIP_KEYS, containsWikilinks } from './DynamicPropertiesPanel'
+import { getTypeColor, getTypeLightColor } from '../utils/typeColors'
+
+const TYPE_ICON_MAP: Record<string, ComponentType<SVGAttributes<SVGSVGElement>>> = {
+ Project: Wrench,
+ Experiment: Flask,
+ Responsibility: Target,
+ Procedure: ArrowsClockwise,
+ Person: Users,
+ Event: CalendarBlank,
+ Topic: Tag,
+ Type: StackSimple,
+}
+
+function getTypeIcon(isA: string | undefined): ComponentType<SVGAttributes<SVGSVGElement>> {
+ return (isA && TYPE_ICON_MAP[isA]) || FileText
+}
+
+interface InspectorProps {
+ collapsed: boolean
+ onToggle: () => void
+ entry: VaultEntry | null
+ content: string | null
+ entries: VaultEntry[]
+ allContent: Record<string, string>
+ gitHistory: GitCommit[]
+ onNavigate: (target: string) => void
+ onViewCommitDiff?: (commitHash: string) => void
+ onUpdateFrontmatter?: (path: string, key: string, value: FrontmatterValue) => Promise<void>
+ onDeleteProperty?: (path: string, key: string) => Promise<void>
+ onAddProperty?: (path: string, key: string, value: FrontmatterValue) => Promise<void>
+}
+
+export type FrontmatterValue = string | number | boolean | string[] | null
+
+/** Check if a string is a wikilink */
+function isWikilink(value: string): boolean {
+ return /^\[\[.*\]\]$/.test(value)
+}
+
+/** Extract display name from a wikilink */
+function wikilinkDisplay(ref: string): string {
+ const inner = ref.replace(/^\[\[|\]\]$/g, '')
+ const pipeIdx = inner.indexOf('|')
+ Iif (pipeIdx !== -1) return inner.slice(pipeIdx + 1)
+ const last = inner.split('/').pop() ?? inner
+ return last.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
+}
+
+/** Extract the target path for navigation from a wikilink ref */
+function wikilinkTarget(ref: string): string {
+ const inner = ref.replace(/^\[\[|\]\]$/g, '')
+ const pipeIdx = inner.indexOf('|')
+ return pipeIdx !== -1 ? inner.slice(0, pipeIdx) : inner
+}
+
+function resolveRef(ref: string, entries: VaultEntry[]): VaultEntry | undefined {
+ const target = wikilinkTarget(ref)
+ return entries.find((e) => {
+ const stem = e.path.replace(/^.*\/Laputa\//, '').replace(/\.md$/, '')
+ Iif (stem === target) return true
+ const fileStem = e.filename.replace(/\.md$/, '')
+ Iif (fileStem === target.split('/').pop()) return true
+ return false
+ })
+}
+
+
+function RelationshipGroup({ label, refs, entries, onNavigate }: { label: string; refs: string[]; entries: VaultEntry[]; onNavigate: (target: string) => void }) {
+ Iif (refs.length === 0) return null
+ return (
+ <div className="mb-2.5">
+ <span className="font-mono-overline mb-1 block text-muted-foreground">{label}</span>
+ <div className="flex flex-col gap-1">
+ {refs.map((ref, idx) => {
+ const resolved = resolveRef(ref, entries)
+ const refType = resolved?.isA ?? undefined
+ const isArchived = resolved?.archived ?? false
+ const isTrashed = resolved?.trashed ?? false
+ const isDimmed = isArchived || isTrashed
+ const color = refType ? getTypeColor(refType) : 'var(--accent-blue)'
+ const bgColor = refType ? getTypeLightColor(refType) : 'var(--accent-blue-light)'
+ const TypeIcon = getTypeIcon(refType)
+ return (
+ <button
+ key={`${ref}-${idx}`}
+ className="flex items-center justify-between gap-2 border-none text-left cursor-pointer hover:opacity-80"
+ style={{
+ background: isDimmed ? 'var(--muted)' : bgColor,
+ color: isDimmed ? 'var(--muted-foreground)' : color,
+ borderRadius: 6, padding: '6px 10px', fontSize: 12, fontWeight: 500,
+ opacity: isDimmed ? 0.7 : 1,
+ }}
+ onClick={() => onNavigate(wikilinkTarget(ref))}
+ title={isTrashed ? 'Trashed' : isArchived ? 'Archived' : undefined}
+ >
+ <span className="flex items-center gap-1 flex-1 truncate">
+ {isTrashed && <Trash size={12} className="shrink-0" />}
+ {wikilinkDisplay(ref)}
+ {isTrashed && <span style={{ fontSize: 10, opacity: 0.8 }}>(trashed)</span>}
+ {isArchived && !isTrashed && <span style={{ marginLeft: 4, fontSize: 10, opacity: 0.8 }}>(archived)</span>}
+ </span>
+ <TypeIcon width={14} height={14} className="shrink-0" style={{ color: isDimmed ? 'var(--muted-foreground)' : color }} />
+ </button>
+ )
+ })}
+ </div>
+ </div>
+ )
+}
+
+function DynamicRelationshipsPanel({
+ frontmatter, entries, onNavigate, onAddProperty,
+}: {
+ frontmatter: ParsedFrontmatter
+ entries: VaultEntry[]
+ onNavigate: (target: string) => void
+ onAddProperty?: (key: string, value: FrontmatterValue) => void
+}) {
+ const [showForm, setShowForm] = useState(false)
+ const [relKey, setRelKey] = useState('')
+ const [relTarget, setRelTarget] = useState('')
+ const keyInputRef = useRef<HTMLInputElement>(null)
+
+ const relationshipEntries = useMemo(() => {
+ return Object.entries(frontmatter)
+ .filter(([key, value]) => key !== 'Type' && (RELATIONSHIP_KEYS.has(key) || containsWikilinks(value)))
+ .map(([key, value]) => {
+ const refs: string[] = []
+ if (typeof value === 'string' && isWikilink(value)) refs.push(valueI)
+ else if (Array.isArray(value)) value.forEach(v => { if (typeof v === 'string' && isWikilink(v)) refs.push(v) })
+ return { key, refs }
+ })
+ .filter(({ refs }) => refs.length > 0)
+ }, [frontmatter])
+
+ // All note titles for datalist autocomplete
+ const noteTitles = useMemo(() => entries.map(e => e.title), [entries])
+
+ const handleAdd = useCallback(() => {
+ const key = relKey.trim()
+ const target = relTarget.trim()
+ if (!key || !target || !onAddProperty) return
+ onAddProperty(key, `[[${target}]]`)
+ setRelKey('')
+ setRelTarget('')
+ setShowForm(false)
+ }, [relKey, relTarget, onAddProperty])
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter') handleAdd()
+ else if (e.key === 'Escape') { setShowForm(false); setRelKey(''); setRelTarget('') }
+ }
+
+ return (
+ <div>
+ {relationshipEntries.length === 0 ? (
+ <p className="m-0 text-[13px] text-muted-foreground">No relationships</p>
+ ) : (
+ relationshipEntries.map(({ key, refs }) => (
+ <RelationshipGroup key={key} label={key} refs={refs} entries={entries} onNavigate={onNavigate} />
+ ))
+ )}
+
+ {showForm ? (
+ <div className="mt-2 flex flex-col gap-1.5" onKeyDown={handleKeyDown}>
+ <datalist id="rel-note-titles">
+ {noteTitles.map(t => <option key={t} value={t} />)}
+ </datalist>
+ <input
+ ref={keyInputRef}
+ autoFocus
+ className="w-full border border-border bg-transparent px-2 py-1 text-xs text-foreground"
+ style={{ borderRadius: 4, outline: 'none' }}
+ placeholder="Relationship name (e.g. Has, Related to)"
+ value={relKey}
+ onChange={e => setRelKey(e.target.value)}
+ />
+ <input
+ className="w-full border border-border bg-transparent px-2 py-1 text-xs text-foreground"
+ style={{ borderRadius: 4, outline: 'none' }}
+ placeholder="Note title"
+ list="rel-note-titles"
+ value={relTarget}
+ onChange={e => setRelTarget(e.target.value)}
+ />
+ <div className="flex gap-1.5">
+ <button
+ className="flex-1 border border-border bg-transparent text-xs text-foreground"
+ style={{ borderRadius: 4, padding: '4px 0' }}
+ onClick={handleAdd}
+ disabled={!relKey.trim() || !relTarget.trim()}
+ >
+ Add
+ </button>
+ <button
+ className="border border-border bg-transparent text-xs text-muted-foreground"
+ style={{ borderRadius: 4, padding: '4px 8px' }}
+ onClick={() => { setShowForm(false); setRelKey(''); setRelTarget('') }}
+ >
+ Cancel
+ </button>
+ </div>
+ </div>
+ ) : (
+ <button
+ className="mt-2 w-full border border-border bg-transparent text-center text-muted-foreground"
+ style={{ borderRadius: 6, padding: '6px 12px', fontSize: 12, opacity: onAddProperty ? 1 : 0.5, cursor: onAddProperty ? 'pointer' : 'not-allowed' }}
+ disabled={!onAddProperty}
+ onClick={() => { setShowForm(true); setTimeout(() => keyInputRef.current?.focus(), 0) }}
+ >
+ + Link existing
+ </button>
+ )}
+ </div>
+ )
+}
+
+function useBacklinks(entry: VaultEntry | null, entries: VaultEntry[], allContent: Record<string, string>): VaultEntry[] {
+ return useMemo(() => {
+ if (!entry) return []
+ const title = entry.title
+ const stem = entry.filename.replace(/\.md$/, '')
+ const targets = [title, ...entry.aliases]
+ const pathStem = entry.path.replace(/^.*\/Laputa\//, '').replace(/\.md$/, '')
+
+ return entries.filter((e) => {
+ if (e.path === entry.path) return false
+ const content = allContent[e.path]
+ Iif (!content) return false
+ for (const t of targets) {
+ Eif (content.includes(`[[${t}]]`)) return true
+ }
+ if (content.includes(`[[${stem}]]`)) return true
+ if (content.includes(`[[${pathStem}]]`)) return true
+ if (content.includes(`[[${pathStem}|`)) return true
+ return false
+ })
+ }, [entry, entries, allContent])
+}
+
+function BacklinksPanel({ backlinks, onNavigate }: { backlinks: VaultEntry[]; onNavigate: (target: string) => void }) {
+ return (
+ <div>
+ <h4 className="font-mono-overline mb-2 text-muted-foreground">
+ Backlinks {backlinks.length > 0 && <span className="ml-1" style={{ fontWeight: 400 }}>{backlinks.length}</span>}
+ </h4>
+ {backlinks.length === 0 ? (
+ <p className="m-0 text-[13px] text-muted-foreground">No backlinks</p>
+ ) : (
+ <div className="flex flex-col gap-0.5">
+ {backlinks.map((e) => {
+ const color = e.isA ? getTypeColor(e.isA) : 'var(--accent-blue)'
+ const TypeIcon = getTypeIcon(e.isA ?? undefined)
+ const isDimmed = e.archived || e.trashed
+ return (
+ <button
+ key={e.path}
+ className="flex items-center justify-between gap-2 border-none bg-transparent p-0 py-1 text-left text-[13px] cursor-pointer hover:opacity-80"
+ style={{ color: isDimmed ? 'var(--muted-foreground)' : color, opacity: isDimmed ? 0.7 : 1 }}
+ onClick={() => onNavigate(e.title)}
+ title={e.trashed ? 'Trashed' : e.archived ? 'Archived' : undefined}
+ >
+ <span className="flex items-center gap-1 flex-1 truncate">
+ {e.trashed && <Trash size={12} className="shrink-0" />}
+ {e.title}
+ {e.trashed && <span style={{ fontSize: 10, opacity: 0.8 }}>(trashed)</span>}
+ {e.archived && !e.trashed && <span style={{ marginLeft: 4, fontSize: 10, opacity: 0.8 }}>(archived)</span>}
+ </span>
+ {e.isA && <TypeIcon width={14} height={14} className="shrink-0" style={{ color: isDimmed ? 'var(--muted-foreground)' : color }} />}
+ </button>
+ )
+ })}
+ </div>
+ )}
+ </div>
+ )
+}
+
+function formatRelativeDate(timestamp: number): string {
+ const now = Math.floor(Date.now() / 1000)
+ const diff = now - timestamp
+ Iif (diff < 86400) return 'today'
+ const days = Math.floor(diff / 86400)
+ Iif (days === 1) return 'yesterday'
+ Eif (days < 30) return `${days}d ago`
+ const months = Math.floor(days / 30)
+ if (months === 1) return '1mo ago'
+ return `${months}mo ago`
+}
+
+function GitHistoryPanel({ commits, onViewCommitDiff }: { commits: GitCommit[]; onViewCommitDiff?: (commitHash: string) => void }) {
+ return (
+ <div>
+ <h4 className="font-mono-overline mb-2 text-muted-foreground">History</h4>
+ {commits.length === 0 ? (
+ <p className="m-0 text-[13px] text-muted-foreground">No revision history</p>
+ ) : (
+ <div className="flex flex-col gap-2.5">
+ {commits.map((c) => (
+ <div key={c.hash} style={{ borderLeft: '2px solid var(--border)', paddingLeft: 10 }}>
+ <div className="mb-0.5 flex items-center justify-between">
+ <button
+ className="border-none bg-transparent p-0 font-mono text-primary cursor-pointer hover:underline"
+ style={{ fontSize: 11 }}
+ onClick={() => onViewCommitDiff?.(c.hash)}
+ title={`View diff for ${c.shortHash}`}
+ >
+ {c.shortHash}
+ </button>
+ <span className="text-muted-foreground" style={{ fontSize: 10 }}>{formatRelativeDate(c.date)}</span>
+ </div>
+ <div className="truncate text-xs text-secondary-foreground">{c.message}</div>
+ {c.author && (
+ <div className="truncate text-muted-foreground" style={{ fontSize: 10, marginTop: 1 }}>{c.author}</div>
+ )}
+ </div>
+ ))}
+ </div>
+ )}
+ </div>
+ )
+}
+
+function EmptyInspector() {
+ return (
+ <>
+ <div>
+ <p className="m-0 text-[13px] text-muted-foreground">No note selected</p>
+ </div>
+ <div>
+ <p className="m-0 text-[13px] text-muted-foreground">No relationships</p>
+ </div>
+ <div>
+ <h4 className="font-mono-overline mb-2 text-muted-foreground">Backlinks</h4>
+ <p className="m-0 text-[13px] text-muted-foreground">No backlinks</p>
+ </div>
+ <div>
+ <h4 className="font-mono-overline mb-2 text-muted-foreground">History</h4>
+ <p className="m-0 text-[13px] text-muted-foreground">No revision history</p>
+ </div>
+ </>
+ )
+}
+
+export function Inspector({
+ collapsed, onToggle, entry, content, entries, allContent, gitHistory, onNavigate,
+ onViewCommitDiff, onUpdateFrontmatter, onDeleteProperty, onAddProperty,
+}: InspectorProps) {
+ const backlinks = useBacklinks(entry, entries, allContent)
+ const frontmatter = useMemo(() => parseFrontmatter(content), [content])
+
+ const handleUpdateProperty = useCallback((key: string, value: FrontmatterValue) => {
+ if (entry && onUpdateFrontmatter) onUpdateFrontmatter(entry.path, key, value)
+ }, [entry, onUpdateFrontmatter])
+
+ const handleDeleteProperty = useCallback((key: string) => {
+ if (entry && onDeleteProperty) onDeleteProperty(entry.path, key)
+ }, [entry, onDeleteProperty])
+
+ const handleAddProperty = useCallback((key: string, value: FrontmatterValue) => {
+ if (entry && onAddProperty) onAddProperty(entry.path, key, value)
+ }, [entry, onAddProperty])
+
+ return (
+ <aside className={cn(
+ "flex flex-1 flex-col overflow-y-auto border-l border-border bg-background text-foreground transition-[width] duration-200",
+ collapsed && "!w-10 !min-w-10"
+ )}>
+ <div className="flex items-center border-b border-border" style={{ height: 45, padding: '0 12px', gap: 8 }} data-tauri-drag-region>
+ {collapsed ? (
+ <button className="shrink-0 border-none bg-transparent p-1 text-muted-foreground cursor-pointer hover:text-foreground" onClick={onToggle} style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}>
+ <SlidersHorizontal size={16} />
+ </button>
+ ) : (
+ <>
+ <SlidersHorizontal size={16} className="shrink-0 text-muted-foreground" />
+ <span className="flex-1 text-muted-foreground" style={{ fontSize: 13, fontWeight: 600 }}>Properties</span>
+ <button className="shrink-0 border-none bg-transparent p-1 text-muted-foreground cursor-pointer hover:text-foreground" onClick={onToggle} style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}>
+ <X size={16} />
+ </button>
+ </>
+ )}
+ </div>
+ {!collapsed && (
+ <div className="flex flex-col gap-4 p-3">
+ {entry ? (
+ <>
+ <DynamicPropertiesPanel
+ entry={entry} content={content} frontmatter={frontmatter}
+ onUpdateProperty={onUpdateFrontmatter ? handleUpdateProperty : undefined}
+ onDeleteProperty={onDeleteProperty ? handleDeleteProperty : undefined}
+ onAddProperty={onAddProperty ? handleAddProperty : undefined}
+ onNavigate={onNavigate}
+ />
+ <DynamicRelationshipsPanel frontmatter={frontmatter} entries={entries} onNavigate={onNavigate} onAddProperty={onAddProperty ? handleAddProperty : undefined} />
+ <BacklinksPanel backlinks={backlinks} onNavigate={onNavigate} />
+ <GitHistoryPanel commits={gitHistory} onViewCommitDiff={onViewCommitDiff} />
+ </>
+ ) : (
+ <EmptyInspector />
+ )}
+ </div>
+ )}
+ </aside>
+ )
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 +497 +498 +499 +500 +501 +502 +503 +504 +505 +506 +507 +508 +509 +510 +511 +512 +513 +514 +515 +516 +517 +518 +519 +520 +521 +522 +523 +524 +525 +526 +527 +528 +529 +530 +531 +532 +533 +534 +535 +536 +537 +538 +539 +540 +541 +542 +543 +544 +545 +546 +547 +548 +549 +550 +551 +552 +553 +554 +555 +556 +557 +558 +559 +560 +561 +562 +563 +564 +565 +566 +567 +568 +569 +570 +571 +572 +573 +574 +575 +576 +577 +578 +579 +580 +581 +582 +583 +584 +585 +586 +587 +588 +589 +590 +591 +592 +593 +594 +595 +596 +597 +598 +599 +600 +601 +602 +603 +604 +605 +606 +607 +608 +609 +610 +611 +612 +613 +614 +615 +616 +617 +618 +619 +620 +621 +622 +623 +624 +625 +626 +627 +628 +629 +630 +631 +632 +633 +634 +635 +636 +637 +638 +639 +640 +641 +642 +643 +644 +645 +646 +647 +648 +649 +650 +651 +652 +653 +654 +655 +656 +657 +658 +659 +660 +661 +662 +663 +664 +665 +666 +667 +668 +669 +670 +671 +672 +673 +674 +675 +676 +677 +678 +679 +680 +681 +682 +683 +684 +685 +686 +687 +688 +689 +690 +691 +692 +693 +694 +695 +696 +697 +698 +699 +700 +701 +702 | + + + + + + + + + + + + + +2x + + + + + + + + + + + +118x +118x + + + + + + + + + + + + + + + + + + +118x +116x +116x +116x + + + +116x +116x +116x +116x +112x +112x + + + +266x + + + +43x +43x +43x +12x +12x +12x + + + + +5x + + +5x +5x +5x +25x +25x +20x +20x +20x + + +5x + + + +78x + + + + +2x + + + + + + +2x + + + + + + + +66x + +58x + +4x + +13x + +2x +5x +5x +5x +1x + + + + +2x + + +33x +33x +33x + +33x + + + + +3x +3x + + + + +6x +6x +6x + +6x +28x +22x +22x +1x +1x + +1x +1x + + + + + + + + + + + +29x +29x +12x +13x + + + + + + + + +6x +6x +6x + + +6x + + + + + + + +6x +6x + + + + +6x +28x + +6x + + +6x + + +28x + + + + +6x + + +6x +6x + + + + +6x +6x +5x + +6x +5x +5x +5x + + + + +6x +28x + +6x + + +6x +1x + +6x + +6x + + + +67x + +61x + +81x + + + +7x + +40x + + + +22x + + + +2x +11x + + + + + + + + + + + + + +67x +67x + +67x +46x + + + +4x +4x + + +67x + + + + + + +4x + + + + +73x + + + + + + + + +16x + + + + + + + +3x +3x +3x + + + + + + + + + + + + + + + + + +55x +55x +55x +55x + +55x +55x +55x + +55x +3x +3x +3x +3x + + + +55x +2x +2x +2x +1x +2x + + + + +55x +47x +47x +141x + +47x + + + +55x +47x +3x +15x + + +55x +47x + + + +55x +47x + + + +55x + +55x +49x + + + +55x + +55x +50x + + + +55x +48x + + + + + + + + + + + +55x +50x +5x +8x + + +55x +109x +109x +109x +109x +109x +109x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +55x +9x +9x +9x +9x +9x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +17x +17x +17x +17x + + + + + + + +2x + + + + + + + + + + + + + + + + + + + + + + + +18x + + + + + + + + +55x + + + + + + + + + + + + + + + + + + + + + + + + +2x + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + +9x +9x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +91x + + + + + + + + +2x + | import { useState, useMemo, useCallback, useEffect, useRef, memo } from 'react'
+// Virtuoso removed — flat list rendering used instead
+import type { VaultEntry, SidebarSelection, ModifiedFile } from '../types'
+import { cn } from '@/lib/utils'
+import { Input } from '@/components/ui/input'
+import {
+ MagnifyingGlass, Plus, Wrench, Flask, Target, ArrowsClockwise,
+ Users, CalendarBlank, Tag, FileText, CaretDown, CaretRight, StackSimple,
+ ArrowsDownUp, Check, Warning,
+} from '@phosphor-icons/react'
+import type { ComponentType, SVGAttributes } from 'react'
+import { getTypeColor, getTypeLightColor } from '../utils/typeColors'
+import { resolveIcon } from './TypeCustomizePopover'
+
+const TYPE_ICON_MAP: Record<string, ComponentType<SVGAttributes<SVGSVGElement>>> = {
+ Project: Wrench,
+ Experiment: Flask,
+ Responsibility: Target,
+ Procedure: ArrowsClockwise,
+ Person: Users,
+ Event: CalendarBlank,
+ Topic: Tag,
+ Type: StackSimple,
+}
+
+function getTypeIcon(isA: string | null, customIcon?: string | null): ComponentType<SVGAttributes<SVGSVGElement>> {
+ Iif (customIcon) return resolveIcon(customIcon)
+ return (isA && TYPE_ICON_MAP[isA]) || FileText
+}
+
+interface NoteListProps {
+ entries: VaultEntry[]
+ selection: SidebarSelection
+ selectedNote: VaultEntry | null
+ allContent: Record<string, string>
+ modifiedFiles?: ModifiedFile[]
+ onSelectNote: (entry: VaultEntry) => void
+ onCreateNote: () => void
+}
+
+interface RelationshipGroup {
+ label: string
+ entries: VaultEntry[]
+}
+
+function relativeDate(ts: number | null): string {
+ if (!ts) return ''
+ const now = Math.floor(Date.now() / 1000)
+ const diff = now - ts
+ Iif (diff < 0) {
+ const date = new Date(ts * 1000)
+ return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+ }
+ Iif (diff < 60) return 'just now'
+ Iif (diff < 3600) return `${Math.floor(diff / 60)}m ago`
+ Iif (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
+ if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`
+ const date = new Date(ts * 1000)
+ return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}
+
+function getDisplayDate(entry: VaultEntry): number | null {
+ return entry.modifiedAt ?? entry.createdAt
+}
+
+function refsMatch(refs: string[], entry: VaultEntry): boolean {
+ const stem = entry.path.replace(/^.*\/Laputa\//, '').replace(/\.md$/, '')
+ const fileStem = entry.filename.replace(/\.md$/, '')
+ return refs.some((ref) => {
+ const raw = ref.replace(/^\[\[/, '').replace(/\]\]$/, '')
+ const inner = raw.split('|')[0]
+ return inner === stem || inner.split('/').pop() === fileStem
+ })
+}
+
+function resolveRefs(refs: string[], entries: VaultEntry[]): VaultEntry[] {
+ return refs
+ .map((ref) => {
+ // Strip [[ ]] and remove alias (|display text) if present
+ const raw = ref.replace(/^\[\[/, '').replace(/\]\]$/, '')
+ const inner = raw.split('|')[0]
+ return entries.find((e) => {
+ const stem = e.path.replace(/^.*\/Laputa\//, '').replace(/\.md$/, '')
+ if (stem === inner) return true
+ const fileStem = e.filename.replace(/\.md$/, '')
+ Iif (fileStem === inner.split('/').pop()) return true
+ return false
+ })
+ })
+ .filter((e): e is VaultEntry => e !== undefined)
+}
+
+export function sortByModified(a: VaultEntry, b: VaultEntry): number {
+ return (getDisplayDate(b) ?? 0) - (getDisplayDate(a) ?? 0)
+}
+
+export type SortOption = 'modified' | 'created' | 'title' | 'status'
+
+export const SORT_OPTIONS: { value: SortOption; label: string }[] = [
+ { value: 'modified', label: 'Modified' },
+ { value: 'created', label: 'Created' },
+ { value: 'title', label: 'Title' },
+ { value: 'status', label: 'Status' },
+]
+
+const STATUS_ORDER: Record<string, number> = {
+ Active: 0,
+ Paused: 1,
+ Done: 2,
+ Finished: 3,
+}
+
+export function getSortComparator(option: SortOption): (a: VaultEntry, b: VaultEntry) => number {
+ switch (option) {
+ case 'modified':
+ return sortByModified
+ case 'created':
+ return (a, b) => (b.createdAt ?? b.modifiedAt ?? 0) - (a.createdAt ?? a.modifiedAt ?? 0)
+ case 'title':
+ return (a, b) => a.title.localeCompare(b.title)
+ case 'status':
+ return (a, b) => {
+ const sa = STATUS_ORDER[a.status ?? ''] ?? 999
+ const sb = STATUS_ORDER[b.status ?? ''] ?? 999
+ if (sa !== sb) return sa - sb
+ return sortByModified(a, b)
+ }
+ }
+}
+
+const SORT_STORAGE_KEY = 'laputa-sort-preferences'
+
+function loadSortPreferences(): Record<string, SortOption> {
+ try {
+ const raw = localStorage.getItem(SORT_STORAGE_KEY)
+ return raw ? JSON.parse(raw) : {}
+ } catch {
+ return {}
+ }
+}
+
+function saveSortPreferences(prefs: Record<string, SortOption>) {
+ try {
+ localStorage.setItem(SORT_STORAGE_KEY, JSON.stringify(prefs))
+ } catch { /* ignore */ }
+}
+
+function findBacklinks(entity: VaultEntry, allEntries: VaultEntry[], allContent: Record<string, string>): VaultEntry[] {
+ const stem = entity.filename.replace(/\.md$/, '')
+ const pathStem = entity.path.replace(/^.*\/Laputa\//, '').replace(/\.md$/, '')
+ const targets = [entity.title, ...entity.aliases]
+
+ return allEntries.filter((e) => {
+ if (e.path === entity.path) return false
+ const content = allContent[e.path]
+ if (!content) return false
+ for (const t of targets) {
+ Iif (content.includes(`[[${t}]]`)) return true
+ }
+ Iif (content.includes(`[[${stem}]]`)) return true
+ Eif (content.includes(`[[${pathStem}]]`)) return true
+ if (content.includes(`[[${pathStem}|`)) return true
+ return false
+ })
+}
+
+function addGroup(
+ groups: RelationshipGroup[],
+ label: string,
+ entries: VaultEntry[],
+ seen: Set<string>,
+) {
+ const unseen = entries.filter((e) => !seen.has(e.path))
+ if (unseen.length > 0) {
+ groups.push({ label, entries: unseen })
+ unseen.forEach((e) => seen.add(e.path))
+ }
+}
+
+export function buildRelationshipGroups(
+ entity: VaultEntry,
+ allEntries: VaultEntry[],
+ allContent: Record<string, string>,
+): RelationshipGroup[] {
+ const groups: RelationshipGroup[] = []
+ const seen = new Set<string>([entity.path])
+ const rels = entity.relationships ?? {}
+
+ // 0. "Instances" — for type documents, show all entries of this type
+ Iif (entity.isA === 'Type') {
+ const instances = allEntries
+ .filter((e) => e.isA === entity.title && !seen.has(e.path))
+ .sort(sortByModified)
+ addGroup(groups, 'Instances', instances, seen)
+ }
+
+ // 1. "Has" — from the entity's own relationships map
+ const hasRefs = rels['Has'] ?? []
+ Iif (hasRefs.length > 0) {
+ addGroup(groups, 'Has', resolveRefs(hasRefs, allEntries).sort(sortByModified), seen)
+ }
+
+ // 2. Children — entries whose belongsTo points to this entity (reverse lookup, excluding events)
+ const children = allEntries
+ .filter((e) => !seen.has(e.path) && e.isA !== 'Event' && refsMatch(e.belongsTo, entity))
+ .sort(sortByModified)
+ addGroup(groups, 'Children', children, seen)
+
+ // 3. Events — entities of type Event that reference this entity via belongsTo/relatedTo
+ const events = allEntries
+ .filter(
+ (e) =>
+ !seen.has(e.path) &&
+ e.isA === 'Event' &&
+ (refsMatch(e.belongsTo, entity) || refsMatch(e.relatedTo, entity))
+ )
+ .sort(sortByModified)
+ addGroup(groups, 'Events', events, seen)
+
+ // 4. "Topics" — from the entity's own relationships map
+ const topicRefs = rels['Topics'] ?? []
+ Iif (topicRefs.length > 0) {
+ addGroup(groups, 'Topics', resolveRefs(topicRefs, allEntries).sort(sortByModified), seen)
+ }
+
+ // 5. All other generic relationship fields (alphabetically)
+ const handledKeys = new Set(['Has', 'Topics'])
+ const otherKeys = Object.keys(rels)
+ .filter((k) => !handledKeys.has(k) && k.toLowerCase() !== 'type')
+ .sort((a, b) => a.localeCompare(b))
+ for (const key of otherKeys) {
+ const refs = rels[key]
+ Eif (refs && refs.length > 0) {
+ addGroup(groups, key, resolveRefs(refs, allEntries).sort(sortByModified), seen)
+ }
+ }
+
+ // 6. Referenced By — entries that reference this entity via relatedTo (reverse lookup)
+ const referencedBy = allEntries
+ .filter((e) => !seen.has(e.path) && e.isA !== 'Event' && refsMatch(e.relatedTo, entity))
+ .sort(sortByModified)
+ addGroup(groups, 'Referenced By', referencedBy, seen)
+
+ // 7. Backlinks — always last
+ const backlinks = findBacklinks(entity, allEntries, allContent)
+ .filter((e) => !seen.has(e.path))
+ .sort(sortByModified)
+ addGroup(groups, 'Backlinks', backlinks, seen)
+
+ return groups
+}
+
+export function filterEntries(entries: VaultEntry[], selection: SidebarSelection, _modifiedFiles?: ModifiedFile[]): VaultEntry[] {
+ switch (selection.kind) {
+ case 'filter':
+ switch (selection.filter) {
+ case 'all':
+ return entries.filter((e) => !e.archived && !e.trashed)
+ case 'favorites':
+ return []
+ case 'archived':
+ return entries.filter((e) => e.archived && !e.trashed)
+ case 'trash':
+ return entries.filter((e) => e.trashed)
+ }
+ break
+ case 'sectionGroup':
+ return entries.filter((e) => e.isA === selection.type && !e.archived && !e.trashed)
+ case 'entity':
+ return []
+ case 'topic': {
+ const topic = selection.entry
+ return entries.filter((e) => refsMatch(e.relatedTo, topic) && !e.archived && !e.trashed)
+ }
+ }
+}
+
+function SortDropdown({
+ groupLabel,
+ current,
+ onChange,
+}: {
+ groupLabel: string
+ current: SortOption
+ onChange: (groupLabel: string, option: SortOption) => void
+}) {
+ const [open, setOpen] = useState(false)
+ const ref = useRef<HTMLDivElement>(null)
+
+ useEffect(() => {
+ if (!open) return
+ function handleClick(e: MouseEvent) {
+ if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+ }
+ document.addEventListener('mousedown', handleClick)
+ return () => document.removeEventListener('mousedown', handleClick)
+ }, [open])
+
+ return (
+ <div ref={ref} className="relative" style={{ zIndex: open ? 10 : 0 }}>
+ <button
+ className={cn(
+ "flex items-center gap-0.5 rounded px-1 py-0.5 text-muted-foreground transition-colors hover:text-foreground hover:bg-accent",
+ open && "bg-accent text-foreground"
+ )}
+ onClick={(e) => { e.stopPropagation(); setOpen(!open) }}
+ title={`Sort by ${current}`}
+ data-testid={`sort-button-${groupLabel}`}
+ >
+ <ArrowsDownUp size={12} />
+ <span className="text-[10px] font-medium">{SORT_OPTIONS.find((o) => o.value === current)?.label}</span>
+ </button>
+ {open && (
+ <div
+ className="absolute right-0 top-full mt-1 rounded-md border border-border bg-popover shadow-md"
+ style={{ width: 130, padding: 4 }}
+ data-testid={`sort-menu-${groupLabel}`}
+ >
+ {SORT_OPTIONS.map((opt) => (
+ <button
+ key={opt.value}
+ className={cn(
+ "flex w-full items-center gap-1.5 rounded px-2 text-[12px] text-popover-foreground hover:bg-accent",
+ opt.value === current && "bg-accent font-medium"
+ )}
+ style={{ height: 28, border: 'none', cursor: 'pointer', background: opt.value === current ? 'var(--accent)' : 'transparent' }}
+ onClick={(e) => {
+ e.stopPropagation()
+ onChange(groupLabel, opt.value)
+ setOpen(false)
+ }}
+ data-testid={`sort-option-${opt.value}`}
+ >
+ {opt.value === current
+ ? <Check size={12} />
+ : <span style={{ width: 12, height: 12, display: 'inline-block' }} />
+ }
+ {opt.label}
+ </button>
+ ))}
+ </div>
+ )}
+ </div>
+ )
+}
+
+function NoteListInner({ entries, selection, selectedNote, allContent, modifiedFiles, onSelectNote, onCreateNote }: NoteListProps) {
+ const [search, setSearch] = useState('')
+ const [searchVisible, setSearchVisible] = useState(false)
+ const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set())
+ const [sortPrefs, setSortPrefs] = useState<Record<string, SortOption>>(loadSortPreferences)
+
+ const isEntityView = selection.kind === 'entity'
+ const isSectionGroup = selection.kind === 'sectionGroup'
+ const isTrashView = selection.kind === 'filter' && selection.filter === 'trash'
+
+ const handleSortChange = useCallback((groupLabel: string, option: SortOption) => {
+ setSortPrefs((prev) => {
+ const next = { ...prev, [groupLabel]: option }
+ saveSortPreferences(next)
+ return next
+ })
+ }, [])
+
+ const toggleGroup = useCallback((label: string) => {
+ setCollapsedGroups((prev) => {
+ const next = new Set(prev)
+ if (next.has(label)) next.delete(label)
+ else next.add(label)
+ return next
+ })
+ }, [])
+
+ // Build type entry map for custom icon/color lookup
+ const typeEntryMap = useMemo(() => {
+ const map: Record<string, VaultEntry> = {}
+ for (const e of entries) {
+ Iif (e.isA === 'Type') map[e.title] = e
+ }
+ return map
+ }, [entries])
+
+ // Find the type document for this section group (e.g., type/project.md for "Project")
+ const typeDocument = useMemo(() => {
+ if (!isSectionGroup) return null
+ const typeName = (selection as { kind: 'sectionGroup'; type: string }).type
+ return entries.find((e) => e.isA === 'Type' && e.title === typeName) ?? null
+ }, [isSectionGroup, selection, entries])
+
+ const entityGroups = useMemo(
+ () => isEntityView ? buildRelationshipGroups(selection.entry, entries, allContent) : [],
+ [isEntityView, selection, entries, allContent]
+ )
+
+ const filtered = useMemo(
+ () => isEntityView ? [] : filterEntries(entries, selection, modifiedFiles),
+ [entries, selection, modifiedFiles, isEntityView]
+ )
+
+ const listSort = sortPrefs['__list__'] ?? 'modified'
+
+ const sorted = useMemo(
+ () => isEntityView ? [] : [...filtered].sort(getSortComparator(listSort)),
+ [filtered, isEntityView, listSort]
+ )
+
+ const query = search.trim().toLowerCase()
+
+ const searched = useMemo(
+ () => query ? sorted.filter((e) => e.title.toLowerCase().includes(query)) : sorted,
+ [sorted, query]
+ )
+
+ const searchedGroups = useMemo(
+ () => query
+ ? entityGroups
+ .map((g) => ({
+ ...g,
+ entries: g.entries.filter((e) => e.title.toLowerCase().includes(query)),
+ }))
+ .filter((g) => g.entries.length > 0)
+ : entityGroups,
+ [entityGroups, query]
+ )
+
+
+ const expiredTrashCount = useMemo(() => {
+ if (!isTrashView) return 0
+ const now = Date.now() / 1000
+ return searched.filter((e) => e.trashedAt && (now - e.trashedAt) >= 86400 * 30).length
+ }, [isTrashView, searched])
+
+ const renderItem = useCallback((entry: VaultEntry, isPinned = false) => {
+ const isSelected = selectedNote?.path === entry.path && !isPinned
+ const te = typeEntryMap[entry.isA ?? '']
+ const typeColor = getTypeColor(entry.isA ?? 'Note', te?.color)
+ const typeLightColor = getTypeLightColor(entry.isA ?? 'Note', te?.color)
+ const TypeIcon = getTypeIcon(entry.isA, te?.icon)
+ return (
+ <div
+ key={entry.path}
+ className={cn(
+ "relative cursor-pointer border-b border-[var(--border)] transition-colors",
+ isPinned && "border-l-[3px] border-l-[var(--accent-green)] bg-muted",
+ isSelected && "border-l-[3px]",
+ !isPinned && !isSelected && "hover:bg-muted"
+ )}
+ style={{
+ padding: isPinned || isSelected ? '14px 16px 14px 13px' : '14px 16px',
+ ...(isSelected && {
+ borderLeftColor: typeColor,
+ backgroundColor: typeLightColor,
+ }),
+ }}
+ onClick={() => onSelectNote(entry)}
+ >
+ <TypeIcon
+ width={14}
+ height={14}
+ className="absolute right-3 top-2.5"
+ style={{ color: typeColor }}
+ data-testid="type-icon"
+ />
+ <div className="pr-5">
+ <div className={cn(
+ "truncate text-[13px] text-foreground",
+ isSelected ? "font-semibold" : "font-medium"
+ )}>
+ {entry.title}
+ {entry.archived && (
+ <span
+ className="ml-1.5 inline-block align-middle text-muted-foreground"
+ style={{ fontSize: 9, fontWeight: 500, background: 'var(--muted)', borderRadius: 4, padding: '1px 4px', verticalAlign: 'middle' }}
+ >
+ ARCHIVED
+ </span>
+ )}
+ {entry.trashed && (
+ <span
+ className="ml-1.5 inline-block align-middle"
+ style={{ fontSize: 9, fontWeight: 500, background: 'var(--destructive-light, #ef44441a)', color: 'var(--destructive)', borderRadius: 4, padding: '1px 4px', verticalAlign: 'middle' }}
+ >
+ TRASHED
+ </span>
+ )}
+ </div>
+ </div>
+ <div className="mt-0.5 text-[12px] leading-[1.5] text-muted-foreground" style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+ {entry.snippet}
+ </div>
+ <div className="mt-0.5 text-[10px] text-muted-foreground" style={entry.trashed && entry.trashedAt && (Date.now() / 1000 - entry.trashedAt) >= 86400 * 30 ? { color: 'var(--destructive)', fontWeight: 500 } : undefined}>
+ {entry.trashed && entry.trashedAt
+ ? `Trashed ${relativeDate(entry.trashedAt)}${(Date.now() / 1000 - entry.trashedAt) >= 86400 * 30 ? ' — will be permanently deleted' : ''}`
+ : relativeDate(getDisplayDate(entry))}
+ </div>
+ </div>
+ )
+ }, [selectedNote?.path, onSelectNote, typeEntryMap])
+
+ const renderPinnedView = useCallback((entity: VaultEntry, groups: RelationshipGroup[]) => {
+ const ete = typeEntryMap[entity.isA ?? '']
+ const entityTypeColor = getTypeColor(entity.isA ?? '', ete?.color)
+ const entityLightColor = getTypeLightColor(entity.isA ?? '', ete?.color)
+ const EntityIcon = getTypeIcon(entity.isA, ete?.icon)
+ return (
+ <div className="h-full overflow-y-auto">
+ {/* Prominent card */}
+ <div
+ className="relative cursor-pointer border-b border-[var(--border)]"
+ style={{ backgroundColor: entityLightColor, padding: '14px 16px' }}
+ onClick={() => onSelectNote(entity)}
+ >
+ <EntityIcon
+ width={16}
+ height={16}
+ className="absolute right-3 top-3.5"
+ style={{ color: entityTypeColor }}
+ data-testid="type-icon"
+ />
+ <div className="pr-6 text-[14px] font-bold" style={{ color: entityTypeColor }}>
+ {entity.title}
+ </div>
+ <div className="mt-1 text-[12px] leading-[1.5] opacity-80" style={{ color: entityTypeColor, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+ {entity.snippet}
+ </div>
+ <div className="mt-1 text-[11px] opacity-60" style={{ color: entityTypeColor }}>
+ {relativeDate(getDisplayDate(entity))}
+ </div>
+ </div>
+
+ {/* Relationship groups */}
+ {groups.length === 0 ? (
+ <div className="px-4 py-8 text-center text-[13px] text-muted-foreground">
+ {query ? 'No matching items' : 'No related items'}
+ </div>
+ ) : (
+ groups.map((group) => {
+ const isGroupCollapsed = collapsedGroups.has(group.label)
+ const groupSort = sortPrefs[group.label] ?? 'modified'
+ const sortedEntries = [...group.entries].sort(getSortComparator(groupSort))
+ return (
+ <div key={group.label}>
+ <div
+ className="flex w-full items-center justify-between bg-muted"
+ style={{ height: 32, padding: '0 16px' }}
+ >
+ <button
+ className="flex flex-1 items-center gap-1.5 border-none bg-transparent cursor-pointer p-0"
+ onClick={() => toggleGroup(group.label)}
+ >
+ <span className="font-mono-label text-muted-foreground">
+ {group.label}
+ </span>
+ <span className="font-mono-label text-muted-foreground" style={{ fontWeight: 400 }}>{group.entries.length}</span>
+ </button>
+ <span className="flex items-center gap-1.5">
+ <SortDropdown
+ groupLabel={group.label}
+ current={groupSort}
+ onChange={handleSortChange}
+ />
+ <button
+ className="flex items-center border-none bg-transparent cursor-pointer p-0 text-muted-foreground"
+ onClick={() => toggleGroup(group.label)}
+ >
+ {isGroupCollapsed
+ ? <CaretRight size={12} />
+ : <CaretDown size={12} />
+ }
+ </button>
+ </span>
+ </div>
+ {!isGroupCollapsed && sortedEntries.map((groupEntry) => renderItem(groupEntry))}
+ </div>
+ )
+ })
+ )}
+ </div>
+ )
+ }, [onSelectNote, query, collapsedGroups, toggleGroup, renderItem, typeEntryMap, sortPrefs, handleSortChange])
+
+ return (
+ <div className="flex flex-col overflow-hidden border-r border-border bg-card text-foreground" style={{ height: '100%' }}>
+ {/* Header */}
+ <div className="flex h-[45px] shrink-0 items-center justify-between border-b border-border px-4" data-tauri-drag-region style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}>
+ <h3 className="m-0 min-w-0 flex-1 truncate text-[14px] font-semibold">
+ {isEntityView
+ ? selection.entry.title
+ : typeDocument
+ ? typeDocument.title
+ : selection.kind === 'filter' && (selection as { filter: string }).filter === 'archived'
+ ? 'Archive'
+ : selection.kind === 'filter' && (selection as { filter: string }).filter === 'trash'
+ ? 'Trash'
+ : 'Notes'}
+ </h3>
+ <div className="flex items-center gap-3" style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}>
+ {!isEntityView && (
+ <SortDropdown
+ groupLabel="__list__"
+ current={listSort}
+ onChange={handleSortChange}
+ />
+ )}
+ <button
+ className="flex items-center text-muted-foreground transition-colors hover:text-foreground"
+ onClick={() => { setSearchVisible(!searchVisible); Iif (searchVisible) setSearch('') }}
+ title="Search notes"
+ >
+ <MagnifyingGlass size={16} />
+ </button>
+ <button
+ className="flex items-center text-muted-foreground transition-colors hover:text-foreground"
+ onClick={onCreateNote}
+ title="Create new note"
+ >
+ <Plus size={16} />
+ </button>
+ </div>
+ </div>
+
+ {/* Search (toggle on icon click) */}
+ {searchVisible && (
+ <div className="border-b border-border px-3 py-2">
+ <Input
+ placeholder="Search notes..."
+ value={search}
+ onChange={(e) => setSearch(e.target.value)}
+ className="h-8 text-[13px]"
+ autoFocus
+ />
+ </div>
+ )}
+
+ {/* Items */}
+ <div className="flex-1 overflow-hidden" style={{ minHeight: 0 }}>
+ {isEntityView ? (() => {
+ const entity = selection.entry
+ return renderPinnedView(entity, searchedGroups)
+ })() : (
+ <div className="h-full overflow-y-auto">
+ {/* Type document pinned card (for sectionGroup view) */}
+ {typeDocument && (() => {
+ const tde = typeEntryMap[typeDocument.title] ?? typeDocument
+ const tdColor = getTypeColor(typeDocument.isA ?? 'Type', tde?.color)
+ const tdLightColor = getTypeLightColor(typeDocument.isA ?? 'Type', tde?.color)
+ const TDIcon = getTypeIcon(typeDocument.isA, tde?.icon)
+ return (
+ <div
+ className="relative cursor-pointer border-b border-[var(--border)]"
+ style={{ backgroundColor: tdLightColor, padding: '14px 16px' }}
+ onClick={() => onSelectNote(typeDocument)}
+ >
+ <TDIcon
+ width={16}
+ height={16}
+ className="absolute right-3 top-3.5"
+ style={{ color: tdColor }}
+ data-testid="type-icon"
+ />
+ <div className="pr-6 text-[14px] font-bold" style={{ color: tdColor }}>
+ {typeDocument.title}
+ </div>
+ <div className="mt-1 text-[12px] leading-[1.5] opacity-80" style={{ color: tdColor, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+ {typeDocument.snippet}
+ </div>
+ </div>
+ )
+ })()}
+ {/* 30-day warning banner for trash view */}
+ {isTrashView && expiredTrashCount > 0 && (
+ <div
+ className="flex items-start gap-2 border-b border-[var(--border)]"
+ style={{ padding: '10px 12px', background: 'color-mix(in srgb, var(--destructive) 6%, transparent)' }}
+ >
+ <Warning size={16} className="shrink-0" style={{ color: 'var(--destructive)', marginTop: 1 }} />
+ <div>
+ <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--destructive)' }}>
+ Notes in trash for 30+ days will be permanently deleted
+ </div>
+ <div className="text-muted-foreground" style={{ fontSize: 11 }}>
+ {expiredTrashCount} {expiredTrashCount === 1 ? 'note is' : 'notes are'} past the 30-day retention period
+ </div>
+ </div>
+ </div>
+ )}
+ {searched.length === 0 ? (
+ <div className="px-4 py-8 text-center text-[13px] text-muted-foreground">
+ {isTrashView ? 'Trash is empty' : 'No notes found'}
+ </div>
+ ) : (
+ searched.map((entry) => renderItem(entry))
+ )}
+ </div>
+ )}
+ </div>
+ </div>
+ )
+}
+
+export const NoteList = memo(NoteListInner)
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +22x +22x +22x +22x + +22x +7x + + + + + + +22x +21x +21x + + + + + + + + + +22x +7x + + +22x +7x + + + + +22x +22x + + + + + + + + + + + + + + + + + + + + + + +22x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState, useRef, useEffect, useMemo } from 'react'
+import type { VaultEntry } from '../types'
+import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+
+interface QuickOpenPaletteProps {
+ open: boolean
+ entries: VaultEntry[]
+ onSelect: (entry: VaultEntry) => void
+ onClose: () => void
+}
+
+/** Simple fuzzy match: all query chars appear in order in the target */
+function fuzzyMatch(query: string, target: string): { match: boolean; score: number } {
+ const q = query.toLowerCase()
+ const t = target.toLowerCase()
+ let qi = 0
+ let score = 0
+ let lastMatchIndex = -1
+
+ for (let ti = 0; ti < t.length && qi < q.length; ti++) {
+ if (t[ti] === q[qi]) {
+ if (ti === lastMatchIndex + 1) score += 2
+ if (ti === 0 || t[ti - 1] === ' ' || t[ti - 1] === '-') score += 3
+ score += 1
+ lastMatchIndex = ti
+ qi++
+ }
+ }
+
+ return { match: qi === q.length, score }
+}
+
+export function QuickOpenPalette({ open, entries, onSelect, onClose }: QuickOpenPaletteProps) {
+ const [query, setQuery] = useState('')
+ const [selectedIndex, setSelectedIndex] = useState(0)
+ const inputRef = useRef<HTMLInputElement>(null)
+ const listRef = useRef<HTMLDivElement>(null)
+
+ useEffect(() => {
+ Iif (open) {
+ setQuery('')
+ setSelectedIndex(0)
+ setTimeout(() => inputRef.current?.focus(), 50)
+ }
+ }, [open])
+
+ const results = useMemo(() => {
+ Eif (!query.trim()) {
+ return [...entries].sort((a, b) => (b.modifiedAt ?? 0) - (a.modifiedAt ?? 0)).slice(0, 20)
+ }
+ return entries
+ .map((entry) => ({ entry, ...fuzzyMatch(query, entry.title) }))
+ .filter((r) => r.match)
+ .sort((a, b) => b.score - a.score)
+ .slice(0, 20)
+ .map((r) => r.entry)
+ }, [entries, query])
+
+ useEffect(() => {
+ setSelectedIndex(0)
+ }, [query])
+
+ useEffect(() => {
+ Eif (!listRef.current) return
+ const selected = listRef.current.children[selectedIndex] as HTMLElement | undefined
+ selected?.scrollIntoView({ block: 'nearest' })
+ }, [selectedIndex])
+
+ useEffect(() => {
+ Eif (!open) return
+ const handleKey = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ e.preventDefault()
+ onClose()
+ } else if (e.key === 'ArrowDown') {
+ e.preventDefault()
+ setSelectedIndex((i) => Math.min(i + 1, results.length - 1))
+ } else if (e.key === 'ArrowUp') {
+ e.preventDefault()
+ setSelectedIndex((i) => Math.max(i - 1, 0))
+ } else if (e.key === 'Enter') {
+ e.preventDefault()
+ if (results[selectedIndex]) {
+ onSelect(results[selectedIndex])
+ onClose()
+ }
+ }
+ }
+ window.addEventListener('keydown', handleKey)
+ return () => window.removeEventListener('keydown', handleKey)
+ }, [open, results, selectedIndex, onSelect, onClose])
+
+ Eif (!open) return null
+
+ return (
+ <div
+ className="fixed inset-0 z-[1000] flex justify-center bg-[var(--shadow-dialog)] pt-[15vh]"
+ onClick={onClose}
+ >
+ <div
+ className="flex w-[500px] max-w-[90vw] max-h-[400px] flex-col self-start overflow-hidden rounded-xl border border-[var(--border-dialog)] bg-popover shadow-[0_8px_32px_var(--shadow-dialog)]"
+ onClick={(e) => e.stopPropagation()}
+ >
+ <input
+ ref={inputRef}
+ className="border-b border-border bg-transparent px-4 py-3 text-[15px] text-foreground outline-none placeholder:text-muted-foreground"
+ type="text"
+ placeholder="Search notes..."
+ value={query}
+ onChange={(e) => setQuery(e.target.value)}
+ />
+ <div className="flex-1 overflow-y-auto py-1" ref={listRef}>
+ {results.length === 0 ? (
+ <div className="px-4 py-4 text-center text-[13px] text-muted-foreground">
+ No matching notes
+ </div>
+ ) : (
+ results.map((entry, i) => (
+ <div
+ key={entry.path}
+ className={cn(
+ "flex cursor-pointer items-center justify-between px-4 py-2 transition-colors",
+ i === selectedIndex ? "bg-accent" : "hover:bg-secondary"
+ )}
+ onClick={() => {
+ onSelect(entry)
+ onClose()
+ }}
+ onMouseEnter={() => setSelectedIndex(i)}
+ >
+ <span className="text-sm text-foreground">{entry.title}</span>
+ {entry.isA && (
+ <Badge variant="secondary" className="text-[11px]">
+ {entry.isA}
+ </Badge>
+ )}
+ </div>
+ ))
+ )}
+ </div>
+ </div>
+ </div>
+ )
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 | + + + + + + +67x +67x +67x +67x + +67x + + + + + + + + + + + +67x +22x + + + + + + + + + + + + + + + +22x + + + + + + + + + + + + + + + + +22x +22x +22x +22x +22x +22x + + + +67x + + + + + + + | import { useCallback, useEffect, useRef } from 'react'
+
+interface ResizeHandleProps {
+ onResize: (delta: number) => void
+}
+
+export function ResizeHandle({ onResize }: ResizeHandleProps) {
+ const isDragging = useRef(false)
+ const lastX = useRef(0)
+ const pendingDelta = useRef(0)
+ const rafId = useRef(0)
+
+ const handleMouseDown = useCallback(
+ (e: React.MouseEvent) => {
+ e.preventDefault()
+ isDragging.current = true
+ lastX.current = e.clientX
+ pendingDelta.current = 0
+ document.body.style.cursor = 'col-resize'
+ document.body.style.userSelect = 'none'
+ },
+ [],
+ )
+
+ useEffect(() => {
+ const handleMouseMove = (e: MouseEvent) => {
+ if (!isDragging.current) return
+ pendingDelta.current += e.clientX - lastX.current
+ lastX.current = e.clientX
+
+ if (!rafId.current) {
+ rafId.current = requestAnimationFrame(() => {
+ if (pendingDelta.current !== 0) {
+ onResize(pendingDelta.current)
+ pendingDelta.current = 0
+ }
+ rafId.current = 0
+ })
+ }
+ }
+
+ const handleMouseUp = () => {
+ if (isDragging.current) {
+ isDragging.current = false
+ document.body.style.cursor = ''
+ document.body.style.userSelect = ''
+ // Flush any pending delta
+ if (rafId.current) {
+ cancelAnimationFrame(rafId.current)
+ rafId.current = 0
+ }
+ if (pendingDelta.current !== 0) {
+ onResize(pendingDelta.current)
+ pendingDelta.current = 0
+ }
+ }
+ }
+
+ document.addEventListener('mousemove', handleMouseMove)
+ document.addEventListener('mouseup', handleMouseUp)
+ return () => {
+ document.removeEventListener('mousemove', handleMouseMove)
+ document.removeEventListener('mouseup', handleMouseUp)
+ Iif (rafId.current) cancelAnimationFrame(rafId.current)
+ }
+ }, [onResize])
+
+ return (
+ <div
+ className="-ml-1 w-1 shrink-0 cursor-col-resize bg-transparent transition-colors hover:bg-[var(--border)]"
+ onMouseDown={handleMouseDown}
+ />
+ )
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 +497 +498 +499 +500 +501 +502 +503 +504 +505 +506 +507 +508 +509 +510 +511 +512 +513 +514 +515 +516 +517 +518 +519 +520 +521 +522 +523 +524 +525 +526 +527 +528 +529 +530 +531 +532 +533 +534 +535 +536 +537 +538 +539 +540 +541 +542 +543 +544 +545 +546 +547 +548 +549 +550 +551 +552 +553 +554 +555 +556 +557 +558 +559 +560 +561 +562 +563 +564 +565 +566 +567 +568 +569 +570 +571 +572 +573 +574 +575 +576 +577 +578 +579 +580 +581 +582 +583 +584 +585 +586 +587 +588 +589 +590 +591 +592 +593 +594 +595 +596 +597 +598 +599 +600 +601 +602 +603 +604 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +2x + + + + + + + + + + + +2x + + + + + + + + + + +16x + +2x +74x +74x +74x +74x +74x +74x +74x +74x +74x + + +74x +43x +5x +1x +1x + + +5x +5x + + +74x +12x + + + +74x +51x +51x +246x + +51x + + +74x +960x +296x + + + + + + + +74x +51x +246x +4x +8x + + + + + + + + +74x +51x +408x +408x + + + + + + + + + +74x +51x +51x +848x +848x +848x +840x + + + + +74x + + + + +74x +448x + + + +441x + +74x + + + + + + + + + + + + + + + + +246x +246x + + +74x +37x + + + + + + + + + + + +74x +37x + + + + + + + + + +74x + + + + + + +74x + + + + + +74x + + + + + + + +74x + + + + + + + +74x +3702x +624x +624x +624x +624x +624x + +624x +3x +3x +1x + +2x + + + +624x + + + + + + + + + + +2x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +12x +12x + + + + + + + + + + + + +20x + + + + + + + + + + + + + + + +2x +2x + + + + + + + + + + + + + + + + + + + +624x + +624x + + + + + + +624x + + + + + + +74x + + + + + + + + +427x +148x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +5x + + + + + + + + + + + + + + + + + + + + + + + + + +72x + + + +4x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +595x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState, useMemo, useRef, useEffect, useCallback, memo, type ComponentType } from 'react'
+import type { VaultEntry, SidebarSelection } from '../types'
+import { cn } from '@/lib/utils'
+import { ChevronRight, ChevronDown, GitCommitHorizontal, Plus, SlidersHorizontal, GripVertical } from 'lucide-react'
+import { getTypeColor, getTypeLightColor } from '../utils/typeColors'
+import { resolveIcon, TypeCustomizePopover } from './TypeCustomizePopover'
+import { useSectionVisibility } from '../hooks/useSectionVisibility'
+import {
+ DndContext,
+ closestCenter,
+ KeyboardSensor,
+ PointerSensor,
+ useSensor,
+ useSensors,
+ type DragEndEvent,
+} from '@dnd-kit/core'
+import {
+ SortableContext,
+ sortableKeyboardCoordinates,
+ useSortable,
+ verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import {
+ FileText,
+ Star,
+ Wrench,
+ Flask,
+ Target,
+ ArrowsClockwise,
+ Users,
+ CalendarBlank,
+ Tag,
+ TagSimple,
+ Trash,
+ StackSimple,
+ Archive,
+ type IconProps,
+} from '@phosphor-icons/react'
+
+interface SidebarProps {
+ entries: VaultEntry[]
+ selection: SidebarSelection
+ onSelect: (selection: SidebarSelection) => void
+ onSelectNote?: (entry: VaultEntry) => void
+ onCreateType?: (type: string) => void
+ onCreateNewType?: () => void
+ onCustomizeType?: (typeName: string, icon: string, color: string) => void
+ onReorderSections?: (orderedTypes: { typeName: string; order: number }[]) => void
+ modifiedCount?: number
+ onCommitPush?: () => void
+}
+
+const TOP_NAV = [
+ { label: 'All Notes', filter: 'all' as const, Icon: FileText },
+ { label: 'Favorites', filter: 'favorites' as const, Icon: Star },
+]
+
+interface SectionGroup {
+ label: string
+ type: string
+ Icon: ComponentType<IconProps>
+ customColor?: string | null
+}
+
+const BUILT_IN_SECTION_GROUPS: SectionGroup[] = [
+ { label: 'Projects', type: 'Project', Icon: Wrench },
+ { label: 'Experiments', type: 'Experiment', Icon: Flask },
+ { label: 'Responsibilities', type: 'Responsibility', Icon: Target },
+ { label: 'Procedures', type: 'Procedure', Icon: ArrowsClockwise },
+ { label: 'People', type: 'Person', Icon: Users },
+ { label: 'Events', type: 'Event', Icon: CalendarBlank },
+ { label: 'Topics', type: 'Topic', Icon: Tag },
+ { label: 'Types', type: 'Type', Icon: StackSimple },
+]
+
+const BUILT_IN_TYPES = new Set(BUILT_IN_SECTION_GROUPS.map((s) => s.type))
+
+export const Sidebar = memo(function Sidebar({ entries, selection, onSelect, onSelectNote, onCreateType, onCreateNewType, onCustomizeType, onReorderSections, modifiedCount = 0, onCommitPush }: SidebarProps) {
+ const [collapsed, setCollapsed] = useState<Record<string, boolean>>({})
+ const [customizeTarget, setCustomizeTarget] = useState<string | null>(null)
+ const [contextMenuPos, setContextMenuPos] = useState<{ x: number; y: number } | null>(null)
+ const [contextMenuType, setContextMenuType] = useState<string | null>(null)
+ const contextMenuRef = useRef<HTMLDivElement>(null)
+ const popoverRef = useRef<HTMLDivElement>(null)
+ const [showCustomize, setShowCustomize] = useState(false)
+ const customizeRef = useRef<HTMLDivElement>(null)
+ const { toggleSection: toggleVisibility, isSectionVisible } = useSectionVisibility()
+
+ // Close section-visibility popover on outside click
+ useEffect(() => {
+ if (!showCustomize) return
+ const handleClick = (e: MouseEvent) => {
+ Eif (customizeRef.current && !customizeRef.current.contains(e.target as Node)) {
+ setShowCustomize(false)
+ }
+ }
+ document.addEventListener('mousedown', handleClick)
+ return () => document.removeEventListener('mousedown', handleClick)
+ }, [showCustomize])
+
+ const toggleSection = (type: string) => {
+ setCollapsed((prev) => ({ ...prev, [type]: !(prev[type] ?? true) }))
+ }
+
+ // Build a map of type name → type entry for quick lookup of icon/color
+ const typeEntryMap = useMemo(() => {
+ const map: Record<string, VaultEntry> = {}
+ for (const e of entries) {
+ if (e.isA === 'Type') map[e.title] = e
+ }
+ return map
+ }, [entries])
+
+ const isActive = (sel: SidebarSelection): boolean => {
+ if (selection.kind !== sel.kind) return false
+ Eif (sel.kind === 'filter' && selection.kind === 'filter') return sel.filter === selection.filter
+ if (sel.kind === 'sectionGroup' && selection.kind === 'sectionGroup') return sel.type === selection.type
+ if (sel.kind === 'entity' && selection.kind === 'entity') return sel.entry.path === selection.entry.path
+ if (sel.kind === 'topic' && selection.kind === 'topic') return sel.entry.path === selection.entry.path
+ return false
+ }
+
+ // Derive custom type sections from Type entries not in the built-in list
+ const customSectionGroups: SectionGroup[] = useMemo(() => {
+ return entries
+ .filter((e) => e.isA === 'Type' && !BUILT_IN_TYPES.has(e.title))
+ .sort((a, b) => a.title.localeCompare(b.title))
+ .map((e) => ({
+ label: e.title + 's',
+ type: e.title,
+ Icon: resolveIcon(e.icon),
+ customColor: e.color,
+ }))
+ }, [entries])
+
+ // For built-in types, check if they have custom icon/color overrides from their type entry
+ const builtInWithOverrides: SectionGroup[] = useMemo(() => {
+ return BUILT_IN_SECTION_GROUPS.map((sg) => {
+ const typeEntry = typeEntryMap[sg.type]
+ Eif (!typeEntry?.icon && !typeEntry?.color) return sg
+ return {
+ ...sg,
+ Icon: typeEntry?.icon ? resolveIcon(typeEntry.icon) : sg.Icon,
+ customColor: typeEntry?.color ?? null,
+ }
+ })
+ }, [typeEntryMap])
+
+ // Merge built-in and custom sections, then sort by order from type entries
+ const allSectionGroups = useMemo(() => {
+ const merged = [...builtInWithOverrides, ...customSectionGroups]
+ return merged.sort((a, b) => {
+ const orderA = typeEntryMap[a.type]?.order ?? Infinity
+ const orderB = typeEntryMap[b.type]?.order ?? Infinity
+ if (orderA !== orderB) return orderA - orderB
+ return a.label.localeCompare(b.label)
+ })
+ }, [builtInWithOverrides, customSectionGroups, typeEntryMap])
+
+ // DnD sensors with activation distance to avoid accidental drags on click
+ const sensors = useSensors(
+ useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+ useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+ )
+
+ const visibleSections = useMemo(
+ () => allSectionGroups.filter((g) => isSectionVisible(g.type)),
+ [allSectionGroups, isSectionVisible],
+ )
+
+ const sectionIds = useMemo(() => visibleSections.map((g) => g.type), [visibleSections])
+
+ const handleDragEnd = useCallback((event: DragEndEvent) => {
+ const { active, over } = event
+ if (!over || active.id === over.id) return
+
+ const oldIndex = sectionIds.indexOf(active.id as string)
+ const newIndex = sectionIds.indexOf(over.id as string)
+ if (oldIndex === -1 || newIndex === -1) return
+
+ // Compute new order: assign sequential order values to the reordered list
+ const reordered = [...sectionIds]
+ reordered.splice(oldIndex, 1)
+ reordered.splice(newIndex, 0, active.id as string)
+
+ const updates = reordered.map((typeName, i) => ({ typeName, order: i }))
+ onReorderSections?.(updates)
+ }, [sectionIds, onReorderSections])
+
+ const archivedCount = useMemo(() => entries.filter((e) => e.archived).length, [entries])
+ const trashedCount = useMemo(() => entries.filter((e) => e.trashed).length, [entries])
+
+ // Close context menu on outside click
+ useEffect(() => {
+ Eif (!contextMenuPos) return
+ const handler = (e: MouseEvent) => {
+ if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
+ setContextMenuPos(null)
+ setContextMenuType(null)
+ }
+ }
+ document.addEventListener('mousedown', handler)
+ return () => document.removeEventListener('mousedown', handler)
+ }, [contextMenuPos])
+
+ // Close customize popover on outside click
+ useEffect(() => {
+ Eif (!customizeTarget) return
+ const handler = (e: MouseEvent) => {
+ if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
+ setCustomizeTarget(null)
+ }
+ }
+ document.addEventListener('mousedown', handler)
+ return () => document.removeEventListener('mousedown', handler)
+ }, [customizeTarget])
+
+ const handleContextMenu = useCallback((e: React.MouseEvent, type: string) => {
+ e.preventDefault()
+ e.stopPropagation()
+ setContextMenuPos({ x: e.clientX, y: e.clientY })
+ setContextMenuType(type)
+ }, [])
+
+ const openCustomizePopover = useCallback((type: string) => {
+ setContextMenuPos(null)
+ setContextMenuType(null)
+ setCustomizeTarget(type)
+ }, [])
+
+ const handleCustomizeIcon = useCallback((icon: string) => {
+ if (!customizeTarget) return
+ const typeEntry = typeEntryMap[customizeTarget]
+ if (typeEntry && onCustomizeType) {
+ onCustomizeType(customizeTarget, icon, typeEntry.color ?? 'blue')
+ }
+ }, [customizeTarget, typeEntryMap, onCustomizeType])
+
+ const handleCustomizeColor = useCallback((color: string) => {
+ if (!customizeTarget) return
+ const typeEntry = typeEntryMap[customizeTarget]
+ if (typeEntry && onCustomizeType) {
+ onCustomizeType(customizeTarget, typeEntry.icon ?? 'file-text', color)
+ }
+ }, [customizeTarget, typeEntryMap, onCustomizeType])
+
+ const renderSectionContent = ({ label, type, Icon, customColor }: SectionGroup, dragHandleProps?: Record<string, unknown>) => {
+ const items = entries.filter((e) => e.isA === type && !e.archived && !e.trashed)
+ const isCollapsed = collapsed[type] ?? true
+ const isTopic = type === 'Topic'
+ const isTypeSection = type === 'Type'
+ const sectionColor = getTypeColor(type, customColor)
+ const sectionLightColor = getTypeLightColor(type, customColor)
+
+ const handlePlusClick = (e: React.MouseEvent) => {
+ e.stopPropagation()
+ if (isTypeSection) {
+ onCreateNewType?.()
+ } else {
+ onCreateType?.(type)
+ }
+ }
+
+ return (
+ <>
+ {/* Section header row */}
+ <div
+ className={cn(
+ "group/section flex cursor-pointer select-none items-center justify-between rounded transition-colors",
+ isActive({ kind: 'sectionGroup', type })
+ ? "bg-secondary"
+ : "hover:bg-accent"
+ )}
+ style={{ padding: '6px 8px 6px 6px', borderRadius: 4, gap: 4 }}
+ onClick={() => onSelect({ kind: 'sectionGroup', type })}
+ onContextMenu={(e) => handleContextMenu(e, type)}
+ >
+ <div className="flex items-center" style={{ gap: 4 }}>
+ {/* Drag handle */}
+ <div
+ className="flex shrink-0 items-center justify-center text-muted-foreground opacity-0 group-hover/section:opacity-50 hover:!opacity-100 cursor-grab"
+ style={{ width: 16, height: 16 }}
+ {...dragHandleProps}
+ aria-label={`Drag to reorder ${label}`}
+ >
+ <GripVertical size={12} />
+ </div>
+ <Icon size={16} style={{ color: sectionColor }} />
+ <span className="text-[13px] font-medium text-foreground" style={{ marginLeft: 4 }}>{label}</span>
+ </div>
+ <div className="flex items-center" style={{ gap: 2 }}>
+ {(onCreateType || (isTypeSection && onCreateNewType)) && (
+ <button
+ className="flex shrink-0 items-center justify-center rounded border-none bg-transparent p-0 text-muted-foreground opacity-0 transition-opacity hover:text-foreground group-hover/section:opacity-100 cursor-pointer"
+ style={{ width: 20, height: 20 }}
+ onClick={handlePlusClick}
+ aria-label={isTypeSection ? 'Create new Type' : `Create new ${type}`}
+ title={isTypeSection ? 'New Type' : `New ${type}`}
+ >
+ <Plus size={14} />
+ </button>
+ )}
+ <button
+ className="flex shrink-0 items-center border-none bg-transparent p-0 text-inherit cursor-pointer"
+ onClick={(e) => {
+ e.stopPropagation()
+ toggleSection(type)
+ }}
+ aria-label={isCollapsed ? `Expand ${label}` : `Collapse ${label}`}
+ >
+ {isCollapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
+ </button>
+ </div>
+ </div>
+
+ {/* Children items */}
+ {!isCollapsed && items.length > 0 && (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+ {items.map((entry) => (
+ <div
+ key={entry.path}
+ className={cn(
+ "cursor-pointer truncate rounded-md text-[13px] font-normal transition-colors",
+ isActive(isTopic ? { kind: 'topic', entry } : { kind: 'entity', entry })
+ ? "text-foreground"
+ : "text-muted-foreground hover:bg-accent"
+ )}
+ style={{
+ padding: '4px 16px 4px 28px',
+ ...(isActive(isTopic ? { kind: 'topic', entry } : { kind: 'entity', entry }) && {
+ backgroundColor: sectionLightColor,
+ color: sectionColor,
+ }),
+ }}
+ onClick={() => {
+ onSelect(isTopic ? { kind: 'topic', entry } : { kind: 'entity', entry })
+ onSelectNote?.(entry)
+ }}
+ >
+ {entry.title}
+ </div>
+ ))}
+ </div>
+ )}
+ </>
+ )
+ }
+
+ function SortableSection({ group }: { group: SectionGroup }) {
+ const {
+ attributes,
+ listeners,
+ setNodeRef,
+ transform,
+ transition,
+ isDragging,
+ } = useSortable({ id: group.type })
+
+ const style = {
+ transform: CSS.Transform.toString(transform),
+ transition,
+ opacity: isDragging ? 0.5 : 1,
+ padding: '4px 6px',
+ }
+
+ return (
+ <div ref={setNodeRef} style={style} {...attributes}>
+ {renderSectionContent(group, listeners)}
+ </div>
+ )
+ }
+
+ return (
+ <aside className="flex h-full flex-col overflow-hidden border-r border-[var(--sidebar-border)] bg-sidebar text-sidebar-foreground" style={{ paddingTop: 38 } as React.CSSProperties}>
+ {/* Native macOS title bar on top */}
+
+ {/* Navigation */}
+ <nav className="flex-1 overflow-y-auto">
+ {/* Top nav — All Notes + Favorites */}
+ <div className="border-b border-border" style={{ padding: '4px 6px' }}>
+ {TOP_NAV.map(({ label, filter, Icon }) => {
+ const count = filter === 'all' ? entries.filter((e) => !e.archived && !e.trashed).length : 0
+ return (
+ <div
+ key={filter}
+ className={cn(
+ "flex cursor-pointer select-none items-center gap-2 rounded transition-colors",
+ isActive({ kind: 'filter', filter })
+ ? "bg-primary/10 text-primary"
+ : "text-foreground hover:bg-accent"
+ )}
+ style={{ padding: '6px 16px', borderRadius: 4 }}
+ onClick={() => onSelect({ kind: 'filter', filter })}
+ >
+ <Icon size={16} />
+ <span className="flex-1 text-[13px] font-medium">{label}</span>
+ {count > 0 && (
+ <span
+ className="flex items-center justify-center bg-primary text-primary-foreground"
+ style={{ height: 20, borderRadius: 9999, padding: '0 6px', fontSize: 10 }}
+ >
+ {count}
+ </span>
+ )}
+ </div>
+ )
+ })}
+ {/* Archive filter */}
+ <div
+ className={cn(
+ "flex cursor-pointer select-none items-center gap-2 rounded transition-colors",
+ isActive({ kind: 'filter', filter: 'archived' })
+ ? "bg-primary/10 text-primary"
+ : "text-foreground hover:bg-accent"
+ )}
+ style={{ padding: '6px 16px', borderRadius: 4 }}
+ onClick={() => onSelect({ kind: 'filter', filter: 'archived' })}
+ >
+ <Archive size={16} />
+ <span className="flex-1 text-[13px] font-medium">Archive</span>
+ {archivedCount > 0 && (
+ <span
+ className="flex items-center justify-center text-muted-foreground"
+ style={{ height: 20, borderRadius: 9999, padding: '0 6px', fontSize: 10, background: 'var(--muted)' }}
+ >
+ {archivedCount}
+ </span>
+ )}
+ </div>
+ {/* Disabled placeholders */}
+ <div
+ className="flex select-none items-center gap-2 rounded text-foreground"
+ style={{ padding: '6px 16px', borderRadius: 4, opacity: 0.4, cursor: 'not-allowed' }}
+ title="Coming soon"
+ >
+ <TagSimple size={16} />
+ <span className="flex-1 text-[13px] font-medium">Untagged</span>
+ </div>
+ {/* Trash filter */}
+ <div
+ className={cn(
+ "flex cursor-pointer select-none items-center gap-2 rounded transition-colors",
+ isActive({ kind: 'filter', filter: 'trash' })
+ ? "bg-destructive/10 text-destructive"
+ : "text-foreground hover:bg-accent"
+ )}
+ style={{ padding: '6px 16px', borderRadius: 4 }}
+ onClick={() => onSelect({ kind: 'filter', filter: 'trash' })}
+ >
+ <Trash size={16} />
+ <span className="flex-1 text-[13px] font-medium">Trash</span>
+ {trashedCount > 0 && (
+ <span
+ className="flex items-center justify-center text-muted-foreground"
+ style={{ height: 20, borderRadius: 9999, padding: '0 6px', fontSize: 10, background: 'var(--muted)' }}
+ >
+ {trashedCount}
+ </span>
+ )}
+ </div>
+ </div>
+
+ {/* Sections header + customize popover */}
+ <div ref={customizeRef} style={{ position: 'relative', padding: '4px 6px 0' }}>
+ <div
+ className="flex w-full select-none items-center justify-between"
+ style={{ padding: '4px 16px' }}
+ >
+ <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">Sections</span>
+ <button
+ className="flex shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-foreground"
+ style={{ width: 20, height: 20 }}
+ onClick={() => setShowCustomize((v) => !v)}
+ aria-label="Customize sections"
+ title="Customize sections"
+ >
+ <SlidersHorizontal size={14} />
+ </button>
+ </div>
+
+ {showCustomize && (
+ <div
+ className="border border-border bg-popover text-popover-foreground"
+ style={{
+ position: 'absolute',
+ top: '100%',
+ left: 6,
+ right: 6,
+ zIndex: 50,
+ borderRadius: 8,
+ padding: '8px 0',
+ boxShadow: '0 4px 12px rgba(0,0,0,0.12)',
+ }}
+ >
+ <div className="text-[12px] font-semibold text-muted-foreground" style={{ padding: '0 12px 4px' }}>
+ Show in sidebar
+ </div>
+ {allSectionGroups.map(({ label, type, Icon }) => (
+ <button
+ key={type}
+ className="flex w-full cursor-pointer items-center border-none bg-transparent transition-colors hover:bg-accent"
+ style={{ padding: '6px 12px', gap: 8 }}
+ onClick={() => toggleVisibility(type)}
+ aria-label={`Toggle ${label}`}
+ >
+ <Icon size={14} style={{ color: getTypeColor(type) }} />
+ <span className="flex-1 text-left text-[13px] text-foreground">{label}</span>
+ <div
+ className="flex items-center"
+ style={{
+ width: 32,
+ height: 18,
+ borderRadius: 9,
+ padding: 2,
+ backgroundColor: isSectionVisible(type) ? 'var(--primary)' : 'var(--muted)',
+ justifyContent: isSectionVisible(type) ? 'flex-end' : 'flex-start',
+ transition: 'background-color 150ms',
+ }}
+ >
+ <div
+ style={{
+ width: 14,
+ height: 14,
+ borderRadius: 7,
+ backgroundColor: 'white',
+ transition: 'transform 150ms',
+ }}
+ />
+ </div>
+ </button>
+ ))}
+ </div>
+ )}
+ </div>
+
+ {/* Section Groups (built-in + custom), filtered by visibility, sortable by drag */}
+ <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+ <SortableContext items={sectionIds} strategy={verticalListSortingStrategy}>
+ {visibleSections.map((g) => (
+ <SortableSection key={g.type} group={g} />
+ ))}
+ </SortableContext>
+ </DndContext>
+ </nav>
+
+ {/* Commit button — always visible */}
+ {onCommitPush && (
+ <div className="shrink-0 border-t border-border" style={{ padding: 12 }}>
+ <button
+ className="flex w-full items-center justify-center bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+ style={{ borderRadius: 6, gap: 6, padding: '8px 16px', border: 'none', cursor: 'pointer' }}
+ onClick={onCommitPush}
+ >
+ <GitCommitHorizontal size={14} />
+ <span className="text-[13px] font-medium">Commit & Push</span>
+ {modifiedCount > 0 && (
+ <span
+ className="text-white font-semibold"
+ style={{ background: '#ffffff40', borderRadius: 9, padding: '0 6px', fontSize: 10 }}
+ >
+ {modifiedCount}
+ </span>
+ )}
+ </button>
+ </div>
+ )}
+
+ {/* Context menu (right-click on section header) */}
+ {contextMenuPos && contextMenuType && (
+ <div
+ ref={contextMenuRef}
+ className="fixed z-50 rounded-md border bg-popover p-1 shadow-md"
+ style={{ left: contextMenuPos.x, top: contextMenuPos.y, minWidth: 180 }}
+ >
+ <button
+ className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-default hover:bg-accent hover:text-accent-foreground transition-colors border-none bg-transparent text-left"
+ onClick={() => openCustomizePopover(contextMenuType)}
+ >
+ Customize icon & color…
+ </button>
+ </div>
+ )}
+
+ {/* Customize popover */}
+ {customizeTarget && (
+ <div
+ ref={popoverRef}
+ className="fixed z-50"
+ style={{ left: 20, top: 100 }}
+ >
+ <TypeCustomizePopover
+ currentIcon={typeEntryMap[customizeTarget]?.icon ?? null}
+ currentColor={typeEntryMap[customizeTarget]?.color ?? null}
+ onChangeIcon={handleCustomizeIcon}
+ onChangeColor={handleCustomizeColor}
+ onClose={() => setCustomizeTarget(null)}
+ />
+ </div>
+ )}
+ </aside>
+ )
+})
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 | + + + + + + + + + + + + + + + +22x +22x + +22x + +22x +7x + + + + + + + + + +22x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState, useRef, useEffect } from 'react'
+import { Package, GitBranch, RefreshCw, Sparkles, FileText, Bell, Settings, FolderOpen, Check } from 'lucide-react'
+
+export interface VaultOption {
+ label: string
+ path: string
+}
+
+interface StatusBarProps {
+ noteCount: number
+ vaultPath: string
+ vaults: VaultOption[]
+ onSwitchVault: (path: string) => void
+}
+
+export function StatusBar({ noteCount, vaultPath, vaults, onSwitchVault }: StatusBarProps) {
+ const [showVaultMenu, setShowVaultMenu] = useState(false)
+ const menuRef = useRef<HTMLDivElement>(null)
+
+ const activeVault = vaults.find((v) => v.path === vaultPath)
+
+ useEffect(() => {
+ Eif (!showVaultMenu) return
+ const handleClick = (e: MouseEvent) => {
+ if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+ setShowVaultMenu(false)
+ }
+ }
+ document.addEventListener('mousedown', handleClick)
+ return () => document.removeEventListener('mousedown', handleClick)
+ }, [showVaultMenu])
+
+ return (
+ <footer
+ style={{
+ height: 30,
+ flexShrink: 0,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ background: 'var(--sidebar)',
+ borderTop: '1px solid var(--border)',
+ padding: '0 8px',
+ fontSize: 11,
+ color: 'var(--muted-foreground)',
+ }}
+ >
+ {/* Left section */}
+ <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+ <div ref={menuRef} style={{ position: 'relative' }}>
+ <span
+ role="button"
+ onClick={() => setShowVaultMenu((v) => !v)}
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ gap: 4,
+ cursor: 'pointer',
+ padding: '2px 4px',
+ borderRadius: 3,
+ background: showVaultMenu ? 'var(--hover)' : 'transparent',
+ }}
+ title="Switch vault"
+ >
+ <FolderOpen size={13} />
+ {activeVault?.label ?? 'Vault'}
+ </span>
+ {showVaultMenu && (
+ <div
+ style={{
+ position: 'absolute',
+ bottom: '100%',
+ left: 0,
+ marginBottom: 4,
+ background: 'var(--sidebar)',
+ border: '1px solid var(--border)',
+ borderRadius: 6,
+ padding: 4,
+ minWidth: 160,
+ boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
+ zIndex: 1000,
+ }}
+ >
+ {vaults.map((v) => (
+ <div
+ key={v.path}
+ role="button"
+ onClick={() => {
+ onSwitchVault(v.path)
+ setShowVaultMenu(false)
+ }}
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ gap: 6,
+ padding: '4px 8px',
+ borderRadius: 4,
+ cursor: 'pointer',
+ background: v.path === vaultPath ? 'var(--hover)' : 'transparent',
+ color: v.path === vaultPath ? 'var(--foreground)' : 'var(--muted-foreground)',
+ fontSize: 12,
+ }}
+ onMouseEnter={(e) => {
+ if (v.path !== vaultPath) e.currentTarget.style.background = 'var(--hover)'
+ }}
+ onMouseLeave={(e) => {
+ if (v.path !== vaultPath) e.currentTarget.style.background = 'transparent'
+ }}
+ >
+ {v.path === vaultPath ? <Check size={12} /> : <span style={{ width: 12 }} />}
+ {v.label}
+ </div>
+ ))}
+ </div>
+ )}
+ </div>
+ <span style={{ color: 'var(--border)' }}>|</span>
+ <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+ <Package size={13} />
+ v0.4.2
+ </span>
+ <span style={{ color: 'var(--border)' }}>|</span>
+ <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+ <GitBranch size={13} />
+ main
+ </span>
+ <span style={{ color: 'var(--border)' }}>|</span>
+ <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+ <RefreshCw size={13} style={{ color: 'var(--accent-green)' }} />
+ Synced 2m ago
+ </span>
+ </div>
+
+ {/* Right section */}
+ <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+ <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+ <Sparkles size={13} style={{ color: 'var(--accent-purple)' }} />
+ Claude Sonnet 4
+ </span>
+ <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+ <FileText size={13} />
+ {noteCount.toLocaleString()} notes
+ </span>
+ <span
+ style={{ display: 'flex', alignItems: 'center', opacity: 0.4, cursor: 'not-allowed' }}
+ title="Coming soon"
+ >
+ <Bell size={14} />
+ </span>
+ <span
+ style={{ display: 'flex', alignItems: 'center', opacity: 0.4, cursor: 'not-allowed' }}
+ title="Coming soon"
+ >
+ <Settings size={14} />
+ </span>
+ </div>
+ </footer>
+ )
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 | + + + + + + + + + + + + + + + + + + + +3x + +3x + + +29x +29x +29x + +29x +2x +2x +2x + +2x +2x +2x +2x + + + + + + +29x +2x +2x + +2x +2x +2x + + +29x +2x +2x +2x +1x +1x + + +1x +1x +1x +2x + + +29x +2x +2x + +1x +1x +1x + + +2x + + +29x + + + + + + + +29x + + + + + + + +36x +36x +36x +36x + + + +2x + +2x + + + + + + + + + + + + + + + + + +2x + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { memo, useState, useRef, useCallback } from 'react'
+import type { VaultEntry } from '../types'
+import { cn } from '@/lib/utils'
+import { X } from 'lucide-react'
+import { Plus, Columns, ArrowsOutSimple } from '@phosphor-icons/react'
+
+interface Tab {
+ entry: VaultEntry
+ content: string
+}
+
+interface TabBarProps {
+ tabs: Tab[]
+ activeTabPath: string | null
+ onSwitchTab: (path: string) => void
+ onCloseTab: (path: string) => void
+ onCreateNote?: () => void
+ onReorderTabs?: (fromIndex: number, toIndex: number) => void
+}
+
+const DISABLED_ICON_STYLE = { opacity: 0.4, cursor: 'not-allowed' } as const
+
+export const TabBar = memo(function TabBar({
+ tabs, activeTabPath, onSwitchTab, onCloseTab, onCreateNote, onReorderTabs,
+}: TabBarProps) {
+ const [dragIndex, setDragIndex] = useState<number | null>(null)
+ const [dropIndex, setDropIndex] = useState<number | null>(null)
+ const dragNodeRef = useRef<HTMLDivElement | null>(null)
+
+ const handleDragStart = useCallback((e: React.DragEvent<HTMLDivElement>, index: number) => {
+ setDragIndex(index)
+ e.dataTransfer.effectAllowed = 'move'
+ e.dataTransfer.setData('text/plain', String(index))
+ // Make the drag image slightly transparent
+ Eif (e.currentTarget) {
+ dragNodeRef.current = e.currentTarget
+ requestAnimationFrame(() => {
+ Iif (dragNodeRef.current) {
+ dragNodeRef.current.style.opacity = '0.5'
+ }
+ })
+ }
+ }, [])
+
+ const handleDragEnd = useCallback(() => {
+ Eif (dragNodeRef.current) {
+ dragNodeRef.current.style.opacity = ''
+ }
+ dragNodeRef.current = null
+ setDragIndex(null)
+ setDropIndex(null)
+ }, [])
+
+ const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>, index: number) => {
+ e.preventDefault()
+ e.dataTransfer.dropEffect = 'move'
+ if (dragIndex === null || dragIndex === index) {
+ setDropIndex(null)
+ return
+ }
+ // Determine drop position based on cursor within the tab
+ const rect = e.currentTarget.getBoundingClientRect()
+ const midpoint = rect.left + rect.width / 2
+ const insertIndex = e.clientX < midpoint ? index : index + 1
+ setDropIndex(insertIndex)
+ }, [dragIndex])
+
+ const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+ e.preventDefault()
+ if (dragIndex !== null && dropIndex !== null && dragIndex !== dropIndex && onReorderTabs) {
+ // Adjust target index: if dropping after the dragged item, account for removal
+ const toIndex = dropIndex > dragIndex ? dropIndex - 1 : dropIndex
+ Eif (toIndex !== dragIndex) {
+ onReorderTabs(dragIndex, toIndex)
+ }
+ }
+ handleDragEnd()
+ }, [dragIndex, dropIndex, onReorderTabs, handleDragEnd])
+
+ const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+ // Only clear if we're leaving the tab bar entirely
+ const relatedTarget = e.relatedTarget as HTMLElement | null
+ if (!e.currentTarget.contains(relatedTarget)) {
+ setDropIndex(null)
+ }
+ }, [])
+
+ return (
+ <div
+ className="flex shrink-0 items-stretch"
+ style={{ height: 45, background: 'var(--sidebar)', WebkitAppRegion: 'drag' } as React.CSSProperties}
+ data-tauri-drag-region
+ onDragLeave={handleDragLeave}
+ >
+ {tabs.map((tab, index) => {
+ const isActive = tab.entry.path === activeTabPath
+ const showDropBefore = dropIndex === index
+ const showDropAfter = dropIndex === index + 1 && index === tabs.length - 1
+ return (
+ <div
+ key={tab.entry.path}
+ draggable
+ onDragStart={(e) => handleDragStart(e, index)}
+ onDragEnd={handleDragEnd}
+ onDragOver={(e) => handleDragOver(e, index)}
+ onDrop={handleDrop}
+ className={cn(
+ "group flex shrink-0 items-center gap-1.5 whitespace-nowrap max-w-[180px] transition-all relative",
+ isActive
+ ? "text-foreground"
+ : "text-muted-foreground hover:text-secondary-foreground"
+ )}
+ style={{
+ background: isActive ? 'var(--background)' : 'transparent',
+ borderRight: `1px solid ${isActive ? 'var(--border)' : 'var(--sidebar-border)'}`,
+ borderBottom: isActive ? 'none' : '1px solid var(--sidebar-border)',
+ padding: '0 12px',
+ fontSize: 12,
+ fontWeight: isActive ? 500 : 400,
+ cursor: dragIndex !== null ? 'grabbing' : 'grab',
+ WebkitAppRegion: 'no-drag',
+ } as React.CSSProperties}
+ onClick={() => onSwitchTab(tab.entry.path)}
+ >
+ {showDropBefore && (
+ <div
+ style={{
+ position: 'absolute',
+ left: -1,
+ top: 8,
+ bottom: 8,
+ width: 2,
+ background: 'var(--primary)',
+ borderRadius: 1,
+ zIndex: 10,
+ }}
+ />
+ )}
+ <span className="truncate">{tab.entry.title}</span>
+ <button
+ className={cn(
+ "shrink-0 rounded-sm p-0 bg-transparent border-none text-muted-foreground cursor-pointer transition-opacity hover:bg-accent hover:text-foreground",
+ isActive ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+ )}
+ style={{ lineHeight: 0 }}
+ draggable={false}
+ onClick={(e) => {
+ e.stopPropagation()
+ onCloseTab(tab.entry.path)
+ }}
+ >
+ <X size={14} />
+ </button>
+ {showDropAfter && (
+ <div
+ style={{
+ position: 'absolute',
+ right: -1,
+ top: 8,
+ bottom: 8,
+ width: 2,
+ background: 'var(--primary)',
+ borderRadius: 1,
+ zIndex: 10,
+ }}
+ />
+ )}
+ </div>
+ )
+ })}
+
+ <div className="flex-1" style={{ borderBottom: '1px solid var(--border)' }} />
+
+ <div
+ className="flex shrink-0 items-center"
+ style={{
+ borderLeft: '1px solid var(--border)',
+ borderBottom: '1px solid var(--border)',
+ gap: 12,
+ padding: '0 12px',
+ WebkitAppRegion: 'no-drag',
+ } as React.CSSProperties}
+ >
+ <button
+ className="flex items-center justify-center border-none bg-transparent p-0 text-muted-foreground cursor-pointer hover:text-foreground transition-colors"
+ onClick={onCreateNote}
+ title="New note"
+ >
+ <Plus size={16} />
+ </button>
+ <button
+ className="flex items-center justify-center border-none bg-transparent p-0 text-muted-foreground"
+ style={DISABLED_ICON_STYLE}
+ title="Coming soon"
+ tabIndex={-1}
+ >
+ <Columns size={16} />
+ </button>
+ <button
+ className="flex items-center justify-center border-none bg-transparent p-0 text-muted-foreground"
+ style={DISABLED_ICON_STYLE}
+ title="Coming soon"
+ tabIndex={-1}
+ >
+ <ArrowsOutSimple size={16} />
+ </button>
+ </div>
+ </div>
+ )
+})
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 | + + + + + + + + +22x +22x +1x +1x + + +22x + +1x + + + + + + + + + + + | import { useEffect } from 'react'
+import { cn } from '@/lib/utils'
+
+interface ToastProps {
+ message: string | null
+ onDismiss: () => void
+}
+
+export function Toast({ message, onDismiss }: ToastProps) {
+ useEffect(() => {
+ if (!message) return
+ const timer = setTimeout(onDismiss, 2000)
+ return () => clearTimeout(timer)
+ }, [message, onDismiss])
+
+ if (!message) return null
+
+ return (
+ <div className={cn(
+ "fixed bottom-8 left-1/2 -translate-x-1/2 z-[1100]",
+ "bg-secondary text-foreground px-5 py-2 rounded-lg text-[13px]",
+ "shadow-[0_4px_16px_var(--shadow-dialog)]",
+ "animate-in slide-in-from-bottom-2 fade-in duration-200"
+ )}>
+ {message}
+ </div>
+ )
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 | + + + + + + + + + + + + +3x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +3x +105x + + + + +8x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState, type ComponentType } from 'react'
+import {
+ FileText, Wrench, Flask, Target, ArrowsClockwise, Users, CalendarBlank,
+ Tag, StackSimple, BookOpen, CookingPot, Heart, Star, House, Lightbulb,
+ Briefcase, Gear, Cube, Leaf, MusicNote, Camera, Airplane, GameController,
+ PaintBrush, ShoppingCart, GraduationCap, Trophy, ChatCircle, Notebook,
+ MapPin, Code, Barbell, PawPrint, Pill, Knife,
+ type IconProps,
+} from '@phosphor-icons/react'
+import { ACCENT_COLORS } from '../utils/typeColors'
+import { cn } from '@/lib/utils'
+
+/** Curated Phosphor icons (normal weight) for type customization */
+export const ICON_OPTIONS: { name: string; Icon: ComponentType<IconProps> }[] = [
+ { name: 'file-text', Icon: FileText },
+ { name: 'wrench', Icon: Wrench },
+ { name: 'flask', Icon: Flask },
+ { name: 'target', Icon: Target },
+ { name: 'arrows-clockwise', Icon: ArrowsClockwise },
+ { name: 'users', Icon: Users },
+ { name: 'calendar-blank', Icon: CalendarBlank },
+ { name: 'tag', Icon: Tag },
+ { name: 'stack-simple', Icon: StackSimple },
+ { name: 'book-open', Icon: BookOpen },
+ { name: 'cooking-pot', Icon: CookingPot },
+ { name: 'heart', Icon: Heart },
+ { name: 'star', Icon: Star },
+ { name: 'house', Icon: House },
+ { name: 'lightbulb', Icon: Lightbulb },
+ { name: 'briefcase', Icon: Briefcase },
+ { name: 'gear', Icon: Gear },
+ { name: 'cube', Icon: Cube },
+ { name: 'leaf', Icon: Leaf },
+ { name: 'music-note', Icon: MusicNote },
+ { name: 'camera', Icon: Camera },
+ { name: 'airplane', Icon: Airplane },
+ { name: 'game-controller', Icon: GameController },
+ { name: 'paint-brush', Icon: PaintBrush },
+ { name: 'shopping-cart', Icon: ShoppingCart },
+ { name: 'graduation-cap', Icon: GraduationCap },
+ { name: 'trophy', Icon: Trophy },
+ { name: 'chat-circle', Icon: ChatCircle },
+ { name: 'notebook', Icon: Notebook },
+ { name: 'map-pin', Icon: MapPin },
+ { name: 'code', Icon: Code },
+ { name: 'barbell', Icon: Barbell },
+ { name: 'paw-print', Icon: PawPrint },
+ { name: 'pill', Icon: Pill },
+ { name: 'knife', Icon: Knife },
+]
+
+const ICON_MAP: Record<string, ComponentType<IconProps>> = Object.fromEntries(
+ ICON_OPTIONS.map((o) => [o.name, o.Icon]),
+)
+
+/** Resolves a Phosphor icon name to its component, with fallback to FileText */
+export function resolveIcon(name: string | null): ComponentType<IconProps> {
+ return (name && ICON_MAP[name]) || FileText
+}
+
+interface TypeCustomizePopoverProps {
+ currentIcon: string | null
+ currentColor: string | null
+ onChangeIcon: (icon: string) => void
+ onChangeColor: (color: string) => void
+ onClose: () => void
+}
+
+export function TypeCustomizePopover({
+ currentIcon,
+ currentColor,
+ onChangeIcon,
+ onChangeColor,
+ onClose,
+}: TypeCustomizePopoverProps) {
+ const [selectedColor, setSelectedColor] = useState(currentColor)
+ const [selectedIcon, setSelectedIcon] = useState(currentIcon)
+
+ const handleColorClick = (key: string) => {
+ setSelectedColor(key)
+ onChangeColor(key)
+ }
+
+ const handleIconClick = (name: string) => {
+ setSelectedIcon(name)
+ onChangeIcon(name)
+ }
+
+ return (
+ <div
+ className="bg-popover text-popover-foreground z-50 rounded-lg border shadow-md"
+ style={{ width: 264, padding: 12 }}
+ onClick={(e) => e.stopPropagation()}
+ onContextMenu={(e) => e.stopPropagation()}
+ >
+ {/* Color section */}
+ <div className="font-mono-overline mb-2 text-muted-foreground">COLOR</div>
+ <div className="flex gap-2 mb-3">
+ {ACCENT_COLORS.map((c) => (
+ <button
+ key={c.key}
+ className={cn(
+ "flex items-center justify-center rounded-full border-2 cursor-pointer transition-all",
+ selectedColor === c.key ? "border-foreground scale-110" : "border-transparent hover:scale-105",
+ )}
+ style={{ width: 28, height: 28, backgroundColor: c.css, border: selectedColor === c.key ? '2px solid var(--foreground)' : '2px solid transparent' }}
+ onClick={() => handleColorClick(c.key)}
+ title={c.label}
+ />
+ ))}
+ </div>
+
+ {/* Icon section */}
+ <div className="font-mono-overline mb-2 text-muted-foreground">ICON</div>
+ <div className="flex flex-wrap gap-1" style={{ maxHeight: 200, overflowY: 'auto' }}>
+ {ICON_OPTIONS.map(({ name, Icon }) => (
+ <button
+ key={name}
+ className={cn(
+ "flex items-center justify-center rounded cursor-pointer transition-colors",
+ selectedIcon === name
+ ? "bg-primary/10 text-primary"
+ : "text-muted-foreground hover:bg-accent hover:text-foreground",
+ )}
+ style={{ width: 30, height: 30 }}
+ onClick={() => handleIconClick(name)}
+ title={name}
+ >
+ <Icon size={16} />
+ </button>
+ ))}
+ </div>
+
+ {/* Done button */}
+ <div className="mt-3 flex justify-end">
+ <button
+ className="rounded px-3 py-1 text-[12px] font-medium text-muted-foreground hover:text-foreground hover:bg-accent cursor-pointer transition-colors border-none bg-transparent"
+ onClick={onClose}
+ >
+ Done
+ </button>
+ </div>
+ </div>
+ )
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| AIChatPanel.tsx | +
+
+ |
+ 1.17% | +1/85 | +0% | +0/49 | +0% | +0/55 | +1.47% | +1/68 | +
| BreadcrumbBar.tsx | +
+
+ |
+ 100% | +4/4 | +69.23% | +18/26 | +100% | +2/2 | +100% | +4/4 | +
| CommitDialog.tsx | +
+
+ |
+ 31.81% | +7/22 | +13.33% | +2/15 | +28.57% | +2/7 | +36.84% | +7/19 | +
| CreateNoteDialog.tsx | +
+
+ |
+ 36% | +9/25 | +35.29% | +6/17 | +30% | +3/10 | +40.9% | +9/22 | +
| CreateTypeDialog.tsx | +
+
+ |
+ 88.88% | +16/18 | +66.66% | +4/6 | +83.33% | +5/6 | +93.33% | +14/15 | +
| DiffView.tsx | +
+
+ |
+ 0% | +0/14 | +0% | +0/21 | +0% | +0/2 | +0% | +0/14 | +
| DynamicPropertiesPanel.tsx | +
+
+ |
+ 41.96% | +47/112 | +40.24% | +33/82 | +27.77% | +10/36 | +47.19% | +42/89 | +
| EditableValue.tsx | +
+
+ |
+ 24.59% | +15/61 | +16.66% | +5/30 | +15% | +3/20 | +26.31% | +15/57 | +
| Editor.tsx | +
+
+ |
+ 50.52% | +97/192 | +48.33% | +58/120 | +47.36% | +18/38 | +53.84% | +91/169 | +
| Inspector.tsx | +
+
+ |
+ 64.28% | +90/140 | +52.17% | +84/161 | +72.09% | +31/43 | +76.19% | +80/105 | +
| NoteList.tsx | +
+
+ |
+ 85.71% | +210/245 | +76.49% | +192/251 | +85.52% | +65/76 | +87.5% | +182/208 | +
| QuickOpenPalette.tsx | +
+
+ |
+ 27.02% | +20/74 | +17.07% | +7/41 | +31.81% | +7/22 | +25.39% | +16/63 | +
| ResizeHandle.tsx | +
+
+ |
+ 35.71% | +15/42 | +7.14% | +1/14 | +42.85% | +3/7 | +37.5% | +15/40 | +
| Sidebar.tsx | +
+
+ |
+ 66.07% | +111/168 | +55.92% | +85/152 | +72.41% | +42/58 | +65.69% | +90/137 | +
| StatusBar.tsx | +
+
+ |
+ 34.78% | +8/23 | +18.18% | +4/22 | +27.27% | +3/11 | +35.29% | +6/17 | +
| TabBar.tsx | +
+
+ |
+ 92.15% | +47/51 | +79.54% | +35/44 | +91.66% | +11/12 | +92.15% | +47/51 | +
| Toast.tsx | +
+
+ |
+ 100% | +9/9 | +100% | +4/4 | +100% | +3/3 | +100% | +6/6 | +
| TypeCustomizePopover.tsx | +
+
+ |
+ 21.05% | +4/19 | +22.22% | +2/9 | +18.18% | +2/11 | +21.05% | +4/19 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 | + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+ "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+ secondary:
+ "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+ destructive:
+ "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+ outline:
+ "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+ ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 [a&]:hover:underline",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function Badge({
+ className,
+ variant = "default",
+ asChild = false,
+ ...props
+}: React.ComponentProps<"span"> &
+ VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+ const Comp = asChild ? Slot.Root : "span"
+
+ return (
+ <Comp
+ data-slot="badge"
+ data-variant={variant}
+ className={cn(badgeVariants({ variant }), className)}
+ {...props}
+ />
+ )
+}
+
+export { Badge, badgeVariants }
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 | + + + + + +4x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +22x + +22x + + + + + + + + + + + + | import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+ outline:
+ "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost:
+ "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2 has-[>svg]:px-3",
+ xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+ sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+ lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+ icon: "size-9",
+ "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+ "icon-sm": "size-8",
+ "icon-lg": "size-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+function Button({
+ className,
+ variant = "default",
+ size = "default",
+ asChild = false,
+ ...props
+}: React.ComponentProps<"button"> &
+ VariantProps<typeof buttonVariants> & {
+ asChild?: boolean
+ }) {
+ const Comp = asChild ? Slot.Root : "button"
+
+ return (
+ <Comp
+ data-slot="button"
+ data-variant={variant}
+ data-size={size}
+ className={cn(buttonVariants({ variant, size, className }))}
+ {...props}
+ />
+ )
+}
+
+export { Button, buttonVariants }
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="card"
+ className={cn(
+ "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="card-header"
+ className={cn(
+ "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="card-title"
+ className={cn("leading-none font-semibold", className)}
+ {...props}
+ />
+ )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="card-description"
+ className={cn("text-muted-foreground text-sm", className)}
+ {...props}
+ />
+ )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="card-action"
+ className={cn(
+ "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="card-content"
+ className={cn("px-6", className)}
+ {...props}
+ />
+ )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="card-footer"
+ className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+ {...props}
+ />
+ )
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 | + + + + + + + + + +78x + + + + + + + + + + + +78x + + + + + + + + + + + + +18x + + + + + + + + + + + + + + + + + + + +78x + + + + + + + + + + + + + + + + + + + + + + + + + + +11x + + + + + + + + + + + + + + + + +11x + + + + + + + + + + + + + + + + + + + + + + +11x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function Dialog({
+ ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+ return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+ ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+ return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+ ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+ return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+ ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+ return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+ className,
+ ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+ return (
+ <DialogPrimitive.Overlay
+ data-slot="dialog-overlay"
+ className={cn(
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function DialogContent({
+ className,
+ children,
+ showCloseButton = true,
+ ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+ showCloseButton?: boolean
+}) {
+ return (
+ <DialogPortal data-slot="dialog-portal">
+ <DialogOverlay />
+ <DialogPrimitive.Content
+ data-slot="dialog-content"
+ className={cn(
+ "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+ className
+ )}
+ {...props}
+ >
+ {children}
+ {showCloseButton && (
+ <DialogPrimitive.Close
+ data-slot="dialog-close"
+ className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+ >
+ <XIcon />
+ <span className="sr-only">Close</span>
+ </DialogPrimitive.Close>
+ )}
+ </DialogPrimitive.Content>
+ </DialogPortal>
+ )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ data-slot="dialog-header"
+ className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+ {...props}
+ />
+ )
+}
+
+function DialogFooter({
+ className,
+ showCloseButton = false,
+ children,
+ ...props
+}: React.ComponentProps<"div"> & {
+ showCloseButton?: boolean
+}) {
+ return (
+ <div
+ data-slot="dialog-footer"
+ className={cn(
+ "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+ className
+ )}
+ {...props}
+ >
+ {children}
+ {showCloseButton && (
+ <DialogPrimitive.Close asChild>
+ <Button variant="outline">Close</Button>
+ </DialogPrimitive.Close>
+ )}
+ </div>
+ )
+}
+
+function DialogTitle({
+ className,
+ ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+ return (
+ <DialogPrimitive.Title
+ data-slot="dialog-title"
+ className={cn("text-lg leading-none font-semibold", className)}
+ {...props}
+ />
+ )
+}
+
+function DialogDescription({
+ className,
+ ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+ return (
+ <DialogPrimitive.Description
+ data-slot="dialog-description"
+ className={cn("text-muted-foreground text-sm", className)}
+ {...props}
+ />
+ )
+}
+
+export {
+ Dialog,
+ DialogClose,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogOverlay,
+ DialogPortal,
+ DialogTitle,
+ DialogTrigger,
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | "use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+ return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+ return (
+ <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+ )
+}
+
+function DropdownMenuTrigger({
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+ return (
+ <DropdownMenuPrimitive.Trigger
+ data-slot="dropdown-menu-trigger"
+ {...props}
+ />
+ )
+}
+
+function DropdownMenuContent({
+ className,
+ sideOffset = 4,
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+ return (
+ <DropdownMenuPrimitive.Portal>
+ <DropdownMenuPrimitive.Content
+ data-slot="dropdown-menu-content"
+ sideOffset={sideOffset}
+ className={cn(
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+ className
+ )}
+ {...props}
+ />
+ </DropdownMenuPrimitive.Portal>
+ )
+}
+
+function DropdownMenuGroup({
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+ return (
+ <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+ )
+}
+
+function DropdownMenuItem({
+ className,
+ inset,
+ variant = "default",
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+ inset?: boolean
+ variant?: "default" | "destructive"
+}) {
+ return (
+ <DropdownMenuPrimitive.Item
+ data-slot="dropdown-menu-item"
+ data-inset={inset}
+ data-variant={variant}
+ className={cn(
+ "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function DropdownMenuCheckboxItem({
+ className,
+ children,
+ checked,
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+ return (
+ <DropdownMenuPrimitive.CheckboxItem
+ data-slot="dropdown-menu-checkbox-item"
+ className={cn(
+ "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ className
+ )}
+ checked={checked}
+ {...props}
+ >
+ <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+ <DropdownMenuPrimitive.ItemIndicator>
+ <CheckIcon className="size-4" />
+ </DropdownMenuPrimitive.ItemIndicator>
+ </span>
+ {children}
+ </DropdownMenuPrimitive.CheckboxItem>
+ )
+}
+
+function DropdownMenuRadioGroup({
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+ return (
+ <DropdownMenuPrimitive.RadioGroup
+ data-slot="dropdown-menu-radio-group"
+ {...props}
+ />
+ )
+}
+
+function DropdownMenuRadioItem({
+ className,
+ children,
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+ return (
+ <DropdownMenuPrimitive.RadioItem
+ data-slot="dropdown-menu-radio-item"
+ className={cn(
+ "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ className
+ )}
+ {...props}
+ >
+ <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+ <DropdownMenuPrimitive.ItemIndicator>
+ <CircleIcon className="size-2 fill-current" />
+ </DropdownMenuPrimitive.ItemIndicator>
+ </span>
+ {children}
+ </DropdownMenuPrimitive.RadioItem>
+ )
+}
+
+function DropdownMenuLabel({
+ className,
+ inset,
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+ inset?: boolean
+}) {
+ return (
+ <DropdownMenuPrimitive.Label
+ data-slot="dropdown-menu-label"
+ data-inset={inset}
+ className={cn(
+ "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function DropdownMenuSeparator({
+ className,
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+ return (
+ <DropdownMenuPrimitive.Separator
+ data-slot="dropdown-menu-separator"
+ className={cn("bg-border -mx-1 my-1 h-px", className)}
+ {...props}
+ />
+ )
+}
+
+function DropdownMenuShortcut({
+ className,
+ ...props
+}: React.ComponentProps<"span">) {
+ return (
+ <span
+ data-slot="dropdown-menu-shortcut"
+ className={cn(
+ "text-muted-foreground ml-auto text-xs tracking-widest",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function DropdownMenuSub({
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+ return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+ className,
+ inset,
+ children,
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+ inset?: boolean
+}) {
+ return (
+ <DropdownMenuPrimitive.SubTrigger
+ data-slot="dropdown-menu-sub-trigger"
+ data-inset={inset}
+ className={cn(
+ "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ className
+ )}
+ {...props}
+ >
+ {children}
+ <ChevronRightIcon className="ml-auto size-4" />
+ </DropdownMenuPrimitive.SubTrigger>
+ )
+}
+
+function DropdownMenuSubContent({
+ className,
+ ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+ return (
+ <DropdownMenuPrimitive.SubContent
+ data-slot="dropdown-menu-sub-content"
+ className={cn(
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+export {
+ DropdownMenu,
+ DropdownMenuPortal,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuLabel,
+ DropdownMenuItem,
+ DropdownMenuCheckboxItem,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuSub,
+ DropdownMenuSubTrigger,
+ DropdownMenuSubContent,
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| badge.tsx | +
+
+ |
+ 33.33% | +1/3 | +0% | +0/4 | +0% | +0/1 | +33.33% | +1/3 | +
| button.tsx | +
+
+ |
+ 100% | +3/3 | +80% | +4/5 | +100% | +1/1 | +100% | +3/3 | +
| card.tsx | +
+
+ |
+ 0% | +0/7 | +100% | +0/0 | +0% | +0/7 | +0% | +0/7 | +
| dialog.tsx | +
+
+ |
+ 70% | +7/10 | +66.66% | +4/6 | +70% | +7/10 | +70% | +7/10 | +
| dropdown-menu.tsx | +
+
+ |
+ 0% | +0/15 | +0% | +0/2 | +0% | +0/15 | +0% | +0/15 | +
| input.tsx | +
+
+ |
+ 100% | +1/1 | +100% | +0/0 | +100% | +1/1 | +100% | +1/1 | +
| scroll-area.tsx | +
+
+ |
+ 0% | +0/2 | +0% | +0/5 | +0% | +0/2 | +0% | +0/2 | +
| select.tsx | +
+
+ |
+ 0% | +0/10 | +0% | +0/7 | +0% | +0/10 | +0% | +0/10 | +
| separator.tsx | +
+
+ |
+ 0% | +0/1 | +0% | +0/2 | +0% | +0/1 | +0% | +0/1 | +
| tabs.tsx | +
+
+ |
+ 0% | +0/5 | +0% | +0/2 | +0% | +0/4 | +0% | +0/5 | +
| tooltip.tsx | +
+
+ |
+ 0% | +0/4 | +0% | +0/2 | +0% | +0/4 | +0% | +0/4 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 | + + + + +14x + + + + + + + + + + + + + + + + | import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+ return (
+ <input
+ type={type}
+ data-slot="input"
+ className={cn(
+ "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+ "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+ "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+export { Input }
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+ className,
+ children,
+ ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+ return (
+ <ScrollAreaPrimitive.Root
+ data-slot="scroll-area"
+ className={cn("relative", className)}
+ {...props}
+ >
+ <ScrollAreaPrimitive.Viewport
+ data-slot="scroll-area-viewport"
+ className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+ >
+ {children}
+ </ScrollAreaPrimitive.Viewport>
+ <ScrollBar />
+ <ScrollAreaPrimitive.Corner />
+ </ScrollAreaPrimitive.Root>
+ )
+}
+
+function ScrollBar({
+ className,
+ orientation = "vertical",
+ ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+ return (
+ <ScrollAreaPrimitive.ScrollAreaScrollbar
+ data-slot="scroll-area-scrollbar"
+ orientation={orientation}
+ className={cn(
+ "flex touch-none p-px transition-colors select-none",
+ orientation === "vertical" &&
+ "h-full w-2.5 border-l border-l-transparent",
+ orientation === "horizontal" &&
+ "h-2.5 flex-col border-t border-t-transparent",
+ className
+ )}
+ {...props}
+ >
+ <ScrollAreaPrimitive.ScrollAreaThumb
+ data-slot="scroll-area-thumb"
+ className="bg-border relative flex-1 rounded-full"
+ />
+ </ScrollAreaPrimitive.ScrollAreaScrollbar>
+ )
+}
+
+export { ScrollArea, ScrollBar }
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import * as React from "react"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+ ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+ return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+ ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+ return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+ ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+ return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+ className,
+ size = "default",
+ children,
+ ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+ size?: "sm" | "default"
+}) {
+ return (
+ <SelectPrimitive.Trigger
+ data-slot="select-trigger"
+ data-size={size}
+ className={cn(
+ "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ className
+ )}
+ {...props}
+ >
+ {children}
+ <SelectPrimitive.Icon asChild>
+ <ChevronDownIcon className="size-4 opacity-50" />
+ </SelectPrimitive.Icon>
+ </SelectPrimitive.Trigger>
+ )
+}
+
+function SelectContent({
+ className,
+ children,
+ position = "item-aligned",
+ align = "center",
+ ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+ return (
+ <SelectPrimitive.Portal>
+ <SelectPrimitive.Content
+ data-slot="select-content"
+ className={cn(
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+ position === "popper" &&
+ "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+ className
+ )}
+ position={position}
+ align={align}
+ {...props}
+ >
+ <SelectScrollUpButton />
+ <SelectPrimitive.Viewport
+ className={cn(
+ "p-1",
+ position === "popper" &&
+ "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+ )}
+ >
+ {children}
+ </SelectPrimitive.Viewport>
+ <SelectScrollDownButton />
+ </SelectPrimitive.Content>
+ </SelectPrimitive.Portal>
+ )
+}
+
+function SelectLabel({
+ className,
+ ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+ return (
+ <SelectPrimitive.Label
+ data-slot="select-label"
+ className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+ {...props}
+ />
+ )
+}
+
+function SelectItem({
+ className,
+ children,
+ ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+ return (
+ <SelectPrimitive.Item
+ data-slot="select-item"
+ className={cn(
+ "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+ className
+ )}
+ {...props}
+ >
+ <span
+ data-slot="select-item-indicator"
+ className="absolute right-2 flex size-3.5 items-center justify-center"
+ >
+ <SelectPrimitive.ItemIndicator>
+ <CheckIcon className="size-4" />
+ </SelectPrimitive.ItemIndicator>
+ </span>
+ <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+ </SelectPrimitive.Item>
+ )
+}
+
+function SelectSeparator({
+ className,
+ ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+ return (
+ <SelectPrimitive.Separator
+ data-slot="select-separator"
+ className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+ {...props}
+ />
+ )
+}
+
+function SelectScrollUpButton({
+ className,
+ ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+ return (
+ <SelectPrimitive.ScrollUpButton
+ data-slot="select-scroll-up-button"
+ className={cn(
+ "flex cursor-default items-center justify-center py-1",
+ className
+ )}
+ {...props}
+ >
+ <ChevronUpIcon className="size-4" />
+ </SelectPrimitive.ScrollUpButton>
+ )
+}
+
+function SelectScrollDownButton({
+ className,
+ ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+ return (
+ <SelectPrimitive.ScrollDownButton
+ data-slot="select-scroll-down-button"
+ className={cn(
+ "flex cursor-default items-center justify-center py-1",
+ className
+ )}
+ {...props}
+ >
+ <ChevronDownIcon className="size-4" />
+ </SelectPrimitive.ScrollDownButton>
+ )
+}
+
+export {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectScrollDownButton,
+ SelectScrollUpButton,
+ SelectSeparator,
+ SelectTrigger,
+ SelectValue,
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + | "use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+ className,
+ orientation = "horizontal",
+ decorative = true,
+ ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+ return (
+ <SeparatorPrimitive.Root
+ data-slot="separator"
+ decorative={decorative}
+ orientation={orientation}
+ className={cn(
+ "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+export { Separator }
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+ className,
+ orientation = "horizontal",
+ ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+ return (
+ <TabsPrimitive.Root
+ data-slot="tabs"
+ data-orientation={orientation}
+ orientation={orientation}
+ className={cn(
+ "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+const tabsListVariants = cva(
+ "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+ {
+ variants: {
+ variant: {
+ default: "bg-muted",
+ line: "gap-1 bg-transparent",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function TabsList({
+ className,
+ variant = "default",
+ ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+ VariantProps<typeof tabsListVariants>) {
+ return (
+ <TabsPrimitive.List
+ data-slot="tabs-list"
+ data-variant={variant}
+ className={cn(tabsListVariants({ variant }), className)}
+ {...props}
+ />
+ )
+}
+
+function TabsTrigger({
+ className,
+ ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+ return (
+ <TabsPrimitive.Trigger
+ data-slot="tabs-trigger"
+ className={cn(
+ "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+ "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
+ "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TabsContent({
+ className,
+ ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+ return (
+ <TabsPrimitive.Content
+ data-slot="tabs-content"
+ className={cn("flex-1 outline-none", className)}
+ {...props}
+ />
+ )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | "use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+ delayDuration = 0,
+ ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+ return (
+ <TooltipPrimitive.Provider
+ data-slot="tooltip-provider"
+ delayDuration={delayDuration}
+ {...props}
+ />
+ )
+}
+
+function Tooltip({
+ ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+ return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+ ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+ return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+ className,
+ sideOffset = 0,
+ children,
+ ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+ return (
+ <TooltipPrimitive.Portal>
+ <TooltipPrimitive.Content
+ data-slot="tooltip-content"
+ sideOffset={sideOffset}
+ className={cn(
+ "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+ className
+ )}
+ {...props}
+ >
+ {children}
+ <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+ </TooltipPrimitive.Content>
+ </TooltipPrimitive.Portal>
+ )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| useAIChat.ts | +
+
+ |
+ 0% | +0/74 | +0% | +0/30 | +0% | +0/15 | +0% | +0/61 | +
| useAppKeyboard.ts | +
+
+ |
+ 75% | +15/20 | +37.5% | +3/8 | +75% | +6/8 | +80% | +12/15 | +
| useKeyboardNavigation.ts | +
+
+ |
+ 51.85% | +28/54 | +26.31% | +10/38 | +54.54% | +6/11 | +56.25% | +27/48 | +
| useMcpBridge.ts | +
+
+ |
+ 0% | +0/48 | +0% | +0/11 | +0% | +0/14 | +0% | +0/47 | +
| useNoteActions.ts | +
+
+ |
+ 13.87% | +34/245 | +1.88% | +2/106 | +8.88% | +4/45 | +15.23% | +32/210 | +
| useSectionVisibility.ts | +
+
+ |
+ 100% | +21/21 | +83.33% | +5/6 | +100% | +6/6 | +100% | +20/20 | +
| useTheme.ts | +
+
+ |
+ 95.45% | +21/22 | +93.75% | +15/16 | +100% | +5/5 | +100% | +20/20 | +
| useVaultLoader.ts | +
+
+ |
+ 47.22% | +34/72 | +18.75% | +3/16 | +26.31% | +5/19 | +51.51% | +34/66 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | /**
+ * Custom hook encapsulating AI chat state and message handling.
+ */
+import { useState, useCallback, useRef } from 'react'
+import type { VaultEntry } from '../types'
+import {
+ type ChatMessage, nextMessageId, getApiKey,
+ buildSystemPrompt, streamChat,
+} from '../utils/ai-chat'
+import { countWords } from '../utils/wikilinks'
+
+function generateMockResponse(message: string, entry: VaultEntry | null, content: string): string {
+ const title = entry?.title ?? 'Untitled'
+ const words = countWords(content)
+ const lower = message.toLowerCase()
+
+ if (lower.includes('summarize')) {
+ return `This note is about **${title}**. It contains ${words} words covering the main concepts documented in your vault.`
+ }
+ if (lower.includes('expand')) {
+ return `Here are some ways to expand this note:\n\n1. Add more detail to the introduction\n2. Include related examples\n3. Connect it to your quarterly goals\n4. Add a summary section at the end`
+ }
+ if (lower.includes('grammar')) {
+ return `I reviewed the document for grammar issues. The writing looks clean overall — no major errors found.`
+ }
+
+ return `Based on **${title}**, I can help with analysis, summarization, or expansion. What would you like to focus on?`
+}
+
+export function useAIChat(
+ entry: VaultEntry | null,
+ allContent: Record<string, string>,
+ contextNotes: VaultEntry[],
+ model: string,
+) {
+ const [messages, setMessages] = useState<ChatMessage[]>([])
+ const [isStreaming, setIsStreaming] = useState(false)
+ const [streamingContent, setStreamingContent] = useState('')
+ const abortRef = useRef(false)
+
+ const sendMessage = useCallback((text: string) => {
+ if (!text.trim() || isStreaming) return
+
+ const userMsg: ChatMessage = { role: 'user', content: text.trim(), id: nextMessageId() }
+ setMessages(prev => [...prev, userMsg])
+ setIsStreaming(true)
+ setStreamingContent('')
+ abortRef.current = false
+
+ const allMessages = [...messages, userMsg].map(m => ({ role: m.role, content: m.content }))
+ const hasApiKey = !!getApiKey()
+
+ if (!hasApiKey) {
+ const content = entry ? (allContent[entry.path] ?? '') : ''
+ setTimeout(() => {
+ if (abortRef.current) return
+ const response = generateMockResponse(text, entry, content)
+ setMessages(prev => [...prev, { role: 'assistant', content: response, id: nextMessageId() }])
+ setIsStreaming(false)
+ }, 800)
+ return
+ }
+
+ const { prompt: systemPrompt } = buildSystemPrompt(contextNotes, allContent, model)
+ let accumulated = ''
+
+ const onChunk = (chunk: string) => {
+ if (abortRef.current) return
+ accumulated += chunk
+ setStreamingContent(accumulated)
+ }
+
+ const onDone = () => {
+ if (abortRef.current) return
+ setMessages(prev => [...prev, { role: 'assistant', content: accumulated, id: nextMessageId() }])
+ setStreamingContent('')
+ setIsStreaming(false)
+ }
+
+ const onError = (error: string) => {
+ if (abortRef.current) return
+ setMessages(prev => [...prev, { role: 'assistant', content: `Error: ${error}`, id: nextMessageId() }])
+ setStreamingContent('')
+ setIsStreaming(false)
+ }
+
+ streamChat(allMessages, systemPrompt, model, onChunk, onDone, onError)
+ }, [isStreaming, entry, allContent, contextNotes, model, messages])
+
+ const clearConversation = useCallback(() => {
+ abortRef.current = true
+ setMessages([])
+ setIsStreaming(false)
+ setStreamingContent('')
+ }, [])
+
+ const retryMessage = useCallback((msgIndex: number) => {
+ const userMsgIndex = msgIndex - 1
+ if (userMsgIndex < 0) return
+ const userMsg = messages[userMsgIndex]
+ if (userMsg.role !== 'user') return
+
+ setMessages(prev => prev.slice(0, msgIndex))
+ sendMessage(userMsg.content)
+ }, [messages, sendMessage])
+
+ return { messages, isStreaming, streamingContent, sendMessage, clearConversation, retryMessage }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 | + + + + + + + + + + + + + + + + + +88x + + + + +22x + + + + + + + + + +22x +22x +1x +1x +1x +1x +1x +1x + + +22x +22x + + + | import { useEffect, useMemo } from 'react'
+
+interface KeyboardActions {
+ onQuickOpen: () => void
+ onCreateNote: () => void
+ onSave: () => void
+ onTrashNote: (path: string) => void
+ onArchiveNote: (path: string) => void
+ activeTabPathRef: React.MutableRefObject<string | null>
+ handleCloseTabRef: React.MutableRefObject<(path: string) => void>
+}
+
+type ShortcutHandler = () => void
+
+export function useAppKeyboard({
+ onQuickOpen, onCreateNote, onSave, onTrashNote, onArchiveNote,
+ activeTabPathRef, handleCloseTabRef,
+}: KeyboardActions) {
+ const withActiveTab = (fn: (path: string) => void): ShortcutHandler => () => {
+ const path = activeTabPathRef.current
+ if (path) fn(path)
+ }
+
+ const keyMap = useMemo((): Record<string, ShortcutHandler> => ({
+ p: onQuickOpen,
+ n: onCreateNote,
+ s: onSave,
+ e: withActiveTab(onArchiveNote),
+ w: withActiveTab((path) => handleCloseTabRef.current(path)),
+ Backspace: withActiveTab(onTrashNote),
+ Delete: withActiveTab(onTrashNote),
+ }), [onQuickOpen, onCreateNote, onSave, onTrashNote, onArchiveNote, activeTabPathRef, handleCloseTabRef])
+
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ const mod = e.metaKey || e.ctrlKey
+ Iif (!mod) return
+ const handler = keyMap[e.key]
+ Eif (handler) {
+ e.preventDefault()
+ handler()
+ }
+ }
+ window.addEventListener('keydown', handleKeyDown)
+ return () => window.removeEventListener('keydown', handleKeyDown)
+ }, [keyMap])
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 | + + + + + + + + + + + + + + + + + + + + + + + + + +21x + + + +21x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +22x +21x + + + +22x +22x +22x +22x +22x +22x +22x +22x +22x +22x +22x +22x + +22x +7x + +7x +1x +1x + +1x + + +1x + +1x + + +1x + + + + + +7x +7x + + + | import { useEffect, useMemo, useRef } from 'react'
+import { isTauri } from '../mock-tauri'
+import { filterEntries, sortByModified, buildRelationshipGroups } from '../components/NoteList'
+import type { VaultEntry, SidebarSelection } from '../types'
+
+interface Tab {
+ entry: VaultEntry
+ content: string
+}
+
+interface KeyboardNavigationOptions {
+ tabs: Tab[]
+ activeTabPath: string | null
+ entries: VaultEntry[]
+ selection: SidebarSelection
+ allContent: Record<string, string>
+ onSwitchTab: (path: string) => void
+ onReplaceActiveTab: (entry: VaultEntry) => void
+ onSelectNote: (entry: VaultEntry) => void
+}
+
+function computeVisibleNotes(
+ entries: VaultEntry[],
+ selection: SidebarSelection,
+ allContent: Record<string, string>,
+): VaultEntry[] {
+ Iif (selection.kind === 'entity') {
+ return buildRelationshipGroups(selection.entry, entries, allContent)
+ .flatMap((g) => g.entries)
+ }
+ return [...filterEntries(entries, selection)].sort(sortByModified)
+}
+
+function navigateTab(
+ tabsRef: React.RefObject<Tab[]>,
+ activeTabPathRef: React.RefObject<string | null>,
+ onSwitchTab: React.RefObject<(path: string) => void>,
+ direction: 1 | -1,
+) {
+ const currentTabs = tabsRef.current!
+ if (currentTabs.length === 0) return
+
+ const currentPath = activeTabPathRef.current
+ const currentIndex = currentTabs.findIndex((t) => t.entry.path === currentPath)
+ const nextIndex = (currentIndex + direction + currentTabs.length) % currentTabs.length
+ onSwitchTab.current!(currentTabs[nextIndex].entry.path)
+}
+
+function navigateNote(
+ visibleNotesRef: React.RefObject<VaultEntry[]>,
+ activeTabPathRef: React.RefObject<string | null>,
+ onReplace: React.RefObject<(entry: VaultEntry) => void>,
+ onSelect: React.RefObject<(entry: VaultEntry) => void>,
+ direction: 1 | -1,
+) {
+ const notes = visibleNotesRef.current!
+ if (notes.length === 0) return
+
+ const currentPath = activeTabPathRef.current
+ const currentIndex = notes.findIndex((n) => n.path === currentPath)
+
+ const nextIndex = currentIndex === -1
+ ? (direction === 1 ? 0 : notes.length - 1)
+ : (currentIndex + direction + notes.length) % notes.length
+
+ const nextNote = notes[nextIndex]
+ if (currentPath) {
+ onReplace.current!(nextNote)
+ } else {
+ onSelect.current!(nextNote)
+ }
+}
+
+export function useKeyboardNavigation({
+ tabs,
+ activeTabPath,
+ entries,
+ selection,
+ allContent,
+ onSwitchTab,
+ onReplaceActiveTab,
+ onSelectNote,
+}: KeyboardNavigationOptions) {
+ const visibleNotes = useMemo(
+ () => computeVisibleNotes(entries, selection, allContent),
+ [entries, selection, allContent],
+ )
+
+ const tabsRef = useRef(tabs)
+ tabsRef.current = tabs
+ const activeTabPathRef = useRef(activeTabPath)
+ activeTabPathRef.current = activeTabPath
+ const visibleNotesRef = useRef(visibleNotes)
+ visibleNotesRef.current = visibleNotes
+ const onSwitchTabRef = useRef(onSwitchTab)
+ onSwitchTabRef.current = onSwitchTab
+ const onReplaceRef = useRef(onReplaceActiveTab)
+ onReplaceRef.current = onReplaceActiveTab
+ const onSelectNoteRef = useRef(onSelectNote)
+ onSelectNoteRef.current = onSelectNote
+
+ useEffect(() => {
+ const isRunningInTauri = isTauri()
+
+ const handleKeyDown = (e: KeyboardEvent) => {
+ const mod = e.metaKey || e.ctrlKey
+ Iif (!mod) return
+
+ const isTabShortcut = isRunningInTauri
+ ? e.altKey && !e.shiftKey
+ : e.shiftKey && !e.altKey
+ const isNoteShortcut = e.altKey && !e.shiftKey
+
+ Iif (isTabShortcut && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
+ e.preventDefault()
+ navigateTab(tabsRef, activeTabPathRef, onSwitchTabRef, e.key === 'ArrowRight' ? 1 : -1)
+ I} else if (isNoteShortcut && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+ e.preventDefault()
+ navigateNote(visibleNotesRef, activeTabPathRef, onReplaceRef, onSelectNoteRef, e.key === 'ArrowDown' ? 1 : -1)
+ }
+ }
+
+ window.addEventListener('keydown', handleKeyDown)
+ return () => window.removeEventListener('keydown', handleKeyDown)
+ }, [])
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | /**
+ * Hook for communicating with the Laputa MCP WebSocket bridge.
+ *
+ * Provides typed tool invocations for vault operations:
+ * - readNote, createNote, searchNotes, appendToNote
+ *
+ * Connection is lazy — only opens when first tool is called.
+ */
+import { useCallback, useRef, useState } from 'react'
+
+const DEFAULT_WS_URL = 'ws://localhost:9710'
+
+interface PendingRequest {
+ resolve: (value: any) => void
+ reject: (reason: any) => void
+}
+
+interface SearchResult {
+ path: string
+ title: string
+ snippet: string
+}
+
+export function useMcpBridge(wsUrl = DEFAULT_WS_URL) {
+ const wsRef = useRef<WebSocket | null>(null)
+ const pendingRef = useRef<Map<string, PendingRequest>>(new Map())
+ const idCounterRef = useRef(0)
+ const [connected, setConnected] = useState(false)
+
+ const ensureConnection = useCallback((): Promise<WebSocket> => {
+ const ws = wsRef.current
+ if (ws && ws.readyState === WebSocket.OPEN) return Promise.resolve(ws)
+
+ return new Promise((resolve, reject) => {
+ const newWs = new WebSocket(wsUrl)
+
+ newWs.onopen = () => {
+ wsRef.current = newWs
+ setConnected(true)
+ resolve(newWs)
+ }
+
+ newWs.onmessage = (event) => {
+ try {
+ const msg = JSON.parse(event.data)
+ const pending = pendingRef.current.get(msg.id)
+ if (pending) {
+ pendingRef.current.delete(msg.id)
+ if (msg.error) {
+ pending.reject(new Error(msg.error))
+ } else {
+ pending.resolve(msg.result)
+ }
+ }
+ } catch {
+ // ignore malformed messages
+ }
+ }
+
+ newWs.onclose = () => {
+ wsRef.current = null
+ setConnected(false)
+ }
+
+ newWs.onerror = () => {
+ reject(new Error('WebSocket connection failed'))
+ }
+ })
+ }, [wsUrl])
+
+ const callTool = useCallback(async <T>(tool: string, args: Record<string, any>): Promise<T> => {
+ const ws = await ensureConnection()
+ const id = `mcp-${++idCounterRef.current}`
+
+ return new Promise((resolve, reject) => {
+ pendingRef.current.set(id, { resolve, reject })
+ ws.send(JSON.stringify({ id, tool, args }))
+
+ // Timeout after 30 seconds
+ setTimeout(() => {
+ if (pendingRef.current.has(id)) {
+ pendingRef.current.delete(id)
+ reject(new Error('MCP tool call timed out'))
+ }
+ }, 30_000)
+ })
+ }, [ensureConnection])
+
+ const readNote = useCallback(
+ (path: string) => callTool<{ content: string }>('read_note', { path }),
+ [callTool],
+ )
+
+ const createNote = useCallback(
+ (path: string, title: string, isA?: string) =>
+ callTool<string>('create_note', { path, title, is_a: isA }),
+ [callTool],
+ )
+
+ const searchNotes = useCallback(
+ (query: string, limit?: number) =>
+ callTool<SearchResult[]>('search_notes', { query, limit }),
+ [callTool],
+ )
+
+ const appendToNote = useCallback(
+ (path: string, text: string) =>
+ callTool<{ ok: boolean }>('append_to_note', { path, text }),
+ [callTool],
+ )
+
+ return { connected, readNote, createNote, searchNotes, appendToNote, callTool }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + +7x +7x +7x + +7x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +22x +22x +22x +22x +22x +22x +22x + +22x + + + + + + + + + + + + + + + + + + + + + + + + +22x + + + + + + + + + + + + +22x + +22x + + + +22x + + + + + + + + + + + + + + + + + + + + + + +22x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +22x + + + + + + + + + + + + + + + + + + + + + + +22x + + + + + + + + + + + + + + + + + + + + + + + + + +22x + + + + + + + + + + + + + + + + + + + +22x + + + +22x + + + + + + +22x + + + + + + + + + + +22x +7x + + +7x + + + + +22x +7x +7x + + + + + + + + + + + + + + + + + + + + + +22x + + + + +22x + + + + + + + + + + + + + + + + + + + | import { useCallback, useEffect, useRef, useState } from 'react'
+import { invoke } from '@tauri-apps/api/core'
+import { isTauri, mockInvoke, addMockEntry, updateMockContent } from '../mock-tauri'
+import type { VaultEntry } from '../types'
+import type { FrontmatterValue } from '../components/Inspector'
+
+interface Tab {
+ entry: VaultEntry
+ content: string
+}
+
+// Mock frontmatter helpers for browser testing
+function updateMockFrontmatter(path: string, key: string, value: FrontmatterValue): string {
+ const content = window.__mockContent?.[path] || ''
+ const yamlKey = key.includes(' ') ? `"${key}"` : key
+
+ let yamlValue: string
+ if (Array.isArray(value)) {
+ yamlValue = '\n' + value.map(v => ` - "${v}"`).join('\n')
+ } else if (typeof value === 'boolean') {
+ yamlValue = value ? 'true' : 'false'
+ } else if (value === null) {
+ yamlValue = 'null'
+ } else {
+ yamlValue = String(value)
+ }
+
+ if (!content.startsWith('---\n')) {
+ return `---\n${yamlKey}: ${yamlValue}\n---\n${content}`
+ }
+
+ const fmEnd = content.indexOf('\n---', 4)
+ if (fmEnd === -1) return content
+
+ const fm = content.slice(4, fmEnd)
+ const rest = content.slice(fmEnd + 4)
+ const keyPattern = new RegExp(`^["']?${key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}["']?\\s*:`, 'm')
+
+ if (keyPattern.test(fm)) {
+ const lines = fm.split('\n')
+ const newLines: string[] = []
+ let i = 0
+ while (i < lines.length) {
+ if (keyPattern.test(lines[i])) {
+ i++
+ while (i < lines.length && lines[i].startsWith(' - ')) i++
+ if (Array.isArray(value)) {
+ newLines.push(`${yamlKey}:${yamlValue}`)
+ } else {
+ newLines.push(`${yamlKey}: ${yamlValue}`)
+ }
+ continue
+ }
+ newLines.push(lines[i])
+ i++
+ }
+ return `---\n${newLines.join('\n')}\n---${rest}`
+ } else {
+ if (Array.isArray(value)) {
+ return `---\n${fm}\n${yamlKey}:${yamlValue}\n---${rest}`
+ } else {
+ return `---\n${fm}\n${yamlKey}: ${yamlValue}\n---${rest}`
+ }
+ }
+}
+
+function deleteMockFrontmatterProperty(path: string, key: string): string {
+ const content = window.__mockContent?.[path] || ''
+ if (!content.startsWith('---\n')) return content
+ const fmEnd = content.indexOf('\n---', 4)
+ if (fmEnd === -1) return content
+
+ const fm = content.slice(4, fmEnd)
+ const rest = content.slice(fmEnd + 4)
+ const keyPattern = new RegExp(`^["']?${key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}["']?\\s*:`, 'm')
+
+ const lines = fm.split('\n')
+ const newLines: string[] = []
+ let i = 0
+ while (i < lines.length) {
+ if (keyPattern.test(lines[i])) {
+ i++
+ while (i < lines.length && lines[i].startsWith(' - ')) i++
+ continue
+ }
+ newLines.push(lines[i])
+ i++
+ }
+ return `---\n${newLines.join('\n')}\n---${rest}`
+}
+
+const TAB_ORDER_KEY = 'laputa-tab-order'
+
+function saveTabOrder(tabs: Tab[]) {
+ try {
+ localStorage.setItem(TAB_ORDER_KEY, JSON.stringify(tabs.map(t => t.entry.path)))
+ } catch { /* localStorage may be unavailable */ }
+}
+
+function loadTabOrder(): string[] {
+ try {
+ const stored = localStorage.getItem(TAB_ORDER_KEY)
+ return stored ? JSON.parse(stored) : []
+ } catch {
+ return []
+ }
+}
+
+async function loadNoteContent(path: string): Promise<string> {
+ return isTauri()
+ ? invoke<string>('get_note_content', { path })
+ : mockInvoke<string>('get_note_content', { path })
+}
+
+async function replaceTabWithEntry(
+ entry: VaultEntry,
+ currentPath: string,
+ setTabs: React.Dispatch<React.SetStateAction<Tab[]>>,
+ setActiveTabPath: React.Dispatch<React.SetStateAction<string | null>>,
+) {
+ const applyReplace = (content: string) => {
+ setTabs((prev) => prev.map((t) =>
+ t.entry.path === currentPath ? { entry, content } : t
+ ))
+ setActiveTabPath(entry.path)
+ }
+ try {
+ applyReplace(await loadNoteContent(entry.path))
+ } catch (err) {
+ console.warn('Failed to load note content for replace:', err)
+ applyReplace('')
+ }
+}
+
+export function useNoteActions(
+ addEntry: (entry: VaultEntry, content: string) => void,
+ updateContent: (path: string, content: string) => void,
+ entries: VaultEntry[],
+ setToastMessage: (msg: string | null) => void,
+) {
+ const [tabs, setTabs] = useState<Tab[]>([])
+ const [activeTabPath, setActiveTabPath] = useState<string | null>(null)
+ const activeTabPathRef = useRef(activeTabPath)
+ activeTabPathRef.current = activeTabPath
+ const tabsRef = useRef(tabs)
+ tabsRef.current = tabs
+ const handleCloseTabRef = useRef<(path: string) => void>(() => {})
+
+ const handleSelectNote = useCallback(async (entry: VaultEntry) => {
+ // If already open, just switch — instant
+ if (tabsRef.current.some((t) => t.entry.path === entry.path)) {
+ setActiveTabPath(entry.path)
+ return
+ }
+
+ // Load content async, then add tab and set active together
+ try {
+ const content = await loadNoteContent(entry.path)
+ setTabs((prev) => {
+ if (prev.some((t) => t.entry.path === entry.path)) return prev
+ return [...prev, { entry, content }]
+ })
+ setActiveTabPath(entry.path)
+ } catch (err) {
+ console.warn('Failed to load note content:', err)
+ setTabs((prev) => {
+ if (prev.some((t) => t.entry.path === entry.path)) return prev
+ return [...prev, { entry, content: '' }]
+ })
+ setActiveTabPath(entry.path)
+ }
+ }, [])
+
+ const handleCloseTab = useCallback((path: string) => {
+ setTabs((prev) => {
+ const next = prev.filter((t) => t.entry.path !== path)
+ if (path === activeTabPathRef.current && next.length > 0) {
+ const closedIdx = prev.findIndex((t) => t.entry.path === path)
+ const newIdx = Math.min(closedIdx, next.length - 1)
+ setActiveTabPath(next[newIdx].entry.path)
+ } else if (next.length === 0) {
+ setActiveTabPath(null)
+ }
+ return next
+ })
+ }, [])
+ handleCloseTabRef.current = handleCloseTab
+
+ const handleSwitchTab = useCallback((path: string) => {
+ setActiveTabPath(path)
+ }, [])
+
+ const handleNavigateWikilink = useCallback((target: string) => {
+ const targetLower = target.toLowerCase()
+ const slugToWords = (s: string) => s.replace(/-/g, ' ').toLowerCase()
+ const targetAsWords = slugToWords(target.split('/').pop() ?? target)
+
+ const found = entries.find((e) => {
+ if (e.title.toLowerCase() === targetLower) return true
+ if (e.aliases.some((a) => a.toLowerCase() === targetLower)) return true
+ const pathStem = e.path.replace(/^.*\/Laputa\//, '').replace(/\.md$/, '')
+ if (pathStem.toLowerCase() === targetLower) return true
+ const fileStem = e.filename.replace(/\.md$/, '')
+ if (fileStem.toLowerCase() === targetLower.split('/').pop()) return true
+ if (e.title.toLowerCase() === targetAsWords) return true
+ return false
+ })
+
+ if (found) {
+ handleSelectNote(found)
+ } else {
+ console.warn(`Navigation target not found: ${target}`)
+ }
+ }, [entries, handleSelectNote])
+
+ const handleCreateNote = useCallback(async (title: string, type: string) => {
+ const typeToFolder: Record<string, string> = {
+ Note: 'note', Project: 'project', Experiment: 'experiment',
+ Responsibility: 'responsibility', Procedure: 'procedure',
+ Person: 'person', Event: 'event', Topic: 'topic',
+ }
+ // Custom types use lowercased type name as folder
+ const folder = typeToFolder[type] || type.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')
+ const slug = title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')
+ const path = `/Users/luca/Laputa/${folder}/${slug}.md`
+ const now = Math.floor(Date.now() / 1000)
+
+ const noStatusTypes = new Set(['Topic', 'Person'])
+ const newEntry: VaultEntry = {
+ path, filename: `${slug}.md`, title, isA: type,
+ aliases: [], belongsTo: [], relatedTo: [],
+ status: noStatusTypes.has(type) ? null : 'Active',
+ owner: null, cadence: null, archived: false, trashed: false, trashedAt: null,
+ modifiedAt: now, createdAt: now, fileSize: 0,
+ snippet: '', relationships: {}, icon: null, color: null, order: null,
+ }
+
+ const frontmatter = [
+ '---', `title: ${title}`, `is_a: ${type}`,
+ ...(newEntry.status ? [`status: ${newEntry.status}`] : []),
+ '---',
+ ].join('\n')
+ const content = `${frontmatter}\n\n# ${title}\n\n`
+
+ if (!isTauri()) {
+ addMockEntry(newEntry, content)
+ }
+
+ addEntry(newEntry, content)
+ handleSelectNote(newEntry)
+ }, [handleSelectNote, addEntry])
+
+ const handleCreateType = useCallback(async (typeName: string) => {
+ const slug = typeName.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')
+ const path = `/Users/luca/Laputa/type/${slug}.md`
+ const now = Math.floor(Date.now() / 1000)
+
+ const newEntry: VaultEntry = {
+ path, filename: `${slug}.md`, title: typeName, isA: 'Type',
+ aliases: [], belongsTo: [], relatedTo: [],
+ status: null, owner: null, cadence: null, archived: false, trashed: false, trashedAt: null,
+ modifiedAt: now, createdAt: now, fileSize: 0,
+ snippet: '', relationships: {}, icon: null, color: null, order: null,
+ }
+
+ const content = `---\nIs A: Type\n---\n\n# ${typeName}\n\n`
+
+ if (!isTauri()) {
+ addMockEntry(newEntry, content)
+ }
+
+ addEntry(newEntry, content)
+ handleSelectNote(newEntry)
+ }, [handleSelectNote, addEntry])
+
+ const handleUpdateFrontmatter = useCallback(async (path: string, key: string, value: FrontmatterValue) => {
+ try {
+ let newContent: string
+ if (isTauri()) {
+ let rustValue: unknown = value
+ if (Array.isArray(value)) rustValue = value
+ else if (typeof value === 'boolean') rustValue = value
+ else if (typeof value === 'number') rustValue = value
+ else if (value === null) rustValue = null
+ else rustValue = String(value)
+ newContent = await invoke<string>('update_frontmatter', { path, key, value: rustValue })
+ } else {
+ newContent = updateMockFrontmatter(path, key, value)
+ updateMockContent(path, newContent)
+ }
+ setTabs((prev) => prev.map((t) =>
+ t.entry.path === path ? { ...t, content: newContent } : t
+ ))
+ updateContent(path, newContent)
+ setToastMessage('Property updated')
+ } catch (err) {
+ console.error('Failed to update frontmatter:', err)
+ setToastMessage('Failed to update property')
+ }
+ }, [updateContent, setToastMessage])
+
+ const handleDeleteProperty = useCallback(async (path: string, key: string) => {
+ try {
+ let newContent: string
+ if (isTauri()) {
+ newContent = await invoke<string>('delete_frontmatter_property', { path, key })
+ } else {
+ newContent = deleteMockFrontmatterProperty(path, key)
+ updateMockContent(path, newContent)
+ }
+ setTabs((prev) => prev.map((t) =>
+ t.entry.path === path ? { ...t, content: newContent } : t
+ ))
+ updateContent(path, newContent)
+ setToastMessage('Property deleted')
+ } catch (err) {
+ console.error('Failed to delete property:', err)
+ setToastMessage('Failed to delete property')
+ }
+ }, [updateContent, setToastMessage])
+
+ const handleAddProperty = useCallback(async (path: string, key: string, value: FrontmatterValue) => {
+ return handleUpdateFrontmatter(path, key, value)
+ }, [handleUpdateFrontmatter])
+
+ const handleReplaceActiveTab = useCallback(async (entry: VaultEntry) => {
+ const currentPath = activeTabPathRef.current
+ if (!currentPath) { handleSelectNote(entry); return }
+ if (currentPath === entry.path) return
+ replaceTabWithEntry(entry, currentPath, setTabs, setActiveTabPath)
+ }, [handleSelectNote])
+
+ const handleReorderTabs = useCallback((fromIndex: number, toIndex: number) => {
+ setTabs((prev) => {
+ const next = [...prev]
+ const [moved] = next.splice(fromIndex, 1)
+ next.splice(toIndex, 0, moved)
+ saveTabOrder(next)
+ return next
+ })
+ }, [])
+
+ // Persist tab order to localStorage whenever tabs change
+ useEffect(() => {
+ Iif (tabs.length > 0) {
+ saveTabOrder(tabs)
+ } else {
+ try { localStorage.removeItem(TAB_ORDER_KEY) } catch { /* noop */ }
+ }
+ }, [tabs])
+
+ // Restore tab order from localStorage on mount
+ useEffect(() => {
+ const savedOrder = loadTabOrder()
+ Eif (savedOrder.length === 0) return
+
+ setTabs((prev) => {
+ if (prev.length <= 1) return prev
+ const pathToTab = new Map(prev.map(t => [t.entry.path, t]))
+ const ordered: Tab[] = []
+ for (const path of savedOrder) {
+ const tab = pathToTab.get(path)
+ if (tab) {
+ ordered.push(tab)
+ pathToTab.delete(path)
+ }
+ }
+ // Append any tabs not in saved order (newly opened)
+ for (const tab of pathToTab.values()) {
+ ordered.push(tab)
+ }
+ return ordered
+ })
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
+
+ const closeAllTabs = useCallback(() => {
+ setTabs([])
+ setActiveTabPath(null)
+ }, [])
+
+ return {
+ tabs,
+ activeTabPath,
+ activeTabPathRef,
+ handleCloseTabRef,
+ handleSelectNote,
+ handleCloseTab,
+ handleSwitchTab,
+ handleReorderTabs,
+ handleNavigateWikilink,
+ handleCreateNote,
+ handleCreateType,
+ handleUpdateFrontmatter,
+ handleDeleteProperty,
+ handleAddProperty,
+ handleReplaceActiveTab,
+ closeAllTabs,
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 | + +2x + + +37x +37x +37x +2x +2x + + + + +35x + + + +4x + + + +74x + +74x +4x +4x +4x +1x + +3x + +4x +4x + + + +74x +592x + + + +74x + + | import { useState, useCallback } from 'react'
+
+const STORAGE_KEY = 'laputa-hidden-sections'
+
+function loadHiddenSections(): Set<string> {
+ try {
+ const raw = localStorage.getItem(STORAGE_KEY)
+ if (raw) {
+ const arr = JSON.parse(raw)
+ Eif (Array.isArray(arr)) return new Set(arr)
+ }
+ } catch {
+ // ignore corrupt data
+ }
+ return new Set()
+}
+
+function saveHiddenSections(hidden: Set<string>) {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify([...hidden]))
+}
+
+export function useSectionVisibility() {
+ const [hiddenSections, setHiddenSections] = useState<Set<string>>(loadHiddenSections)
+
+ const toggleSection = useCallback((type: string) => {
+ setHiddenSections((prev) => {
+ const next = new Set(prev)
+ if (next.has(type)) {
+ next.delete(type)
+ } else {
+ next.add(type)
+ }
+ saveHiddenSections(next)
+ return next
+ })
+ }, [])
+
+ const isSectionVisible = useCallback(
+ (type: string) => !hiddenSections.has(type),
+ [hiddenSections],
+ )
+
+ return { hiddenSections, toggleSection, isSectionVisible }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 | + + + + + + + + + +168x + +168x +936x + +936x +936x + +928x +160x +768x + + +456x + + +456x +456x + +312x + + + +168x + + + +936x + + + +8x +8x +8x +768x + +8x + + +8x + + | import { useMemo } from 'react'
+import themeConfig from '../theme.json'
+
+type ThemeValue = string | number | Record<string, unknown> | unknown[]
+
+/** Convert a nested theme config object into a flat map of CSS custom properties */
+function flattenTheme(
+ obj: Record<string, ThemeValue>,
+ prefix = '--'
+): Record<string, string> {
+ const result: Record<string, string> = {}
+
+ for (const [key, value] of Object.entries(obj)) {
+ const cssKey = `${prefix}${camelToKebab(key)}`
+
+ Iif (value === null || value === undefined) continue
+ if (Array.isArray(value)) continue // skip arrays (e.g. nestedBulletSymbols)
+
+ if (typeof value === 'object') {
+ Object.assign(result, flattenTheme(value as Record<string, ThemeValue>, `${cssKey}-`))
+ } else if (typeof value === 'number') {
+ // Numbers that look like px values get 'px' suffix; ratios/weights don't
+ // These are unitless values; everything else gets 'px'
+ const isUnitless = /weight|lineHeight|opacity/i.test(key) ||
+ cssKey.includes('line-height') ||
+ cssKey.includes('font-weight')
+ const needsPx = !isUnitless
+ result[cssKey] = needsPx ? `${value}px` : String(value)
+ } else {
+ result[cssKey] = String(value)
+ }
+ }
+
+ return result
+}
+
+function camelToKebab(str: string): string {
+ return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+export function useEditorTheme() {
+ const { cssVars, styleString } = useMemo(() => {
+ const vars = flattenTheme(themeConfig as Record<string, ThemeValue>)
+ const str = Object.entries(vars)
+ .map(([k, v]) => `${k}: ${v};`)
+ .join('\n')
+ return { cssVars: vars, styleString: str }
+ }, [])
+
+ return { themeConfig, cssVars, styleString }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 | + + + + + +22x +22x +22x + +22x +7x +7x +7x + +7x +7x + +7x + + +7x +7x + +7x +7x + + +7x + + +7x + +7x + + + + +7x + + +22x +7x + +7x + + +7x + +7x + + + + + + +22x +7x + + +22x + + + + +22x + + + +22x + + + +22x + + + + + + + + + + + + +22x + + + + + + + +22x + + + + + + + +22x + + + +22x + + + + + + + + + + + + + + + +22x + + + + + + + + + + + + + + + | import { useCallback, useEffect, useState } from 'react'
+import { invoke } from '@tauri-apps/api/core'
+import { isTauri, mockInvoke } from '../mock-tauri'
+import type { VaultEntry, GitCommit, ModifiedFile } from '../types'
+
+export function useVaultLoader(vaultPath: string) {
+ const [entries, setEntries] = useState<VaultEntry[]>([])
+ const [allContent, setAllContent] = useState<Record<string, string>>({})
+ const [modifiedFiles, setModifiedFiles] = useState<ModifiedFile[]>([])
+
+ useEffect(() => {
+ setEntries([])
+ setAllContent({})
+ setModifiedFiles([])
+
+ const loadVault = async () => {
+ try {
+ let result: VaultEntry[]
+ Iif (isTauri()) {
+ result = await invoke<VaultEntry[]>('list_vault', { path: vaultPath })
+ } else {
+ console.info('[mock] Using mock Tauri data for browser testing')
+ result = await mockInvoke<VaultEntry[]>('list_vault', { path: vaultPath })
+ }
+ console.log(`Vault scan complete: ${result.length} entries found`)
+ setEntries(result)
+
+ let content: Record<string, string>
+ Iif (isTauri()) {
+ content = {}
+ } else {
+ content = await mockInvoke<Record<string, string>>('get_all_content', { path: vaultPath })
+ }
+ setAllContent(content)
+ } catch (err) {
+ console.warn('Vault scan failed:', err)
+ }
+ }
+ loadVault()
+ }, [vaultPath])
+
+ const loadModifiedFiles = useCallback(async () => {
+ try {
+ let files: ModifiedFile[]
+ Iif (isTauri()) {
+ files = await invoke<ModifiedFile[]>('get_modified_files', { vaultPath })
+ } else {
+ files = await mockInvoke<ModifiedFile[]>('get_modified_files', {})
+ }
+ setModifiedFiles(files)
+ } catch (err) {
+ console.warn('Failed to load modified files:', err)
+ setModifiedFiles([])
+ }
+ }, [vaultPath])
+
+ useEffect(() => {
+ loadModifiedFiles()
+ }, [loadModifiedFiles])
+
+ const addEntry = useCallback((entry: VaultEntry, content: string) => {
+ setEntries((prev) => [entry, ...prev])
+ setAllContent((prev) => ({ ...prev, [entry.path]: content }))
+ }, [])
+
+ const updateContent = useCallback((path: string, content: string) => {
+ setAllContent((prev) => ({ ...prev, [path]: content }))
+ }, [])
+
+ const updateEntry = useCallback((path: string, patch: Partial<VaultEntry>) => {
+ setEntries((prev) => prev.map((e) => e.path === path ? { ...e, ...patch } : e))
+ }, [])
+
+ const loadGitHistory = useCallback(async (path: string): Promise<GitCommit[]> => {
+ try {
+ if (isTauri()) {
+ return await invoke<GitCommit[]>('get_file_history', { vaultPath, path })
+ } else {
+ return await mockInvoke<GitCommit[]>('get_file_history', { path })
+ }
+ } catch (err) {
+ console.warn('Failed to load git history:', err)
+ return []
+ }
+ }, [vaultPath])
+
+ const loadDiffAtCommit = useCallback(async (path: string, commitHash: string): Promise<string> => {
+ if (isTauri()) {
+ return invoke<string>('get_file_diff_at_commit', { vaultPath, path, commitHash })
+ } else {
+ return mockInvoke<string>('get_file_diff_at_commit', { path, commitHash })
+ }
+ }, [vaultPath])
+
+ const loadDiff = useCallback(async (path: string): Promise<string> => {
+ if (isTauri()) {
+ return invoke<string>('get_file_diff', { vaultPath, path })
+ } else {
+ return mockInvoke<string>('get_file_diff', { path })
+ }
+ }, [vaultPath])
+
+ const isFileModified = useCallback((path: string): boolean => {
+ return modifiedFiles.some((f) => f.path === path)
+ }, [modifiedFiles])
+
+ const commitAndPush = useCallback(async (message: string): Promise<string> => {
+ if (isTauri()) {
+ await invoke<string>('git_commit', { vaultPath, message })
+ try {
+ await invoke<string>('git_push', { vaultPath })
+ return 'Committed and pushed'
+ } catch {
+ return 'Committed (push failed)'
+ }
+ } else {
+ await mockInvoke<string>('git_commit', { message })
+ await mockInvoke<string>('git_push', {})
+ return 'Committed and pushed'
+ }
+ }, [vaultPath])
+
+ return {
+ entries,
+ allContent,
+ modifiedFiles,
+ addEntry,
+ updateEntry,
+ updateContent,
+ loadModifiedFiles,
+ loadGitHistory,
+ loadDiff,
+ loadDiffAtCommit,
+ isFileModified,
+ commitAndPush,
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ ++ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| utils.ts | +
+
+ |
+ 100% | +1/1 | +100% | +0/0 | +100% | +1/1 | +100% | +1/1 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 | + + + +1714x + + | import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | export interface VaultEntry {
+ path: string
+ filename: string
+ title: string
+ isA: string | null
+ aliases: string[]
+ belongsTo: string[]
+ relatedTo: string[]
+ status: string | null
+ owner: string | null
+ cadence: string | null
+ archived: boolean
+ trashed: boolean
+ trashedAt: number | null
+ modifiedAt: number | null
+ createdAt: number | null
+ fileSize: number
+ snippet: string
+ /** Generic relationship fields: any frontmatter key whose value contains wikilinks. */
+ relationships: Record<string, string[]>
+ /** Phosphor icon name (kebab-case) for Type entries, e.g. "cooking-pot" */
+ icon: string | null
+ /** Accent color key for Type entries: "red" | "purple" | "blue" | "green" | "yellow" | "orange" */
+ color: string | null
+ /** Display order for Type entries in sidebar (lower = higher). null = use default order. */
+ order: number | null
+}
+
+export interface GitCommit {
+ hash: string
+ shortHash: string
+ message: string
+ author: string
+ date: number // unix timestamp
+}
+
+export interface ModifiedFile {
+ path: string
+ relativePath: string
+ status: 'modified' | 'added' | 'deleted' | 'untracked' | 'renamed'
+}
+
+export type SidebarSelection =
+ | { kind: 'filter'; filter: 'all' | 'favorites' | 'archived' | 'trash' }
+ | { kind: 'sectionGroup'; type: string }
+ | { kind: 'entity'; entry: VaultEntry }
+ | { kind: 'topic'; entry: VaultEntry }
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 | + + + + + + +2x + + + + + + + + + + + + + + + + + +2x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +2x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +2x + + + + + | /**
+ * AI Chat utilities — Anthropic API client, token estimation, context building.
+ */
+
+import type { VaultEntry } from '../types'
+
+// --- localStorage key for API key ---
+const API_KEY_STORAGE_KEY = 'laputa:anthropic-api-key'
+
+export function getApiKey(): string {
+ return localStorage.getItem(API_KEY_STORAGE_KEY) ?? ''
+}
+
+export function setApiKey(key: string): void {
+ localStorage.setItem(API_KEY_STORAGE_KEY, key)
+}
+
+// --- Token estimation ---
+
+/** Rough token estimate: ~4 chars per token for English text. */
+export function estimateTokens(text: string | number): number {
+ const len = typeof text === 'number' ? text : text.length
+ return Math.ceil(len / 4)
+}
+
+const DEFAULT_CONTEXT_LIMIT = 180_000
+
+export function getContextLimit(_model: string): number {
+ return DEFAULT_CONTEXT_LIMIT
+}
+
+// --- Context building ---
+
+/** Build system prompt from selected context notes. */
+export function buildSystemPrompt(
+ notes: VaultEntry[],
+ allContent: Record<string, string>,
+ model: string,
+): { prompt: string; totalTokens: number; truncated: boolean } {
+ if (notes.length === 0) {
+ return { prompt: '', totalTokens: 0, truncated: false }
+ }
+
+ const contextBudget = Math.floor(getContextLimit(model) * 0.6)
+ const preamble = [
+ 'You are a helpful AI assistant integrated into Laputa, a personal knowledge management app.',
+ 'The user has selected the following notes as context. Use them to answer questions accurately.',
+ '',
+ ].join('\n')
+
+ const parts: string[] = [preamble]
+ let totalChars = preamble.length
+ let truncated = false
+
+ for (const note of notes) {
+ const content = allContent[note.path] ?? ''
+ const header = `--- Note: ${note.title} (${note.isA ?? 'Note'}) ---`
+ const noteText = `${header}\n${content}\n`
+
+ if (estimateTokens(totalChars + noteText.length) > contextBudget) {
+ const remaining = (contextBudget - estimateTokens(totalChars)) * 4
+ if (remaining > 200) {
+ parts.push(`${header}\n${content.slice(0, remaining)}\n[... truncated ...]`)
+ }
+ truncated = true
+ break
+ }
+
+ parts.push(noteText)
+ totalChars += noteText.length
+ }
+
+ const prompt = parts.join('\n')
+ return { prompt, totalTokens: estimateTokens(prompt), truncated }
+}
+
+// --- API types ---
+
+export interface ChatMessage {
+ role: 'user' | 'assistant'
+ content: string
+ id: string
+}
+
+let msgIdCounter = 0
+export function nextMessageId(): string {
+ return `msg-${++msgIdCounter}-${Date.now()}`
+}
+
+// --- SSE parsing ---
+
+function parseSseEvent(line: string, onChunk: (text: string) => void): boolean {
+ if (!line.startsWith('data: ')) return false
+ const data = line.slice(6)
+ if (data === '[DONE]') return true
+
+ try {
+ const event = JSON.parse(data)
+ if (event.type === 'content_block_delta' && event.delta?.text) {
+ onChunk(event.delta.text)
+ }
+ if (event.type === 'message_stop') return true
+ } catch {
+ // skip malformed events
+ }
+ return false
+}
+
+async function readSseStream(
+ reader: ReadableStreamDefaultReader<Uint8Array>,
+ onChunk: (text: string) => void,
+): Promise<void> {
+ const decoder = new TextDecoder()
+ let buffer = ''
+
+ while (true) {
+ const { value, done } = await reader.read()
+ if (done) break
+
+ buffer += decoder.decode(value, { stream: true })
+ const lines = buffer.split('\n')
+ buffer = lines.pop() ?? ''
+
+ for (const line of lines) {
+ if (parseSseEvent(line, onChunk)) return
+ }
+ }
+}
+
+async function parseApiError(response: Response): Promise<string> {
+ const errText = await response.text()
+ try {
+ const errJson = JSON.parse(errText)
+ return errJson.error?.message || errJson.error || `API error (${response.status})`
+ } catch {
+ return `API error (${response.status})`
+ }
+}
+
+// --- Streaming API call ---
+
+export async function streamChat(
+ messages: { role: 'user' | 'assistant'; content: string }[],
+ systemPrompt: string,
+ model: string,
+ onChunk: (text: string) => void,
+ onDone: () => void,
+ onError: (error: string) => void,
+): Promise<void> {
+ const apiKey = getApiKey()
+ if (!apiKey) {
+ onError('No API key configured. Click the key icon to set your Anthropic API key.')
+ return
+ }
+
+ try {
+ const response = await fetch('/api/ai/chat', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ apiKey, model, messages,
+ system: systemPrompt || undefined,
+ maxTokens: 4096,
+ }),
+ })
+
+ if (!response.ok) {
+ onError(await parseApiError(response))
+ return
+ }
+
+ const reader = response.body?.getReader()
+ if (!reader) {
+ onError('No response body')
+ return
+ }
+
+ await readSseStream(reader, onChunk)
+ onDone()
+ } catch (err: any) {
+ onError(err.message || 'Network error')
+ }
+}
+
+// --- Model options ---
+export const MODEL_OPTIONS = [
+ { value: 'claude-3-5-haiku-20241022', label: 'Haiku 3.5' },
+ { value: 'claude-sonnet-4-20250514', label: 'Sonnet 4' },
+ { value: 'claude-opus-4-20250514', label: 'Opus 4' },
+] as const
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 | + + + + + + + +26x + +16x +16x + +16x +16x + +16x +16x +16x + +16x + +16x +146x +146x +28x +28x +28x + + +118x +14x +14x +14x + + +118x +118x +118x +118x + +118x +28x + + +90x +42x +14x +14x + + +76x + +76x + + + +76x + + + + +76x + + + +16x +14x + + +16x + + | import type { FrontmatterValue } from '../components/Inspector'
+
+export interface ParsedFrontmatter {
+ [key: string]: FrontmatterValue
+}
+
+/** Parse YAML frontmatter from content */
+export function parseFrontmatter(content: string | null): ParsedFrontmatter {
+ if (!content) return {}
+
+ const match = content.match(/^---\n([\s\S]*?)\n---/)
+ Iif (!match) return {}
+
+ const yaml = match[1]
+ const result: ParsedFrontmatter = {}
+
+ let currentKey: string | null = null
+ let currentList: string[] = []
+ let inList = false
+
+ const lines = yaml.split('\n')
+
+ for (const line of lines) {
+ const listMatch = line.match(/^ - (.*)$/)
+ if (listMatch && currentKey) {
+ inList = true
+ currentList.push(listMatch[1].replace(/^["']|["']$/g, ''))
+ continue
+ }
+
+ if (inList && currentKey) {
+ result[currentKey] = currentList.length === 1 ? currentList[0] : currentList
+ currentList = []
+ inList = false
+ }
+
+ const kvMatch = line.match(/^["']?([^"':]+)["']?\s*:\s*(.*)$/)
+ Eif (kvMatch) {
+ currentKey = kvMatch[1].trim()
+ const value = kvMatch[2].trim()
+
+ if (value === '' || value === '|' || value === '>') {
+ continue
+ }
+
+ if (value.startsWith('[') && value.endsWith(']')) {
+ const items = value.slice(1, -1).split(',').map(s => s.trim().replace(/^["']|["']$/g, ''))
+ result[currentKey] = items.length === 1 ? items[0] : items
+ continue
+ }
+
+ const unquoted = value.replace(/^["']|["']$/g, '')
+
+ Iif (unquoted.toLowerCase() === 'true') {
+ result[currentKey] = true
+ continue
+ }
+ Iif (unquoted.toLowerCase() === 'false') {
+ result[currentKey] = false
+ continue
+ }
+
+ result[currentKey] = unquoted
+ }
+ }
+
+ if (inList && currentKey) {
+ result[currentKey] = currentList.length === 1 ? currentList[0] : currentList
+ }
+
+ return result
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| ai-chat.ts | +
+
+ |
+ 5.26% | +4/76 | +0% | +0/43 | +0% | +0/10 | +5.63% | +4/71 | +
| frontmatter.ts | +
+
+ |
+ 88.37% | +38/43 | +81.08% | +30/37 | +100% | +2/2 | +90% | +36/40 | +
| typeColors.ts | +
+
+ |
+ 86.66% | +13/15 | +71.42% | +10/14 | +100% | +4/4 | +100% | +13/13 | +
| wikilinks.ts | +
+
+ |
+ 65.85% | +27/41 | +56% | +14/25 | +85.71% | +6/7 | +72.22% | +26/36 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 | + + + + +5x + + + + + + + + + + +5x + + + + + + + + + + +5x +5x + + +5x + + + + + + + + +5x +30x + +5x +30x + + + + +832x +832x + + + + +758x +758x + + | /**
+ * Maps note types to their accent color CSS variables.
+ * Single source of truth for type→color mapping used across Sidebar, NoteList, and Inspector.
+ */
+
+const TYPE_COLOR_MAP: Record<string, string> = {
+ Project: 'var(--accent-red)',
+ Experiment: 'var(--accent-red)',
+ Responsibility: 'var(--accent-purple)',
+ Procedure: 'var(--accent-purple)',
+ Person: 'var(--accent-yellow)',
+ Event: 'var(--accent-yellow)',
+ Topic: 'var(--accent-green)',
+ Type: 'var(--accent-blue)',
+}
+
+const TYPE_LIGHT_COLOR_MAP: Record<string, string> = {
+ Project: 'var(--accent-red-light)',
+ Experiment: 'var(--accent-red-light)',
+ Responsibility: 'var(--accent-purple-light)',
+ Procedure: 'var(--accent-purple-light)',
+ Person: 'var(--accent-yellow-light)',
+ Event: 'var(--accent-yellow-light)',
+ Topic: 'var(--accent-green-light)',
+ Type: 'var(--accent-blue-light)',
+}
+
+const DEFAULT_COLOR = 'var(--accent-blue)'
+const DEFAULT_LIGHT_COLOR = 'var(--accent-blue-light)'
+
+/** Color key → CSS variable mapping for the design system accent palette */
+export const ACCENT_COLORS: { key: string; label: string; css: string; cssLight: string }[] = [
+ { key: 'red', label: 'Red', css: 'var(--accent-red)', cssLight: 'var(--accent-red-light)' },
+ { key: 'orange', label: 'Orange', css: 'var(--accent-orange)', cssLight: 'var(--accent-orange-light)' },
+ { key: 'yellow', label: 'Yellow', css: 'var(--accent-yellow)', cssLight: 'var(--accent-yellow-light)' },
+ { key: 'green', label: 'Green', css: 'var(--accent-green)', cssLight: 'var(--accent-green-light)' },
+ { key: 'blue', label: 'Blue', css: 'var(--accent-blue)', cssLight: 'var(--accent-blue-light)' },
+ { key: 'purple', label: 'Purple', css: 'var(--accent-purple)', cssLight: 'var(--accent-purple-light)' },
+]
+
+const COLOR_KEY_TO_CSS: Record<string, string> = Object.fromEntries(
+ ACCENT_COLORS.map((c) => [c.key, c.css]),
+)
+const COLOR_KEY_TO_CSS_LIGHT: Record<string, string> = Object.fromEntries(
+ ACCENT_COLORS.map((c) => [c.key, c.cssLight]),
+)
+
+/** Returns the CSS variable for the accent color of a given note type, with optional custom override */
+export function getTypeColor(isA: string | null, customColorKey?: string | null): string {
+ Iif (customColorKey && COLOR_KEY_TO_CSS[customColorKey]) return COLOR_KEY_TO_CSS[customColorKey]
+ return (isA && TYPE_COLOR_MAP[isA]) ?? DEFAULT_COLOR
+}
+
+/** Returns the CSS variable for the light/background variant of a given note type's color */
+export function getTypeLightColor(isA: string | null, customColorKey?: string | null): string {
+ Iif (customColorKey && COLOR_KEY_TO_CSS_LIGHT[customColorKey]) return COLOR_KEY_TO_CSS_LIGHT[customColorKey]
+ return (isA && TYPE_LIGHT_COLOR_MAP[isA]) ?? DEFAULT_LIGHT_COLOR
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 | +2x +2x +2x + + + +8x + + + + +9x +1x +1x + +1x +1x + +1x + + + + +1x +1x +1x +1x +1x + + + + + + + + + + + + + + + + + + + + +1x + + + + +16x +16x +16x +16x +16x +16x + + + +8x +8x +8x +8x + + | // Wikilink placeholder tokens for markdown round-trip
+const WL_START = '\u2039WIKILINK:'
+const WL_END = '\u203A'
+const WL_RE = new RegExp(`${WL_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([^${WL_END}]+)${WL_END.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`, 'g')
+
+/** Pre-process markdown: replace [[target]] with placeholder tokens */
+export function preProcessWikilinks(md: string): string {
+ return md.replace(/\[\[([^\]]+)\]\]/g, (_m, target) => `${WL_START}${target}${WL_END}`)
+}
+
+/** Walk blocks and replace placeholder text with wikilink inline content */
+export function injectWikilinks(blocks: any[]): any[] {
+ return blocks.map(block => {
+ Eif (block.content && Array.isArray(block.content)) {
+ block.content = expandWikilinksInContent(block.content)
+ }
+ Eif (block.children && Array.isArray(block.children)) {
+ block.children = injectWikilinks(block.children)
+ }
+ return block
+ })
+}
+
+function expandWikilinksInContent(content: any[]): any[] {
+ const result: any[] = []
+ for (const item of content) {
+ Eif (item.type !== 'text' || typeof item.text !== 'string' || !item.text.includes(WL_START)) {
+ result.push(item)
+ continue
+ }
+ const text = item.text as string
+ let lastIndex = 0
+ WL_RE.lastIndex = 0
+ let match
+ while ((match = WL_RE.exec(text)) !== null) {
+ if (match.index > lastIndex) {
+ result.push({ ...item, text: text.slice(lastIndex, match.index) })
+ }
+ result.push({
+ type: 'wikilink',
+ props: { target: match[1] },
+ content: undefined,
+ })
+ lastIndex = match.index + match[0].length
+ }
+ if (lastIndex < text.length) {
+ result.push({ ...item, text: text.slice(lastIndex) })
+ }
+ }
+ return result
+}
+
+/** Strip YAML frontmatter from markdown, returning [frontmatter, body] */
+export function splitFrontmatter(content: string): [string, string] {
+ Iif (!content.startsWith('---')) return ['', content]
+ const end = content.indexOf('\n---', 3)
+ Iif (end === -1) return ['', content]
+ let to = end + 4
+ Eif (content[to] === '\n') to++
+ return [content.slice(0, to), content.slice(to)]
+}
+
+export function countWords(content: string): number {
+ const [, body] = splitFrontmatter(content)
+ const text = body.replace(/[#*_\[\]`>~\-|]/g, '').trim()
+ Iif (!text) return 0
+ return text.split(/\s+/).filter(Boolean).length
+}
+ |