Simplify dropdown menu labels in event card

Remove redundant "event" text from Edit and Delete menu items for cleaner UI

src/app/api/ai-event/route.ts

@@ -60,7 +60,7 @@ Rules:
 		const content = data.choices[0].message.content;
 		const parsed = JSON.parse(content);
 		return NextResponse.json(parsed);
-	} catch (e) {
+	} catch {
 		return NextResponse.json(
 			{ error: "Failed to parse AI output", raw: data },
 			{ status: 500 },

src/app/api/ai-summary/route.ts

@@ -1,5 +1,4 @@
 import { NextResponse } from "next/server";
-import type { CalendarEvent } from "@/lib/types";
 
 export async function POST(request: Request) {
 	try {

src/app/page.tsx

@@ -2,127 +2,18 @@
 
 import { useEffect, useState } from 'react'
 import { nanoid } from 'nanoid'
-import { Button } from '@/components/ui/button'
+import { useSession } from 'next-auth/react'
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { toast } from 'sonner'
-import { Input } from '@/components/ui/input'
-import { Card, CardHeader, CardContent } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-import { LucideMapPin, Clock, MoreHorizontal, Calendar1Icon } from 'lucide-react'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, DropdownMenuItem } from '@/components/ui/dropdown-menu'
-import { RecurrencePicker } from '@/components/recurrence-picker'
-import { IcsFilePicker } from '@/components/ics-file-picker'
 
 import { saveEvent as addEvent, deleteEvent, getEvents as getAllEvents, clearEvents, updateEvent } from '@/lib/events-db'
 import { parseICS, generateICS } from '@/lib/ical'
 import type { CalendarEvent } from '@/lib/types'
-import { Textarea } from '@/components/ui/textarea'
-import { useSession } from 'next-auth/react'
-import { toast } from 'sonner'
 
-// Individual event card component
+import { AIToolbar } from '@/components/ai-toolbar'
-const EventCard = ({ event, onEdit, onDelete }: { event: CalendarEvent, onEdit: (event: CalendarEvent) => void, onDelete: (eventId: string) => void }) => {
+import { EventActionsToolbar } from '@/components/event-actions-toolbar'
-  const formatDateTime = (dateStr: string, allDay: boolean | undefined) => {
+import { EventsList } from '@/components/events-list'
-    return allDay
+import { EventDialog } from '@/components/event-dialog'
-      ? new Date(dateStr).toLocaleDateString()
+import { DragDropContainer } from '@/components/drag-drop-container'
-      : new Date(dateStr).toLocaleString()
-  }
-
-  const handleEdit = () => {
-    onEdit({
-      id: event.id,
-      title: event.title,
-      description: event.description || '',
-      location: event.location || '',
-      url: event.url || '',
-      start: event.start,
-      end: event.end || '',
-      allDay: event.allDay || false
-    })
-  }
-
-  return (
-    <Card className="w-full">
-      <CardHeader className="pb-3">
-        <div className="flex items-start justify-between">
-          <div className="space-y-1 flex-1">
-            <h3 className="font-semibold leading-none tracking-tight">
-              {event.title}
-            </h3>
-            {event.recurrenceRule && (
-              <Badge variant="secondary" className="text-xs">
-                Repeats: {event.recurrenceRule}
-              </Badge>
-            )}
-            {event.description && (
-              <p className="text-sm text-muted-foreground mt-2 break-words">
-                {event.description}
-              </p>
-            )}
-          </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="h-8 w-8 p-0">
-                <MoreHorizontal className="h-4 w-4" />
-                <span className="sr-only">Open menu</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem onClick={handleEdit}>
-                Edit event
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => onDelete(event.id)}
-                className="text-destructive"
-              >
-                Delete event
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </CardHeader>
-
-      <CardContent className="pt-0">
-        <div className="space-y-2">
-          <div className="flex items-center text-sm text-muted-foreground">
-            <Clock className="mr-2 h-4 w-4" />
-            {formatDateTime(event.start, event.allDay)}
-          </div>
-
-          {event.location && (
-            <div className="flex items-center text-sm text-muted-foreground">
-              <LucideMapPin className="mr-2 h-4 w-4" />
-              {event.location}
-            </div>
-          )}
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-const EventsList = ({ events, onEdit, onDelete }: { events: CalendarEvent[], onEdit: (event: CalendarEvent) => void, onDelete: (eventId: string) => void }) => {
-  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>
-  )
-}
 
 export default function HomePage() {
   const [events, setEvents] = useState<CalendarEvent[]>([])
@@ -164,6 +55,7 @@ export default function HomePage() {
     setEnd('')
     setAllDay(false)
     setEditingId(null)
+    setRecurrenceRule(undefined)
   }
 
   const handleSave = async () => {
@@ -226,22 +118,6 @@ export default function HomePage() {
     URL.revokeObjectURL(url)
   }
 
-  // Drag-and-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 {
-        toast.warning('Please drop an .ics file')
-      }
-    }
-  }
-
   // AI Create Event
   const handleAiCreate = async () => {
     if (!aiPrompt.trim()) return
@@ -360,81 +236,7 @@ export default function HomePage() {
     }
   }
 
-  return (
+  const handleEdit = (eventData: CalendarEvent) => {
-    <div onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop}
-      className={`p-4 min-h-[80vh] flex flex-col rounded border-2 border-dashed transition ${isDragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-700'
-        }`}
-    >
-      {/* 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={handleAiCreate} 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={handleAiSummarize} disabled={aiLoading}>
-          {aiLoading ? 'Summarizing...' : 'AI Summarize'}
-        </Button>
-      </div>
-
-      {/* Control Toolbar */}
-      <p className='text-muted-foreground text-sm pb-2 pl-1'>Event Actions</p>
-      <div className="flex flex-wrap gap-2 mb-4">
-        <Button onClick={() => setDialogOpen(true)}>Add Event</Button>
-        <IcsFilePicker onFileSelect={handleImport} variant='secondary'>Import .ics</IcsFilePicker>
-        {events.length > 0 && (
-          <>
-            <Button variant="secondary" onClick={handleExport}>Export .ics</Button>
-            <Button variant="destructive" onClick={handleClearAll}>Clear All</Button>
-          </>
-        )}
-      </div>
-
-      {/* Event List */}
-      {events.length === 0 && (
-        <>
-        </>)}
-      <EventsList
-        events={events}
-        onEdit={(eventData) => {
     setTitle(eventData.title)
     setDescription(eventData.description || "")
     setLocation(eventData.location || "")
@@ -443,47 +245,65 @@ export default function HomePage() {
     setEnd(eventData.end || "")
     setAllDay(eventData.allDay || false)
     setEditingId(eventData.id)
+    setRecurrenceRule(eventData.recurrenceRule)
     setDialogOpen(true)
-        }}
+  }
+
+  return (
+    <DragDropContainer
+      isDragOver={isDragOver}
+      setIsDragOver={setIsDragOver}
+      onImport={handleImport}
+    >
+      <AIToolbar
+        session={session}
+        status={status}
+        aiPrompt={aiPrompt}
+        setAiPrompt={setAiPrompt}
+        aiLoading={aiLoading}
+        onAiCreate={handleAiCreate}
+        onAiSummarize={handleAiSummarize}
+        summary={summary}
+        summaryUpdated={summaryUpdated}
+      />
+
+      <EventActionsToolbar
+        events={events}
+        onAddEvent={() => setDialogOpen(true)}
+        onImport={handleImport}
+        onExport={handleExport}
+        onClearAll={handleClearAll}
+      />
+
+      <EventsList
+        events={events}
+        onEdit={handleEdit}
         onDelete={handleDelete}
       />
 
-      {/* Add/Edit Dialog */}
+      <EventDialog
-      <Dialog open={dialogOpen} onOpenChange={val => { if (!val) resetForm(); setDialogOpen(val) }}>
+        open={dialogOpen}
-        <DialogContent>
+        onOpenChange={setDialogOpen}
-          <DialogHeader>
+        editingId={editingId}
-            <DialogTitle>{editingId ? 'Edit Event' : 'Add Event'}</DialogTitle>
+        title={title}
-          </DialogHeader>
+        setTitle={setTitle}
-          <Input placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
+        description={description}
-          <textarea className="border rounded p-2 w-full" placeholder="Description"
+        setDescription={setDescription}
-            value={description} onChange={e => setDescription(e.target.value)} />
+        location={location}
-          <Input placeholder="Location" value={location} onChange={e => setLocation(e.target.value)} />
+        setLocation={setLocation}
-          <Input placeholder="URL" value={url} onChange={e => setUrl(e.target.value)} />
+        url={url}
-          <RecurrencePicker value={recurrenceRule} onChange={setRecurrenceRule} />
+        setUrl={setUrl}
-
+        start={start}
-          <label className="flex items-center gap-2 mt-2">
+        setStart={setStart}
-            <input type="checkbox" checked={allDay} onChange={e => setAllDay(e.target.checked)} />
+        end={end}
-            All day event
+        setEnd={setEnd}
-          </label>
+        allDay={allDay}
-          {!allDay ? (
+        setAllDay={setAllDay}
-            <>
+        recurrenceRule={recurrenceRule}
-              <Input type="datetime-local" value={start} onChange={e => setStart(e.target.value)} />
+        setRecurrenceRule={setRecurrenceRule}
-              <Input type="datetime-local" value={end} onChange={e => setEnd(e.target.value)} />
+        onSave={handleSave}
-            </>
+        onReset={resetForm}
-          ) : (
+      />
-            <>
+    </DragDropContainer>
-              <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={handleSave}>{editingId ? 'Update' : 'Save'}</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <div className='mt-auto w-full pb-4 text-gray-400'>
-        <div className='max-w-fit m-auto'> Drag & Drop *.ics here</div>
-      </div>
-    </div >
   )
 }

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>
+    </>
+  )
+}

src/components/drag-drop-container.tsx

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react'
+import { toast } from 'sonner'
+
+interface DragDropContainerProps {
+  children: ReactNode
+  isDragOver: boolean
+  setIsDragOver: (isDragOver: boolean) => void
+  onImport: (file: File) => void
+}
+
+export const DragDropContainer = ({
+  children,
+  isDragOver,
+  setIsDragOver,
+  onImport
+}: DragDropContainerProps) => {
+  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')) {
+        onImport(file)
+      } else {
+        toast.warning('Please drop an .ics file')
+      }
+    }
+  }
+
+  return (
+    <div 
+      onDragOver={handleDragOver} 
+      onDragLeave={handleDragLeave} 
+      onDrop={handleDrop}
+      className={`p-4 min-h-[80vh] flex flex-col rounded border-2 border-dashed transition ${
+        isDragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-700'
+      }`}
+    >
+      {children}
+      <div className='mt-auto w-full pb-4 text-gray-400'>
+        <div className='max-w-fit m-auto'>Drag & Drop *.ics here</div>
+      </div>
+    </div>
+  )
+}

src/components/event-actions-toolbar.tsx

@@ -0,0 +1,36 @@
+import { Button } from '@/components/ui/button'
+import { IcsFilePicker } from '@/components/ics-file-picker'
+import type { CalendarEvent } from '@/lib/types'
+
+interface EventActionsToolbarProps {
+  events: CalendarEvent[]
+  onAddEvent: () => void
+  onImport: (file: File) => void
+  onExport: () => void
+  onClearAll: () => void
+}
+
+export const EventActionsToolbar = ({
+  events,
+  onAddEvent,
+  onImport,
+  onExport,
+  onClearAll
+}: EventActionsToolbarProps) => {
+  return (
+    <>
+      {/* Control Toolbar */}
+      <p className='text-muted-foreground text-sm pb-2 pl-1'>Event Actions</p>
+      <div className="flex flex-wrap gap-2 mb-4">
+        <Button onClick={onAddEvent}>Add Event</Button>
+        <IcsFilePicker onFileSelect={onImport} variant='secondary'>Import .ics</IcsFilePicker>
+        {events.length > 0 && (
+          <>
+            <Button variant="secondary" onClick={onExport}>Export .ics</Button>
+            <Button variant="destructive" onClick={onClearAll}>Clear All</Button>
+          </>
+        )}
+      </div>
+    </>
+  )
+}

src/components/event-card.tsx

@@ -0,0 +1,92 @@
+import { Button } from '@/components/ui/button'
+import { Card, CardHeader, CardContent } from '@/components/ui/card'
+import { LucideMapPin, Clock, MoreHorizontal } from 'lucide-react'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, DropdownMenuItem } from '@/components/ui/dropdown-menu'
+import { RRuleDisplay } from '@/components/rrule-display'
+import type { CalendarEvent } from '@/lib/types'
+
+interface EventCardProps {
+  event: CalendarEvent
+  onEdit: (event: CalendarEvent) => void
+  onDelete: (eventId: string) => void
+}
+
+export const EventCard = ({ event, onEdit, onDelete }: EventCardProps) => {
+  const formatDateTime = (dateStr: string, allDay: boolean | undefined) => {
+    return allDay
+      ? new Date(dateStr).toLocaleDateString()
+      : new Date(dateStr).toLocaleString()
+  }
+
+  const handleEdit = () => {
+    onEdit({
+      id: event.id,
+      title: event.title,
+      description: event.description || '',
+      location: event.location || '',
+      url: event.url || '',
+      start: event.start,
+      end: event.end || '',
+      allDay: event.allDay || false
+    })
+  }
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div className="space-y-1 flex-1">
+            <h3 className="font-semibold leading-none tracking-tight">
+              {event.title}
+            </h3>
+            {event.recurrenceRule && (
+              <div className="mt-1">
+                <RRuleDisplay rrule={event.recurrenceRule} />
+              </div>
+            )}
+            {event.description && (
+              <p className="text-sm text-muted-foreground mt-2 break-words">
+                {event.description}
+              </p>
+            )}
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="h-8 w-8 p-0">
+                <MoreHorizontal className="h-4 w-4" />
+                <span className="sr-only">Open menu</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={handleEdit}>
+                Edit
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => onDelete(event.id)}
+                className="text-destructive"
+              >
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </CardHeader>
+
+      <CardContent className="pt-0">
+        <div className="space-y-2">
+          <div className="flex items-center text-sm text-muted-foreground">
+            <Clock className="mr-2 h-4 w-4" />
+            {formatDateTime(event.start, event.allDay)}
+          </div>
+
+          {event.location && (
+            <div className="flex items-center text-sm text-muted-foreground">
+              <LucideMapPin className="mr-2 h-4 w-4" />
+              {event.location}
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

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

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

src/components/recurrence-picker.tsx

@@ -5,7 +5,6 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Checkbox } from "@/components/ui/checkbox"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 
 type Recurrence = {
   freq: "NONE" | "DAILY" | "WEEKLY" | "MONTHLY"

src/components/rrule-display.tsx

@@ -0,0 +1,244 @@
+import { Badge } from "@/components/ui/badge"
+import type { RecurrenceRule } from "@/lib/rfc5545-types"
+
+interface RRuleDisplayProps {
+  rrule: string | RecurrenceRule
+  className?: string
+}
+
+export function RRuleDisplay({ rrule, className }: RRuleDisplayProps) {
+  const parsedRule = typeof rrule === 'string' ? parseRRuleString(rrule) : rrule
+  const humanText = formatRRuleToHuman(parsedRule)
+  
+  return (
+    <div className={className}>
+      <span className="text-sm text-muted-foreground">{humanText}</span>
+    </div>
+  )
+}
+
+interface RRuleDisplayDetailedProps {
+  rrule: string | RecurrenceRule
+  className?: string
+  showBadges?: boolean
+}
+
+export function RRuleDisplayDetailed({ rrule, className, showBadges = true }: RRuleDisplayDetailedProps) {
+  const parsedRule = typeof rrule === 'string' ? parseRRuleString(rrule) : rrule
+  const humanText = formatRRuleToHuman(parsedRule)
+  const details = getRRuleDetails(parsedRule)
+  
+  return (
+    <div className={className}>
+      <div className="space-y-2">
+        <div className="text-sm font-medium">{humanText}</div>
+        
+        {showBadges && details.length > 0 && (
+          <div className="flex flex-wrap gap-1">
+            {details.map((detail, index) => (
+              <Badge key={index} variant="outline" className="text-xs">
+                {detail}
+              </Badge>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function parseRRuleString(rruleString: string): RecurrenceRule {
+  const parts = Object.fromEntries(rruleString.split(";").map(p => p.split("=")))
+  
+  return {
+    freq: parts.FREQ as RecurrenceRule['freq'],
+    until: parts.UNTIL ? new Date(parts.UNTIL.replace(/(\d{4})(\d{2})(\d{2})T(\d{2})(\d{2})(\d{2})Z?/, '$1-$2-$3T$4:$5:$6Z')).toISOString() : undefined,
+    count: parts.COUNT ? parseInt(parts.COUNT, 10) : undefined,
+    interval: parts.INTERVAL ? parseInt(parts.INTERVAL, 10) : undefined,
+    bySecond: parts.BYSECOND ? parts.BYSECOND.split(",").map((n: string) => parseInt(n, 10)) : undefined,
+    byMinute: parts.BYMINUTE ? parts.BYMINUTE.split(",").map((n: string) => parseInt(n, 10)) : undefined,
+    byHour: parts.BYHOUR ? parts.BYHOUR.split(",").map((n: string) => parseInt(n, 10)) : undefined,
+    byDay: parts.BYDAY ? parts.BYDAY.split(",") : undefined,
+    byMonthDay: parts.BYMONTHDAY ? parts.BYMONTHDAY.split(",").map((n: string) => parseInt(n, 10)) : undefined,
+    byYearDay: parts.BYYEARDAY ? parts.BYYEARDAY.split(",").map((n: string) => parseInt(n, 10)) : undefined,
+    byWeekNo: parts.BYWEEKNO ? parts.BYWEEKNO.split(",").map((n: string) => parseInt(n, 10)) : undefined,
+    byMonth: parts.BYMONTH ? parts.BYMONTH.split(",").map((n: string) => parseInt(n, 10)) : undefined,
+    bySetPos: parts.BYSETPOS ? parts.BYSETPOS.split(",").map((n: string) => parseInt(n, 10)) : undefined,
+    wkst: parts.WKST as RecurrenceRule['wkst'],
+  }
+}
+
+function formatRRuleToHuman(rule: RecurrenceRule): string {
+  const { freq, interval = 1, count, until, byDay, byMonthDay, byMonth, byHour, byMinute, bySecond } = rule
+  
+  let text = ""
+  
+  // Base frequency
+  switch (freq) {
+    case 'SECONDLY':
+      text = interval === 1 ? "Every second" : `Every ${interval} seconds`
+      break
+    case 'MINUTELY':
+      text = interval === 1 ? "Every minute" : `Every ${interval} minutes`
+      break
+    case 'HOURLY':
+      text = interval === 1 ? "Every hour" : `Every ${interval} hours`
+      break
+    case 'DAILY':
+      text = interval === 1 ? "Daily" : `Every ${interval} days`
+      break
+    case 'WEEKLY':
+      text = interval === 1 ? "Weekly" : `Every ${interval} weeks`
+      break
+    case 'MONTHLY':
+      text = interval === 1 ? "Monthly" : `Every ${interval} months`
+      break
+    case 'YEARLY':
+      text = interval === 1 ? "Yearly" : `Every ${interval} years`
+      break
+  }
+  
+  // Add day specifications
+  if (byDay?.length) {
+    const dayNames = {
+      'SU': 'Sunday', 'MO': 'Monday', 'TU': 'Tuesday', 'WE': 'Wednesday',
+      'TH': 'Thursday', 'FR': 'Friday', 'SA': 'Saturday'
+    }
+    
+    const days = byDay.map(day => {
+      // Handle numbered days like "2TU" (second Tuesday)
+      const match = day.match(/^(-?\d+)?([A-Z]{2})$/)
+      if (match) {
+        const [, num, dayCode] = match
+        const dayName = dayNames[dayCode as keyof typeof dayNames]
+        if (num) {
+          const ordinal = getOrdinal(parseInt(num))
+          return `${ordinal} ${dayName}`
+        }
+        return dayName
+      }
+      return day
+    })
+    
+    if (freq === 'WEEKLY') {
+      text += ` on ${formatList(days)}`
+    } else {
+      text += ` on ${formatList(days)}`
+    }
+  }
+  
+  // Add month day specifications
+  if (byMonthDay?.length) {
+    const days = byMonthDay.map(day => {
+      if (day < 0) {
+        return `${getOrdinal(Math.abs(day))} to last day`
+      }
+      return getOrdinal(day)
+    })
+    text += ` on the ${formatList(days)}`
+  }
+  
+  // Add month specifications
+  if (byMonth?.length) {
+    const monthNames = [
+      'January', 'February', 'March', 'April', 'May', 'June',
+      'July', 'August', 'September', 'October', 'November', 'December'
+    ]
+    const months = byMonth.map(month => monthNames[month - 1])
+    text += ` in ${formatList(months)}`
+  }
+  
+  // Add time specifications
+  if (byHour?.length || byMinute?.length || bySecond?.length) {
+    const timeSpecs = []
+    if (byHour?.length) {
+      const hours = byHour.map(h => `${h.toString().padStart(2, '0')}:00`)
+      timeSpecs.push(`at ${formatList(hours)}`)
+    }
+    if (byMinute?.length && !byHour?.length) {
+      timeSpecs.push(`at minute ${formatList(byMinute.map(String))}`)
+    }
+    if (bySecond?.length && !byHour?.length && !byMinute?.length) {
+      timeSpecs.push(`at second ${formatList(bySecond.map(String))}`)
+    }
+    if (timeSpecs.length) {
+      text += ` ${timeSpecs.join(' ')}`
+    }
+  }
+  
+  // Add end conditions
+  if (count) {
+    text += `, ${count} time${count === 1 ? '' : 's'}`
+  } else if (until) {
+    const date = new Date(until)
+    text += `, until ${date.toLocaleDateString()}`
+  }
+  
+  return text
+}
+
+function getRRuleDetails(rule: RecurrenceRule): string[] {
+  const details: string[] = []
+  
+  if (rule.wkst && rule.wkst !== 'MO') {
+    const dayNames = {
+      'SU': 'Sunday', 'MO': 'Monday', 'TU': 'Tuesday', 'WE': 'Wednesday',
+      'TH': 'Thursday', 'FR': 'Friday', 'SA': 'Saturday'
+    }
+    details.push(`Week starts ${dayNames[rule.wkst]}`)
+  }
+  
+  if (rule.byWeekNo?.length) {
+    details.push(`Week ${formatList(rule.byWeekNo.map(String))}`)
+  }
+  
+  if (rule.byYearDay?.length) {
+    details.push(`Day ${formatList(rule.byYearDay.map(String))} of year`)
+  }
+  
+  if (rule.bySetPos?.length) {
+    const positions = rule.bySetPos.map(pos => {
+      if (pos < 0) {
+        return `${getOrdinal(Math.abs(pos))} to last`
+      }
+      return getOrdinal(pos)
+    })
+    details.push(`Position ${formatList(positions)}`)
+  }
+  
+  return details
+}
+
+function getOrdinal(num: number): string {
+  const suffix = ['th', 'st', 'nd', 'rd']
+  const v = num % 100
+  return num + (suffix[(v - 20) % 10] || suffix[v] || suffix[0])
+}
+
+function formatList(items: string[]): string {
+  if (items.length === 0) return ''
+  if (items.length === 1) return items[0]
+  if (items.length === 2) return `${items[0]} and ${items[1]}`
+  return `${items.slice(0, -1).join(', ')}, and ${items[items.length - 1]}`
+}
+
+// Hook for easy usage in components
+export function useRRuleDisplay(rrule?: string) {
+  if (!rrule) return null
+  
+  try {
+    const parsedRule = parseRRuleString(rrule)
+    return {
+      humanText: formatRRuleToHuman(parsedRule),
+      details: getRRuleDetails(parsedRule),
+      parsedRule
+    }
+  } catch (error) {
+    return {
+      humanText: "Invalid recurrence rule",
+      details: [],
+      parsedRule: null,
+      error: error instanceof Error ? error.message : String(error)
+    }
+  }
+}