feat(CustomCollapse): enhance component with customizable styles and improve usage in EditModelsPopup

src/renderer/src/components/CustomCollapse.tsx

@@ -1,4 +1,5 @@
 import { Collapse } from 'antd'
+import { merge } from 'lodash'
 import { FC, memo } from 'react'
 
 interface CustomCollapseProps {
@@ -9,6 +10,11 @@ interface CustomCollapseProps {
   defaultActiveKey?: string[]
   activeKey?: string[]
   collapsible?: 'header' | 'icon' | 'disabled'
+  style?: React.CSSProperties
+  styles?: {
+    header?: React.CSSProperties
+    body?: React.CSSProperties
+  }
 }
 
 const CustomCollapse: FC<CustomCollapseProps> = ({
@@ -18,14 +24,17 @@ const CustomCollapse: FC<CustomCollapseProps> = ({
   destroyInactivePanel = false,
   defaultActiveKey = ['1'],
   activeKey,
-  collapsible = undefined
+  collapsible = undefined,
+  style,
+  styles
 }) => {
-  const CollapseStyle = {
+  const defaultCollapseStyle = {
     width: '100%',
     background: 'transparent',
     border: '0.5px solid var(--color-border)'
   }
-  const CollapseItemStyles = {
+
+  const defaultCollapseItemStyles = {
     header: {
       padding: '8px 16px',
       alignItems: 'center',
@@ -38,17 +47,21 @@ const CustomCollapse: FC<CustomCollapseProps> = ({
       borderTop: '0.5px solid var(--color-border)'
     }
   }
+
+  const collapseStyle = merge({}, defaultCollapseStyle, style)
+  const collapseItemStyles = merge({}, defaultCollapseItemStyles, styles)
+
   return (
     <Collapse
       bordered={false}
-      style={CollapseStyle}
+      style={collapseStyle}
       defaultActiveKey={defaultActiveKey}
       activeKey={activeKey}
       destroyInactivePanel={destroyInactivePanel}
       collapsible={collapsible}
       items={[
         {
-          styles: CollapseItemStyles,
+          styles: collapseItemStyles,
           key: '1',
           label,
           extra,

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

@@ -199,7 +199,8 @@ const PopupContainer: React.FC<Props> = ({ provider: _provider, resolve }) => {
           return (
             <CustomCollapse
               key={i}
-              defaultActiveKey={i >= 5 ? [] : ['1']}
+              defaultActiveKey={['1']}
+              styles={{ body: { padding: '0 10px' } }}
               label={
                 <Flex align="center" gap={10}>
                   <span style={{ fontWeight: 600 }}>{group}</span>
@@ -233,13 +234,15 @@ const PopupContainer: React.FC<Props> = ({ provider: _provider, resolve }) => {
                   />
                 </Tooltip>
               }>
-              <FlexColumn>
+              <FlexColumn style={{ margin: '10px 0' }}>
                 {modelGroups[group].map((model) => (
                   <FileItem
                     style={{
                       backgroundColor: isModelInProvider(provider, model.id)
                         ? 'rgba(0, 126, 0, 0.06)'
-                        : 'rgba(255, 255, 255, 0.04)'
+                        : 'rgba(255, 255, 255, 0.04)',
+                      border: 'none',
+                      boxShadow: 'none'
                     }}
                     key={model.id}
                     fileInfo={{