feat(ui): enhance UI with animations, dark mode support and and improved components

- Add framer-motion page transitions and AnimatePresence support
- Add dark mode support across all components
- Create reusable UI components (Button, Badge, Card, EmptyState, Input, Toast, Skeleton)
- Add CSS custom properties for consistent theming
- Add animation variants and utility functions
- Improve ChatArea, Sidebar, TriggersPanel with animations

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

desktop/src/components/ui/Skeleton.tsx

@@ -0,0 +1,42 @@
+import { cn } from '../../lib/utils';
+
+interface SkeletonProps {
+  className?: string;
+}
+
+export function Skeleton({ className }: SkeletonProps) {
+  return (
+    <div
+      className={cn(
+        'animate-pulse bg-gray-200 dark:bg-gray-700 rounded',
+        className
+      )}
+    />
+  );
+}
+
+export function CardSkeleton() {
+  return (
+    <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
+      <Skeleton className="h-4 w-24 mb-3" />
+      <Skeleton className="h-3 w-full mb-2" />
+      <Skeleton className="h-3 w-3/4" />
+    </div>
+  );
+}
+
+export function ListSkeleton({ count = 3 }: { count?: number }) {
+  return (
+    <div className="space-y-2">
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="flex items-center gap-3 p-2">
+          <Skeleton className="w-8 h-8 rounded-full" />
+          <div className="flex-1">
+            <Skeleton className="h-3 w-24 mb-1" />
+            <Skeleton className="h-2 w-32" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}