feat: replace all vanilla HTML elements with shadcn components

- Install skeleton and tooltip shadcn components
- event-dialog: textarea → Textarea, duration chips → Button ghost
- date-time-picker: raw button trigger → Button outline, quick-date chips → Button ghost
- event-card: <a> URL link → Button link asChild
- sign-in: animate-pulse div → Skeleton
- ai-toolbar: animate-pulse div → Skeleton, event count span → Badge secondary
- event-actions-toolbar: event count span → Badge secondary

src/components/ai-toolbar.tsx

@@ -15,8 +15,10 @@ import {
 import Image from "next/image";
 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 { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Textarea } from "@/components/ui/textarea";
 import type { CalendarEvent } from "@/lib/types";
 
@@ -62,8 +64,8 @@ export const AIToolbar = ({
 }: AIToolbarProps) => {
 	if (isPending) {
 		return (
-			<div className="glass-card p-4 mb-6 animate-pulse">
-				<div className="h-10 bg-muted/50 rounded-lg" />
+			<div className="glass-card p-4 mb-6">
+				<Skeleton className="h-10 w-full rounded-lg" />
 			</div>
 		);
 	}
@@ -192,9 +194,9 @@ export const AIToolbar = ({
 
 					<div className="ml-auto flex items-center gap-3">
 						{events.length > 0 && (
-							<span className="text-xs text-muted-foreground">
+							<Badge variant="secondary" className="text-xs">
 								{events.length} event{events.length !== 1 ? "s" : ""}
-							</span>
+							</Badge>
 						)}
 						{isAuthenticated && (
 							<Button

src/components/date-time-picker.tsx

@@ -11,6 +11,7 @@ import {
 } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import * as React from "react";
+import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import {
 	Popover,
@@ -127,12 +128,11 @@ export function DateTimePicker({
 			{/* Date popover trigger */}
 			<Popover open={open} onOpenChange={setOpen}>
 				<PopoverTrigger asChild>
-					<button
+					<Button
 						type="button"
+						variant="outline"
 						className={cn(
-							"flex h-9 flex-1 items-center gap-2 rounded-md border border-input bg-transparent px-3 py-1 text-sm",
-							"ring-offset-background transition-colors",
-							"hover:bg-accent/30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+							"flex h-9 flex-1 items-center gap-2 px-3 py-1 text-sm font-normal justify-start",
 							!displayLabel && "text-muted-foreground",
 						)}
 					>
@@ -140,19 +140,21 @@ export function DateTimePicker({
 						<span className="flex-1 truncate text-left">
 							{displayLabel ?? placeholder}
 						</span>
-					</button>
+					</Button>
 				</PopoverTrigger>
 				<PopoverContent className="w-auto p-0" align="start" sideOffset={8}>
 					<div className="flex gap-1 border-b border-border px-3 py-2">
 						{quickOptions.map(({ label, date }) => (
-							<button
+							<Button
 								key={label}
 								type="button"
+								variant="ghost"
+								size="sm"
 								onClick={() => handleQuickSelect(date)}
-								className="rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+								className="h-auto rounded-md px-2 py-1 text-xs text-muted-foreground"
 							>
 								{label}
-							</button>
+							</Button>
 						))}
 					</div>
 					<Calendar

src/components/event-actions-toolbar.tsx

@@ -2,6 +2,7 @@
 
 import { CalendarPlus, Download, FileUp, Trash2 } from "lucide-react";
 import { IcsFilePicker } from "@/components/ics-file-picker";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import type { CalendarEvent } from "@/lib/types";
 
@@ -58,9 +59,9 @@ export const EventActionsToolbar = ({
 			)}
 
 			{events.length > 0 && (
-				<span className="text-xs text-muted-foreground ml-auto">
+				<Badge variant="secondary" className="text-xs ml-auto">
 					{events.length} event{events.length !== 1 ? "s" : ""}
-				</span>
+				</Badge>
 			)}
 		</div>
 	);

src/components/event-card.tsx

@@ -95,16 +95,22 @@ export const EventCard = ({ event, onEdit, onDelete }: EventCardProps) => {
 							)}
 
 							{event.url && (
-								<a
-									href={event.url}
-									target="_blank"
-									rel="noopener noreferrer"
-									className="inline-flex items-center gap-1 text-primary/70 hover:text-primary transition-colors"
-									onClick={(e) => e.stopPropagation()}
+								<Button
+									variant="link"
+									size="sm"
+									className="inline-flex items-center gap-1 h-auto p-0 text-xs text-primary/70 hover:text-primary"
+									asChild
 								>
-									<ExternalLink className="h-3 w-3" />
-									<span className="truncate max-w-[120px]">Link</span>
-								</a>
+									<a
+										href={event.url}
+										target="_blank"
+										rel="noopener noreferrer"
+										onClick={(e) => e.stopPropagation()}
+									>
+										<ExternalLink className="h-3 w-3" />
+										<span className="truncate max-w-[120px]">Link</span>
+									</a>
+								</Button>
 							)}
 						</div>
 

src/components/event-dialog.tsx

@@ -16,6 +16,7 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
 
 interface EventDialogProps {
 	open: boolean;
@@ -111,10 +112,10 @@ export const EventDialog = ({
 						className="font-medium"
 					/>
 
-					<textarea
+					<Textarea
 						id="event-description"
 						name="description"
-						className="flex field-sizing-content min-h-[60px] max-h-40 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-none"
+						className="field-sizing-content min-h-[60px] max-h-40 resize-none placeholder:text-muted-foreground/50"
 						placeholder="Add a description..."
 						value={description}
 						onChange={(e) => setDescription(e.target.value)}
@@ -170,15 +171,17 @@ export const EventDialog = ({
 						{!allDay && (
 							<div className="flex gap-1 pl-0.5">
 								{DURATIONS.map(({ label, minutes }) => (
-									<button
+									<Button
 										key={label}
 										type="button"
+										variant="ghost"
+										size="sm"
 										disabled={!start}
 										onClick={() => handleApplyDuration(minutes)}
-										className="rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-40"
+										className="h-auto rounded-md px-2 py-1 text-xs text-muted-foreground"
 									>
 										{label}
-									</button>
+									</Button>
 								))}
 							</div>
 						)}

src/components/sign-in.tsx

@@ -4,6 +4,7 @@ import { LogIn, LogOut } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import { signOut, useSession } from "@/lib/auth-client";
 
 export default function SignIn() {
@@ -20,7 +21,7 @@ export default function SignIn() {
 	};
 
 	if (isPending) {
-		return <div className="h-8 w-16 bg-muted animate-pulse rounded-md" />;
+		return <Skeleton className="h-8 w-16" />;
 	}
 
 	if (session?.user) {

src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="skeleton"
+			className={cn("animate-pulse rounded-md bg-accent", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Skeleton };

src/components/ui/tooltip.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+	delayDuration = 0,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+	return (
+		<TooltipPrimitive.Provider
+			data-slot="tooltip-provider"
+			delayDuration={delayDuration}
+			{...props}
+		/>
+	);
+}
+
+function Tooltip({
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+	className,
+	sideOffset = 0,
+	children,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				data-slot="tooltip-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	);
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };