Merge branch 'develop' into fix/CW-6859

app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue

@@ -103,6 +103,7 @@ const showPagination = computed(() => {
           <ContactsActiveFiltersPreview
             v-if="showActiveFiltersPreview"
             :active-segment="activeSegment"
+            class="mb-1"
             @clear-filters="emit('clearFilters')"
             @open-filter="openFilter"
           />

app/javascript/dashboard/components-next/Conversation/SidepanelSwitch.vue

@@ -57,7 +57,7 @@ useKeyboardEvents(keyboardEvents);
 
 <template>
   <ButtonGroup
-    class="flex flex-col justify-center items-center absolute top-36 xl:top-24 ltr:right-2 rtl:left-2 bg-n-solid-2/90 backdrop-blur-lg border border-n-weak/50 rounded-full gap-1.5 p-1.5 shadow-sm transition-shadow duration-200 hover:shadow"
+    class="flex flex-col justify-center items-center absolute top-36 xl:top-24 ltr:right-2 rtl:left-2 bg-n-solid-2/90 backdrop-blur-lg border border-n-weak/50 rounded-full gap-1.5 p-1.5 shadow-sm transition-shadow duration-200 hover:shadow !z-20"
   >
     <Button
       v-tooltip.top="$t('CONVERSATION.SIDEBAR.CONTACT')"

app/javascript/dashboard/components-next/captain/assistant/BulkSelectBar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, useSlots } from 'vue';
 import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 
@@ -30,23 +30,40 @@ const modelValue = defineModel({
 });
 
 const selectedCount = computed(() => modelValue.value.size);
-const totalCount = computed(() => props.allItems.length);
-
+const visibleItemIds = computed(() => props.allItems.map(item => item.id));
+const visibleItemCount = computed(() => visibleItemIds.value.length);
+const selectedVisibleCount = computed(
+  () => visibleItemIds.value.filter(id => modelValue.value.has(id)).length
+);
 const hasSelected = computed(() => selectedCount.value > 0);
 const isIndeterminate = computed(
-  () => hasSelected.value && selectedCount.value < totalCount.value
+  () =>
+    selectedVisibleCount.value > 0 &&
+    selectedVisibleCount.value < visibleItemCount.value
 );
 const allSelected = computed(
-  () => totalCount.value > 0 && selectedCount.value === totalCount.value
+  () =>
+    visibleItemCount.value > 0 &&
+    selectedVisibleCount.value === visibleItemCount.value
 );
 
+const slots = useSlots();
+const hasSecondaryActions = computed(() => Boolean(slots['secondary-actions']));
+
 const bulkCheckboxState = computed({
   get: () => allSelected.value,
   set: shouldSelectAll => {
-    const newSelectedIds = shouldSelectAll
-      ? new Set(props.allItems.map(item => item.id))
-      : new Set();
-    modelValue.value = newSelectedIds;
+    if (!visibleItemCount.value) {
+      return;
+    }
+
+    const updatedSelection = new Set(modelValue.value);
+    if (shouldSelectAll) {
+      visibleItemIds.value.forEach(id => updatedSelection.add(id));
+    } else {
+      visibleItemIds.value.forEach(id => updatedSelection.delete(id));
+    }
+    modelValue.value = updatedSelection;
   },
 });
 </script>
@@ -63,7 +80,7 @@ const bulkCheckboxState = computed({
       v-if="hasSelected"
       class="flex items-center gap-3 py-1 ltr:pl-3 rtl:pr-3 ltr:pr-4 rtl:pl-4 rounded-lg bg-n-solid-2 outline outline-1 outline-n-container shadow"
     >
-      <div class="flex items-center gap-3">
+      <div class="flex items-center gap-3 min-w-0">
         <div class="flex items-center gap-1.5 min-w-0">
           <Checkbox
             v-model="bulkCheckboxState"
@@ -78,21 +95,23 @@ const bulkCheckboxState = computed({
         <span class="text-sm text-n-slate-10 truncate tabular-nums">
           {{ selectedCountLabel }}
         </span>
-        <div class="h-4 w-px bg-n-strong" />
-        <slot name="secondary-actions" />
       </div>
       <div class="flex items-center gap-3">
-        <slot name="actions" :selected-count="selectedCount">
-          <Button
-            :label="deleteLabel"
-            sm
-            ruby
-            ghost
-            class="!px-1.5"
-            icon="i-lucide-trash"
-            @click="emit('bulkDelete')"
-          />
-        </slot>
+        <slot v-if="hasSecondaryActions" name="secondary-actions" />
+        <div v-if="hasSecondaryActions" class="h-4 w-px bg-n-strong" />
+        <div class="flex items-center gap-3">
+          <slot name="actions" :selected-count="selectedCount">
+            <Button
+              :label="deleteLabel"
+              sm
+              ruby
+              ghost
+              class="!px-1.5"
+              icon="i-lucide-trash"
+              @click="emit('bulkDelete')"
+            />
+          </slot>
+        </div>
       </div>
     </div>
     <div v-else class="flex items-center gap-3">