From 40f1d1b6f6f2f6c43fd0d9bcf4b6bc1174ce4831 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sun, 16 Apr 2023 14:59:36 +0530
Subject: [PATCH] feat(search): allow force disabling detailed view

---
 .../components/VPLocalSearchBox.vue           | 41 +++++++++++--------
 src/client/theme-default/styles/vars.css      |  2 +-
 types/default-theme.d.ts                      |  5 +++
 3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/client/theme-default/components/VPLocalSearchBox.vue b/src/client/theme-default/components/VPLocalSearchBox.vue
index d0743db2..6380f107 100644
--- a/src/client/theme-default/components/VPLocalSearchBox.vue
+++ b/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) =>
-            t ? [t.replace(reg, `<mark>$&</mark>`)] : []
-          )
+          titles = titles
+            .map((t) => t?.replace(reg, `<mark>$&</mark>`))
+            .filter(Boolean)
         }
         if (showDetailedListValue && match.includes('text')) {
           text = text.replace(reg, `<mark>$&</mark>`)
         }
       }
 
-      return {
-        ...r,
-        title,
-        titles,
-        text
-      }
+      return { ...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="{
-                'detailed-list': showDetailedList
-              }"
+              :class="{ '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 {
diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index 66536074..2e4cdca8 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/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);
 }
 
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index 0eda078b..cf9f102e 100644
--- a/types/default-theme.d.ts
+++ b/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'>>>
   }