chore: installation progress bar

web/app/components/plugins/plugin-page/index.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import {
   RiDragDropLine,
   RiEqualizer2Line,
+  RiInstallFill,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import InstallFromLocalPackage from '../install-plugin/install-from-local-package'
@@ -47,6 +48,8 @@ const PluginPage = ({
   const [currentFile, setCurrentFile] = useState<File | null>(null)
   const containerRef = usePluginPageContext(v => v.containerRef)
   const { enable_marketplace } = useAppContextSelector(s => s.systemFeatures)
+  const [installed, total] = [2, 3] // Replace this with the actual progress
+  const progressPercentage = (installed / total) * 100
   const options = useMemo(() => {
     return [
       { value: 'plugins', text: t('common.menus.plugins') },
@@ -91,6 +94,22 @@ const PluginPage = ({
             />
           </div>
           <div className='flex flex-shrink-0 items-center gap-1'>
+            <div className='relative'>
+              <Button
+                className='relative overflow-hidden border !border-[rgba(178,202,255,1)] !bg-[rgba(255,255,255,0.95)] cursor-default'
+              >
+                <div
+                  className='absolute left-0 top-0 h-full bg-state-accent-active'
+                  style={{ width: `${progressPercentage}%` }}
+                ></div>
+                <div className='relative z-10 flex items-center'>
+                  <RiInstallFill className='w-4 h-4 text-text-accent' />
+                  <div className='flex px-0.5 justify-center items-center gap-1'>
+                    <span className='text-text-accent system-sm-medium'>{activeTab === 'plugins' ? `Installing ${installed}/${total} plugins` : `${installed}/${total}`}</span>
+                  </div>
+                </div>
+              </Button>
+            </div>
             {canManagement && (
               <InstallPluginDropdown />
             )}

web/app/components/plugins/plugin-page/list/index.tsx

@@ -0,0 +1,30 @@
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import PluginItem from '../../plugin-item'
+import { customTool, extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock'
+import I18n from '@/context/i18n'
+
+const PluginList = () => {
+  const { locale } = useContext(I18n)
+  const { t } = useTranslation()
+  const pluginList = [toolNotion, extensionDallE, modelGPT4, customTool]
+
+  return (
+    <div className='pb-3 bg-white'>
+      <div>
+        <div className='grid grid-cols-2 gap-3'>
+          {pluginList.map((plugin, index) => (
+            <PluginItem
+              key={index}
+              payload={plugin as any}
+              onDelete={() => {}}
+              pluginI8n={t}
+              locale={locale}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+export default PluginList

web/app/components/plugins/plugin-page/plugins-panel.tsx

@@ -1,16 +1,18 @@
 'use client'
 
+import List from './list'
+
 const PluginsPanel = () => {
   return (
     <>
       <div className='flex flex-col pt-1 pb-3 px-12 justify-center items-start gap-3 self-stretch'>
         <div className='h-px self-stretch bg-divider-subtle'></div>
         <div className='flex items-center gap-2 self-stretch'>
-          {/* Filter goes here */}
+          {/* Filters go here */}
         </div>
       </div>
       <div className='flex px-12 items-start content-start gap-2 flex-grow self-stretch flex-wrap'>
-        {/* Plugin cards go here */}
+        <List />
       </div>
     </>
   )