1647 lines
63 KiB
TypeScript
1647 lines
63 KiB
TypeScript
import React, { useState, useEffect, useMemo, useContext, useRef } from 'react'
|
||
import { ObsidianImporter, ObsidianObsNote, ObsidianVault, FolderNode, ObsidianVaultRecord } from '@/lib/obsidianImporter'
|
||
import { AuthContext } from '@/context/AuthContext'
|
||
import { useEditor } from '@tldraw/tldraw'
|
||
import { useAutomergeHandle } from '@/context/AutomergeHandleContext'
|
||
|
||
interface ObsidianVaultBrowserProps {
|
||
onObsNoteSelect: (obs_note: ObsidianObsNote) => void
|
||
onObsNotesSelect: (obs_notes: ObsidianObsNote[]) => void
|
||
onClose: () => void
|
||
className?: string
|
||
autoOpenFolderPicker?: boolean
|
||
showVaultBrowser?: boolean
|
||
shapeMode?: boolean // When true, renders without modal overlay for use in shape
|
||
}
|
||
|
||
export const ObsidianVaultBrowser: React.FC<ObsidianVaultBrowserProps> = ({
|
||
onObsNoteSelect,
|
||
onObsNotesSelect,
|
||
onClose,
|
||
className = '',
|
||
autoOpenFolderPicker = false,
|
||
showVaultBrowser = true,
|
||
shapeMode = false
|
||
}) => {
|
||
// Safely get auth context - use useContext directly to avoid throwing error
|
||
// This allows the component to work even when used outside AuthProvider (e.g., during SVG export)
|
||
const authContext = useContext(AuthContext)
|
||
const fallbackSession = {
|
||
username: '',
|
||
authed: false,
|
||
loading: false,
|
||
backupCreated: null,
|
||
obsidianVaultPath: undefined,
|
||
obsidianVaultName: undefined
|
||
}
|
||
const session = authContext?.session || fallbackSession
|
||
const updateSession = authContext?.updateSession || (() => {})
|
||
const [importer] = useState(() => new ObsidianImporter())
|
||
const [vault, setVault] = useState<ObsidianVault | null>(null)
|
||
const [searchQuery, setSearchQuery] = useState('')
|
||
const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('')
|
||
const [isLoading, setIsLoading] = useState(() => {
|
||
// Check if we have a vault configured and start loading immediately
|
||
return !!(session.obsidianVaultPath && session.obsidianVaultPath !== 'folder-selected') ||
|
||
!!(session.obsidianVaultPath === 'folder-selected' && session.obsidianVaultName)
|
||
})
|
||
const [error, setError] = useState<string | null>(null)
|
||
const [selectedNotes, setSelectedNotes] = useState<Set<string>>(new Set())
|
||
const [showVaultInput, setShowVaultInput] = useState(false)
|
||
const [vaultPath, setVaultPath] = useState('')
|
||
const [inputMethod, setInputMethod] = useState<'folder' | 'url' | 'quartz'>('folder')
|
||
const [showFolderReselect, setShowFolderReselect] = useState(false)
|
||
const [isLoadingVault, setIsLoadingVault] = useState(false)
|
||
const [hasLoadedOnce, setHasLoadedOnce] = useState(false)
|
||
const [folderTree, setFolderTree] = useState<FolderNode | null>(null)
|
||
const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set())
|
||
const [selectedFolder, setSelectedFolder] = useState<string | null>(null)
|
||
const [viewMode, setViewMode] = useState<'grid' | 'list' | 'tree'>('tree')
|
||
|
||
// Track previous vault path/name to prevent unnecessary reloads
|
||
const previousVaultPathRef = useRef<string | undefined>(session.obsidianVaultPath)
|
||
const previousVaultNameRef = useRef<string | undefined>(session.obsidianVaultName)
|
||
|
||
const editor = useEditor()
|
||
const automergeHandle = useAutomergeHandle()
|
||
|
||
// Initialize debounced search query to match search query
|
||
useEffect(() => {
|
||
setDebouncedSearchQuery(searchQuery)
|
||
}, [])
|
||
|
||
// Update folder tree when vault changes
|
||
useEffect(() => {
|
||
if (vault && vault.folderTree) {
|
||
setFolderTree(vault.folderTree)
|
||
// Expand root folder by default
|
||
setExpandedFolders(new Set(['']))
|
||
}
|
||
}, [vault])
|
||
|
||
// Save vault to Automerge store
|
||
const saveVaultToAutomerge = (vault: ObsidianVault) => {
|
||
if (!automergeHandle) {
|
||
console.warn('⚠️ Automerge handle not available, saving to localStorage only')
|
||
try {
|
||
const vaultRecord = importer.vaultToRecord(vault)
|
||
localStorage.setItem(`obsidian_vault_cache:${vault.name}`, JSON.stringify({
|
||
...vaultRecord,
|
||
lastImported: vaultRecord.lastImported instanceof Date ? vaultRecord.lastImported.toISOString() : vaultRecord.lastImported
|
||
}))
|
||
console.log('🔧 Saved vault to localStorage (Automerge handle not available):', vaultRecord.id)
|
||
} catch (localStorageError) {
|
||
console.warn('⚠️ Could not save vault to localStorage:', localStorageError)
|
||
}
|
||
return
|
||
}
|
||
|
||
try {
|
||
const vaultRecord = importer.vaultToRecord(vault)
|
||
|
||
// Save directly to Automerge, bypassing TLDraw store validation
|
||
// This allows us to save custom record types like obsidian_vault
|
||
automergeHandle.change((doc: any) => {
|
||
// Ensure doc.store exists
|
||
if (!doc.store) {
|
||
doc.store = {}
|
||
}
|
||
|
||
// Save the vault record directly to Automerge store
|
||
// Convert Date to ISO string for serialization
|
||
const recordToSave = {
|
||
...vaultRecord,
|
||
lastImported: vaultRecord.lastImported instanceof Date
|
||
? vaultRecord.lastImported.toISOString()
|
||
: vaultRecord.lastImported
|
||
}
|
||
|
||
doc.store[vaultRecord.id] = recordToSave
|
||
})
|
||
|
||
console.log('🔧 Saved vault to Automerge:', vaultRecord.id)
|
||
|
||
// Also save to localStorage as a backup
|
||
try {
|
||
localStorage.setItem(`obsidian_vault_cache:${vault.name}`, JSON.stringify({
|
||
...vaultRecord,
|
||
lastImported: vaultRecord.lastImported instanceof Date ? vaultRecord.lastImported.toISOString() : vaultRecord.lastImported
|
||
}))
|
||
console.log('🔧 Saved vault to localStorage as backup:', vaultRecord.id)
|
||
} catch (localStorageError) {
|
||
console.warn('⚠️ Could not save vault to localStorage:', localStorageError)
|
||
}
|
||
} catch (error) {
|
||
console.error('❌ Error saving vault to Automerge:', error)
|
||
// Don't throw - allow vault loading to continue even if saving fails
|
||
// Try localStorage as fallback
|
||
try {
|
||
const vaultRecord = importer.vaultToRecord(vault)
|
||
localStorage.setItem(`obsidian_vault_cache:${vault.name}`, JSON.stringify({
|
||
...vaultRecord,
|
||
lastImported: vaultRecord.lastImported instanceof Date ? vaultRecord.lastImported.toISOString() : vaultRecord.lastImported
|
||
}))
|
||
console.log('🔧 Saved vault to localStorage as fallback:', vaultRecord.id)
|
||
} catch (localStorageError) {
|
||
console.warn('⚠️ Could not save vault to localStorage:', localStorageError)
|
||
}
|
||
}
|
||
}
|
||
|
||
// Load vault from Automerge store
|
||
const loadVaultFromAutomerge = (vaultName: string): ObsidianVault | null => {
|
||
// Try loading from Automerge first
|
||
if (automergeHandle) {
|
||
try {
|
||
const doc = automergeHandle.doc()
|
||
if (doc && doc.store) {
|
||
const vaultId = `obsidian_vault:${vaultName}`
|
||
const vaultRecord = doc.store[vaultId] as ObsidianVaultRecord | undefined
|
||
|
||
if (vaultRecord && vaultRecord.typeName === 'obsidian_vault') {
|
||
console.log('🔧 Loaded vault from Automerge:', vaultId)
|
||
// Convert date string back to Date object if needed
|
||
const recordCopy = JSON.parse(JSON.stringify(vaultRecord))
|
||
if (typeof recordCopy.lastImported === 'string') {
|
||
recordCopy.lastImported = new Date(recordCopy.lastImported)
|
||
}
|
||
return importer.recordToVault(recordCopy)
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.warn('⚠️ Could not load vault from Automerge:', error)
|
||
}
|
||
}
|
||
|
||
// Try localStorage as fallback
|
||
try {
|
||
const cached = localStorage.getItem(`obsidian_vault_cache:${vaultName}`)
|
||
if (cached) {
|
||
const vaultRecord = JSON.parse(cached) as ObsidianVaultRecord
|
||
if (vaultRecord && vaultRecord.typeName === 'obsidian_vault') {
|
||
console.log('🔧 Loaded vault from localStorage cache:', vaultName)
|
||
// Convert date string back to Date object
|
||
if (typeof vaultRecord.lastImported === 'string') {
|
||
vaultRecord.lastImported = new Date(vaultRecord.lastImported)
|
||
}
|
||
return importer.recordToVault(vaultRecord)
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.warn('⚠️ Could not load vault from localStorage:', e)
|
||
}
|
||
|
||
return null
|
||
}
|
||
|
||
// Load vault on component mount - prioritize user's configured vault from session
|
||
useEffect(() => {
|
||
// Prevent multiple loads if already loading or already loaded once
|
||
if (isLoadingVault || hasLoadedOnce) {
|
||
console.log('🔧 ObsidianVaultBrowser: Skipping load - already loading or loaded once')
|
||
return
|
||
}
|
||
|
||
console.log('🔧 ObsidianVaultBrowser: Component mounted, checking user identity for vault...')
|
||
console.log('🔧 Current session vault data:', {
|
||
path: session.obsidianVaultPath,
|
||
name: session.obsidianVaultName,
|
||
authed: session.authed,
|
||
username: session.username
|
||
})
|
||
|
||
// FIRST PRIORITY: Try to load from user's configured vault in session (user identity)
|
||
if (session.obsidianVaultPath && session.obsidianVaultPath !== 'folder-selected') {
|
||
console.log('✅ Found configured vault in user identity:', session.obsidianVaultPath)
|
||
console.log('🔧 Loading vault from user identity...')
|
||
|
||
// First try to load from Automerge cache for faster loading
|
||
if (session.obsidianVaultName) {
|
||
const cachedVault = loadVaultFromAutomerge(session.obsidianVaultName)
|
||
if (cachedVault) {
|
||
console.log('✅ Loaded vault from Automerge cache')
|
||
setVault(cachedVault)
|
||
setIsLoading(false)
|
||
setHasLoadedOnce(true)
|
||
return
|
||
}
|
||
}
|
||
|
||
// If not in cache, load from source (Quartz URL or local path)
|
||
console.log('🔧 Loading vault from source:', session.obsidianVaultPath)
|
||
loadVault(session.obsidianVaultPath)
|
||
} else if (session.obsidianVaultPath === 'folder-selected' && session.obsidianVaultName) {
|
||
console.log('🔧 Vault was previously selected via folder picker, showing reselect interface')
|
||
// For folder-selected vaults, we can't reload them, so show a special reselect interface
|
||
setVault(null)
|
||
setShowFolderReselect(true)
|
||
setIsLoading(false)
|
||
setHasLoadedOnce(true)
|
||
} else {
|
||
console.log('⚠️ No vault configured in user identity, showing empty state...')
|
||
setVault(null)
|
||
setIsLoading(false)
|
||
setHasLoadedOnce(true)
|
||
}
|
||
}, []) // Remove dependencies to ensure this only runs once on mount
|
||
|
||
// Handle session changes only if we haven't loaded yet AND values actually changed
|
||
useEffect(() => {
|
||
// Check if values actually changed (not just object reference)
|
||
const vaultPathChanged = previousVaultPathRef.current !== session.obsidianVaultPath
|
||
const vaultNameChanged = previousVaultNameRef.current !== session.obsidianVaultName
|
||
|
||
// If vault is already loaded and values haven't changed, don't do anything
|
||
if (hasLoadedOnce && !vaultPathChanged && !vaultNameChanged) {
|
||
return // Already loaded and nothing changed, no need to reload
|
||
}
|
||
|
||
// Update refs to current values
|
||
previousVaultPathRef.current = session.obsidianVaultPath
|
||
previousVaultNameRef.current = session.obsidianVaultName
|
||
|
||
// Only proceed if values actually changed and we haven't loaded yet
|
||
if (!vaultPathChanged && !vaultNameChanged) {
|
||
return // Values haven't changed, no need to reload
|
||
}
|
||
|
||
if (hasLoadedOnce || isLoadingVault) {
|
||
return // Don't reload if we've already loaded or are currently loading
|
||
}
|
||
|
||
if (session.obsidianVaultPath && session.obsidianVaultPath !== 'folder-selected') {
|
||
console.log('🔧 Session vault path changed, loading vault:', session.obsidianVaultPath)
|
||
loadVault(session.obsidianVaultPath)
|
||
} else if (session.obsidianVaultPath === 'folder-selected' && session.obsidianVaultName) {
|
||
console.log('🔧 Session shows folder-selected vault, showing reselect interface')
|
||
setVault(null)
|
||
setShowFolderReselect(true)
|
||
setIsLoading(false)
|
||
setHasLoadedOnce(true)
|
||
}
|
||
}, [session.obsidianVaultPath, session.obsidianVaultName, hasLoadedOnce, isLoadingVault])
|
||
|
||
// Auto-open folder picker if requested
|
||
useEffect(() => {
|
||
if (autoOpenFolderPicker) {
|
||
console.log('Auto-opening folder picker...')
|
||
handleFolderPicker()
|
||
}
|
||
}, [autoOpenFolderPicker])
|
||
|
||
// Reset loading state when component is closed (but not in shape mode)
|
||
useEffect(() => {
|
||
if (!showVaultBrowser && !shapeMode) {
|
||
// Reset states when component is closed (only in modal mode, not shape mode)
|
||
setHasLoadedOnce(false)
|
||
setIsLoadingVault(false)
|
||
}
|
||
}, [showVaultBrowser, shapeMode])
|
||
|
||
|
||
// Debounce search query for better performance
|
||
useEffect(() => {
|
||
const timer = setTimeout(() => {
|
||
setDebouncedSearchQuery(searchQuery)
|
||
}, 150) // 150ms delay
|
||
|
||
return () => clearTimeout(timer)
|
||
}, [searchQuery])
|
||
|
||
// Handle ESC key to close the browser
|
||
useEffect(() => {
|
||
const handleKeyDown = (event: KeyboardEvent) => {
|
||
if (event.key === 'Escape') {
|
||
console.log('🔧 ESC key pressed, closing vault browser')
|
||
onClose()
|
||
}
|
||
}
|
||
|
||
document.addEventListener('keydown', handleKeyDown)
|
||
return () => {
|
||
document.removeEventListener('keydown', handleKeyDown)
|
||
}
|
||
}, [onClose])
|
||
|
||
const loadVault = async (path?: string) => {
|
||
// Prevent concurrent loading operations
|
||
if (isLoadingVault) {
|
||
console.log('🔧 loadVault: Already loading, skipping concurrent request')
|
||
return
|
||
}
|
||
|
||
setIsLoadingVault(true)
|
||
setIsLoading(true)
|
||
setError(null)
|
||
|
||
try {
|
||
if (path) {
|
||
// Check if it's a Quartz URL
|
||
if (path.startsWith('http') || path.includes('quartz') || path.includes('.xyz') || path.includes('.com')) {
|
||
// Load from Quartz URL - always get latest data
|
||
console.log('🔧 Loading Quartz vault from URL (getting latest data):', path)
|
||
const loadedVault = await importer.importFromQuartzUrl(path)
|
||
console.log('Loaded Quartz vault from URL:', loadedVault)
|
||
setVault(loadedVault)
|
||
setShowVaultInput(false)
|
||
setShowFolderReselect(false)
|
||
// Save the vault path and name to user session
|
||
console.log('🔧 Saving Quartz vault to session:', { path, name: loadedVault.name })
|
||
updateSession({
|
||
obsidianVaultPath: path,
|
||
obsidianVaultName: loadedVault.name
|
||
})
|
||
console.log('🔧 Quartz vault saved to session successfully')
|
||
|
||
// Save vault to Automerge for persistence
|
||
saveVaultToAutomerge(loadedVault)
|
||
} else {
|
||
// Load from local directory
|
||
console.log('🔧 Loading vault from local directory:', path)
|
||
const loadedVault = await importer.importFromDirectory(path)
|
||
console.log('Loaded vault from path:', loadedVault)
|
||
setVault(loadedVault)
|
||
setShowVaultInput(false)
|
||
setShowFolderReselect(false)
|
||
// Save the vault path and name to user session
|
||
console.log('🔧 Saving vault to session:', { path, name: loadedVault.name })
|
||
updateSession({
|
||
obsidianVaultPath: path,
|
||
obsidianVaultName: loadedVault.name
|
||
})
|
||
console.log('🔧 Vault saved to session successfully')
|
||
|
||
// Save vault to Automerge for persistence
|
||
saveVaultToAutomerge(loadedVault)
|
||
}
|
||
} else {
|
||
// No vault configured - show empty state
|
||
console.log('No vault configured, showing empty state...')
|
||
setVault(null)
|
||
setShowVaultInput(false)
|
||
}
|
||
} catch (err) {
|
||
console.error('Failed to load vault:', err)
|
||
setError('Failed to load Obsidian vault. Please try again.')
|
||
setVault(null)
|
||
// Don't show vault input if user already has a vault configured
|
||
// Only show vault input if this is a fresh attempt
|
||
if (!session.obsidianVaultPath) {
|
||
setShowVaultInput(true)
|
||
}
|
||
} finally {
|
||
setIsLoading(false)
|
||
setIsLoadingVault(false)
|
||
setHasLoadedOnce(true)
|
||
}
|
||
}
|
||
|
||
const handleVaultPathSubmit = async () => {
|
||
if (!vaultPath.trim()) {
|
||
setError('Please enter a vault path or URL')
|
||
return
|
||
}
|
||
|
||
console.log('📝 Submitting vault path:', vaultPath.trim(), 'Method:', inputMethod)
|
||
|
||
if (inputMethod === 'quartz') {
|
||
// Handle Quartz URL
|
||
try {
|
||
setIsLoading(true)
|
||
setError(null)
|
||
const loadedVault = await importer.importFromQuartzUrl(vaultPath.trim())
|
||
setVault(loadedVault)
|
||
setShowVaultInput(false)
|
||
setShowFolderReselect(false)
|
||
|
||
// Save Quartz vault to user identity (session)
|
||
console.log('🔧 Saving Quartz vault to user identity:', {
|
||
path: vaultPath.trim(),
|
||
name: loadedVault.name
|
||
})
|
||
updateSession({
|
||
obsidianVaultPath: vaultPath.trim(),
|
||
obsidianVaultName: loadedVault.name
|
||
})
|
||
} catch (error) {
|
||
console.error('❌ Error loading Quartz vault:', error)
|
||
setError(error instanceof Error ? error.message : 'Failed to load Quartz vault')
|
||
} finally {
|
||
setIsLoading(false)
|
||
}
|
||
} else {
|
||
// Handle regular vault path (local folder or URL)
|
||
loadVault(vaultPath.trim())
|
||
}
|
||
}
|
||
|
||
const handleFolderPicker = async () => {
|
||
console.log('📁 Folder picker button clicked')
|
||
|
||
if (!('showDirectoryPicker' in window)) {
|
||
setError('File System Access API is not supported in this browser. Please use "Enter Path" instead.')
|
||
setShowVaultInput(true)
|
||
return
|
||
}
|
||
|
||
try {
|
||
setIsLoading(true)
|
||
setError(null)
|
||
console.log('📁 Opening directory picker...')
|
||
|
||
const loadedVault = await importer.importFromFileSystem()
|
||
console.log('✅ Vault loaded from folder picker:', loadedVault.name)
|
||
|
||
setVault(loadedVault)
|
||
setShowVaultInput(false)
|
||
setShowFolderReselect(false)
|
||
|
||
// Note: We can't get the actual path from importFromFileSystem,
|
||
// but we can save a flag that a folder was selected
|
||
console.log('🔧 Saving folder-selected vault to user identity:', {
|
||
path: 'folder-selected',
|
||
name: loadedVault.name
|
||
})
|
||
updateSession({
|
||
obsidianVaultPath: 'folder-selected',
|
||
obsidianVaultName: loadedVault.name
|
||
})
|
||
console.log('✅ Folder-selected vault saved to user identity successfully')
|
||
|
||
// Save vault to Automerge for persistence
|
||
saveVaultToAutomerge(loadedVault)
|
||
} catch (err) {
|
||
console.error('❌ Failed to load vault from folder picker:', err)
|
||
if ((err as any).name === 'AbortError') {
|
||
// User cancelled the folder picker
|
||
console.log('📁 User cancelled folder picker')
|
||
setError(null) // Don't show error for cancellation
|
||
} else {
|
||
setError('Failed to load Obsidian vault. Please try again.')
|
||
}
|
||
} finally {
|
||
setIsLoading(false)
|
||
}
|
||
}
|
||
|
||
// Filter obs_notes based on search query and folder selection
|
||
const filteredObsNotes = useMemo(() => {
|
||
if (!vault) return []
|
||
|
||
let obs_notes = vault.obs_notes
|
||
|
||
// Filter out any undefined or null notes first
|
||
obs_notes = obs_notes.filter(obs_note => obs_note != null)
|
||
|
||
// Filter by search query - use debounced query for better performance
|
||
// When no search query, show all notes
|
||
if (debouncedSearchQuery && debouncedSearchQuery.trim()) {
|
||
const lowercaseQuery = debouncedSearchQuery.toLowerCase().trim()
|
||
obs_notes = obs_notes.filter(obs_note =>
|
||
obs_note && (
|
||
(obs_note.title && obs_note.title.toLowerCase().includes(lowercaseQuery)) ||
|
||
(obs_note.content && obs_note.content.toLowerCase().includes(lowercaseQuery)) ||
|
||
(obs_note.tags && obs_note.tags.some(tag => tag.toLowerCase().includes(lowercaseQuery))) ||
|
||
(obs_note.filePath && obs_note.filePath.toLowerCase().includes(lowercaseQuery))
|
||
)
|
||
)
|
||
}
|
||
|
||
// Filter by selected folder if in tree view
|
||
if (viewMode === 'tree' && selectedFolder !== null && folderTree) {
|
||
const folder = importer.findFolderByPath(folderTree, selectedFolder)
|
||
if (folder) {
|
||
const folderNotes = importer.getAllNotesFromTree(folder)
|
||
obs_notes = obs_notes.filter(note => folderNotes.some(folderNote => folderNote.id === note.id))
|
||
}
|
||
} else if (viewMode === 'tree' && selectedFolder === null) {
|
||
// In tree view but no folder selected, show all notes
|
||
// This allows users to see all notes when no specific folder is selected
|
||
}
|
||
|
||
// Debug logging
|
||
console.log('Search query:', debouncedSearchQuery)
|
||
console.log('View mode:', viewMode)
|
||
console.log('Selected folder:', selectedFolder)
|
||
console.log('Total notes:', vault.obs_notes.length)
|
||
console.log('Filtered notes:', obs_notes.length)
|
||
|
||
return obs_notes
|
||
}, [vault, debouncedSearchQuery, viewMode, selectedFolder, folderTree, importer])
|
||
|
||
// Listen for trigger-obsnote-creation event from CustomToolbar
|
||
useEffect(() => {
|
||
const handleTriggerCreation = () => {
|
||
console.log('🎯 ObsidianVaultBrowser: Received trigger-obsnote-creation event')
|
||
|
||
if (selectedNotes.size > 0) {
|
||
// Create shapes from currently selected notes
|
||
const selectedObsNotes = filteredObsNotes.filter(obs_note => selectedNotes.has(obs_note.id))
|
||
console.log('🎯 Creating shapes from selected notes:', selectedObsNotes.length)
|
||
onObsNotesSelect(selectedObsNotes)
|
||
} else {
|
||
// If no notes are selected, select all visible notes
|
||
const allVisibleNotes = filteredObsNotes
|
||
if (allVisibleNotes.length > 0) {
|
||
console.log('🎯 No notes selected, creating shapes from all visible notes:', allVisibleNotes.length)
|
||
onObsNotesSelect(allVisibleNotes)
|
||
} else {
|
||
console.log('🎯 No notes available to create shapes from')
|
||
}
|
||
}
|
||
}
|
||
|
||
window.addEventListener('trigger-obsnote-creation', handleTriggerCreation as EventListener)
|
||
|
||
return () => {
|
||
window.removeEventListener('trigger-obsnote-creation', handleTriggerCreation as EventListener)
|
||
}
|
||
}, [selectedNotes, filteredObsNotes, onObsNotesSelect])
|
||
|
||
// Helper function to get a better title for display
|
||
const getDisplayTitle = (obs_note: ObsidianObsNote): string => {
|
||
// Safety check for undefined obs_note
|
||
if (!obs_note) {
|
||
return 'Untitled'
|
||
}
|
||
|
||
// Use frontmatter title if available, otherwise use filename without extension
|
||
if (obs_note.frontmatter && obs_note.frontmatter.title) {
|
||
return obs_note.frontmatter.title
|
||
}
|
||
|
||
// For Quartz URLs, use the title property which should be clean
|
||
if (obs_note.filePath && obs_note.filePath.startsWith('http')) {
|
||
return obs_note.title || 'Untitled'
|
||
}
|
||
|
||
// Clean up filename for display
|
||
return obs_note.filePath
|
||
.replace(/\.md$/, '')
|
||
.replace(/[-_]/g, ' ')
|
||
.replace(/\b\w/g, l => l.toUpperCase())
|
||
}
|
||
|
||
// Helper function to get content preview
|
||
const getContentPreview = (obs_note: ObsidianObsNote, maxLength: number = 200): string => {
|
||
// Safety check for undefined obs_note
|
||
if (!obs_note) {
|
||
return 'No content available'
|
||
}
|
||
|
||
let content = obs_note.content || ''
|
||
|
||
// Remove frontmatter if present
|
||
content = content.replace(/^---\n[\s\S]*?\n---\n/, '')
|
||
|
||
// Remove markdown headers for cleaner preview
|
||
content = content.replace(/^#+\s+/gm, '')
|
||
|
||
// Clean up and truncate
|
||
content = content
|
||
.replace(/\n+/g, ' ')
|
||
.replace(/\s+/g, ' ')
|
||
.trim()
|
||
|
||
if (content.length > maxLength) {
|
||
content = content.substring(0, maxLength) + '...'
|
||
}
|
||
|
||
return content || 'No content preview available'
|
||
}
|
||
|
||
// Helper function to get file path, checking session for quartz link if blank
|
||
const getFilePath = (obs_note: ObsidianObsNote): string => {
|
||
// If filePath exists and is not blank, use it
|
||
if (obs_note.filePath && obs_note.filePath.trim() !== '') {
|
||
if (obs_note.filePath.startsWith('http')) {
|
||
try {
|
||
return new URL(obs_note.filePath).pathname.replace(/^\//, '') || 'Home'
|
||
} catch (e) {
|
||
return obs_note.filePath
|
||
}
|
||
}
|
||
return obs_note.filePath
|
||
}
|
||
|
||
// If filePath is blank, check session for quartz link (user API)
|
||
if (session.obsidianVaultPath &&
|
||
session.obsidianVaultPath !== 'folder-selected' &&
|
||
(session.obsidianVaultPath.startsWith('http') ||
|
||
session.obsidianVaultPath.includes('quartz') ||
|
||
session.obsidianVaultPath.includes('.xyz') ||
|
||
session.obsidianVaultPath.includes('.com'))) {
|
||
// Construct file path from quartz URL and note title/ID
|
||
try {
|
||
const baseUrl = new URL(session.obsidianVaultPath)
|
||
// Use note title or ID to construct a path
|
||
const notePath = obs_note.title || obs_note.id || 'Untitled'
|
||
// Clean up the note path to make it URL-friendly
|
||
const cleanPath = notePath.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase()
|
||
return `${baseUrl.hostname}${baseUrl.pathname}/${cleanPath}`
|
||
} catch (e) {
|
||
// If URL parsing fails, just return the vault path
|
||
return session.obsidianVaultPath
|
||
}
|
||
}
|
||
|
||
// If no quartz link found in session, return a fallback based on note info
|
||
return obs_note.title || obs_note.id || 'Untitled'
|
||
}
|
||
|
||
// Helper function to highlight search matches
|
||
const highlightSearchMatches = (text: string, query: string): string => {
|
||
if (!query.trim()) return text
|
||
|
||
try {
|
||
const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi')
|
||
return text.replace(regex, '<mark>$1</mark>')
|
||
} catch (error) {
|
||
console.error('Error highlighting search matches:', error)
|
||
return text
|
||
}
|
||
}
|
||
|
||
const handleObsNoteClick = (obs_note: ObsidianObsNote) => {
|
||
console.log('🎯 ObsidianVaultBrowser: handleObsNoteClick called with:', obs_note)
|
||
onObsNoteSelect(obs_note)
|
||
}
|
||
|
||
const handleObsNoteToggle = (obs_note: ObsidianObsNote) => {
|
||
const newSelected = new Set(selectedNotes)
|
||
if (newSelected.has(obs_note.id)) {
|
||
newSelected.delete(obs_note.id)
|
||
} else {
|
||
newSelected.add(obs_note.id)
|
||
}
|
||
setSelectedNotes(newSelected)
|
||
}
|
||
|
||
const handleBulkImport = () => {
|
||
const selectedObsNotes = filteredObsNotes.filter(obs_note => selectedNotes.has(obs_note.id))
|
||
console.log('🎯 ObsidianVaultBrowser: handleBulkImport called with:', selectedObsNotes.length, 'notes')
|
||
onObsNotesSelect(selectedObsNotes)
|
||
setSelectedNotes(new Set())
|
||
}
|
||
|
||
const handleSelectAll = () => {
|
||
if (selectedNotes.size === filteredObsNotes.length) {
|
||
setSelectedNotes(new Set())
|
||
} else {
|
||
setSelectedNotes(new Set(filteredObsNotes.map(obs_note => obs_note.id)))
|
||
}
|
||
}
|
||
|
||
const clearFilters = () => {
|
||
setSearchQuery('')
|
||
setDebouncedSearchQuery('')
|
||
setSelectedNotes(new Set())
|
||
}
|
||
|
||
// Folder management functions
|
||
const toggleFolderExpansion = (folderPath: string) => {
|
||
const newExpanded = new Set(expandedFolders)
|
||
if (newExpanded.has(folderPath)) {
|
||
newExpanded.delete(folderPath)
|
||
} else {
|
||
newExpanded.add(folderPath)
|
||
}
|
||
setExpandedFolders(newExpanded)
|
||
}
|
||
|
||
const selectFolder = (folderPath: string) => {
|
||
setSelectedFolder(folderPath)
|
||
}
|
||
|
||
const getNotesFromFolder = (folder: FolderNode): ObsidianObsNote[] => {
|
||
if (!folder) return []
|
||
|
||
let notes = [...folder.notes]
|
||
|
||
// If folder is expanded, include notes from subfolders
|
||
if (expandedFolders.has(folder.path)) {
|
||
folder.children.forEach(child => {
|
||
notes.push(...getNotesFromFolder(child))
|
||
})
|
||
}
|
||
|
||
return notes
|
||
}
|
||
|
||
|
||
const handleDisconnectVault = () => {
|
||
// Clear the vault from session
|
||
updateSession({
|
||
obsidianVaultPath: undefined,
|
||
obsidianVaultName: undefined
|
||
})
|
||
|
||
// Reset component state
|
||
setVault(null)
|
||
setSearchQuery('')
|
||
setDebouncedSearchQuery('')
|
||
setSelectedNotes(new Set())
|
||
setShowVaultInput(false)
|
||
setShowFolderReselect(false)
|
||
setError(null)
|
||
setHasLoadedOnce(false)
|
||
setIsLoadingVault(false)
|
||
|
||
console.log('🔧 Vault disconnected successfully')
|
||
}
|
||
|
||
const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
||
// Only close if clicking on the backdrop, not on the modal content
|
||
if (e.target === e.currentTarget) {
|
||
onClose()
|
||
}
|
||
}
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<div className={`obsidian-browser ${className}`} onClick={handleBackdropClick}>
|
||
<div className="loading-container">
|
||
<div className="loading-spinner"></div>
|
||
<p>Loading Obsidian vault...</p>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<div className={`obsidian-browser ${className}`} onClick={handleBackdropClick}>
|
||
<div className="error-container">
|
||
<h3>Error Loading Vault</h3>
|
||
<p>{error}</p>
|
||
<button onClick={() => loadVault()} className="retry-button">
|
||
Try Again
|
||
</button>
|
||
<button onClick={onClose} className="close-button">
|
||
Close
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (!vault && !showVaultInput && !isLoading) {
|
||
// Check if user has a folder-selected vault that needs reselection
|
||
if (showFolderReselect && session.obsidianVaultPath === 'folder-selected' && session.obsidianVaultName) {
|
||
return (
|
||
<div className={`obsidian-browser ${className}`} onClick={handleBackdropClick}>
|
||
<div className="folder-reselect-container">
|
||
<h3>Reselect Obsidian Vault</h3>
|
||
<p>Your vault "<strong>{session.obsidianVaultName}</strong>" was previously selected via folder picker.</p>
|
||
<p>Due to browser security restrictions, we need you to reselect the folder to access your notes.</p>
|
||
<div className="vault-options">
|
||
<button onClick={handleFolderPicker} className="load-vault-button primary">
|
||
📁 Reselect Folder
|
||
</button>
|
||
<button onClick={() => setShowVaultInput(true)} className="load-vault-button secondary">
|
||
📝 Enter Path Instead
|
||
</button>
|
||
</div>
|
||
<p className="help-text">
|
||
Select the same folder again to continue using your Obsidian vault, or enter the path manually.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// Check if user has a vault configured but it failed to load
|
||
if (session.obsidianVaultPath && session.obsidianVaultPath !== 'folder-selected') {
|
||
return (
|
||
<div className={`obsidian-browser ${className}`} onClick={handleBackdropClick}>
|
||
<div className="error-container">
|
||
<h3>Vault Loading Failed</h3>
|
||
<p>Failed to load your configured Obsidian vault at: <code>{session.obsidianVaultPath}</code></p>
|
||
<p>This might be because the path has changed or the vault is no longer accessible.</p>
|
||
<div className="vault-options">
|
||
<button onClick={() => loadVault(session.obsidianVaultPath)} className="retry-button">
|
||
🔄 Retry Loading
|
||
</button>
|
||
<button onClick={() => setShowVaultInput(true)} className="load-vault-button secondary">
|
||
📝 Change Path
|
||
</button>
|
||
<button onClick={handleFolderPicker} className="load-vault-button primary">
|
||
📁 Select New Folder
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// No vault configured at all
|
||
return (
|
||
<div className={`obsidian-browser ${className}`} onClick={handleBackdropClick}>
|
||
<div className="no-vault-container">
|
||
<h3>Load Obsidian Vault</h3>
|
||
<p>Choose how you'd like to load your Obsidian vault:</p>
|
||
<div className="vault-options">
|
||
<button
|
||
onClick={() => {
|
||
console.log('📁 Select Folder button clicked')
|
||
handleFolderPicker()
|
||
}}
|
||
className="load-vault-button primary"
|
||
>
|
||
📁 Select Folder
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
console.log('📝 Enter Path button clicked')
|
||
// Pre-populate with session vault path if available
|
||
if (session.obsidianVaultPath && session.obsidianVaultPath !== 'folder-selected') {
|
||
setVaultPath(session.obsidianVaultPath)
|
||
}
|
||
setShowVaultInput(true)
|
||
}}
|
||
className="load-vault-button secondary"
|
||
>
|
||
📝 Enter Path
|
||
</button>
|
||
</div>
|
||
<p className="help-text">
|
||
Select a folder containing your Obsidian vault, or enter the path manually.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (showVaultInput) {
|
||
return (
|
||
<div className={`obsidian-browser ${className}`} onClick={handleBackdropClick}>
|
||
<div className="vault-input-container">
|
||
<h3>Enter Vault Path</h3>
|
||
<div className="input-method-selector">
|
||
<button
|
||
onClick={() => setInputMethod('folder')}
|
||
className={`method-button ${inputMethod === 'folder' ? 'active' : ''}`}
|
||
>
|
||
📁 Local Folder
|
||
</button>
|
||
<button
|
||
onClick={() => setInputMethod('url')}
|
||
className={`method-button ${inputMethod === 'url' ? 'active' : ''}`}
|
||
>
|
||
🌐 URL/Path
|
||
</button>
|
||
<button
|
||
onClick={() => setInputMethod('quartz')}
|
||
className={`method-button ${inputMethod === 'quartz' ? 'active' : ''}`}
|
||
>
|
||
💎 Quartz Site
|
||
</button>
|
||
</div>
|
||
|
||
<div className="path-input-section">
|
||
<input
|
||
type="text"
|
||
placeholder={
|
||
inputMethod === 'folder'
|
||
? 'Enter folder path (e.g., /Users/username/Documents/MyVault)'
|
||
: inputMethod === 'quartz'
|
||
? 'Enter Quartz URL (e.g., https://quartz.jzhao.xyz)'
|
||
: 'Enter URL or path'
|
||
}
|
||
value={vaultPath}
|
||
onChange={(e) => setVaultPath(e.target.value)}
|
||
className="path-input"
|
||
onKeyPress={(e) => e.key === 'Enter' && handleVaultPathSubmit()}
|
||
/>
|
||
<button onClick={handleVaultPathSubmit} className="submit-button">
|
||
Load Vault
|
||
</button>
|
||
</div>
|
||
|
||
<div className="input-help">
|
||
{inputMethod === 'folder' ? (
|
||
<p>Enter the full path to your Obsidian vault folder on your computer.</p>
|
||
) : inputMethod === 'quartz' ? (
|
||
<p>Enter a Quartz site URL to import content as Obsidian notes (e.g., https://quartz.jzhao.xyz).</p>
|
||
) : (
|
||
<p>Enter a URL or path to your Obsidian vault (if accessible via web).</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="input-actions">
|
||
<button onClick={() => setShowVaultInput(false)} className="back-button">
|
||
← Back
|
||
</button>
|
||
<button onClick={handleFolderPicker} className="folder-picker-button">
|
||
📁 Browse Folder
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// Helper function to check if a folder has content (notes or subfolders with content)
|
||
const hasContent = (folder: FolderNode): boolean => {
|
||
if (folder.notes.length > 0) return true
|
||
return folder.children.some(child => hasContent(child))
|
||
}
|
||
|
||
// Folder tree component - skips Root and content folders, shows only files from content
|
||
const renderFolderTree = (folder: FolderNode, level: number = 0) => {
|
||
if (!folder) return null
|
||
|
||
// Skip Root folder - look for content folder inside it
|
||
if (folder.name === 'Root') {
|
||
// Find the "content" folder
|
||
const contentFolder = folder.children.find(child => child.name === 'content' || child.name.toLowerCase() === 'content')
|
||
|
||
if (contentFolder) {
|
||
// Skip both Root and content folders, render content folder's children and notes directly
|
||
return (
|
||
<div className="folder-children">
|
||
{contentFolder.children
|
||
.filter(child => hasContent(child))
|
||
.map(child => renderFolderTree(child, level))}
|
||
{contentFolder.notes.map(note => (
|
||
<div
|
||
key={note.id}
|
||
className={`note-item ${selectedNotes.has(note.id) ? 'selected' : ''}`}
|
||
style={{ paddingLeft: `${level * 20}px` }}
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
handleObsNoteToggle(note)
|
||
}}
|
||
>
|
||
<span className="note-icon">📄</span>
|
||
<span className="note-name">{getDisplayTitle(note)}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)
|
||
} else {
|
||
// No content folder found, render root's children (excluding root itself)
|
||
return (
|
||
<div className="folder-children">
|
||
{folder.children
|
||
.filter(child => hasContent(child) && child.name !== 'content')
|
||
.map(child => renderFolderTree(child, level))}
|
||
{folder.notes.map(note => (
|
||
<div
|
||
key={note.id}
|
||
className={`note-item ${selectedNotes.has(note.id) ? 'selected' : ''}`}
|
||
style={{ paddingLeft: `${level * 20}px` }}
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
handleObsNoteToggle(note)
|
||
}}
|
||
>
|
||
<span className="note-icon">📄</span>
|
||
<span className="note-name">{getDisplayTitle(note)}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
// Skip "content" folder - render its children and notes directly
|
||
if (folder.name === 'content' || folder.name.toLowerCase() === 'content') {
|
||
return (
|
||
<div className="folder-children">
|
||
{folder.children
|
||
.filter(child => hasContent(child))
|
||
.map(child => renderFolderTree(child, level))}
|
||
{folder.notes.map(note => (
|
||
<div
|
||
key={note.id}
|
||
className={`note-item ${selectedNotes.has(note.id) ? 'selected' : ''}`}
|
||
style={{ paddingLeft: `${level * 20}px` }}
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
handleObsNoteToggle(note)
|
||
}}
|
||
>
|
||
<span className="note-icon">📄</span>
|
||
<span className="note-name">{getDisplayTitle(note)}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// Render normal folders (not Root or content)
|
||
const isExpanded = expandedFolders.has(folder.path)
|
||
const isSelected = selectedFolder === folder.path
|
||
const hasChildren = folder.children.length > 0 || folder.notes.length > 0
|
||
|
||
return (
|
||
<div key={folder.path} className="folder-tree-item">
|
||
<div
|
||
className={`folder-item ${isSelected ? 'selected' : ''}`}
|
||
style={{ paddingLeft: `${level * 20}px` }}
|
||
onClick={() => selectFolder(folder.path)}
|
||
>
|
||
{hasChildren && (
|
||
<button
|
||
className="folder-toggle"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
toggleFolderExpansion(folder.path)
|
||
}}
|
||
>
|
||
{isExpanded ? '▼' : '▶'}
|
||
</button>
|
||
)}
|
||
<span className="folder-icon">📁</span>
|
||
<span className="folder-name">{folder.name}</span>
|
||
<span className="folder-count">
|
||
({folder.notes.length + folder.children.reduce((acc, child) => acc + child.notes.length, 0)})
|
||
</span>
|
||
</div>
|
||
|
||
{isExpanded && (
|
||
<div className="folder-children">
|
||
{folder.children
|
||
.filter(child => hasContent(child) && child.name !== 'content')
|
||
.map(child => renderFolderTree(child, level + 1))}
|
||
{folder.notes.map(note => (
|
||
<div
|
||
key={note.id}
|
||
className={`note-item ${selectedNotes.has(note.id) ? 'selected' : ''}`}
|
||
style={{ paddingLeft: `${(level + 1) * 20}px` }}
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
handleObsNoteToggle(note)
|
||
}}
|
||
>
|
||
<span className="note-icon">📄</span>
|
||
<span className="note-name">{getDisplayTitle(note)}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// Shape mode: render without modal overlay
|
||
if (shapeMode) {
|
||
return (
|
||
<div
|
||
className={`obsidian-browser shape-mode ${className}`}
|
||
onClick={(e) => {
|
||
// Only stop propagation for interactive elements (buttons, inputs, note items, etc.)
|
||
const target = e.target as HTMLElement
|
||
const isInteractive = target.tagName === 'BUTTON' ||
|
||
target.tagName === 'INPUT' ||
|
||
target.tagName === 'TEXTAREA' ||
|
||
target.tagName === 'SELECT' ||
|
||
target.closest('button') ||
|
||
target.closest('input') ||
|
||
target.closest('textarea') ||
|
||
target.closest('select') ||
|
||
target.closest('[role="button"]') ||
|
||
target.closest('a') ||
|
||
target.closest('.note-item') || // Obsidian note items in list view
|
||
target.closest('.note-card') // Obsidian note cards in grid/list view
|
||
if (isInteractive) {
|
||
e.stopPropagation()
|
||
}
|
||
// Don't stop propagation for white space - let tldraw handle dragging
|
||
}}
|
||
onPointerDown={(e) => {
|
||
// Only stop propagation for interactive elements to allow tldraw to handle dragging on white space
|
||
const target = e.target as HTMLElement
|
||
const isInteractive = target.tagName === 'BUTTON' ||
|
||
target.tagName === 'INPUT' ||
|
||
target.tagName === 'TEXTAREA' ||
|
||
target.tagName === 'SELECT' ||
|
||
target.closest('button') ||
|
||
target.closest('input') ||
|
||
target.closest('textarea') ||
|
||
target.closest('select') ||
|
||
target.closest('[role="button"]') ||
|
||
target.closest('a') ||
|
||
target.closest('.note-item') || // Obsidian note items in list view
|
||
target.closest('.note-card') // Obsidian note cards in grid/list view
|
||
if (isInteractive) {
|
||
e.stopPropagation()
|
||
}
|
||
// Don't stop propagation for white space - let tldraw handle dragging
|
||
}}
|
||
style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
overflow: 'hidden',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
pointerEvents: 'auto'
|
||
}}
|
||
>
|
||
<div className="browser-content" style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||
{/* Close button removed - using StandardizedToolWrapper header instead */}
|
||
<div className="vault-title">
|
||
<h2>
|
||
{vault ? `Obsidian Vault: ${vault.name}` : 'No Obsidian Vault Connected'}
|
||
</h2>
|
||
{!vault && (
|
||
<div className="vault-connect-section">
|
||
<p className="vault-connect-message">
|
||
Connect your Obsidian vault to browse and add notes to the canvas.
|
||
</p>
|
||
<button
|
||
onClick={handleFolderPicker}
|
||
className="connect-vault-button"
|
||
disabled={isLoading}
|
||
>
|
||
{isLoading ? 'Connecting...' : 'Connect Vault'}
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{vault && (
|
||
<div className="browser-controls">
|
||
<div className="search-container">
|
||
<div className="search-input-wrapper">
|
||
<input
|
||
type="text"
|
||
placeholder="Search notes by title, content, or tags..."
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
className="search-input"
|
||
/>
|
||
{searchQuery && (
|
||
<button
|
||
onClick={() => setSearchQuery('')}
|
||
className="clear-search-button"
|
||
title="Clear search"
|
||
>
|
||
×
|
||
</button>
|
||
)}
|
||
</div>
|
||
<div className="search-stats">
|
||
<span className="search-results-count">
|
||
{searchQuery ? (
|
||
searchQuery !== debouncedSearchQuery ? (
|
||
<span className="search-loading">Searching...</span>
|
||
) : (
|
||
`${filteredObsNotes.length} result${filteredObsNotes.length !== 1 ? 's' : ''} found`
|
||
)
|
||
) : (
|
||
`Showing all ${filteredObsNotes.length} notes`
|
||
)}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="view-controls">
|
||
<div className="view-mode-toggle">
|
||
<button
|
||
onClick={() => setViewMode('tree')}
|
||
className={`view-button ${viewMode === 'tree' ? 'active' : ''}`}
|
||
title="Tree View"
|
||
>
|
||
🌳
|
||
</button>
|
||
<button
|
||
onClick={() => setViewMode('grid')}
|
||
className={`view-button ${viewMode === 'grid' ? 'active' : ''}`}
|
||
title="Grid View"
|
||
>
|
||
⊞
|
||
</button>
|
||
<button
|
||
onClick={() => setViewMode('list')}
|
||
className={`view-button ${viewMode === 'list' ? 'active' : ''}`}
|
||
title="List View"
|
||
>
|
||
☰
|
||
</button>
|
||
</div>
|
||
<button
|
||
onClick={handleDisconnectVault}
|
||
className="disconnect-vault-button"
|
||
title="Disconnect Vault"
|
||
>
|
||
🔌 Disconnect Vault
|
||
</button>
|
||
</div>
|
||
|
||
<div className="selection-controls">
|
||
<button
|
||
onClick={handleSelectAll}
|
||
className="select-all-button"
|
||
disabled={filteredObsNotes.length === 0}
|
||
>
|
||
{selectedNotes.size === filteredObsNotes.length && filteredObsNotes.length > 0 ? 'Deselect All' : 'Select All'}
|
||
</button>
|
||
{selectedNotes.size > 0 && (
|
||
<button
|
||
onClick={handleBulkImport}
|
||
className="bulk-import-button primary"
|
||
>
|
||
🎯 Pull to Canvas ({selectedNotes.size})
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{vault && (
|
||
<div className="notes-container">
|
||
<div className="notes-header">
|
||
<span>
|
||
{debouncedSearchQuery && debouncedSearchQuery.trim()
|
||
? `${filteredObsNotes.length} notes found for "${debouncedSearchQuery}"`
|
||
: `All ${filteredObsNotes.length} notes`
|
||
}
|
||
</span>
|
||
{vault && (
|
||
<span className="debug-info">
|
||
(Total: {vault.obs_notes.length}, Search: "{debouncedSearchQuery}")
|
||
</span>
|
||
)}
|
||
{vault && vault.lastImported && (
|
||
<span className="last-imported">
|
||
Last imported: {vault.lastImported.toLocaleString()}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className={`notes-display ${viewMode}`}>
|
||
{viewMode === 'tree' ? (
|
||
<div className="folder-tree-container">
|
||
{folderTree ? (
|
||
<div className="folder-tree">
|
||
{renderFolderTree(folderTree)}
|
||
</div>
|
||
) : (
|
||
<div className="no-folder-tree">
|
||
<p>No folder structure available</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : filteredObsNotes.length === 0 ? (
|
||
<div className="no-notes">
|
||
<p>No notes found. {vault ? `Vault has ${vault.obs_notes.length} notes.` : 'Vault not loaded.'}</p>
|
||
<p>Search query: "{debouncedSearchQuery}"</p>
|
||
</div>
|
||
) : (
|
||
filteredObsNotes.map(obs_note => {
|
||
// Safety check for undefined obs_note
|
||
if (!obs_note) {
|
||
return null
|
||
}
|
||
|
||
const isSelected = selectedNotes.has(obs_note.id)
|
||
const displayTitle = getDisplayTitle(obs_note)
|
||
const contentPreview = getContentPreview(obs_note, viewMode === 'grid' ? 120 : 200)
|
||
|
||
return (
|
||
<div
|
||
key={obs_note.id}
|
||
className={`note-card ${isSelected ? 'selected' : ''}`}
|
||
onClick={() => handleObsNoteToggle(obs_note)}
|
||
>
|
||
<div className="note-card-header">
|
||
<div className="note-card-checkbox">
|
||
<input
|
||
type="checkbox"
|
||
checked={isSelected}
|
||
onChange={() => handleObsNoteToggle(obs_note)}
|
||
onClick={(e) => e.stopPropagation()}
|
||
/>
|
||
</div>
|
||
<div className="note-card-title-section">
|
||
<h3
|
||
className="note-card-title"
|
||
title={displayTitle}
|
||
dangerouslySetInnerHTML={{
|
||
__html: highlightSearchMatches(displayTitle, debouncedSearchQuery)
|
||
}}
|
||
/>
|
||
<span className="note-card-date">
|
||
{obs_note.modified ?
|
||
(obs_note.modified instanceof Date ?
|
||
obs_note.modified.toLocaleDateString() :
|
||
new Date(obs_note.modified).toLocaleDateString()
|
||
) : 'Unknown date'}
|
||
</span>
|
||
</div>
|
||
<button
|
||
className="note-card-quick-add"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
handleObsNoteClick(obs_note)
|
||
}}
|
||
title="Add to Canvas"
|
||
>
|
||
+
|
||
</button>
|
||
</div>
|
||
|
||
<div className="note-card-content">
|
||
<p
|
||
className="note-card-preview"
|
||
dangerouslySetInnerHTML={{
|
||
__html: highlightSearchMatches(contentPreview, debouncedSearchQuery)
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
{obs_note.tags.length > 0 && (
|
||
<div className="note-card-tags">
|
||
{obs_note.tags.slice(0, viewMode === 'grid' ? 2 : 4).map(tag => (
|
||
<span key={tag} className="note-card-tag">
|
||
{tag.replace('#', '')}
|
||
</span>
|
||
))}
|
||
{obs_note.tags.length > (viewMode === 'grid' ? 2 : 4) && (
|
||
<span className="note-card-tag-more">
|
||
+{obs_note.tags.length - (viewMode === 'grid' ? 2 : 4)}
|
||
</span>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
<div className="note-card-meta">
|
||
<span className="note-card-path" title={obs_note.filePath || getFilePath(obs_note)}>
|
||
{getFilePath(obs_note)}
|
||
</span>
|
||
{obs_note.links.length > 0 && (
|
||
<span className="note-card-links">
|
||
{obs_note.links.length} links
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
})
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// Modal mode: render with overlay
|
||
return (
|
||
<div className={`obsidian-browser ${className}`} onClick={handleBackdropClick}>
|
||
<div className="browser-content">
|
||
<button onClick={onClose} className="close-button">
|
||
×
|
||
</button>
|
||
<div className="vault-title">
|
||
<h2>
|
||
{vault ? `Obsidian Vault: ${vault.name}` : 'No Obsidian Vault Connected'}
|
||
</h2>
|
||
{!vault && (
|
||
<div className="vault-connect-section">
|
||
<p className="vault-connect-message">
|
||
Connect your Obsidian vault to browse and add notes to the canvas.
|
||
</p>
|
||
<button
|
||
onClick={handleFolderPicker}
|
||
className="connect-vault-button"
|
||
disabled={isLoading}
|
||
>
|
||
{isLoading ? 'Connecting...' : 'Connect Vault'}
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{vault && (
|
||
<div className="browser-controls">
|
||
<div className="search-container">
|
||
<div className="search-input-wrapper">
|
||
<input
|
||
type="text"
|
||
placeholder="Search notes by title, content, or tags..."
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
className="search-input"
|
||
/>
|
||
{searchQuery && (
|
||
<button
|
||
onClick={() => setSearchQuery('')}
|
||
className="clear-search-button"
|
||
title="Clear search"
|
||
>
|
||
×
|
||
</button>
|
||
)}
|
||
</div>
|
||
<div className="search-stats">
|
||
<span className="search-results-count">
|
||
{searchQuery ? (
|
||
searchQuery !== debouncedSearchQuery ? (
|
||
<span className="search-loading">Searching...</span>
|
||
) : (
|
||
`${filteredObsNotes.length} result${filteredObsNotes.length !== 1 ? 's' : ''} found`
|
||
)
|
||
) : (
|
||
`Showing all ${filteredObsNotes.length} notes`
|
||
)}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="view-controls">
|
||
<div className="view-mode-toggle">
|
||
<button
|
||
onClick={() => setViewMode('tree')}
|
||
className={`view-button ${viewMode === 'tree' ? 'active' : ''}`}
|
||
title="Tree View"
|
||
>
|
||
🌳
|
||
</button>
|
||
<button
|
||
onClick={() => setViewMode('grid')}
|
||
className={`view-button ${viewMode === 'grid' ? 'active' : ''}`}
|
||
title="Grid View"
|
||
>
|
||
⊞
|
||
</button>
|
||
<button
|
||
onClick={() => setViewMode('list')}
|
||
className={`view-button ${viewMode === 'list' ? 'active' : ''}`}
|
||
title="List View"
|
||
>
|
||
☰
|
||
</button>
|
||
</div>
|
||
<button
|
||
onClick={handleDisconnectVault}
|
||
className="disconnect-vault-button"
|
||
title="Disconnect Vault"
|
||
>
|
||
🔌 Disconnect Vault
|
||
</button>
|
||
</div>
|
||
|
||
<div className="selection-controls">
|
||
<button
|
||
onClick={handleSelectAll}
|
||
className="select-all-button"
|
||
disabled={filteredObsNotes.length === 0}
|
||
>
|
||
{selectedNotes.size === filteredObsNotes.length && filteredObsNotes.length > 0 ? 'Deselect All' : 'Select All'}
|
||
</button>
|
||
{selectedNotes.size > 0 && (
|
||
<button
|
||
onClick={handleBulkImport}
|
||
className="bulk-import-button primary"
|
||
>
|
||
🎯 Pull to Canvas ({selectedNotes.size})
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{vault && (
|
||
<div className="notes-container">
|
||
<div className="notes-header">
|
||
<span>
|
||
{debouncedSearchQuery && debouncedSearchQuery.trim()
|
||
? `${filteredObsNotes.length} notes found for "${debouncedSearchQuery}"`
|
||
: `All ${filteredObsNotes.length} notes`
|
||
}
|
||
</span>
|
||
{vault && (
|
||
<span className="debug-info">
|
||
(Total: {vault.obs_notes.length}, Search: "{debouncedSearchQuery}")
|
||
</span>
|
||
)}
|
||
{vault && vault.lastImported && (
|
||
<span className="last-imported">
|
||
Last imported: {vault.lastImported.toLocaleString()}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className={`notes-display ${viewMode}`}>
|
||
{viewMode === 'tree' ? (
|
||
<div className="folder-tree-container">
|
||
{folderTree ? (
|
||
<div className="folder-tree">
|
||
{renderFolderTree(folderTree)}
|
||
</div>
|
||
) : (
|
||
<div className="no-folder-tree">
|
||
<p>No folder structure available</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : filteredObsNotes.length === 0 ? (
|
||
<div className="no-notes">
|
||
<p>No notes found. {vault ? `Vault has ${vault.obs_notes.length} notes.` : 'Vault not loaded.'}</p>
|
||
<p>Search query: "{debouncedSearchQuery}"</p>
|
||
</div>
|
||
) : (
|
||
filteredObsNotes.map(obs_note => {
|
||
// Safety check for undefined obs_note
|
||
if (!obs_note) {
|
||
return null
|
||
}
|
||
|
||
const isSelected = selectedNotes.has(obs_note.id)
|
||
const displayTitle = getDisplayTitle(obs_note)
|
||
const contentPreview = getContentPreview(obs_note, viewMode === 'grid' ? 120 : 200)
|
||
|
||
return (
|
||
<div
|
||
key={obs_note.id}
|
||
className={`note-card ${isSelected ? 'selected' : ''}`}
|
||
onClick={() => handleObsNoteToggle(obs_note)}
|
||
>
|
||
<div className="note-card-header">
|
||
<div className="note-card-checkbox">
|
||
<input
|
||
type="checkbox"
|
||
checked={isSelected}
|
||
onChange={() => handleObsNoteToggle(obs_note)}
|
||
onClick={(e) => e.stopPropagation()}
|
||
/>
|
||
</div>
|
||
<div className="note-card-title-section">
|
||
<h3
|
||
className="note-card-title"
|
||
title={displayTitle}
|
||
dangerouslySetInnerHTML={{
|
||
__html: highlightSearchMatches(displayTitle, debouncedSearchQuery)
|
||
}}
|
||
/>
|
||
<span className="note-card-date">
|
||
{obs_note.modified ?
|
||
(obs_note.modified instanceof Date ?
|
||
obs_note.modified.toLocaleDateString() :
|
||
new Date(obs_note.modified).toLocaleDateString()
|
||
) : 'Unknown date'}
|
||
</span>
|
||
</div>
|
||
<button
|
||
className="note-card-quick-add"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
handleObsNoteClick(obs_note)
|
||
}}
|
||
title="Add to Canvas"
|
||
>
|
||
+
|
||
</button>
|
||
</div>
|
||
|
||
<div className="note-card-content">
|
||
<p
|
||
className="note-card-preview"
|
||
dangerouslySetInnerHTML={{
|
||
__html: highlightSearchMatches(contentPreview, debouncedSearchQuery)
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
{obs_note.tags.length > 0 && (
|
||
<div className="note-card-tags">
|
||
{obs_note.tags.slice(0, viewMode === 'grid' ? 2 : 4).map(tag => (
|
||
<span key={tag} className="note-card-tag">
|
||
{tag.replace('#', '')}
|
||
</span>
|
||
))}
|
||
{obs_note.tags.length > (viewMode === 'grid' ? 2 : 4) && (
|
||
<span className="note-card-tag-more">
|
||
+{obs_note.tags.length - (viewMode === 'grid' ? 2 : 4)}
|
||
</span>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
<div className="note-card-meta">
|
||
<span className="note-card-path" title={obs_note.filePath || getFilePath(obs_note)}>
|
||
{getFilePath(obs_note)}
|
||
</span>
|
||
{obs_note.links.length > 0 && (
|
||
<span className="note-card-links">
|
||
{obs_note.links.length} links
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
})
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default ObsidianVaultBrowser |