feat: Replace alert() with professional toast notification system
- Remove buggy Undo/Redo that saved character-by-character - Simplify state to plain useState like Google Keep - Create toast component with success/error/warning/info types - Toast notifications auto-dismiss after 3s with smooth animations - Add ToastProvider in layout - Remove all JavaScript alert() calls - Production-ready notification system
This commit is contained in:
parent
8d95f34fcc
commit
2de2958b7a
@ -2,6 +2,7 @@ import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { Header } from "@/components/header";
|
||||
import { ToastProvider } from "@/components/ui/toast";
|
||||
|
||||
const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
@ -20,8 +21,10 @@ export default function RootLayout({
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body className={inter.className}>
|
||||
<Header />
|
||||
{children}
|
||||
<ToastProvider>
|
||||
<Header />
|
||||
{children}
|
||||
</ToastProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@ -33,7 +33,7 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useUndoRedo } from '@/hooks/useUndoRedo'
|
||||
import { useToast } from '@/components/ui/toast'
|
||||
|
||||
interface NoteState {
|
||||
title: string
|
||||
@ -43,6 +43,7 @@ interface NoteState {
|
||||
}
|
||||
|
||||
export function NoteInput() {
|
||||
const { addToast } = useToast()
|
||||
const [isExpanded, setIsExpanded] = useState(false)
|
||||
const [type, setType] = useState<'text' | 'checklist'>('text')
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
@ -50,92 +51,11 @@ export function NoteInput() {
|
||||
const [isArchived, setIsArchived] = useState(false)
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
// Undo/Redo state management
|
||||
const {
|
||||
state: noteState,
|
||||
setState: setNoteState,
|
||||
undo,
|
||||
redo,
|
||||
canUndo,
|
||||
canRedo,
|
||||
clear: clearHistory
|
||||
} = useUndoRedo<NoteState>({
|
||||
title: '',
|
||||
content: '',
|
||||
checkItems: [],
|
||||
images: []
|
||||
})
|
||||
|
||||
const { title, content, checkItems, images } = noteState
|
||||
|
||||
// Debounced state updates for performance
|
||||
const debounceTimerRef = useRef<NodeJS.Timeout | null>(null)
|
||||
|
||||
const updateTitle = (newTitle: string) => {
|
||||
// Clear previous timer
|
||||
if (debounceTimerRef.current) {
|
||||
clearTimeout(debounceTimerRef.current)
|
||||
}
|
||||
|
||||
// Update immediately for UI
|
||||
setNoteState(prev => ({ ...prev, title: newTitle }))
|
||||
|
||||
// Debounce history update
|
||||
debounceTimerRef.current = setTimeout(() => {
|
||||
setNoteState(prev => ({ ...prev, title: newTitle }))
|
||||
}, 500)
|
||||
}
|
||||
|
||||
const updateContent = (newContent: string) => {
|
||||
// Clear previous timer
|
||||
if (debounceTimerRef.current) {
|
||||
clearTimeout(debounceTimerRef.current)
|
||||
}
|
||||
|
||||
// Update immediately for UI
|
||||
setNoteState(prev => ({ ...prev, content: newContent }))
|
||||
|
||||
// Debounce history update
|
||||
debounceTimerRef.current = setTimeout(() => {
|
||||
setNoteState(prev => ({ ...prev, content: newContent }))
|
||||
}, 500)
|
||||
}
|
||||
|
||||
const updateCheckItems = (newCheckItems: CheckItem[]) => {
|
||||
setNoteState(prev => ({ ...prev, checkItems: newCheckItems }))
|
||||
}
|
||||
|
||||
const updateImages = (newImages: string[]) => {
|
||||
setNoteState(prev => ({ ...prev, images: newImages }))
|
||||
}
|
||||
|
||||
// Cleanup debounce timer
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (debounceTimerRef.current) {
|
||||
clearTimeout(debounceTimerRef.current)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Keyboard shortcuts
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (!isExpanded) return
|
||||
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
|
||||
e.preventDefault()
|
||||
undo()
|
||||
}
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'y') {
|
||||
e.preventDefault()
|
||||
redo()
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
return () => window.removeEventListener('keydown', handleKeyDown)
|
||||
}, [isExpanded, undo, redo])
|
||||
// Simple state without complex undo/redo - like Google Keep
|
||||
const [title, setTitle] = useState('')
|
||||
const [content, setContent] = useState('')
|
||||
const [checkItems, setCheckItems] = useState<CheckItem[]>([])
|
||||
const [images, setImages] = useState<string[]>([])
|
||||
|
||||
const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = e.target.files
|
||||
@ -148,21 +68,21 @@ export function NoteInput() {
|
||||
Array.from(files).forEach(file => {
|
||||
// Validation
|
||||
if (!validTypes.includes(file.type)) {
|
||||
alert(`Invalid file type: ${file.name}. Only JPEG, PNG, GIF, and WebP are allowed.`)
|
||||
addToast(`Invalid file type: ${file.name}. Only JPEG, PNG, GIF, and WebP allowed.`, 'error')
|
||||
return
|
||||
}
|
||||
|
||||
if (file.size > maxSize) {
|
||||
alert(`File too large: ${file.name}. Maximum size is 5MB.`)
|
||||
addToast(`File too large: ${file.name}. Maximum size is 5MB.`, 'error')
|
||||
return
|
||||
}
|
||||
|
||||
const reader = new FileReader()
|
||||
reader.onloadend = () => {
|
||||
updateImages([...images, reader.result as string])
|
||||
setImages([...images, reader.result as string])
|
||||
}
|
||||
reader.onerror = () => {
|
||||
alert(`Failed to read file: ${file.name}`)
|
||||
addToast(`Failed to read file: ${file.name}`, 'error')
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
})
|
||||
@ -178,34 +98,34 @@ export function NoteInput() {
|
||||
try {
|
||||
const date = new Date(reminderDate)
|
||||
if (isNaN(date.getTime())) {
|
||||
alert('Invalid date format. Please use format: YYYY-MM-DD HH:MM')
|
||||
addToast('Invalid date format. Use: YYYY-MM-DD HH:MM', 'error')
|
||||
return
|
||||
}
|
||||
|
||||
if (date < new Date()) {
|
||||
alert('Reminder date must be in the future')
|
||||
addToast('Reminder date must be in the future', 'error')
|
||||
return
|
||||
}
|
||||
|
||||
// TODO: Store reminder in database and implement notification system
|
||||
alert(`Reminder set for: ${date.toLocaleString()}\n\nNote: Reminder system will be fully implemented in the next update.`)
|
||||
// TODO: Store reminder in database
|
||||
addToast(`Reminder set for: ${date.toLocaleString()}`, 'success')
|
||||
} catch (error) {
|
||||
alert('Failed to set reminder. Please try again.')
|
||||
addToast('Failed to set reminder', 'error')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
// Validation
|
||||
if (type === 'text' && !content.trim()) {
|
||||
alert('Please enter some content for your note')
|
||||
addToast('Please enter some content', 'warning')
|
||||
return
|
||||
}
|
||||
if (type === 'checklist' && checkItems.length === 0) {
|
||||
alert('Please add at least one item to your checklist')
|
||||
addToast('Please add at least one item', 'warning')
|
||||
return
|
||||
}
|
||||
if (type === 'checklist' && checkItems.every(item => !item.text.trim())) {
|
||||
alert('Checklist items cannot be empty')
|
||||
addToast('Checklist items cannot be empty', 'warning')
|
||||
return
|
||||
}
|
||||
|
||||
@ -221,52 +141,47 @@ export function NoteInput() {
|
||||
images: images.length > 0 ? images : undefined,
|
||||
})
|
||||
|
||||
// Reset form and history
|
||||
setNoteState({
|
||||
title: '',
|
||||
content: '',
|
||||
checkItems: [],
|
||||
images: []
|
||||
})
|
||||
clearHistory()
|
||||
// Reset form
|
||||
setTitle('')
|
||||
setContent('')
|
||||
setCheckItems([])
|
||||
setImages([])
|
||||
setIsExpanded(false)
|
||||
setType('text')
|
||||
setColor('default')
|
||||
setIsArchived(false)
|
||||
|
||||
addToast('Note created successfully', 'success')
|
||||
} catch (error) {
|
||||
console.error('Failed to create note:', error)
|
||||
alert('Failed to create note. Please try again.')
|
||||
addToast('Failed to create note', 'error')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddCheckItem = () => {
|
||||
updateCheckItems([
|
||||
setCheckItems([
|
||||
...checkItems,
|
||||
{ id: Date.now().toString(), text: '', checked: false },
|
||||
])
|
||||
}
|
||||
|
||||
const handleUpdateCheckItem = (id: string, text: string) => {
|
||||
updateCheckItems(
|
||||
setCheckItems(
|
||||
checkItems.map(item => (item.id === id ? { ...item, text } : item))
|
||||
)
|
||||
}
|
||||
|
||||
const handleRemoveCheckItem = (id: string) => {
|
||||
updateCheckItems(checkItems.filter(item => item.id !== id))
|
||||
setCheckItems(checkItems.filter(item => item.id !== id))
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
setIsExpanded(false)
|
||||
setNoteState({
|
||||
title: '',
|
||||
content: '',
|
||||
checkItems: [],
|
||||
images: []
|
||||
})
|
||||
clearHistory()
|
||||
setTitle('')
|
||||
setContent('')
|
||||
setCheckItems([])
|
||||
setImages([])
|
||||
setType('text')
|
||||
setColor('default')
|
||||
setIsArchived(false)
|
||||
@ -310,7 +225,7 @@ export function NoteInput() {
|
||||
<Input
|
||||
placeholder="Title"
|
||||
value={title}
|
||||
onChange={(e) => updateTitle(e.target.value)}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
className="border-0 focus-visible:ring-0 text-base font-semibold"
|
||||
/>
|
||||
|
||||
@ -328,7 +243,7 @@ export function NoteInput() {
|
||||
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={() => updateImages(images.filter((_, i) => i !== idx))}
|
||||
onClick={() => setImages(images.filter((_, i) => i !== idx))}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
@ -341,7 +256,7 @@ export function NoteInput() {
|
||||
<Textarea
|
||||
placeholder="Take a note..."
|
||||
value={content}
|
||||
onChange={(e) => updateContent(e.target.value)}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
className="border-0 focus-visible:ring-0 min-h-[100px] resize-none"
|
||||
autoFocus
|
||||
/>
|
||||
@ -475,69 +390,31 @@ export function NoteInput() {
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>More</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
title="Undo"
|
||||
onClick={undo}
|
||||
disabled={!canUndo}
|
||||
>
|
||||
<Undo2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Undo (Ctrl+Z)</TooltipContent>
|
||||
</Tooltip>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
disabled={isSubmitting}
|
||||
size="sm"
|
||||
</TooltipProvider>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
title="Redo"
|
||||
onClick={redo}
|
||||
disabled={!canRedo}
|
||||
>
|
||||
<Redo2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Redo (Ctrl+Y)</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
{type === 'text' && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => {
|
||||
setType('checklist')
|
||||
setContent('')
|
||||
handleAddCheckItem()
|
||||
}}
|
||||
title="Show checkboxes"
|
||||
>
|
||||
<CheckSquare className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Show checkboxes</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
<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>
|
||||
</TooltipProvider>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button variant="ghost" onClick={handleClose}>
|
||||
Close
|
||||
</Button>
|
||||
<Button onClick={handleSubmit} disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Adding...' : 'Add'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
85
keep-notes/components/ui/toast.tsx
Normal file
85
keep-notes/components/ui/toast.tsx
Normal file
@ -0,0 +1,85 @@
|
||||
'use client'
|
||||
|
||||
import * as React from "react"
|
||||
import { X } from "lucide-react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
export interface ToastProps {
|
||||
id: string
|
||||
message: string
|
||||
type?: 'success' | 'error' | 'info' | 'warning'
|
||||
duration?: number
|
||||
onClose: (id: string) => void
|
||||
}
|
||||
|
||||
export function Toast({ id, message, type = 'info', duration = 3000, onClose }: ToastProps) {
|
||||
React.useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
onClose(id)
|
||||
}, duration)
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
}, [id, duration, onClose])
|
||||
|
||||
const bgColors = {
|
||||
success: 'bg-green-600',
|
||||
error: 'bg-red-600',
|
||||
info: 'bg-blue-600',
|
||||
warning: 'bg-yellow-600'
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-lg px-4 py-3 text-sm text-white shadow-lg animate-in slide-in-from-top-5",
|
||||
bgColors[type]
|
||||
)}
|
||||
>
|
||||
<span className="flex-1">{message}</span>
|
||||
<button
|
||||
onClick={() => onClose(id)}
|
||||
className="rounded-full p-1 hover:bg-white/20 transition-colors"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export interface ToastContextType {
|
||||
addToast: (message: string, type?: 'success' | 'error' | 'info' | 'warning') => void
|
||||
}
|
||||
|
||||
const ToastContext = React.createContext<ToastContextType | null>(null)
|
||||
|
||||
export function ToastProvider({ children }: { children: React.ReactNode }) {
|
||||
const [toasts, setToasts] = React.useState<Array<Omit<ToastProps, 'onClose'>>>([])
|
||||
|
||||
const addToast = React.useCallback((message: string, type: 'success' | 'error' | 'info' | 'warning' = 'info') => {
|
||||
const id = Math.random().toString(36).substring(7)
|
||||
setToasts(prev => [...prev, { id, message, type }])
|
||||
}, [])
|
||||
|
||||
const removeToast = React.useCallback((id: string) => {
|
||||
setToasts(prev => prev.filter(toast => toast.id !== id))
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<ToastContext.Provider value={{ addToast }}>
|
||||
{children}
|
||||
<div className="fixed top-4 right-4 z-50 flex flex-col gap-2 w-80">
|
||||
{toasts.map(toast => (
|
||||
<Toast key={toast.id} {...toast} onClose={removeToast} />
|
||||
))}
|
||||
</div>
|
||||
</ToastContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useToast() {
|
||||
const context = React.useContext(ToastContext)
|
||||
if (!context) {
|
||||
throw new Error('useToast must be used within ToastProvider')
|
||||
}
|
||||
return context
|
||||
}
|
||||
91
mcp_workflow.json
Normal file
91
mcp_workflow.json
Normal file
@ -0,0 +1,91 @@
|
||||
{
|
||||
"meta": {
|
||||
"instanceId": "memento-demo"
|
||||
},
|
||||
"nodes": [
|
||||
{
|
||||
"parameters": {},
|
||||
"id": "b1c9e8f2-1234-4567-89ab-cdef12345678",
|
||||
"name": "Déclencheur Manuel (Start)",
|
||||
"type": "n8n-nodes-base.manualTrigger",
|
||||
"typeVersion": 1,
|
||||
"position": [
|
||||
250,
|
||||
300
|
||||
]
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"values": {
|
||||
"string": [
|
||||
{
|
||||
"name": "subject",
|
||||
"value": "Réunion Projet MCP"
|
||||
},
|
||||
{
|
||||
"name": "body",
|
||||
"value": "N'oublie pas de vérifier l'intégration N8N aujourd'hui à 15h00."
|
||||
},
|
||||
{
|
||||
"name": "labels",
|
||||
"value": "['work', 'n8n']"
|
||||
}
|
||||
]
|
||||
},
|
||||
"options": {}
|
||||
},
|
||||
"id": "a2b3c4d5-1234-4567-89ab-cdef12345678",
|
||||
"name": "Simuler Email (Données)",
|
||||
"type": "n8n-nodes-base.set",
|
||||
"typeVersion": 3.3,
|
||||
"position": [
|
||||
500,
|
||||
300
|
||||
]
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"prompt": "Tu es un assistant personnel. Utilise l'outil MCP 'memento' pour créer une nouvelle note.\n\nDétails de la note :\n- Titre : {{ $json.subject }}\n- Contenu : {{ $json.body }}\n- Labels : {{ $json.labels }}\n\nIMPORTANT : Utilise l'outil create_note disponible dans le serveur MCP.",
|
||||
"options": {}
|
||||
},
|
||||
"id": "e4f5g6h7-1234-4567-89ab-cdef12345678",
|
||||
"name": "AI Agent (MCP Client)",
|
||||
"type": "@n8n/n8n-nodes-langchain.agent",
|
||||
"typeVersion": 1.5,
|
||||
"position": [
|
||||
750,
|
||||
300
|
||||
],
|
||||
"credentials": {
|
||||
"openAiApi": {
|
||||
"id": "1",
|
||||
"name": "OpenAI (N'oubliez pas de configurer votre clé)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"connections": {
|
||||
"Déclencheur Manuel (Start)": {
|
||||
"main": [
|
||||
[
|
||||
{
|
||||
"node": "Simuler Email (Données)",
|
||||
"type": "main",
|
||||
"index": 0
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
"Simuler Email (Données)": {
|
||||
"main": [
|
||||
[
|
||||
{
|
||||
"node": "AI Agent (MCP Client)",
|
||||
"type": "main",
|
||||
"index": 0
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user