fix: restore marketplace home filter styles

web/app/components/plugins/marketplace/__tests__/plugin-type-switch.spec.tsx

@@ -5,6 +5,7 @@ import { Provider as JotaiProvider } from 'jotai'
 import { describe, expect, it, vi } from 'vitest'
 import { createNuqsTestWrapper } from '@/test/nuqs-testing'
 import PluginTypeSwitch from '../plugin-type-switch'
+import styles from '../plugin-type-switch.module.css'
 
 vi.mock('#i18n', async () => {
   const { withSelectorKey } = await import('@/test/i18n-mock')
@@ -54,10 +55,13 @@ describe('PluginTypeSwitch', () => {
     const categoryGroup = screen.getByRole('group', { name: 'marketplace.allPlugins' })
 
     expect(categoryGroup).toHaveClass('w-full', 'justify-start', 'gap-1')
-    expect(screen.getByRole('button', { name: 'category.all' })).toHaveAttribute(
-      'aria-pressed',
-      'true',
-    )
+    const activeCategory = screen.getByRole('button', { name: 'category.all' })
+    const inactiveCategory = screen.getByRole('button', { name: 'category.models' })
+
+    expect(activeCategory).toHaveAttribute('aria-pressed', 'true')
+    expect(activeCategory).toHaveClass(styles.homeItem, styles.homeItemActive)
+    expect(inactiveCategory).toHaveClass(styles.homeItem)
+    expect(inactiveCategory).not.toHaveClass(styles.homeItemActive)
     expect(screen.getByRole('button', { name: 'categorySingle.datasource' })).toBeInTheDocument()
     expect(screen.getByRole('button', { name: 'categorySingle.agent' })).toBeInTheDocument()
 

web/app/components/plugins/marketplace/home/__tests__/home-catalog-navigation.spec.tsx

@@ -32,9 +32,13 @@ describe('HomeCatalogNavigation', () => {
     expect(navigationSection).toHaveClass('px-9')
     expect(navigationSection.firstElementChild).toHaveClass('w-full')
     expect(navigationSection.firstElementChild).not.toHaveClass('mx-auto', 'max-w-[1200px]')
-    expect(screen.getByText('plugin.marketplace.home.plugins')).toHaveAttribute(
-      'aria-current',
-      'page',
+    const activeTab = screen.getByText('plugin.marketplace.home.plugins')
+    expect(activeTab).toHaveAttribute('aria-current', 'page')
+    expect(activeTab.querySelector('[aria-hidden="true"]')).toHaveClass(
+      'absolute',
+      'h-0.5',
+      'w-[21px]',
+      'bg-text-accent',
     )
     expect(
       screen.getByRole('link', { name: /plugin\.marketplace\.home\.templates/ }),

web/app/components/plugins/marketplace/home/home-catalog-navigation.tsx

@@ -25,9 +25,13 @@ function HomeCatalogNavigation({ isMarketplacePlatform }: HomeCatalogNavigationP
         >
           <span
             aria-current="page"
-            className="relative flex h-8 items-start px-[9px] pt-2 body-sm-medium text-text-accent after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-[21px] after:-translate-x-1/2 after:rounded-full after:bg-text-accent"
+            className="relative flex h-8 items-start px-[9px] pt-2 body-sm-medium text-text-accent"
           >
             {t(($) => $['marketplace.home.plugins'], { ns: 'plugin' })}
+            <span
+              aria-hidden
+              className="absolute bottom-0 left-1/2 h-0.5 w-[21px] -translate-x-1/2 rounded-full bg-text-accent"
+            />
           </span>
           <Link
             href={templatesHref}

web/app/components/plugins/marketplace/plugin-type-switch.module.css

@@ -0,0 +1,25 @@
+.homeItem {
+  transition:
+    color 150ms ease,
+    background-color 150ms ease;
+}
+
+.homeItem:hover {
+  color: var(--color-text-secondary);
+  background-color: var(--color-state-base-hover);
+}
+
+.homeItemActive {
+  color: var(--color-saas-dify-blue-inverted);
+  background-color: var(--color-background-interaction-from-bg-2);
+}
+
+.homeItemActive:hover {
+  background-color: var(--color-state-base-hover);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .homeItem {
+    transition: none;
+  }
+}

web/app/components/plugins/marketplace/plugin-type-switch.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from '#i18n'
 import PluginIcon from '@/app/components/base/icons/src/vender/plugin/Plugin'
 import { searchModeAtom, useActivePluginType } from './atoms'
 import { PLUGIN_CATEGORY_WITH_COLLECTIONS, PLUGIN_TYPE_SEARCH_MAP } from './constants'
+import styles from './plugin-type-switch.module.css'
 
 type PluginTypeSwitchProps = {
   className?: string
@@ -98,17 +99,17 @@ function PluginTypeSwitch({ className, variant = 'default' }: PluginTypeSwitchPr
                 isHero
                   ? 'text-text-primary-on-surface'
                   : isHome
-                    ? 'min-w-12 justify-center text-text-tertiary'
+                    ? cn('min-w-12 justify-center text-text-tertiary', styles.homeItem)
                     : 'text-text-tertiary',
                 !isActive &&
                   (isHero
                     ? 'hover:bg-white/20'
-                    : 'hover:bg-state-base-hover hover:text-text-secondary'),
+                    : !isHome && 'hover:bg-state-base-hover hover:text-text-secondary'),
                 isActive &&
                   (isHero
                     ? 'border-white/95 bg-components-main-nav-nav-button-bg-active text-saas-dify-blue-inverted shadow-md backdrop-blur-[5px]'
                     : isHome
-                      ? 'bg-background-interaction-from-bg-2 text-saas-dify-blue-inverted'
+                      ? styles.homeItemActive
                       : 'border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active! text-components-main-nav-nav-button-text-active! shadow-xs'),
               )}
               onClick={() => {