refactor(DraggableList): simplify cursor styles and enhance drag handle visibility

- Removed unnecessary cursor styles from draggable items in the VirtualRow component.
- Updated snapshot tests to reflect changes in cursor styles.
- Introduced a new DragHandle component in ProviderSettings for improved drag interaction, with hover effects to enhance user experience.

src/renderer/src/components/DraggableList/virtual-list.tsx

@@ -216,10 +216,7 @@ const VirtualRow = memo(
                 width: '100%',
                 transform: combinedTransform
               }}>
-              <div
+              <div {...provided.dragHandleProps} className="draggable-content" style={itemStyle}>
-                {...provided.dragHandleProps}
-                className="draggable-content"
-                style={{ ...itemStyle, cursor: disabled ? 'pointer' : 'grab' }}>
                 {item && children(item, virtualItem.index)}
               </div>
             </div>

src/renderer/src/components/__tests__/__snapshots__/DraggableVirtualList.test.tsx.snap

@@ -38,7 +38,7 @@ exports[`DraggableVirtualList > snapshot > should match snapshot with custom sty
               >
                 <div
                   class="draggable-content"
-                  style="background: blue; cursor: grab;"
+                  style="background: blue;"
                 >
                   <div>
                     Item A
@@ -56,7 +56,7 @@ exports[`DraggableVirtualList > snapshot > should match snapshot with custom sty
               >
                 <div
                   class="draggable-content"
-                  style="background: blue; cursor: grab;"
+                  style="background: blue;"
                 >
                   <div>
                     Item B
@@ -74,7 +74,7 @@ exports[`DraggableVirtualList > snapshot > should match snapshot with custom sty
               >
                 <div
                   class="draggable-content"
-                  style="background: blue; cursor: grab;"
+                  style="background: blue;"
                 >
                   <div>
                     Item C

src/renderer/src/pages/settings/ProviderSettings/index.tsx

@@ -15,7 +15,7 @@ import {
   uuid
 } from '@renderer/utils'
 import { Avatar, Button, Card, Dropdown, Input, MenuProps, Tag } from 'antd'
-import { Eye, EyeOff, PlusIcon, Search, UserPen } from 'lucide-react'
+import { Eye, EyeOff, GripVertical, PlusIcon, Search, UserPen } from 'lucide-react'
 import { FC, startTransition, useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSearchParams } from 'react-router-dom'
@@ -479,6 +479,9 @@ const ProvidersList: FC = () => {
                 key={JSON.stringify(provider)}
                 className={provider.id === selectedProvider?.id ? 'active' : ''}
                 onClick={() => setSelectedProvider(provider)}>
+                <DragHandle>
+                  <GripVertical size={12} />
+                </DragHandle>
                 {getProviderAvatar(provider)}
                 <ProviderItemName className="text-nowrap">{getFancyProviderName(provider)}</ProviderItemName>
                 {provider.enabled && (
@@ -531,6 +534,7 @@ const ProviderListItem = styled.div`
   transition: all 0.2s ease-in-out;
   border: 0.5px solid transparent;
   user-select: none;
+  cursor: pointer;
   &:hover {
     background: var(--color-background-soft);
   }
@@ -541,6 +545,26 @@ const ProviderListItem = styled.div`
   }
 `
 
+const DragHandle = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: -8px;
+  width: 12px;
+  color: var(--color-text-3);
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  cursor: grab;
+
+  ${ProviderListItem}:hover & {
+    opacity: 1;
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+`
+
 const ProviderLogo = styled(Avatar)`
   border: 0.5px solid var(--color-border);
 `