feat(web): refresh simulator dashboard UI

WebApp/src/lib/components/ui/card/card.svelte

@@ -1,21 +1,51 @@
-<script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+<script lang="ts" module>
 	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
 
+	export const cardVariants = tv({
+		base: "bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				glass: "bg-glass-background border-glass-border border ring-0 backdrop-blur-xl shadow-2xl",
+			},
+			size: {
+				default: "gap-4 py-4 data-[size=sm]:gap-3 data-[size=sm]:py-3",
+				sm: "gap-3 py-3",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type CardVariant = VariantProps<typeof cardVariants>["variant"];
+	export type CardSize = VariantProps<typeof cardVariants>["size"];
+
+	export type CardProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: CardVariant;
+		size?: CardSize;
+	};
+</script>
+
+<script lang="ts">
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
+		variant = "default",
 		size = "default",
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: "default" | "sm" } = $props();
+	}: CardProps = $props();
 </script>
 
 <div
 	bind:this={ref}
 	data-slot="card"
 	data-size={size}
-	class={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
+	class={cn(cardVariants({ variant, size }), className)}
 	{...restProps}
 >
 	{@render children?.()}