91b1201112
Phase 1: NoteEditor Split (64KB → 9 focused components) - components/note-editor/: types.ts, context, toolbar, title-block, content-area, metadata-section, full-page, dialog compositions - Maintains backwards compatibility via re-export from note-editor.tsx Phase 2: Context Consolidation (5 → 3 contexts) - NotebooksContext absorbs LabelContext (labels CRUD) - EditorUIContext merges HomeViewContext + NotebookDragContext - Removed: LabelContext, home-view-context, notebook-drag-context Phase 3: React Query Infrastructure - Added QueryProvider with @tanstack/react-query - lib/query-keys.ts: centralized query key definitions - lib/query-hooks.ts: useNotes, useNotebooksQuery, useLabelsQuery - lib/use-refresh.ts: hybrid invalidateQueries + triggerRefresh helper - NotebooksContext: invalidateQueries on mutations (with triggerRefresh fallback) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
import { useNoteEditorContext } from './note-editor-context'
|
|
import { LabelBadge } from '../label-badge'
|
|
import { GhostTags } from '../ghost-tags'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export function NoteMetadataSection() {
|
|
const { state, actions, readOnly } = useNoteEditorContext()
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Labels */}
|
|
{state.labels.length > 0 && (
|
|
<div className="flex flex-wrap gap-2">
|
|
{state.labels.map((label) => (
|
|
<LabelBadge
|
|
key={label}
|
|
label={label}
|
|
onRemove={() => actions.handleRemoveLabel(label)}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Ghost Tags - only show in dialog mode */}
|
|
{!readOnly && state.noteType !== 'richtext' && (
|
|
<GhostTags
|
|
suggestions={state.filteredSuggestions}
|
|
addedTags={state.labels}
|
|
isAnalyzing={state.isAnalyzingSuggestions}
|
|
onSelectTag={actions.handleSelectGhostTag}
|
|
onDismissTag={actions.handleDismissGhostTag}
|
|
/>
|
|
)}
|
|
|
|
{/* Color indicator */}
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-foreground/50">Color:</span>
|
|
<div className={cn('w-4 h-4 rounded-full', state.colorClasses?.bg || 'bg-gray-100')} />
|
|
</div>
|
|
|
|
{/* Size indicator */}
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-foreground/50">Size:</span>
|
|
<span className="text-xs capitalize">{state.size}</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |