feat: op ui

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

@@ -0,0 +1,34 @@
+'use client'
+import React, { FC } from 'react'
+import cn from 'classnames'
+import Popover from '@/app/components/base/popover'
+import { TrashIcon } from '@heroicons/react/24/outline'
+
+import s from './style.module.css'
+
+export interface IItemOperationProps {
+  className?: string
+}
+
+const ItemOperation: FC<IItemOperationProps> = ({
+  className,
+}) => {
+  return (
+    <Popover
+      htmlContent={
+        <div className='w-full py-1'>
+          <div className={cn(s.actionItem, s.deleteActionItem, 'hover:bg-gray-50 group')} onClick={() => {}}>
+            <TrashIcon className={'w-4 h-4 stroke-current text-gray-500 stroke-2 group-hover:text-red-500'} />
+            <span className={cn(s.actionName, 'group-hover:text-red-500')}>{'Delete'}</span>
+          </div>
+        </div>
+      }
+      trigger='click'
+      position='br'
+      btnElement={<div className={cn(s.actionIcon, s.commonIcon)} />}
+      btnClassName={(open) => cn(className, 'h-6 w-6 rounded-md border-none p-1 bg-transparent hover:bg-gray-100', open && '!bg-gray-100 !shadow-none')}
+      className={`!w-[200px] h-fit !z-20`}
+    />
+  )
+}
+export default React.memo(ItemOperation)

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

@@ -0,0 +1,20 @@
+.actionItem {
+  @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;
+}
+
+.commonIcon {
+  @apply w-4 h-4 inline-block align-middle;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: contain;
+}
+
+.actionIcon {
+  @apply bg-gray-500;
+  mask-image: url(~@/app/components/datasets/documents/assets/action.svg);
+}

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

@@ -1,6 +1,7 @@
 'use client'
 import cn from 'classnames'
 import Link from 'next/link'
+import ItemOperation from '@/app/components/explore/item-operation'
 
 import s from './style.module.css'
 
@@ -23,7 +24,7 @@ export default function NavLink({
       className={cn(
         s.item,
         isSelected && s.active,
-        'flex h-8 items-center px-2 rounded-lg text-sm font-normal',
+        'flex h-8 items-center px-2 rounded-lg text-sm font-normal hover:bg-gray-200',
       )}
     >
       <div
@@ -35,6 +36,9 @@ export default function NavLink({
         }}
       />
       <div className='overflow-hidden text-ellipsis whitespace-nowrap'>{name}</div>
+      <div onClick={e => e.stopPropagation()}>
+        <ItemOperation className={s.opBtn} />
+      </div>
     </Link>
   )
 }

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

@@ -6,4 +6,8 @@
   background: #FFFFFF;
   color: #344054;
   font-weight: 500;
+}
+
+.item:hover .opBtn {
+  background-color: #F2F4F7;
 }