chore: Update captain FAQ bulk action UI (#11780)

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

@@ -123,7 +123,7 @@ const handleDocumentableClick = () => {
     @mouseenter="emit('hover', true)"
     @mouseleave="emit('hover', false)"
   >
-    <div v-show="selectable" class="absolute top-7 ltr:left-4 rtl:right-4">
+    <div v-show="selectable" class="absolute top-7 ltr:left-3 rtl:right-3">
       <Checkbox v-model="modelValue" />
     </div>
     <div class="flex relative justify-between w-full gap-1">

app/javascript/dashboard/i18n/locale/en/integrations.json

@@ -537,6 +537,8 @@
         "CONVERSATION": "Conversation #{id}"
       },
       "SELECTED": "{count} selected",
+      "SELECT_ALL": "Select all ({count})",
+      "UNSELECT_ALL": "Unselect all ({count})",
       "BULK_APPROVE_BUTTON": "Approve",
       "BULK_DELETE_BUTTON": "Delete",
       "BULK_APPROVE": {

app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue

@@ -157,6 +157,13 @@ const bulkCheckbox = computed({
   },
 });
 
+const buildSelectedCountLabel = computed(() => {
+  const count = responses.value?.length || 0;
+  return bulkSelectionState.value.allSelected
+    ? t('CAPTAIN.RESPONSES.UNSELECT_ALL', { count })
+    : t('CAPTAIN.RESPONSES.SELECT_ALL', { count });
+});
+
 const handleCardHover = (isHovered, id) => {
   hoveredCard.value = isHovered ? id : null;
 };
@@ -270,7 +277,11 @@ onMounted(() => {
     <template #controls>
       <div
         v-if="shouldShowDropdown"
-        class="mb-4 -mt-3 flex justify-between items-center"
+        class="mb-4 -mt-3 flex justify-between items-center w-fit py-1"
+        :class="{
+          'ltr:pl-3 rtl:pr-3 ltr:pr-1 rtl:pl-1 rounded-lg outline outline-1 outline-n-weak bg-n-solid-3':
+            bulkSelectionState.hasSelected,
+        }"
       >
         <div v-if="!bulkSelectionState.hasSelected" class="flex gap-3">
           <OnClickOutside @trigger="isStatusFilterOpen = false">
@@ -306,13 +317,18 @@ onMounted(() => {
         >
           <div
             v-if="bulkSelectionState.hasSelected"
-            class="flex items-center gap-3 ltr:pl-4 rtl:pr-4"
+            class="flex items-center gap-3"
           >
-            <div class="flex items-center gap-1.5">
+            <div class="flex items-center gap-3">
-              <Checkbox
+              <div class="flex items-center gap-1.5">
-                v-model="bulkCheckbox"
+                <Checkbox
-                :indeterminate="bulkSelectionState.isIndeterminate"
+                  v-model="bulkCheckbox"
-              />
+                  :indeterminate="bulkSelectionState.isIndeterminate"
+                />
+                <span class="text-sm text-n-slate-12 font-medium tabular-nums">
+                  {{ buildSelectedCountLabel }}
+                </span>
+              </div>
               <span class="text-sm text-n-slate-10 tabular-nums">
                 {{
                   $t('CAPTAIN.RESPONSES.SELECTED', {
@@ -322,17 +338,23 @@ onMounted(() => {
               </span>
             </div>
             <div class="h-4 w-px bg-n-strong" />
-            <div class="flex gap-2">
+            <div class="flex gap-3 items-center">
               <Button
                 :label="$t('CAPTAIN.RESPONSES.BULK_APPROVE_BUTTON')"
                 sm
-                slate
+                ghost
+                icon="i-lucide-check"
+                class="!px-1.5"
                 @click="handleBulkApprove"
               />
+              <div class="h-4 w-px bg-n-strong" />
               <Button
                 :label="$t('CAPTAIN.RESPONSES.BULK_DELETE_BUTTON')"
                 sm
-                slate
+                ruby
+                ghost
+                class="!px-1.5"
+                icon="i-lucide-trash"
                 @click="bulkDeleteDialog.dialogRef.open()"
               />
             </div>