From 996ce37a1935e58187cb332e8e3607d86e5e37a2 Mon Sep 17 00:00:00 2001
From: Jason Staack <jason@staack.com>
Date: Sat, 21 Mar 2026 13:42:54 -0500
Subject: [PATCH] feat(ui): add list-item-interactive class, update table row
 hover

- Add .list-item-interactive CSS class: 2px left border on hover/focus,
  bg-elevated on active press, 50ms transitions
- FleetTable: update hover to bg-elevated/30 with 50ms transition
- Class available for div-based list rows (alerts, events, nav items)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/fleet/FleetTable.tsx |  6 +++---
 frontend/src/index.css                       | 16 ++++++++++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/fleet/FleetTable.tsx b/frontend/src/components/fleet/FleetTable.tsx
index 04f6689..c36ce1e 100644
--- a/frontend/src/components/fleet/FleetTable.tsx
+++ b/frontend/src/components/fleet/FleetTable.tsx
@@ -92,7 +92,7 @@ function SortHeader({ column, label, currentSort, currentDir, onSort, className
 function DeviceCard({ device, tenantId }: { device: DeviceResponse; tenantId: string }) {
   return (
     <div
-      className="w-full text-left rounded-lg border border-border bg-panel p-3 hover:bg-elevated/50 transition-colors min-h-[44px]"
+      className="w-full text-left rounded-lg border border-border bg-panel p-3 hover:bg-elevated/30 transition-[background-color] duration-[50ms] min-h-[44px]"
       data-testid={`device-card-${device.hostname}`}
     >
       <div className="flex items-start justify-between gap-2">
@@ -402,7 +402,7 @@ export function FleetTable({
                             data-index={virtualRow.index}
                             ref={virtualizer.measureElement}
                             className={cn(
-                              'border-b border-border/50 hover:bg-elevated/50 transition-colors',
+                              'border-b border-border/50 hover:bg-elevated/30 transition-[background-color] duration-[50ms]',
                               selectedIndex === virtualRow.index && 'bg-elevated/50',
                             )}
                             style={{
@@ -460,7 +460,7 @@ export function FleetTable({
                       key={device.id}
                       data-testid={`device-row-${device.hostname}`}
                       className={cn(
-                        'border-b border-border/50 hover:bg-elevated/50 transition-colors',
+                        'border-b border-border/50 hover:bg-elevated/30 transition-[background-color] duration-[50ms]',
                         selectedIndex === idx && 'bg-elevated/50',
                       )}
                     >
diff --git a/frontend/src/index.css b/frontend/src/index.css
index e80f222..354272b 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -207,3 +207,19 @@
     font-variant-numeric: tabular-nums;
   }
 }
+
+/* ── Interaction classes ── */
+@layer components {
+  .list-item-interactive {
+    border-left: 2px solid transparent;
+    transition: border-color 50ms linear, background-color 50ms linear;
+  }
+  .list-item-interactive:hover,
+  .list-item-interactive:focus-visible {
+    border-left-color: hsl(var(--accent));
+    outline: none;
+  }
+  .list-item-interactive:active {
+    background-color: hsl(var(--elevated));
+  }
+}