chore: Adds URL-based search and tab selection (#12663)

# Pull Request Template

## Description

This PR enables URL-based search and tab selection, allowing search
queries and active tabs to persist in the URL for easy sharing.

Fixes
[CW-5766](https://linear.app/chatwoot/issue/CW-5766/cannot-impersonate-an-account),
https://github.com/chatwoot/chatwoot/issues/12623

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### Loom video

https://www.loom.com/share/422a1d61f3fe4278a88e352ef98d2b78?sid=35fabee7-652f-4e17-83bd-e066a3bb804c

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

app/javascript/dashboard/modules/search/components/SearchHeader.vue

@@ -1,10 +1,17 @@
 <script setup>
-import { ref, useTemplateRef, onMounted, onUnmounted } from 'vue';
+import { ref, useTemplateRef, onMounted, onUnmounted, watch } from 'vue';
 import { debounce } from '@chatwoot/utils';
 
+const props = defineProps({
+  initialQuery: {
+    type: String,
+    default: '',
+  },
+});
+
 const emit = defineEmits(['search']);
 
-const searchQuery = ref('');
+const searchQuery = ref(props.initialQuery);
 const isInputFocused = ref(false);
 
 const searchInput = useTemplateRef('searchInput');
@@ -38,6 +45,16 @@ const onBlur = () => {
   isInputFocused.value = false;
 };
 
+watch(
+  () => props.initialQuery,
+  newValue => {
+    if (searchQuery.value !== newValue) {
+      searchQuery.value = newValue;
+    }
+  },
+  { immediate: true }
+);
+
 onMounted(() => {
   searchInput.value.focus();
   document.addEventListener('keydown', handler);

app/javascript/dashboard/modules/search/components/SearchView.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useMapGetter, useStore } from 'dashboard/composables/store.js';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { useTrack } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 import {
@@ -24,12 +24,13 @@ import SearchResultContactsList from './SearchResultContactsList.vue';
 import SearchResultArticlesList from './SearchResultArticlesList.vue';
 
 const router = useRouter();
+const route = useRoute();
 const store = useStore();
 const { t } = useI18n();
 
 const PER_PAGE = 15; // Results per page
-const selectedTab = ref('all');
+const selectedTab = ref(route.params.tab || 'all');
-const query = ref('');
+const query = ref(route.query.q || '');
 const pages = ref({
   contacts: 1,
   conversations: 1,
@@ -231,9 +232,31 @@ const clearSearchResult = () => {
   store.dispatch('conversationSearch/clearSearchResults');
 };
 
+const updateURL = () => {
+  // Update route with tab as URL parameter and query as query parameter
+  const params = { accountId: route.params.accountId };
+  const queryParams = {};
+
+  // Only add tab param if not 'all'
+  if (selectedTab.value !== 'all') {
+    params.tab = selectedTab.value;
+  }
+
+  if (query.value?.trim()) {
+    queryParams.q = query.value.trim();
+  }
+
+  router.replace({
+    name: 'search',
+    params,
+    query: queryParams,
+  });
+};
+
 const onSearch = q => {
   query.value = q;
   clearSearchResult();
+  updateURL();
   if (!q) return;
   useTrack(CONVERSATION_EVENTS.SEARCH_CONVERSATION);
   store.dispatch('conversationSearch/fullSearch', { q, page: 1 });
@@ -265,8 +288,18 @@ const loadMore = () => {
   });
 };
 
+const onTabChange = tab => {
+  selectedTab.value = tab;
+  updateURL();
+};
+
 onMounted(() => {
   store.dispatch('conversationSearch/clearSearchResults');
+
+  // Auto-execute search if query parameter exists
+  if (route.query.q) {
+    onSearch(route.query.q);
+  }
 });
 
 onUnmounted(() => {
@@ -290,12 +323,12 @@ onUnmounted(() => {
     <section class="flex flex-col flex-grow w-full h-full overflow-hidden">
       <div class="w-full max-w-4xl mx-auto">
         <div class="flex flex-col w-full px-4">
-          <SearchHeader @search="onSearch" />
+          <SearchHeader :initial-query="query" @search="onSearch" />
           <SearchTabs
             v-if="query"
             :tabs="tabs"
             :selected-tab="activeTabIndex"
-            @tab-change="tab => (selectedTab = tab)"
+            @tab-change="onTabChange"
           />
         </div>
       </div>

app/javascript/dashboard/modules/search/search.routes.js

@@ -10,7 +10,7 @@ import SearchView from './components/SearchView.vue';
 
 export const routes = [
   {
-    path: frontendURL('accounts/:accountId/search'),
+    path: frontendURL('accounts/:accountId/search/:tab?'),
     name: 'search',
     meta: {
       permissions: [