add features

web/app/components/workflow/features.tsx

+import { memo } from 'react'
+import { useStore } from './store'
+import Button from '@/app/components/base/button'
+import {
+  Plus02,
+  XClose,
+} from '@/app/components/base/icons/src/vender/line/general'
+
+const Features = () => {
+  const showFeatures = useStore(state => state.showFeatures)
+  const setShowFeatures = useStore(state => state.setShowFeatures)
+
+  if (!showFeatures)
+    return null
+
+  return (
+    <div className='absolute top-2 left-2 bottom-2 w-[600px] rounded-2xl border-[0.5px] border-gray-200 bg-white shadow-xl z-10'>
+      <div className='flex items-center justify-between px-4 pt-3'>
+        Features
+        <div className='flex items-center'>
+          <Button className='px-3 py-0 h-8 rounded-lg border border-primary-100 bg-primary-25 shadow-xs text-xs font-semibold text-primary-600'>
+            <Plus02 className='mr-1 w-4 h-4' />
+            Add Features
+          </Button>
+          <div className='mx-3 w-[1px] h-[14px] bg-gray-200'></div>
+          <div
+            className='flex items-center justify-center w-6 h-6 cursor-pointer'
+            onClick={() => setShowFeatures(false)}
+          >
+            <XClose className='w-4 h-4 text-gray-500' />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default memo(Features)

web/app/components/workflow/header/index.tsx

 import type { FC } from 'react'
-import { memo } from 'react'
+import {
+  memo,
+  useCallback,
+} from 'react'
 import { useStore } from '../store'
 import RunAndHistory from './run-and-history'
 import Publish from './publish'
@@ -10,6 +13,11 @@ import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arr
 
 const Header: FC = () => {
   const mode = useStore(state => state.mode)
+  const setShowFeatures = useStore(state => state.setShowFeatures)
+
+  const handleShowFeatures = useCallback(() => {
+    setShowFeatures(true)
+  }, [setShowFeatures])
 
   return (
     <div
@@ -39,10 +47,13 @@ const Header: FC = () => {
         <div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div>
         {
           mode === 'workflow' && (
-            <Button className={`
+            <Button
+              className={`
                 mr-2 px-3 py-0 h-8 bg-white text-[13px] font-medium text-gray-700
                 border-[0.5px] border-gray-200 shadow-xs
-            `}>
+              `}
+              onClick={handleShowFeatures}
+            >
               <Grid01 className='mr-1 w-4 h-4 text-gray-500' />
               Features
             </Button>

web/app/components/workflow/index.tsx

@@ -19,6 +19,7 @@ import ZoomInOut from './zoom-in-out'
 import CustomEdge from './custom-edge'
 import CustomConnectionLine from './custom-connection-line'
 import Panel from './panel'
+import Features from './features'
 
 const nodeTypes = {
   custom: CustomNode,
@@ -54,6 +55,7 @@ const Workflow: FC<WorkflowProps> = memo(({
       <Header />
       <Panel />
       <ZoomInOut />
+      <Features />
       <ReactFlow
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}

web/app/components/workflow/store.ts

@@ -3,14 +3,18 @@ import { create } from 'zustand'
 type State = {
   mode: string
   showRunHistory: boolean
+  showFeatures: boolean
 }
 
 type Action = {
   setShowRunHistory: (showRunHistory: boolean) => void
+  setShowFeatures: (showFeatures: boolean) => void
 }
 
 export const useStore = create<State & Action>(set => ({
   mode: 'workflow',
   showRunHistory: false,
   setShowRunHistory: showRunHistory => set(() => ({ showRunHistory })),
+  showFeatures: false,
+  setShowFeatures: showFeatures => set(() => ({ showFeatures })),
 }))