fervert: feat(ProviderSettings): resizable provider settings (#9004)

This reverts commit 5713a278cd.

src/renderer/src/assets/styles/ant.scss

@@ -184,26 +184,3 @@
     box-shadow: 0 1px 4px 0px rgb(128 128 128 / 50%) !important;
   }
 }
-
-.ant-splitter-bar {
-  .ant-splitter-bar-dragger {
-    &::before {
-      background-color: var(--color-border) !important;
-      transition: background-color 0.15s ease-in-out;
-    }
-    &:hover {
-      &::before {
-        width: 4px !important;
-        background-color: var(--color-primary) !important;
-        transition: background-color 0.15s ease-in-out;
-      }
-    }
-  }
-
-  .ant-splitter-bar-dragger-active {
-    &::before {
-      width: 4px !important;
-      background-color: var(--color-primary) !important;
-    }
-  }
-}

src/renderer/src/context/AntdProvider.tsx

@@ -99,11 +99,6 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
           },
           Divider: {
             colorSplit: 'rgba(128,128,128,0.15)'
-          },
-          Splitter: {
-            splitBarDraggableSize: 0,
-            splitBarSize: 0.5,
-            splitTriggerSize: 10
           }
         },
         token: {

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

@@ -13,7 +13,7 @@ import { isProviderSupportAuth } from '@renderer/services/ProviderService'
 import { ApiKeyConnectivity, HealthStatus } from '@renderer/types/healthCheck'
 import { formatApiHost, formatApiKeys, getFancyProviderName, isOpenAIProvider } from '@renderer/utils'
 import { formatErrorMessage } from '@renderer/utils/error'
-import { Button, Divider, Flex, Input, Space, Switch, Tooltip, Typography } from 'antd'
+import { Button, Divider, Flex, Input, Space, Switch, Tooltip } from 'antd'
 import Link from 'antd/es/typography/Link'
 import { debounce, isEmpty } from 'lodash'
 import { Check, Settings2, SquareArrowOutUpRight, TriangleAlert } from 'lucide-react'
@@ -229,8 +229,8 @@ const ProviderSetting: FC<Props> = ({ providerId }) => {
   return (
     <SettingContainer theme={theme} style={{ background: 'var(--color-background)' }}>
       <SettingTitle>
-        <Flex align="center" gap={5} flex={1} style={{ overflow: 'hidden' }}>
-          <ProviderName ellipsis>{fancyProviderName}</ProviderName>
+        <Flex align="center" gap={5}>
+          <ProviderName>{fancyProviderName}</ProviderName>
           {officialWebsite && (
             <Link target="_blank" href={providerConfig.websites.official} style={{ display: 'flex' }}>
               <Button type="text" size="small" icon={<SquareArrowOutUpRight size={14} />} />
@@ -372,7 +372,7 @@ const ProviderSetting: FC<Props> = ({ providerId }) => {
   )
 }
 
-const ProviderName = styled(Typography.Text)`
+const ProviderName = styled.span`
   font-size: 14px;
   font-weight: 500;
   margin-right: -2px;

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

@@ -15,7 +15,7 @@ import {
   matchKeywordsInProvider,
   uuid
 } from '@renderer/utils'
-import { Avatar, Button, Card, Dropdown, Input, MenuProps, Splitter, Tag } from 'antd'
+import { Avatar, Button, Card, Dropdown, Input, MenuProps, Tag } from 'antd'
 import { Eye, EyeOff, GripVertical, PlusIcon, Search, UserPen } from 'lucide-react'
 import { FC, startTransition, useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -455,77 +455,70 @@ const ProvidersList: FC = () => {
 
   return (
     <Container className="selectable">
-      <Splitter>
-        <Splitter.Panel min={250} defaultSize={250}>
-          <ProviderListContainer>
-            <AddButtonWrapper>
-              <Input
-                type="text"
-                placeholder={t('settings.provider.search')}
-                value={searchText}
-                style={{ borderRadius: 'var(--list-item-border-radius)', height: 35 }}
-                suffix={<Search size={14} />}
-                onChange={(e) => setSearchText(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Escape') {
-                    setSearchText('')
-                  }
-                }}
-                allowClear
-                disabled={dragging}
-              />
-            </AddButtonWrapper>
-            <DraggableVirtualList
-              list={filteredProviders}
-              onDragStart={handleDragStart}
-              onDragEnd={handleDragEnd}
-              estimateSize={useCallback(() => 40, [])}
-              itemKey={itemKey}
-              overscan={3}
-              style={{
-                height: `calc(100% - 2 * ${BUTTON_WRAPPER_HEIGHT}px)`
-              }}
-              scrollerStyle={{
-                padding: 8,
-                paddingRight: 5
-              }}
-              itemContainerStyle={{ paddingBottom: 5 }}>
-              {(provider) => (
-                <Dropdown menu={{ items: getDropdownMenus(provider) }} trigger={['contextMenu']}>
-                  <ProviderListItem
-                    key={provider.id}
-                    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 && (
-                      <Tag color="green" style={{ marginLeft: 'auto', marginRight: 0, borderRadius: 16 }}>
-                        ON
-                      </Tag>
-                    )}
-                  </ProviderListItem>
-                </Dropdown>
-              )}
-            </DraggableVirtualList>
-            <AddButtonWrapper>
-              <Button
-                style={{ width: '100%', borderRadius: 'var(--list-item-border-radius)' }}
-                icon={<PlusIcon size={16} />}
-                onClick={onAddProvider}
-                disabled={dragging}>
-                {t('button.add')}
-              </Button>
-            </AddButtonWrapper>
-          </ProviderListContainer>
-        </Splitter.Panel>
-
-        <Splitter.Panel min={'50%'}>
-          <ProviderSetting providerId={selectedProvider.id} key={selectedProvider.id} />
-        </Splitter.Panel>
-      </Splitter>
+      <ProviderListContainer>
+        <AddButtonWrapper>
+          <Input
+            type="text"
+            placeholder={t('settings.provider.search')}
+            value={searchText}
+            style={{ borderRadius: 'var(--list-item-border-radius)', height: 35 }}
+            suffix={<Search size={14} />}
+            onChange={(e) => setSearchText(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') {
+                setSearchText('')
+              }
+            }}
+            allowClear
+            disabled={dragging}
+          />
+        </AddButtonWrapper>
+        <DraggableVirtualList
+          list={filteredProviders}
+          onDragStart={handleDragStart}
+          onDragEnd={handleDragEnd}
+          estimateSize={useCallback(() => 40, [])}
+          itemKey={itemKey}
+          overscan={3}
+          style={{
+            height: `calc(100% - 2 * ${BUTTON_WRAPPER_HEIGHT}px)`
+          }}
+          scrollerStyle={{
+            padding: 8,
+            paddingRight: 5
+          }}
+          itemContainerStyle={{ paddingBottom: 5 }}>
+          {(provider) => (
+            <Dropdown menu={{ items: getDropdownMenus(provider) }} trigger={['contextMenu']}>
+              <ProviderListItem
+                key={provider.id}
+                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 && (
+                  <Tag color="green" style={{ marginLeft: 'auto', marginRight: 0, borderRadius: 16 }}>
+                    ON
+                  </Tag>
+                )}
+              </ProviderListItem>
+            </Dropdown>
+          )}
+        </DraggableVirtualList>
+        <AddButtonWrapper>
+          <Button
+            style={{ width: '100%', borderRadius: 'var(--list-item-border-radius)' }}
+            icon={<PlusIcon size={16} />}
+            onClick={onAddProvider}
+            disabled={dragging}>
+            {t('button.add')}
+          </Button>
+        </AddButtonWrapper>
+      </ProviderListContainer>
+      <ProviderSetting providerId={selectedProvider.id} key={selectedProvider.id} />
     </Container>
   )
 }
@@ -540,7 +533,9 @@ const Container = styled.div`
 const ProviderListContainer = styled.div`
   display: flex;
   flex-direction: column;
+  min-width: calc(var(--settings-width) + 10px);
   height: calc(100vh - var(--navbar-height));
+  border-right: 0.5px solid var(--color-border);
 `
 
 const ProviderListItem = styled.div`