feat: Add button active state and dashboard card animations

- Add active:scale-95 to all buttons for tactile click feedback
- Add hover border effect to dashboard cards (150ms transition)
- Add pulse animation to dashboard loading states
- Pure CSS transitions with zero JavaScript overhead
- Improves enterprise-level feel of UI

src/components/ui/button.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive active:scale-95",
   {
     variants: {
       variant: {

src/ui/desktop/apps/dashboard/Dashboard.tsx

@@ -529,7 +529,7 @@ export function Dashboard({
                     </div>
                   </div>
                 </div>
-                <div className="flex-1 border-2 border-dark-border rounded-md bg-dark-bg-darker flex flex-col overflow-hidden">
+                <div className="flex-1 border-2 border-dark-border rounded-md bg-dark-bg-darker flex flex-col overflow-hidden transition-all duration-150 hover:border-primary/20">
                   <div className="flex flex-col mx-3 my-2 flex-1 overflow-hidden">
                     <div className="flex flex-row items-center justify-between mb-3 mt-1">
                       <p className="text-xl font-semibold flex flex-row items-center">
@@ -549,7 +549,7 @@ export function Dashboard({
                       className={`grid gap-4 grid-cols-[repeat(auto-fit,minmax(200px,1fr))] auto-rows-min overflow-x-hidden ${recentActivityLoading ? "overflow-y-hidden" : "overflow-y-auto"}`}
                     >
                       {recentActivityLoading ? (
-                        <div className="flex flex-row items-center text-muted-foreground text-sm">
+                        <div className="flex flex-row items-center text-muted-foreground text-sm animate-pulse">
                           <Loader2 className="animate-spin mr-2" size={16} />
                           <span>{t("dashboard.loadingRecentActivity")}</span>
                         </div>
@@ -581,7 +581,7 @@ export function Dashboard({
                 </div>
               </div>
               <div className="flex flex-row flex-1 gap-4 min-h-0">
-                <div className="flex-1 border-2 border-dark-border rounded-md bg-dark-bg-darker flex flex-col overflow-hidden">
+                <div className="flex-1 border-2 border-dark-border rounded-md bg-dark-bg-darker flex flex-col overflow-hidden transition-all duration-150 hover:border-primary/20">
                   <div className="flex flex-col mx-3 my-2 overflow-y-auto overflow-x-hidden">
                     <p className="text-xl font-semibold mb-3 mt-1 flex flex-row items-center">
                       <FastForward className="mr-3" />
@@ -645,7 +645,7 @@ export function Dashboard({
                     </div>
                   </div>
                 </div>
-                <div className="flex-1 border-2 border-dark-border rounded-md bg-dark-bg-darker flex flex-col overflow-hidden">
+                <div className="flex-1 border-2 border-dark-border rounded-md bg-dark-bg-darker flex flex-col overflow-hidden transition-all duration-150 hover:border-primary/20">
                   <div className="flex flex-col mx-3 my-2 flex-1 overflow-hidden">
                     <p className="text-xl font-semibold mb-3 mt-1 flex flex-row items-center">
                       <ChartLine className="mr-3" />
@@ -655,7 +655,7 @@ export function Dashboard({
                       className={`grid gap-4 grid-cols-[repeat(auto-fit,minmax(200px,1fr))] auto-rows-min overflow-x-hidden ${serverStatsLoading ? "overflow-y-hidden" : "overflow-y-auto"}`}
                     >
                       {serverStatsLoading ? (
-                        <div className="flex flex-row items-center text-muted-foreground text-sm">
+                        <div className="flex flex-row items-center text-muted-foreground text-sm animate-pulse">
                           <Loader2 className="animate-spin mr-2" size={16} />
                           <span>{t("dashboard.loadingServerStats")}</span>
                         </div>