feat: Updated conversation list UI (#12971)

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsBulkActionBar.vue

@@ -1,11 +1,10 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { vOnClickOutside } from '@vueuse/components';
 
 import BulkSelectBar from 'dashboard/components-next/captain/assistant/BulkSelectBar.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
-import LabelActions from 'dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue';
+import BulkLabelActions from 'dashboard/components/widgets/conversation/conversationBulkActions/BulkLabelActions.vue';
 import Policy from 'dashboard/components/policy.vue';
 
 const props = defineProps({
@@ -34,7 +33,6 @@ const { t } = useI18n();
 
 const selectedCount = computed(() => props.selectedContactIds.length);
 const totalVisibleContacts = computed(() => props.visibleContactIds.length);
-const showLabelSelector = ref(false);
 
 const selectAllLabel = computed(() => {
   if (!totalVisibleContacts.value) {
@@ -73,28 +71,17 @@ const selectionModel = computed({
 });
 
 const emitClearSelection = () => {
-  showLabelSelector.value = false;
   emit('clearSelection');
 };
 
-const toggleLabelSelector = () => {
-  if (!selectedCount.value || props.isLoading) return;
-  showLabelSelector.value = !showLabelSelector.value;
-};
-
-const closeLabelSelector = () => {
-  showLabelSelector.value = false;
-};
-
 const handleAssignLabels = labels => {
   emit('assignLabels', labels);
-  closeLabelSelector();
 };
 </script>
 
 <template>
   <div
-    class="sticky top-0 z-10 bg-gradient-to-b from-n-background from-90% to-transparent px-6 pt-1 pb-2"
+    class="sticky top-0 z-10 bg-gradient-to-b from-n-surface-1 from-90% to-transparent px-6 pt-1 pb-2"
   >
     <BulkSelectBar
       v-model="selectionModel"
@@ -109,42 +96,18 @@ const handleAssignLabels = labels => {
           ghost
           slate
           :label="t('CONTACTS_BULK_ACTIONS.CLEAR_SELECTION')"
-          class="!px-1.5"
+          class="!px-1"
           @click="emitClearSelection"
         />
       </template>
       <template #actions>
         <div class="flex items-center gap-2 ml-auto">
-          <div
-            v-on-click-outside="closeLabelSelector"
-            class="relative flex items-center"
-          >
-            <Button
-              sm
-              faded
-              slate
-              icon="i-lucide-tags"
-              :label="t('CONTACTS_BULK_ACTIONS.ASSIGN_LABELS')"
-              :disabled="!selectedCount || isLoading"
-              :is-loading="isLoading"
-              class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
-              @click="toggleLabelSelector"
-            />
-            <transition
-              enter-active-class="transition ease-out duration-100"
-              enter-from-class="transform opacity-0 scale-95"
-              enter-to-class="transform opacity-100 scale-100"
-              leave-active-class="transition ease-in duration-75"
-              leave-from-class="transform opacity-100 scale-100"
-              leave-to-class="transform opacity-0 scale-95"
-            >
-              <LabelActions
-                v-if="showLabelSelector"
-                class="[&>.triangle]:!hidden [&>div>button]:!hidden ltr:!right-0 rtl:!left-0 top-8 mt-0.5"
-                @assign="handleAssignLabels"
-              />
-            </transition>
-          </div>
+          <BulkLabelActions
+            type="contact"
+            :is-loading="isLoading"
+            :disabled="!selectedCount"
+            @assign="handleAssignLabels"
+          />
           <Policy :permissions="['administrator']">
             <Button
               v-tooltip.bottom="t('CONTACTS_BULK_ACTIONS.DELETE_CONTACTS')"
@@ -156,7 +119,7 @@ const handleAssignLabels = labels => {
               :aria-label="t('CONTACTS_BULK_ACTIONS.DELETE_CONTACTS')"
               :disabled="!selectedCount || isLoading"
               :is-loading="isLoading"
-              class="!px-1.5 [&>span:nth-child(2)]:hidden"
+              class="!px-2 [&>span:nth-child(2)]:hidden"
               @click="emit('deleteSelected')"
             />
           </Policy>

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

@@ -23,15 +23,15 @@ export default {
 <template>
   <NextButton
     v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
-    :icon="
-      isOnExpandedLayout
-        ? 'i-lucide-arrow-left-to-line'
-        : 'i-lucide-arrow-right-to-line'
-    "
+    icon="i-woot-expand-list"
     slate
     xs
     faded
-    class="flex-shrink-0 rtl:rotate-180 ltr:rotate-0 md:inline-flex hidden"
+    class="flex-shrink-0 md:inline-flex hidden"
+    :class="{
+      'ltr:!rotate-180 rtl:!rotate-0': isOnExpandedLayout,
+      'ltr:!rotate-0 rtl:!rotate-180': !isOnExpandedLayout,
+    }"
     @click="toggle"
   />
 </template>