sepehr
bd5391e3f2
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 45s
1099 lines
42 KiB
TypeScript
1099 lines
42 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useRef, useEffect } from 'react'
|
|
import { Card } from '@/components/ui/card'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Textarea } from '@/components/ui/textarea'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
CheckSquare,
|
|
X,
|
|
Bell,
|
|
Image,
|
|
UserPlus,
|
|
Palette,
|
|
Archive,
|
|
MoreVertical,
|
|
Undo2,
|
|
Redo2,
|
|
Eye,
|
|
Link as LinkIcon
|
|
} from 'lucide-react'
|
|
import { createNote } from '@/app/actions/notes'
|
|
import { fetchLinkMetadata } from '@/app/actions/scrape'
|
|
import { CheckItem, NOTE_COLORS, NoteColor, LinkMetadata, Note, NoteType } from '@/lib/types'
|
|
import { ContextualAIChat } from './contextual-ai-chat'
|
|
import { Maximize2, Minimize2, Sparkles, Loader2 } from 'lucide-react'
|
|
import { useNotebooks } from '@/context/notebooks-context'
|
|
import { Checkbox } from '@/components/ui/checkbox'
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from '@/components/ui/tooltip'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu'
|
|
import { cn } from '@/lib/utils'
|
|
import { toast } from 'sonner'
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
|
|
import { NoteTypeSelector } from '@/components/note-type-selector'
|
|
import { RichTextEditor } from '@/components/rich-text-editor'
|
|
import { MarkdownContent } from './markdown-content'
|
|
import { LabelSelector } from './label-selector'
|
|
import { LabelBadge } from './label-badge'
|
|
import { useAutoTagging } from '@/hooks/use-auto-tagging'
|
|
import { useTitleSuggestions } from '@/hooks/use-title-suggestions'
|
|
import { GhostTags } from './ghost-tags'
|
|
import { TitleSuggestions } from './title-suggestions'
|
|
import { CollaboratorDialog } from './collaborator-dialog'
|
|
import { AIAssistantActionBar } from './ai-assistant-action-bar'
|
|
import { useLabels } from '@/context/LabelContext'
|
|
import { useSession } from 'next-auth/react'
|
|
import { useSearchParams } from 'next/navigation'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
|
|
interface HistoryState {
|
|
title: string
|
|
content: string
|
|
}
|
|
|
|
interface NoteState {
|
|
title: string
|
|
content: string
|
|
checkItems: CheckItem[]
|
|
images: string[]
|
|
}
|
|
|
|
interface NoteInputProps {
|
|
onNoteCreated?: (note: Note) => void
|
|
defaultExpanded?: boolean
|
|
forceExpanded?: boolean
|
|
/** Tab mode: takes full width of main content (no narrow centered card) */
|
|
fullWidth?: boolean
|
|
}
|
|
|
|
export function NoteInput({
|
|
onNoteCreated,
|
|
defaultExpanded = false,
|
|
forceExpanded = false,
|
|
fullWidth = false,
|
|
}: NoteInputProps) {
|
|
const { labels: globalLabels, addLabel } = useLabels()
|
|
const { data: session } = useSession()
|
|
const [aiAssistantEnabled, setAiAssistantEnabled] = useState(true)
|
|
const [autoLabelingEnabled, setAutoLabelingEnabled] = useState(true)
|
|
|
|
useEffect(() => {
|
|
if (session?.user?.id) {
|
|
const userId = session.user.id
|
|
import('@/app/actions/ai-settings').then(({ getAISettings }) => {
|
|
getAISettings(userId).then(settings => {
|
|
setAiAssistantEnabled(settings.paragraphRefactor !== false)
|
|
setAutoLabelingEnabled(settings.autoLabeling !== false)
|
|
}).catch(err => console.error("Failed to fetch AI settings", err))
|
|
})
|
|
}
|
|
}, [session?.user?.id])
|
|
|
|
const { t, language: uiLanguage } = useLanguage()
|
|
const searchParams = useSearchParams()
|
|
const currentNotebookId = searchParams.get('notebook') || undefined // Get current notebook from URL
|
|
const [isExpanded, setIsExpanded] = useState(defaultExpanded || forceExpanded)
|
|
|
|
// Sync with forceExpanded if it changes
|
|
useEffect(() => {
|
|
if (forceExpanded) setIsExpanded(true)
|
|
}, [forceExpanded])
|
|
const [type, setType] = useState<NoteType>('richtext')
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
const [color, setColor] = useState<NoteColor>('default')
|
|
const [isArchived, setIsArchived] = useState(false)
|
|
const [isExpandedFull, setIsExpandedFull] = useState(false)
|
|
const [aiOpen, setAiOpen] = useState(false)
|
|
const { notebooks } = useNotebooks()
|
|
const [selectedLabels, setSelectedLabels] = useState<string[]>([])
|
|
const [collaborators, setCollaborators] = useState<string[]>([])
|
|
const [showCollaboratorDialog, setShowCollaboratorDialog] = useState(false)
|
|
const fileInputRef = useRef<HTMLInputElement>(null)
|
|
const textareaRef = useRef<HTMLTextAreaElement>(null)
|
|
|
|
// Simple state without complex undo/redo
|
|
const [title, setTitle] = useState('')
|
|
const [content, setContent] = useState('')
|
|
const [checkItems, setCheckItems] = useState<CheckItem[]>([])
|
|
const [images, setImages] = useState<string[]>([])
|
|
const [links, setLinks] = useState<LinkMetadata[]>([])
|
|
const [showMarkdownPreview, setShowMarkdownPreview] = useState(false)
|
|
const isMarkdown = type === 'markdown'
|
|
const isRichText = type === 'richtext'
|
|
|
|
// Auto-resize textarea based on content
|
|
useEffect(() => {
|
|
const el = textareaRef.current
|
|
if (!el) return
|
|
el.style.height = 'auto'
|
|
el.style.height = `${el.scrollHeight}px`
|
|
}, [content, isExpandedFull, aiOpen])
|
|
|
|
// Combine text content and link metadata for AI analysis
|
|
const fullContentForAI = [
|
|
content,
|
|
...links.map(l => `${l.title || ''} ${l.description || ''}`)
|
|
].join(' ').trim();
|
|
|
|
// Auto-tagging hook
|
|
const { suggestions, isAnalyzing } = useAutoTagging({
|
|
content: type !== 'checklist' ? fullContentForAI : '',
|
|
enabled: type !== 'checklist' && isExpanded && autoLabelingEnabled,
|
|
notebookId: currentNotebookId
|
|
})
|
|
|
|
// Title suggestions
|
|
const titleSuggestionsEnabled = (type === 'text' || type === 'markdown' || type === 'richtext') && isExpanded && !title
|
|
const titleSuggestionsContent = type !== 'checklist' ? fullContentForAI : ''
|
|
|
|
// Title suggestions hook
|
|
const { suggestions: titleSuggestions, isAnalyzing: isAnalyzingTitles } = useTitleSuggestions({
|
|
content: titleSuggestionsContent,
|
|
enabled: titleSuggestionsEnabled
|
|
})
|
|
|
|
const [dismissedTags, setDismissedTags] = useState<string[]>([])
|
|
const [dismissedTitleSuggestions, setDismissedTitleSuggestions] = useState(false)
|
|
|
|
const handleSelectGhostTag = async (tag: string) => {
|
|
// Case-insensitive check
|
|
const tagExists = selectedLabels.some(l => l.toLowerCase() === tag.toLowerCase())
|
|
|
|
if (!tagExists) {
|
|
setSelectedLabels(prev => [...prev, tag])
|
|
|
|
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('labels.tagAdded', { tag }))
|
|
}
|
|
}
|
|
|
|
const handleDismissGhostTag = (tag: string) => {
|
|
setDismissedTags(prev => [...prev, tag])
|
|
}
|
|
|
|
const filteredSuggestions = suggestions.filter(s => {
|
|
if (!s || !s.tag) return false
|
|
return !selectedLabels.some(l => l.toLowerCase() === s.tag.toLowerCase()) &&
|
|
!dismissedTags.includes(s.tag)
|
|
})
|
|
|
|
// Undo/Redo history (title and content only)
|
|
const [history, setHistory] = useState<HistoryState[]>([{ title: '', content: '' }])
|
|
const [historyIndex, setHistoryIndex] = useState(0)
|
|
const isUndoingRef = useRef(false)
|
|
|
|
// Reminder dialog
|
|
const [showReminderDialog, setShowReminderDialog] = useState(false)
|
|
const [showLinkDialog, setShowLinkDialog] = useState(false)
|
|
const [linkUrl, setLinkUrl] = useState('')
|
|
const [reminderDate, setReminderDate] = useState('')
|
|
const [reminderTime, setReminderTime] = useState('')
|
|
const [currentReminder, setCurrentReminder] = useState<Date | null>(null)
|
|
|
|
// Save to history after 1 second of inactivity
|
|
useEffect(() => {
|
|
if (isUndoingRef.current) {
|
|
isUndoingRef.current = false
|
|
return
|
|
}
|
|
|
|
const timer = setTimeout(() => {
|
|
const currentState = { title, content }
|
|
const lastState = history[historyIndex]
|
|
|
|
if (lastState.title !== title || lastState.content !== content) {
|
|
const newHistory = history.slice(0, historyIndex + 1)
|
|
newHistory.push(currentState)
|
|
|
|
if (newHistory.length > 50) {
|
|
newHistory.shift()
|
|
} else {
|
|
setHistoryIndex(historyIndex + 1)
|
|
}
|
|
setHistory(newHistory)
|
|
}
|
|
}, 1000)
|
|
|
|
return () => clearTimeout(timer)
|
|
}, [title, content, history, historyIndex])
|
|
|
|
// Undo/Redo functions
|
|
const handleUndo = () => {
|
|
if (historyIndex > 0) {
|
|
isUndoingRef.current = true
|
|
const newIndex = historyIndex - 1
|
|
setHistoryIndex(newIndex)
|
|
setTitle(history[newIndex].title)
|
|
setContent(history[newIndex].content)
|
|
}
|
|
}
|
|
|
|
const handleRedo = () => {
|
|
if (historyIndex < history.length - 1) {
|
|
isUndoingRef.current = true
|
|
const newIndex = historyIndex + 1
|
|
setHistoryIndex(newIndex)
|
|
setTitle(history[newIndex].title)
|
|
setContent(history[newIndex].content)
|
|
}
|
|
}
|
|
|
|
// AI Assistant state and handlers
|
|
const [isProcessingAI, setIsProcessingAI] = useState(false)
|
|
|
|
const handleClarify = 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 || 'Failed to clarify')
|
|
setContent(data.reformulatedText || data.text)
|
|
toast.success(t('ai.reformulationApplied'))
|
|
} catch (error) {
|
|
console.error('Clarify error:', error)
|
|
toast.error(t('ai.reformulationFailed'))
|
|
} finally {
|
|
setIsProcessingAI(false)
|
|
}
|
|
}
|
|
|
|
const handleShorten = 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 || 'Failed to shorten')
|
|
setContent(data.reformulatedText || data.text)
|
|
toast.success(t('ai.reformulationApplied'))
|
|
} catch (error) {
|
|
console.error('Shorten error:', error)
|
|
toast.error(t('ai.reformulationFailed'))
|
|
} finally {
|
|
setIsProcessingAI(false)
|
|
}
|
|
}
|
|
|
|
const handleImprove = 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 || 'Failed to improve')
|
|
setContent(data.reformulatedText || data.text)
|
|
toast.success(t('ai.reformulationApplied'))
|
|
} catch (error) {
|
|
console.error('Improve error:', error)
|
|
toast.error(t('ai.reformulationFailed'))
|
|
} 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 || 'Failed to transform')
|
|
|
|
setContent(data.transformedText)
|
|
setType('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)
|
|
}
|
|
}
|
|
|
|
// Keyboard shortcuts
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (!isExpanded) return
|
|
|
|
if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
|
|
e.preventDefault()
|
|
handleUndo()
|
|
}
|
|
if ((e.ctrlKey || e.metaKey) && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) {
|
|
e.preventDefault()
|
|
handleRedo()
|
|
}
|
|
}
|
|
|
|
window.addEventListener('keydown', handleKeyDown)
|
|
return () => window.removeEventListener('keydown', handleKeyDown)
|
|
}, [isExpanded, historyIndex, history])
|
|
|
|
const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const files = e.target.files
|
|
if (!files) return
|
|
|
|
// Validate file types
|
|
const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
|
|
const maxSize = 5 * 1024 * 1024 // 5MB
|
|
|
|
for (const file of Array.from(files)) {
|
|
// Validation
|
|
if (!validTypes.includes(file.type)) {
|
|
toast.error(t('notes.invalidFileType', { fileName: file.name }))
|
|
continue
|
|
}
|
|
|
|
if (file.size > maxSize) {
|
|
toast.error(t('notes.fileTooLarge', { fileName: file.name, maxSize: '5MB' }))
|
|
continue
|
|
}
|
|
|
|
// Upload to server
|
|
const formData = new FormData()
|
|
formData.append('file', file)
|
|
|
|
try {
|
|
const response = await fetch('/api/upload', {
|
|
method: 'POST',
|
|
body: formData,
|
|
})
|
|
|
|
if (!response.ok) throw new Error('Upload failed')
|
|
|
|
const data = await response.json()
|
|
setImages(prev => [...prev, data.url])
|
|
} catch (error) {
|
|
console.error('Upload error:', error)
|
|
toast.error(t('notes.uploadFailed', { fileName: file.name }))
|
|
}
|
|
}
|
|
|
|
// Reset input
|
|
e.target.value = ''
|
|
}
|
|
|
|
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
|
|
}
|
|
|
|
// 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])
|
|
|
|
// AI title from images
|
|
const [isGeneratingImageTitle, setIsGeneratingImageTitle] = useState(false)
|
|
const [imageTitleSuggestions, setImageTitleSuggestions] = useState<any[]>([])
|
|
|
|
const handleImageTitleSuggestion = async (imageUrls?: string[]) => {
|
|
const urls = imageUrls || images
|
|
if (urls.length === 0) return
|
|
setIsGeneratingImageTitle(true)
|
|
setImageTitleSuggestions([])
|
|
try {
|
|
const res = await fetch('/api/ai/describe-image', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ imageUrls: urls, mode: 'title', language: uiLanguage }),
|
|
})
|
|
const data = await res.json()
|
|
if (!res.ok) throw new Error(data.error || 'AI error')
|
|
if (data.suggestions?.length > 0) {
|
|
setImageTitleSuggestions(data.suggestions)
|
|
}
|
|
} catch (e: any) {
|
|
toast.error(e.message || t('ai.genericError'))
|
|
} finally {
|
|
setIsGeneratingImageTitle(false)
|
|
}
|
|
}
|
|
|
|
const handleAddLink = async () => {
|
|
if (!linkUrl) return
|
|
|
|
// Optimistic add (or loading state)
|
|
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'))
|
|
// Fallback: just add the url as title
|
|
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 handleReminderOpen = () => {
|
|
const tomorrow = new Date(Date.now() + 86400000)
|
|
setReminderDate(tomorrow.toISOString().split('T')[0])
|
|
setReminderTime('09:00')
|
|
setShowReminderDialog(true)
|
|
}
|
|
|
|
const handleReminderSave = () => {
|
|
if (!reminderDate || !reminderTime) {
|
|
toast.warning(t('notes.reminderDateTimeRequired'))
|
|
return
|
|
}
|
|
|
|
const dateTimeString = `${reminderDate}T${reminderTime}`
|
|
const date = new Date(dateTimeString)
|
|
|
|
if (isNaN(date.getTime())) {
|
|
toast.error(t('notes.invalidDateTime'))
|
|
return
|
|
}
|
|
|
|
if (date < new Date()) {
|
|
toast.error(t('notes.reminderMustBeFuture'))
|
|
return
|
|
}
|
|
|
|
setCurrentReminder(date)
|
|
toast.success(t('notes.reminderSet', { datetime: date.toLocaleString() }))
|
|
setShowReminderDialog(false)
|
|
setReminderDate('')
|
|
setReminderTime('')
|
|
}
|
|
|
|
const handleSubmit = async () => {
|
|
// Validation: Allow submit if content OR images OR links exist
|
|
const hasContent = type === 'checklist' ? false : content.trim().length > 0
|
|
const hasCheckItems = type === 'checklist' ? checkItems.some(item => item.text.trim()) : false
|
|
const hasMedia = (images && images.length > 0) || (links && links.length > 0)
|
|
|
|
if (type !== 'checklist' && !hasContent && !hasMedia) {
|
|
toast.warning(t('notes.contentOrMediaRequired'))
|
|
return
|
|
}
|
|
if (type === 'checklist' && !hasCheckItems && !hasMedia) {
|
|
toast.warning(t('notes.itemOrMediaRequired'))
|
|
return
|
|
}
|
|
|
|
setIsSubmitting(true)
|
|
try {
|
|
const createdNote = await createNote({
|
|
title: title.trim() || undefined,
|
|
content: type === 'checklist' ? '' : content,
|
|
type,
|
|
checkItems: type === 'checklist' ? checkItems : undefined,
|
|
color,
|
|
isArchived,
|
|
images: images.length > 0 ? images : undefined,
|
|
links: links.length > 0 ? links : undefined,
|
|
reminder: currentReminder,
|
|
isMarkdown,
|
|
labels: selectedLabels.length > 0 ? selectedLabels : undefined,
|
|
notebookId: currentNotebookId, // Assign note to current notebook if in one
|
|
})
|
|
|
|
// Notify parent component about the created note (for notebook suggestion)
|
|
if (createdNote && onNoteCreated) {
|
|
onNoteCreated(createdNote)
|
|
}
|
|
|
|
// Reset form
|
|
setTitle('')
|
|
setContent('')
|
|
setCheckItems([])
|
|
setImages([])
|
|
setLinks([])
|
|
setShowMarkdownPreview(false)
|
|
setHistory([{ title: '', content: '' }])
|
|
setHistoryIndex(0)
|
|
setIsExpanded(false)
|
|
setType('richtext')
|
|
setColor('default')
|
|
setIsArchived(false)
|
|
setCurrentReminder(null)
|
|
setSelectedLabels([])
|
|
setCollaborators([])
|
|
setDismissedTitleSuggestions(false)
|
|
setImageTitleSuggestions([])
|
|
|
|
toast.success(t('notes.noteCreated'))
|
|
} catch (error) {
|
|
console.error('Failed to create note:', error)
|
|
toast.error(t('notes.noteCreateFailed'))
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
const handleAddCheckItem = () => {
|
|
setCheckItems([
|
|
...checkItems,
|
|
{ id: Date.now().toString(), text: '', checked: false },
|
|
])
|
|
}
|
|
const handleUpdateCheckItem = (id: string, text: string) => {
|
|
setCheckItems(
|
|
checkItems.map(item => (item.id === id ? { ...item, text } : item))
|
|
)
|
|
}
|
|
|
|
const handleRemoveCheckItem = (id: string) => {
|
|
setCheckItems(checkItems.filter(item => item.id !== id))
|
|
}
|
|
|
|
const handleClose = () => {
|
|
setIsExpanded(false)
|
|
setTitle('')
|
|
setContent('')
|
|
setCheckItems([])
|
|
setImages([])
|
|
setLinks([])
|
|
setShowMarkdownPreview(false)
|
|
setHistory([{ title: '', content: '' }])
|
|
setHistoryIndex(0)
|
|
setType('text')
|
|
setColor('default')
|
|
setIsArchived(false)
|
|
setCurrentReminder(null)
|
|
setSelectedLabels([])
|
|
setCollaborators([])
|
|
setDismissedTitleSuggestions(false)
|
|
setImageTitleSuggestions([])
|
|
}
|
|
|
|
const collapsedWidthClass = fullWidth ? 'w-full max-w-none mx-0' : 'max-w-2xl mx-auto'
|
|
|
|
if (!isExpanded) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'mb-8 overflow-hidden rounded-lg border border-border bg-card shadow-[0_4px_20px_rgba(15,23,42,0.05)] transition-all duration-300 hover:shadow-[0_10px_30px_rgba(15,23,42,0.08)] cursor-text',
|
|
collapsedWidthClass
|
|
)}
|
|
onClick={() => setIsExpanded(true)}
|
|
>
|
|
<div className="flex items-center gap-2 px-4 py-2">
|
|
<Input dir="auto"
|
|
placeholder={t('notes.placeholder') || "Créer une note..."}
|
|
readOnly
|
|
value=""
|
|
className="border-0 bg-transparent focus-visible:ring-0 cursor-text h-10 text-base shadow-none font-medium text-foreground placeholder:text-muted-foreground/70"
|
|
/>
|
|
<div className="flex shrink-0 items-center gap-1 text-muted-foreground">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
setType('checklist')
|
|
setIsExpanded(true)
|
|
}}
|
|
title={t('notes.newChecklist')}
|
|
className="h-8 w-8 rounded hover:bg-muted"
|
|
>
|
|
<CheckSquare className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const colorClasses = NOTE_COLORS[color] || NOTE_COLORS.default
|
|
|
|
const widthClass = (aiOpen || isExpandedFull)
|
|
? 'w-full max-w-6xl mx-auto'
|
|
: fullWidth
|
|
? 'w-full mx-0'
|
|
: 'max-w-2xl mx-auto'
|
|
|
|
return (
|
|
<div className={cn(
|
|
'mb-8 flex flex-row items-stretch transition-all duration-300',
|
|
(aiOpen || isExpandedFull) ? 'max-h-[calc(100vh-180px)]' : '',
|
|
widthClass
|
|
)}>
|
|
|
|
{/* ── Note Card ── */}
|
|
<div className={cn(
|
|
'flex-1 flex flex-col overflow-hidden border border-border bg-card transition-all duration-200 relative min-w-[260px]',
|
|
aiOpen ? 'rounded-l-xl rounded-r-none border-r-0' : 'rounded-xl',
|
|
'shadow-sm focus-within:shadow-md focus-within:border-primary/40',
|
|
colorClasses.card
|
|
)}>
|
|
|
|
{/* Expand / shrink button — fixed top-right, hidden when AI panel is open */}
|
|
{!aiOpen && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsExpandedFull(!isExpandedFull)}
|
|
className="absolute top-3 right-3 z-10 rounded-md p-1.5 text-muted-foreground/40 hover:bg-muted hover:text-foreground transition-colors"
|
|
title={isExpandedFull ? 'Réduire' : 'Agrandir'}
|
|
>
|
|
{isExpandedFull ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
|
|
</button>
|
|
)}
|
|
|
|
{/* Title row */}
|
|
<div className="px-5 pt-5 pb-2 pr-10">
|
|
<input
|
|
dir="auto"
|
|
className="w-full bg-transparent text-lg font-semibold text-foreground outline-none placeholder:text-muted-foreground/40"
|
|
placeholder={t('notes.titlePlaceholder')}
|
|
value={title}
|
|
onChange={(e) => { setTitle(e.target.value); setImageTitleSuggestions([]) }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Title suggestions */}
|
|
{!title && !dismissedTitleSuggestions && titleSuggestions.length > 0 && (
|
|
<div className="px-5">
|
|
<TitleSuggestions
|
|
suggestions={titleSuggestions}
|
|
onSelect={(s) => setTitle(s)}
|
|
onDismiss={() => setDismissedTitleSuggestions(true)}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Image title suggestions */}
|
|
{!title && imageTitleSuggestions.length > 0 && (
|
|
<div className="px-5">
|
|
<TitleSuggestions
|
|
suggestions={imageTitleSuggestions}
|
|
onSelect={(s) => { setTitle(s); setImageTitleSuggestions([]) }}
|
|
onDismiss={() => setImageTitleSuggestions([])}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Content area — scrolls internally when constrained by max-h */}
|
|
<div className="px-5 pb-3 flex-1 min-h-0 overflow-y-auto">
|
|
{type === 'richtext' ? (
|
|
<RichTextEditor
|
|
content={content}
|
|
onChange={setContent}
|
|
className="min-h-[120px]"
|
|
/>
|
|
) : type === 'text' || type === 'markdown' ? (
|
|
<>
|
|
{showMarkdownPreview && isMarkdown ? (
|
|
<MarkdownContent
|
|
content={content || '*Aucun contenu*'}
|
|
className="min-h-[120px] py-2 text-sm"
|
|
/>
|
|
) : (
|
|
<textarea
|
|
ref={textareaRef}
|
|
dir="auto"
|
|
className={cn(
|
|
'w-full resize-none bg-transparent text-sm leading-relaxed text-foreground outline-none placeholder:text-muted-foreground/40 overflow-hidden',
|
|
isExpandedFull ? 'min-h-[400px]' : aiOpen ? 'min-h-[200px]' : 'min-h-[120px]'
|
|
)}
|
|
placeholder={isMarkdown ? t('notes.markdownPlaceholder') : t('notes.placeholder')}
|
|
value={content}
|
|
onChange={(e) => setContent(e.target.value)}
|
|
autoFocus
|
|
/>
|
|
)}
|
|
{/* Images — rendered between content and tag suggestions */}
|
|
{images.length > 0 && (
|
|
<div className="flex flex-col gap-2 mt-2">
|
|
{images.map((img, idx) => (
|
|
<div key={idx} className="relative group inline-block w-fit">
|
|
<img src={img} alt={`Upload ${idx + 1}`} className="max-h-64 rounded-lg object-contain block" />
|
|
{!title && !content.trim() && aiAssistantEnabled && (
|
|
<button
|
|
type="button"
|
|
className="absolute bottom-2 right-2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-primary/60 backdrop-blur-sm text-primary-foreground animate-pulse hover:animate-none hover:bg-primary hover:w-auto hover:gap-1.5 hover:px-2.5 transition-all overflow-hidden group/ai"
|
|
onClick={() => handleImageTitleSuggestion()}
|
|
disabled={isGeneratingImageTitle}
|
|
title={t('notes.generateTitleFromImage') || 'Générer un titre'}>
|
|
{isGeneratingImageTitle
|
|
? <Loader2 className="h-3.5 w-3.5 animate-spin shrink-0" />
|
|
: <Sparkles className="h-3.5 w-3.5 shrink-0" />}
|
|
<span className="text-[10px] font-medium whitespace-nowrap opacity-0 group-hover/ai:opacity-100 transition-opacity">{t('notes.suggestTitle') || 'Titre'}</span>
|
|
</button>
|
|
)}
|
|
<Button variant="ghost" size="sm"
|
|
className="absolute top-2 right-2 h-7 w-7 p-0 bg-background/80 opacity-0 group-hover:opacity-100 transition-opacity"
|
|
onClick={() => setImages(images.filter((_, i) => i !== idx))}>
|
|
<X className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
<GhostTags
|
|
suggestions={filteredSuggestions}
|
|
addedTags={selectedLabels}
|
|
isAnalyzing={isAnalyzing}
|
|
onSelectTag={handleSelectGhostTag}
|
|
onDismissTag={handleDismissGhostTag}
|
|
/>
|
|
</>
|
|
) : (
|
|
<div className="space-y-1.5 py-2">
|
|
{/* Images — rendered before checklist items */}
|
|
{images.length > 0 && (
|
|
<div className="flex flex-col gap-2 mb-2">
|
|
{images.map((img, idx) => (
|
|
<div key={idx} className="relative group inline-block w-fit">
|
|
<img src={img} alt={`Upload ${idx + 1}`} className="max-h-64 rounded-lg object-contain block" />
|
|
{!title && !content.trim() && aiAssistantEnabled && (
|
|
<button
|
|
type="button"
|
|
className="absolute bottom-2 right-2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-primary/60 backdrop-blur-sm text-primary-foreground animate-pulse hover:animate-none hover:bg-primary hover:w-auto hover:gap-1.5 hover:px-2.5 transition-all overflow-hidden group/ai"
|
|
onClick={() => handleImageTitleSuggestion()}
|
|
disabled={isGeneratingImageTitle}
|
|
title={t('notes.generateTitleFromImage') || 'Générer un titre'}>
|
|
{isGeneratingImageTitle
|
|
? <Loader2 className="h-3.5 w-3.5 animate-spin shrink-0" />
|
|
: <Sparkles className="h-3.5 w-3.5 shrink-0" />}
|
|
<span className="text-[10px] font-medium whitespace-nowrap opacity-0 group-hover/ai:opacity-100 transition-opacity">{t('notes.suggestTitle') || 'Titre'}</span>
|
|
</button>
|
|
)}
|
|
<Button variant="ghost" size="sm"
|
|
className="absolute top-2 right-2 h-7 w-7 p-0 bg-background/80 opacity-0 group-hover:opacity-100 transition-opacity"
|
|
onClick={() => setImages(images.filter((_, i) => i !== idx))}>
|
|
<X className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
{checkItems.map((item) => (
|
|
<div key={item.id} className="flex items-center gap-2 group">
|
|
<Checkbox className="shrink-0" />
|
|
<input
|
|
dir="auto"
|
|
value={item.text}
|
|
onChange={(e) => handleUpdateCheckItem(item.id, e.target.value)}
|
|
placeholder={t('notes.listItem')}
|
|
className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground/40"
|
|
autoFocus={checkItems[checkItems.length - 1].id === item.id}
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="opacity-0 group-hover:opacity-100 transition-opacity rounded p-0.5 hover:bg-muted"
|
|
onClick={() => handleRemoveCheckItem(item.id)}
|
|
>
|
|
<X className="h-3.5 w-3.5 text-muted-foreground" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
<button
|
|
type="button"
|
|
onClick={handleAddCheckItem}
|
|
className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors py-1"
|
|
>
|
|
<X className="h-3.5 w-3.5 rotate-45" />
|
|
{t('notes.addListItem')}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Link previews */}
|
|
{links.length > 0 && (
|
|
<div className="flex flex-col gap-2 px-5 pb-3">
|
|
{links.map((link, idx) => (
|
|
<div key={idx} className="relative group flex overflow-hidden rounded-lg border border-border/60 bg-muted/20">
|
|
{link.imageUrl && (
|
|
<div className="w-20 h-20 shrink-0 bg-cover bg-center" style={{ backgroundImage: `url(${link.imageUrl})` }} />
|
|
)}
|
|
<div className="flex flex-col justify-center gap-0.5 p-3 min-w-0">
|
|
<p className="text-sm font-medium truncate">{link.title || link.url}</p>
|
|
{link.description && <p className="text-xs text-muted-foreground line-clamp-1">{link.description}</p>}
|
|
<a href={link.url} target="_blank" rel="noopener noreferrer" className="text-xs text-primary hover:underline truncate">
|
|
{(() => { try { return new URL(link.url).hostname } catch { return link.url } })()}
|
|
</a>
|
|
</div>
|
|
<button type="button"
|
|
className="absolute top-2 right-2 rounded-full bg-background/80 p-1 opacity-0 group-hover:opacity-100 transition-opacity hover:bg-destructive/10"
|
|
onClick={() => handleRemoveLink(idx)}>
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Selected labels */}
|
|
{selectedLabels.length > 0 && (
|
|
<div className="flex flex-wrap gap-1.5 px-5 pb-3">
|
|
{selectedLabels.map(label => (
|
|
<LabelBadge key={label} label={label} onRemove={() => setSelectedLabels(prev => prev.filter(l => l !== label))} />
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Toolbar ── */}
|
|
<div className="flex items-center justify-between border-t border-border/30 px-3 py-2 gap-2 flex-wrap">
|
|
<TooltipProvider>
|
|
<div className="flex items-center gap-0.5 flex-wrap flex-1 min-w-0">
|
|
|
|
<Tooltip><TooltipTrigger asChild>
|
|
<Button variant="ghost" size="icon" className={cn('h-8 w-8', currentReminder && 'text-primary')} onClick={handleReminderOpen}>
|
|
<Bell className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger><TooltipContent>{t('notes.remindMe')}</TooltipContent></Tooltip>
|
|
|
|
<NoteTypeSelector value={type} onChange={(newType) => { setType(newType); if (newType !== 'markdown') setShowMarkdownPreview(false) }} compact />
|
|
|
|
{type === 'markdown' && (
|
|
<Tooltip><TooltipTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8"
|
|
onClick={() => setShowMarkdownPreview(!showMarkdownPreview)}>
|
|
<Eye className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger><TooltipContent>{showMarkdownPreview ? t('general.edit') : t('general.preview')}</TooltipContent></Tooltip>
|
|
)}
|
|
|
|
{aiAssistantEnabled && (
|
|
<Tooltip><TooltipTrigger asChild>
|
|
<Button variant="ghost" size="icon"
|
|
className={cn('h-8 w-8 transition-colors shrink-0', aiOpen && 'bg-primary/10 text-primary')}
|
|
onClick={() => setAiOpen(!aiOpen)}>
|
|
<Sparkles className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger><TooltipContent>Ouvrir IA Note</TooltipContent></Tooltip>
|
|
)}
|
|
|
|
<Tooltip><TooltipTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => fileInputRef.current?.click()}>
|
|
<Image className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger><TooltipContent>{t('notes.addImage')}</TooltipContent></Tooltip>
|
|
|
|
<Tooltip><TooltipTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setShowCollaboratorDialog(true)}>
|
|
<UserPlus className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger><TooltipContent>{t('notes.addCollaborators')}</TooltipContent></Tooltip>
|
|
|
|
<Tooltip><TooltipTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setShowLinkDialog(true)}>
|
|
<LinkIcon className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger><TooltipContent>{t('notes.addLink')}</TooltipContent></Tooltip>
|
|
|
|
<LabelSelector selectedLabels={selectedLabels} onLabelsChange={setSelectedLabels} variant="compact" align="start" />
|
|
|
|
<DropdownMenu>
|
|
<Tooltip><TooltipTrigger asChild>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8">
|
|
<Palette className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
</TooltipTrigger><TooltipContent>{t('notes.backgroundOptions')}</TooltipContent></Tooltip>
|
|
<DropdownMenuContent align="start" className="w-40">
|
|
<div className="grid grid-cols-5 gap-2 p-2">
|
|
{Object.entries(NOTE_COLORS).map(([colorName, colorClass]) => (
|
|
<button key={colorName} onClick={() => setColor(colorName as NoteColor)}
|
|
className={cn('w-7 h-7 rounded-full border-2 hover:scale-110 transition-transform', colorClass.bg,
|
|
color === colorName ? 'border-gray-900 dark:border-gray-100' : 'border-transparent')}
|
|
title={colorName}
|
|
/>
|
|
))}
|
|
</div>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<Tooltip><TooltipTrigger asChild>
|
|
<Button variant="ghost" size="icon" className={cn('h-8 w-8', isArchived && 'text-amber-500')} onClick={() => setIsArchived(!isArchived)}>
|
|
<Archive className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger><TooltipContent>{isArchived ? t('notes.unarchive') : t('notes.archive')}</TooltipContent></Tooltip>
|
|
|
|
<Tooltip><TooltipTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleUndo} disabled={historyIndex === 0}>
|
|
<Undo2 className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger><TooltipContent>{t('notes.undoShortcut')}</TooltipContent></Tooltip>
|
|
|
|
<Tooltip><TooltipTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleRedo} disabled={historyIndex >= history.length - 1}>
|
|
<Redo2 className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger><TooltipContent>{t('notes.redoShortcut')}</TooltipContent></Tooltip>
|
|
|
|
</div>
|
|
</TooltipProvider>
|
|
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
<Button variant="ghost" size="sm" onClick={handleClose} className="text-muted-foreground hover:text-foreground px-3 whitespace-nowrap">
|
|
{t('general.close')}
|
|
</Button>
|
|
<Button size="sm" onClick={handleSubmit} disabled={isSubmitting} className="px-5 font-medium whitespace-nowrap">
|
|
{isSubmitting ? t('notes.adding') : t('notes.add')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<input ref={fileInputRef} type="file" accept="image/*" multiple className="hidden" onChange={handleImageUpload} />
|
|
</div>
|
|
|
|
{/* ── AI Panel — direct child of flex-row so self-stretch works ── */}
|
|
{aiOpen && (
|
|
<ContextualAIChat
|
|
onClose={() => setAiOpen(false)}
|
|
noteTitle={title}
|
|
noteContent={content}
|
|
noteImages={images}
|
|
onApplyToNote={(newContent) => setContent(newContent)}
|
|
lastActionApplied={false}
|
|
notebooks={notebooks.map(nb => ({ id: nb.id, name: nb.name }))}
|
|
className="border border-border border-l-0 rounded-r-xl overflow-hidden shadow-sm"
|
|
/>
|
|
)}
|
|
|
|
{/* Dialogs */}
|
|
<Dialog open={showReminderDialog} onOpenChange={setShowReminderDialog}>
|
|
<DialogContent>
|
|
<DialogHeader><DialogTitle>{t('notes.setReminder')}</DialogTitle></DialogHeader>
|
|
<div className="space-y-4 py-4">
|
|
<div className="space-y-2">
|
|
<label htmlFor="reminder-date" className="text-sm font-medium">{t('notes.date')}</label>
|
|
<input id="reminder-date" type="date" value={reminderDate} onChange={(e) => setReminderDate(e.target.value)}
|
|
className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label htmlFor="reminder-time" className="text-sm font-medium">{t('notes.time')}</label>
|
|
<input id="reminder-time" type="time" value={reminderTime} onChange={(e) => setReminderTime(e.target.value)}
|
|
className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm" />
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="ghost" onClick={() => setShowReminderDialog(false)}>{t('general.cancel')}</Button>
|
|
<Button onClick={handleReminderSave}>{t('notes.setReminderButton')}</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog open={showLinkDialog} onOpenChange={setShowLinkDialog}>
|
|
<DialogContent>
|
|
<DialogHeader><DialogTitle>{t('notes.addLink')}</DialogTitle></DialogHeader>
|
|
<div className="py-4">
|
|
<input type="url" placeholder="https://example.com" value={linkUrl}
|
|
onChange={(e) => setLinkUrl(e.target.value)}
|
|
onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); handleAddLink() } }}
|
|
autoFocus
|
|
className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:border-primary" />
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="ghost" onClick={() => setShowLinkDialog(false)}>{t('general.cancel')}</Button>
|
|
<Button onClick={handleAddLink}>{t('general.add')}</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<CollaboratorDialog
|
|
open={showCollaboratorDialog}
|
|
onOpenChange={setShowCollaboratorDialog}
|
|
noteId=""
|
|
noteOwnerId={session?.user?.id || ""}
|
|
currentUserId={session?.user?.id || ""}
|
|
onCollaboratorsChange={setCollaborators}
|
|
initialCollaborators={collaborators}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|