Add global animation system and entrance effects to UI

src/components/data/data-table.tsx

@@ -361,7 +361,7 @@ export function DataTable<TData, TValue>({
                     key={row.id}
                     data-state={row.getIsSelected() && "selected"}
                     className={cn(
-                      "hover:bg-muted/20 data-[state=selected]:bg-muted/50 border-border/40 border-b transition-colors",
+                      "hover:bg-muted/20 data-[state=selected]:bg-muted/50 border-border/40 table-row border-b transition-colors",
                       onRowClick && "cursor-pointer",
                     )}
                     onClick={(event) =>

src/components/data/status-badge.tsx

@@ -51,7 +51,15 @@ export function StatusBadge({
   const label = children ?? statusLabelMap[status];
 
   return (
-    <Badge className={cn(statusClass, className)} {...props}>
+    <Badge
+      className={cn(
+        statusClass,
+        "transition-all duration-200 hover:scale-105",
+        status === "sent" && "animate-pulse",
+        className,
+      )}
+      {...props}
+    >
       {label}
     </Badge>
   );