Add double-arrow icon swap on featured tools “Show more” hover

web/app/components/base/icons/assets/vender/solid/arrows/arrow-down-double-line.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00001 12.7761L12.1381 8.63804L11.1953 7.69524L8.00001 10.8905L4.80475 7.69524L3.86194 8.63804L8.00001 12.7761ZM8.00001 9.00951L12.1381 4.87146L11.1953 3.92865L8.00001 7.12391L4.80475 3.92865L3.86194 4.87146L8.00001 9.00951Z" fill="#676F83"/>
+</svg>

web/app/components/base/icons/src/vender/solid/arrows/ArrowDownDoubleLine.json

@@ -0,0 +1,26 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M8.00001 12.7761L12.1381 8.63804L11.1953 7.69524L8.00001 10.8905L4.80475 7.69524L3.86194 8.63804L8.00001 12.7761ZM8.00001 9.00951L12.1381 4.87146L11.1953 3.92865L8.00001 7.12391L4.80475 3.92865L3.86194 4.87146L8.00001 9.00951Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "ArrowDownDoubleLine"
+}

web/app/components/base/icons/src/vender/solid/arrows/ArrowDownDoubleLine.tsx

@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './ArrowDownDoubleLine.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>;
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'ArrowDownDoubleLine'
+
+export default Icon

web/app/components/base/icons/src/vender/solid/arrows/index.ts

@@ -1,3 +1,4 @@
+export { default as ArrowDownDoubleLine } from './ArrowDownDoubleLine'
 export { default as ArrowDownRoundFill } from './ArrowDownRoundFill'
 export { default as ChevronDown } from './ChevronDown'
 export { default as HighPriority } from './HighPriority'

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

@@ -17,7 +17,7 @@ import { ViewType } from './view-type-select'
 import Tools from './tools'
 import { formatNumber } from '@/utils/format'
 import Action from '@/app/components/workflow/block-selector/market-place-plugin/action'
-import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/arrows'
+import { ArrowDownDoubleLine, ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/arrows'
 
 const MAX_RECOMMENDED_COUNT = 15
 const INITIAL_VISIBLE_COUNT = 5
@@ -170,16 +170,17 @@ const FeaturedTools = ({
 
           {!isLoading && visiblePlugins.length > 0 && showMore && (
             <div
-              className='mt-1 flex cursor-pointer items-center gap-x-2 py-1 pl-3 pr-2 text-text-tertiary hover:text-text-secondary'
+              className='group mt-1 flex cursor-pointer items-center gap-x-2 rounded-lg py-1 pl-3 pr-2 text-text-tertiary transition-colors hover:bg-state-base-hover hover:text-text-secondary'
               onClick={() => {
                 setVisibleCount(count => Math.min(count + INITIAL_VISIBLE_COUNT, MAX_RECOMMENDED_COUNT, plugins.length))
               }}
             >
-              <div className='px-1'>
+              <div className='flex items-center px-1 text-text-tertiary transition-colors group-hover:text-text-secondary'>
-                <RiMoreLine className='size-4' />
+                <RiMoreLine className='size-4 group-hover:hidden' />
+                <ArrowDownDoubleLine className='hidden size-4 group-hover:block' />
               </div>
               <div className='system-xs-regular'>
-                {t('common.operation.more')}
+                {t('workflow.tabs.showMoreFeatured')}
               </div>
             </div>
           )}