From 7f2980fbc0776e8141b01b00b30e89936d1bd1dc Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 31 Oct 2024 16:10:48 +0800
Subject: [PATCH] chore: fix index show

---
 web/app/components/workflow/block-selector/index-bar.tsx      | 2 +-
 .../workflow/block-selector/tool/tool-list-flat-view/list.tsx | 4 +++-
 web/app/components/workflow/block-selector/tool/tool.tsx      | 3 +--
 web/app/components/workflow/block-selector/tools.tsx          | 1 +
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/web/app/components/workflow/block-selector/index-bar.tsx b/web/app/components/workflow/block-selector/index-bar.tsx
index 076d7e7ec9..d932239bcb 100644
--- a/web/app/components/workflow/block-selector/index-bar.tsx
+++ b/web/app/components/workflow/block-selector/index-bar.tsx
@@ -78,7 +78,7 @@ const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs }) => {
       element.scrollIntoView({ behavior: 'smooth' })
   }
   return (
-    <div className="index-bar absolute right-4 top-36 flex flex-col items-center w-6 justify-center text-xs font-medium text-text-quaternary ">
+    <div className="index-bar absolute right-0 top-36 flex flex-col items-center w-6 justify-center text-xs font-medium text-text-quaternary ">
       <div className='absolute left-0 top-0 h-full w-px bg-[linear-gradient(270deg,rgba(255,255,255,0)_0%,rgba(16,24,40,0.08)_30%,rgba(16,24,40,0.08)_50%,rgba(16,24,40,0.08)_70.5%,rgba(255,255,255,0)_100%)]'></div>
       {letters.map(letter => (
         <div className="hover:text-text-secondary cursor-pointer" key={letter} onClick={() => handleIndexClick(letter)}>
diff --git a/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx b/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx
index c59f67e66c..7f04a90bb3 100644
--- a/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx
@@ -9,11 +9,13 @@ import { ViewType } from '../../view-type-select'
 
 type Props = {
   payload: ToolWithProvider[]
+  isShowLetterIndex: boolean
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
 }
 
 const ToolViewFlatView: FC<Props> = ({
   payload,
+  isShowLetterIndex,
   onSelect,
 }) => {
   return (
@@ -23,7 +25,7 @@ const ToolViewFlatView: FC<Props> = ({
           key={tool.id}
           payload={tool}
           viewType={ViewType.flat}
-          isShowLetterIndex={false}
+          isShowLetterIndex={isShowLetterIndex}
           onSelect={onSelect}
         />
       ))}
diff --git a/web/app/components/workflow/block-selector/tool/tool.tsx b/web/app/components/workflow/block-selector/tool/tool.tsx
index 958be74143..679f0b0e2e 100644
--- a/web/app/components/workflow/block-selector/tool/tool.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool.tsx
@@ -56,7 +56,7 @@ const Tool: FC<Props> = ({
   return (
     <div
       key={payload.id}
-      className='mb-1 last-of-type:mb-0'
+      className={cn('mb-1 last-of-type:mb-0', isShowLetterIndex && 'mr-6')}
     >
       <div className={cn(className)}>
         <div
@@ -99,7 +99,6 @@ const Tool: FC<Props> = ({
           actions.map(action => (
             <ActonItem
               key={action.name}
-              className={cn(isShowLetterIndex && 'mr-6')}
               provider={payload}
               payload={action}
               onSelect={onSelect}
diff --git a/web/app/components/workflow/block-selector/tools.tsx b/web/app/components/workflow/block-selector/tools.tsx
index 5bc3af3a77..b7a123eb9b 100644
--- a/web/app/components/workflow/block-selector/tools.tsx
+++ b/web/app/components/workflow/block-selector/tools.tsx
@@ -88,6 +88,7 @@ const Blocks = ({
         isFlatView ? (
           <ToolListFlatView
             payload={listViewToolData}
+            isShowLetterIndex={isShowLetterIndex}
             onSelect={onSelect}
           />
         ) : (