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/ai-toolbar.tsx

@@ -0,0 +1,83 @@
+import { Button } from '@/components/ui/button'
+import { Textarea } from '@/components/ui/textarea'
+import { Card } from '@/components/ui/card'
+import { Session } from 'next-auth'
+
+interface AIToolbarProps {
+  session: Session | null
+  status: 'loading' | 'authenticated' | 'unauthenticated'
+  aiPrompt: string
+  setAiPrompt: (prompt: string) => void
+  aiLoading: boolean
+  onAiCreate: () => void
+  onAiSummarize: () => void
+  summary: string | null
+  summaryUpdated: string | null
+}
+
+export const AIToolbar = ({
+  session,
+  status,
+  aiPrompt,
+  setAiPrompt,
+  aiLoading,
+  onAiCreate,
+  onAiSummarize,
+  summary,
+  summaryUpdated
+}: AIToolbarProps) => {
+  return (
+    <>
+      {/* AI Toolbar */}
+      {status === "loading" ? (
+        <div className='mb-4 p-4 text-center animate-pulse bg-muted'>Loading...</div>
+      ) : (
+        <div>
+          {session?.user ? (
+            <div className="flex flex-col sm:flex-row gap-4 mb-4 items-start">
+              <div className='w-full'>
+                <Textarea
+                  className="wrap-anywhere field-sizing-content resize-none w-full min-h-[2.5rem] max-h-64 overflow-y-auto sm:overflow-y-visible px-3 py-2 scroll-p-8 placeholder:italic"
+                  // Band-aid for scrollbar clipping out of the box
+                  style={{ clipPath: "inset(0 round 1rem)" }}
+                  placeholder='Describe event for AI to create'
+                  value={aiPrompt}
+                  onChange={e => setAiPrompt(e.target.value)}
+                />
+              </div>
+              <div className='flex flex-row gap-2 pt-1'>
+                <Button onClick={onAiCreate} disabled={aiLoading}>
+                  {aiLoading ? 'Thinking...' : 'AI Create'}
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <div className="mb-4 p-4 border border-dashed rounded-lg text-center">
+              <div className="text-sm text-muted-foreground">
+                Sign in to unlock natural language event creation powered by AI
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Summary Panel */}
+      {summary && (
+        <Card className="p-4 mb-4">
+          <div className="text-sm mb-1">
+            Summary updated {summaryUpdated}
+          </div>
+          <div>{summary}</div>
+        </Card>
+      )}
+
+      {/* AI Actions Toolbar */}
+      <p className='text-muted-foreground text-sm pb-2 pl-1'>AI actions</p>
+      <div className="gap-2 mb-4">
+        <Button variant="secondary" onClick={onAiSummarize} disabled={aiLoading}>
+          {aiLoading ? 'Summarizing...' : 'AI Summarize'}
+        </Button>
+      </div>
+    </>
+  )
+}