sepehr
3818eb8237
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m14s
- Complete rewrite of note-history-modal: version list with inline restore/delete,
split diff view with synced scrolling, rich preview for markdown/richtext/checklist
- Fix restore not updating editor: use key={id-updatedAt} on NoteInlineEditor to
force remount on restore, and add sync useEffect to reset local state on prop changes
- Add sync useEffect in NoteEditor for external note updates
- Add historyEnabled to NOTE_LIST_SELECT (no more 'Activer' on every modal open)
- Replace browser confirm() with shadcn AlertDialog for delete confirmation
- Add i18n keys: currentVersion, compareVersions, diffTitle, diffSelectHint, deleteVersionDesc
- Install diff + @types/diff for visual line diffing
- Fix MasonryGrid render-phase sync to preserve local sizes
- Update notes-tabs-view merge logic for restored note propagation
- Remove debug console.log from restoreNoteVersion
1151 lines
42 KiB
TypeScript
1151 lines
42 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useRef, useEffect } from 'react'
|
|
import { Note, CheckItem, NOTE_COLORS, NoteColor, LinkMetadata, NoteType } from '@/lib/types'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
} from '@/components/ui/dialog'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Textarea } from '@/components/ui/textarea'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Checkbox } from '@/components/ui/checkbox'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
DropdownMenuSub,
|
|
DropdownMenuSubTrigger,
|
|
DropdownMenuSubContent,
|
|
} from '@/components/ui/dropdown-menu'
|
|
import { NoteTypeSelector } from '@/components/note-type-selector'
|
|
import { RichTextEditor } from '@/components/rich-text-editor'
|
|
import { X, Plus, Palette, Image as ImageIcon, Bell, Eye, Link as LinkIcon, Sparkles, Maximize2, Copy, Wand2, LogOut } from 'lucide-react'
|
|
import { updateNote, createNote, cleanupOrphanedImages, leaveSharedNote } from '@/app/actions/notes'
|
|
import { fetchLinkMetadata } from '@/app/actions/scrape'
|
|
import { cn } from '@/lib/utils'
|
|
import { toast } from 'sonner'
|
|
import { MarkdownContent } from './markdown-content'
|
|
import { LabelManager } from './label-manager'
|
|
import { LabelBadge } from './label-badge'
|
|
import { ReminderDialog } from './reminder-dialog'
|
|
import { EditorImages } from './editor-images'
|
|
import { useAutoTagging } from '@/hooks/use-auto-tagging'
|
|
import { GhostTags } from './ghost-tags'
|
|
import { TitleSuggestions } from './title-suggestions'
|
|
import type { TitleSuggestion } from '@/hooks/use-title-suggestions'
|
|
import { EditorConnectionsSection } from './editor-connections-section'
|
|
import { ComparisonModal } from './comparison-modal'
|
|
import { FusionModal } from './fusion-modal'
|
|
|
|
import { ContextualAIChat } from './contextual-ai-chat'
|
|
import { useLabels } from '@/context/LabelContext'
|
|
import { useNoteRefresh } from '@/context/NoteRefreshContext'
|
|
import { useNotebooks } from '@/context/notebooks-context'
|
|
import { NoteSize } from '@/lib/types'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
import { useSession } from 'next-auth/react'
|
|
import { getAISettings } from '@/app/actions/ai-settings'
|
|
|
|
interface NoteEditorProps {
|
|
note: Note
|
|
readOnly?: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
export function NoteEditor({ note, readOnly = false, onClose }: NoteEditorProps) {
|
|
const { data: session } = useSession()
|
|
const [aiAssistantEnabled, setAiAssistantEnabled] = useState(true)
|
|
const [autoLabelingEnabled, setAutoLabelingEnabled] = useState(true)
|
|
|
|
useEffect(() => {
|
|
if (session?.user?.id) {
|
|
getAISettings(session.user.id).then(settings => {
|
|
setAiAssistantEnabled(settings.paragraphRefactor !== false)
|
|
setAutoLabelingEnabled(settings.autoLabeling !== false)
|
|
}).catch(err => console.error("Failed to fetch AI settings", err))
|
|
}
|
|
}, [session?.user?.id])
|
|
|
|
const { labels: globalLabels, addLabel, refreshLabels, setNotebookId: setContextNotebookId } = useLabels()
|
|
const { triggerRefresh } = useNoteRefresh()
|
|
const { t } = useLanguage()
|
|
const [title, setTitle] = useState(note.title || '')
|
|
const [content, setContent] = useState(note.content)
|
|
const [checkItems, setCheckItems] = useState<CheckItem[]>(note.checkItems || [])
|
|
const [labels, setLabels] = useState<string[]>(note.labels || [])
|
|
const [images, setImages] = useState<string[]>(note.images || [])
|
|
const [links, setLinks] = useState<LinkMetadata[]>(note.links || [])
|
|
const [newLabel, setNewLabel] = useState('')
|
|
const [color, setColor] = useState(note.color)
|
|
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 [showMarkdownPreview, setShowMarkdownPreview] = useState(note.type === 'markdown')
|
|
const fileInputRef = useRef<HTMLInputElement>(null)
|
|
|
|
const prevNoteRef = useRef(note)
|
|
useEffect(() => {
|
|
if (note.id !== prevNoteRef.current.id || note.content !== prevNoteRef.current.content || note.title !== prevNoteRef.current.title) {
|
|
setTitle(note.title || '')
|
|
setContent(note.content)
|
|
setCheckItems(note.checkItems || [])
|
|
setLabels(note.labels || [])
|
|
setImages(note.images || [])
|
|
setLinks(note.links || [])
|
|
setColor(note.color)
|
|
setSize(note.size || 'small')
|
|
setNoteType(note.type)
|
|
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 - use local state for live suggestions as user types
|
|
const { suggestions, isAnalyzing } = useAutoTagging({
|
|
content: noteType !== 'checklist' ? content : '',
|
|
notebookId: note.notebookId,
|
|
enabled: noteType !== 'checklist' && autoLabelingEnabled
|
|
})
|
|
|
|
// 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
|
|
reformulatedText: string
|
|
option: string
|
|
} | null>(null)
|
|
|
|
// AI processing state for ActionBar
|
|
const [isProcessingAI, setIsProcessingAI] = useState(false)
|
|
const [aiOpen, setAiOpen] = useState(false)
|
|
// Track previous content for copilot action undo
|
|
const [previousContentForCopilot, setPreviousContentForCopilot] = useState<string | null>(null)
|
|
|
|
// Notebooks (for copilot chat scope)
|
|
const { notebooks } = useNotebooks()
|
|
|
|
// 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[]>([])
|
|
|
|
const colorClasses = NOTE_COLORS[color as NoteColor] || NOTE_COLORS.default
|
|
|
|
const handleSelectGhostTag = async (tag: string) => {
|
|
// Case-insensitive check
|
|
const tagExists = labels.some(l => l.toLowerCase() === tag.toLowerCase())
|
|
|
|
if (!tagExists) {
|
|
setLabels(prev => [...prev, tag])
|
|
|
|
// Create the label globally if it doesn't exist
|
|
const globalExists = globalLabels.some(l => l.name.toLowerCase() === tag.toLowerCase())
|
|
if (!globalExists) {
|
|
try {
|
|
await addLabel(tag)
|
|
} catch (err) {
|
|
console.error('Error creating auto-label:', err)
|
|
}
|
|
}
|
|
toast.success(t('ai.tagAdded', { tag }))
|
|
}
|
|
}
|
|
|
|
const handleDismissGhostTag = (tag: string) => {
|
|
setDismissedTags(prev => [...prev, tag])
|
|
}
|
|
|
|
// 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
|
|
return !dismissedTags.includes(s.tag) && !existingLabelsLower.includes(s.tag.toLowerCase())
|
|
})
|
|
|
|
const uploadImageFile = async (file: File) => {
|
|
const formData = new FormData()
|
|
formData.append('file', file)
|
|
const response = await fetch('/api/upload', { method: 'POST', body: formData })
|
|
if (!response.ok) throw new Error('Upload failed')
|
|
const data = await response.json()
|
|
return data.url
|
|
}
|
|
|
|
const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const files = e.target.files
|
|
if (!files) return
|
|
|
|
for (const file of Array.from(files)) {
|
|
try {
|
|
const url = await uploadImageFile(file)
|
|
setImages(prev => [...prev, url])
|
|
} catch (error) {
|
|
console.error('Upload error:', error)
|
|
toast.error(t('notes.uploadFailed', { filename: file.name }))
|
|
}
|
|
}
|
|
}
|
|
|
|
// Paste handler: upload clipboard images
|
|
useEffect(() => {
|
|
const handlePaste = async (e: ClipboardEvent) => {
|
|
const items = e.clipboardData?.items
|
|
if (!items) return
|
|
for (const item of Array.from(items)) {
|
|
if (item.type.startsWith('image/')) {
|
|
e.preventDefault()
|
|
const file = item.getAsFile()
|
|
if (!file) continue
|
|
try {
|
|
const url = await uploadImageFile(file)
|
|
setImages(prev => [...prev, url])
|
|
} catch {
|
|
toast.error(t('notes.uploadFailed', { filename: 'pasted image' }))
|
|
}
|
|
}
|
|
}
|
|
}
|
|
document.addEventListener('paste', handlePaste)
|
|
return () => document.removeEventListener('paste', handlePaste)
|
|
}, [t])
|
|
|
|
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])
|
|
}
|
|
}
|
|
|
|
const handleAddLink = async () => {
|
|
if (!linkUrl) return
|
|
|
|
setShowLinkDialog(false)
|
|
|
|
try {
|
|
const metadata = await fetchLinkMetadata(linkUrl)
|
|
if (metadata) {
|
|
setLinks(prev => [...prev, metadata])
|
|
toast.success(t('notes.linkAdded'))
|
|
} else {
|
|
toast.warning(t('notes.linkMetadataFailed'))
|
|
setLinks(prev => [...prev, { url: linkUrl, title: linkUrl }])
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to add link:', error)
|
|
toast.error(t('notes.linkAddFailed'))
|
|
} finally {
|
|
setLinkUrl('')
|
|
}
|
|
}
|
|
|
|
const handleRemoveLink = (index: number) => {
|
|
setLinks(links.filter((_, i) => i !== index))
|
|
}
|
|
|
|
const handleGenerateTitles = async () => {
|
|
// Combine content and link metadata for AI
|
|
const fullContent = [
|
|
content,
|
|
...links.map(l => `${l.title || ''} ${l.description || ''}`)
|
|
].join(' ').trim()
|
|
|
|
const wordCount = fullContent.split(/\s+/).filter(word => word.length > 0).length
|
|
|
|
if (wordCount < 10) {
|
|
toast.error(t('ai.titleGenerationMinWords', { count: wordCount }))
|
|
return
|
|
}
|
|
|
|
setIsGeneratingTitles(true)
|
|
try {
|
|
const response = await fetch('/api/ai/title-suggestions', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ content: fullContent }),
|
|
})
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json()
|
|
throw new Error(errorData.error || t('ai.titleGenerationError'))
|
|
}
|
|
|
|
const data = await response.json()
|
|
setTitleSuggestions(data.suggestions || [])
|
|
toast.success(t('ai.titlesGenerated', { count: data.suggestions.length }))
|
|
} catch (error: any) {
|
|
console.error('Error generating titles:', error)
|
|
toast.error(error.message || t('ai.titleGenerationFailed'))
|
|
} finally {
|
|
setIsGeneratingTitles(false)
|
|
}
|
|
}
|
|
|
|
const handleSelectTitle = (title: string) => {
|
|
setTitle(title)
|
|
setTitleSuggestions([])
|
|
toast.success(t('ai.titleApplied'))
|
|
}
|
|
|
|
const handleReformulate = async (option: 'clarify' | 'shorten' | 'improve') => {
|
|
// Get selected text or full content
|
|
const selectedText = window.getSelection()?.toString()
|
|
|
|
if (!selectedText && (!content || content.trim().length === 0)) {
|
|
toast.error(t('ai.reformulationNoText'))
|
|
return
|
|
}
|
|
|
|
// If selection is too short, use full content instead
|
|
let textToReformulate: string
|
|
if (selectedText && selectedText.trim().split(/\s+/).filter(word => word.length > 0).length >= 10) {
|
|
textToReformulate = selectedText
|
|
} else {
|
|
textToReformulate = content
|
|
if (selectedText) {
|
|
toast.info(t('ai.reformulationSelectionTooShort'))
|
|
}
|
|
}
|
|
|
|
const wordCount = textToReformulate.trim().split(/\s+/).filter(word => word.length > 0).length
|
|
|
|
if (wordCount < 10) {
|
|
toast.error(t('ai.reformulationMinWords', { count: wordCount }))
|
|
return
|
|
}
|
|
|
|
if (wordCount > 500) {
|
|
toast.error(t('ai.reformulationMaxWords'))
|
|
return
|
|
}
|
|
|
|
setIsReformulating(true)
|
|
try {
|
|
const response = await fetch('/api/ai/reformulate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
text: textToReformulate,
|
|
option: option
|
|
}),
|
|
})
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json()
|
|
throw new Error(errorData.error || t('ai.reformulationError'))
|
|
}
|
|
|
|
const data = await response.json()
|
|
|
|
// Show reformulation modal
|
|
setReformulationModal({
|
|
originalText: data.originalText,
|
|
reformulatedText: data.reformulatedText,
|
|
option: data.option
|
|
})
|
|
} catch (error: any) {
|
|
console.error('Error reformulating:', error)
|
|
toast.error(error.message || t('ai.reformulationFailed'))
|
|
} finally {
|
|
setIsReformulating(false)
|
|
}
|
|
}
|
|
|
|
// Simplified AI handlers for ActionBar (direct content update)
|
|
const handleClarifyDirect = async () => {
|
|
const wordCount = content.split(/\s+/).filter(w => w.length > 0).length
|
|
if (!content || wordCount < 10) {
|
|
toast.error(t('ai.reformulationMinWords', { count: wordCount }))
|
|
return
|
|
}
|
|
|
|
setIsProcessingAI(true)
|
|
try {
|
|
const response = await fetch('/api/ai/reformulate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ text: content, option: 'clarify' })
|
|
})
|
|
const data = await response.json()
|
|
if (!response.ok) throw new Error(data.error || t('notes.clarifyFailed'))
|
|
setContent(data.reformulatedText || data.text)
|
|
toast.success(t('ai.reformulationApplied'))
|
|
} catch (error) {
|
|
console.error('Clarify error:', error)
|
|
toast.error(t('notes.clarifyFailed'))
|
|
} finally {
|
|
setIsProcessingAI(false)
|
|
}
|
|
}
|
|
|
|
const handleShortenDirect = async () => {
|
|
const wordCount = content.split(/\s+/).filter(w => w.length > 0).length
|
|
if (!content || wordCount < 10) {
|
|
toast.error(t('ai.reformulationMinWords', { count: wordCount }))
|
|
return
|
|
}
|
|
|
|
setIsProcessingAI(true)
|
|
try {
|
|
const response = await fetch('/api/ai/reformulate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ text: content, option: 'shorten' })
|
|
})
|
|
const data = await response.json()
|
|
if (!response.ok) throw new Error(data.error || t('notes.shortenFailed'))
|
|
setContent(data.reformulatedText || data.text)
|
|
toast.success(t('ai.reformulationApplied'))
|
|
} catch (error) {
|
|
console.error('Shorten error:', error)
|
|
toast.error(t('notes.shortenFailed'))
|
|
} finally {
|
|
setIsProcessingAI(false)
|
|
}
|
|
}
|
|
|
|
const handleImproveDirect = async () => {
|
|
const wordCount = content.split(/\s+/).filter(w => w.length > 0).length
|
|
if (!content || wordCount < 10) {
|
|
toast.error(t('ai.reformulationMinWords', { count: wordCount }))
|
|
return
|
|
}
|
|
|
|
setIsProcessingAI(true)
|
|
try {
|
|
const response = await fetch('/api/ai/reformulate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ text: content, option: 'improve' })
|
|
})
|
|
const data = await response.json()
|
|
if (!response.ok) throw new Error(data.error || t('notes.improveFailed'))
|
|
setContent(data.reformulatedText || data.text)
|
|
toast.success(t('ai.reformulationApplied'))
|
|
} catch (error) {
|
|
console.error('Improve error:', error)
|
|
toast.error(t('notes.improveFailed'))
|
|
} finally {
|
|
setIsProcessingAI(false)
|
|
}
|
|
}
|
|
|
|
const handleTransformMarkdown = async () => {
|
|
const wordCount = content.split(/\s+/).filter(w => w.length > 0).length
|
|
if (!content || wordCount < 10) {
|
|
toast.error(t('ai.reformulationMinWords', { count: wordCount }))
|
|
return
|
|
}
|
|
|
|
if (wordCount > 500) {
|
|
toast.error(t('ai.reformulationMaxWords'))
|
|
return
|
|
}
|
|
|
|
setIsProcessingAI(true)
|
|
try {
|
|
const response = await fetch('/api/ai/transform-markdown', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ text: content })
|
|
})
|
|
const data = await response.json()
|
|
if (!response.ok) throw new Error(data.error || t('notes.transformFailed'))
|
|
|
|
// Set the transformed markdown content and enable markdown mode
|
|
setContent(data.transformedText)
|
|
setNoteType('markdown')
|
|
setShowMarkdownPreview(false)
|
|
|
|
toast.success(t('ai.transformSuccess'))
|
|
} catch (error) {
|
|
console.error('Transform to markdown error:', error)
|
|
toast.error(t('ai.transformError'))
|
|
} finally {
|
|
setIsProcessingAI(false)
|
|
}
|
|
}
|
|
|
|
const handleApplyRefactor = () => {
|
|
if (!reformulationModal) return
|
|
|
|
// If selected text exists, replace it
|
|
const selectedText = window.getSelection()?.toString()
|
|
if (selectedText) {
|
|
// For now, replace full content (TODO: improve to replace selection only)
|
|
setContent(reformulationModal.reformulatedText)
|
|
} else {
|
|
setContent(reformulationModal.reformulatedText)
|
|
}
|
|
|
|
setReformulationModal(null)
|
|
toast.success(t('ai.reformulationApplied'))
|
|
}
|
|
|
|
const handleReminderSave = async (date: Date) => {
|
|
if (date < new Date()) {
|
|
toast.error(t('notes.reminderPastError'))
|
|
return
|
|
}
|
|
setCurrentReminder(date)
|
|
try {
|
|
await updateNote(note.id, { reminder: date })
|
|
toast.success(t('notes.reminderSet', { datetime: date.toLocaleString() }))
|
|
} catch {
|
|
toast.error(t('notebook.savingReminder'))
|
|
}
|
|
}
|
|
|
|
const handleRemoveReminder = async () => {
|
|
setCurrentReminder(null)
|
|
try {
|
|
await updateNote(note.id, { reminder: null })
|
|
toast.success(t('notes.reminderRemoved'))
|
|
} catch {
|
|
toast.error(t('notebook.removingReminder'))
|
|
}
|
|
}
|
|
|
|
const handleSave = async () => {
|
|
setIsSaving(true)
|
|
try {
|
|
await updateNote(note.id, {
|
|
title: title.trim() || null,
|
|
content: noteType !== 'checklist' ? content : '',
|
|
checkItems: noteType === 'checklist' ? checkItems : null,
|
|
labels,
|
|
images,
|
|
links,
|
|
color,
|
|
reminder: currentReminder,
|
|
isMarkdown: noteType === 'markdown',
|
|
type: noteType,
|
|
size,
|
|
})
|
|
|
|
// Clean up removed image files from disk (best-effort, don't block save)
|
|
if (removedImageUrls.length > 0) {
|
|
cleanupOrphanedImages(removedImageUrls, note.id).catch(() => {})
|
|
}
|
|
|
|
// Refresh global labels to reflect any deletions (orphans)
|
|
await refreshLabels()
|
|
|
|
// Refresh the notes list
|
|
triggerRefresh()
|
|
|
|
onClose()
|
|
} catch (error) {
|
|
console.error('Failed to save note:', error)
|
|
} finally {
|
|
setIsSaving(false)
|
|
}
|
|
}
|
|
|
|
const handleCheckItem = (id: string) => {
|
|
setCheckItems(items =>
|
|
items.map(item =>
|
|
item.id === id ? { ...item, checked: !item.checked } : item
|
|
)
|
|
)
|
|
}
|
|
|
|
const handleUpdateCheckItem = (id: string, text: string) => {
|
|
setCheckItems(items =>
|
|
items.map(item => (item.id === id ? { ...item, text } : item))
|
|
)
|
|
}
|
|
|
|
const handleAddCheckItem = () => {
|
|
setCheckItems([
|
|
...checkItems,
|
|
{ id: Date.now().toString(), text: '', checked: false },
|
|
])
|
|
}
|
|
|
|
const handleRemoveCheckItem = (id: string) => {
|
|
setCheckItems(items => items.filter(item => item.id !== id))
|
|
}
|
|
|
|
const handleRemoveLabel = (label: string) => {
|
|
setLabels(labels.filter(l => l !== label))
|
|
}
|
|
|
|
const handleMakeCopy = async () => {
|
|
try {
|
|
const newNote = await createNote({
|
|
title: `${title || t('notes.untitled')} (${t('notes.copy')})`,
|
|
content: content,
|
|
color: color,
|
|
checkItems: checkItems,
|
|
labels: labels,
|
|
images: images,
|
|
links: links,
|
|
isMarkdown: noteType === 'markdown',
|
|
type: noteType,
|
|
size: size,
|
|
})
|
|
toast.success(t('notes.copySuccess'))
|
|
triggerRefresh()
|
|
onClose()
|
|
} catch (error) {
|
|
console.error('Failed to copy note:', error)
|
|
toast.error(t('notes.copyFailed'))
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={true} onOpenChange={onClose}>
|
|
<DialogContent
|
|
className={cn(
|
|
'!max-w-[min(95vw,1600px)] max-h-[90vh] overflow-hidden p-0 flex flex-row items-stretch',
|
|
colorClasses.bg
|
|
)}
|
|
>
|
|
<div className="flex-1 min-w-0 flex flex-col overflow-y-auto space-y-4 px-6 py-6">
|
|
<DialogHeader>
|
|
<DialogTitle className="sr-only">{t('notes.edit')}</DialogTitle>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<h2 className="text-lg font-semibold">{readOnly ? t('notes.view') : t('notes.edit')}</h2>
|
|
</div>
|
|
{readOnly && (
|
|
<Badge variant="secondary" className="bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-foreground">
|
|
{t('notes.readOnly')}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4">
|
|
{/* Title */}
|
|
<div className="relative">
|
|
<Input
|
|
dir="auto"
|
|
placeholder={t('notes.titlePlaceholder')}
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
disabled={readOnly}
|
|
className={cn(
|
|
"text-lg font-semibold border-0 focus-visible:ring-0 px-0 bg-transparent pr-10",
|
|
readOnly && "cursor-default"
|
|
)}
|
|
/>
|
|
<button
|
|
onClick={handleGenerateTitles}
|
|
disabled={isGeneratingTitles || readOnly}
|
|
className="absolute right-0 top-1/2 -translate-y-1/2 p-1 hover:bg-purple-100 dark:hover:bg-purple-900 rounded transition-colors"
|
|
title={isGeneratingTitles ? t('ai.titleGenerating') : t('ai.titleGenerateWithAI')}
|
|
>
|
|
{isGeneratingTitles ? (
|
|
<div className="w-4 h-4 border-2 border-purple-500 border-t-transparent rounded-full animate-spin" />
|
|
) : (
|
|
<Sparkles className="w-4 h-4 text-purple-600 hover:text-purple-700 dark:text-purple-400" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Title Suggestions */}
|
|
{!readOnly && titleSuggestions.length > 0 && (
|
|
<TitleSuggestions
|
|
suggestions={titleSuggestions}
|
|
onSelect={handleSelectTitle}
|
|
onDismiss={() => setTitleSuggestions([])}
|
|
/>
|
|
)}
|
|
|
|
{/* Images */}
|
|
<EditorImages images={images} onRemove={handleRemoveImage} />
|
|
|
|
{/* Link Previews */}
|
|
{links.length > 0 && (
|
|
<div className="flex flex-col gap-2">
|
|
{links.map((link, idx) => (
|
|
<div key={idx} className="relative group border rounded-lg overflow-hidden bg-white/50 dark:bg-black/20 flex">
|
|
{link.imageUrl && (
|
|
<div className="w-24 h-24 flex-shrink-0 bg-cover bg-center" style={{ backgroundImage: `url(${link.imageUrl})` }} />
|
|
)}
|
|
<div className="p-2 flex-1 min-w-0 flex flex-col justify-center">
|
|
<h4 className="font-medium text-sm truncate">{link.title || link.url}</h4>
|
|
{link.description && <p className="text-xs text-gray-500 truncate">{link.description}</p>}
|
|
<a href={link.url} target="_blank" rel="noopener noreferrer" className="text-xs text-primary truncate hover:underline block mt-1">
|
|
{new URL(link.url).hostname}
|
|
</a>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="absolute top-1 right-1 h-6 w-6 p-0 bg-white/50 hover:bg-white opacity-0 group-hover:opacity-100 transition-opacity rounded-full"
|
|
onClick={() => handleRemoveLink(idx)}
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Content or Checklist */}
|
|
{noteType === 'richtext' ? (
|
|
<RichTextEditor
|
|
content={content}
|
|
onChange={setContent}
|
|
className="min-h-[200px]"
|
|
/>
|
|
) : noteType === 'text' || noteType === 'markdown' ? (
|
|
<div className="space-y-2">
|
|
{showMarkdownPreview && isMarkdown ? (
|
|
<MarkdownContent
|
|
content={content || t('notes.noContent')}
|
|
className="min-h-[200px] p-3 rounded-md border border-border/40 bg-muted/20"
|
|
/>
|
|
) : (
|
|
<Textarea
|
|
dir="auto"
|
|
placeholder={isMarkdown ? t('notes.takeNoteMarkdown') : t('notes.takeNote')}
|
|
value={content}
|
|
onChange={(e) => setContent(e.target.value)}
|
|
disabled={readOnly}
|
|
className={cn(
|
|
"min-h-[200px] border-0 focus-visible:ring-0 px-0 bg-transparent resize-none text-sm leading-relaxed",
|
|
readOnly && "cursor-default"
|
|
)}
|
|
/>
|
|
)}
|
|
<GhostTags
|
|
suggestions={filteredSuggestions}
|
|
addedTags={labels}
|
|
isAnalyzing={isAnalyzing}
|
|
onSelectTag={handleSelectGhostTag}
|
|
onDismissTag={handleDismissGhostTag}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{checkItems.map((item) => (
|
|
<div key={item.id} className="flex items-start gap-2 group">
|
|
<Checkbox
|
|
checked={item.checked}
|
|
onCheckedChange={() => handleCheckItem(item.id)}
|
|
className="mt-2"
|
|
/>
|
|
<Input
|
|
value={item.text}
|
|
onChange={(e) => handleUpdateCheckItem(item.id, e.target.value)}
|
|
placeholder={t('notes.listItem')}
|
|
className="flex-1 border-0 focus-visible:ring-0 px-0 bg-transparent"
|
|
/>
|
|
<Button variant="ghost" size="sm" className="opacity-0 group-hover:opacity-100 h-8 w-8 p-0"
|
|
onClick={() => handleRemoveCheckItem(item.id)}>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
<Button variant="ghost" size="sm" onClick={handleAddCheckItem} className="text-gray-600 dark:text-gray-400">
|
|
<Plus className="h-4 w-4 mr-1" />
|
|
{t('notes.addItem')}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Labels */}
|
|
{labels.length > 0 && (
|
|
<div className="flex flex-wrap gap-2">
|
|
{labels.map((label) => (
|
|
<LabelBadge
|
|
key={label}
|
|
label={label}
|
|
onRemove={() => handleRemoveLabel(label)}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Memory Echo Connections Section */}
|
|
{!readOnly && (
|
|
<EditorConnectionsSection
|
|
noteId={note.id}
|
|
onOpenNote={(noteId) => {
|
|
// Close current editor and reload page with the selected note
|
|
onClose()
|
|
window.location.href = `/?note=${noteId}`
|
|
}}
|
|
onCompareNotes={(noteIds) => {
|
|
// Note: noteIds already includes current note
|
|
// Fetch all notes for comparison
|
|
Promise.all(noteIds.map(async (id) => {
|
|
try {
|
|
const res = await fetch(`/api/notes/${id}`)
|
|
if (!res.ok) {
|
|
console.error(`Failed to fetch note ${id}`)
|
|
return null
|
|
}
|
|
const data = await res.json()
|
|
if (data.success && data.data) {
|
|
return data.data
|
|
}
|
|
return null
|
|
} catch (error) {
|
|
console.error(`Error fetching note ${id}:`, error)
|
|
return null
|
|
}
|
|
}))
|
|
.then(notes => notes.filter((n: any) => n !== null) as Array<Partial<Note>>)
|
|
.then(fetchedNotes => {
|
|
setComparisonNotes(fetchedNotes)
|
|
})
|
|
}}
|
|
onMergeNotes={async (noteIds) => {
|
|
// Fetch notes for fusion (noteIds already includes current note)
|
|
const fetchedNotes = await Promise.all(noteIds.map(async (id) => {
|
|
try {
|
|
const res = await fetch(`/api/notes/${id}`)
|
|
if (!res.ok) {
|
|
console.error(`Failed to fetch note ${id}`)
|
|
return null
|
|
}
|
|
const data = await res.json()
|
|
if (data.success && data.data) {
|
|
return data.data
|
|
}
|
|
return null
|
|
} catch (error) {
|
|
console.error(`Error fetching note ${id}:`, error)
|
|
return null
|
|
}
|
|
}))
|
|
// Filter out nulls
|
|
setFusionNotes(fetchedNotes.filter((n: any) => n !== null) as Array<Partial<Note>>)
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Toolbar */}
|
|
<div className="flex items-center justify-between pt-3 border-t border-border/30">
|
|
<div className="flex items-center gap-0.5">
|
|
{!readOnly && (
|
|
<>
|
|
{/* Reminder */}
|
|
<Button variant="ghost" size="icon" className={cn('h-8 w-8', currentReminder && 'text-primary')}
|
|
onClick={() => setShowReminderDialog(true)} title={t('notes.setReminder')}>
|
|
<Bell className="h-4 w-4" />
|
|
</Button>
|
|
{/* Add Image */}
|
|
<Button variant="ghost" size="icon" className="h-8 w-8"
|
|
onClick={() => fileInputRef.current?.click()} title={t('notes.addImage')}>
|
|
<ImageIcon className="h-4 w-4" />
|
|
</Button>
|
|
|
|
{/* Add Link */}
|
|
<Button variant="ghost" size="icon" className="h-8 w-8"
|
|
onClick={() => setShowLinkDialog(true)} title={t('notes.addLink')}>
|
|
<LinkIcon className="h-4 w-4" />
|
|
</Button>
|
|
|
|
<NoteTypeSelector value={noteType} onChange={(newType) => { setNoteType(newType); if (newType !== 'markdown') setShowMarkdownPreview(false) }} />
|
|
|
|
{noteType === 'markdown' && (
|
|
<Button variant="ghost" size="icon" className="h-8 w-8"
|
|
onClick={() => setShowMarkdownPreview(!showMarkdownPreview)}
|
|
title={showMarkdownPreview ? t('general.edit') : t('notes.preview')}>
|
|
<Eye className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
|
|
{/* AI Copilot */}
|
|
{noteType !== 'checklist' && aiAssistantEnabled && (
|
|
<Button variant="ghost" size="sm"
|
|
className={cn('h-8 gap-1.5 px-2 text-xs font-medium transition-colors', aiOpen && 'bg-primary/10 text-primary')}
|
|
onClick={() => setAiOpen(!aiOpen)} title="Assistant IA">
|
|
<Sparkles className="h-3.5 w-3.5" />
|
|
<span className="hidden sm:inline">Assistant IA</span>
|
|
</Button>
|
|
)}
|
|
|
|
{/* Size Selector */}
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8" title={t('notes.changeSize')}>
|
|
<Maximize2 className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<div className="flex flex-col gap-1 p-1">
|
|
{(['small', 'medium', 'large'] as const).map((s) => (
|
|
<Button key={s} variant="ghost" size="sm"
|
|
onClick={() => setSize(s)}
|
|
className={cn('justify-start capitalize', size === s && 'bg-accent')}>
|
|
{s}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
{/* Color Picker */}
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8" title={t('notes.changeColor')}>
|
|
<Palette className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<div className="grid grid-cols-5 gap-2 p-2">
|
|
{Object.entries(NOTE_COLORS).map(([colorName, classes]) => (
|
|
<button key={colorName}
|
|
className={cn('h-7 w-7 rounded-full border-2 transition-transform hover:scale-110', classes.bg,
|
|
color === colorName ? 'border-gray-900 dark:border-gray-100' : 'border-gray-300 dark:border-gray-700')}
|
|
onClick={() => setColor(colorName)} title={colorName} />
|
|
))}
|
|
</div>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
{/* Label Manager */}
|
|
<LabelManager existingLabels={labels} notebookId={note.notebookId} onUpdate={setLabels} />
|
|
</>
|
|
)}
|
|
{readOnly && (
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<span className="text-xs">{t('notes.sharedReadOnly')}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
{readOnly ? (
|
|
<>
|
|
<Button
|
|
variant="default"
|
|
onClick={handleMakeCopy}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<Copy className="h-4 w-4" />
|
|
{t('notes.makeCopy')}
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
className="flex items-center gap-2 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/30"
|
|
onClick={async () => {
|
|
try {
|
|
await leaveSharedNote(note.id)
|
|
toast.success(t('notes.leftShare') || 'Share removed')
|
|
triggerRefresh()
|
|
onClose()
|
|
} catch {
|
|
toast.error(t('general.error'))
|
|
}
|
|
}}
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
{t('notes.leaveShare')}
|
|
</Button>
|
|
<Button variant="ghost" onClick={onClose}>
|
|
{t('general.close')}
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Button variant="ghost" onClick={onClose}>
|
|
{t('general.cancel')}
|
|
</Button>
|
|
<Button onClick={handleSave} disabled={isSaving}>
|
|
{isSaving ? t('notes.saving') : t('general.save')}
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
multiple
|
|
className="hidden"
|
|
onChange={handleImageUpload}
|
|
/>
|
|
</div>
|
|
|
|
{/* ── AI Copilot Side Panel ── */}
|
|
{aiOpen && (
|
|
<ContextualAIChat
|
|
onClose={() => setAiOpen(false)}
|
|
noteTitle={title}
|
|
noteContent={content}
|
|
noteImages={images}
|
|
onApplyToNote={(newContent) => {
|
|
setPreviousContentForCopilot(content)
|
|
setContent(newContent)
|
|
}}
|
|
onUndoLastAction={previousContentForCopilot !== null ? () => {
|
|
setContent(previousContentForCopilot)
|
|
setPreviousContentForCopilot(null)
|
|
} : undefined}
|
|
lastActionApplied={previousContentForCopilot !== null}
|
|
notebooks={notebooks.map(nb => ({ id: nb.id, name: nb.name }))}
|
|
/>
|
|
)}
|
|
</DialogContent>
|
|
|
|
<ReminderDialog
|
|
open={showReminderDialog}
|
|
onOpenChange={setShowReminderDialog}
|
|
currentReminder={currentReminder}
|
|
onSave={handleReminderSave}
|
|
onRemove={handleRemoveReminder}
|
|
/>
|
|
|
|
<Dialog open={showLinkDialog} onOpenChange={setShowLinkDialog}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>{t('notes.addLink')}</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-4 py-4">
|
|
<Input
|
|
placeholder="https://example.com"
|
|
value={linkUrl}
|
|
onChange={(e) => setLinkUrl(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault()
|
|
handleAddLink()
|
|
}
|
|
}}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="ghost" onClick={() => setShowLinkDialog(false)}>
|
|
{t('general.cancel')}
|
|
</Button>
|
|
<Button onClick={handleAddLink}>
|
|
{t('general.add')}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Reformulation Modal */}
|
|
{reformulationModal && (
|
|
<Dialog open={!!reformulationModal} onOpenChange={() => setReformulationModal(null)}>
|
|
<DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle>{t('ai.reformulationComparison')}</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="grid grid-cols-2 gap-4 py-4">
|
|
<div>
|
|
<h3 className="font-semibold mb-2 text-sm text-gray-600 dark:text-gray-400">{t('ai.original')}</h3>
|
|
<div className="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg text-sm">
|
|
{reformulationModal.originalText}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold mb-2 text-sm text-purple-600 dark:text-purple-400">
|
|
{t('ai.reformulated')} ({reformulationModal.option})
|
|
</h3>
|
|
<div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg text-sm">
|
|
{reformulationModal.reformulatedText}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="ghost" onClick={() => setReformulationModal(null)}>
|
|
{t('general.cancel')}
|
|
</Button>
|
|
<Button onClick={handleApplyRefactor}>
|
|
{t('general.apply')}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)}
|
|
|
|
{/* Comparison Modal */}
|
|
{comparisonNotes && comparisonNotes.length > 0 && (
|
|
<ComparisonModal
|
|
isOpen={!!comparisonNotes}
|
|
onClose={() => setComparisonNotes([])}
|
|
notes={comparisonNotes}
|
|
onOpenNote={(noteId) => {
|
|
// Close current editor and open the selected note
|
|
onClose()
|
|
// Trigger navigation to the note
|
|
window.location.href = `/?note=${noteId}`
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Fusion Modal */}
|
|
{fusionNotes && fusionNotes.length > 0 && (
|
|
<FusionModal
|
|
isOpen={!!fusionNotes}
|
|
onClose={() => setFusionNotes([])}
|
|
notes={fusionNotes}
|
|
onConfirmFusion={async ({ title, content }, options) => {
|
|
// Create the fused note
|
|
await createNote({
|
|
title,
|
|
content,
|
|
labels: options.keepAllTags
|
|
? [...new Set(fusionNotes.flatMap(n => n.labels || []))]
|
|
: fusionNotes[0].labels || [],
|
|
color: fusionNotes[0].color,
|
|
type: 'text',
|
|
isMarkdown: true, // AI generates markdown content
|
|
autoGenerated: true, // Mark as AI-generated fused note
|
|
aiProvider: 'fusion',
|
|
notebookId: fusionNotes[0].notebookId ?? undefined // Keep the notebook from the first note, convert null to undefined
|
|
})
|
|
|
|
// Archive original notes if option is selected
|
|
if (options.archiveOriginals) {
|
|
for (const note of fusionNotes) {
|
|
if (note.id) {
|
|
await updateNote(note.id, { isArchived: true })
|
|
}
|
|
}
|
|
}
|
|
|
|
toast.success(t('toast.notesFusionSuccess'))
|
|
triggerRefresh()
|
|
onClose()
|
|
}}
|
|
/>
|
|
)}
|
|
</Dialog>
|
|
)
|
|
} |