feat: show list and select

web/app/components/plugins/reference-setting-modal/auto-update-setting/config.ts

@@ -4,6 +4,6 @@ export const defaultValue: AutoUpdateConfig = {
   strategy_setting: AUTO_UPDATE_STRATEGY.fixOnly, // For test
   upgrade_time_of_day: 0,
   upgrade_mode: AUTO_UPDATE_MODE.exclude, // For test
-  exclude_plugins: [],
+  exclude_plugins: ['a', 'c'],
-  include_plugins: [],
+  include_plugins: ['b'],
 }

web/app/components/plugins/reference-setting-modal/auto-update-setting/no-plugin-selected.tsx

@@ -0,0 +1,22 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { AUTO_UPDATE_MODE } from './types'
+import { useTranslation } from 'react-i18next'
+
+type Props = {
+  updateMode: AUTO_UPDATE_MODE
+}
+
+const NoPluginSelected: FC<Props> = ({
+  updateMode,
+}) => {
+  const { t } = useTranslation()
+  const text = `${t(`plugin.autoUpdate.upgradeModePlaceholder.${updateMode === AUTO_UPDATE_MODE.partial ? 'partial' : 'exclude'}`)}`
+  return (
+    <div className='system-xs-regular rounded-[10px] border border-[divider-subtle] bg-background-section p-3 text-center text-text-tertiary'>
+      {text}
+    </div>
+  )
+}
+export default React.memo(NoPluginSelected)

web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx

@@ -3,9 +3,12 @@ import type { FC } from 'react'
 import React from 'react'
 import NoPluginSelected from './no-plugin-selected'
 import type { AUTO_UPDATE_MODE } from './types'
+import PluginsSelected from './plugins-selected'
+import Button from '@/app/components/base/button'
+import { RiAddLine } from '@remixicon/react'
 
 type Props = {
-    updateMode: AUTO_UPDATE_MODE
+  updateMode: AUTO_UPDATE_MODE
   value: string[] // plugin ids
   onChange: (value: string[]) => void
 }
@@ -19,13 +22,23 @@ const PluginsPicker: FC<Props> = ({
   return (
     <div className='mt-2 rounded-[10px] bg-background-section-burn p-2.5'>
       {hasSelected ? (
-        <div className='flex justify-between'>
+        <div className='flex justify-between text-text-tertiary'>
-          <div>Selected plugins will not auto-update</div>
+          <div className='system-xs-medium'>The following 21 plugins will not auto-update</div>
+          <div className='system-xs-medium cursor-pointer'>Clear all</div>
         </div>
       ) : (
         <NoPluginSelected updateMode={updateMode} />
       )}
 
+      <PluginsSelected
+        className='mt-2'
+        plugins={value}
+      />
+
+      <Button className='mt-2 w-full' size='small' variant='secondary-accent'>
+        <RiAddLine className='size-3.5' />
+        Select
+      </Button>
     </div>
   )
 }

web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-selected.tsx

@@ -0,0 +1,31 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from '@/utils/classnames'
+
+const MAX_DISPLAY_COUNT = 14
+type Props = {
+  className?: string
+  plugins: string[]
+}
+
+const PluginsSelected: FC<Props> = ({
+  className,
+  plugins,
+}) => {
+  const isShowAll = plugins.length < MAX_DISPLAY_COUNT
+  const displayPlugins = isShowAll ? plugins.slice(0, MAX_DISPLAY_COUNT) : plugins
+  return (
+    <div className={cn('flex space-x-1', className)}>
+      {displayPlugins.map((plugin, index) => (
+        <div
+          key={index}
+          className='size-6 rounded-lg border-[0.5px] border-[components-panel-border-subtle] bg-background-default-dodge text-center text-xs leading-6 text-text-secondary'
+        >
+        </div>
+      ))}
+      {!isShowAll && <div>+{plugins.length - MAX_DISPLAY_COUNT}</div>}
+    </div>
+  )
+}
+export default React.memo(PluginsSelected)