feat: redesign local calendar workspace

src/app/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { CalendarDays, ListTodo, Settings, Wifi, WifiOff } from "lucide-react";
 import { nanoid } from "nanoid";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
@@ -7,6 +8,10 @@ import { AIToolbar } from "@/components/ai-toolbar";
 import { DragDropContainer } from "@/components/drag-drop-container";
 import { EventDialog } from "@/components/event-dialog";
 import { EventsList } from "@/components/events-list";
+import { IcsFilePicker } from "@/components/ics-file-picker";
+import { ModeToggle } from "@/components/mode-toggle";
+import SignIn from "@/components/sign-in";
+import { Button } from "@/components/ui/button";
 import { useSession } from "@/lib/auth-client";
 import { MAX_IMAGE_SIZE_BYTES } from "@/lib/constants";
 import {
@@ -41,6 +46,7 @@ export default function HomePage() {
 	const [editingId, setEditingId] = useState<string | null>(null);
 	const [dialogSource, setDialogSource] = useState<"manual" | "ai">("manual");
 	const [isDragOver, setIsDragOver] = useState(false);
+	const [isOnline, setIsOnline] = useState(true);
 
 	// Form fields
 	const [title, setTitle] = useState("");
@@ -75,6 +81,21 @@ export default function HomePage() {
 		})();
 	}, []);
 
+	useEffect(() => {
+		setIsOnline(window.navigator.onLine);
+
+		const handleOnline = () => setIsOnline(true);
+		const handleOffline = () => setIsOnline(false);
+
+		window.addEventListener("online", handleOnline);
+		window.addEventListener("offline", handleOffline);
+
+		return () => {
+			window.removeEventListener("online", handleOnline);
+			window.removeEventListener("offline", handleOffline);
+		};
+	}, []);
+
 	const { data: session, isPending } = useSession();
 
 	const resetForm = () => {
@@ -227,12 +248,27 @@ export default function HomePage() {
 		setEvents(stored);
 	};
 
-	const sendAiRequest = async (): Promise<CalendarEvent[]> => {
+	const runAiCreate = async (promptOverride?: string) => {
+		const nextPrompt = promptOverride?.trim() ?? aiPrompt.trim();
+		if (!nextPrompt && imageBase64s.length === 0) return;
+
+		if (promptOverride) {
+			setAiPrompt(nextPrompt);
+		}
+
+		setAiLoading(true);
+
+		const promise = async (): Promise<{ message: string }> => {
+			const originalPrompt = aiPrompt;
+			if (promptOverride) {
+				setAiPrompt(nextPrompt);
+			}
+
 			const res = await fetch("/api/ai-event", {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				body: JSON.stringify({
-				prompt: aiPrompt || undefined,
+					prompt: nextPrompt || undefined,
 					images: imageBase64s.length > 0 ? imageBase64s : undefined,
 				}),
 			});
@@ -247,16 +283,6 @@ export default function HomePage() {
 				throw new Error("AI did not return event data.");
 			}
 
-		return data;
-	};
-
-	const handleAiCreate = async () => {
-		if (!aiPrompt.trim() && imageBase64s.length === 0) return;
-		setAiLoading(true);
-
-		const promise = async (): Promise<{ message: string }> => {
-			const data = await sendAiRequest();
-
 			if (data.length === 1) {
 				populateEventForm(data[0]);
 				setDialogSource("ai");
@@ -271,6 +297,11 @@ export default function HomePage() {
 			setSummary(`Added ${data.length} AI-generated events.`);
 			setSummaryUpdated(new Date().toLocaleString());
 			handleImagesClear();
+			if (promptOverride) {
+				setAiPrompt("");
+			} else {
+				setAiPrompt(originalPrompt);
+			}
 			return { message: "Events have been created!" };
 		};
 
@@ -282,6 +313,10 @@ export default function HomePage() {
 		});
 	};
 
+	const handleAiCreate = async () => {
+		await runAiCreate();
+	};
+
 	// AI Summarize Events
 	const handleAiSummarize = async () => {
 		if (!events.length) {
@@ -333,6 +368,47 @@ export default function HomePage() {
 			onImport={handleImport}
 			onImageDrop={(file) => handleImagesSelect([file])}
 		>
+			<div className="mx-auto flex min-h-screen w-full max-w-3xl flex-col px-4 pb-24 pt-4 sm:px-6 lg:px-8">
+				<header className="mb-4 flex items-center justify-between rounded-2xl border border-border/70 bg-background/80 px-4 py-3 shadow-sm backdrop-blur-sm">
+					<div className="min-w-0">
+						<p className="text-xs font-medium uppercase tracking-[0.22em] text-muted-foreground">
+							Offline-first iCal editor
+						</p>
+						<h1 className="truncate text-lg font-semibold tracking-tight">
+							LocalCal
+						</h1>
+					</div>
+					<div className="flex items-center gap-2">
+						<div className="inline-flex items-center gap-1.5 rounded-full border border-border/70 bg-muted/50 px-2.5 py-1 text-xs text-muted-foreground">
+							{isOnline ? (
+								<Wifi className="h-3 w-3" />
+							) : (
+								<WifiOff className="h-3 w-3" />
+							)}
+							<span>{isOnline ? "Online ready" : "Offline mode"}</span>
+						</div>
+						<SignIn />
+						<ModeToggle />
+					</div>
+				</header>
+
+				<main className="flex-1 space-y-4">
+					<section className="rounded-[1.5rem] border border-border/70 bg-card/95 p-4 shadow-sm sm:p-5">
+						<div className="mb-4 flex items-start justify-between gap-3">
+							<div className="space-y-1">
+								<p className="text-xs font-semibold uppercase tracking-[0.22em] text-primary">
+									Create with AI
+								</p>
+								<h2 className="text-lg font-semibold tracking-tight">
+									Paste details. Generate draft. Review before saving.
+								</h2>
+								<p className="max-w-2xl text-sm leading-relaxed text-muted-foreground">
+									Type or paste a natural-language description, then generate a
+									draft event for review in the event modal.
+								</p>
+							</div>
+						</div>
+
 						<AIToolbar
 							isAuthenticated={!!session?.user}
 							isPending={isPending}
@@ -343,22 +419,117 @@ export default function HomePage() {
 							onImagesSelect={handleImagesSelect}
 							onImageRemove={handleImageRemove}
 							onAiCreate={handleAiCreate}
+							onAiTemplateSelect={runAiCreate}
 							onAiSummarize={handleAiSummarize}
 							onSummaryDismiss={() => setSummary(null)}
 							summary={summary}
 							summaryUpdated={summaryUpdated}
 							events={events}
-				onAddEvent={() => {
+						/>
+					</section>
+
+					<section className="rounded-[1.5rem] border border-border/70 bg-card/95 p-4 shadow-sm sm:p-5">
+						<div className="mb-4 flex items-center justify-between gap-3">
+							<div>
+								<p className="text-xs font-semibold uppercase tracking-[0.22em] text-muted-foreground">
+									Events
+								</p>
+								<h2 className="text-lg font-semibold tracking-tight">
+									Your local calendar timeline
+								</h2>
+							</div>
+							<div className="rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground">
+								{events.length} item{events.length === 1 ? "" : "s"}
+							</div>
+						</div>
+
+						<div className="mb-4 rounded-2xl border border-border/70 bg-muted/35 p-3">
+							<div className="flex flex-wrap items-center gap-2">
+								<IcsFilePicker
+									onFileSelect={handleImport}
+									variant="outline"
+									size="sm"
+									className="h-9 rounded-xl gap-1.5 text-xs"
+								>
+									Import
+								</IcsFilePicker>
+
+								{events.length > 0 && (
+									<>
+										<Button
+											type="button"
+											variant="outline"
+											size="sm"
+											onClick={handleExport}
+											className="h-9 rounded-xl gap-1.5 text-xs"
+										>
+											Export
+										</Button>
+
+										<Button
+											type="button"
+											variant="ghost"
+											size="sm"
+											onClick={handleClearAll}
+											className="h-9 rounded-xl gap-1.5 text-xs text-muted-foreground hover:text-destructive"
+										>
+											Clear
+										</Button>
+									</>
+								)}
+
+								<Button
+									type="button"
+									size="sm"
+									onClick={() => {
 										resetForm();
 										setDialogSource("manual");
 										setDialogOpen(true);
 									}}
-				onImport={handleImport}
-				onExport={handleExport}
-				onClearAll={handleClearAll}
-			/>
+									className="ml-auto h-9 rounded-xl gap-1.5 text-xs"
+								>
+									Manual event
+								</Button>
+							</div>
+						</div>
 
-			<EventsList events={events} onEdit={handleEdit} onDelete={handleDelete} />
+						<EventsList
+							events={events}
+							onEdit={handleEdit}
+							onDelete={handleDelete}
+						/>
+					</section>
+				</main>
+
+				<nav className="fixed inset-x-4 bottom-4 mx-auto flex max-w-3xl items-center justify-between rounded-2xl border border-border/70 bg-background/90 px-3 py-2 shadow-lg backdrop-blur-sm sm:inset-x-6 lg:inset-x-8">
+					<Button
+						type="button"
+						variant="ghost"
+						className="flex-1 gap-2 text-primary"
+					>
+						<CalendarDays className="h-4 w-4" />
+						List
+					</Button>
+					<Button
+						type="button"
+						variant="ghost"
+						className="flex-1 gap-2 text-muted-foreground"
+						disabled
+					>
+						<ListTodo className="h-4 w-4" />
+						Tasks
+					</Button>
+					<Button
+						type="button"
+						variant="ghost"
+						className="flex-1 gap-2 text-muted-foreground"
+						disabled
+					>
+						<Settings className="h-4 w-4" />
+						Settings
+					</Button>
+				</nav>
+			</div>
 
 			<EventDialog
 				open={dialogOpen}

src/components/ai-toolbar.tsx

@@ -1,24 +1,10 @@
 "use client";
 
 import { AnimatePresence, motion } from "framer-motion";
-import {
-	Bot,
-	CalendarPlus,
-	Download,
-	FileUp,
-	ImageIcon,
-	Info,
-	Loader2,
-	LogIn,
-	Sparkles,
-	Trash2,
-	X,
-} from "lucide-react";
+import { Bot, ImageIcon, Info, Loader2, Sparkles, X } from "lucide-react";
 import Image from "next/image";
 import { useEffect, useRef, useState } from "react";
-import { IcsFilePicker } from "@/components/ics-file-picker";
 import { ImagePicker } from "@/components/image-picker";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	HoverCard,
@@ -97,16 +83,12 @@ interface AIToolbarProps {
 	/** Remove the image at the given index from the list. */
 	onImageRemove: (index: number) => void;
 	onAiCreate: () => void;
+	onAiTemplateSelect: (prompt: string) => void;
 	onAiSummarize: () => void;
 	onSummaryDismiss: () => void;
 	summary: string | null;
 	summaryUpdated: string | null;
-	// event actions
 	events: CalendarEvent[];
-	onAddEvent: () => void;
-	onImport: (file: File) => void;
-	onExport: () => void;
-	onClearAll: () => void;
 }
 
 // ─── Component ────────────────────────────────────────────────────────────────
@@ -121,16 +103,19 @@ export const AIToolbar = ({
 	onImagesSelect,
 	onImageRemove,
 	onAiCreate,
+	onAiTemplateSelect,
 	onAiSummarize,
 	onSummaryDismiss,
 	summary,
 	summaryUpdated,
 	events,
-	onAddEvent,
-	onImport,
-	onExport,
-	onClearAll,
 }: AIToolbarProps) => {
+	const examplePrompts = [
+		"Lunch with Maya next Thursday at 12:30pm at Toma, remind me 30 minutes before.",
+		"Project sync tomorrow from 9am to 10am on Google Meet with a weekly repeat.",
+		"Dentist appointment on May 14 at 3pm at Smile Studio, add confirmation #A4821.",
+	];
+
 	// Ref to imperatively open the file picker from the keyboard shortcut
 	const imageTriggerRef = useRef<{ open: () => void }>(null);
 
@@ -262,9 +247,9 @@ export const AIToolbar = ({
 
 	if (isPending) {
 		return (
-			<div className="mb-6 space-y-2">
-				<Skeleton className="h-[90px] w-full rounded-lg" />
-				<Skeleton className="h-9 w-full rounded-lg" />
+			<div className="space-y-3">
+				<Skeleton className="h-[160px] w-full rounded-2xl" />
+				<Skeleton className="h-12 w-full rounded-2xl" />
 			</div>
 		);
 	}
@@ -272,38 +257,14 @@ export const AIToolbar = ({
 	const hasImages = imagePreviews.length > 0;
 
 	return (
-		<div className="mb-6 space-y-2">
-			{/* ── Zone 1: AI ───────────────────────────────────────────────────────── */}
-			<div className="rounded-lg border border-primary/20 bg-primary/5 p-3">
+		<div className="space-y-3">
 			{isAuthenticated ? (
-					/* ── Authenticated: full prompt composer ── */
-					<div className="space-y-2">
-						{/* Header */}
-						<div className="flex items-center gap-1.5">
-							<Sparkles className="h-3.5 w-3.5 text-primary shrink-0" />
-							<span className="text-xs font-semibold tracking-wide text-primary uppercase">
-								AI draft
-							</span>
-						</div>
-
-						<div className="space-y-1">
-							<label
-								htmlFor="ai-event-prompt"
-								className="text-sm font-medium text-foreground"
-							>
-								Describe or paste the event details
-							</label>
-							<p className="text-xs leading-relaxed text-muted-foreground">
-								Type or paste a natural-language description, then generate a
-								draft event for review in the event modal.
-							</p>
-						</div>
-
-						{/* Textarea */}
+				<div className="space-y-4">
+					<div className="rounded-2xl border border-border/70 bg-background/90 shadow-sm focus-within:ring-2 focus-within:ring-primary/30">
 						<Textarea
 							id="ai-event-prompt"
-							className="wrap-anywhere field-sizing-content resize-none w-full min-h-[2.5rem] max-h-48 overflow-y-auto bg-transparent border-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 px-3 py-1 text-sm placeholder:text-muted-foreground/60 placeholder:italic"
-							placeholder="Example: Lunch with Maya next Thursday at 12:30pm at Toma, remind me 30 minutes before."
+							className="wrap-anywhere field-sizing-content min-h-40 w-full resize-none rounded-none border-0 bg-transparent px-4 py-3 text-sm shadow-none placeholder:text-muted-foreground/50 focus-visible:ring-0 focus-visible:ring-offset-0"
+							placeholder="Type or paste event details…"
 							value={aiPrompt}
 							onChange={(e) => setAiPrompt(e.target.value)}
 							onKeyDown={(e) => {
@@ -342,8 +303,28 @@ export const AIToolbar = ({
 								}
 							}}
 						/>
+						<div className="sticky bottom-0 z-10 border-t border-border/60 bg-background/95 px-3 py-2 backdrop-blur supports-[backdrop-filter]:bg-background/80">
+							<div className="flex flex-wrap items-center gap-2">
+								<span className="text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">
+									Try:
+								</span>
+								{examplePrompts.map((prompt) => (
+									<Button
+										key={prompt}
+										type="button"
+										variant="secondary"
+										size="sm"
+										className="h-7 max-w-full rounded-full px-2.5 text-[11px]"
+										onClick={() => onAiTemplateSelect(prompt)}
+										disabled={aiLoading}
+									>
+										<span className="truncate">{prompt}</span>
+									</Button>
+								))}
+							</div>
+						</div>
+					</div>
 
-						{/* ── Multi-image thumbnail strip ── */}
 					<AnimatePresence>
 						{hasImages && (
 							<motion.div
@@ -387,13 +368,7 @@ export const AIToolbar = ({
 						)}
 					</AnimatePresence>
 
-						{/* ── Footer bar: Attach (left) · Info + Generate (right) ── */}
-						{/*
-						 * Layout contract: flex items-center justify-between gap-2
-						 * Attach aligns to the START (left), Info+Generate to the END (right).
-						 */}
 					<div className="flex items-center justify-between gap-2">
-							{/* LEFT: Attach image — labeled ghost button, multiple=true for native multi-select */}
 						<ImagePicker
 							onFilesSelect={onImagesSelect}
 							disabled={aiLoading}
@@ -407,10 +382,7 @@ export const AIToolbar = ({
 							Attach image
 						</ImagePicker>
 
-							{/* RIGHT: Info popover + Generate button */}
 						<div className="flex items-center gap-1.5">
-								{/* Info icon — HoverCard (transient preview) + Popover (pinned) */}
-								{/* Both use bg-popover surface → identical appearance, correct theming */}
 							<HoverCard
 								openDelay={300}
 								closeDelay={100}
@@ -422,7 +394,7 @@ export const AIToolbar = ({
 											<Button
 												variant="ghost"
 												size="icon"
-													className="hidden h-6 w-6 text-muted-foreground/50 hover:text-muted-foreground md:inline-flex"
+												className="hidden h-8 w-8 text-muted-foreground/70 hover:text-foreground md:inline-flex"
 												aria-label="Keyboard shortcuts"
 											>
 												<Info className="h-3.5 w-3.5" />
@@ -448,24 +420,22 @@ export const AIToolbar = ({
 								</HoverCardContent>
 							</HoverCard>
 
-								{/* Summarize — ghost, only visible when events exist */}
 							{events.length > 0 && (
 								<Button
 									variant="ghost"
 									size="sm"
 									onClick={onAiSummarize}
 									disabled={aiLoading}
-										className="h-7 gap-1.5 text-xs text-muted-foreground hover:text-primary px-2"
+									className="h-9 gap-1.5 rounded-xl px-3 text-xs text-muted-foreground hover:text-primary"
 								>
 									<Bot className="h-3 w-3" />
 									Summarize
 								</Button>
 							)}
 
-								{/* Generate — primary, labeled */}
 							<Button
 								size="sm"
-									className="h-7 gap-1.5 text-xs"
+								className="h-10 gap-1.5 rounded-xl px-4 text-xs"
 								onClick={onAiCreate}
 								disabled={aiLoading || (!aiPrompt.trim() && !hasImages)}
 							>
@@ -480,7 +450,6 @@ export const AIToolbar = ({
 					</div>
 				</div>
 			) : (
-					/* ── Unauthenticated: locked CTA ── */
 				<div className="flex items-center gap-3 py-2">
 					<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
 						<Sparkles className="h-4 w-4" />
@@ -494,74 +463,8 @@ export const AIToolbar = ({
 							before saving.
 						</p>
 					</div>
-						<Button
-							size="sm"
-							variant="outline"
-							className="shrink-0 gap-1.5 h-8 text-xs border-primary/30 text-primary hover:bg-primary/10 hover:text-primary"
-							asChild
-						>
-							<a href="/auth/signin">
-								<LogIn className="h-3.5 w-3.5" />
-								Sign in
-							</a>
-						</Button>
 				</div>
 			)}
-			</div>
-
-			{/* ── Zone 2: Data management ──────────────────────────────────────────── */}
-			<div className="glass-card px-3 py-2">
-				<div className="flex items-center gap-2 flex-wrap">
-					<Button
-						size="sm"
-						onClick={onAddEvent}
-						className="h-8 text-xs gap-1.5"
-					>
-						<CalendarPlus className="h-3.5 w-3.5" />
-						Add Event
-					</Button>
-
-					<IcsFilePicker
-						onFileSelect={onImport}
-						variant="outline"
-						size="sm"
-						className="h-8 text-xs gap-1.5"
-					>
-						<FileUp className="h-3.5 w-3.5" />
-						Import
-					</IcsFilePicker>
-
-					{events.length > 0 && (
-						<>
-							<Button
-								variant="outline"
-								size="sm"
-								onClick={onExport}
-								className="h-8 text-xs gap-1.5"
-							>
-								<Download className="h-3.5 w-3.5" />
-								Export
-							</Button>
-
-							<Button
-								variant="ghost"
-								size="sm"
-								onClick={onClearAll}
-								className="h-8 text-xs gap-1.5 text-muted-foreground hover:text-destructive"
-							>
-								<Trash2 className="h-3.5 w-3.5" />
-								Clear
-							</Button>
-						</>
-					)}
-
-					{events.length > 0 && (
-						<Badge variant="secondary" className="ml-auto text-xs tabular-nums">
-							{events.length} event{events.length !== 1 ? "s" : ""}
-						</Badge>
-					)}
-				</div>
-			</div>
 
 			{/* ── AI Summary panel ─────────────────────────────────────────────────── */}
 			<AnimatePresence>
@@ -573,7 +476,7 @@ export const AIToolbar = ({
 						transition={{ duration: 0.2, ease: "easeOut" }}
 						className="overflow-hidden"
 					>
-						<div className="rounded-lg border border-primary/15 bg-primary/5 p-3.5">
+						<div className="rounded-2xl border border-primary/15 bg-primary/5 p-3.5">
 							<div className="flex items-start justify-between gap-2 mb-2">
 								<div className="flex items-center gap-1.5">
 									<Bot className="h-3.5 w-3.5 text-primary shrink-0 mt-px" />