chore: tag ui

web/app/components/explore/__tests__/category.spec.tsx

@@ -58,7 +58,7 @@ describe('Category', () => {
       renderComponent({ value: 'Unknown' })
 
       const allCategoriesItem = screen.getByText('explore.apps.allCategories')
-      expect(allCategoriesItem.className).toContain('bg-background-default')
+      expect(allCategoriesItem.parentElement?.className).toContain('bg-components-segmented-control-item-active-bg')
     })
 
     it('should render raw category name when i18n key does not exist', () => {

web/app/components/explore/app-list/__tests__/index.spec.tsx

@@ -371,26 +371,6 @@ describe('AppList', () => {
       expect(container.innerHTML).toBe('')
     })
 
-    it('should reset filter when reset button is clicked', async () => {
-      mockExploreData = {
-        categories: ['Writing'],
-        allList: [createApp(), createApp({ app_id: 'app-2', app: { ...createApp().app, name: 'Gamma' } })],
-      }
-      renderAppList()
-
-      const input = screen.getByPlaceholderText('common.operation.search')
-      fireEvent.change(input, { target: { value: 'gam' } })
-      await act(async () => {
-        await vi.advanceTimersByTimeAsync(500)
-      })
-      expect(screen.queryByText('Alpha')).not.toBeInTheDocument()
-
-      fireEvent.click(screen.getByText('explore.apps.resetFilter'))
-
-      expect(screen.getByText('Alpha')).toBeInTheDocument()
-      expect(screen.getByText('Gamma')).toBeInTheDocument()
-    })
-
     it('should close create modal via hide button', async () => {
       vi.useRealTimers()
       mockExploreData = {

web/app/components/explore/app-list/index.tsx

@@ -50,12 +50,6 @@ 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 })
@@ -68,6 +62,11 @@ const Apps = ({
   const [currCategory, setCurrCategory] = useQueryState('category', {
     defaultValue: allCategoriesEn,
   })
+  const handleResetFilter = useCallback(() => {
+    setKeywords('')
+    setSearchKeywords('')
+    setCurrCategory(allCategoriesEn)
+  }, [allCategoriesEn, setCurrCategory])
 
   const {
     data,
@@ -168,6 +167,11 @@ const Apps = ({
     })
   }, [handleImportDSLConfirm, onSuccess, trackCurrentCreateApp])
 
+  const hasFilterCondition = !!keywords
+    || !!searchKeywords
+    || currCategory !== allCategoriesEn
+    || searchFilteredList.length !== filteredList.length
+
   if (isLoading) {
     return (
       <div className="flex h-full items-center">

web/app/components/explore/category.tsx

@@ -28,8 +28,8 @@ const Category: FC<ICategoryProps> = ({
   const isAllCategories = !list.includes(value as AppCategory) || value === allCategoriesEn
 
   const itemClassName = (isSelected: boolean) => cn(
-    'flex h-7 cursor-pointer items-center justify-center gap-0.5 rounded-lg border-[0.5px] border-transparent px-2 py-1 system-sm-medium text-text-secondary hover:bg-state-base-hover-alt',
-    isSelected && 'border-components-main-nav-nav-button-border bg-background-default text-text-accent-light-mode-only shadow-xs hover:bg-background-default',
+    'relative flex h-7 shrink-0 cursor-pointer items-center justify-center gap-0.5 overflow-hidden rounded-lg border-[0.5px] border-transparent px-2 py-1 system-sm-medium whitespace-nowrap text-text-secondary',
+    isSelected && 'border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-xs shadow-shadow-shadow-3',
   )
 
   const renderCategoryName = (name: AppCategory) => {
@@ -38,7 +38,7 @@ const Category: FC<ICategoryProps> = ({
   }
 
   return (
-    <div className={cn(className, 'inline-flex max-w-full flex-wrap items-center gap-px rounded-[10px] bg-components-input-bg-normal p-0.5 text-[13px]')}>
+    <div className={cn(className, 'inline-flex max-w-full items-center gap-px overflow-x-auto rounded-[10px] bg-components-segmented-control-bg-normal p-0.5 text-[13px]')}>
       {[
         { name: allCategoriesEn, label: t('apps.allCategories', { ns: 'explore' }), isAll: true },
         ...list.filter(name => name !== allCategoriesEn).map(name => ({
@@ -59,8 +59,14 @@ const Category: FC<ICategoryProps> = ({
               className={itemClassName(isSelected)}
               onClick={() => onChange(item.name)}
             >
-              {item.isAll && <span className="i-custom-vender-line-alertsAndFeedback-thumbs-up h-4 w-4" />}
-              {item.label}
+              {item.isAll && (
+                <span className="flex size-5 shrink-0 items-center justify-center">
+                  <span className="i-custom-vender-line-alertsAndFeedback-thumbs-up h-4 w-4" />
+                </span>
+              )}
+              <span className="flex shrink-0 items-center justify-center gap-1 p-0.5">
+                {item.label}
+              </span>
             </div>
             {!isSelected && !isNextSelected && index < items.length - 1 && (
               <div className="absolute top-1/2 right-[-1px] h-3.5 w-px -translate-y-1/2 bg-divider-regular" />