sepehr
3c4b9d6176
- Added multi-provider AI infrastructure (OpenAI/Ollama) - Implemented real-time tag suggestions with debounced analysis - Created AI diagnostics and database maintenance tools in Settings - Added automated garbage collection for orphan labels - Refined UX with deterministic color hashing and interactive ghost tags
842 lines
26 KiB
TypeScript
842 lines
26 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,
|
|
FileText,
|
|
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 } from '@/lib/types'
|
|
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 { useToast } from '@/components/ui/toast'
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
|
|
import { MarkdownContent } from './markdown-content'
|
|
import { LabelSelector } from './label-selector'
|
|
import { LabelBadge } from './label-badge'
|
|
import { useAutoTagging } from '@/hooks/use-auto-tagging'
|
|
import { GhostTags } from './ghost-tags'
|
|
import { useLabels } from '@/context/LabelContext'
|
|
|
|
interface HistoryState {
|
|
title: string
|
|
content: string
|
|
}
|
|
|
|
interface NoteState {
|
|
title: string
|
|
content: string
|
|
checkItems: CheckItem[]
|
|
images: string[]
|
|
}
|
|
|
|
export function NoteInput() {
|
|
const { addToast } = useToast()
|
|
const { labels: globalLabels, addLabel } = useLabels()
|
|
const [isExpanded, setIsExpanded] = useState(false)
|
|
const [type, setType] = useState<'text' | 'checklist'>('text')
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
const [color, setColor] = useState<NoteColor>('default')
|
|
const [isArchived, setIsArchived] = useState(false)
|
|
const [selectedLabels, setSelectedLabels] = useState<string[]>([])
|
|
const fileInputRef = useRef<HTMLInputElement>(null)
|
|
|
|
// Simple state without complex undo/redo - like Google Keep
|
|
const [title, setTitle] = useState('')
|
|
const [content, setContent] = useState('')
|
|
|
|
// Auto-tagging hook
|
|
const { suggestions, isAnalyzing } = useAutoTagging({
|
|
content: type === 'text' ? content : '',
|
|
enabled: type === 'text' && isExpanded
|
|
})
|
|
|
|
const [dismissedTags, setDismissedTags] = useState<string[]>([])
|
|
|
|
const handleSelectGhostTag = async (tag: string) => {
|
|
// Vérification insensible à la casse
|
|
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('Erreur création label auto:', err)
|
|
}
|
|
}
|
|
|
|
addToast(`Tag "${tag}" ajouté`, 'success')
|
|
}
|
|
}
|
|
|
|
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)
|
|
})
|
|
|
|
const [checkItems, setCheckItems] = useState<CheckItem[]>([])
|
|
|
|
const [images, setImages] = useState<string[]>([])
|
|
const [links, setLinks] = useState<LinkMetadata[]>([])
|
|
const [isMarkdown, setIsMarkdown] = useState(false)
|
|
const [showMarkdownPreview, setShowMarkdownPreview] = useState(false)
|
|
|
|
// 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)
|
|
}
|
|
}
|
|
|
|
// 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)) {
|
|
addToast(`Invalid file type: ${file.name}. Only JPEG, PNG, GIF, and WebP allowed.`, 'error')
|
|
continue
|
|
}
|
|
|
|
if (file.size > maxSize) {
|
|
addToast(`File too large: ${file.name}. Maximum size is 5MB.`, 'error')
|
|
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)
|
|
addToast(`Failed to upload ${file.name}`, 'error')
|
|
}
|
|
}
|
|
|
|
// Reset input
|
|
e.target.value = ''
|
|
}
|
|
|
|
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])
|
|
addToast('Link added', 'success')
|
|
} else {
|
|
addToast('Could not fetch link metadata', 'warning')
|
|
// Fallback: just add the url as title
|
|
setLinks(prev => [...prev, { url: linkUrl, title: linkUrl }])
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to add link:', error)
|
|
addToast('Failed to add link', 'error')
|
|
} 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) {
|
|
addToast('Please enter date and time', 'warning')
|
|
return
|
|
}
|
|
|
|
const dateTimeString = `${reminderDate}T${reminderTime}`
|
|
const date = new Date(dateTimeString)
|
|
|
|
if (isNaN(date.getTime())) {
|
|
addToast('Invalid date or time', 'error')
|
|
return
|
|
}
|
|
|
|
if (date < new Date()) {
|
|
addToast('Reminder must be in the future', 'error')
|
|
return
|
|
}
|
|
|
|
setCurrentReminder(date)
|
|
addToast(`Reminder set for ${date.toLocaleString()}`, 'success')
|
|
setShowReminderDialog(false)
|
|
setReminderDate('')
|
|
setReminderTime('')
|
|
}
|
|
|
|
const handleSubmit = async () => {
|
|
// Validation
|
|
if (type === 'text' && !content.trim()) {
|
|
addToast('Please enter some content', 'warning')
|
|
return
|
|
}
|
|
if (type === 'checklist' && checkItems.length === 0) {
|
|
addToast('Please add at least one item', 'warning')
|
|
return
|
|
}
|
|
if (type === 'checklist' && checkItems.every(item => !item.text.trim())) {
|
|
addToast('Checklist items cannot be empty', 'warning')
|
|
return
|
|
}
|
|
|
|
setIsSubmitting(true)
|
|
try {
|
|
await createNote({
|
|
title: title.trim() || undefined,
|
|
content: type === 'text' ? 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,
|
|
})
|
|
|
|
// Reset form
|
|
setTitle('')
|
|
setContent('')
|
|
setCheckItems([])
|
|
setImages([])
|
|
setLinks([])
|
|
setIsMarkdown(false)
|
|
setShowMarkdownPreview(false)
|
|
setHistory([{ title: '', content: '' }])
|
|
setHistoryIndex(0)
|
|
setIsExpanded(false)
|
|
setType('text')
|
|
setColor('default')
|
|
setIsArchived(false)
|
|
setCurrentReminder(null)
|
|
setSelectedLabels([])
|
|
|
|
addToast('Note created successfully', 'success')
|
|
} catch (error) {
|
|
console.error('Failed to create note:', error)
|
|
addToast('Failed to create note', 'error')
|
|
} 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([])
|
|
setIsMarkdown(false)
|
|
setShowMarkdownPreview(false)
|
|
setHistory([{ title: '', content: '' }])
|
|
setHistoryIndex(0)
|
|
setType('text')
|
|
setColor('default')
|
|
setIsArchived(false)
|
|
setCurrentReminder(null)
|
|
setSelectedLabels([])
|
|
}
|
|
|
|
if (!isExpanded) {
|
|
return (
|
|
<Card className="p-4 max-w-2xl mx-auto mb-8 cursor-text shadow-md hover:shadow-lg transition-shadow">
|
|
<div className="flex items-center gap-4">
|
|
<Input
|
|
placeholder="Take a note..."
|
|
onClick={() => setIsExpanded(true)}
|
|
readOnly
|
|
value=""
|
|
className="border-0 focus-visible:ring-0 cursor-text"
|
|
/>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
setType('checklist')
|
|
setIsExpanded(true)
|
|
}}
|
|
title="New checklist"
|
|
>
|
|
<CheckSquare className="h-5 w-5" />
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
const colorClasses = NOTE_COLORS[color] || NOTE_COLORS.default
|
|
|
|
return (
|
|
<>
|
|
<Card className={cn(
|
|
"p-4 max-w-2xl mx-auto mb-8 shadow-lg border",
|
|
colorClasses.card
|
|
)}>
|
|
<div className="space-y-3">
|
|
<Input
|
|
placeholder="Title"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
className="border-0 focus-visible:ring-0 text-base font-semibold"
|
|
/>
|
|
|
|
{/* Image Preview */}
|
|
{images.length > 0 && (
|
|
<div className="flex flex-col gap-2">
|
|
{images.map((img, idx) => (
|
|
<div key={idx} className="relative group">
|
|
<img
|
|
src={img}
|
|
alt={`Upload ${idx + 1}`}
|
|
className="max-w-full h-auto max-h-96 object-contain rounded-lg"
|
|
/>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="absolute top-2 right-2 h-7 w-7 p-0 bg-white/90 hover:bg-white opacity-0 group-hover:opacity-100 transition-opacity"
|
|
onClick={() => setImages(images.filter((_, i) => i !== idx))}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Link Previews */}
|
|
{links.length > 0 && (
|
|
<div className="flex flex-col gap-2 mt-2">
|
|
{/* ... */}
|
|
</div>
|
|
)}
|
|
|
|
{/* Selected Labels Display (Moved here to be visible for both text and checklist) */}
|
|
{selectedLabels.length > 0 && (
|
|
<div className="flex flex-wrap gap-1 mt-2">
|
|
{selectedLabels.map(label => (
|
|
<LabelBadge
|
|
key={label}
|
|
label={label}
|
|
onRemove={() => setSelectedLabels(prev => prev.filter(l => l !== label))}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{type === 'text' ? (
|
|
<div className="space-y-2">
|
|
{/* Markdown toggle button */}
|
|
{isMarkdown && (
|
|
<div className="flex justify-end gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setShowMarkdownPreview(!showMarkdownPreview)}
|
|
className="h-7 text-xs"
|
|
>
|
|
{showMarkdownPreview ? (
|
|
<>
|
|
<FileText className="h-3 w-3 mr-1" />
|
|
Edit
|
|
</>
|
|
) : (
|
|
<>
|
|
<Eye className="h-3 w-3 mr-1" />
|
|
Preview
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{showMarkdownPreview && isMarkdown ? (
|
|
<MarkdownContent
|
|
content={content || '*No content*'}
|
|
className="min-h-[100px] p-3 rounded-md border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50"
|
|
/>
|
|
) : (
|
|
<Textarea
|
|
placeholder={isMarkdown ? "Take a note... (Markdown supported)" : "Take a note..."}
|
|
value={content}
|
|
onChange={(e) => setContent(e.target.value)}
|
|
className="border-0 focus-visible:ring-0 min-h-[100px] resize-none"
|
|
autoFocus
|
|
/>
|
|
)}
|
|
|
|
{/* AI Auto-tagging Suggestions */}
|
|
<GhostTags
|
|
suggestions={filteredSuggestions}
|
|
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 className="mt-2" />
|
|
<Input
|
|
value={item.text}
|
|
onChange={(e) => handleUpdateCheckItem(item.id, e.target.value)}
|
|
placeholder="List item"
|
|
className="flex-1 border-0 focus-visible:ring-0"
|
|
autoFocus={checkItems[checkItems.length - 1].id === item.id}
|
|
/>
|
|
<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 w-full justify-start"
|
|
>
|
|
+ List item
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between pt-2">
|
|
<TooltipProvider>
|
|
<div className="flex items-center gap-1">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className={cn(
|
|
"h-8 w-8",
|
|
currentReminder && "text-blue-600"
|
|
)}
|
|
title="Remind me"
|
|
onClick={handleReminderOpen}
|
|
>
|
|
<Bell className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Remind me</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className={cn(
|
|
"h-8 w-8",
|
|
isMarkdown && "text-blue-600"
|
|
)}
|
|
onClick={() => {
|
|
setIsMarkdown(!isMarkdown)
|
|
if (isMarkdown) setShowMarkdownPreview(false)
|
|
}}
|
|
title="Markdown"
|
|
>
|
|
<FileText className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Markdown</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8"
|
|
title="Add image"
|
|
onClick={() => fileInputRef.current?.click()}
|
|
>
|
|
<Image className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Add image</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8" title="Collaborator">
|
|
<UserPlus className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Collaborator</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8"
|
|
onClick={() => setShowLinkDialog(true)}
|
|
title="Add Link"
|
|
>
|
|
<LinkIcon className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Add Link</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<LabelSelector
|
|
selectedLabels={selectedLabels}
|
|
onLabelsChange={setSelectedLabels}
|
|
triggerLabel=""
|
|
align="start"
|
|
/>
|
|
|
|
<DropdownMenu>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8" title="Background options">
|
|
<Palette className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Background options</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-yellow-600"
|
|
)}
|
|
onClick={() => setIsArchived(!isArchived)}
|
|
title="Archive"
|
|
>
|
|
<Archive className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>{isArchived ? 'Unarchive' : 'Archive'}</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8" title="More">
|
|
<MoreVertical className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>More</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>Undo (Ctrl+Z)</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>Redo (Ctrl+Y)</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</TooltipProvider>
|
|
|
|
<div className="flex gap-2">
|
|
<Button
|
|
onClick={handleSubmit}
|
|
disabled={isSubmitting}
|
|
size="sm"
|
|
>
|
|
{isSubmitting ? 'Adding...' : 'Add'}
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={handleClose}
|
|
size="sm"
|
|
>
|
|
Close
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
multiple
|
|
className="hidden"
|
|
onChange={handleImageUpload}
|
|
/>
|
|
</Card>
|
|
|
|
<Dialog open={showReminderDialog} onOpenChange={setShowReminderDialog}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Set Reminder</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-4 py-4">
|
|
<div className="space-y-2">
|
|
<label htmlFor="reminder-date" className="text-sm font-medium">
|
|
Date
|
|
</label>
|
|
<Input
|
|
id="reminder-date"
|
|
type="date"
|
|
value={reminderDate}
|
|
onChange={(e) => setReminderDate(e.target.value)}
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label htmlFor="reminder-time" className="text-sm font-medium">
|
|
Time
|
|
</label>
|
|
<Input
|
|
id="reminder-time"
|
|
type="time"
|
|
value={reminderTime}
|
|
onChange={(e) => setReminderTime(e.target.value)}
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="ghost" onClick={() => setShowReminderDialog(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button onClick={handleReminderSave}>
|
|
Set Reminder
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog open={showLinkDialog} onOpenChange={setShowLinkDialog}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Add Link</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)}>
|
|
Cancel
|
|
</Button>
|
|
<Button onClick={handleAddLink}>
|
|
Add
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
)
|
|
}
|