From c1acfe8b8540cfb5f2e77b886eceecab0ec50f36 Mon Sep 17 00:00:00 2001
From: enricobuehler <buehler@unom.io>
Date: Sun, 5 Jul 2026 15:18:24 +0000
Subject: [PATCH] fix(web): preset cards use the design-system animated Card
 (motion + material)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The preset options were raw <button>s — flat, no motion/material — unlike the rest of
the console. They now render as the `interactive` AnimatedCard (motion hover + specular
material, consistent with every other card), keyboard-accessible (role=button + Enter/
Space), with a 2px primary ring for the active one and a proper disabled state for
gaming-rig.

web tsc + vite build + biome-lint green; deployed on .21.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web/src/sections/Displays/DisplayCard.tsx | 37 +++++++++++++++--------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/web/src/sections/Displays/DisplayCard.tsx b/web/src/sections/Displays/DisplayCard.tsx
index d137441..b6777e9 100644
--- a/web/src/sections/Displays/DisplayCard.tsx
+++ b/web/src/sections/Displays/DisplayCard.tsx
@@ -27,6 +27,7 @@ import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
 import { m } from "@/paraglide/messages";
 
 /**
@@ -162,20 +163,30 @@ const DisplayForm: FC<{
 						const summary = id === "custom" ? m.display_custom_desc() : p?.summary;
 						const selected = preset === id;
 						const soon = DISABLED_PRESETS.has(id);
-						const cls = [
-							"flex h-full flex-col rounded-lg border p-4 text-left transition-colors",
-							selected
-								? "border-primary ring-1 ring-primary"
-								: "hover:border-primary/40 hover:bg-muted/50",
-							soon ? "opacity-60" : "",
-						].join(" ");
+						const disabled = busy || soon;
+						const pick = () => {
+							if (!disabled) pickPreset(id);
+						};
 						return (
-							<button
+							<Card
 								key={id}
-								type="button"
-								disabled={busy || soon}
-								onClick={() => pickPreset(id)}
-								className={cls}
+								interactive
+								role="button"
+								tabIndex={disabled ? -1 : 0}
+								aria-pressed={selected}
+								aria-disabled={disabled || undefined}
+								onClick={pick}
+								onKeyDown={(e) => {
+									if (e.key === "Enter" || e.key === " ") {
+										e.preventDefault();
+										pick();
+									}
+								}}
+								className={cn(
+									"flex h-full flex-col p-4",
+									disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer",
+									selected && "ring-2 ring-primary",
+								)}
 							>
 								<div className="flex items-center justify-between gap-2">
 									<span className="text-base font-semibold">
@@ -201,7 +212,7 @@ const DisplayForm: FC<{
 										<Badge variant="outline">{tr(IDENTITY_LABEL, fields.identity)}</Badge>
 									</div>
 								)}
-							</button>
+							</Card>
 						);
 					})}
 				</div>