diff --git a/src/renderer/src/components/DraggableList/virtual-list.tsx b/src/renderer/src/components/DraggableList/virtual-list.tsx index 4de83a6dcc..59b3ca2d52 100644 --- a/src/renderer/src/components/DraggableList/virtual-list.tsx +++ b/src/renderer/src/components/DraggableList/virtual-list.tsx @@ -216,10 +216,7 @@ const VirtualRow = memo( width: '100%', transform: combinedTransform }}> -
+
{item && children(item, virtualItem.index)}
diff --git a/src/renderer/src/components/__tests__/__snapshots__/DraggableVirtualList.test.tsx.snap b/src/renderer/src/components/__tests__/__snapshots__/DraggableVirtualList.test.tsx.snap index f2726f06a6..17a207ef30 100644 --- a/src/renderer/src/components/__tests__/__snapshots__/DraggableVirtualList.test.tsx.snap +++ b/src/renderer/src/components/__tests__/__snapshots__/DraggableVirtualList.test.tsx.snap @@ -38,7 +38,7 @@ exports[`DraggableVirtualList > snapshot > should match snapshot with custom sty >
Item A @@ -56,7 +56,7 @@ exports[`DraggableVirtualList > snapshot > should match snapshot with custom sty >
Item B @@ -74,7 +74,7 @@ exports[`DraggableVirtualList > snapshot > should match snapshot with custom sty >
Item C diff --git a/src/renderer/src/pages/settings/ProviderSettings/index.tsx b/src/renderer/src/pages/settings/ProviderSettings/index.tsx index 635e35a0c6..9cffffa944 100644 --- a/src/renderer/src/pages/settings/ProviderSettings/index.tsx +++ b/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)}> + + + {getProviderAvatar(provider)} {getFancyProviderName(provider)} {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); `