From c98870c3f457a94e7cfa39857ccf7ee2a8d8f7a4 Mon Sep 17 00:00:00 2001
From: byteforge <stormcraft318@gmail.com>
Date: Thu, 15 Jan 2026 18:52:53 -0500
Subject: [PATCH] refactor: always preserve marketplace search state in URL
 (#31069)

Co-authored-by: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
---
 .../components/plugins/marketplace/atoms.ts   | 25 +++----------------
 .../plugins/marketplace/hydration-client.tsx  | 15 -----------
 .../components/plugins/marketplace/index.tsx  | 20 ++++++---------
 .../plugins/plugin-page/context.tsx           |  2 +-
 4 files changed, 12 insertions(+), 50 deletions(-)
 delete mode 100644 web/app/components/plugins/marketplace/hydration-client.tsx

diff --git a/web/app/components/plugins/marketplace/atoms.ts b/web/app/components/plugins/marketplace/atoms.ts
index 6ca9bd1c05..b13d30407e 100644
--- a/web/app/components/plugins/marketplace/atoms.ts
+++ b/web/app/components/plugins/marketplace/atoms.ts
@@ -1,4 +1,3 @@
-import type { ActivePluginType } from './constants'
 import type { PluginsSort, SearchParamsFromCollection } from './types'
 import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai'
 import { useQueryState } from 'nuqs'
@@ -17,32 +16,14 @@ export function useSetMarketplaceSort() {
   return useSetAtom(marketplaceSortAtom)
 }
 
-/**
- * Preserve the state for marketplace
- */
-export const preserveSearchStateInQueryAtom = atom<boolean>(false)
-
-const searchPluginTextAtom = atom<string>('')
-const activePluginTypeAtom = atom<ActivePluginType>('all')
-const filterPluginTagsAtom = atom<string[]>([])
-
 export function useSearchPluginText() {
-  const preserveSearchStateInQuery = useAtomValue(preserveSearchStateInQueryAtom)
-  const queryState = useQueryState('q', marketplaceSearchParamsParsers.q)
-  const atomState = useAtom(searchPluginTextAtom)
-  return preserveSearchStateInQuery ? queryState : atomState
+  return useQueryState('q', marketplaceSearchParamsParsers.q)
 }
 export function useActivePluginType() {
-  const preserveSearchStateInQuery = useAtomValue(preserveSearchStateInQueryAtom)
-  const queryState = useQueryState('category', marketplaceSearchParamsParsers.category)
-  const atomState = useAtom(activePluginTypeAtom)
-  return preserveSearchStateInQuery ? queryState : atomState
+  return useQueryState('category', marketplaceSearchParamsParsers.category)
 }
 export function useFilterPluginTags() {
-  const preserveSearchStateInQuery = useAtomValue(preserveSearchStateInQueryAtom)
-  const queryState = useQueryState('tags', marketplaceSearchParamsParsers.tags)
-  const atomState = useAtom(filterPluginTagsAtom)
-  return preserveSearchStateInQuery ? queryState : atomState
+  return useQueryState('tags', marketplaceSearchParamsParsers.tags)
 }
 
 /**
diff --git a/web/app/components/plugins/marketplace/hydration-client.tsx b/web/app/components/plugins/marketplace/hydration-client.tsx
deleted file mode 100644
index 5698db711f..0000000000
--- a/web/app/components/plugins/marketplace/hydration-client.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-'use client'
-
-import { useHydrateAtoms } from 'jotai/utils'
-import { preserveSearchStateInQueryAtom } from './atoms'
-
-export function HydrateMarketplaceAtoms({
-  preserveSearchStateInQuery,
-  children,
-}: {
-  preserveSearchStateInQuery: boolean
-  children: React.ReactNode
-}) {
-  useHydrateAtoms([[preserveSearchStateInQueryAtom, preserveSearchStateInQuery]])
-  return <>{children}</>
-}
diff --git a/web/app/components/plugins/marketplace/index.tsx b/web/app/components/plugins/marketplace/index.tsx
index 1f32ee4d29..0eb2488cef 100644
--- a/web/app/components/plugins/marketplace/index.tsx
+++ b/web/app/components/plugins/marketplace/index.tsx
@@ -1,7 +1,6 @@
 import type { SearchParams } from 'nuqs'
 import { TanstackQueryInitializer } from '@/context/query-client'
 import Description from './description'
-import { HydrateMarketplaceAtoms } from './hydration-client'
 import { HydrateQueryClient } from './hydration-server'
 import ListWrapper from './list/list-wrapper'
 import StickySearchAndSwitchWrapper from './sticky-search-and-switch-wrapper'
@@ -10,8 +9,7 @@ type MarketplaceProps = {
   showInstallButton?: boolean
   pluginTypeSwitchClassName?: string
   /**
-   * Pass the search params from the request to prefetch data on the server
-   * and preserve the search params in the URL.
+   * Pass the search params from the request to prefetch data on the server.
    */
   searchParams?: Promise<SearchParams>
 }
@@ -24,15 +22,13 @@ const Marketplace = async ({
   return (
     <TanstackQueryInitializer>
       <HydrateQueryClient searchParams={searchParams}>
-        <HydrateMarketplaceAtoms preserveSearchStateInQuery={!!searchParams}>
-          <Description />
-          <StickySearchAndSwitchWrapper
-            pluginTypeSwitchClassName={pluginTypeSwitchClassName}
-          />
-          <ListWrapper
-            showInstallButton={showInstallButton}
-          />
-        </HydrateMarketplaceAtoms>
+        <Description />
+        <StickySearchAndSwitchWrapper
+          pluginTypeSwitchClassName={pluginTypeSwitchClassName}
+        />
+        <ListWrapper
+          showInstallButton={showInstallButton}
+        />
       </HydrateQueryClient>
     </TanstackQueryInitializer>
   )
diff --git a/web/app/components/plugins/plugin-page/context.tsx b/web/app/components/plugins/plugin-page/context.tsx
index fea78ae181..abc4408d62 100644
--- a/web/app/components/plugins/plugin-page/context.tsx
+++ b/web/app/components/plugins/plugin-page/context.tsx
@@ -68,7 +68,7 @@ export const PluginPageContextProvider = ({
   const options = useMemo(() => {
     return enable_marketplace ? tabs : tabs.filter(tab => tab.value !== PLUGIN_PAGE_TABS_MAP.marketplace)
   }, [tabs, enable_marketplace])
-  const [activeTab, setActiveTab] = useQueryState('category', {
+  const [activeTab, setActiveTab] = useQueryState('tab', {
     defaultValue: options[0].value,
   })