feat: siderbar operation support portal (#1061)

web/app/components/explore/item-operation/index.tsx

@@ -1,15 +1,17 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
+import { useBoolean } from 'ahooks'
 import { Edit03, Pin02, Trash03 } from '../../base/icons/src/vender/line/general'
 
 import s from './style.module.css'
-import Popover from '@/app/components/base/popover'
+import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 
 export type IItemOperationProps = {
   className?: string
+  isItemHovering: boolean
   isPinned: boolean
   isShowRenameConversation?: boolean
   onRenameConversation?: () => void
@@ -20,6 +22,7 @@ export type IItemOperationProps = {
 
 const ItemOperation: FC<IItemOperationProps> = ({
   className,
+  isItemHovering,
   isPinned,
   togglePin,
   isShowRenameConversation,
@@ -28,13 +31,37 @@ const ItemOperation: FC<IItemOperationProps> = ({
   onDelete,
 }) => {
   const { t } = useTranslation()
-
+  const [open, setOpen] = useState(false)
+  const ref = useRef(null)
+  const [isHovering, { setTrue: setIsHovering, setFalse: setNotHovering }] = useBoolean(false)
+  useEffect(() => {
+    if (!isItemHovering && !isHovering)
+      setOpen(false)
+  }, [isItemHovering, isHovering])
   return (
-    <Popover
-      htmlContent={
-        <div className='w-full py-1' onClick={(e) => {
-          e.stopPropagation()
-        }}>
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-end'
+      offset={4}
+    >
+      <PortalToFollowElemTrigger
+        onClick={() => setOpen(v => !v)}
+      >
+        <div className={cn(className, s.btn, 'h-6 w-6 rounded-md border-none py-1', open && `${s.open} !bg-gray-100 !shadow-none`)}></div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent
+        className="z-50"
+      >
+        <div
+          ref={ref}
+          className={'min-w-[120px] p-1 bg-white rounded-lg border border--gray-200 shadow-lg'}
+          onMouseEnter={setIsHovering}
+          onMouseLeave={setNotHovering}
+          onClick={(e) => {
+            e.stopPropagation()
+          }}
+        >
           <div className={cn(s.actionItem, 'hover:bg-gray-50 group')} onClick={togglePin}>
             <Pin02 className='shrink-0 w-4 h-4 text-gray-500'/>
             <span className={s.actionName}>{isPinned ? t('explore.sidebar.action.unpin') : t('explore.sidebar.action.pin')}</span>
@@ -51,15 +78,9 @@ const ItemOperation: FC<IItemOperationProps> = ({
               <span className={cn(s.actionName, s.deleteActionItemChild)}>{t('explore.sidebar.action.delete')}</span>
             </div>
           )}
-
         </div>
-      }
-      trigger='click'
-      position='br'
-      btnElement={<div />}
-      btnClassName={open => cn(className, s.btn, 'h-6 w-6 rounded-md border-none py-1', open && '!bg-gray-100 !shadow-none')}
-      className={'!w-[120px] !px-0 h-fit !z-20'}
-    />
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
   )
 }
 export default React.memo(ItemOperation)

web/app/components/explore/item-operation/style.module.css

@@ -2,7 +2,6 @@
   @apply h-9 py-2 px-3 mx-1 flex items-center gap-2 rounded-lg cursor-pointer;
 }
 
-
 .actionName {
   @apply text-gray-700 text-sm;
 }
@@ -19,14 +18,13 @@
   mask-image: url(~@/assets/action.svg);
 }
 
-body .btn {
+body .btn.open,
+body .btn:hover {
   background: url(~@/assets/action.svg) center center no-repeat transparent;
   background-size: 16px 16px;
-  /* mask-image: ; */
 }
 
 body .btn:hover {
-  /* background-image: ; */
   background-color: #F2F4F7;
 }