From 66be03f6229bbb1f0185e0312a93a5c228b1f9ee Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 1 Nov 2024 14:02:10 +0800
Subject: [PATCH] fix: search tools ui and some ui problem

---
 .../market-place-plugin/list.tsx              | 12 ++++++----
 .../workflow/block-selector/tool-picker.tsx   | 22 +++++++++++--------
 web/i18n/en-US/plugin.ts                      |  1 +
 web/i18n/zh-Hans/plugin.ts                    |  1 +
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
index 3da4e04af5..6c82bd5c0c 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
@@ -1,5 +1,5 @@
 'use client'
-import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react'
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import useStickyScroll, { ScrollPosition } from '../use-sticky-scroll'
 import Item from './item'
@@ -30,7 +30,6 @@ const List = ({
     wrapElemRef,
     nextToStickyELemRef,
   })
-
   const stickyClassName = useMemo(() => {
     switch (scrollPosition) {
       case ScrollPosition.aboveTheWrap:
@@ -38,7 +37,7 @@ const List = ({
       case ScrollPosition.showing:
         return 'bottom-0 pt-3 pb-1'
       case ScrollPosition.belowTheWrap:
-        return 'bottom-0 items-center rounded-b-xl border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg cursor-pointer'
+        return 'bottom-0 items-center rounded-b-xl border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg rounded-b-lg cursor-pointer'
     }
   }, [scrollPosition])
 
@@ -46,6 +45,11 @@ const List = ({
     handleScroll,
   }))
 
+  useEffect(() => {
+    handleScroll()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [list])
+
   const handleHeadClick = () => {
     if (scrollPosition === ScrollPosition.belowTheWrap) {
       nextToStickyELemRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
@@ -57,7 +61,7 @@ const List = ({
   if (hasSearchText) {
     return (
       <Link
-        className='sticky bottom-0 z-10 flex h-8 px-4 py-1 system-sm-medium items-center rounded-b-xl border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur  shadow-lg text-text-accent-light-mode-only cursor-pointer'
+        className='sticky bottom-0 z-10 flex h-8 px-4 py-1 system-sm-medium items-center border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-b-lg shadow-lg text-text-accent-light-mode-only cursor-pointer'
         href={`${marketplaceUrlPrefix}/plugins`}
         target='_blank'
       >
diff --git a/web/app/components/workflow/block-selector/tool-picker.tsx b/web/app/components/workflow/block-selector/tool-picker.tsx
index 9ae8d625f9..f06bef73b9 100644
--- a/web/app/components/workflow/block-selector/tool-picker.tsx
+++ b/web/app/components/workflow/block-selector/tool-picker.tsx
@@ -20,6 +20,7 @@ import {
 } from '@/service/tools'
 import type { BlockEnum, ToolWithProvider } from '@/app/components/workflow/types'
 import SearchBox from '@/app/components/plugins/marketplace/search-box'
+import { useTranslation } from 'react-i18next'
 
 type Props = {
   disabled: boolean
@@ -42,6 +43,7 @@ const ToolPicker: FC<Props> = ({
   onSelect,
   supportAddCustomTool,
 }) => {
+  const { t } = useTranslation()
   const [searchText, setSearchText] = useState('')
 
   const [buildInTools, setBuildInTools] = useState<ToolWithProvider[]>([])
@@ -83,15 +85,17 @@ const ToolPicker: FC<Props> = ({
       </PortalToFollowElemTrigger>
 
       <PortalToFollowElemContent className='z-[1000]'>
-        <div className="relative w-[320px] min-h-20 bg-white">
-          <SearchBox
-            search={searchText}
-            onSearchChange={setSearchText}
-            tags={[]}
-            onTagsChange={() => {}}
-            size='small'
-            placeholder='Search tools...'
-          />
+        <div className="relative w-[320px] min-h-20 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
+          <div className='p-2 pb-1'>
+            <SearchBox
+              search={searchText}
+              onSearchChange={setSearchText}
+              tags={[]}
+              onTagsChange={() => { }}
+              size='small'
+              placeholder={t('plugin.searchTools')!}
+            />
+          </div>
           <AllTools
             className='mt-1'
             searchText={searchText}
diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts
index 0801ee21b6..d9897445bf 100644
--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@@ -4,6 +4,7 @@ const translation = {
   searchInMarketplace: 'Search in Marketplace',
   fromMarketplace: 'From Marketplace',
   endpointsEnabled: '{{num}} sets of endpoints enabled',
+  searchTools: 'Search tools...',
   detailPanel: {
     categoryTip: {
       marketplace: 'Installed from Marketplace',
diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts
index a8b8b2dafa..5ced92c19e 100644
--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@@ -4,6 +4,7 @@ const translation = {
   searchInMarketplace: '在 Marketplace 中搜索',
   fromMarketplace: '来自市场',
   endpointsEnabled: '{{num}} 组端点已启用',
+  searchTools: '搜索工具...',
   detailPanel: {
     categoryTip: {
       marketplace: '从 Marketplace 安装',