refactor: marketplace state management

web/app/(commonLayout)/plugins/page.tsx

@@ -2,11 +2,11 @@ import Marketplace from '@/app/components/plugins/marketplace'
 import PluginPage from '@/app/components/plugins/plugin-page'
 import PluginsPanel from '@/app/components/plugins/plugin-page/plugins-panel'
 
-const PluginList = async () => {
+const PluginList = () => {
   return (
     <PluginPage
       plugins={<PluginsPanel />}
-      marketplace={<Marketplace pluginTypeSwitchClassName="top-[60px]" showSearchParams={false} />}
+      marketplace={<Marketplace pluginTypeSwitchClassName="top-[60px]" />}
     />
   )
 }

web/app/components/plugins/marketplace/atoms.ts

@@ -0,0 +1,81 @@
+import type { ActivePluginType } from './constants'
+import type { PluginsSort, SearchParamsFromCollection } from './types'
+import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai'
+import { useQueryState } from 'nuqs'
+import { useCallback } from 'react'
+import { DEFAULT_SORT, PLUGIN_CATEGORY_WITH_COLLECTIONS } from './constants'
+import { marketplaceSearchParamsParsers } from './search-params'
+
+const marketplaceSortAtom = atom<PluginsSort>(DEFAULT_SORT)
+export function useMarketplaceSort() {
+  return useAtom(marketplaceSortAtom)
+}
+export function useMarketplaceSortValue() {
+  return useAtomValue(marketplaceSortAtom)
+}
+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
+}
+export function useActivePluginType() {
+  const preserveSearchStateInQuery = useAtomValue(preserveSearchStateInQueryAtom)
+  const queryState = useQueryState('category', marketplaceSearchParamsParsers.category)
+  const atomState = useAtom(activePluginTypeAtom)
+  return preserveSearchStateInQuery ? queryState : atomState
+}
+export function useFilterPluginTags() {
+  const preserveSearchStateInQuery = useAtomValue(preserveSearchStateInQueryAtom)
+  const queryState = useQueryState('tags', marketplaceSearchParamsParsers.tags)
+  const atomState = useAtom(filterPluginTagsAtom)
+  return preserveSearchStateInQuery ? queryState : atomState
+}
+
+/**
+ * Not all categories have collections, so we need to
+ * force the search mode for those categories.
+ */
+export const searchModeAtom = atom<true | null>(null)
+
+export function useMarketplaceSearchMode() {
+  const [searchPluginText] = useSearchPluginText()
+  const [filterPluginTags] = useFilterPluginTags()
+  const [activePluginType] = useActivePluginType()
+
+  const searchMode = useAtomValue(searchModeAtom)
+  const isSearchMode = !!searchPluginText
+    || filterPluginTags.length > 0
+    || (searchMode ?? (!PLUGIN_CATEGORY_WITH_COLLECTIONS.has(activePluginType)))
+  return isSearchMode
+}
+
+export function useMarketplaceMoreClick() {
+  const [,setQ] = useSearchPluginText()
+  const setSort = useSetAtom(marketplaceSortAtom)
+  const setSearchMode = useSetAtom(searchModeAtom)
+
+  return useCallback((searchParams?: SearchParamsFromCollection) => {
+    if (!searchParams)
+      return
+    setQ(searchParams?.query || '')
+    setSort({
+      sortBy: searchParams?.sort_by || DEFAULT_SORT.sortBy,
+      sortOrder: searchParams?.sort_order || DEFAULT_SORT.sortOrder,
+    })
+    setSearchMode(true)
+  }, [setQ, setSort, setSearchMode])
+}

web/app/components/plugins/marketplace/constants.ts

@@ -1,6 +1,30 @@
+import { PluginCategoryEnum } from '../types'
+
 export const DEFAULT_SORT = {
   sortBy: 'install_count',
   sortOrder: 'DESC',
 }
 
 export const SCROLL_BOTTOM_THRESHOLD = 100
+
+export const PLUGIN_TYPE_SEARCH_MAP = {
+  all: 'all',
+  model: PluginCategoryEnum.model,
+  tool: PluginCategoryEnum.tool,
+  agent: PluginCategoryEnum.agent,
+  extension: PluginCategoryEnum.extension,
+  datasource: PluginCategoryEnum.datasource,
+  trigger: PluginCategoryEnum.trigger,
+  bundle: 'bundle',
+} as const
+
+type ValueOf<T> = T[keyof T]
+
+export type ActivePluginType = ValueOf<typeof PLUGIN_TYPE_SEARCH_MAP>
+
+export const PLUGIN_CATEGORY_WITH_COLLECTIONS = new Set<ActivePluginType>(
+  [
+    PLUGIN_TYPE_SEARCH_MAP.all,
+    PLUGIN_TYPE_SEARCH_MAP.tool,
+  ],
+)