From d499e354be3c236b0d7eb91177c3b556a78c6a93 Mon Sep 17 00:00:00 2001
From: Soner Sayakci <s.sayakci@gmail.com>
Date: Fri, 12 Jun 2026 08:02:00 +0200
Subject: [PATCH] feat: make search more useable

---
 .vitepress/config.ts                     |   2 +-
 .vitepress/theme/VPAlgoliaSearchBox.vue  | 357 +++++++++++++++++++
 .vitepress/theme/style.scss              |  37 ++
 src/components/SwagAlgoliaSearchPage.vue | 422 +++++++++++++++++++++--
 4 files changed, 787 insertions(+), 31 deletions(-)
 create mode 100644 .vitepress/theme/VPAlgoliaSearchBox.vue

diff --git a/.vitepress/config.ts b/.vitepress/config.ts
index c3a0fd71..be9ab0de 100644
--- a/.vitepress/config.ts
+++ b/.vitepress/config.ts
@@ -592,7 +592,7 @@ export default await withExternals(withMermaid(defineConfigWithTheme<ThemeConfig
         '@node_modules': resolve(process.cwd(), 'node_modules'),
         '../composables/edit-link': resolve(__dirname, '../node_modules/vitepress-shopware-docs/src/shopware/composables/edit-link.ts'),
         './VPNavBarTitle.vue': resolve(__dirname, '../node_modules/vitepress-shopware-docs/src/shopware/components/override/VPNavBarTitle.vue'),
-        './VPAlgoliaSearchBox.vue': resolve(__dirname, '../node_modules/vitepress-shopware-docs/src/shopware/components/override/VPAlgoliaSearchBox.vue'),
+        './VPAlgoliaSearchBox.vue': resolve(__dirname, './theme/VPAlgoliaSearchBox.vue'),
         '../NotFound.vue': resolve(__dirname, '../node_modules/vitepress-shopware-docs/src/shopware/components/override/NotFound.vue'),
         '../SwagRelatedArticles.vue': resolve(__dirname, '../node_modules/vitepress-shopware-docs/src/shopware/components/SwagRelatedArticles.vue'),
         // fixes missing mountpoints
diff --git a/.vitepress/theme/VPAlgoliaSearchBox.vue b/.vitepress/theme/VPAlgoliaSearchBox.vue
new file mode 100644
index 00000000..7457a680
--- /dev/null
+++ b/.vitepress/theme/VPAlgoliaSearchBox.vue
@@ -0,0 +1,357 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
+import docsearch from '@docsearch/js'
+import { onMounted, watch } from 'vue'
+import { useRouter, useRoute, useData } from 'vitepress'
+
+const props = defineProps<{
+    algolia: DefaultTheme.AlgoliaSearchOptions
+}>()
+
+const router = useRouter()
+const route = useRoute()
+const { site, localeIndex, lang } = useData()
+
+type DocSearchProps = Parameters<typeof docsearch>[0]
+type SearchResultPart = {
+    value?: string
+    [key: string]: unknown
+}
+type SearchResult = {
+    content?: SearchResultPart
+    hierarchy?: Partial<Record<HierarchyLevel, SearchResultPart>>
+    [key: string]: unknown
+}
+type SearchHit = {
+    url: string
+    area?: string
+    type?: string
+    content?: string
+    hierarchy?: Partial<Record<HierarchyLevel, string>>
+    _highlightResult?: SearchResult
+    _snippetResult?: SearchResult
+}
+
+const hierarchyLevels = ['lvl0', 'lvl1', 'lvl2', 'lvl3', 'lvl4', 'lvl5', 'lvl6'] as const
+type HierarchyLevel = typeof hierarchyLevels[number]
+
+const versionFilter = 'version:main'
+const acronymLabels: Record<string, string> = {
+    acl: 'ACL',
+    adr: 'ADR',
+    api: 'API',
+    b2b: 'B2B',
+    cms: 'CMS',
+    csv: 'CSV',
+    html: 'HTML',
+    http: 'HTTP',
+    json: 'JSON',
+    rest: 'REST',
+    sdk: 'SDK',
+    seo: 'SEO',
+    sql: 'SQL',
+    twig: 'Twig',
+    url: 'URL',
+    xml: 'XML',
+}
+const ignoredPathSegments = new Set([
+    'de',
+    'en',
+    'shopware-6-de',
+    'shopware-6-en',
+])
+
+onMounted(update)
+watch(localeIndex, update)
+
+function update() {
+    const options = {
+        ...props.algolia,
+        ...props.algolia.locales?.[localeIndex.value]
+    }
+    const rawFacetFilters = options.searchParameters?.facetFilters ?? []
+    const facetFilters = [
+        ...(Array.isArray(rawFacetFilters)
+                ? rawFacetFilters
+                : [rawFacetFilters]
+        ).filter((filter) => !isLangFacetFilter(filter)),
+        `lang:${lang.value}`
+    ]
+    initialize({
+        ...options,
+        searchParameters: {
+            ...options.searchParameters,
+            facetFilters
+        }
+    })
+}
+
+function isLangFacetFilter(filter: string | string[]) {
+    return typeof filter === 'string' && filter.startsWith('lang:')
+}
+
+function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
+    // @ts-ignore
+    const options = Object.assign<{}, {}, DocSearchProps>({}, userOptions, {
+        container: '#docsearch',
+
+        getMissingResultsUrl({ query }: { query: string }) {
+            return `https://github.com/shopware/docs/issues/new?title=Missing%20search%20result%20for%20${query}`
+        },
+
+        navigator: {
+            navigate({ itemUrl }) {
+                const { pathname: hitPathname, origin: hitOrigin } = new URL(itemUrl, window.location.origin)
+
+                // router doesn't handle same-page navigation so we use the native
+                // browser location API for anchor navigation
+                if (route.path === hitPathname || hitOrigin !== window.location.origin) {
+                    window.location.assign(itemUrl)
+                } else {
+                    router.go(itemUrl)
+                }
+            }
+        },
+
+        transformItems(items) {
+            return items.map((item) => transformHit(item as SearchHit))
+        },
+
+        /*
+        // @ts-expect-error vue-tsc thinks this should return Vue JSX but it returns the required React one
+        hitComponent({ hit, children }) {
+            return {
+                __v: null,
+                type: 'a',
+                ref: undefined,
+                constructor: undefined,
+                key: undefined,
+                props: { href: hit.url, children }
+            }
+        },*/
+
+        // https://www.algolia.com/doc/api-reference/search-api-parameters/
+        searchParameters: {
+            ...userOptions.searchParameters,
+            // requires adding "Attributes for faceting" under Algolia > Index > Configuration
+            filters: versionFilter,
+            hitsPerPage: 30,
+            length: 30,
+            offset: 0,
+        }
+    })
+
+    docsearch(options)
+}
+
+function getRelativePath(absoluteUrl: string) {
+    const { pathname, hash, origin } = new URL(absoluteUrl)
+    const cleanPath = pathname.replace(
+        /\.html$/,
+        site.value.cleanUrls ? '' : '.html'
+    );
+    const finalOrigin = origin === window.location.origin ? '' : origin;
+
+    return `${finalOrigin}${cleanPath}${hash}`
+}
+
+function transformHit(item: SearchHit) {
+    const url = getRelativePath(item.url)
+    const locationTrail = getLocationTrail(item)
+    const result = Object.assign({}, item, { url })
+
+    if (locationTrail.length === 0) {
+        return result
+    }
+
+    const path = escapeHtml(locationTrail.join(' / '))
+
+    if (item.type === 'lvl1') {
+        return Object.assign(result, {
+            content: path,
+            _snippetResult: withContentValue(item._snippetResult, path),
+        })
+    }
+
+    if (!shouldReplaceDefaultPath(item)) {
+        return result
+    }
+
+    return Object.assign(result, {
+        _highlightResult: withHierarchyValue(item._highlightResult, 'lvl1', path),
+        _snippetResult: withHierarchyValue(item._snippetResult, 'lvl1', path),
+    })
+}
+
+function shouldReplaceDefaultPath(item: SearchHit) {
+    return item.type !== 'lvl0' && item.type !== 'lvl1'
+}
+
+function withHierarchyValue(result: SearchResult | undefined, level: HierarchyLevel, value: string): SearchResult {
+    const hierarchy = {
+        ...(result?.hierarchy ?? {}),
+        [level]: {
+            ...(result?.hierarchy?.[level] ?? {}),
+            value,
+        },
+    }
+
+    return {
+        ...(result ?? {}),
+        hierarchy,
+    }
+}
+
+function withContentValue(result: SearchResult | undefined, value: string): SearchResult {
+    return {
+        ...(result ?? {}),
+        content: {
+            ...(result?.content ?? {}),
+            value,
+        },
+    }
+}
+
+function getLocationTrail(item: SearchHit) {
+    const pageTrail = getPageTrail(item)
+    const headingTrail = getHeadingTrail(item)
+    const currentTitle = isHierarchyLevel(item.type) ? item.hierarchy?.[item.type] : ''
+
+    return removeTrailingLabel(
+        mergeTrails(pageTrail, headingTrail),
+        cleanLabel(currentTitle)
+    )
+}
+
+function getPageTrail(item: SearchHit) {
+    const url = new URL(item.url)
+    const path = url.pathname
+        .replace(/\/index(?:\.html)?$/, '')
+        .replace(/\.html$/, '')
+
+    const segments = path
+        .split('/')
+        .filter(Boolean)
+        .filter((segment) => !/^v\d+(?:\.\d+)?$/.test(segment))
+        .filter((segment) => !ignoredPathSegments.has(segment))
+
+    const labels = segments.map(formatSegment)
+    const sourceLabel = cleanLabel(item.hierarchy?.lvl0)
+
+    if (labels.length > 0 && isKnownTopLevelSegment(segments[0])) {
+        return labels
+    }
+
+    return mergeTrails(sourceLabel ? [sourceLabel] : [], labels)
+}
+
+function getHeadingTrail(item: SearchHit) {
+    return hierarchyLevels
+        .map((level) => cleanLabel(item.hierarchy?.[level]))
+        .filter(Boolean)
+}
+
+function mergeTrails(...trails: string[][]) {
+    const merged: string[] = []
+    const seen = new Set<string>()
+
+    for (const trail of trails) {
+        for (const label of trail) {
+            const normalized = normalizeLabel(label)
+
+            if (!normalized || seen.has(normalized)) {
+                continue
+            }
+
+            seen.add(normalized)
+            merged.push(label)
+        }
+    }
+
+    return merged
+}
+
+function removeTrailingLabel(trail: string[], label: string) {
+    if (!label) {
+        return trail
+    }
+
+    const normalizedLabel = normalizeLabel(label)
+    const result = [...trail]
+
+    while (result.length > 0 && normalizeLabel(result[result.length - 1]) === normalizedLabel) {
+        result.pop()
+    }
+
+    return result
+}
+
+function isKnownTopLevelSegment(segment: string) {
+    return [
+        'apps',
+        'docs',
+        'frontends',
+        'integrations',
+        'meteor',
+        'plugins',
+        'release-notes',
+        'resources',
+        'themes',
+    ].includes(segment)
+}
+
+function isHierarchyLevel(value: string | undefined): value is HierarchyLevel {
+    return hierarchyLevels.includes(value as HierarchyLevel)
+}
+
+function cleanLabel(value: string | undefined) {
+    return (value ?? '')
+        .replace(/&amp;/g, '&')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&quot;/g, '"')
+        .replace(/&#39;/g, "'")
+        .replace(/[\u200B-\u200D\uFEFF]/g, '')
+        .replace(/\s+/g, ' ')
+        .trim()
+}
+
+function normalizeLabel(value: string) {
+    return cleanLabel(value)
+        .toLowerCase()
+        .replace(/&amp;/g, 'and')
+        .replace(/[^a-z0-9]+/g, ' ')
+        .trim()
+}
+
+function formatSegment(segment: string) {
+    const normalized = segment.toLowerCase()
+
+    if (acronymLabels[normalized]) {
+        return acronymLabels[normalized]
+    }
+
+    return segment
+        .replace(/[-_]+/g, ' ')
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((word) => acronymLabels[word.toLowerCase()] ?? `${word.charAt(0).toUpperCase()}${word.slice(1)}`)
+        .join(' ')
+}
+
+function escapeHtml(value: string) {
+    return value.replace(/[&<>"']/g, (character) => {
+        return ({
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#39;',
+        } as Record<string, string>)[character]
+    })
+}
+</script>
+
+<template>
+    <div id="docsearch" />
+</template>
diff --git a/.vitepress/theme/style.scss b/.vitepress/theme/style.scss
index 9304d23e..b217f3c9 100644
--- a/.vitepress/theme/style.scss
+++ b/.vitepress/theme/style.scss
@@ -67,3 +67,40 @@
 .VPFlyout:has(.menu a.active) .text {
     color: var(--vp-c-brand-1);
 }
+
+:root {
+    --docsearch-modal-width: 720px;
+    --docsearch-hit-height: auto;
+}
+
+.DocSearch-Modal {
+    border-radius: 8px;
+}
+
+.DocSearch-Hit a {
+    min-height: 62px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.DocSearch-Hit-content-wrapper {
+    gap: 3px;
+    white-space: normal;
+}
+
+.DocSearch-Hit-title {
+    line-height: 1.35;
+}
+
+.DocSearch-Hit-path {
+    color: var(--docsearch-muted-color);
+    font-size: 0.74rem;
+    line-height: 1.35;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.DocSearch-Hit-source {
+    margin-top: 16px;
+}
diff --git a/src/components/SwagAlgoliaSearchPage.vue b/src/components/SwagAlgoliaSearchPage.vue
index c9016ff5..3a6de0d6 100644
--- a/src/components/SwagAlgoliaSearchPage.vue
+++ b/src/components/SwagAlgoliaSearchPage.vue
@@ -1,39 +1,88 @@
 <template>
   <AisInstantSearch class="SwagAlgoliaSearchPage" :index-name="indexName" :search-client="searchClient">
-    <div class="SwagAlgoliaSearchPage_sidebar">
-      <AisSearchBox placeholder="Search here…" class="searchbox"/>
-
-      <!--<AisMenu attribute="version"/>-->
-
-      <!--<AisMenu attribute="repository"/>-->
-
-      <!--<AisRefinementList attribute="version"/>-->
+    <AisConfigure
+      :hits-per-page.camel="20"
+      filters="version:main"
+      :attributes-to-retrieve.camel="['url', 'hierarchy', 'area', 'type']"
+      :attributes-to-snippet.camel="['content:24']"
+    />
 
-      <AisHierarchicalMenu :attributes="['version', 'hierarchy.lvl0']"/>
-
-      <!--<AisCurrentRefinements/>-->
+    <div class="SwagAlgoliaSearchPage_sidebar">
+      <AisSearchBox class="SwagAlgoliaSearchPage_search">
+        <template #default="{ currentRefinement, refine }">
+          <form class="SwagAlgoliaSearchPage_searchForm" role="search" @submit.prevent>
+            <input
+              aria-label="Search"
+              autocomplete="off"
+              class="SwagAlgoliaSearchPage_searchInput"
+              placeholder="Search here..."
+              spellcheck="false"
+              type="search"
+              :value="currentRefinement"
+              @input="refine(getInputValue($event))"
+            />
+            <button
+              v-if="currentRefinement"
+              aria-label="Clear search"
+              class="SwagAlgoliaSearchPage_searchClear"
+              type="button"
+              @click="refine('')"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </form>
+        </template>
+      </AisSearchBox>
 
-      <!--<AisHitsPerPage />-->
+      <div class="SwagAlgoliaSearchPage_filter">
+        <span class="SwagAlgoliaSearchPage_filterTitle">Area</span>
+        <AisRefinementList attribute="area" :sort-by.camel="['count:desc', 'name:asc']">
+          <template #item="{ item, refine }">
+            <label class="ais-RefinementList-label">
+              <input
+                class="ais-RefinementList-checkbox"
+                type="checkbox"
+                :value="item.value"
+                :checked="item.isRefined"
+                @change="refine(item.value)"
+              />
+              <span class="ais-RefinementList-labelText">{{ formatFacet(item.label) }}</span>
+              <span class="ais-RefinementList-count">{{ item.count }}</span>
+            </label>
+          </template>
+        </AisRefinementList>
+      </div>
     </div>
 
     <div class="SwagAlgoliaSearchPage_content">
 
       <AisStats/>
 
-      <!--<AisBreadcrumb :attributes="['lvl0', 'lvl1', 'version', 'repository']"/>-->
-
       <AisHits>
-        <template v-slot="{ items, sendEvent }">
+        <template v-slot="{ items }">
 
           <div class="SwagAlgoliaSearchPage_list">
             <a :href="item.url" class="SwagAlgoliaSearchPage_item c-any-card" v-for="item in items"
                :key="item.objectID">
               <span class="SwagAlgoliaSearchPage_title c-any-card_title">
-                {{ item.hierarchy.lvl2 || item.hierarchy.lvl1 || item.hierarchy.lvl0 }}
+                <AisHighlight :hit="item" :attribute="getTitleAttribute(item)"/>
+              </span>
+
+              <span class="SwagAlgoliaSearchPage_tree" aria-label="Location">
+                <template v-for="(entry, index) in getLocationTrail(item)" :key="`${item.objectID}-${entry}-${index}`">
+                  <span>{{ entry }}</span>
+                  <span v-if="index < getLocationTrail(item).length - 1" aria-hidden="true">/</span>
+                </template>
+              </span>
+
+              <span v-if="hasSnippet(item)" class="SwagAlgoliaSearchPage_snippet c-any-card_description">
+                <AisSnippet :hit="item" attribute="content"/>
+              </span>
+
+              <span class="SwagAlgoliaSearchPage_meta">
+                <span v-if="item.area" class="SwagAlgoliaSearchPage_badge">{{ formatFacet(item.area) }}</span>
+                <span v-if="item.type" class="SwagAlgoliaSearchPage_badge">{{ formatType(item.type) }}</span>
               </span>
-              <span class="SwagAlgoliaSearchPage_sub c-any-card_description">{{ item.url }}</span>
-              <AisHighlight :hit="item" attribute="repository"/>
-              <AisHighlight :hit="item" attribute="version"/>
             </a>
           </div>
         </template>
@@ -43,8 +92,6 @@
         <AisPagination/>
       </div>
     </div>
-
-    <!--<AisConfigure :hits-per-page.camel="20" :filters="`version:main`" />-->
   </AisInstantSearch>
 </template>
 
@@ -54,28 +101,215 @@ import {
   AisSearchBox,
   AisHits,
   AisHighlight,
+  AisSnippet,
   AisStats,
   AisRefinementList,
   AisConfigure,
-  AisHierarchicalMenu,
-  AisMenu,
-  AisCurrentRefinements,
-  AisHitsPerPage,
-  AisBreadcrumb,
   AisPagination
 } from 'vue-instantsearch/vue3/es/index.js';
 import algoliasearch from 'algoliasearch';
-//import 'instantsearch.css/themes/algolia-min.css';
 import {useData} from "vitepress";
 
 const {theme} = useData()
 const {appId, indexName, apiKey} = theme.value.algolia;
 const searchClient = algoliasearch(appId, apiKey);
+
+const hierarchyLevels = ['lvl0', 'lvl1', 'lvl2', 'lvl3', 'lvl4', 'lvl5', 'lvl6'] as const;
+const versionSegmentPattern = /^v\d+(?:\.\d+)*$/i;
+const hiddenCharactersPattern = /[\u200B-\u200D\uFEFF]/g;
+
+type HierarchyLevel = typeof hierarchyLevels[number];
+
+type AlgoliaHit = {
+  url?: string;
+  hierarchy?: Partial<Record<HierarchyLevel, string | null>>;
+  area?: string;
+  type?: string;
+  _snippetResult?: {
+    content?: {
+      value?: string;
+    };
+  };
+};
+
+const labelOverrides: Record<string, string> = {
+  acl: 'ACL',
+  adr: 'ADR',
+  ai: 'AI',
+  api: 'API',
+  b2b: 'B2B',
+  cli: 'CLI',
+  cms: 'CMS',
+  css: 'CSS',
+  html: 'HTML',
+  mcp: 'MCP',
+  paas: 'PaaS',
+  qa: 'QA',
+  saas: 'SaaS',
+  sdk: 'SDK',
+  seo: 'SEO',
+  ssl: 'SSL',
+  ui: 'UI',
+  url: 'URL',
+};
+
+function cleanLabel(value?: string | null): string {
+  return (value || '')
+    .replace(hiddenCharactersPattern, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function getInputValue(event: Event): string {
+  return event.target instanceof HTMLInputElement ? event.target.value : '';
+}
+
+function normalizeLabel(value: string): string {
+  return cleanLabel(value).toLowerCase().replace(/[^a-z0-9]+/g, '');
+}
+
+function formatSegment(segment: string): string {
+  const decodedSegment = decodeURIComponent(segment)
+    .replace(/\.html?$/i, '')
+    .replace(/[-_]+/g, ' ')
+    .trim();
+
+  return decodedSegment
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((word) => labelOverrides[word.toLowerCase()] || `${word.charAt(0).toUpperCase()}${word.slice(1)}`)
+    .join(' ');
+}
+
+function getPageTrail(url?: string): string[] {
+  if (!url) {
+    return [];
+  }
+
+  try {
+    const parsedUrl = new URL(url);
+
+    return parsedUrl.pathname
+      .split('/')
+      .filter(Boolean)
+      .map((segment) => segment.replace(/\.html?$/i, ''))
+      .filter((segment) => segment !== 'index' && !versionSegmentPattern.test(segment))
+      .map(formatSegment)
+      .filter(Boolean);
+  } catch {
+    return [];
+  }
+}
+
+function getHeadingTrail(hit: AlgoliaHit): string[] {
+  return hierarchyLevels
+    .map((level) => cleanLabel(hit.hierarchy?.[level]))
+    .filter(Boolean);
+}
+
+function getLocationTrail(hit: AlgoliaHit): string[] {
+  const pageTrail = getPageTrail(hit.url);
+  const headingTrail = getHeadingTrail(hit);
+
+  if (!pageTrail.length) {
+    return headingTrail;
+  }
+
+  const seenEntries = new Set(pageTrail.map(normalizeLabel));
+  const mergedTrail = [...pageTrail];
+
+  for (const entry of headingTrail) {
+    const normalizedEntry = normalizeLabel(entry);
+
+    if (!normalizedEntry || seenEntries.has(normalizedEntry)) {
+      continue;
+    }
+
+    mergedTrail.push(entry);
+    seenEntries.add(normalizedEntry);
+  }
+
+  return mergedTrail;
+}
+
+function getTitleAttribute(hit: AlgoliaHit): string {
+  const deepestLevel = [...hierarchyLevels]
+    .reverse()
+    .find((level) => cleanLabel(hit.hierarchy?.[level]));
+
+  return deepestLevel ? `hierarchy.${deepestLevel}` : 'url';
+}
+
+function hasSnippet(hit: AlgoliaHit): boolean {
+  return Boolean(hit._snippetResult?.content?.value);
+}
+
+function formatFacet(value: string): string {
+  return cleanLabel(value)
+    .split(/[-_\s]+/)
+    .filter(Boolean)
+    .map((word) => labelOverrides[word.toLowerCase()] || `${word.charAt(0).toUpperCase()}${word.slice(1)}`)
+    .join(' ');
+}
+
+function formatType(type: string): string {
+  const headingMatch = type.match(/^lvl(\d+)$/);
+
+  if (headingMatch) {
+    return `Heading ${headingMatch[1]}`;
+  }
+
+  return formatFacet(type);
+}
 </script>
 
 <style lang="scss">
 .ais-Pagination-list {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
   list-style: none;
+  margin: 0;
+  padding-left: 0;
+}
+
+.ais-Pagination-item {
+  display: inline-flex;
+}
+
+.ais-Pagination-link {
+  align-items: center;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  color: var(--c-text);
+  display: inline-flex;
+  font-size: 0.875rem;
+  height: 2rem;
+  justify-content: center;
+  line-height: 1;
+  min-width: 2rem;
+  padding: 0 0.5rem;
+  text-decoration: none;
+}
+
+.ais-Pagination-link:hover {
+  border-color: var(--vp-c-brand-1);
+  color: var(--vp-c-brand-1);
+}
+
+.ais-Pagination-item--selected .ais-Pagination-link {
+  background: var(--vp-c-brand-1);
+  border-color: var(--vp-c-brand-1);
+  color: #fff;
+  font-weight: 700;
+}
+
+.ais-Pagination-item--disabled .ais-Pagination-link {
+  color: var(--c-text-light);
+  cursor: not-allowed;
+  opacity: 0.45;
+  pointer-events: none;
 }
 
 .VPPage {
@@ -88,11 +322,38 @@ const searchClient = algoliasearch(appId, apiKey);
   @apply ml-2;
 }
 
+.ais-RefinementList-list {
+  list-style: none;
+  padding-left: 0;
+}
+
+.ais-RefinementList-item {
+  margin-top: 0.25rem;
+}
+
+.ais-RefinementList-label {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.ais-RefinementList-labelText {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.ais-RefinementList-count {
+  margin-left: auto;
+  color: var(--c-text-light);
+  font-size: 0.75rem;
+}
+
 .SwagAlgoliaSearchPage {
   @apply grid md:flex gap-10 my-6;
 
   &_sidebar {
-    @apply md:w-56 md:flex-none;
+    @apply md:w-64 md:flex-none;
     @apply grid gap-4;
     @apply self-start;
   }
@@ -103,12 +364,108 @@ const searchClient = algoliasearch(appId, apiKey);
     @apply self-start;
   }
 
+  &_searchForm {
+    position: relative;
+  }
+
+  &_searchInput {
+    background: var(--vp-c-bg);
+    border: 1px solid var(--vp-c-divider);
+    border-radius: 6px;
+    color: var(--c-text);
+    font: inherit;
+    height: 2.5rem;
+    outline: none;
+    padding: 0 2.5rem 0 0.75rem;
+    width: 100%;
+  }
+
+  &_searchInput::placeholder {
+    color: var(--c-text-light);
+  }
+
+  &_searchInput:focus {
+    border-color: var(--vp-c-brand-1);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vp-c-brand-1) 18%, transparent);
+  }
+
+  &_searchInput::-webkit-search-cancel-button,
+  &_searchInput::-webkit-search-decoration {
+    appearance: none;
+    -webkit-appearance: none;
+  }
+
+  &_searchClear {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: 6px;
+    color: var(--c-text-light);
+    cursor: pointer;
+    display: inline-flex;
+    font-size: 1.25rem;
+    height: 1.75rem;
+    justify-content: center;
+    line-height: 1;
+    padding: 0;
+    position: absolute;
+    right: 0.375rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1.75rem;
+  }
+
+  &_searchClear:hover,
+  &_searchClear:focus-visible {
+    background: var(--vp-c-bg-soft);
+    color: var(--c-text);
+  }
+
   &_list {
     @apply grid gap-4;
   }
 
   &_item {
-    @apply p-4 flex flex-col;
+    @apply p-4 flex flex-col gap-3;
+    text-decoration: none;
+  }
+
+  &_tree {
+    @apply flex flex-wrap items-center gap-1 text-sm;
+    color: var(--c-text-light);
+    line-height: 1.5;
+  }
+
+  &_snippet {
+    line-height: 1.6;
+  }
+
+  &_meta {
+    @apply flex flex-wrap gap-2;
+  }
+
+  &_badge {
+    border: 1px solid var(--vp-c-divider);
+    border-radius: 999px;
+    color: var(--c-text-light);
+    font-size: 0.75rem;
+    line-height: 1;
+    padding: 0.25rem 0.5rem;
+  }
+
+  &_filter {
+    border-bottom: 1px solid var(--vp-c-divider);
+    padding-bottom: 1rem;
+  }
+
+  &_filterTitle {
+    color: var(--c-text);
+    display: block;
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
   }
 
   &_sub {
@@ -116,4 +473,9 @@ const searchClient = algoliasearch(appId, apiKey);
     color: var(--c-text);
   }
 }
-</style>
\ No newline at end of file
+
+.pagination {
+  @apply flex justify-end;
+  margin-top: 0.5rem;
+}
+</style>