feat: added drag and drop sorting for providers list

src/renderer/src/hooks/useProvider.ts

@@ -2,13 +2,20 @@ import { useAppDispatch, useAppSelector } from '@renderer/store'
 import {
   addModel as _addModel,
   removeModel as _removeModel,
-  updateProvider as _updateProvider
+  updateProvider as _updateProvider,
+  updateProviders as _updateProviders
 } from '@renderer/store/llm'
 import { Assistant, Model, Provider } from '@renderer/types'
 import { useDefaultModel } from './useAssistant'
 
 export function useProviders() {
-  return useAppSelector((state) => state.llm.providers.filter((p) => p.enabled))
+  const providers = useAppSelector((state) => state.llm.providers.filter((p) => p.enabled))
+  const dispatch = useAppDispatch()
+
+  return {
+    providers,
+    updateProviders: (providers: Provider[]) => dispatch(_updateProviders(providers))
+  }
 }
 
 export function useSystemProviders() {

src/renderer/src/pages/home/components/Navigation.tsx

@@ -12,7 +12,7 @@ interface Props {
 }
 
 const Navigation: FC<Props> = ({ activeAssistant }) => {
-  const providers = useProviders()
+  const { providers } = useProviders()
   const { model, setModel } = useAssistant(activeAssistant.id)
 
   const items: MenuProps['items'] = providers

src/renderer/src/pages/settings/ModelSettings.tsx

@@ -8,7 +8,7 @@ import { Model } from '@renderer/types'
 
 const ModelSettings: FC = () => {
   const { defaultModel, topicNamingModel, setDefaultModel, setTopicNamingModel } = useDefaultModel()
-  const providers = useProviders()
+  const { providers } = useProviders()
   const allModels = providers.map((p) => p.models).flat()
 
   const selectOptions = providers

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

@@ -1,32 +1,58 @@
-import { useSystemProviders } from '@renderer/hooks/useProvider'
+import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'
+import { useProviders, useSystemProviders } from '@renderer/hooks/useProvider'
+import { getProviderLogo } from '@renderer/services/provider'
 import { Provider } from '@renderer/types'
+import { droppableReorder } from '@renderer/utils'
+import { Avatar, Tag } from 'antd'
 import { FC, useState } from 'react'
 import styled from 'styled-components'
-import { Avatar, Tag } from 'antd'
-import { getProviderLogo } from '@renderer/services/provider'
 import ProviderSetting from './components/ProviderSetting'
 
 const ProviderSettings: FC = () => {
   const providers = useSystemProviders()
+  const { updateProviders } = useProviders()
   const [selectedProvider, setSelectedProvider] = useState<Provider>(providers[0])
 
+  const onDragEnd = (result: DropResult) => {
+    if (result.destination) {
+      const sourceIndex = result.source.index
+      const destIndex = result.destination.index
+      const reorderProviders = droppableReorder<Provider>(providers, sourceIndex, destIndex)
+      updateProviders(reorderProviders)
+    }
+  }
+
   return (
     <Container>
       <ProviderListContainer>
-        {providers.map((provider) => (
+        <DragDropContext onDragEnd={onDragEnd}>
-          <ProviderListItem
+          <Droppable droppableId="droppable">
-            key={JSON.stringify(provider)}
+            {(provided) => (
-            className={provider.id === selectedProvider?.id ? 'active' : ''}
+              <div {...provided.droppableProps} ref={provided.innerRef}>
-            onClick={() => setSelectedProvider(provider)}>
+                {providers.map((provider, index) => (
-            <Avatar src={getProviderLogo(provider.id)} size={22} />
+                  <Draggable key={`draggable_${provider.id}_${index}`} draggableId={provider.id} index={index}>
-            <ProviderItemName>{provider.name}</ProviderItemName>
+                    {(provided) => (
-            {provider.enabled && (
+                      <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
-              <Tag color="green" style={{ marginLeft: 'auto' }}>
+                        <ProviderListItem
-                ON
+                          key={JSON.stringify(provider)}
-              </Tag>
+                          className={provider.id === selectedProvider?.id ? 'active' : ''}
+                          onClick={() => setSelectedProvider(provider)}>
+                          <Avatar src={getProviderLogo(provider.id)} size={22} />
+                          <ProviderItemName>{provider.name}</ProviderItemName>
+                          {provider.enabled && (
+                            <Tag color="green" style={{ marginLeft: 'auto' }}>
+                              ON
+                            </Tag>
+                          )}
+                        </ProviderListItem>
+                      </div>
+                    )}
+                  </Draggable>
+                ))}
+              </div>
             )}
-          </ProviderListItem>
+          </Droppable>
-        ))}
+        </DragDropContext>
       </ProviderListContainer>
       <ProviderSetting provider={selectedProvider} key={JSON.stringify(selectedProvider)} />
     </Container>

src/renderer/src/store/llm.ts

@@ -95,6 +95,9 @@ const settingsSlice = createSlice({
     updateProvider: (state, action: PayloadAction<Provider>) => {
       state.providers = state.providers.map((p) => (p.id === action.payload.id ? { ...p, ...action.payload } : p))
     },
+    updateProviders: (state, action: PayloadAction<Provider[]>) => {
+      state.providers = action.payload
+    },
     addProvider: (state, action: PayloadAction<Provider>) => {
       state.providers.push(action.payload)
     },
@@ -132,6 +135,7 @@ const settingsSlice = createSlice({
 
 export const {
   updateProvider,
+  updateProviders,
   addProvider,
   removeProvider,
   addModel,