fix: simplify marketplace home tabs

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

@@ -51,27 +51,21 @@ describe('HomeCatalogNavigation', () => {
     const activeTab = screen.getByRole('link', { name: 'plugin.marketplace.home.plugins' })
     expect(activeTab).toHaveAttribute('aria-current', 'page')
     expect(activeTab).toHaveAttribute('href', '/plugins')
-    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/ }),
     ).toHaveAttribute('href', '/templates')
+    expect(screen.queryByText('plugin.marketplace.home.new')).not.toBeInTheDocument()
     expect(screen.getByTestId('plugin-type-switch')).toHaveAttribute('data-variant', 'home')
   })
 
-  it('keeps compact tabs clickable and hides the active indicator', () => {
-    render(<HomeCatalogTabs compact isMarketplacePlatform />)
+  it('keeps header tabs clickable', () => {
+    render(<HomeCatalogTabs isMarketplacePlatform />)
 
     const pluginsTab = screen.getByRole('link', { name: 'plugin.marketplace.home.plugins' })
     const templatesTab = screen.getByRole('link', { name: 'plugin.marketplace.home.templates' })
 
     expect(pluginsTab).toHaveAttribute('href', '/plugins')
     expect(pluginsTab).toHaveClass('cursor-pointer')
-    expect(pluginsTab.querySelector('[aria-hidden="true"]')).not.toBeInTheDocument()
     expect(templatesTab).toHaveAttribute('href', '/templates')
     expect(templatesTab).toHaveClass('cursor-pointer')
   })
@@ -83,9 +77,8 @@ describe('HomeCatalogNavigation', () => {
     const templatesTab = screen.getByRole('link', { name: 'plugin.marketplace.home.templates' })
 
     expect(pluginsTab).not.toHaveAttribute('aria-current')
-    expect(pluginsTab.querySelector('[aria-hidden="true"]')).not.toBeInTheDocument()
     expect(templatesTab).toHaveAttribute('aria-current', 'page')
-    expect(templatesTab.querySelector('[aria-hidden="true"]')).toBeInTheDocument()
+    expect(screen.queryByText('plugin.marketplace.home.new')).not.toBeInTheDocument()
   })
 
   it('renders a supplied catalog category navigation', () => {

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

@@ -8,14 +8,12 @@ export type HomeCatalogTab = 'plugins' | 'templates'
 type HomeCatalogTabsProps = {
   activeTab?: HomeCatalogTab
   className?: string
-  compact?: boolean
   isMarketplacePlatform: boolean
 }
 
 const HomeCatalogTabs = ({
   activeTab = 'plugins',
   className,
-  compact = false,
   isMarketplacePlatform,
 }: HomeCatalogTabsProps) => {
   const { t } = useTranslation()
@@ -38,51 +36,26 @@ const HomeCatalogTabs = ({
         className={cn(
           'relative flex h-8 cursor-pointer items-start rounded-lg px-[9px] pt-2 outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid',
           isPluginsActive ? 'body-sm-medium' : 'body-sm-regular',
-          compact
-            ? isPluginsActive
-              ? 'bg-state-base-active text-text-primary'
-              : 'text-text-tertiary hover:bg-state-base-hover'
-            : isPluginsActive
-              ? 'text-text-accent'
-              : 'text-text-primary hover:bg-state-base-hover',
+          isPluginsActive
+            ? 'bg-state-base-active text-text-primary'
+            : 'text-text-tertiary hover:bg-state-base-hover',
         )}
       >
         {pluginsLabel}
-        {isPluginsActive && !compact && (
-          <span
-            aria-hidden
-            className="absolute bottom-0 left-1/2 h-0.5 w-[21px] -translate-x-1/2 rounded-full bg-text-accent"
-          />
-        )}
       </Link>
       <Link
         href={templatesHref}
         aria-label={templatesLabel}
         aria-current={isTemplatesActive ? 'page' : undefined}
         className={cn(
-          'relative flex h-8 cursor-pointer items-center gap-2 rounded-[10px] p-2 outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid',
+          'relative flex h-8 cursor-pointer items-center rounded-[10px] p-2 outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid',
           isTemplatesActive ? 'body-sm-medium' : 'body-sm-regular',
-          compact
-            ? isTemplatesActive
-              ? 'bg-state-base-active text-text-primary'
-              : 'text-text-tertiary hover:bg-state-base-hover'
-            : isTemplatesActive
-              ? 'text-text-accent'
-              : 'text-text-primary hover:bg-state-base-hover',
+          isTemplatesActive
+            ? 'bg-state-base-active text-text-primary'
+            : 'text-text-tertiary hover:bg-state-base-hover',
         )}
       >
-        <span>{templatesLabel}</span>
-        {!compact && (
-          <span className="flex items-center rounded-full bg-saas-dify-blue-accessible px-[5px] py-0.5 system-2xs-regular text-text-primary-on-surface uppercase">
-            {t(($) => $['marketplace.home.new'], { ns: 'plugin' })}
-          </span>
-        )}
-        {isTemplatesActive && !compact && (
-          <span
-            aria-hidden
-            className="absolute bottom-0 left-1/2 h-0.5 w-[21px] -translate-x-1/2 rounded-full bg-text-accent"
-          />
-        )}
+        {templatesLabel}
       </Link>
     </nav>
   )

web/app/components/plugins/marketplace/home/home-header.tsx

@@ -71,7 +71,6 @@ const HomeHeader = ({ activeTab = 'plugins', actions, isMarketplacePlatform }: H
           <HomeCatalogTabs
             activeTab={activeTab}
             className={styles.headerCatalogTabs}
-            compact
             isMarketplacePlatform={isMarketplacePlatform}
           />
         </HomeStickyCatalogTabs>