admin/cc-switch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improve drag handle icon and interaction feedback

Browse Source 
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.
This commit is contained in:
Jason
2025-10-24 10:23:10 +08:00
parent 495e66e3b6
commit 07787a2ee1
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/providers/ProviderCard.tsx
View File

@@ -1,5 +1,5 @@
import { useMemo } from "react"; import { useMemo } from "react";
import { GripVertical } from "lucide-react"; import { MoveVertical } from "lucide-react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import type { import type {
DraggableAttributes, DraggableAttributes,
@@ -103,17 +103,17 @@ export function ProviderCard({
<button <button
type="button" type="button"
className={cn( 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 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", : "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")} aria-label={t("provider.dragHandle")}
{...(dragHandleProps?.attributes ?? {})} {...(dragHandleProps?.attributes ?? {})}
{...(dragHandleProps?.listeners ?? {})} {...(dragHandleProps?.listeners ?? {})}
> >
<GripVertical className="h-4 w-4" /> <MoveVertical className="h-4 w-4" />
</button> </button>
<div className="space-y-1"> <div className="space-y-1">