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

@@ -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,15 +45,23 @@ export function ProviderActions({
         )}
       </Button>
 
-      <Button size="sm" variant="outline" onClick={onEdit}>
+      <div className="flex items-center gap-0">
-        {t("common.edit")}
+        <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"
+          variant="ghost"
           onClick={onConfigureUsage}
           title={t("provider.configureUsage")}
+          className="px-2 hover:bg-muted"
         >
           <BarChart3 className="h-4 w-4" />
         </Button>
@@ -63,14 +71,15 @@ export function ProviderActions({
           variant="ghost"
           onClick={onDelete}
           disabled={isCurrent}
+          title={t("common.delete")}
           className={cn(
-          "hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10",
+            "px-2 hover:bg-muted hover:text-red-500 dark:hover:text-red-400",
-          isCurrent &&
+            isCurrent && "text-muted-foreground hover:text-muted-foreground hover:bg-transparent",
-            "text-muted-foreground hover:text-muted-foreground hover:bg-transparent",
           )}
         >
           <Trash2 className="h-4 w-4" />
         </Button>
       </div>
+    </div>
   );
 }

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>
             )}