chore: Update chat list header UI (#10573)

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -6,6 +6,14 @@
   @apply border-b border-slate-50 dark:border-slate-800/50;
 }
 
+.tabs--container--compact.tab--chat-type {
+  .tabs-title {
+    a {
+      @apply py-2 text-sm;
+    }
+  }
+}
+
 .tabs {
   @apply border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4 list-none mb-0;
 }

app/javascript/dashboard/components/ChatList.vue

@@ -794,6 +794,7 @@ watch(conversationFilters, (newVal, oldVal) => {
       :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"
@@ -823,6 +824,7 @@ watch(conversationFilters, (newVal, oldVal) => {
       v-if="!hasAppliedFiltersOrActiveFolders"
       :items="assigneeTabItems"
       :active-tab="activeAssigneeTab"
+      is-compact
       @chat-tab-change="updateAssigneeTab"
     />
 

app/javascript/dashboard/components/ChatListHeader.vue

@@ -1,6 +1,13 @@
 <script setup>
 import { computed } from 'vue';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import wootConstants from 'dashboard/constants/globals';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+
 import ConversationBasicFilter from './widgets/conversation/ConversationBasicFilter.vue';
+import SwitchLayout from 'dashboard/routes/dashboard/conversation/search/SwitchLayout.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   pageTitle: {
@@ -19,6 +26,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  isOnExpandedLayout: {
+    type: Boolean,
+    required: true,
+  },
 });
 
 const emit = defineEmits([
@@ -29,6 +40,13 @@ const emit = defineEmits([
   'filtersModal',
 ]);
 
+const { uiSettings, updateUISettings } = useUISettings();
+
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
+
 const onBasicFilterChange = (value, type) => {
   emit('basicFilterChange', value, type);
 };
@@ -36,26 +54,48 @@ const onBasicFilterChange = (value, type) => {
 const hasAppliedFiltersOrActiveFolders = computed(() => {
   return props.hasAppliedFilters || props.hasActiveFolders;
 });
+
+const showV4View = computed(() => {
+  return isFeatureEnabledonAccount.value(
+    currentAccountId.value,
+    FEATURE_FLAGS.CHATWOOT_V4
+  );
+});
+
+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 pb-0"
     :class="{
-      'pb-3 border-b border-slate-75 dark:border-slate-700':
-        hasAppliedFiltersOrActiveFolders,
+      'pb-3 border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
+      'pt-2.5': showV4View,
     }"
   >
     <div class="flex max-w-[85%] justify-center items-center">
       <h1
-        class="text-xl font-medium break-words truncate text-black-900 dark:text-slate-100"
+        class="text-lg font-medium break-words truncate text-n-slate-12"
         :title="pageTitle"
       >
         {{ pageTitle }}
       </h1>
       <span
         v-if="!hasAppliedFiltersOrActiveFolders"
-        class="p-1 my-0.5 mx-1 rounded-md capitalize bg-slate-50 dark:bg-slate-800 text-xxs text-slate-600 dark:text-slate-300"
+        class="px-2 py-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 text-xxs text-n-slate-12"
       >
         {{ $t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`) }}
       </span>
@@ -63,67 +103,82 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
     <div class="flex items-center gap-1">
       <template v-if="hasAppliedFilters && !hasActiveFolders">
         <div class="relative">
-          <woot-button
+          <NextButton
             v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON')"
-            size="tiny"
-            variant="smooth"
-            color-scheme="secondary"
-            icon="save"
+            icon="i-lucide-save"
+            slate
+            xs
+            faded
             @click="emit('addFolders')"
           />
-          <div id="saveFilterTeleportTarget" class="absolute mt-2 z-40" />
+          <div
+            id="saveFilterTeleportTarget"
+            class="absolute z-40 mt-2"
+            :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
+          />
         </div>
-
-        <woot-button
+        <NextButton
           v-tooltip.top-end="$t('FILTER.CLEAR_BUTTON_LABEL')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="alert"
-          icon="dismiss-circle"
+          icon="i-lucide-circle-x"
+          ruby
+          faded
+          xs
           @click="emit('resetFilters')"
         />
       </template>
       <template v-if="hasActiveFolders">
         <div class="relative">
-          <woot-button
+          <NextButton
             id="toggleConversationFilterButton"
             v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.EDIT.EDIT_BUTTON')"
-            size="tiny"
-            variant="smooth"
-            color-scheme="secondary"
-            icon="edit"
+            icon="i-lucide-pen-line"
+            slate
+            xs
+            faded
             @click="emit('filtersModal')"
           />
           <div
             id="conversationFilterTeleportTarget"
-            class="absolute mt-2 z-40"
+            class="absolute z-40 mt-2"
+            :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
           />
         </div>
-        <woot-button
+        <NextButton
+          id="toggleConversationFilterButton"
           v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="alert"
-          icon="delete"
+          icon="i-lucide-trash-2"
+          ruby
+          xs
+          faded
           @click="emit('deleteFolders')"
         />
       </template>
       <div v-else class="relative">
-        <woot-button
+        <NextButton
           id="toggleConversationFilterButton"
           v-tooltip.right="$t('FILTER.TOOLTIP_LABEL')"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="filter"
-          size="tiny"
+          icon="i-lucide-list-filter"
+          slate
+          xs
+          faded
           @click="emit('filtersModal')"
         />
-        <div id="conversationFilterTeleportTarget" class="absolute mt-2 z-40" />
+        <div
+          id="conversationFilterTeleportTarget"
+          class="absolute z-40 mt-2"
+          :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
+        />
       </div>
       <ConversationBasicFilter
         v-if="!hasAppliedFiltersOrActiveFolders"
+        :is-on-expanded-layout="isOnExpandedLayout"
         @change-filter="onBasicFilterChange"
       />
+      <SwitchLayout
+        v-if="showV4View"
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @toggle="toggleConversationLayout"
+      />
     </div>
   </div>
 </template>

app/javascript/dashboard/components/ui/Tabs/Tabs.vue

@@ -11,6 +11,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  isCompact: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['change']);
@@ -59,7 +63,10 @@ onMounted(() => {
 
 <template>
   <div
-    :class="{ 'tabs--container--with-border': border }"
+    :class="{
+      'tabs--container--with-border': border,
+      'tabs--container--compact': isCompact,
+    }"
     class="tabs--container"
   >
     <button

app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue

@@ -3,6 +3,7 @@ import wootConstants from 'dashboard/constants/globals';
 import { mapGetters } from 'vuex';
 import FilterItem from './FilterItem.vue';
 import { useUISettings } from 'dashboard/composables/useUISettings';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const CHAT_STATUS_FILTER_ITEMS = Object.freeze([
   'open',
@@ -26,6 +27,13 @@ const SORT_ORDER_ITEMS = Object.freeze([
 export default {
   components: {
     FilterItem,
+    NextButton,
+  },
+  props: {
+    isOnExpandedLayout: {
+      type: Boolean,
+      required: true,
+    },
   },
   emits: ['changeFilter'],
   setup() {
@@ -85,22 +93,25 @@ export default {
 
 <template>
   <div class="relative flex">
-    <woot-button
+    <NextButton
       v-tooltip.right="$t('CHAT_LIST.SORT_TOOLTIP_LABEL')"
-      variant="smooth"
-      size="tiny"
-      color-scheme="secondary"
-      class="selector-button"
-      icon="sort-icon"
+      icon="i-lucide-arrow-up-down"
+      slate
+      faded
+      xs
       @click="toggleDropdown"
     />
     <div
       v-if="showActionsDropdown"
       v-on-clickaway="closeDropdown"
-      class="right-0 mt-1 dropdown-pane dropdown-pane--open basic-filter"
+      class="mt-1 dropdown-pane dropdown-pane--open !w-52 !p-4 top-6 border !border-n-weak dark:!border-n-weak !bg-n-alpha-3 dark:!bg-n-alpha-3 backdrop-blur-[100px]"
+      :class="{
+        'ltr:left-0 rtl:right-0': !isOnExpandedLayout,
+        'ltr:right-0 rtl:left-0': isOnExpandedLayout,
+      }"
     >
       <div class="flex items-center justify-between last:mt-4">
-        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
+        <span class="text-xs font-medium text-n-slate-12">{{
           $t('CHAT_LIST.CHAT_SORT.STATUS')
         }}</span>
         <FilterItem
@@ -112,7 +123,7 @@ export default {
         />
       </div>
       <div class="flex items-center justify-between last:mt-4">
-        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
+        <span class="text-xs font-medium text-n-slate-12">{{
           $t('CHAT_LIST.CHAT_SORT.ORDER_BY')
         }}</span>
         <FilterItem
@@ -126,9 +137,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.basic-filter {
-  @apply w-52 p-4 top-6;
-}
-</style>

app/javascript/dashboard/components/widgets/conversation/FilterItem.vue

@@ -40,7 +40,7 @@ export default {
 <template>
   <select
     v-model="activeValue"
-    class="bg-slate-25 dark:bg-slate-700 text-xs h-6 my-0 mx-1 py-0 pr-6 pl-2 w-32 border border-solid border-slate-75 dark:border-slate-600 text-slate-800 dark:text-slate-100"
+    class="w-32 h-6 py-0 pl-2 pr-6 mx-1 my-0 text-xs border border-solid bg-n-slate-3 dark:bg-n-solid-3 border-n-weak dark:border-n-weak text-n-slate-12"
     @change="onTabChange()"
   >
     <option v-for="value in items" :key="value" :value="value">

app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue

@@ -1,6 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useAccount } from 'dashboard/composables/useAccount';
 import ChatList from '../../../components/ChatList.vue';
 import ConversationBox from '../../../components/widgets/conversation/ConversationBox.vue';
 import PopOverSearch from './search/PopOverSearch.vue';
@@ -8,6 +9,7 @@ import wootConstants from 'dashboard/constants/globals';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import CmdBarConversationSnooze from 'dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue';
 import { emitter } from 'shared/helpers/mitt';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 export default {
   components: {
@@ -52,10 +54,12 @@ export default {
   },
   setup() {
     const { uiSettings, updateUISettings } = useUISettings();
+    const { accountId } = useAccount();
 
     return {
       uiSettings,
       updateUISettings,
+      accountId,
     };
   },
   data() {
@@ -67,6 +71,7 @@ export default {
     ...mapGetters({
       chatList: 'getAllConversations',
       currentChat: 'getSelectedChat',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
     showConversationList() {
       return this.isOnExpandedLayout ? !this.conversationId : true;
@@ -90,6 +95,12 @@ export default {
       }
       return false;
     },
+    showPopOverSearch() {
+      return !this.isFeatureEnabledonAccount(
+        this.accountId,
+        FEATURE_FLAGS.CHATWOOT_V4
+      );
+    },
   },
   watch: {
     conversationId() {
@@ -205,6 +216,7 @@ export default {
       @conversation-load="onConversationLoad"
     >
       <PopOverSearch
+        v-if="showPopOverSearch"
         :is-on-expanded-layout="isOnExpandedLayout"
         @toggle-conversation-layout="toggleConversationLayout"
       />

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

@@ -34,25 +34,25 @@ export default {
 <template>
   <div class="relative">
     <div
-      class="flex px-4 pb-1 flex-row gap-1 pt-2.5 border-b border-transparent"
+      class="flex px-4 pb-1 justify-between items-center 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"
+        class="relative top-0 ltr:-ml-1.5 rtl:-mr-1.5 flex-shrink-0 focus:!bg-n-solid-3 dark:!hover:bg-n-solid-2 hover:!bg-n-alpha-2"
       />
       <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"
+        class="inline-flex items-center flex-1 h-6 min-w-0 gap-1 px-2 py-0 text-left rounded-md rtl:mr-2.5 search-link rtl:text-right bg-n-slate-9/10 hover:bg-n-slate-3"
       >
-        <div class="flex">
+        <div class="flex flex-shrink-0">
           <fluent-icon
             icon="search"
-            class="search--icon text-slate-800 dark:text-slate-200"
+            class="search--icon text-n-slate-11"
             size="16"
           />
         </div>
         <p
-          class="mb-0 overflow-hidden text-sm search--label whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-200"
+          class="mb-0 overflow-hidden text-sm search--label whitespace-nowrap text-ellipsis text-n-slate-11"
         >
           {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
         </p>

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

@@ -1,5 +1,10 @@
 <script>
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     isOnExpandedLayout: {
       type: Boolean,
@@ -16,22 +21,17 @@ export default {
 </script>
 
 <template>
-  <woot-button
+  <NextButton
     v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
-    icon="arrow-right-import"
-    size="tiny"
-    variant="smooth"
-    color-scheme="secondary"
-    class="layout-switch__container"
-    :class="{ expanded: isOnExpandedLayout }"
+    :icon="
+      isOnExpandedLayout
+        ? 'i-lucide-arrow-left-to-line'
+        : 'i-lucide-arrow-right-to-line'
+    "
+    slate
+    xs
+    faded
+    class="flex-shrink-0 rtl:rotate-180 ltr:rotate-0"
     @click="toggle"
   />
 </template>
-
-<style lang="scss" soped>
-.layout-switch__container {
-  &.expanded .icon {
-    transform: rotate(180deg);
-  }
-}
-</style>