containerize app for production

Dockerfile

@@ -0,0 +1,35 @@
+# =====================
+# Build Stage
+# =====================
+FROM oven/bun:1.2.10-alpine AS builder
+
+WORKDIR /app
+
+# Install dependencies
+COPY package.json bun.lock ./
+RUN bun install --frozen-lockfile
+
+# Copy rest of app
+COPY . .
+
+# Build Next.js app
+RUN bun run build
+
+# =====================
+# Runtime Stage
+# =====================
+FROM oven/bun:1.2.10-alpine
+
+WORKDIR /app
+
+# Copy only necessary files from builder
+COPY --from=builder /app/package.json /app/package.json
+COPY --from=builder /app/.next /app/.next
+COPY --from=builder /app/public /app/public
+COPY --from=builder /app/node_modules /app/node_modules
+
+# Expose port
+EXPOSE 3000
+
+# Run in production
+CMD ["bun", "run", "start"]

bun.lock

@@ -8,6 +8,7 @@
         "@radix-ui/react-slot": "^1.2.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "ical.js": "^2.2.1",
         "idb": "^8.0.3",
         "lucide-react": "^0.539.0",
         "nanoid": "^5.1.5",
@@ -851,6 +852,8 @@
 
     "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
 
+    "ical.js": ["ical.js@2.2.1", "", {}, "sha512-yK/UlPbEs316igb/tjRgbFA8ZV75rCsBJp/hWOatpyaPNlgw0dGDmU+FoicOcwX4xXkeXOkYiOmCqNPFpNPkQg=="],
+
     "idb": ["idb@8.0.3", "", {}, "sha512-LtwtVyVYO5BqRvcsKuB2iUMnHwPVByPCXFXOpuU96IZPPoPN6xjOGxZQ74pgSVVLQWtUOYgyeL4GE98BY5D3wg=="],
 
     "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],

docker-compose.yml

@@ -0,0 +1,13 @@
+services:
+  ical-pwa:
+    build: .
+    container_name: ical-pwa
+    restart: unless-stopped
+    ports:
+      - "3000:3000"
+    environment:
+      NODE_ENV: production
+      OPENROUTER_API_KEY: ${OPENROUTER_API_KEY}
+    volumes:
+      - .:/app
+      - /app/node_modules

package.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-slot": "^1.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "ical.js": "^2.2.1",
     "idb": "^8.0.3",
     "lucide-react": "^0.539.0",
     "nanoid": "^5.1.5",

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

@@ -0,0 +1,59 @@
+import { NextResponse } from "next/server";
+
+export async function POST(request: Request) {
+	const { prompt } = await request.json();
+
+	const systemPrompt = `
+You are an assistant that converts natural language into an ARRAY of calendar events.
+TypeScript type:
+
+{
+  id?: string,
+  title: string,
+  description?: string,
+  location?: string,
+  url?: string,
+  start: string, // ISO datetime
+  end?: string,
+  allDay?: boolean,
+  recurrenceRule?: string // valid iCal RRULE string like FREQ=WEEKLY;BYDAY=MO;INTERVAL=1
+}[]
+
+Rules:
+  - If the user describes multiple events in one prompt, return multiple objects (one per event).
+  - Always return a valid JSON array of objects, even if there's only one event.
+  - Today is ${new Date().toLocaleString()}.
+  - If no time is given, assume allDay event.
+  - If no end time is given (and event is not allDay), default to 1 hour after start.
+  - If multiple events are described, return multiple.
+  - If recurrence is implied (e.g. "every Monday", "daily for 10 days", "monthly on the 15th"), generate a recurrenceRule.
+  - Output ONLY valid JSON (no prose).
+`;
+
+	const res = await fetch("https://openrouter.ai/api/v1/chat/completions", {
+		method: "POST",
+		headers: {
+			Authorization: `Bearer ${process.env.OPENROUTER_API_KEY}`,
+			"Content-Type": "application/json",
+		},
+		body: JSON.stringify({
+			model: "openai/gpt-4.1-nano",
+			messages: [
+				{ role: "system", content: systemPrompt },
+				{ role: "user", content: prompt },
+			],
+		}),
+	});
+
+	const data = await res.json();
+	try {
+		const content = data.choices[0].message.content;
+		const parsed = JSON.parse(content);
+		return NextResponse.json(parsed);
+	} catch (e) {
+		return NextResponse.json(
+			{ error: "Failed to parse AI output", raw: data },
+			{ status: 500 },
+		);
+	}
+}

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

@@ -0,0 +1,46 @@
+import { NextResponse } from "next/server";
+import type { CalendarEvent } from "@/lib/types";
+
+export async function POST(request: Request) {
+	try {
+		const { events } = await request.json();
+
+		if (!events || !Array.isArray(events)) {
+			return NextResponse.json(
+				{ error: "Invalid events array" },
+				{ status: 400 },
+			);
+		}
+
+		const res = await fetch("https://openrouter.ai/api/v1/chat/completions", {
+			method: "POST",
+			headers: {
+				Authorization: `Bearer ${process.env.OPENROUTER_API_KEY}`, // Server-side only
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify({
+				model: "@preset/i-cal-editor-summarize", // FREE model
+				messages: [
+					{
+						role: "system",
+						content: `You summarize a list of events in natural language. Include date, time, and title. Be concise.`,
+					},
+					{ role: "user", content: JSON.stringify(events) },
+				],
+				temperature: 0.4,
+				// max_tokens: 300,
+			}),
+		});
+
+		const data = await res.json();
+		const summary =
+			data?.choices?.[0]?.message?.content || "No summary generated.";
+		return NextResponse.json({ summary });
+	} catch (error) {
+		console.error(error);
+		return NextResponse.json(
+			{ error: "Failed to summarize events" },
+			{ status: 500 },
+		);
+	}
+}

src/app/page.tsx

@@ -1,51 +1,333 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { nanoid } from 'nanoid'
 import { Button } from '@/components/ui/button'
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
-import { nanoid } from 'nanoid'
+import { Card } from '@/components/ui/card'
+import { RecurrencePicker } from '@/components/recurrence-picker'
 
-type Event = {
-  id: string
-  title: string
-  start: string
-  end?: string
-}
+import { addEvent, deleteEvent, getAllEvents, clearEvents, getDB } from '@/lib/db'
+import { parseICS, generateICS } from '@/lib/ical'
+import type { CalendarEvent } from '@/lib/types'
 
 export default function HomePage() {
-  const [events, setEvents] = useState<Event[]>([])
-  const [open, setOpen] = useState(false)
-  const [title, setTitle] = useState('')
-  const [start, setStart] = useState('')
+  const [events, setEvents] = useState<CalendarEvent[]>([])
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [isDragOver, setIsDragOver] = useState(false)
 
-  const addEvent = () => {
-    setEvents([...events, { id: nanoid(), title, start }])
+  // Form fields
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [location, setLocation] = useState('')
+  const [url, setUrl] = useState('')
+  const [start, setStart] = useState('')
+  const [end, setEnd] = useState('')
+  const [allDay, setAllDay] = useState(false)
+  const [recurrenceRule, setRecurrenceRule] = useState<string | undefined>(undefined)
+
+  // AI
+  const [aiPrompt, setAiPrompt] = useState('')
+  const [aiLoading, setAiLoading] = useState(false)
+  const [summary, setSummary] = useState<string | null>(null)
+  const [summaryUpdated, setSummaryUpdated] = useState<string | null>(null)
+
+  useEffect(() => {
+    (async () => {
+      const stored = await getAllEvents()
+      setEvents(stored)
+    })()
+  }, [])
+
+  const resetForm = () => {
     setTitle('')
+    setDescription('')
+    setLocation('')
+    setUrl('')
     setStart('')
-    setOpen(false)
+    setEnd('')
+    setAllDay(false)
+    setEditingId(null)
+  }
+
+  const handleSave = async () => {
+    const eventData: CalendarEvent = {
+      id: editingId || nanoid(),
+      title,
+      description,
+      location,
+      url,
+      recurrenceRule,
+      start,
+      end: end || undefined,
+      allDay,
+      createdAt: editingId
+        ? events.find(e => e.id === editingId)?.createdAt
+        : new Date().toISOString(),
+      lastModified: new Date().toISOString(),
+    }
+    if (editingId) {
+      const db = await getDB()
+      if (db) {
+        await db.put('events', eventData)
+        setEvents(prev => prev.map(e => (e.id === editingId ? eventData : e)))
+      }
+    } else {
+      await addEvent(eventData)
+      setEvents(prev => [...prev, eventData])
+    }
+    resetForm()
+    setDialogOpen(false)
+  }
+
+  const handleDelete = async (id: string) => {
+    await deleteEvent(id)
+    setEvents(prev => prev.filter(e => e.id !== id))
+  }
+
+  const handleClearAll = async () => {
+    await clearEvents()
+    setEvents([])
+  }
+
+  const handleImport = async (file: File) => {
+    const text = await file.text()
+    const parsed = parseICS(text)
+    for (const ev of parsed) {
+      await addEvent(ev)
+    }
+    const stored = await getAllEvents()
+    setEvents(stored)
+  }
+
+  const handleExport = () => {
+    const icsData = generateICS(events)
+    const blob = new Blob([icsData], { type: 'text/calendar' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `icallocal-export-${new Date().toLocaleTimeString()}.ics`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    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 {
+        alert('Please drop an .ics file')
+      }
+    }
+  }
+
+  // AI Create Event
+  const handleAiCreate = async () => {
+    if (!aiPrompt.trim()) return
+    setAiLoading(true)
+    try {
+      const res = await fetch('/api/ai-event', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: aiPrompt })
+      })
+      const data = await res.json()
+
+      if (Array.isArray(data) && data.length > 0) {
+        if (data.length === 1) {
+          // Prefill dialog directly (same as before)
+          const ev = data[0]
+          setTitle(ev.title || '')
+          setDescription(ev.description || '')
+          setLocation(ev.location || '')
+          setUrl(ev.url || '')
+          setStart(ev.start || '')
+          setEnd(ev.end || '')
+          setAllDay(ev.allDay || false)
+          setEditingId(null)
+          setDialogOpen(true)
+          setRecurrenceRule(ev.recurrenceRule || undefined)
+        } else {
+          // Save them all directly to DB
+          for (const ev of data) {
+            const newEvent = {
+              id: nanoid(),
+              ...ev,
+              createdAt: new Date().toISOString(),
+              lastModified: new Date().toISOString(),
+            }
+            await addEvent(newEvent)
+          }
+          const stored = await getAllEvents()
+          setEvents(stored)
+          setSummary(`Added ${data.length} AI-generated events.`)
+          setSummaryUpdated(new Date().toLocaleString())
+        }
+      } else {
+        alert('AI did not return event data.')
+      }
+    } catch (err) {
+      console.error(err)
+      alert('Error from AI service.')
+    } finally {
+      setAiLoading(false)
+    }
+  }
+
+  // AI Summarize Events
+  const handleAiSummarize = async () => {
+    if (!events.length) {
+      setSummary("No events to summarize.")
+      setSummaryUpdated(new Date().toLocaleString())
+      return
+    }
+    setAiLoading(true)
+    try {
+      const res = await fetch('/api/ai-summary', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ events })
+      })
+      const data = await res.json()
+      if (data.summary) {
+        setSummary(data.summary)
+        setSummaryUpdated(new Date().toLocaleString())
+      } else {
+        setSummary("No summary generated.")
+        setSummaryUpdated(new Date().toLocaleString())
+      }
+    } catch {
+      setSummary("Error summarizing events")
+      setSummaryUpdated(new Date().toLocaleString())
+    } finally {
+      setAiLoading(false)
+    }
   }
 
   return (
-    <div>
-      <Button onClick={() => setOpen(true)}>Add Event</Button>
-      <ul className="mt-4 space-y-2">
+    <div onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop}
+      className={`p-4 min-h-[80vh] rounded border-2 border-dashed transition ${isDragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-300'
+        }`}
+    >
+      {/* AI Toolbar */}
+      <div className="flex flex-wrap gap-2 mb-4 items-center">
+        <Input
+          className="flex-1"
+          placeholder='Describe event for AI to create'
+          value={aiPrompt}
+          onChange={e => setAiPrompt(e.target.value)}
+        />
+        <Button onClick={handleAiCreate} disabled={aiLoading}>
+          {aiLoading ? 'Thinking...' : 'AI Create'}
+        </Button>
+        <Button variant="secondary" onClick={handleAiSummarize} disabled={aiLoading}>
+          {aiLoading ? 'Summarizing...' : 'AI Summarize'}
+        </Button>
+      </div>
+
+      {/* Summary Panel */}
+      {summary && (
+        <Card className="p-4 mb-4 bg-gray-50 border border-gray-200">
+          <div className="text-sm text-gray-500 mb-1">
+            Summary updated {summaryUpdated}
+          </div>
+          <div>{summary}</div>
+        </Card>
+      )}
+
+      {/* Control Toolbar */}
+      <div className="flex flex-wrap gap-2 mb-4">
+        <Button onClick={() => setDialogOpen(true)}>Add Event</Button>
+        {events.length > 0 && (
+          <>
+            <Button variant="secondary" onClick={handleExport}>Export .ics</Button>
+            <Button variant="destructive" onClick={handleClearAll}>Clear All</Button>
+          </>
+        )}
+        <label className="cursor-pointer">
+          <span className="px-3 py-2 bg-blue-500 text-white rounded">Import .ics</span>
+          <input type="file" accept=".ics" hidden onChange={e => {
+            if (e.target.files?.length) handleImport(e.target.files[0])
+          }} />
+        </label>
+      </div>
+
+      {/* Event List */}
+      {events.length === 0 && <p className="text-gray-500 italic">No events yet</p>}
+      <ul className="space-y-2">
         {events.map(ev => (
-          <li key={ev.id} className="border p-2 rounded bg-white shadow-sm">
-            <strong>{ev.title}</strong> — {ev.start}
+          <li key={ev.id} className="p-3 border rounded flex justify-between items-start">
+            <div>
+              <div className="font-semibold">{ev.title}</div>
+              {ev.recurrenceRule && (
+                <div className="text-xs text-blue-600 mt-1">
+                  Repeats: {ev.recurrenceRule}
+                </div>
+              )}
+              <div className="text-sm text-gray-500">
+                {ev.allDay ? ev.start.split('T')[0] : new Date(ev.start).toLocaleString()}
+                {ev.location && <span> @ {ev.location}</span>}
+              </div>
+              {ev.description && <div className="text-sm mt-1">{ev.description}</div>}
+            </div>
+            <div className="flex gap-2">
+              <Button size="sm" onClick={() => {
+                setTitle(ev.title)
+                setDescription(ev.description || '')
+                setLocation(ev.location || '')
+                setUrl(ev.url || '')
+                setStart(ev.start)
+                setEnd(ev.end || '')
+                setAllDay(ev.allDay || false)
+                setEditingId(ev.id)
+                setDialogOpen(true)
+              }}>Edit</Button>
+              <Button variant="secondary" size="sm" onClick={() => handleDelete(ev.id)}>Delete</Button>
+            </div>
           </li>
         ))}
       </ul>
 
-      <Dialog open={open} onOpenChange={setOpen}>
+      {/* Add/Edit Dialog */}
+      <Dialog open={dialogOpen} onOpenChange={val => { if (!val) resetForm(); setDialogOpen(val) }}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Add Event</DialogTitle>
+            <DialogTitle>{editingId ? 'Edit Event' : 'Add Event'}</DialogTitle>
           </DialogHeader>
           <Input placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
-          <Input type="date" value={start} onChange={e => setStart(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={addEvent}>Save</Button>
+            <Button onClick={handleSave}>{editingId ? 'Update' : 'Save'}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>

src/components/recurrence-picker.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import { useState } from 'react'
+import { Input } from '@/components/ui/input'
+
+type Recurrence = {
+  freq: 'NONE' | 'DAILY' | 'WEEKLY' | 'MONTHLY'
+  interval: number
+  byDay?: string[]
+  count?: number
+  until?: string
+}
+
+interface Props {
+  value?: string
+  onChange: (rrule: string | undefined) => void
+}
+
+export function RecurrencePicker({ value, onChange }: Props) {
+  const [rec, setRec] = useState<Recurrence>(() => {
+    // If existing rrule, parse minimally (for simplicity we only rehydrate FREQ and INTERVAL)
+    if (value) {
+      const parts = Object.fromEntries(
+        value.split(';').map(p => p.split('='))
+      )
+      return {
+        freq: (parts.FREQ as any) || 'NONE',
+        interval: parts.INTERVAL ? parseInt(parts.INTERVAL, 10) : 1,
+        byDay: parts.BYDAY ? parts.BYDAY.split(',') : [],
+        count: parts.COUNT ? parseInt(parts.COUNT, 10) : undefined,
+        until: parts.UNTIL
+      }
+    }
+    return { freq: 'NONE', interval: 1 }
+  })
+
+  const update = (updates: Partial<Recurrence>) => {
+    const newRec = { ...rec, ...updates }
+    setRec(newRec)
+
+    if (newRec.freq === 'NONE') {
+      onChange(undefined)
+      return
+    }
+
+    // Build RRULE string
+    let rrule = `FREQ=${newRec.freq};INTERVAL=${newRec.interval}`
+    if (newRec.freq === 'WEEKLY' && newRec.byDay?.length) {
+      rrule += `;BYDAY=${newRec.byDay.join(',')}`
+    }
+    if (newRec.count) rrule += `;COUNT=${newRec.count}`
+    if (newRec.until) rrule += `;UNTIL=${newRec.until.replace(/-/g, '')}T000000Z`
+
+    onChange(rrule)
+  }
+
+  const toggleDay = (day: string) => {
+    const byDay = rec.byDay || []
+    const newByDay = byDay.includes(day)
+      ? byDay.filter(d => d !== day)
+      : [...byDay, day]
+    update({ byDay: newByDay })
+  }
+
+  return (
+    <div className="space-y-2 border rounded p-2 mt-2 bg-gray-50">
+      <label className="block font-semibold text-sm">Repeats</label>
+      <select
+        className="border p-1 rounded w-full"
+        value={rec.freq}
+        onChange={e => update({ freq: e.target.value as any })}
+      >
+        <option value="NONE">Does not repeat</option>
+        <option value="DAILY">Daily</option>
+        <option value="WEEKLY">Weekly</option>
+        <option value="MONTHLY">Monthly</option>
+      </select>
+
+      {rec.freq !== 'NONE' && (
+        <>
+          <label className="block text-sm">
+            Interval (every N {rec.freq === 'DAILY' ? 'days' : rec.freq === 'WEEKLY' ? 'weeks' : 'months'})
+          </label>
+          <Input
+            type="number"
+            min={1}
+            value={rec.interval}
+            onChange={e => update({ interval: parseInt(e.target.value, 10) || 1 })}
+          />
+
+          {rec.freq === 'WEEKLY' && (
+            <div className="flex gap-2 mt-2">
+              {['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'].map(day => (
+                <label key={day} className="flex items-center gap-1">
+                  <input
+                    type="checkbox"
+                    checked={rec.byDay?.includes(day)}
+                    onChange={() => toggleDay(day)}
+                  />
+                  {day}
+                </label>
+              ))}
+            </div>
+          )}
+
+          <div className="flex gap-2 mt-2">
+            <div>
+              <label className="text-sm">End after count</label>
+              <Input
+                type="number"
+                placeholder="e.g. 10"
+                value={rec.count || ''}
+                onChange={e => update({ count: e.target.value ? parseInt(e.target.value, 10) : undefined })}
+              />
+            </div>
+            <div>
+              <label className="text-sm">End by date</label>
+              <Input
+                type="date"
+                value={rec.until || ''}
+                onChange={e => update({ until: e.target.value || undefined })}
+              />
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

src/lib/db.ts

@@ -1,7 +1,55 @@
-import { openDB } from "idb";
+import { openDB, DBSchema, IDBPDatabase } from "idb";
+import { type CalendarEvent } from "./types";
 
-export const dbPromise = openDB("icalPWA", 1, {
-	upgrade(db) {
-		db.createObjectStore("events", { keyPath: "id" });
-	},
-});
+interface ICalDB extends DBSchema {
+	events: {
+		key: string;
+		value: CalendarEvent;
+	};
+}
+
+let dbPromise: Promise<IDBPDatabase<ICalDB>> | null = null;
+
+async function initDB() {
+	return openDB<ICalDB>("icalPWA", 1, {
+		upgrade(db) {
+			if (!db.objectStoreNames.contains("events")) {
+				db.createObjectStore("events", { keyPath: "id" });
+			}
+		},
+	});
+}
+
+// Get the database in a browser-safe way
+export async function getDB() {
+	if (typeof window === "undefined") return null;
+	if (!dbPromise) {
+		dbPromise = initDB();
+	}
+	return dbPromise;
+}
+
+// CRUD operations — all SSR-safe
+export async function getAllEvents() {
+	const db = await getDB();
+	if (!db) return [];
+	return db.getAll("events");
+}
+
+export async function addEvent(event: ICalDB["events"]["value"]) {
+	const db = await getDB();
+	if (!db) return;
+	return db.put("events", event);
+}
+
+export async function deleteEvent(id: string) {
+	const db = await getDB();
+	if (!db) return;
+	return db.delete("events", id);
+}
+
+export async function clearEvents() {
+	const db = await getDB();
+	if (!db) return;
+	return db.clear("events");
+}

src/lib/ical.ts

@@ -0,0 +1,100 @@
+import ICAL from "ical.js";
+import type { CalendarEvent } from "@/lib/types";
+
+export function parseICS(icsString: string): CalendarEvent[] {
+	const jcalData = ICAL.parse(icsString);
+	const comp = new ICAL.Component(jcalData);
+	const vevents = comp.getAllSubcomponents("vevent");
+
+	return vevents.map((v) => {
+		const ev = new ICAL.Event(v);
+		const isAllDay = ev.startDate.isDate;
+
+		return {
+			id: ev.uid || crypto.randomUUID(),
+			title: ev.summary || "Untitled Event",
+			description: ev.description || "",
+			location: ev.location || "",
+			url: v.getFirstPropertyValue("url") || undefined,
+			start: ev.startDate.toJSDate().toISOString(),
+			end: ev.endDate ? ev.endDate.toJSDate().toISOString() : undefined,
+			allDay: isAllDay,
+			createdAt: v.getFirstPropertyValue("dtstamp")
+				? (v.getFirstPropertyValue("dtstamp") as ICAL.Time)
+						.toJSDate()
+						.toISOString()
+				: undefined,
+			lastModified: v.getFirstPropertyValue("last-modified")
+				? (v.getFirstPropertyValue("last-modified") as ICAL.Time)
+						.toJSDate()
+						.toISOString()
+				: undefined,
+			recurrenceRule: v.getFirstPropertyValue("rrule")
+				? (v.getFirstPropertyValue("rrule") as ICAL.Recur).toString()
+				: undefined,
+		};
+	});
+}
+
+export function generateICS(events: CalendarEvent[]): string {
+	const comp = new ICAL.Component(["vcalendar", [], []]);
+	comp.addPropertyWithValue("version", "2.0");
+	comp.addPropertyWithValue("prodid", "-//iCalPWA//EN");
+
+	events.forEach((ev) => {
+		const vevent = new ICAL.Component("vevent");
+		vevent.addPropertyWithValue("uid", ev.id);
+		vevent.addPropertyWithValue("summary", ev.title);
+		if (ev.description)
+			vevent.addPropertyWithValue("description", ev.description);
+		if (ev.location) vevent.addPropertyWithValue("location", ev.location);
+		if (ev.url) vevent.addPropertyWithValue("url", ev.url);
+
+		// Start/End
+		if (ev.allDay) {
+			vevent.addPropertyWithValue(
+				"dtstart",
+				ICAL.Time.fromDateString(ev.start.split("T")[0]),
+			);
+			if (ev.end)
+				vevent.addPropertyWithValue(
+					"dtend",
+					ICAL.Time.fromDateString(ev.end.split("T")[0]),
+				);
+		} else {
+			vevent.addPropertyWithValue(
+				"dtstart",
+				ICAL.Time.fromJSDate(new Date(ev.start)),
+			);
+			if (ev.end)
+				vevent.addPropertyWithValue(
+					"dtend",
+					ICAL.Time.fromJSDate(new Date(ev.end)),
+				);
+		}
+
+		// Timestamps
+		vevent.addPropertyWithValue(
+			"dtstamp",
+			ICAL.Time.fromJSDate(ev.createdAt ? new Date(ev.createdAt) : new Date()),
+		);
+		if (ev.lastModified) {
+			vevent.addPropertyWithValue(
+				"last-modified",
+				ICAL.Time.fromJSDate(new Date(ev.lastModified)),
+			);
+		}
+
+		// Recurrence
+		if (ev.recurrenceRule) {
+			vevent.addPropertyWithValue(
+				"rrule",
+				ICAL.Recur.fromString(ev.recurrenceRule),
+			);
+		}
+
+		comp.addSubcomponent(vevent);
+	});
+
+	return comp.toString();
+}

src/lib/types.ts

@@ -0,0 +1,14 @@
+export type CalendarEvent = {
+	id: string;
+	title: string;
+	description?: string;
+	location?: string;
+	url?: string;
+	start: string;
+	end?: string;
+	allDay?: boolean;
+	createdAt?: string;
+	lastModified?: string;
+
+	recurrenceRule?: string;
+};