From 07787a2ee14ded94cdb02c07af28789eff8a253e Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Fri, 24 Oct 2025 10:23:10 +0800
Subject: [PATCH] refactor: improve drag handle icon and interaction feedback

Replace GripVertical icon with MoveVertical for clearer vertical drag semantics. Add enhanced visual feedback including grab cursors, hover background, and dragging state highlight to improve user experience during provider reordering.
---
 src/components/providers/ProviderCard.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/providers/ProviderCard.tsx b/src/components/providers/ProviderCard.tsx
index 5e34271..e6011e1 100644
--- a/src/components/providers/ProviderCard.tsx
+++ b/src/components/providers/ProviderCard.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { GripVertical } from "lucide-react";
+import { MoveVertical } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import type {
   DraggableAttributes,
@@ -103,17 +103,17 @@ export function ProviderCard({
           <button
             type="button"
             className={cn(
-              "mt-1 flex h-8 flex-shrink-0 items-center justify-center overflow-hidden rounded-md border text-muted-foreground transition-all duration-200",
+              "mt-1 flex h-8 flex-shrink-0 items-center justify-center overflow-hidden rounded-md border text-muted-foreground transition-all duration-200 cursor-grab active:cursor-grabbing",
               isEditMode
-                ? "w-8 mr-3 border-muted hover:border-border-hover hover:text-foreground opacity-100"
+                ? "w-8 mr-3 border-muted hover:border-border-hover hover:text-foreground hover:bg-muted/50 opacity-100"
                 : "w-0 mr-0 border-transparent opacity-0 pointer-events-none",
-              dragHandleProps?.isDragging && "border-border-active text-primary",
+              dragHandleProps?.isDragging && "border-border-active text-primary bg-primary/10 cursor-grabbing",
             )}
             aria-label={t("provider.dragHandle")}
             {...(dragHandleProps?.attributes ?? {})}
             {...(dragHandleProps?.listeners ?? {})}
           >
-            <GripVertical className="h-4 w-4" />
+            <MoveVertical className="h-4 w-4" />
           </button>
 
           <div className="space-y-1">