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

keep-notes/components/ui/toast.tsx

@@ -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
+}