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/events-list.tsx

@@ -0,0 +1,34 @@
+import { Calendar1Icon } from 'lucide-react'
+import { EventCard } from './event-card'
+import type { CalendarEvent } from '@/lib/types'
+
+interface EventsListProps {
+  events: CalendarEvent[]
+  onEdit: (event: CalendarEvent) => void
+  onDelete: (eventId: string) => void
+}
+
+export const EventsList = ({ events, onEdit, onDelete }: EventsListProps) => {
+  if (events.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-8 text-center">
+        <Calendar1Icon className='h-12 w-12 text-muted-foreground mb-4' />
+        <h3 className="text-lg font-medium text-muted-foreground">No events yet</h3>
+        <p className="text-sm text-muted-foreground">Create your first event to get started</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {events.map(event => (
+        <EventCard
+          key={event.id}
+          event={event}
+          onEdit={onEdit}
+          onDelete={onDelete}
+        />
+      ))}
+    </div>
+  )
+}