diff --git a/src/components/Inspector.tsx b/src/components/Inspector.tsx index e1a2532b..86295a14 100644 --- a/src/components/Inspector.tsx +++ b/src/components/Inspector.tsx @@ -1,4 +1,4 @@ -import { useMemo, useCallback } from 'react' +import { useMemo, useCallback, useState, useRef } from 'react' import type { ComponentType, SVGAttributes } from 'react' import type { VaultEntry, GitCommit } from '../types' import { cn } from '@/lib/utils' @@ -117,7 +117,19 @@ function RelationshipGroup({ label, refs, entries, onNavigate }: { label: string ) } -function DynamicRelationshipsPanel({ frontmatter, entries, onNavigate }: { frontmatter: ParsedFrontmatter; entries: VaultEntry[]; onNavigate: (target: string) => void }) { +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(null) + const relationshipEntries = useMemo(() => { return Object.entries(frontmatter) .filter(([key, value]) => key !== 'Type' && (RELATIONSHIP_KEYS.has(key) || containsWikilinks(value))) @@ -130,6 +142,24 @@ function DynamicRelationshipsPanel({ frontmatter, entries, onNavigate }: { front .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 (
{relationshipEntries.length === 0 ? ( @@ -139,13 +169,57 @@ function DynamicRelationshipsPanel({ frontmatter, entries, onNavigate }: { front )) )} - + + {showForm ? ( +
+ + {noteTitles.map(t => + setRelKey(e.target.value)} + /> + setRelTarget(e.target.value)} + /> +
+ + +
+
+ ) : ( + + )}
) } @@ -322,7 +396,7 @@ export function Inspector({ onAddProperty={onAddProperty ? handleAddProperty : undefined} onNavigate={onNavigate} /> - +