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;
 }
 

web/app/components/explore/sidebar/app-nav-item/index.tsx

@@ -1,6 +1,9 @@
 'use client'
 import cn from 'classnames'
+import React, { useRef } from 'react'
+
 import { useRouter } from 'next/navigation'
+import { useHover } from 'ahooks'
 import s from './style.module.css'
 import ItemOperation from '@/app/components/explore/item-operation'
 import AppIcon from '@/app/components/base/app-icon'
@@ -30,35 +33,30 @@ export default function AppNavItem({
 }: IAppNavItemProps) {
   const router = useRouter()
   const url = `/explore/installed/${id}`
-
+  const ref = useRef(null)
+  const isHovering = useHover(ref)
   return (
     <div
+      ref={ref}
       key={id}
       className={cn(
         s.item,
         isSelected ? s.active : 'hover:bg-gray-200',
-        'flex h-8 justify-between px-2 rounded-lg text-sm font-normal ',
+        'flex h-8 items-center justify-between px-2 rounded-lg text-sm font-normal ',
       )}
       onClick={() => {
         router.push(url) // use Link causes popup item always trigger jump. Can not be solved by e.stopPropagation().
       }}
     >
       <div className='flex items-center space-x-2 w-0 grow'>
-        {/* <div
-          className={cn(
-            'shrink-0 mr-2 h-6 w-6 rounded-md border bg-[#D5F5F6]',
-          )}
-          style={{
-            borderColor: '0.5px solid rgba(0, 0, 0, 0.05)'
-          }}
-        /> */}
         <AppIcon size='tiny' icon={icon} background={icon_background} />
         <div className='overflow-hidden text-ellipsis whitespace-nowrap'>{name}</div>
       </div>
       {
-        <div className={cn(s.opBtn, 'shrink-0')} onClick={e => e.stopPropagation()}>
+        <div className='shrink-0 h-6' onClick={e => e.stopPropagation()}>
           <ItemOperation
             isPinned={isPinned}
+            isItemHovering={isHovering}
             togglePin={togglePin}
             isShowDelete={!uninstallable && !isSelected}
             onDelete={() => onDelete(id)}

web/app/components/explore/sidebar/app-nav-item/style.module.css

@@ -6,12 +6,4 @@
   background: #FFFFFF;
   color: #344054;
   font-weight: 500;
-}
-
-.opBtn {
-  visibility: hidden;
-}
-
-.item:hover .opBtn {
-  visibility: visible;
 }

web/app/components/explore/sidebar/index.tsx

@@ -106,7 +106,7 @@ const SideBar: FC<{
       {installedApps.length > 0 && (
         <div className='mt-10'>
           <div className='pl-2 text-xs text-gray-500 font-medium uppercase'>{t('explore.sidebar.workspace')}</div>
-          <div className='mt-3 space-y-1 overflow-y-auto overflow-x-hidden pb-20'
+          <div className='mt-3 space-y-1 overflow-y-auto overflow-x-hidden'
             style={{
               maxHeight: 'calc(100vh - 250px)',
             }}