feat: standardize UI theme, fix dark mode consistency, and implement editorial tags

memento-note/components/note-editor/note-editor-context.tsx

@@ -2,7 +2,7 @@
 
 import { createContext, useContext, useState, useEffect, useRef, useMemo, useCallback, ReactNode } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
-import { Note, CheckItem, NOTE_COLORS, NoteColor, LinkMetadata, NoteType, NoteSize } from '@/lib/types'
+import { Note, CheckItem, NOTE_COLORS, NoteColor, LinkMetadata, NoteSize } from '@/lib/types'
 import { updateNote, createNote, cleanupOrphanedImages, leaveSharedNote, deleteNote } from '@/app/actions/notes'
 import { fetchLinkMetadata } from '@/app/actions/scrape'
 import { useNotebooks } from '@/context/notebooks-context'
@@ -48,7 +48,6 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
     }
   }, [session?.user?.id])
 
-  // Core content state
   const [title, setTitle] = useState(note.title || '')
   const [content, setContent] = useState(note.content)
   const [checkItems, setCheckItems] = useState<CheckItem[]>(note.checkItems || [])
@@ -60,16 +59,13 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
   const [size, setSize] = useState<NoteSize>(note.size || 'small')
   const [isSaving, setIsSaving] = useState(false)
   const [removedImageUrls, setRemovedImageUrls] = useState<string[]>([])
-  const [noteType, setNoteType] = useState<NoteType>(note.type)
-  const isMarkdown = noteType === 'markdown'
+  const [isMarkdown, setIsMarkdown] = useState(note.type === 'markdown')
   const [showMarkdownPreview, setShowMarkdownPreview] = useState(note.type === 'markdown')
 
-  // Refs
   const fileInputRef = useRef<HTMLInputElement>(null)
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const prevNoteRef = useRef(note)
 
-  // CRITICAL: Sync state when note.id changes (lines 101-116 from original)
   useEffect(() => {
     if (note.id !== prevNoteRef.current.id || note.content !== prevNoteRef.current.content || note.title !== prevNoteRef.current.title) {
       setTitle(note.title || '')
@@ -80,40 +76,54 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
       setLinks(note.links || [])
       setColor(note.color)
       setSize(note.size || 'small')
-      setNoteType(note.type)
+      setIsMarkdown(note.type === 'markdown')
       setShowMarkdownPreview(note.type === 'markdown')
       setCurrentReminder(note.reminder ? new Date(note.reminder as unknown as string) : null)
     }
     prevNoteRef.current = note
   }, [note])
 
-  // Update context notebookId when note changes
   useEffect(() => {
     setContextNotebookId(note.notebookId || null)
   }, [note.notebookId, setContextNotebookId])
 
-  // Auto-tagging hook
+  const [dismissedTags, setDismissedTags] = useState<string[]>([])
+  const dismissedTagsLoadedRef = useRef(false)
+
+  useEffect(() => {
+    dismissedTagsLoadedRef.current = false
+    try {
+      const stored = localStorage.getItem(`dismissed-tags-${note.id}`)
+      if (stored) {
+        setDismissedTags(JSON.parse(stored))
+        dismissedTagsLoadedRef.current = true
+      } else {
+        setDismissedTags([])
+      }
+    } catch (_) {
+      setDismissedTags([])
+    }
+  }, [note.id])
+
+  const autoTaggingEnabled = autoLabelingEnabled && dismissedTags.length < 3
+
   const { suggestions, isAnalyzing: isAnalyzingSuggestions } = useAutoTagging({
-    content: noteType !== 'checklist' ? content : '',
+    content: content,
     notebookId: note.notebookId,
-    enabled: noteType !== 'checklist' && autoLabelingEnabled
+    enabled: autoTaggingEnabled
   })
 
-  // Reminder state
   const [showReminderDialog, setShowReminderDialog] = useState(false)
   const [currentReminder, setCurrentReminder] = useState<Date | null>(
     note.reminder ? new Date(note.reminder as unknown as string) : null
   )
 
-  // Link state
   const [showLinkDialog, setShowLinkDialog] = useState(false)
   const [linkUrl, setLinkUrl] = useState('')
 
-  // Title suggestions state
   const [titleSuggestions, setTitleSuggestions] = useState<TitleSuggestion[]>([])
   const [isGeneratingTitles, setIsGeneratingTitles] = useState(false)
 
-  // Reformulation state
   const [isReformulating, setIsReformulating] = useState(false)
   const [reformulationModal, setReformulationModal] = useState<{
     originalText: string
@@ -121,38 +131,28 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
     option: string
   } | null>(null)
 
-  // AI processing state
   const [isProcessingAI, setIsProcessingAI] = useState(false)
   const [aiOpen, setAiOpen] = useState(false)
   const [infoOpen, setInfoOpen] = useState(false)
   const [isDirty, setIsDirty] = useState(false)
 
-  // fullPage — auto title suggestions
   const [dismissedTitleSuggestions, setDismissedTitleSuggestions] = useState(false)
   const { suggestions: autoTitleSuggestions } = useTitleSuggestions({
     content,
     enabled: fullPage && !title && !dismissedTitleSuggestions,
   })
 
-  // Wire autoTitleSuggestions into state so NoteTitleBlock can display them
   useEffect(() => {
     if (autoTitleSuggestions.length > 0) {
       setTitleSuggestions(autoTitleSuggestions)
     }
   }, [autoTitleSuggestions])
 
-  // Track previous content for copilot action undo
   const [previousContentForCopilot, setPreviousContentForCopilot] = useState<string | null>(null)
 
-  // Memory Echo Connections state
   const [comparisonNotes, setComparisonNotes] = useState<Array<Partial<Note>>>([])
   const [fusionNotes, setFusionNotes] = useState<Array<Partial<Note>>>([])
 
-  // Tags dismissed by the user for this session
-  const [dismissedTags, setDismissedTags] = useState<string[]>([])
-
-  // Filter suggestions to exclude dismissed ones
-  // and those already present on the note
   const existingLabelsLower = (note.labels || []).map((l) => l.toLowerCase())
   const filteredSuggestions = suggestions.filter(s => {
     if (!s || !s.tag) return false
@@ -185,10 +185,9 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
     }
   }
 
-  // Paste handler: upload clipboard images
   useEffect(() => {
     const handlePaste = async (e: ClipboardEvent) => {
-      if (noteType === 'richtext' && (e.target as HTMLElement)?.closest('.notion-editor')) return;
+      if (!isMarkdown && (e.target as HTMLElement)?.closest('.notion-editor')) return;
       const items = e.clipboardData?.items
       if (!items) return
       for (const item of Array.from(items)) {
@@ -207,9 +206,8 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
     }
     document.addEventListener('paste', handlePaste, { capture: true })
     return () => document.removeEventListener('paste', handlePaste, { capture: true } as any)
-  }, [t, noteType])
+  }, [t, isMarkdown])
 
-  // Auto-grow textarea as content grows
   useEffect(() => {
     const el = textareaRef.current
     if (!el) return
@@ -217,10 +215,8 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
     el.style.height = Math.max(el.scrollHeight, 280) + 'px'
   }, [content])
 
-  // Also auto-grow when switching FROM preview TO edit mode
   useEffect(() => {
-    if (showMarkdownPreview) return // we're in preview, textarea not mounted
-    // Defer one frame so the textarea is in the DOM
+    if (showMarkdownPreview) return
     const raf = requestAnimationFrame(() => {
       const el = textareaRef.current
       if (!el) return
@@ -234,7 +230,6 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
   const handleRemoveImage = (index: number) => {
     const removedUrl = images[index]
     setImages(images.filter((_, i) => i !== index))
-    // Track removed images for cleanup on save
     if (removedUrl) {
       setRemovedImageUrls(prev => [...prev, removedUrl])
     }
@@ -267,9 +262,9 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
   }
 
   const allImages = useMemo(() => {
-    const extracted = noteType === 'richtext' ? extractImagesFromHTML(content) : [];
+    const extracted = !isMarkdown ? extractImagesFromHTML(content) : [];
     return Array.from(new Set([...images, ...extracted]));
-  }, [images, content, noteType]);
+  }, [images, content, isMarkdown]);
 
   const handleGenerateTitles = async () => {
     const fullContentForAI = [
@@ -301,7 +296,6 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
 
       const data = await response.json()
       setTitleSuggestions(data.suggestions || [])
-      // Auto-apply first title for dialog mode (fullPage shows suggestions UI instead)
       if (!fullPage && data.suggestions?.[0]?.title) {
         setTitle(data.suggestions[0].title)
         setDismissedTitleSuggestions(true)
@@ -485,7 +479,7 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
       if (!response.ok) throw new Error(data.error || t('notes.transformFailed'))
 
       setContent(data.transformedText)
-      setNoteType('markdown')
+      setIsMarkdown(true)
       setShowMarkdownPreview(false)
 
       toast.success(t('ai.transformSuccess'))
@@ -500,13 +494,7 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
   const handleApplyRefactor = () => {
     if (!reformulationModal) return
 
-    const selectedText = window.getSelection()?.toString()
-    if (selectedText) {
-      setContent(reformulationModal.reformulatedText)
-    } else {
-      setContent(reformulationModal.reformulatedText)
-    }
-
+    setContent(reformulationModal.reformulatedText)
     setReformulationModal(null)
     toast.success(t('ai.reformulationApplied'))
   }
@@ -536,35 +524,27 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
   }
 
   const handleSave = async () => {
-    console.log('[SAVE] handleSave called, note.id:', note.id)
     setIsSaving(true)
     try {
-      console.log('[SAVE] Calling updateNote...')
       const result = await updateNote(note.id, {
         title: title.trim() || null,
-        content: noteType !== 'checklist' ? content : '',
-        checkItems: noteType === 'checklist' ? checkItems : null,
+        content,
+        checkItems: null,
         labels,
         images,
         links,
         color,
         reminder: currentReminder,
-        isMarkdown: noteType === 'markdown',
-        type: noteType,
+        isMarkdown,
+        type: isMarkdown ? 'markdown' as const : 'richtext' as const,
         size,
       })
-      console.log('[SAVE] updateNote succeeded, result title:', result?.title, 'result content len:', result?.content?.length)
-      console.log('[SAVE] prevNoteRef BEFORE sync:', JSON.stringify(prevNoteRef.current.content)?.substring(0, 80))
-      // Keep local note ref in sync with saved data so useEffect detects changes correctly
       prevNoteRef.current = { ...prevNoteRef.current, ...result }
-      console.log('[SAVE] prevNoteRef AFTER sync:', JSON.stringify(prevNoteRef.current.content)?.substring(0, 80))
       if (removedImageUrls.length > 0) {
         cleanupOrphanedImages(removedImageUrls, note.id).catch(() => {})
       }
       await refreshLabels()
-      // Notify parent with the freshly-saved note so it can update its local state immediately
       onNoteSaved?.(result)
-      // Invalidate note and notes list cache
       queryClient.invalidateQueries({ queryKey: queryKeys.note(note.id) })
       queryClient.invalidateQueries({ queryKey: queryKeys.notes(note.notebookId) })
       triggerRefresh()
@@ -607,6 +587,7 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
 
     if (!tagExists) {
       setLabels(prev => [...prev, tag])
+      setIsDirty(true)
 
       const globalExists = globalLabels.some(l => l.name.toLowerCase() === tag.toLowerCase())
       if (!globalExists) {
@@ -621,11 +602,16 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
   }
 
   const handleDismissGhostTag = (tag: string) => {
-    setDismissedTags(prev => [...prev, tag])
+    setDismissedTags(prev => {
+      const next = [...prev, tag]
+      try { localStorage.setItem(`dismissed-tags-${note.id}`, JSON.stringify(next)) } catch (_) {}
+      return next
+    })
   }
 
   const handleRemoveLabel = (label: string) => {
     setLabels(labels.filter(l => l !== label))
+    setIsDirty(true)
   }
 
   const handleMakeCopy = async () => {
@@ -638,54 +624,42 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
         labels: labels,
         images: images,
         links: links,
-        isMarkdown: noteType === 'markdown',
-        type: noteType,
+        isMarkdown,
+        type: isMarkdown ? 'markdown' : 'richtext',
         size: size,
       })
       toast.success(t('notes.copySuccess'))
-      // Invalidate notes list cache for current notebook
       queryClient.invalidateQueries({ queryKey: queryKeys.notes(note.notebookId) })
       triggerRefresh()
-      // Note: onClose is handled by the composition component
     } catch (error) {
       console.error('Failed to copy note:', error)
       toast.error(t('notes.copyFailed'))
     }
   }
 
-  // Save in place (fullPage) — without closing
   const handleSaveInPlace = async () => {
-    console.log('[SAVE] handleSaveInPlace called, note.id:', note.id, 'content length:', content.length, 'title:', title.substring(0, 50))
     setIsSaving(true)
     try {
-      console.log('[SAVE] Calling updateNote with note.id:', note.id, '| content len:', content.length, '| title:', title.substring(0, 30))
       const updatePayload = {
         title: title.trim() || null,
-        content: noteType !== 'checklist' ? content : '',
-        checkItems: noteType === 'checklist' ? checkItems : null,
+        content,
+        checkItems: null,
         labels,
         images,
         links,
         color,
         reminder: currentReminder,
-        isMarkdown: noteType === 'markdown',
-        type: noteType,
+        isMarkdown,
+        type: isMarkdown ? 'markdown' as const : 'richtext' as const,
         size,
       }
-      console.log('[SAVE] payload.content:', JSON.stringify(updatePayload.content)?.substring(0, 100))
       const result = await updateNote(note.id, updatePayload)
-      console.log('[SAVE] updateNote succeeded, result.id:', result?.id, '| result.content len:', result?.content?.length, '| result.title:', result?.title)
-      console.log('[SAVE] prevNoteRef BEFORE sync:', JSON.stringify(prevNoteRef.current.content)?.substring(0, 50))
-      // Sync local note reference with saved data so prop/state stay aligned after save
       prevNoteRef.current = { ...prevNoteRef.current, ...result }
-      console.log('[SAVE] prevNoteRef AFTER sync:', JSON.stringify(prevNoteRef.current.content)?.substring(0, 50))
       if (removedImageUrls.length > 0) {
         cleanupOrphanedImages(removedImageUrls, note.id).catch(() => {})
       }
       await refreshLabels()
-      // Notify parent with the freshly-saved note so it can update its local state immediately
       onNoteSaved?.(result)
-      // Invalidate note and notes list cache
       queryClient.invalidateQueries({ queryKey: queryKeys.note(note.id) })
       queryClient.invalidateQueries({ queryKey: queryKeys.notes(note.notebookId) })
       triggerRefresh()
@@ -699,7 +673,6 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
     }
   }
 
-  // Ctrl+S / Cmd+S shortcut — save in place in fullPage mode
   useEffect(() => {
     if (!fullPage) return
     const handler = (e: KeyboardEvent) => {
@@ -712,7 +685,6 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
     return () => document.removeEventListener('keydown', handler)
   }, [fullPage, isSaving])
 
-  // Build state object
   const state: NoteEditorState = useMemo(() => ({
     title,
     content,
@@ -723,7 +695,6 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
     newLabel,
     color: color as NoteColor,
     size,
-    noteType,
     showMarkdownPreview,
     removedImageUrls,
     isSaving,
@@ -750,7 +721,7 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
     allImages,
     colorClasses,
   }), [
-    title, content, checkItems, labels, images, links, newLabel, color, size, noteType,
+    title, content, checkItems, labels, images, links, newLabel, color, size,
     showMarkdownPreview, removedImageUrls, isSaving, isDirty, isProcessingAI, aiOpen, infoOpen,
     isGeneratingTitles, titleSuggestions, dismissedTitleSuggestions, isReformulating,
     reformulationModal, previousContentForCopilot, showReminderDialog, currentReminder,
@@ -758,10 +729,6 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
     isAnalyzingSuggestions, isMarkdown, allImages, colorClasses
   ])
 
-  // Build actions object — NOT memoized to avoid stale closures.
-  // handleSave / handleSaveInPlace close over content, title, labels, etc.
-  // which change on every keystroke. Memoizing with [] would freeze those
-  // values at the first render, causing the wrong content to be saved.
   const actions: NoteEditorActions = {
     setTitle: (t) => { setTitle(t); setIsDirty(true); setDismissedTitleSuggestions(true) },
     setDismissedTitleSuggestions,
@@ -782,8 +749,8 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
     setLinks,
     handleAddLink,
     handleRemoveLink,
-    setNoteType: (type) => { setNoteType(type); setShowMarkdownPreview(type === 'markdown'); setIsDirty(true) },
     setShowMarkdownPreview: (show) => { setShowMarkdownPreview(show); setIsDirty(true) },
+    setIsMarkdown: (m) => { setIsMarkdown(m); setIsDirty(true) },
     setColor: (c) => { setColor(c); setIsDirty(true) },
     setSize: (s) => { setSize(s); setIsDirty(true) },
     setShowReminderDialog,
@@ -815,7 +782,6 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
     setPreviousContentForCopilot,
   }
 
-
   const value: NoteEditorContextValue = useMemo(() => ({
     note,
     readOnly,
@@ -841,4 +807,4 @@ export function useNoteEditorContext() {
     throw new Error('useNoteEditorContext must be used within a NoteEditorProvider')
   }
   return context
-}
+}