From 43ed1c75332df518e536a0d97d60773dc88b9de8 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sun, 19 Oct 2025 21:46:16 +0800
Subject: [PATCH] refine: improve provider card UI with compact action buttons
 and simplified link styling

- Convert edit and usage buttons to icon-only ghost variant for cleaner appearance
- Reduce action button padding (px-2) and group spacing (gap-0) for more compact layout
- Add red hover effect to delete icon for better visual feedback
- Vertically center action buttons with provider info on desktop view
- Simplify provider URL link by removing icon and using soft blue color (blue-400/300)
- Reduce enable button width from 96px to 80px for better proportions
---
 src/components/providers/ProviderActions.tsx | 61 +++++++++++---------
 src/components/providers/ProviderCard.tsx    |  5 +-
 2 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/src/components/providers/ProviderActions.tsx b/src/components/providers/ProviderActions.tsx
index 553d57b..0705f38 100644
--- a/src/components/providers/ProviderActions.tsx
+++ b/src/components/providers/ProviderActions.tsx
@@ -1,4 +1,4 @@
-import { BarChart3, Check, Play, Trash2 } from "lucide-react";
+import { BarChart3, Check, Edit, Play, Trash2 } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -28,7 +28,7 @@ export function ProviderActions({
         onClick={onSwitch}
         disabled={isCurrent}
         className={cn(
-          "w-[96px]",
+          "w-20",
           isCurrent && "text-muted-foreground hover:text-muted-foreground",
         )}
       >
@@ -45,32 +45,41 @@ export function ProviderActions({
         )}
       </Button>
 
-      <Button size="sm" variant="outline" onClick={onEdit}>
-        {t("common.edit")}
-      </Button>
+      <div className="flex items-center gap-0">
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={onEdit}
+          title={t("common.edit")}
+          className="px-2 hover:bg-muted"
+        >
+          <Edit className="h-4 w-4" />
+        </Button>
 
-      <Button
-        size="sm"
-        variant="outline"
-        onClick={onConfigureUsage}
-        title={t("provider.configureUsage")}
-      >
-        <BarChart3 className="h-4 w-4" />
-      </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={onConfigureUsage}
+          title={t("provider.configureUsage")}
+          className="px-2 hover:bg-muted"
+        >
+          <BarChart3 className="h-4 w-4" />
+        </Button>
 
-      <Button
-        size="sm"
-        variant="ghost"
-        onClick={onDelete}
-        disabled={isCurrent}
-        className={cn(
-          "hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10",
-          isCurrent &&
-            "text-muted-foreground hover:text-muted-foreground hover:bg-transparent",
-        )}
-      >
-        <Trash2 className="h-4 w-4" />
-      </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={onDelete}
+          disabled={isCurrent}
+          title={t("common.delete")}
+          className={cn(
+            "px-2 hover:bg-muted hover:text-red-500 dark:hover:text-red-400",
+            isCurrent && "text-muted-foreground hover:text-muted-foreground hover:bg-transparent",
+          )}
+        >
+          <Trash2 className="h-4 w-4" />
+        </Button>
+      </div>
     </div>
   );
 }
diff --git a/src/components/providers/ProviderCard.tsx b/src/components/providers/ProviderCard.tsx
index 188370c..d9f7ff0 100644
--- a/src/components/providers/ProviderCard.tsx
+++ b/src/components/providers/ProviderCard.tsx
@@ -96,7 +96,7 @@ export function ProviderCard({
           "cursor-grabbing border-primary/60 shadow-lg",
       )}
     >
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex flex-1 items-start gap-3">
           <button
             type="button"
@@ -127,10 +127,9 @@ export function ProviderCard({
               <button
                 type="button"
                 onClick={handleOpenWebsite}
-                className="inline-flex items-center gap-1 text-sm text-primary transition-colors hover:underline"
+                className="inline-flex items-center text-sm text-blue-400 transition-colors hover:underline dark:text-blue-300"
                 title={displayUrl}
               >
-                <Link className="h-3.5 w-3.5" />
                 <span className="truncate">{displayUrl}</span>
               </button>
             )}