From 3401949be99ffcab773805420713b6b255867987 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=87=91=E4=BC=9F=E5=BC=BA?= <iamjoel007@gmail.com>
Date: Thu, 18 May 2023 18:52:25 +0800
Subject: [PATCH] feat: op ui

---
 .../explore/item-operation/index.tsx          | 34 +++++++++++++++++++
 .../explore/item-operation/style.module.css   | 20 +++++++++++
 .../explore/sidebar/app-nav-item/index.tsx    |  6 +++-
 .../sidebar/app-nav-item/style.module.css     |  4 +++
 4 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 web/app/components/explore/item-operation/index.tsx
 create mode 100644 web/app/components/explore/item-operation/style.module.css

diff --git a/web/app/components/explore/item-operation/index.tsx b/web/app/components/explore/item-operation/index.tsx
new file mode 100644
index 0000000000..d4b4253382
--- /dev/null
+++ b/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)
diff --git a/web/app/components/explore/item-operation/style.module.css b/web/app/components/explore/item-operation/style.module.css
new file mode 100644
index 0000000000..738b07ac0d
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/web/app/components/explore/sidebar/app-nav-item/index.tsx b/web/app/components/explore/sidebar/app-nav-item/index.tsx
index caae2f80de..2e1b64b33a 100644
--- a/web/app/components/explore/sidebar/app-nav-item/index.tsx
+++ b/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>
   )
 }
diff --git a/web/app/components/explore/sidebar/app-nav-item/style.module.css b/web/app/components/explore/sidebar/app-nav-item/style.module.css
index f10b0d11ba..4b7fcc5bcb 100644
--- a/web/app/components/explore/sidebar/app-nav-item/style.module.css
+++ b/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;
 }
\ No newline at end of file