feat: Updated the search result fly-out menu design (#8203)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/portal/components/PublicArticleSearch.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-on-clickaway="closeSearch" class="max-w-2xl w-full relative my-4">
+  <div v-on-clickaway="closeSearch" class="max-w-6xl w-full relative my-4">
     <public-search-input
       v-model="searchTerm"
       :search-placeholder="searchTranslations.searchPlaceholder"
@@ -7,12 +7,13 @@
     />
     <div
       v-if="shouldShowSearchBox"
-      class="absolute top-16 w-full"
+      class="absolute top-14 w-full"
       @mouseover="openSearch"
     >
       <search-suggestions
         :items="searchResults"
         :is-loading="isLoading"
+        :search-term="searchTerm"
         :empty-placeholder="searchTranslations.emptyPlaceholder"
         :results-title="searchTranslations.resultsTitle"
         :loading-placeholder="searchTranslations.loadingPlaceholder"

app/javascript/portal/components/PublicSearchInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full flex items-center rounded-md border-solid border-2 h-16 bg-white dark:bg-slate-900 px-4 py-2 text-slate-600 dark:text-slate-200"
+    class="w-full flex items-center rounded-lg border-solid border h-12 bg-white dark:bg-slate-900 px-5 py-2 text-slate-600 dark:text-slate-200"
     :class="{
       'shadow border-woot-100 dark:border-woot-700': isFocused,
       'border-slate-50 dark:border-slate-800 shadow-sm': !isFocused,

app/javascript/portal/components/SearchSuggestions.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="shadow-md bg-white dark:bg-slate-900 mt-2 max-h-72 scroll-py-2 p-4 rounded overflow-y-auto text-sm text-slate-700 dark:text-slate-100"
+    class="shadow-xl hover:shadow-lg bg-white dark:bg-slate-900 mt-2 max-h-96 scroll-py-2 p-5 overflow-y-auto text-sm text-slate-700 dark:text-slate-100 border border-solid border-slate-50 dark:border-slate-800 rounded-lg"
   >
     <div
       v-if="isLoading"
@@ -8,32 +8,34 @@
     >
       {{ loadingPlaceholder }}
     </div>
-    <h3
-      v-if="shouldShowResults"
-      class="font-medium text-sm text-slate-400 dark:text-slate-700"
-    >
-      {{ resultsTitle }}
-    </h3>
     <ul
       v-if="shouldShowResults"
-      class="bg-white dark:bg-slate-900 mt-2 max-h-72 scroll-py-2 overflow-y-auto text-sm text-slate-700 dark:text-slate-100"
+      class="bg-white dark:bg-slate-900 gap-4 flex flex-col text-sm text-slate-700 dark:text-slate-100"
       role="listbox"
     >
       <li
         v-for="(article, index) in items"
         :id="article.id"
         :key="article.id"
-        class="group flex cursor-default select-none items-center rounded-md p-2 mb-1"
-        :class="{ 'bg-slate-25 dark:bg-slate-800': index === selectedIndex }"
+        class="group flex border border-solid hover:bg-slate-25 dark:hover:bg-slate-800 border-slate-100 dark:border-slate-800 rounded-lg cursor-pointer select-none items-center p-4"
+        :class="isSearchItemActive(index)"
         role="option"
         tabindex="-1"
-        @mouseover="onHover(index)"
+        @mouse-enter="onHover(index)"
+        @mouse-leave="onHover(-1)"
       >
         <a
+          class="flex flex-col gap-1 overflow-y-hidden"
           :href="generateArticleUrl(article)"
-          class="flex-auto truncate text-base font-medium leading-6 w-full hover:underline"
         >
-          {{ article.title }}
+          <span
+            v-dompurify-html="prepareContent(article.title)"
+            class="flex-auto truncate text-base font-semibold leading-6 w-full overflow-hidden text-ellipsis whitespace-nowrap"
+          />
+          <div
+            v-dompurify-html="prepareContent(article.content)"
+            class="line-clamp-2 text-ellipsis text-slate-600 dark:text-slate-300 text-sm"
+          />
         </a>
       </li>
     </ul>
@@ -49,9 +51,10 @@
 
 <script>
 import mentionSelectionKeyboardMixin from 'dashboard/components/widgets/mentions/mentionSelectionKeyboardMixin.js';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 
 export default {
-  mixins: [mentionSelectionKeyboardMixin],
+  mixins: [mentionSelectionKeyboardMixin, messageFormatterMixin],
   props: {
     items: {
       type: Array,
@@ -77,10 +80,14 @@ export default {
       type: String,
       default: '',
     },
+    searchTerm: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
-      selectedIndex: 0,
+      selectedIndex: -1,
     };
   },
 
@@ -94,18 +101,24 @@ export default {
   },
 
   methods: {
+    isSearchItemActive(index) {
+      return index === this.selectedIndex
+        ? 'bg-slate-25 dark:bg-slate-800'
+        : 'bg-white dark:bg-slate-900';
+    },
     generateArticleUrl(article) {
       return `/hc/${article.portal.slug}/articles/${article.slug}`;
     },
     handleKeyboardEvent(e) {
       this.processKeyDownEvent(e);
-      this.$el.scrollTop = 40 * this.selectedIndex;
+      this.$el.scrollTop = 102 * this.selectedIndex;
     },
-    onHover(index) {
-      this.selectedIndex = index;
-    },
-    onSelect() {
-      window.location = this.generateArticleUrl(this.items[this.selectedIndex]);
+    prepareContent(content) {
+      return this.highlightContent(
+        content,
+        this.searchTerm,
+        'bg-slate-100 dark:bg-slate-700 font-semibold text-slate-600 dark:text-slate-200'
+      );
     },
   },
 };