feat: use-uploader hook

web/app/components/plugins/install-plugin/uploader.tsx

@@ -1,97 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React, { useEffect, useRef, useState } from 'react'
-import { useContext } from 'use-context-selector'
-import { ToastContext } from '@/app/components/base/toast'
-
-export type Props = {
-  file: File | undefined
-  updateFile: (file?: File) => void
-  className?: string
-}
-
-const Uploader: FC<Props> = ({
-  file,
-  updateFile,
-  className,
-}) => {
-  const { notify } = useContext(ToastContext)
-  const [dragging, setDragging] = useState(false)
-  const dropRef = useRef<HTMLDivElement>(null)
-  const dragRef = useRef<HTMLDivElement>(null)
-  const fileUploader = useRef<HTMLInputElement>(null)
-
-  const handleDragEnter = (e: DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    e.target !== dragRef.current && setDragging(true)
-  }
-
-  const handleDragOver = (e: DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }
-
-  const handleDragLeave = (e: DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    e.target === dragRef.current && setDragging(false)
-  }
-
-  const handleDrop = (e: DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    setDragging(false)
-    if (!e.dataTransfer)
-      return
-    const files = [...e.dataTransfer.files]
-    if (files.length > 1) {
-      // notify({ type: 'error', message: })
-    }
-    updateFile(files[0])
-  }
-
-  const selectHandle = () => {
-
-  }
-
-  const fileChangeHandle = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const currentFile = e.target.files?.[0]
-    updateFile(currentFile)
-  }
-
-  useEffect(() => {
-    dropRef.current?.addEventListener('dragenter', handleDragEnter)
-    dropRef.current?.addEventListener('dragover', handleDragOver)
-    dropRef.current?.addEventListener('dragleave', handleDragLeave)
-    dropRef.current?.addEventListener('drop', handleDrop)
-    return () => {
-      dropRef.current?.removeEventListener('dragenter', handleDragEnter)
-      dropRef.current?.removeEventListener('dragover', handleDragOver)
-      dropRef.current?.removeEventListener('dragleave', handleDragLeave)
-      dropRef.current?.removeEventListener('drop', handleDrop)
-    }
-  }, [])
-
-  return (
-    <>
-      <input
-        ref={fileUploader}
-        style={{ display: 'none' }}
-        type="file"
-        id="fileUploader"
-        accept='.difypkg'
-        onChange={fileChangeHandle}
-      />
-      {dragging && (
-        <div
-          ref={dragRef}
-          className='flex w-full h-full p-2 items-start gap-2 absolute left-1 bottom-[3px]
-            rounded-2xl border-2 border-dashed bg-components-dropzone-bg-accent'>
-        </div>
-      )}
-    </>
-  )
-}
-
-export default React.memo(Uploader)

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

@@ -1,18 +1,21 @@
 'use client'
 
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   RiArrowRightUpLine,
   RiBugLine,
   RiClipboardLine,
+  RiDragDropLine,
   RiEqualizer2Line,
 } from '@remixicon/react'
+import InstallFromLocalPackage from '../install-plugin/install-from-local-package'
 import {
   PluginPageContextProvider,
   usePluginPageContext,
 } from './context'
 import InstallPluginDropdown from './install-plugin-dropdown'
+import { useUploader } from './use-uploader'
 import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import { useModalContext } from '@/context/modal-context'
 import Button from '@/app/components/base/button'
@@ -31,9 +34,15 @@ const PluginPage = ({
 }: PluginPageProps) => {
   const { t } = useTranslation()
   const { setShowPluginSettingModal } = useModalContext() as any
+  const [currentFile, setCurrentFile] = useState<File | null>(null)
   const containerRef = usePluginPageContext(v => v.containerRef)
   const scrollDisabled = usePluginPageContext(v => v.scrollDisabled)
 
+  const { dragging, fileUploader, fileChangeHandle, removeFile } = useUploader({
+    onFileChange: setCurrentFile,
+    containerRef,
+  })
+
   const options = useMemo(() => {
     return [
       { value: 'plugins', text: t('common.menus.plugins') },
@@ -98,7 +107,7 @@ const PluginPage = ({
                 </>
               }
               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 z-50'
+                rounded-xl bg-components-tooltip-bg shadows-shadow-lg z-50'
               asChild={false}
               position='bottom'
             >
@@ -117,12 +126,35 @@ const PluginPage = ({
           </div>
         </div>
       </div>
-      {
-        activeTab === 'plugins' && plugins
-      }
+      {activeTab === 'plugins' && (
+        <>
+          {plugins}
+          {dragging && (
+            <div
+              className="absolute inset-0 m-0.5 p-2 rounded-2xl bg-[rgba(21,90,239,0.14)] border-2
+                  border-dashed border-components-dropzone-border-accent">
+            </div>
+          )}
+          <div className={`flex py-4 justify-center items-center gap-2 ${dragging ? 'text-text-accent' : 'text-text-quaternary'}`}>
+            <RiDragDropLine className="w-4 h-4" />
+            <span className="system-xs-regular">Drop plugin package here to install</span>
+          </div>
+          {currentFile && (
+            <InstallFromLocalPackage file={currentFile} onClose={removeFile} />
+          )}
+        </>
+      )}
       {
         activeTab === 'discover' && marketplace
       }
+      <input
+        ref={fileUploader}
+        className="hidden"
+        type="file"
+        id="fileUploader"
+        accept='.difypkg'
+        onChange={fileChangeHandle}
+      />
     </div>
   )
 }

web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { RiAddLine, RiArrowDownSLine } from '@remixicon/react'
 import Button from '@/app/components/base/button'
 import { MagicBox } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
@@ -10,13 +10,17 @@ import InstallFromMarketplace from '@/app/components/plugins/install-plugin/inst
 import InstallFromGitHub from '@/app/components/plugins/install-plugin/install-from-github'
 import InstallFromLocalPackage from '@/app/components/plugins/install-plugin/install-from-local-package'
 import cn from '@/utils/classnames'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
 
 const InstallPluginDropdown = () => {
   const fileInputRef = useRef<HTMLInputElement>(null)
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [selectedAction, setSelectedAction] = useState<string | null>(null)
   const [selectedFile, setSelectedFile] = useState<File | null>(null)
-  const menuRef = useRef<HTMLDivElement>(null)
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0]
@@ -27,76 +31,71 @@ const InstallPluginDropdown = () => {
     }
   }
 
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(event.target as Node))
-        setIsMenuOpen(false)
-    }
-
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [])
-
   return (
-    <div className="relative" ref={menuRef}>
-      <Button
-        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' />
-        <span className='pl-1'>Install plugin</span>
-        <RiArrowDownSLine className='w-4 h-4 ml-1' />
-      </Button>
-      {isMenuOpen && (
-        <div className='flex flex-col items-start absolute z-1000 top-full left-0 mt-1 p-1 pb-2
-        w-[200px] bg-components-panel-bg-blur border border-components-panel-border rounded-xl
-        shadows-shadow-lg'>
-          <span className='flex pt-1 pb-0.5 pl-2 pr-3 items-start self-stretch text-text-tertiary
-          system-xs-medium-uppercase'>
-            Install Form
-          </span>
-          <input
-            type='file'
-            ref={fileInputRef}
-            style={{ display: 'none' }}
-            onChange={handleFileChange}
-            accept='.difypkg'
-          />
-          {[
-            { icon: MagicBox, text: 'Marketplace', action: 'marketplace' },
-            { icon: Github, text: 'GitHub', action: 'github' },
-            { icon: FileZip, text: 'Local Package File', action: 'local' },
-          ].map(({ icon: Icon, text, action }) => (
-            <div
-              key={action}
-              className='flex items-center w-full px-2 py-1.5 gap-1 rounded-lg hover:bg-state-base-hover cursor-pointer'
-              onClick={() => {
-                if (action === 'local') {
-                  fileInputRef.current?.click()
-                }
-                else {
-                  setSelectedAction(action)
-                  setIsMenuOpen(false)
-                }
-              }}
-            >
-              <Icon className="w-4 h-4 text-text-tertiary" />
-              <span className='px-1 text-text-secondary system-md-regular'>{text}</span>
+    <PortalToFollowElem
+      open={isMenuOpen}
+      onOpenChange={setIsMenuOpen}
+      placement='bottom-start'
+      offset={4}
+    >
+      <div className="relative">
+        <PortalToFollowElemTrigger onClick={() => setIsMenuOpen(v => !v)}>
+          <Button
+            className={cn('w-full h-full p-2 text-components-button-secondary-text', isMenuOpen && 'bg-state-base-hover')}
+          >
+            <RiAddLine className='w-4 h-4' />
+            <span className='pl-1'>Install plugin</span>
+            <RiArrowDownSLine className='w-4 h-4 ml-1' />
+          </Button>
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[1002]'>
+          <div className='flex flex-col p-1 pb-2 items-start w-[200px] bg-components-panel-bg-blur border border-components-panel-border rounded-xl shadows-shadow-lg'>
+            <span className='flex pt-1 pb-0.5 pl-2 pr-3 items-start self-stretch text-text-tertiary system-xs-medium-uppercase'>
+              Install Form
+            </span>
+            <input
+              type='file'
+              ref={fileInputRef}
+              style={{ display: 'none' }}
+              onChange={handleFileChange}
+              accept='.difypkg'
+            />
+            <div className='p-1 w-full'>
+              {[
+                { icon: MagicBox, text: 'Marketplace', action: 'marketplace' },
+                { icon: Github, text: 'GitHub', action: 'github' },
+                { icon: FileZip, text: 'Local Package File', action: 'local' },
+              ].map(({ icon: Icon, text, action }) => (
+                <div
+                  key={action}
+                  className='flex items-center w-full px-2 py-1.5 gap-1 rounded-lg hover:bg-state-base-hover cursor-pointer'
+                  onClick={() => {
+                    if (action === 'local') {
+                      fileInputRef.current?.click()
+                    }
+                    else {
+                      setSelectedAction(action)
+                      setIsMenuOpen(false)
+                    }
+                  }}
+                >
+                  <Icon className="w-4 h-4 text-text-tertiary" />
+                  <span className='px-1 text-text-secondary system-md-regular'>{text}</span>
+                </div>
+              ))}
             </div>
-          ))}
-        </div>
-      )}
+          </div>
+        </PortalToFollowElemContent>
+      </div>
       {selectedAction === 'marketplace' && <InstallFromMarketplace onClose={() => setSelectedAction(null)} />}
       {selectedAction === 'github' && <InstallFromGitHub onClose={() => setSelectedAction(null)}/>}
       {selectedAction === 'local' && selectedFile
-          && (<InstallFromLocalPackage
-            file={selectedFile}
-            onClose={() => setSelectedAction(null)}/>
-          )
+        && (<InstallFromLocalPackage
+          file={selectedFile}
+          onClose={() => setSelectedAction(null)}/>
+        )
       }
-    </div>
+    </PortalToFollowElem>
   )
 }
 

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

@@ -1,7 +1,5 @@
 'use client'
 
-import { RiDragDropLine } from '@remixicon/react'
-
 const PluginsPanel = () => {
   return (
     <>
@@ -14,10 +12,6 @@ const PluginsPanel = () => {
       <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>
     </>
   )
 }

web/app/components/plugins/plugin-page/use-uploader.ts

@@ -0,0 +1,78 @@
+import { useEffect, useRef, useState } from 'react'
+
+type UploaderHookProps = {
+  onFileChange: (file: File | null) => void
+  containerRef: React.RefObject<HTMLDivElement>
+}
+
+export const useUploader = ({ onFileChange, containerRef }: UploaderHookProps) => {
+  const [dragging, setDragging] = useState(false)
+  const fileUploader = useRef<HTMLInputElement>(null)
+
+  const handleDragEnter = (e: DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.dataTransfer?.types.includes('Files'))
+      setDragging(true)
+  }
+
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  const handleDragLeave = (e: DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.relatedTarget === null || !containerRef.current?.contains(e.relatedTarget as Node))
+      setDragging(false)
+  }
+
+  const handleDrop = (e: DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setDragging(false)
+    if (!e.dataTransfer)
+      return
+    const files = [...e.dataTransfer.files]
+    if (files.length > 0)
+      onFileChange(files[0])
+  }
+
+  const fileChangeHandle = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0] || null
+    onFileChange(file)
+  }
+
+  const removeFile = () => {
+    if (fileUploader.current)
+      fileUploader.current.value = ''
+
+    onFileChange(null)
+  }
+
+  useEffect(() => {
+    const current = containerRef.current
+    if (current) {
+      current.addEventListener('dragenter', handleDragEnter)
+      current.addEventListener('dragover', handleDragOver)
+      current.addEventListener('dragleave', handleDragLeave)
+      current.addEventListener('drop', handleDrop)
+    }
+    return () => {
+      if (current) {
+        current.removeEventListener('dragenter', handleDragEnter)
+        current.removeEventListener('dragover', handleDragOver)
+        current.removeEventListener('dragleave', handleDragLeave)
+        current.removeEventListener('drop', handleDrop)
+      }
+    }
+  }, [containerRef])
+
+  return {
+    dragging,
+    fileUploader,
+    fileChangeHandle,
+    removeFile,
+  }
+}