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

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,14 +33,29 @@ function Hit({ children, hit, path }) {
 
 function Component() {
   const path = usePathname()
+  const isV2 = path.includes('/docs/v2/')
   return (
+    <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'] }
+      }
     />
+    {isV2 && (
+      <div className={classes.versionBadge}>
+          {isV2 ? 'Searching in v2 docs' : 'Searching in v3 docs'}
+      </div>
+    )}
+    </div>
   )
 }
 
+
+
 export default Component

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;
+    }
   }
 }