Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/dashboard/components/ChatListHeader.vue

@@ -0,0 +1,168 @@
+<script setup>
+import { computed } from 'vue';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { formatNumber } from '@chatwoot/utils';
+import wootConstants from 'dashboard/constants/globals';
+
+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: { type: String, required: true },
+  hasAppliedFilters: { type: Boolean, required: true },
+  hasActiveFolders: { type: Boolean, required: true },
+  activeStatus: { type: String, required: true },
+  isOnExpandedLayout: { type: Boolean, required: true },
+  conversationStats: { type: Object, required: true },
+  isListLoading: { type: Boolean, required: true },
+});
+
+const emit = defineEmits([
+  'addFolders',
+  'deleteFolders',
+  'resetFilters',
+  'basicFilterChange',
+  'filtersModal',
+]);
+
+const { uiSettings, updateUISettings } = useUISettings();
+
+const onBasicFilterChange = (value, type) => {
+  emit('basicFilterChange', value, type);
+};
+
+const hasAppliedFiltersOrActiveFolders = computed(() => {
+  return props.hasAppliedFilters || props.hasActiveFolders;
+});
+
+const allCount = computed(() => props.conversationStats?.allCount || 0);
+const formattedAllCount = computed(() => formatNumber(allCount.value));
+
+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 gap-2 px-3 h-[3.25rem]"
+    :class="{
+      'border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
+    }"
+  >
+    <div class="flex items-center justify-center min-w-0">
+      <h1
+        class="text-base font-medium truncate text-n-slate-12"
+        :title="pageTitle"
+      >
+        {{ pageTitle }}
+      </h1>
+      <span
+        v-if="
+          allCount > 0 && hasAppliedFiltersOrActiveFolders && !isListLoading
+        "
+        class="px-2 py-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 text-xxs text-n-slate-12 shrink-0"
+        :title="allCount"
+      >
+        {{ formattedAllCount }}
+      </span>
+      <span
+        v-if="!hasAppliedFiltersOrActiveFolders"
+        class="px-2 py-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 text-xxs text-n-slate-12 shrink-0"
+      >
+        {{ $t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`) }}
+      </span>
+    </div>
+    <div class="flex items-center gap-1">
+      <template v-if="hasAppliedFilters && !hasActiveFolders">
+        <div class="relative">
+          <NextButton
+            v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON')"
+            icon="i-lucide-save"
+            slate
+            xs
+            faded
+            @click="emit('addFolders')"
+          />
+          <div
+            id="saveFilterTeleportTarget"
+            class="absolute z-50 mt-2"
+            :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
+          />
+        </div>
+        <NextButton
+          v-tooltip.top-end="$t('FILTER.CLEAR_BUTTON_LABEL')"
+          icon="i-lucide-circle-x"
+          ruby
+          faded
+          xs
+          @click="emit('resetFilters')"
+        />
+      </template>
+      <template v-if="hasActiveFolders">
+        <div class="relative">
+          <NextButton
+            id="toggleConversationFilterButton"
+            v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.EDIT.EDIT_BUTTON')"
+            icon="i-lucide-pen-line"
+            slate
+            xs
+            faded
+            @click="emit('filtersModal')"
+          />
+          <div
+            id="conversationFilterTeleportTarget"
+            class="absolute z-50 mt-2"
+            :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
+          />
+        </div>
+        <NextButton
+          id="toggleConversationFilterButton"
+          v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
+          icon="i-lucide-trash-2"
+          ruby
+          xs
+          faded
+          @click="emit('deleteFolders')"
+        />
+      </template>
+      <div v-else class="relative">
+        <NextButton
+          id="toggleConversationFilterButton"
+          v-tooltip.right="$t('FILTER.TOOLTIP_LABEL')"
+          icon="i-lucide-list-filter"
+          slate
+          xs
+          faded
+          @click="emit('filtersModal')"
+        />
+        <div
+          id="conversationFilterTeleportTarget"
+          class="absolute z-50 mt-2"
+          :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
+        />
+      </div>
+      <ConversationBasicFilter
+        v-if="!hasAppliedFiltersOrActiveFolders"
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @change-filter="onBasicFilterChange"
+      />
+      <SwitchLayout
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @toggle="toggleConversationLayout"
+      />
+    </div>
+  </div>
+</template>