marketplace

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

@@ -1,29 +1,49 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import { useRef } from 'react'
-import { createContext } from 'use-context-selector'
+import {
+  useRef,
+  useState,
+} from 'react'
+import {
+  createContext,
+  useContextSelector,
+} from 'use-context-selector'
 
 export type PluginPageContextValue = {
   containerRef: React.RefObject<HTMLDivElement>
+  scrollDisabled: boolean
+  setScrollDisabled: (scrollDisabled: boolean) => void
 }
 
 export const PluginPageContext = createContext<PluginPageContextValue>({
   containerRef: { current: null },
+  scrollDisabled: false,
+  setScrollDisabled: () => {},
 })
 
 type PluginPageContextProviderProps = {
   children: ReactNode
 }
 
+export function usePluginPageContext(selector: (value: PluginPageContextValue) => any) {
+  return useContextSelector(PluginPageContext, selector)
+}
+
 export const PluginPageContextProvider = ({
   children,
 }: PluginPageContextProviderProps) => {
   const containerRef = useRef<HTMLDivElement>(null)
+  const [scrollDisabled, setScrollDisabled] = useState(false)
+
   return (
-    <PluginPageContext.Provider value={{
-      containerRef,
-    }}>
+    <PluginPageContext.Provider
+      value={{
+        containerRef,
+        scrollDisabled,
+        setScrollDisabled,
+      }}
+    >
       {children}
     </PluginPageContext.Provider>
   )

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

@@ -2,7 +2,6 @@
 
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContextSelector } from 'use-context-selector'
 import {
   RiArrowRightUpLine,
   RiBugLine,
@@ -10,8 +9,8 @@ import {
   RiEqualizer2Line,
 } from '@remixicon/react'
 import {
-  PluginPageContext,
   PluginPageContextProvider,
+  usePluginPageContext,
 } from './context'
 import InstallPluginDropdown from './install-plugin-dropdown'
 import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
@@ -32,7 +31,8 @@ const PluginPage = ({
 }: PluginPageProps) => {
   const { t } = useTranslation()
   const { setShowPluginSettingModal } = useModalContext() as any
-  const containerRef = useContextSelector(PluginPageContext, v => v.containerRef)
+  const containerRef = usePluginPageContext(v => v.containerRef)
+  const scrollDisabled = usePluginPageContext(v => v.scrollDisabled)
 
   const options = useMemo(() => {
     return [
@@ -51,9 +51,14 @@ const PluginPage = ({
       className={cn('grow relative flex flex-col overflow-y-auto border-t border-divider-subtle', activeTab === 'plugins'
         ? 'rounded-t-xl bg-components-panel-bg'
         : 'bg-background-body',
+      activeTab === 'discover' && scrollDisabled && 'overflow-hidden',
       )}
     >
-      <div className='sticky top-0 flex min-h-[60px] px-12 pt-4 pb-2 items-center self-stretch gap-1'>
+      <div
+        className={cn(
+          'sticky top-0 flex min-h-[60px] px-12 pt-4 pb-2 items-center self-stretch gap-1',
+        )}
+      >
         <div className='flex justify-between items-center w-full'>
           <div className='flex-1'>
             <TabSlider

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

@@ -0,0 +1,25 @@
+'use client'
+
+import { RiDragDropLine } from '@remixicon/react'
+
+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 */}
+        </div>
+      </div>
+      <div className='flex px-12 items-start content-start gap-2 flex-grow self-stretch flex-wrap'>
+        {/* Plugin cards go here */}
+      </div>
+      <div className='flex items-center justify-center py-4 gap-2 text-text-quaternary'>
+        <RiDragDropLine className='w-4 h-4' />
+        <span className='system-xs-regular'>Drop plugin package here to install</span>
+      </div>
+    </>
+  )
+}
+
+export default PluginsPanel