feat: add search params to url

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

@@ -2,13 +2,19 @@ import PluginPage from '@/app/components/plugins/plugin-page'
 import PluginsPanel from '@/app/components/plugins/plugin-page/plugins-panel'
 import Marketplace from '@/app/components/plugins/marketplace'
 import { getLocaleOnServer } from '@/i18n/server'
+import type { SearchParams } from '@/app/components/plugins/marketplace/types'
 
-const PluginList = async () => {
+const PluginList = async (
+  props: {
+    searchParams: Promise<SearchParams>
+  },
+) => {
+  const searchParams = await props.searchParams
   const locale = await getLocaleOnServer()
   return (
     <PluginPage
       plugins={<PluginsPanel />}
-      marketplace={<Marketplace locale={locale} pluginTypeSwitchClassName='top-[60px]' searchBoxAutoAnimate={false} />}
+      marketplace={<Marketplace searchParams={searchParams} locale={locale} pluginTypeSwitchClassName='top-[60px]' searchBoxAutoAnimate={false} />}
     />
   )
 }

web/app/components/plugins/hooks.ts

@@ -92,3 +92,17 @@ export const useSingleCategories = (translateFromOut?: TFunction) => {
     categoriesMap,
   }
 }
+
+export const PLUGIN_PAGE_TABS_MAP = {
+  plugins: 'plugins',
+  marketplace: 'discover',
+}
+
+export const usePluginPageTabs = () => {
+  const { t } = useTranslation()
+  const tabs = [
+    { value: PLUGIN_PAGE_TABS_MAP.plugins, text: t('common.menus.plugins') },
+    { value: PLUGIN_PAGE_TABS_MAP.marketplace, text: t('common.menus.exploreMarketplace') },
+  ]
+  return tabs
+}

web/app/components/plugins/marketplace/context.tsx

@@ -35,9 +35,10 @@ import {
 import {
   getMarketplaceListCondition,
   getMarketplaceListFilterType,
+  updateSearchParams,
 } from './utils'
 import { useInstalledPluginList } from '@/service/use-plugins'
-import { noop } from 'lodash-es'
+import { debounce, noop } from 'lodash-es'
 
 export type MarketplaceContextValue = {
   intersected: boolean
@@ -159,7 +160,15 @@ export const MarketplaceContextProvider = ({
         type: getMarketplaceListFilterType(activePluginTypeRef.current),
         page: pageRef.current,
       })
-      history.pushState({}, '', `/${searchParams?.language ? `?language=${searchParams?.language}` : ''}`)
+      const url = new URL(window.location.href)
+      if (searchParams?.language)
+        url.searchParams.set('language', searchParams?.language)
+      history.replaceState({}, '', url)
+      updateSearchParams({
+        query: searchPluginTextRef.current,
+        category: activePluginTypeRef.current,
+        tags: filterPluginTagsRef.current,
+      })
     }
     else {
       if (shouldExclude && isSuccess) {
@@ -182,7 +191,27 @@ export const MarketplaceContextProvider = ({
     resetPlugins()
   }, [exclude, queryMarketplaceCollectionsAndPlugins, resetPlugins])
 
+  const handleSearchParamsChange = (debounced?: boolean) => {
+    if (debounced) {
+      debounce(() => {
+        updateSearchParams({
+          query: searchPluginTextRef.current,
+          category: activePluginTypeRef.current,
+          tags: filterPluginTagsRef.current,
+        })
+      }, 500)()
+    }
+    else {
+      updateSearchParams({
+        query: searchPluginTextRef.current,
+        category: activePluginTypeRef.current,
+        tags: filterPluginTagsRef.current,
+      })
+    }
+  }
+
   const handleQueryPlugins = useCallback((debounced?: boolean) => {
+    handleSearchParamsChange(debounced)
     if (debounced) {
       queryPluginsWithDebounced({
         query: searchPluginTextRef.current,
@@ -211,6 +240,7 @@ export const MarketplaceContextProvider = ({
 
   const handleQuery = useCallback((debounced?: boolean) => {
     if (!searchPluginTextRef.current && !filterPluginTagsRef.current.length) {
+      handleSearchParamsChange(debounced)
       cancelQueryPluginsWithDebounced()
       handleQueryMarketplaceCollectionsAndPlugins()
       return
@@ -242,11 +272,9 @@ export const MarketplaceContextProvider = ({
     activePluginTypeRef.current = type
     setPage(1)
     pageRef.current = 1
-  }, [])
 
-  useEffect(() => {
     handleQuery()
-  }, [activePluginType, handleQuery])
+  }, [handleQuery])
 
   const handleSortChange = useCallback((sort: PluginsSort) => {
     setSort(sort)

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

@@ -4,6 +4,7 @@ import { PluginType } from '@/app/components/plugins/types'
 import type {
   CollectionsAndPluginsSearchParams,
   MarketplaceCollection,
+  PluginsSearchParams,
 } from '@/app/components/plugins/marketplace/types'
 import {
   MARKETPLACE_API_PREFIX,
@@ -125,3 +126,23 @@ export const getMarketplaceListFilterType = (category: string) => {
 
   return 'plugin'
 }
+
+export const updateSearchParams = (pluginsSearchParams: PluginsSearchParams) => {
+  const { query, category, tags } = pluginsSearchParams
+  const url = new URL(window.location.href)
+  if (query)
+    url.searchParams.set('q', query)
+  else
+    url.searchParams.delete('q')
+  if (category && category !== PLUGIN_TYPE_SEARCH_MAP.all)
+    url.searchParams.set('category', category)
+  else if (!category)
+    url.searchParams.delete('category')
+  else
+    url.searchParams.set('category', 'discover')
+  if (tags && tags.length)
+    url.searchParams.set('tags', tags.join(','))
+  else
+    url.searchParams.delete('tags')
+  history.replaceState({}, '', url)
+}

web/app/components/plugins/plugin-page/context.tsx

@@ -12,9 +12,9 @@ import {
 } from 'use-context-selector'
 import { useSelector as useAppContextSelector } from '@/context/app-context'
 import type { FilterState } from './filter-management'
-import { useTranslation } from 'react-i18next'
 import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import { noop } from 'lodash-es'
+import { PLUGIN_PAGE_TABS_MAP, usePluginPageTabs } from '../hooks'
 
 export type PluginPageContextValue = {
   containerRef: React.RefObject<HTMLDivElement>
@@ -53,7 +53,6 @@ export function usePluginPageContext(selector: (value: PluginPageContextValue) =
 export const PluginPageContextProvider = ({
   children,
 }: PluginPageContextProviderProps) => {
-  const { t } = useTranslation()
   const containerRef = useRef<HTMLDivElement>(null)
   const [filters, setFilters] = useState<FilterState>({
     categories: [],
@@ -63,16 +62,10 @@ export const PluginPageContextProvider = ({
   const [currentPluginID, setCurrentPluginID] = useState<string | undefined>()
 
   const { enable_marketplace } = useAppContextSelector(s => s.systemFeatures)
+  const tabs = usePluginPageTabs()
   const options = useMemo(() => {
-    return [
-      { value: 'plugins', text: t('common.menus.plugins') },
-      ...(
-        enable_marketplace
-          ? [{ value: 'discover', text: t('common.menus.exploreMarketplace') }]
-          : []
-      ),
-    ]
-  }, [t, enable_marketplace])
+    return enable_marketplace ? tabs : tabs.filter(tab => tab.value !== PLUGIN_PAGE_TABS_MAP.marketplace)
+  }, [tabs, enable_marketplace])
   const [activeTab, setActiveTab] = useTabSearchParams({
     defaultTab: options[0].value,
   })

web/app/components/plugins/plugin-page/index.tsx

@@ -40,6 +40,8 @@ import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
 import { LanguagesSupported } from '@/i18n/language'
 import I18n from '@/context/i18n'
 import { noop } from 'lodash-es'
+import { PLUGIN_TYPE_SEARCH_MAP } from '../marketplace/plugin-type-switch'
+import { PLUGIN_PAGE_TABS_MAP } from '../hooks'
 
 const PACKAGE_IDS_KEY = 'package-ids'
 const BUNDLE_INFO_KEY = 'bundle-info'
@@ -136,40 +138,45 @@ const PluginPage = ({
   const setActiveTab = usePluginPageContext(v => v.setActiveTab)
   const { enable_marketplace } = useAppContextSelector(s => s.systemFeatures)
 
+  const isPluginsTab = useMemo(() => activeTab === PLUGIN_PAGE_TABS_MAP.plugins, [activeTab])
+  const isExploringMarketplace = useMemo(() => {
+    const values = Object.values(PLUGIN_TYPE_SEARCH_MAP)
+    return activeTab === PLUGIN_PAGE_TABS_MAP.marketplace || values.includes(activeTab)
+  }, [activeTab])
+
   const uploaderProps = useUploader({
     onFileChange: setCurrentFile,
     containerRef,
-    enabled: activeTab === 'plugins',
+    enabled: isPluginsTab,
   })
 
   const { dragging, fileUploader, fileChangeHandle, removeFile } = uploaderProps
-
   return (
     <div
       id='marketplace-container'
       ref={containerRef}
       style={{ scrollbarGutter: 'stable' }}
-      className={cn('relative flex grow flex-col overflow-y-auto border-t border-divider-subtle', activeTab === 'plugins'
+      className={cn('relative flex grow flex-col overflow-y-auto border-t border-divider-subtle', isPluginsTab
         ? 'rounded-t-xl bg-components-panel-bg'
         : 'bg-background-body',
       )}
     >
       <div
         className={cn(
-          'sticky top-0 z-10 flex min-h-[60px] items-center gap-1 self-stretch bg-components-panel-bg px-12 pb-2 pt-4', activeTab === 'discover' && 'bg-background-body',
+          'sticky top-0 z-10 flex min-h-[60px] items-center gap-1 self-stretch bg-components-panel-bg px-12 pb-2 pt-4', isExploringMarketplace && 'bg-background-body',
         )}
       >
         <div className='flex w-full items-center justify-between'>
           <div className='flex-1'>
             <TabSlider
-              value={activeTab}
+              value={isPluginsTab ? PLUGIN_PAGE_TABS_MAP.plugins : PLUGIN_PAGE_TABS_MAP.marketplace}
               onChange={setActiveTab}
               options={options}
             />
           </div>
           <div className='flex shrink-0 items-center gap-1'>
             {
-              activeTab === 'discover' && (
+              isExploringMarketplace && (
                 <>
                   <Link
                     href={`https://docs.dify.ai/${locale === LanguagesSupported[1] ? 'v/zh-hans/' : ''}plugins/publish-plugins/publish-to-dify-marketplace`}
@@ -215,7 +222,7 @@ const PluginPage = ({
           </div>
         </div>
       </div>
-      {activeTab === 'plugins' && (
+      {isPluginsTab && (
         <>
           {plugins}
           {dragging && (
@@ -246,7 +253,7 @@ const PluginPage = ({
         </>
       )}
       {
-        activeTab === 'discover' && enable_marketplace && marketplace
+        isExploringMarketplace && enable_marketplace && marketplace
       }
 
       {showPluginSettingModal && (