From 505fa47feb474936b9915ebec12ce5a0c8feb21d Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sun, 19 Oct 2025 22:53:33 +0800
Subject: [PATCH] refine: improve visual feedback for in-use provider actions

- Add subtle gray background to "In Use" button for better visual distinction
- Enhance disabled state of delete button with opacity and cursor feedback
- Remove disabled attribute to allow pointer events for better UX
- Prevent delete action via conditional onClick instead of disabled prop
---
 src/components/providers/ProviderActions.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/providers/ProviderActions.tsx b/src/components/providers/ProviderActions.tsx
index 0705f38..025a8e7 100644
--- a/src/components/providers/ProviderActions.tsx
+++ b/src/components/providers/ProviderActions.tsx
@@ -29,7 +29,7 @@ export function ProviderActions({
         disabled={isCurrent}
         className={cn(
           "w-20",
-          isCurrent && "text-muted-foreground hover:text-muted-foreground",
+          isCurrent && "bg-gray-200 text-muted-foreground hover:bg-gray-200 hover:text-muted-foreground dark:bg-gray-700 dark:hover:bg-gray-700",
         )}
       >
         {isCurrent ? (
@@ -69,12 +69,12 @@ export function ProviderActions({
         <Button
           size="sm"
           variant="ghost"
-          onClick={onDelete}
-          disabled={isCurrent}
+          onClick={isCurrent ? undefined : onDelete}
           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",
+            "px-2",
+            !isCurrent && "hover:bg-muted hover:text-red-500 dark:hover:text-red-400",
+            isCurrent && "opacity-40 cursor-not-allowed text-muted-foreground",
           )}
         >
           <Trash2 className="h-4 w-4" />