From 6b87d6784eeea836901f589f602e7e2f28c7fb25 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 31 Oct 2025 00:27:46 +0530
Subject: [PATCH] chore: Make contacts bulk action bar sticky (#12773)

# Pull Request Template

## Description

This PR makes the contacts bulk action bar sticky while scrolling.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

### Screenshots
<img width="1080" height="300" alt="image"
src="https://github.com/user-attachments/assets/21f8f3c6-813e-4ef6-b40a-8dd14e6ffb26"
/>
<img width="1080" height="300" alt="image"
src="https://github.com/user-attachments/assets/bb939f1d-9a13-4f9f-953d-b9872c984b74"
/>



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 .../captain/assistant/BulkSelectBar.vue       |   2 +-
 .../components/ContactsBulkActionBar.vue      | 100 +++++++++---------
 .../contacts/pages/ContactsIndex.vue          |  23 ++--
 3 files changed, 63 insertions(+), 62 deletions(-)

diff --git a/app/javascript/dashboard/components-next/captain/assistant/BulkSelectBar.vue b/app/javascript/dashboard/components-next/captain/assistant/BulkSelectBar.vue
index b7ee59ead..0bf2007ff 100644
--- a/app/javascript/dashboard/components-next/captain/assistant/BulkSelectBar.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/BulkSelectBar.vue
@@ -61,7 +61,7 @@ const bulkCheckboxState = computed({
   >
     <div
       v-if="hasSelected"
-      class="flex items-center justify-between 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"
+      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-1.5 min-w-0">
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsBulkActionBar.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsBulkActionBar.vue
index c7bb5fbbf..24f0c7aa5 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsBulkActionBar.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsBulkActionBar.vue
@@ -87,56 +87,60 @@ const handleAssignLabels = labels => {
 </script>
 
 <template>
-  <BulkSelectBar
-    v-model="selectionModel"
-    :all-items="allItems"
-    :select-all-label="selectAllLabel"
-    :selected-count-label="selectedCountLabel"
-    class="py-2 ltr:!pr-3 rtl:!pl-3"
+  <div
+    class="sticky top-0 z-10 bg-gradient-to-b from-n-background from-90% to-transparent px-6 pt-1 pb-2"
   >
-    <template #secondary-actions>
-      <Button
-        sm
-        ghost
-        slate
-        :label="t('CONTACTS_BULK_ACTIONS.CLEAR_SELECTION')"
-        class="!px-1.5"
-        @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"
+    <BulkSelectBar
+      v-model="selectionModel"
+      :all-items="allItems"
+      :select-all-label="selectAllLabel"
+      :selected-count-label="selectedCountLabel"
+      class="py-2 ltr:!pr-3 rtl:!pl-3 justify-between"
+    >
+      <template #secondary-actions>
+        <Button
+          sm
+          ghost
+          slate
+          :label="t('CONTACTS_BULK_ACTIONS.CLEAR_SELECTION')"
+          class="!px-1.5"
+          @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"
           >
-            <LabelActions
-              v-if="showLabelSelector"
-              class="[&>.triangle]:!hidden [&>div>button]:!hidden ltr:!right-0 rtl:!left-0 top-8 mt-0.5"
-              @assign="handleAssignLabels"
+            <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>
+            <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>
         </div>
-      </div>
-    </template>
-  </BulkSelectBar>
+      </template>
+    </BulkSelectBar>
+  </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
index 4bd290301..b5ee2ae4c 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
@@ -383,6 +383,15 @@ onMounted(async () => {
       </div>
 
       <template v-else>
+        <ContactsBulkActionBar
+          v-if="hasSelection"
+          :visible-contact-ids="visibleContactIds"
+          :selected-contact-ids="selectedContactIds"
+          :is-loading="isBulkActionLoading"
+          @toggle-all="toggleSelectAll"
+          @clear-selection="clearSelection"
+          @assign-labels="assignLabels"
+        />
         <ContactEmptyState
           v-if="showEmptyStateLayout"
           class="pt-14"
@@ -391,7 +400,6 @@ onMounted(async () => {
           :button-label="t('CONTACTS_LAYOUT.EMPTY_STATE.BUTTON_LABEL')"
           @create="createContact"
         />
-
         <div
           v-else-if="showEmptyText"
           class="flex items-center justify-center py-10"
@@ -400,18 +408,7 @@ onMounted(async () => {
             {{ emptyStateMessage }}
           </span>
         </div>
-
-        <div v-else class="flex flex-col gap-4 px-6 pt-4 pb-6">
-          <div v-if="hasSelection">
-            <ContactsBulkActionBar
-              :visible-contact-ids="visibleContactIds"
-              :selected-contact-ids="selectedContactIds"
-              :is-loading="isBulkActionLoading"
-              @toggle-all="toggleSelectAll"
-              @clear-selection="clearSelection"
-              @assign-labels="assignLabels"
-            />
-          </div>
+        <div v-else class="flex flex-col gap-4 px-6 pt-2 pb-6">
           <ContactsList
             :contacts="contacts"
             :selected-contact-ids="selectedContactIds"