add features

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

@@ -1,5 +1,8 @@
 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={`
-              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
-            `}>
+            <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>