feat(events-list): add AnimatePresence for list transitions and improve empty state

src/components/events-list.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
 import { Calendar1Icon } from "lucide-react";
 import type { CalendarEvent } from "@/lib/types";
 import { EventCard } from "./event-card";
@@ -11,20 +14,27 @@ interface EventsListProps {
 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">
+			<motion.div
-				<Calendar1Icon className="h-12 w-12 text-muted-foreground mb-4" />
+				initial={{ opacity: 0 }}
-				<h3 className="text-lg font-medium text-muted-foreground">
+				animate={{ opacity: 1 }}
+				className="flex flex-col items-center justify-center py-16 text-center"
+			>
+				<div className="glass-card p-6 inline-flex flex-col items-center">
+					<Calendar1Icon className="h-10 w-10 text-muted-foreground/40 mb-3" />
+					<h3 className="text-sm font-medium text-muted-foreground">
 						No events yet
 					</h3>
-				<p className="text-sm text-muted-foreground">
+					<p className="text-xs text-muted-foreground/60 mt-1">
 						Create your first event to get started
 					</p>
 				</div>
+			</motion.div>
 		);
 	}
 
 	return (
-		<div className="space-y-4">
+		<div className="space-y-2">
+			<AnimatePresence mode="popLayout">
 				{events.map((event) => (
 					<EventCard
 						key={event.id}
@@ -33,6 +43,7 @@ export const EventsList = ({ events, onEdit, onDelete }: EventsListProps) => {
 						onDelete={onDelete}
 					/>
 				))}
+			</AnimatePresence>
 		</div>
 	);
 };