From 84b2913cd9d7cd213e35828fcd767bd4f2d053a3 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 13 Oct 2025 11:12:10 +0800
Subject: [PATCH] feat: filter title

---
 web/app/components/explore/app-list/index.tsx | 17 ++++++++++++++++-
 web/i18n/en-US/explore.ts                     |  2 ++
 web/i18n/ja-JP/explore.ts                     |  2 ++
 web/i18n/zh-Hans/explore.ts                   |  2 ++
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index 17930b6f0f..d40ced8784 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -23,6 +23,7 @@ import {
 import { useImportDSL } from '@/hooks/use-import-dsl'
 import DSLConfirmModal from '@/app/components/app/create-from-dsl-modal/dsl-confirm-modal'
 import Banner from '../banner'
+import Button from '../../base/button'
 
 type AppsProps = {
   onSuccess?: () => void
@@ -43,6 +44,12 @@ const Apps = ({
   const [keywords, setKeywords] = useState('')
   const [searchKeywords, setSearchKeywords] = useState('')
 
+  const hasFilterCondition = !!keywords
+  const handleResetFilter = useCallback(() => {
+    setKeywords('')
+    setSearchKeywords('')
+  }, [])
+
   const { run: handleSearch } = useDebounceFn(() => {
     setSearchKeywords(keywords)
   }, { wait: 500 })
@@ -150,7 +157,15 @@ const Apps = ({
       <div className={cn(
         'mt-6 flex items-center justify-between px-12',
       )}>
-        <div className={'system-xl-semibold grow truncate text-text-primary'}>{t('explore.apps.title')}</div>
+        <div className='flex items-center'>
+          <div className={'system-xl-semibold grow truncate text-text-primary'}>{!hasFilterCondition ? t('explore.apps.title') : t('explore.apps.resultNum', { num: searchFilteredList.length })}</div>
+          {hasFilterCondition && (
+            <>
+              <div className='mx-3 h-4 w-px bg-divider-regular'></div>
+              <Button size='medium' onClick={handleResetFilter}>{t('explore.apps.resetFilter')}</Button>
+            </>
+          )}
+        </div>
         <Input
           showLeftIcon
           showClearIcon
diff --git a/web/i18n/en-US/explore.ts b/web/i18n/en-US/explore.ts
index 206e09bc92..ec50e30192 100644
--- a/web/i18n/en-US/explore.ts
+++ b/web/i18n/en-US/explore.ts
@@ -18,6 +18,8 @@ const translation = {
   apps: {
     title: 'Try Dify\'s curated apps to find AI solutions for your business',
     allCategories: 'All',
+    resultNum: '{{num}} results',
+    resetFilter: 'Clear filter',
   },
   appCard: {
     addToWorkspace: 'Add to Workspace',
diff --git a/web/i18n/ja-JP/explore.ts b/web/i18n/ja-JP/explore.ts
index b236d56d23..4545e4ede4 100644
--- a/web/i18n/ja-JP/explore.ts
+++ b/web/i18n/ja-JP/explore.ts
@@ -18,6 +18,8 @@ const translation = {
   apps: {
     title: 'Difyの厳選アプリを試して、ビジネス向けのAIソリューションを見つけましょう',
     allCategories: '全て',
+    resultNum: '{{num}}件の結果',
+    resetFilter: 'クリア',
   },
   appCard: {
     addToWorkspace: 'ワークスペースに追加',
diff --git a/web/i18n/zh-Hans/explore.ts b/web/i18n/zh-Hans/explore.ts
index 62ab9f699b..b0617cfabc 100644
--- a/web/i18n/zh-Hans/explore.ts
+++ b/web/i18n/zh-Hans/explore.ts
@@ -18,6 +18,8 @@ const translation = {
   apps: {
     title: '试用 Dify 精选示例应用，为您的业务寻找 AI 解决方案',
     allCategories: '所有',
+    resultNum: '{{num}} 个结果',
+    resetFilter: '清除筛选',
   },
   appCard: {
     addToWorkspace: '添加到工作区',