feat: plugin homepage

web/app/(commonLayout)/plugins/Container.tsx

@@ -5,17 +5,21 @@ import { useTranslation } from 'react-i18next'
 import {
   RiArrowRightUpLine,
   RiBugLine,
+  RiClipboardLine,
   RiDragDropLine,
   RiEqualizer2Line,
 } from '@remixicon/react'
 import InstallPluginDropdown from './InstallPluginDropdown'
 import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
+import { useModalContext } from '@/context/modal-context'
 import Button from '@/app/components/base/button'
 import TabSlider from '@/app/components/base/tab-slider'
+import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
 
 const Container = () => {
   const { t } = useTranslation()
+  const { setShowPluginSettingModal } = useModalContext()
 
   const options = useMemo(() => {
     return [
@@ -56,14 +60,24 @@ const Container = () => {
                     </div>
                   </div>
                   <div className='flex flex-col items-start gap-0.5 self-stretch'>
-                    <div className='flex items-center gap-1 self-stretch'>
-                      <span className='flex w-10 flex-col justify-center items-start text-text-tertiary system-xs-medium'>Port</span>
-                    </div>
+                    {['Port', 'Key'].map((label, index) => (
+                      <div key={label} className='flex items-center gap-1 self-stretch'>
+                        <span className='flex w-10 flex-col justify-center items-start text-text-tertiary system-xs-medium'>{label}</span>
+                        <div className='flex justify-center items-center gap-0.5'>
+                          <span className='system-xs-medium text-text-secondary'>
+                            {index === 0 ? 'cloud.dify,ai:2048' : 'A1B2C3D4E5F6G7H8'}
+                          </span>
+                          <ActionButton>
+                            <RiClipboardLine className='w-3.5 h-3.5 text-text-tertiary' />
+                          </ActionButton>
+                        </div>
+                      </div>
+                    ))}
                   </div>
                 </>
               }
               popupClassName='flex flex-col items-start w-[256px] px-4 py-3.5 gap-1 border border-components-panel-border
-                  rounded-xl bg-components-tooltip-bg shadows-shadow-lg'
+                  rounded-xl bg-components-tooltip-bg shadows-shadow-lg z-50'
               asChild={false}
               position='bottom'
             >
@@ -71,7 +85,12 @@ const Container = () => {
                 <RiBugLine className='w-4 h-4' />
               </Button>
             </Tooltip>
-            <Button className='w-full h-full p-2 text-components-button-secondary-text'>
+            <Button
+              className='w-full h-full p-2 text-components-button-secondary-text group'
+              onClick={() => {
+                setShowPluginSettingModal()
+              }}
+            >
               <RiEqualizer2Line className='w-4 h-4' />
             </Button>
           </div>

web/app/(commonLayout)/plugins/InstallPluginDropdown.tsx

@@ -6,6 +6,7 @@ import Button from '@/app/components/base/button'
 import { MagicBox } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import { FileZip } from '@/app/components/base/icons/src/vender/solid/files'
 import { Github } from '@/app/components/base/icons/src/vender/solid/general'
+import cn from '@/utils/classnames'
 
 const InstallPluginDropdown = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
@@ -26,7 +27,7 @@ const InstallPluginDropdown = () => {
   return (
     <div className="relative" ref={menuRef}>
       <Button
-        className='w-full h-full p-2 text-components-button-secondary-text'
+        className={cn('w-full h-full p-2 text-components-button-secondary-text', isMenuOpen && 'bg-state-base-hover')}
         onClick={() => setIsMenuOpen(!isMenuOpen)}
       >
         <RiAddLine className='w-4 h-4' />

web/app/components/plugins/plugin-setting/modal.tsx

@@ -0,0 +1,81 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Modal from '@/app/components/base/modal'
+import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
+import Button from '@/app/components/base/button'
+
+enum PluginManagementOption {
+  Everyone = 'Everyone',
+  Admins = 'Admins',
+  NoOne = 'No one',
+}
+
+type Props = {
+  show: boolean
+  onHide: () => void
+}
+
+const PluginSettingModal: FC<Props> = ({
+  show,
+  onHide,
+}) => {
+  const { t } = useTranslation()
+  const [manageOption, setManageOption] = useState<PluginManagementOption>(PluginManagementOption.Everyone)
+  const [debugOption, setDebugOption] = useState<PluginManagementOption>(PluginManagementOption.Everyone)
+
+  return (
+    <Modal
+      isShow={show}
+      onClose={onHide}
+      closable
+      className='!p-0 w-[420px]'
+    >
+      <div className='flex flex-col items-start w-[420px] rounded-2xl border border-components-panel-border bg-components-panel-bg shadows-shadow-xl'>
+        <div className='flex pt-6 pb-3 pl-6 pr-14 items-start gap-2 self-stretch'>
+          <span className='self-stretch text-text-primary title-2xl-semi-bold'>Plugin Preferences</span>
+        </div>
+        <div className='flex px-6 py-3 flex-col justify-center items-start gap-4 self-stretch'>
+          {[
+            { title: 'Who can install and manage plugins?', key: 'manage', value: manageOption, setValue: setManageOption },
+            { title: 'Who can debug plugins?', key: 'debug', value: debugOption, setValue: setDebugOption },
+          ].map(({ title, key, value, setValue }) => (
+            <div key={key} className='flex flex-col items-start gap-1 self-stretch'>
+              <div className='flex m-h-6 items-center gap-0.5'>
+                <span className='text-text-secondary system-sm-semibold'>{title}</span>
+              </div>
+              <div className='flex items-start gap-2 justify-between w-full'>
+                {Object.values(PluginManagementOption).map(option => (
+                  <OptionCard
+                    key={option}
+                    title={option}
+                    onSelect={() => setValue(option)}
+                    selected={value === option}
+                    className="flex-1"
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className='flex h-[76px] p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+          <Button
+            className='min-w-[72px]'
+            onClick={onHide}
+          >
+            Cancel
+          </Button>
+          <Button
+            className='min-w-[72px]'
+            variant={'primary'}
+          >
+            Save
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default React.memo(PluginSettingModal)

web/context/modal-context.tsx

@@ -5,6 +5,7 @@ import { useCallback, useState } from 'react'
 import { createContext, useContext, useContextSelector } from 'use-context-selector'
 import { useRouter, useSearchParams } from 'next/navigation'
 import AccountSetting from '@/app/components/header/account-setting'
+import PluginSettingModal from '@/app/components/plugins/plugin-setting/modal'
 import ApiBasedExtensionModal from '@/app/components/header/account-setting/api-based-extension-page/modal'
 import ModerationSettingModal from '@/app/components/app/configuration/toolbox/moderation/moderation-setting-modal'
 import ExternalDataToolModal from '@/app/components/app/configuration/tools/external-data-tool-modal'
@@ -46,6 +47,7 @@ export type LoadBalancingEntryModalType = ModelModalType & {
 }
 export type ModalContextState = {
   setShowAccountSettingModal: Dispatch<SetStateAction<ModalState<string> | null>>
+  setShowPluginSettingModal: () => void
   setShowApiBasedExtensionModal: Dispatch<SetStateAction<ModalState<ApiBasedExtension> | null>>
   setShowModerationSettingModal: Dispatch<SetStateAction<ModalState<ModerationConfig> | null>>
   setShowExternalDataToolModal: Dispatch<SetStateAction<ModalState<ExternalDataTool> | null>>
@@ -57,6 +59,7 @@ export type ModalContextState = {
 }
 const ModalContext = createContext<ModalContextState>({
   setShowAccountSettingModal: () => { },
+  setShowPluginSettingModal: () => { },
   setShowApiBasedExtensionModal: () => { },
   setShowModerationSettingModal: () => { },
   setShowExternalDataToolModal: () => { },
@@ -92,6 +95,7 @@ export const ModalContextProvider = ({
   const router = useRouter()
   const [showPricingModal, setShowPricingModal] = useState(searchParams.get('show-pricing') === '1')
   const [showAnnotationFullModal, setShowAnnotationFullModal] = useState(false)
+  const [showPluginSettingModal, setShowPluginSettingModal] = useState(false)
   const handleCancelAccountSettingModal = () => {
     setShowAccountSettingModal(null)
     if (showAccountSettingModal?.onCancelCallback)
@@ -167,6 +171,7 @@ export const ModalContextProvider = ({
   return (
     <ModalContext.Provider value={{
       setShowAccountSettingModal,
+      setShowPluginSettingModal: () => setShowPluginSettingModal(true),
       setShowApiBasedExtensionModal,
       setShowModerationSettingModal,
       setShowExternalDataToolModal,
@@ -187,6 +192,15 @@ export const ModalContextProvider = ({
           )
         }
 
+        {
+          !!showPluginSettingModal && (
+            <PluginSettingModal
+              show={showPluginSettingModal}
+              onHide={() => setShowPluginSettingModal(false)}
+            />
+          )
+        }
+
         {
           !!showApiBasedExtensionModal && (
             <ApiBasedExtensionModal