♻️ refactor: improve code for ai provider (#5532)

* improve code

* fire

src/app/(main)/settings/provider/(list)/ProviderGrid/Card.tsx

@@ -6,10 +6,9 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import InstantSwitch from '@/components/InstantSwitch';
-import { useAiInfraStore } from '@/store/aiInfra';
 import { AiProviderListItem } from '@/types/aiProvider';
 
+import EnableSwitch from './EnableSwitch';
 import { useStyles } from './style';
 
 const { Paragraph } = Typography;
@@ -21,7 +20,6 @@ const ProviderCard = memo<ProviderCardProps>(
   ({ id, description, name, enabled, source, logo, loading }) => {
     const { t } = useTranslation('providers');
     const { cx, styles, theme } = useStyles();
-    const toggleProviderEnabled = useAiInfraStore((s) => s.toggleProviderEnabled);
 
     if (loading)
       return (
@@ -73,13 +71,7 @@ const ProviderCard = memo<ProviderCardProps>(
           <Divider style={{ margin: '4px 0' }} />
           <Flexbox horizontal justify={'space-between'} paddingBlock={'8px 0'}>
             <div />
-            <InstantSwitch
-              enabled={enabled}
-              onChange={async (checked) => {
-                await toggleProviderEnabled(id, checked);
-              }}
-              size={'small'}
-            />
+            <EnableSwitch enabled={enabled} id={id} />
           </Flexbox>
         </Flexbox>
       </Flexbox>

src/app/(main)/settings/provider/(list)/ProviderGrid/EnableSwitch.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+
+import InstantSwitch from '@/components/InstantSwitch';
+import { useAiInfraStore } from '@/store/aiInfra';
+
+interface SwitchProps {
+  Component?: FC<{ enabled: boolean, id: string; }>;
+  enabled: boolean;
+  id: string;
+}
+
+const Switch = ({ id, Component, enabled }: SwitchProps) => {
+  const [toggleProviderEnabled] = useAiInfraStore((s) => [s.toggleProviderEnabled]);
+
+  // slot for cloud
+  if (Component) return <Component enabled={enabled} id={id} />;
+
+  return (
+    <InstantSwitch
+      enabled={enabled}
+      onChange={async (checked) => {
+        await toggleProviderEnabled(id, checked);
+      }}
+      size={'small'}
+    />
+  );
+};
+
+export default Switch;

src/app/(main)/settings/provider/(list)/ProviderGrid/index.tsx

@@ -29,6 +29,10 @@ const useStyles = createStyles(({ css, responsive, token }) => ({
     ${responsive.desktop} {
       grid-template-columns: repeat(3, 1fr);
     }
+
+    ${responsive.md} {
+      grid-template-columns: repeat(1, 1fr);
+    }
   `,
 }));
 
@@ -51,7 +55,7 @@ const List = memo(() => {
             {t('list.title.enabled')}
           </Typography.Text>
         </Flexbox>
-        <Grid>
+        <Grid className={styles.grid}>
           {loadingArr.map((item) => (
             <Card enabled={false} id={item} key={item} loading source={'builtin'} />
           ))}

src/app/(main)/settings/provider/ProviderMenu/SkeletonList.tsx

@@ -50,7 +50,7 @@ export const Placeholder = memo(() => {
 });
 
 export const SkeletonList = memo(() => (
-  <Flexbox gap={4} style={{ paddingTop: 6 }}>
+  <Flexbox flex={1} gap={4} style={{ paddingTop: 6 }}>
     {Array.from({ length: 6 }).map((_, i) => (
       <Placeholder key={i} />
     ))}

src/app/(main)/settings/provider/ProviderMenu/index.tsx

@@ -31,7 +31,7 @@ const Layout = memo(({ children, mobile }: ProviderMenuProps) => {
 
   const width = mobile ? undefined : 260;
   return (
-    <Flexbox style={{ minWidth: width, overflow: 'scroll' }} width={width}>
+    <Flexbox style={{ minWidth: width, overflow: mobile ? undefined : 'scroll' }} width={width}>
       <Flexbox
         gap={8}
         horizontal