fix(search): filter search results by docs version and show version b…

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {}

jest.config.ts

@@ -0,0 +1,13 @@
+import type { Config } from 'jest'
+
+const config: Config = {
+  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.(scss|css)$': '<rootDir>/__mocks__/styleMock.js',
+  },
+  transform: {
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+  },
+}
+
+export default config

package.json

@@ -16,7 +16,8 @@
     "start": "next start",
     "lint": "next lint",
     "prettier:fix": "prettier --write .",
-    "migrate-lexical-script": "payload run ./src/migrate.ts"
+    "migrate-lexical-script": "payload run ./src/migrate.ts",
+    "test": "jest"
   },
   "dependencies": {
     "@docsearch/react": "^3.9.0",
@@ -82,7 +83,10 @@
     "@octokit/types": "^9.0.0",
     "@payloadcms/eslint-config": "3.28.0",
     "@payloadcms/eslint-plugin": "3.28.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/cli-progress": "^3.11.0",
+    "@types/jest": "^30.0.0",
     "@types/node": "22.10.2",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
@@ -91,7 +95,11 @@
     "discord.js": "^14.7.1",
     "dotenv": "^16.4.7",
     "eslint": "9.22.0",
+    "jest": "^30.4.2",
+    "jest-environment-jsdom": "^30.4.1",
     "prettier": "3.4.2",
+    "ts-jest": "^29.4.11",
+    "ts-node": "^10.9.2",
     "typescript": "5.7.3"
   },
   "pnpm": {

src/components/Header/Docsearch/Component.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+jest.mock('next/navigation', () => ({
+  usePathname: jest.fn(),
+}))
+
+jest.mock('@docsearch/react', () => ({
+  DocSearch: () => <div data-testid="docsearch" />,
+}))
+
+import { usePathname } from 'next/navigation'
+import Component from './Component'
+
+describe('DocSearch Component', () => {
+  it('shows v2 badge when on v2 docs', () => {
+    ;(usePathname as jest.Mock).mockReturnValue('/docs/v2/getting-started')
+    render(<Component />)
+    expect(screen.getByText('Searching in v2 docs')).toBeInTheDocument()
+  })
+
+  it('shows v3 badge when on v3 docs', () => {
+    ;(usePathname as jest.Mock).mockReturnValue('/docs/getting-started')
+    render(<Component />)
+    expect(screen.getByText('Searching in v3 docs')).toBeInTheDocument()
+  })
+})

src/components/Header/Docsearch/Component.tsx

@@ -4,15 +4,26 @@ import React from 'react'
 
 import classes from './index.module.scss'
 
-function Hit({ children, hit, path }) {
-  const blog = hit?.url?.includes('/blog/') || false
+function getVersionedUrl(url: string, path: string): string {
+  if (!url) return url
+
+  const isV2 = path.includes('/docs/v2/')
 
-  let url = hit?.url
+  if (isV2 && !url.includes('/docs/v2/')) {
+    return url.replace('/docs/', '/docs/v2/')
+  }
 
-  if (path.includes('/docs/v2/')) {
-    url = url.replace('/docs/', '/docs/v2/')
+  if (!isV2 && url.includes('/docs/v2/')) {
+    return url.replace('/docs/v2/', '/docs/')
   }
 
+  return url
+}
+
+function Hit({ children, hit, path }: { children: React.ReactNode; hit: any; path: string }) {
+  const blog = hit?.url?.includes('/blog/') || false
+  const url = getVersionedUrl(hit?.url, path)
+
   return (
     <a className={blog ? classes.blogResult : ''} href={url}>
       {children}
@@ -22,13 +33,22 @@ function Hit({ children, hit, path }) {
 
 function Component() {
   const path = usePathname()
+  const isV2 = path.includes('/docs/v2/')
   return (
-    <DocSearch
-      apiKey={process.env.NEXT_PUBLIC_ALGOLIA_DOCSEARCH_KEY || ''}
-      appId="9MJY7K9GOW"
-      hitComponent={({ children, hit }) => Hit({ children, hit, path })}
-      indexName="payloadcms"
-    />
+    <div className={classes.searchWrapper}>
+      <DocSearch
+        apiKey={process.env.NEXT_PUBLIC_ALGOLIA_DOCSEARCH_KEY || ''}
+        appId="9MJY7K9GOW"
+        hitComponent={({ children, hit }) => Hit({ children, hit, path })}
+        indexName="payloadcms"
+        searchParameters={
+          isV2 ? { facetFilters: ['version:v2'] } : { facetFilters: ['version:v3'] }
+        }
+      />
+      <div className={classes.versionBadge}>
+        {isV2 ? 'Searching in v2 docs' : 'Searching in v3 docs'}
+      </div>
+    </div>
   )
 }
 

src/components/Header/Docsearch/index.module.scss

@@ -30,5 +30,23 @@
     & svg {
       display: none;
     }
+
+    .searchWrapper {
+      position: relative;
+    }
+
+    .versionBadge {
+      position: absolute;
+      top: -8px;
+      right: -4px;
+      background-color: #f59e0b;
+      color: #000;
+      font-size: 10px;
+      font-weight: 600;
+      padding: 2px 6px;
+      border-radius: 4px;
+      pointer-events: none;
+      white-space: nowrap;
+    }
   }
 }