chore: node new toolbar

web/app/components/workflow/block-selector/all-tools.tsx

@@ -109,7 +109,7 @@ const AllTools = ({
 
   return (
     <div className={cn(className)}>
-      <div className='flex items-center justify-between border-b-[0.5px] border-divider-subtle bg-background-default-hover px-3 shadow-xs'>
+      <div className='flex items-center justify-between border-b border-divider-subtle px-3'>
         <div className='flex h-8 items-center space-x-1'>
           {
             tabs.map(tab => (

web/app/components/workflow/block-selector/index.tsx

@@ -129,7 +129,11 @@ const NodeSelector: FC<NodeSelectorProps> = ({
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[1000]'>
         <div className={`rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg ${popupClassName}`}>
-          <div className='px-2 pt-2' onClick={e => e.stopPropagation()}>
+          <Tabs
+            activeTab={activeTab}
+            onActiveTabChange={handleActiveTabChange}
+            filterElem={
+              <div className='relative m-2' onClick={e => e.stopPropagation()}>
                 {activeTab === TabsEnum.Blocks && (
                   <Input
                     showLeftIcon
@@ -151,11 +155,8 @@ const NodeSelector: FC<NodeSelectorProps> = ({
                     placeholder={t('plugin.searchTools')!}
                   />
                 )}
-
               </div>
-          <Tabs
+            }
-            activeTab={activeTab}
-            onActiveTabChange={handleActiveTabChange}
             onSelect={handleSelect}
             searchText={searchText}
             tags={tags}

web/app/components/workflow/block-selector/tabs.tsx

@@ -16,6 +16,7 @@ export type TabsProps = {
   tags: string[]
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
   availableBlocksTypes?: BlockEnum[]
+  filterElem: React.ReactNode
   noBlocks?: boolean
 }
 const Tabs: FC<TabsProps> = ({
@@ -25,6 +26,7 @@ const Tabs: FC<TabsProps> = ({
   searchText,
   onSelect,
   availableBlocksTypes,
+  filterElem,
   noBlocks,
 }) => {
   const tabs = useTabs()
@@ -37,15 +39,15 @@ const Tabs: FC<TabsProps> = ({
     <div onClick={e => e.stopPropagation()}>
       {
         !noBlocks && (
-          <div className='flex items-center border-b-[0.5px] border-divider-subtle px-3'>
+          <div className='relative flex bg-background-section-burn pl-1 pt-1'>
             {
               tabs.map(tab => (
                 <div
                   key={tab.key}
                   className={cn(
-                    'system-sm-medium relative mr-4 cursor-pointer pb-2 pt-1',
+                    'system-sm-medium relative mr-0.5 flex h-8 cursor-pointer  items-center rounded-t-lg px-3 ',
                     activeTab === tab.key
-                      ? 'text-text-primary after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-util-colors-blue-brand-blue-brand-600'
+                      ? 'sm-no-bottom cursor-default bg-components-panel-bg text-text-accent'
                       : 'text-text-tertiary',
                   )}
                   onClick={() => onActiveTabChange(tab.key)}
@@ -57,13 +59,16 @@ const Tabs: FC<TabsProps> = ({
           </div>
         )
       }
+      {filterElem}
       {
         activeTab === TabsEnum.Blocks && !noBlocks && (
+          <div className='border-t border-divider-subtle'>
             <Blocks
               searchText={searchText}
               onSelect={onSelect}
               availableBlocksTypes={availableBlocksTypes}
             />
+          </div>
         )
       }
       {

web/tailwind-common-config.ts

@@ -71,6 +71,7 @@ const config = {
       boxShadow: {
         'xs': '0px 1px 2px 0px rgba(16, 24, 40, 0.05)',
         'sm': '0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10)',
+        'sm-no-bottom': '0px -1px 2px 0px rgba(16, 24, 40, 0.06), 0px -1px 3px 0px rgba(16, 24, 40, 0.10)',
         'md': '0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10)',
         'lg': '0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)',
         'xl': '0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08)',