add recurrence editor component

src/app/page.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button'
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { Card } from '@/components/ui/card'
+import { RecurrencePicker } from '@/components/recurrence-picker'
 
 import { addEvent, deleteEvent, getAllEvents, clearEvents, getDB } from '@/lib/db'
 import { parseICS, generateICS } from '@/lib/ical'
@@ -25,7 +26,7 @@ export default function HomePage() {
   const [start, setStart] = useState('')
   const [end, setEnd] = useState('')
   const [allDay, setAllDay] = useState(false)
-  const [recurrenceRule, setRecurrenceRule] = useState('')
+  const [recurrenceRule, setRecurrenceRule] = useState<string | undefined>(undefined)
 
   // AI
   const [aiPrompt, setAiPrompt] = useState('')
@@ -58,7 +59,7 @@ export default function HomePage() {
       description,
       location,
       url,
-      recurrenceRule: recurrenceRule || undefined,
+      recurrenceRule,
       start,
       end: end || undefined,
       allDay,
@@ -155,7 +156,7 @@ export default function HomePage() {
           setAllDay(ev.allDay || false)
           setEditingId(null)
           setDialogOpen(true)
-          setRecurrenceRule(ev.recurrenceRule || '')
+          setRecurrenceRule(ev.recurrenceRule || undefined)
         } else {
           // Save them all directly to DB
           for (const ev of data) {
@@ -308,11 +309,8 @@ export default function HomePage() {
             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)} />
-          <Input
-            placeholder="Recurrence rule (e.g. FREQ=WEEKLY;BYDAY=MO)"
-            value={recurrenceRule}
-            onChange={e => setRecurrenceRule(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