drag & drop + event editing

src/app/page.tsx

@@ -7,15 +7,18 @@ import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '
 import { Input } from '@/components/ui/input'
 import { type CalendarEvent } from '@/lib/types'
 
-import { addEvent, deleteEvent, getAllEvents, clearEvents } from '@/lib/db'
+import { addEvent, deleteEvent, getAllEvents, clearEvents, getDB } from '@/lib/db'
 import { parseICS, generateICS } from '@/lib/ical'
 
 export default function HomePage() {
   const [events, setEvents] = useState<CalendarEvent[]>([])
-  const [open, setOpen] = useState(false)
+  const [dialogOpen, setDialogOpen] = useState(false)
   const [title, setTitle] = useState('')
   const [start, setStart] = useState('')
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [isDragOver, setIsDragOver] = useState(false)
 
+  // Load events only in the browser
   useEffect(() => {
     (async () => {
       const stored = await getAllEvents()
@@ -23,13 +26,29 @@ export default function HomePage() {
     })()
   }, [])
 
-  const handleAdd = async () => {
-    const newEvent = { id: nanoid(), title, start }
-    await addEvent(newEvent)
-    setEvents(prev => [...prev, newEvent])
+  const resetForm = () => {
     setTitle('')
     setStart('')
-    setOpen(false)
+    setEditingId(null)
+  }
+
+  const handleSave = async () => {
+    if (editingId) {
+      // EDIT EXISTING
+      const updatedEvent = { id: editingId, title, start }
+      const db = await getDB()
+      if (db) {
+        await db.put('events', updatedEvent)
+        setEvents(prev => prev.map(e => (e.id === editingId ? updatedEvent : e)))
+      }
+    } else {
+      // ADD NEW
+      const newEvent = { id: nanoid(), title, start }
+      await addEvent(newEvent)
+      setEvents(prev => [...prev, newEvent])
+    }
+    resetForm()
+    setDialogOpen(false)
   }
 
   const handleDelete = async (id: string) => {
@@ -47,7 +66,6 @@ export default function HomePage() {
     const text = await file.text()
     const parsed = parseICS(text)
 
-    // Save to DB and update state
     for (const ev of parsed) {
       await addEvent(ev)
     }
@@ -60,7 +78,6 @@ export default function HomePage() {
     const icsData = generateICS(events)
     const blob = new Blob([icsData], { type: 'text/calendar' })
     const url = URL.createObjectURL(blob)
-
     const a = document.createElement('a')
     a.href = url
     a.download = 'events.ics'
@@ -70,18 +87,44 @@ export default function HomePage() {
     URL.revokeObjectURL(url)
   }
 
+  // --- DRAG & DROP ---
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragOver(true)
+  }
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragOver(false)
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragOver(false)
+    if (e.dataTransfer.files?.length) {
+      const file = e.dataTransfer.files[0]
+      if (file.name.endsWith('.ics')) {
+        handleImport(file)
+      } else {
+        alert('Please drop an .ics file')
+      }
+    }
+  }
+
   return (
-    <div className="space-y-4">
-      <div className="flex gap-2 flex-wrap">
-        <Button onClick={() => setOpen(true)}>Add Event</Button>
+    <div
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      className={`p-4 min-h-[80vh] rounded border-2 border-dashed transition ${isDragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-300'
+        }`}
+    >
+      <div className="flex gap-2 flex-wrap mb-4">
+        <Button onClick={() => setDialogOpen(true)}>Add Event</Button>
         {events.length > 0 && (
           <>
-            <Button variant="secondary" onClick={handleExport}>
-              Export .ics
-            </Button>
-            <Button variant="destructive" onClick={handleClearAll}>
-              Clear All
-            </Button>
+            <Button variant="secondary" onClick={handleExport}>Export .ics</Button>
+            <Button variant="destructive" onClick={handleClearAll}>Clear All</Button>
           </>
         )}
         <label className="cursor-pointer">
@@ -99,26 +142,46 @@ export default function HomePage() {
         </label>
       </div>
 
+      {events.length === 0 && (
+        <p className="text-gray-500 italic">No events yet. Add or drop an .ics file here.</p>
+      )}
+
       <ul className="mt-4 space-y-2">
         {events.map(ev => (
-          <li key={ev.id} className="border p-2 rounded bg-white shadow-sm flex justify-between items-center">
+          <li
+            key={ev.id}
+            className="border p-2 rounded bg-white shadow-sm flex justify-between items-center"
+          >
             <div>
               <strong>{ev.title}</strong> — {ev.start}
             </div>
-            <Button variant="secondary" size="sm" onClick={() => handleDelete(ev.id)}>Delete</Button>
+            <div className="flex gap-2">
+              <Button size="sm" onClick={() => {
+                setTitle(ev.title)
+                setStart(ev.start)
+                setEditingId(ev.id)
+                setDialogOpen(true)
+              }}>Edit</Button>
+              <Button variant="secondary" size="sm" onClick={() => handleDelete(ev.id)}>
+                Delete
+              </Button>
+            </div>
           </li>
         ))}
       </ul>
 
-      <Dialog open={open} onOpenChange={setOpen}>
+      <Dialog open={dialogOpen} onOpenChange={(val) => {
+        if (!val) resetForm()
+        setDialogOpen(val)
+      }}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Add Event</DialogTitle>
+            <DialogTitle>{editingId ? 'Edit Event' : 'Add Event'}</DialogTitle>
           </DialogHeader>
           <Input placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
           <Input type="date" value={start} onChange={e => setStart(e.target.value)} />
           <DialogFooter>
-            <Button onClick={handleAdd}>Save</Button>
+            <Button onClick={handleSave}>{editingId ? 'Update' : 'Save'}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>