feat: replace SearchBox with Input component in SearchBoxWrapper for improved search functionality

web/app/components/plugins/marketplace/description/index.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import Description from './index'
+import { Description } from './index'
 
 // ================================
 // Mock external dependencies

web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from '#i18n'
 import { useDebounce } from 'ahooks'
 import { useSetAtom } from 'jotai'
 import { useMemo, useState } from 'react'
+import Input from '@/app/components/base/input'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -21,7 +22,6 @@ import {
 import { PLUGIN_TYPE_SEARCH_MAP } from '../constants'
 import { useMarketplacePlugins } from '../query'
 import { getMarketplaceListFilterType } from '../utils'
-import SearchBox from './index'
 import SearchDropdown from './search-dropdown'
 
 type SearchBoxWrapperProps = {
@@ -34,7 +34,7 @@ const SearchBoxWrapper = ({
 }: SearchBoxWrapperProps) => {
   const { t } = useTranslation()
   const [searchPluginText, handleSearchPluginTextChange] = useSearchPluginText()
-  const [filterPluginTags, handleFilterPluginTagsChange] = useFilterPluginTags()
+  const [filterPluginTags] = useFilterPluginTags()
   const [activePluginType] = useActivePluginType()
   const sort = useMarketplaceSortValue()
   const setSearchMode = useSetAtom(searchModeAtom)
@@ -84,24 +84,27 @@ const SearchBoxWrapper = ({
     >
       <PortalToFollowElemTrigger asChild>
         <div>
-          <SearchBox
+          <Input
-            wrapperClassName={cn('z-[11] mx-auto w-[640px] shrink-0', wrapperClassName)}
+            wrapperClassName={cn('w-[200px] rounded-lg lg:w-[300px]', wrapperClassName)}
-            inputClassName={cn('w-full', inputClassName)}
+            className={cn('h-9 bg-components-input-bg-normal', inputClassName)}
-            search={inputValue}
+            showLeftIcon
-            onSearchChange={setDraftSearch}
+            value={inputValue}
-            onSearchSubmit={handleSubmit}
+            placeholder={t('searchPlugins', { ns: 'plugin' })}
-            onSearchFocus={() => {
+            onChange={(e) => {
+              setDraftSearch(e.target.value)
+            }}
+            onFocus={() => {
               setDraftSearch(committedSearch)
               setIsFocused(true)
             }}
-            onSearchBlur={() => {
+            onBlur={() => {
               if (!isHoveringDropdown)
                 setIsFocused(false)
             }}
-            tags={filterPluginTags}
+            onKeyDown={(e) => {
-            onTagsChange={handleFilterPluginTagsChange}
+              if (e.key === 'Enter')
-            placeholder={t('searchPlugins', { ns: 'plugin' })}
+                handleSubmit()
-            usedInMarketplace
+            }}
           />
         </div>
       </PortalToFollowElemTrigger>

web/app/components/plugins/plugin-page/index.tsx

@@ -147,7 +147,7 @@ const PluginPage = ({
               onChange={setActiveTab}
               options={options}
             />
-            {!isPluginsTab && <SearchBoxWrapper wrapperClassName="w-[360px] mx-0" inputClassName="p-0" />}
+            {!isPluginsTab && <SearchBoxWrapper />}
           </div>
           <div className="flex shrink-0 items-center gap-1">
             {isExploringMarketplace && <SubmitRequestDropdown />}

web/app/components/plugins/plugin-page/nav-operations.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { RiBookOpenLine, RiGithubLine, RiLayoutGridLine, RiPuzzle2Line } from '@remixicon/react'
+import { RiAddLine, RiBookOpenLine, RiGithubLine, RiLayoutGridLine, RiPuzzle2Line } from '@remixicon/react'
 import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
 import { useState } from 'react'
@@ -53,7 +53,8 @@ export const SubmitRequestDropdown = () => {
             open && 'bg-state-base-hover text-text-secondary',
           )}
         >
-          <span className="system-sm-medium">
+          <RiAddLine className="h-4 w-4 shrink-0 lg:hidden" />
+          <span className="system-sm-medium hidden lg:inline">
             {t('requestSubmitPlugin', { ns: 'plugin' })}
           </span>
         </Button>
@@ -98,7 +99,7 @@ export const CreationTypeTabs = ({ creationType: creationTypeProp }: CreationTyp
         )}
       >
         <RiPuzzle2Line className="h-4 w-4 shrink-0" />
-        <span className="system-sm-medium">
+        <span className="system-sm-medium hidden md:inline">
           {t('plugins', { ns: 'plugin' })}
         </span>
       </Link>
@@ -111,10 +112,10 @@ export const CreationTypeTabs = ({ creationType: creationTypeProp }: CreationTyp
         )}
       >
         <RiLayoutGridLine className="h-4 w-4 shrink-0" />
-        <span className="system-sm-medium">
+        <span className="system-sm-medium hidden md:inline">
           {t('templates', { ns: 'plugin' })}
         </span>
-        <Badge className="ml-1 h-4 rounded-[4px] border-none bg-saas-dify-blue-accessible px-1 text-[10px] font-bold leading-[14px] text-text-primary-on-surface">
+        <Badge className="ml-1 hidden h-4 rounded-[4px] border-none bg-saas-dify-blue-accessible px-1 text-[10px] font-bold leading-[14px] text-text-primary-on-surface md:inline-flex">
           NEW
         </Badge>
       </Link>