feat(search): allow force disabling detailed view

src/client/theme-default/components/VPLocalSearchBox.vue

@@ -18,7 +18,9 @@ import {
   ref,
   shallowRef,
   watch,
-  type Ref
+  type Ref,
+  computed,
+  watchEffect
 } from 'vue'
 import type { ModalTranslations } from '../../../../types/local-search'
 import { pathToFile, withBase } from '../../app/utils'
@@ -54,7 +56,7 @@ interface Result {
   text?: string
 }
 
-const { localeIndex } = useData()
+const { localeIndex, theme } = useData()
 
 const searchIndex = computedAsync(async () =>
   markRaw(
@@ -80,6 +82,19 @@ const showDetailedList = useLocalStorage(
   false
 )
 
+const disableDetailedView = computed(() => {
+  return (
+    theme.value.search?.provider === 'local' &&
+    theme.value.search.options?.disableDetailedView === true
+  )
+})
+
+watchEffect(() => {
+  if (disableDetailedView.value) {
+    showDetailedList.value = false
+  }
+})
+
 const results: Ref<(SearchResult & Result)[]> = shallowRef([])
 
 const contents = shallowRef(new Map<string, Map<string, string>>())
@@ -158,21 +173,16 @@ debouncedWatch(
           title = title.replace(reg, `<mark>$&</mark>`)
         }
         if (match.includes('titles')) {
-          titles = titles.flatMap((t) =>
+          titles = titles
-            t ? [t.replace(reg, `<mark>$&</mark>`)] : []
+            .map((t) => t?.replace(reg, `<mark>$&</mark>`))
-          )
+            .filter(Boolean)
         }
         if (showDetailedListValue && match.includes('text')) {
           text = text.replace(reg, `<mark>$&</mark>`)
         }
       }
 
-      return {
+      return { ...r, title, titles, text }
-        ...r,
-        title,
-        titles,
-        text
-      }
     })
     contents.value = c
 
@@ -272,9 +282,6 @@ onKeyStroke('Escape', () => {
 })
 
 // Translations
-
-const { theme } = useData()
-
 const defaultTranslations: { modal: ModalTranslations } = {
   modal: {
     displayDetails: 'Display detailed list',
@@ -364,10 +371,9 @@ useEventListener('popstate', (event) => {
           />
           <div class="search-actions">
             <button
+              v-if="!disableDetailedView"
               class="toggle-layout-button"
-              :class="{
+              :class="{ 'detailed-list': showDetailedList }"
-                'detailed-list': showDetailedList
-              }"
               :title="$t('modal.displayDetails')"
               @click="showDetailedList = !showDetailedList"
             >
@@ -746,6 +752,7 @@ useEventListener('popstate', (event) => {
   background-color: var(--vp-c-highlight-bg);
   color: var(--vp-c-highlight-text);
   border-radius: 2px;
+  padding: 0 4px;
 }
 
 .excerpt :deep(.vp-code-group) .tabs {

src/client/theme-default/styles/vars.css

@@ -98,7 +98,7 @@
   --vp-c-mute-dark: #e3e3e5;
   --vp-c-mute-darker: #d7d7d9;
 
-  --vp-c-highlight-bg: var(--vp-c-yellow-lighter);
+  --vp-c-highlight-bg: var(--vp-c-green-lighter);
   --vp-c-highlight-text: var(--vp-c-black);
 }
 

types/default-theme.d.ts

@@ -293,6 +293,11 @@ export namespace DefaultTheme {
   // local search --------------------------------------------------------------
 
   export interface LocalSearchOptions {
+    /**
+     * @default false
+     */
+    disableDetailedView?: boolean
+
     translations?: LocalSearchTranslations
     locales?: Record<string, Partial<Omit<LocalSearchOptions, 'locales'>>>
   }