Refactor event management into reusable components

- Extract EventCard, EventsList, and event dialog into separate components
- Add new AI toolbar and drag-drop container components
- Simplify main page.tsx by removing inline component definitions
- Improve code organization and maintainability

src/components/event-dialog.tsx

@@ -0,0 +1,96 @@
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { RecurrencePicker } from '@/components/recurrence-picker'
+
+interface EventDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  editingId: string | null
+  title: string
+  setTitle: (title: string) => void
+  description: string
+  setDescription: (description: string) => void
+  location: string
+  setLocation: (location: string) => void
+  url: string
+  setUrl: (url: string) => void
+  start: string
+  setStart: (start: string) => void
+  end: string
+  setEnd: (end: string) => void
+  allDay: boolean
+  setAllDay: (allDay: boolean) => void
+  recurrenceRule: string | undefined
+  setRecurrenceRule: (rule: string | undefined) => void
+  onSave: () => void
+  onReset: () => void
+}
+
+export const EventDialog = ({
+  open,
+  onOpenChange,
+  editingId,
+  title,
+  setTitle,
+  description,
+  setDescription,
+  location,
+  setLocation,
+  url,
+  setUrl,
+  start,
+  setStart,
+  end,
+  setEnd,
+  allDay,
+  setAllDay,
+  recurrenceRule,
+  setRecurrenceRule,
+  onSave,
+  onReset
+}: EventDialogProps) => {
+  const handleOpenChange = (val: boolean) => {
+    if (!val) onReset()
+    onOpenChange(val)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{editingId ? 'Edit Event' : 'Add Event'}</DialogTitle>
+        </DialogHeader>
+        <Input placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
+        <textarea 
+          className="border rounded p-2 w-full" 
+          placeholder="Description"
+          value={description} 
+          onChange={e => setDescription(e.target.value)} 
+        />
+        <Input placeholder="Location" value={location} onChange={e => setLocation(e.target.value)} />
+        <Input placeholder="URL" value={url} onChange={e => setUrl(e.target.value)} />
+        <RecurrencePicker value={recurrenceRule} onChange={setRecurrenceRule} />
+
+        <label className="flex items-center gap-2 mt-2">
+          <input type="checkbox" checked={allDay} onChange={e => setAllDay(e.target.checked)} />
+          All day event
+        </label>
+        {!allDay ? (
+          <>
+            <Input type="datetime-local" value={start} onChange={e => setStart(e.target.value)} />
+            <Input type="datetime-local" value={end} onChange={e => setEnd(e.target.value)} />
+          </>
+        ) : (
+          <>
+            <Input type="date" value={start ? start.split('T')[0] : ''} onChange={e => setStart(e.target.value)} />
+            <Input type="date" value={end ? end.split('T')[0] : ''} onChange={e => setEnd(e.target.value)} />
+          </>
+        )}
+        <DialogFooter>
+          <Button onClick={onSave}>{editingId ? 'Update' : 'Save'}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}