From 4f37321e2cc71535cf001beef5fe7461234cfd69 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Sat, 4 Apr 2026 16:49:24 -0400
Subject: [PATCH] Move ServerCard dimmed style to Card theme variant

Replaces inline style and opacity prop on ServerCard with a new
'disabled' variant on the Card theme, per AGENTS.md rules against
inline styles on components. Also picks up prettier formatting on
ResourcesScreen.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/groups/ServerCard/ServerCard.tsx |  3 +--
 .../screens/ResourcesScreen/ResourcesScreen.tsx | 12 +++---------
 clients/web/src/theme/Card.ts                   | 17 ++++++++++++++---
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/clients/web/src/components/groups/ServerCard/ServerCard.tsx b/clients/web/src/components/groups/ServerCard/ServerCard.tsx
index 9709633a..3bc7fc92 100644
--- a/clients/web/src/components/groups/ServerCard/ServerCard.tsx
+++ b/clients/web/src/components/groups/ServerCard/ServerCard.tsx
@@ -113,8 +113,7 @@ export function ServerCard({
     <Card
       withBorder
       padding="lg"
-      opacity={isDimmed ? 0.4 : 1}
-      style={isDimmed ? { pointerEvents: "none" } : undefined}
+      variant={isDimmed ? "disabled" : undefined}
       {...(isDimmed ? { "aria-disabled": true, inert: true } : {})}
     >
       <Stack gap="sm">
diff --git a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
index cefdd5cc..6cedd3d8 100644
--- a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
+++ b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
@@ -136,9 +136,7 @@ export function ResourcesScreen({
                 <ResourcePreviewPanel
                   {...selectedResource}
                   onRefresh={() => onReadResource(selectedResource.uri)}
-                  onSubscribe={() =>
-                    onSubscribeResource(selectedResource.uri)
-                  }
+                  onSubscribe={() => onSubscribeResource(selectedResource.uri)}
                   onUnsubscribe={() =>
                     onUnsubscribeResource(selectedResource.uri)
                   }
@@ -146,9 +144,7 @@ export function ResourcesScreen({
               </DetailCard>
             ) : (
               <DetailCard>
-                <EmptyState>
-                  Enter a URI and click Read to preview
-                </EmptyState>
+                <EmptyState>Enter a URI and click Read to preview</EmptyState>
               </DetailCard>
             )}
           </ScrollArea.Autosize>
@@ -163,9 +159,7 @@ export function ResourcesScreen({
               {...selectedResource}
               onRefresh={() => onReadResource(selectedResource.uri)}
               onSubscribe={() => onSubscribeResource(selectedResource.uri)}
-              onUnsubscribe={() =>
-                onUnsubscribeResource(selectedResource.uri)
-              }
+              onUnsubscribe={() => onUnsubscribeResource(selectedResource.uri)}
             />
           </DetailCard>
         </ScrollArea.Autosize>
diff --git a/clients/web/src/theme/Card.ts b/clients/web/src/theme/Card.ts
index 19406595..14d75f03 100644
--- a/clients/web/src/theme/Card.ts
+++ b/clients/web/src/theme/Card.ts
@@ -10,7 +10,18 @@ export const ThemeCard = Card.extend({
     if (props.variant === "responsive") return { root: "card-responsive" };
     return {};
   },
-  styles: () => ({
-    root: { backgroundColor: "var(--inspector-surface-card)" },
-  }),
+  styles: (_theme, props) => {
+    if (props.variant === "disabled") {
+      return {
+        root: {
+          backgroundColor: "var(--inspector-surface-card)",
+          opacity: 0.4,
+          pointerEvents: "none",
+        },
+      };
+    }
+    return {
+      root: { backgroundColor: "var(--inspector-surface-card)" },
+    };
+  },
 });