feat: Implemented search results page functionality (#11086)

# Pull Request Template

## Description
Implemented search results page functionality. Now you can press "Enter"
to search by term and display results in a results page. Also now you
can link to /hc/{account}/en/search?query=XXXXXX to view search results
for XXXXXX query.

fixes: https://github.com/chatwoot/chatwoot/issues/10945

## Screenshots

Classic layout search results:
<img width="3840" height="2160" alt="classic-results"
src="https://github.com/user-attachments/assets/3bbb3272-33ca-4eb4-b80a-76ed77442088"
/>

Classic layout pagination:
<img width="3840" height="2160" alt="classic-page-two"
src="https://github.com/user-attachments/assets/062b09d3-7c58-4d3b-8611-b94375e7db51"
/>

Classic layout empty search:
<img width="3840" height="2160" alt="no-results"
src="https://github.com/user-attachments/assets/c5e3f47a-cd9a-4e14-ae92-ccba00c89e98"
/>

Documentation layout search results:
<img width="3840" height="2160" alt="documentation-results"
src="https://github.com/user-attachments/assets/9e45d8d9-c975-4589-b6c6-3bc7bb3c588e"
/>

Documentation layout dark theme:
<img width="3840" height="2160" alt="documentation-dark"
src="https://github.com/user-attachments/assets/cdb6ed63-4241-4b32-9f79-7d92ed479fc8"
/>

Plain embedded dark layout:
<img width="3840" height="2160" alt="plain-embedded-dark"
src="https://github.com/user-attachments/assets/7deb02b9-9f24-48fb-8979-a2ecd7002c05"
/>

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Sojan Jose <sojan@pepalo.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Vinay Keerthi <11478411+stonecharioteer@users.noreply.github.com>

app/javascript/entrypoints/portal.js

@@ -1,9 +1,9 @@
 import Rails from '@rails/ujs';
-import Turbolinks from 'turbolinks';
+import { Turbo } from '@hotwired/turbo-rails';
 import '../portal/application.scss';
 import { InitializationHelpers } from '../portal/portalHelpers';
 
 Rails.start();
-Turbolinks.start();
+Turbo.start();
 
-document.addEventListener('turbolinks:load', InitializationHelpers.onLoad);
+document.addEventListener('turbo:load', InitializationHelpers.onLoad);

app/javascript/portal/application.scss

@@ -55,6 +55,6 @@ body {
   }
 }
 
-.turbolinks-progress-bar {
+.turbo-progress-bar {
   background-color: var(--dynamic-portal-color);
 }

app/javascript/portal/components/PublicArticleSearch.vue

@@ -138,21 +138,40 @@ export default {
         this.isLoading = false;
       }
     },
+    handleSubmit() {
+      const query = this.normalizedSearchTerm;
+      if (!query) return;
+
+      const searchParams = new URLSearchParams({ query });
+      const { theme, isPlainLayoutEnabled } = window.portalConfig;
+
+      if (theme) searchParams.set('theme', theme);
+      if (isPlainLayoutEnabled === 'true') {
+        searchParams.set('show_plain_layout', 'true');
+      }
+
+      window.location.href = `/hc/${this.portalSlug}/${this.localeCode}/search?${searchParams.toString()}`;
+    },
   },
 };
 </script>
 
 <template>
   <div v-on-clickaway="closeSearch" class="relative w-full max-w-5xl my-4">
-    <PublicSearchInput
-      ref="searchInput"
-      :search-term="searchTerm"
-      :search-placeholder="searchTranslations.searchPlaceholder"
-      :size="size"
-      :kbd="kbdLabel"
-      @update:search-term="onUpdateSearchTerm"
-      @focus="openSearch"
-    />
+    <form @submit.prevent="handleSubmit">
+      <PublicSearchInput
+        ref="searchInput"
+        :search-term="searchTerm"
+        :search-placeholder="searchTranslations.searchPlaceholder"
+        :size="size"
+        :kbd="kbdLabel"
+        @update:search-term="onUpdateSearchTerm"
+        @focus="openSearch"
+      />
+      <button type="submit" class="sr-only">
+        {{ searchTranslations.submit }}
+      </button>
+    </form>
     <div
       v-if="shouldShowSearchBox"
       class="absolute w-full top-14"

app/javascript/portal/components/TableOfContents.vue

@@ -112,8 +112,8 @@ export default {
             <p class="py-1 px-3" :class="getClassName(element)">
               <a
                 :href="`#${element.slug}`"
-                data-turbolinks="false"
-                class="font-medium text-sm cursor-pointer"
+                data-turbo="false"
+                class="font-medium text-sm tracking-[0.28px] cursor-pointer"
                 :class="elementTextStyles(element)"
               >
                 {{ element.title }}

app/javascript/portal/portalHelpers.js

@@ -24,10 +24,9 @@ export const getHeadingsfromTheArticle = () => {
     permalink.className = 'permalink text-slate-600 ml-3';
     permalink.href = `#${slug}`;
     permalink.title = headingText;
-    permalink.dataset.turbolinks = 'false';
+    permalink.dataset.turbo = 'false';
     permalink.textContent = '#';
     element.appendChild(permalink);
-
     rows.push({
       slug,
       title: headingText,
@@ -188,7 +187,7 @@ export const InitializationHelpers = {
 
       const a = document.createElement('a');
       a.href = window.location.hash;
-      a['data-turbolinks'] = false;
+      a['data-turbo'] = false;
       a.click();
     }
   },