chore: Minor fix

app/javascript/dashboard/components-next/Contacts/ContactsLayout.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, useSlots } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
@@ -72,6 +73,7 @@ const emit = defineEmits([
 
 const { t } = useI18n();
 const slots = useSlots();
+const route = useRoute();
 
 const selectedContactName = computed(() => {
   return props.selectedContact?.name;
@@ -96,6 +98,10 @@ const hasSidebar = computed(() => {
   return slots.sidebar && props.isDetailView;
 });
 
+const isNotSegmentView = computed(() => {
+  return route.name !== 'contacts_dashboard_segments_index';
+});
+
 const handleBreadcrumbClick = () => {
   emit('goToContactsList');
 };
@@ -132,11 +138,12 @@ const updateCurrentPage = page => {
             />
             <div class="flex items-center gap-4">
               <div
-                v-if="!isDetailView && !isEmptyState"
+                v-if="!isDetailView && !isEmptyState && isNotSegmentView"
                 class="flex items-center gap-2"
               >
                 <Input
                   :model-value="searchValue"
+                  type="search"
                   :placeholder="$t('CONTACTS_LAYOUT.HEADER.SEARCH_PLACEHOLDER')"
                   :custom-input-class="[
                     'h-8 [&:not(.focus)]:!border-transparent bg-n-alpha-2 dark:bg-n-solid-1 ltr:!pl-8 !py-1 rtl:!pr-8',

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -245,7 +245,14 @@ const menuItems = computed(() => {
             {
               name: 'All Contacts',
               label: t('SIDEBAR.ALL_CONTACTS'),
-              to: accountScopedRoute('contacts_dashboard_index'),
+              to: accountScopedRoute(
+                'contacts_dashboard_index',
+                {},
+                {
+                  page: 1,
+                  search: undefined,
+                }
+              ),
               activeOn: [
                 'contacts_dashboard_index',
                 'contacts_dashboard_edit_index',
@@ -258,9 +265,15 @@ const menuItems = computed(() => {
               children: contactCustomViews.value.map(view => ({
                 name: `${view.name}-${view.id}`,
                 label: view.name,
-                to: accountScopedRoute('contacts_dashboard_segments_index', {
-                  segmentId: view.id,
-                }),
+                to: accountScopedRoute(
+                  'contacts_dashboard_segments_index',
+                  {
+                    segmentId: view.id,
+                  },
+                  {
+                    page: 1,
+                  }
+                ),
                 activeOn: [
                   'contacts_dashboard_segments_index',
                   'contacts_dashboard_segments_edit_index',
@@ -278,9 +291,16 @@ const menuItems = computed(() => {
                   class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`,
                   style: { backgroundColor: label.color },
                 }),
-                to: accountScopedRoute('contacts_dashboard_labels_index', {
-                  label: label.title,
-                }),
+                to: accountScopedRoute(
+                  'contacts_dashboard_labels_index',
+                  {
+                    label: label.title,
+                  },
+                  {
+                    page: 1,
+                    search: undefined,
+                  }
+                ),
                 activeOn: [
                   'contacts_dashboard_labels_index',
                   'contacts_dashboard_labels_edit_index',

app/javascript/dashboard/composables/spec/useAccount.spec.js

@@ -91,10 +91,11 @@ describe('useAccount', () => {
   it('returns an account-scoped route', () => {
     const wrapper = mount(createComponent(), mountParams);
     const { accountScopedRoute } = wrapper.vm;
-    const result = accountScopedRoute('accountDetail', { userId: 456 });
+    const result = accountScopedRoute('accountDetail', { userId: 456 }, {});
     expect(result).toEqual({
       name: 'accountDetail',
       params: { accountId: 123, userId: 456 },
+      query: {},
     });
   });
 

app/javascript/dashboard/composables/useAccount.js

@@ -28,10 +28,11 @@ export function useAccount() {
     return `/app/accounts/${accountId.value}/${url}`;
   };
 
-  const accountScopedRoute = (name, params) => {
+  const accountScopedRoute = (name, params, query) => {
     return {
       name,
       params: { accountId: accountId.value, ...params },
+      query: { ...query },
     };
   };
 

app/javascript/dashboard/i18n/locale/en/contact.json

@@ -390,6 +390,7 @@
   "CONTACTS_LAYOUT": {
     "HEADER": {
       "TITLE": "Contacts",
+      "SEARCH_TITLE": "Search contacts",
       "SEARCH_PLACEHOLDER": "Search...",
       "MESSAGE_BUTTON": "Message",
       "BREADCRUMB": {

app/javascript/dashboard/routes/dashboard/contact/pages/ContactsPageRouteView.vue

@@ -29,6 +29,7 @@ const meta = useMapGetter('contacts/getMeta');
 
 const searchQuery = computed(() => route.query?.search);
 const searchValue = ref(searchQuery.value || '');
+const pageNumber = computed(() => Number(route.query?.page) || 1);
 
 const parseSortSettings = (sortString = '') => {
   const hasDescending = sortString.startsWith('-');
@@ -63,10 +64,13 @@ const activeSegment = computed(() =>
 
 const hasContacts = computed(() => contacts.value.length > 0);
 const isContactIndexView = computed(
-  () => route.name === 'contacts_dashboard_index'
+  () => route.name === 'contacts_dashboard_index' && pageNumber.value === 1
 );
 
 const headerTitle = computed(() => {
+  if (searchQuery.value) {
+    return t('CONTACTS_LAYOUT.HEADER.SEARCH_TITLE');
+  }
   if (activeSegmentId.value) {
     return activeSegment.value?.name;
   }
@@ -76,9 +80,7 @@ const headerTitle = computed(() => {
   return t('CONTACTS_LAYOUT.HEADER.TITLE');
 });
 
-const pageNumber = computed(() => Number(route.query?.page) || 1);
-
-const updatePageParam = (page, search = '') => {
+const updatePageParam = (page, search = searchValue.value) => {
   const query = {
     ...route.query,
     page: page.toString(),
@@ -121,17 +123,15 @@ const searchContacts = debounce(async (value, page = 1) => {
 
   if (!value) {
     updatePageParam(page);
-    await (activeSegmentId.value
-      ? fetchSavedFilteredContact(activeSegment.value?.query)
-      : fetchContacts());
+    await fetchContacts(page);
     return;
   }
 
+  updatePageParam(page, value);
   await store.dispatch('contacts/search', {
     ...getCommonFetchParams(page),
     search: encodeURIComponent(value),
   });
-  updatePageParam(page, value);
 }, DEBOUNCE_DELAY);
 
 const handleSort = async ({ sort, order }) => {
@@ -163,19 +163,6 @@ watch(
   { immediate: true }
 );
 
-const handlePageChange = async page => {
-  if (searchQuery.value) {
-    await searchContacts(searchValue.value, page);
-    return;
-  }
-  if (activeSegmentId.value) {
-    await fetchSavedFilteredContact(activeSegment.value.query, page);
-  } else {
-    await fetchContacts(page);
-  }
-  updatePageParam(page);
-};
-
 watch(activeLabel, () => {
   if (searchQuery.value) return;
 
@@ -196,12 +183,35 @@ watch(activeSegment, () => {
   }
 });
 
-onMounted(async () => {
+watch(pageNumber, async page => {
+  if (isFetchingList.value) return;
+
   if (searchQuery.value) {
-    await searchContacts(searchQuery.value, pageNumber.value);
+    await searchContacts(searchQuery.value, page);
     return;
   }
+  if (activeSegmentId.value) {
+    await fetchSavedFilteredContact(activeSegment.value.query, page);
+  } else {
+    await fetchContacts(page);
+  }
+});
+
+watch(searchQuery, value => {
+  if (isFetchingList.value) return;
+  searchValue.value = value || '';
+  // Reset the view if there is search query when we click on the sidebar group
+  if (value === undefined) {
+    fetchContacts();
+  }
+});
+
+onMounted(async () => {
   if (!activeSegmentId.value) {
+    if (searchQuery.value) {
+      await searchContacts(searchQuery.value, pageNumber.value);
+      return;
+    }
     await fetchContacts(pageNumber.value);
   } else if (activeSegment.value && activeSegmentId.value) {
     await fetchSavedFilteredContact(
@@ -226,7 +236,7 @@ onMounted(async () => {
       :active-sort="sortState.activeSort"
       :active-ordering="sortState.activeOrdering"
       :is-empty-state="!searchQuery && !hasContacts && isContactIndexView"
-      @update:current-page="handlePageChange"
+      @update:current-page="page => updatePageParam(page, searchValue)"
       @search="searchContacts"
       @sort="handleSort"
     >