chore: Update contacts page

app/javascript/dashboard/components/ChatList.vue

@@ -466,7 +466,7 @@ watch(conversationFilters, (newVal, oldVal) => {
 
 <template>
   <div
-    class="flex flex-col flex-shrink-0 conversations-list-wrap bg-n-surface-1"
+    class="flex flex-col flex-shrink-0 conversations-list-wrap bg-n-surface-1 relative"
     :class="[
       { hidden: !showConversationList },
       isOnExpandedLayout ? 'basis-full' : 'w-[340px] 2xl:w-[412px]',
@@ -519,13 +519,13 @@ watch(conversationFilters, (newVal, oldVal) => {
       @delete-folder="chatListFiltersRef?.onClickOpenDeleteFoldersModal"
     />
     <ConversationBulkActions
-      v-if="selectedConversations.length"
       :conversations="selectedConversations"
       :all-conversations-selected="allConversationsSelected"
       :selected-inboxes="uniqueInboxes"
       :show-open-action="allSelectedConversationsStatus('open')"
       :show-resolved-action="allSelectedConversationsStatus('resolved')"
       :show-snoozed-action="allSelectedConversationsStatus('snoozed')"
+      :class="isOnExpandedLayout && 'sm:!w-[24rem] !w-full'"
       @select-all-conversations="toggleSelectAll"
     />
 

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkAgentActions.vue

@@ -113,10 +113,10 @@ const handleToggleDropdown = () => {
       @click="handleToggleDropdown"
     />
     <Transition
-      enter-active-class="transition-all duration-150 ease-out origin-top"
+      enter-active-class="transition-all duration-150 ease-out origin-bottom"
       enter-from-class="opacity-0 scale-95"
       enter-to-class="opacity-100 scale-100"
-      leave-active-class="transition-all duration-100 ease-in origin-top"
+      leave-active-class="transition-all duration-100 ease-in origin-bottom"
       leave-from-class="opacity-100 scale-100"
       leave-to-class="opacity-0 scale-95"
     >
@@ -130,7 +130,7 @@ const handleToggleDropdown = () => {
         :is-loading="isLoading"
         show-search
         :search-placeholder="t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
-        class="ltr:-right-10 rtl:-left-10 ltr:2xl:right-0 rtl:2xl:left-0 top-8 w-60 max-h-80 overflow-y-auto"
+        class="ltr:-right-10 rtl:-left-10 ltr:2xl:right-0 rtl:2xl:left-0 bottom-8 w-60 max-h-80 overflow-y-auto"
         @action="handleSelectAgent"
       >
         <template #footer>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkLabelActions.vue

@@ -85,7 +85,7 @@ const handleAssign = () => {
       ghost
       :class="{
         'bg-n-alpha-2': showDropdown,
-        '[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit':
+        '[&>span:nth-child(2)]:hidden md:[&>span:nth-child(2)]:inline w-fit':
           isTypeContact,
       }"
       :disabled="disabled"
@@ -93,10 +93,10 @@ const handleAssign = () => {
       @click="toggleDropdown()"
     />
     <Transition
-      enter-active-class="transition-all duration-150 ease-out origin-top"
+      enter-active-class="transition-all duration-150 ease-out origin-bottom"
       enter-from-class="opacity-0 scale-95"
       enter-to-class="opacity-100 scale-100"
-      leave-active-class="transition-all duration-100 ease-in origin-top"
+      leave-active-class="transition-all duration-100 ease-in origin-bottom"
       leave-from-class="opacity-100 scale-100"
       leave-to-class="opacity-0 scale-95"
     >
@@ -109,11 +109,11 @@ const handleAssign = () => {
         :menu-items="labelMenuItems"
         show-search
         :search-placeholder="t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
-        class="top-8 w-60 max-h-80 overflow-y-auto"
+        class="bottom-8 w-60 max-h-80 overflow-y-auto"
         :class="{
           'ltr:-right-[6.5rem] rtl:-left-[6.5rem] ltr:2xl:right-0 rtl:2xl:left-0':
             !isTypeContact,
-          'ltr:right-0 rtl:left-0 mt-1': isTypeContact,
+          'ltr:right-0 rtl:left-0 mb-1': isTypeContact,
         }"
         @action="item => toggleLabelSelection(item.value)"
       >
@@ -138,7 +138,7 @@ const handleAssign = () => {
           >
             <NextButton
               sm
-              class="w-full"
+              class="w-full [&>span:nth-child(2)]:hidden md:[&>span:nth-child(2)]:inline-flex"
               :label="t('BULK_ACTION.LABELS.ASSIGN_SELECTED_LABELS')"
               :disabled="!selectedLabels.length"
               @click="handleAssign"

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkTeamActions.vue

@@ -83,10 +83,10 @@ onMounted(() => {
       @click="toggleDropdown()"
     />
     <Transition
-      enter-active-class="transition-all duration-150 ease-out origin-top"
+      enter-active-class="transition-all duration-150 ease-out origin-bottom"
       enter-from-class="opacity-0 scale-95"
       enter-to-class="opacity-100 scale-100"
-      leave-active-class="transition-all duration-100 ease-in origin-top"
+      leave-active-class="transition-all duration-100 ease-in origin-bottom"
       leave-from-class="opacity-100 scale-100"
       leave-to-class="opacity-0 scale-95"
     >
@@ -99,7 +99,7 @@ onMounted(() => {
         :menu-items="teamMenuItems"
         show-search
         :search-placeholder="t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
-        class="ltr:-right-2 rtl:-left-2 top-8 w-60 max-h-80 overflow-y-auto"
+        class="ltr:-right-2 rtl:-left-2 bottom-8 w-60 max-h-80 overflow-y-auto"
         @action="handleSelectTeam"
       >
         <template #footer>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkUpdateActions.vue

@@ -87,10 +87,10 @@ const handleUpdate = item => {
       @click="toggleDropdown()"
     />
     <Transition
-      enter-active-class="transition-all duration-150 ease-out origin-top"
+      enter-active-class="transition-all duration-150 ease-out origin-bottom"
       enter-from-class="opacity-0 scale-95"
       enter-to-class="opacity-100 scale-100"
-      leave-active-class="transition-all duration-100 ease-in origin-top"
+      leave-active-class="transition-all duration-100 ease-in origin-bottom"
       leave-from-class="opacity-100 scale-100"
       leave-to-class="opacity-0 scale-95"
     >
@@ -101,7 +101,7 @@ const handleUpdate = item => {
           { ignore: [containerRef] },
         ]"
         :menu-items="updateMenuItems"
-        class="ltr:-right-[4.5rem] rtl:-left-[4.5rem] ltr:2xl:right-0 rtl:2xl:left-0 top-8 w-36"
+        class="ltr:-right-[4.5rem] rtl:-left-[4.5rem] ltr:2xl:right-0 rtl:2xl:left-0 bottom-8 w-36"
         @action="handleUpdate"
       />
     </Transition>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue

@@ -106,68 +106,78 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div
-    class="pt-3 pb-2 px-2 relative z-10 after:absolute after:inset-x-0 after:-bottom-2.5 after:bg-gradient-to-b after:from-n-surface-1 after:from-40% after:to-transparent after:h-4 after:pointer-events-none after:z-10"
+  <Transition
+    enter-active-class="transition-all duration-200 ease-out origin-bottom"
+    enter-from-class="opacity-0 scale-95 translate-y-2"
+    enter-to-class="opacity-100 scale-100 translate-y-0"
+    leave-active-class="transition-all duration-150 ease-in origin-bottom"
+    leave-from-class="opacity-100 scale-100 translate-y-0"
+    leave-to-class="opacity-0 scale-95 translate-y-2"
   >
     <div
-      class="flex items-center justify-between p-2 bg-n-button-color outline outline-1 -outline-offset-1 rounded-[10px] outline-n-weak"
+      v-show="conversations.length > 0"
+      class="px-2 absolute bottom-4 left-1/2 -translate-x-1/2 z-30 w-full origin-bottom"
     >
-      <div class="ltr:ml-0.5 rtl:mr-0.5 flex items-center gap-1">
-        <label class="cursor-pointer flex items-center gap-1.5">
-          <Checkbox
-            v-model="allSelected"
-            :indeterminate="!allConversationsSelected"
+      <div
+        v-if="allConversationsSelected"
+        class="bg-n-amber-2 outline -outline-offset-1 outline-1 outline-n-amber-5 rounded-lg text-sm mb-2 py-1.5 px-2 text-n-amber-text"
+      >
+        {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
+      </div>
+      <div
+        class="flex items-center justify-between p-2 bg-n-button-color outline outline-1 -outline-offset-1 rounded-[10px] outline-n-weak shadow-[0_0_12px_0_rgba(27,40,59,0.08)]"
+      >
+        <div class="ltr:ml-0.5 rtl:mr-0.5 flex items-center gap-1">
+          <label class="cursor-pointer flex items-center gap-1.5">
+            <Checkbox
+              v-model="allSelected"
+              :indeterminate="!allConversationsSelected"
+            />
+            <span class="cursor-pointer">
+              {{
+                $t('BULK_ACTION.CONVERSATIONS_SELECTED', {
+                  conversationCount: conversations.length,
+                })
+              }}
+            </span>
+          </label>
+          <div class="w-px h-3 bg-n-weak rounded-lg ltr:ml-1 rtl:mr-1" />
+          <NextButton
+            :label="$t('BULK_ACTION.CLEAR_SELECTION')"
+            ghost
+            class="!text-n-blue-11 !px-1 !h-6"
+            sm
+            @click="allSelected = false"
           />
-          <span class="cursor-pointer">
-            {{
-              $t('BULK_ACTION.CONVERSATIONS_SELECTED', {
-                conversationCount: conversations.length,
-              })
-            }}
-          </span>
-        </label>
-        <div class="w-px h-3 bg-n-weak rounded-lg ltr:ml-1 rtl:mr-1" />
-        <NextButton
-          :label="$t('BULK_ACTION.CLEAR_SELECTION')"
-          ghost
-          class="!text-n-blue-11 !px-1 !h-6"
-          sm
-          @click="allSelected = false"
-        />
+        </div>
+        <div class="flex items-center gap-2">
+          <BulkLabelActions @assign="onAssignLabels" />
+          <BulkUpdateActions
+            :show-resolve="!showResolvedAction"
+            :show-reopen="!showOpenAction"
+            :show-snooze="!showSnoozedAction"
+            @update="onUpdateConversations"
+          />
+          <BulkAgentActions
+            :selected-inboxes="selectedInboxes"
+            :conversation-count="conversations.length"
+            @select="onAssignAgent"
+          />
+          <BulkTeamActions
+            :conversation-count="conversations.length"
+            @select="onAssignTeam"
+          />
+        </div>
       </div>
-      <div class="flex items-center gap-2">
-        <BulkLabelActions @assign="onAssignLabels" />
-        <BulkUpdateActions
-          :show-resolve="!showResolvedAction"
-          :show-reopen="!showOpenAction"
-          :show-snooze="!showSnoozedAction"
-          @update="onUpdateConversations"
+      <woot-modal
+        v-model:show="showCustomTimeSnoozeModal"
+        :on-close="hideCustomSnoozeModal"
+      >
+        <CustomSnoozeModal
+          @close="hideCustomSnoozeModal"
+          @choose-time="customSnoozeTime"
         />
-        <BulkAgentActions
-          :selected-inboxes="selectedInboxes"
-          :conversation-count="conversations.length"
-          @select="onAssignAgent"
-        />
-        <BulkTeamActions
-          :conversation-count="conversations.length"
-          @select="onAssignTeam"
-        />
-      </div>
+      </woot-modal>
     </div>
-    <div
-      v-if="allConversationsSelected"
-      class="bg-n-amber-2 outline -outline-offset-1 outline-1 outline-n-amber-5 rounded-lg text-sm mt-2 py-1.5 px-2 text-n-amber-text"
-    >
-      {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
-    </div>
-    <woot-modal
-      v-model:show="showCustomTimeSnoozeModal"
-      :on-close="hideCustomSnoozeModal"
-    >
-      <CustomSnoozeModal
-        @close="hideCustomSnoozeModal"
-        @choose-time="customSnoozeTime"
-      />
-    </woot-modal>
-  </div>
+  </Transition>
 </template>