chore: conversation list header

app/javascript/dashboard/components/ChatList.vue

@@ -788,12 +788,12 @@ watch(conversationFilters, (newVal, oldVal) => {
       isOnExpandedLayout ? 'basis-full' : 'flex-basis-clamp',
     ]"
   >
-    <slot />
     <ChatListHeader
       :page-title="pageTitle"
       :has-applied-filters="hasAppliedFilters"
       :has-active-folders="hasActiveFolders"
       :active-status="activeStatus"
+      :is-on-expanded-layout="isOnExpandedLayout"
       @add-folders="onClickOpenAddFoldersModal"
       @delete-folders="onClickOpenDeleteFoldersModal"
       @filters-modal="onToggleAdvanceFiltersModal"

app/javascript/dashboard/components/ChatListHeader.vue

@@ -1,6 +1,10 @@
 <script setup>
 import { computed } from 'vue';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import wootConstants from 'dashboard/constants/globals';
+
 import ConversationBasicFilter from './widgets/conversation/ConversationBasicFilter.vue';
+import SwitchLayout from 'dashboard/routes/dashboard/conversation/search/SwitchLayout.vue';
 
 const props = defineProps({
   pageTitle: {
@@ -19,6 +23,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  isOnExpandedLayout: {
+    type: Boolean,
+    required: true,
+  },
 });
 
 const emit = defineEmits([
@@ -29,6 +37,8 @@ const emit = defineEmits([
   'filtersModal',
 ]);
 
+const { uiSettings, updateUISettings } = useUISettings();
+
 const onBasicFilterChange = (value, type) => {
   emit('basicFilterChange', value, type);
 };
@@ -36,11 +46,26 @@ const onBasicFilterChange = (value, type) => {
 const hasAppliedFiltersOrActiveFolders = computed(() => {
   return props.hasAppliedFilters || props.hasActiveFolders;
 });
+
+const toggleConversationLayout = () => {
+  const { LAYOUT_TYPES } = wootConstants;
+  const {
+    conversation_display_type: conversationDisplayType = LAYOUT_TYPES.CONDENSED,
+  } = uiSettings.value;
+  const newViewType =
+    conversationDisplayType === LAYOUT_TYPES.CONDENSED
+      ? LAYOUT_TYPES.EXPANDED
+      : LAYOUT_TYPES.CONDENSED;
+  updateUISettings({
+    conversation_display_type: newViewType,
+    previously_used_conversation_display_type: newViewType,
+  });
+};
 </script>
 
 <template>
   <div
-    class="flex items-center justify-between px-4 py-0"
+    class="flex items-center justify-between px-4 pt-3 pb-0"
     :class="{
       'pb-3 border-b border-slate-75 dark:border-slate-700':
         hasAppliedFiltersOrActiveFolders,
@@ -71,7 +96,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
             icon="save"
             @click="emit('addFolders')"
           />
-          <div id="saveFilterTeleportTarget" class="absolute mt-2 z-40" />
+          <div id="saveFilterTeleportTarget" class="absolute z-40 mt-2" />
         </div>
 
         <woot-button
@@ -96,7 +121,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           />
           <div
             id="conversationFilterTeleportTarget"
-            class="absolute mt-2 z-40"
+            class="absolute z-40 mt-2"
           />
         </div>
         <woot-button
@@ -118,12 +143,16 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           size="tiny"
           @click="emit('filtersModal')"
         />
-        <div id="conversationFilterTeleportTarget" class="absolute mt-2 z-40" />
+        <div id="conversationFilterTeleportTarget" class="absolute z-40 mt-2" />
       </div>
       <ConversationBasicFilter
         v-if="!hasAppliedFiltersOrActiveFolders"
         @change-filter="onBasicFilterChange"
       />
+      <SwitchLayout
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @toggle="toggleConversationLayout"
+      />
     </div>
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue

@@ -1,77 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import SwitchLayout from './SwitchLayout.vue';
-import { frontendURL } from 'dashboard/helper/URLHelper';
-export default {
-  components: {
-    SwitchLayout,
-  },
-  directives: {
-    focus: {
-      inserted(el) {
-        el.focus();
-      },
-    },
-  },
-  props: {
-    isOnExpandedLayout: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  emits: ['toggleConversationLayout'],
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-    }),
-    searchUrl() {
-      return frontendURL(`accounts/${this.accountId}/search`);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="relative">
-    <div
-      class="flex px-4 pb-1 flex-row gap-1 pt-2.5 border-b border-transparent"
-    >
-      <woot-sidemenu-icon
-        size="tiny"
-        class="relative top-0 ltr:-ml-1.5 rtl:-mr-1.5"
-      />
-      <router-link
-        :to="searchUrl"
-        class="inline-flex items-center flex-1 h-6 gap-1 px-2 py-0 text-left rounded-md search-link rtl:mr-3 rtl:text-right bg-slate-25 dark:bg-slate-800"
-      >
-        <div class="flex">
-          <fluent-icon
-            icon="search"
-            class="search--icon text-slate-800 dark:text-slate-200"
-            size="16"
-          />
-        </div>
-        <p
-          class="mb-0 overflow-hidden text-sm search--label whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-200"
-        >
-          {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
-        </p>
-      </router-link>
-      <SwitchLayout
-        :is-on-expanded-layout="isOnExpandedLayout"
-        @toggle="$emit('toggleConversationLayout')"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.search-link {
-  &:hover {
-    .search--icon,
-    .search--label {
-      @apply hover:text-woot-500 dark:hover:text-woot-500;
-    }
-  }
-}
-</style>