feat: use controls slot

app/javascript/dashboard/components-next/captain/PageLayout.vue

@@ -97,7 +97,7 @@ const handlePageChange = event => {
     </header>
     <main class="flex-1 px-6 overflow-y-auto xl:px-0">
       <div class="w-full max-w-[960px] mx-auto py-4">
-        <slot />
+        <slot name="controls" />
         <div
           v-if="isFetching"
           class="flex items-center justify-center py-10 text-n-slate-11"
@@ -111,6 +111,7 @@ const handlePageChange = event => {
           <slot name="emptyState" />
         </div>
         <slot v-else name="body" />
+        <slot />
       </div>
     </main>
     <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">

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

@@ -123,12 +123,14 @@ onMounted(() => {
       <CaptainPaywall />
     </template>
 
-    <div v-if="shouldShowAssistantSelector" class="mb-4 -mt-3 flex gap-3">
-      <AssistantSelector
-        :assistant-id="selectedAssistant"
-        @update="handleAssistantFilterChange"
-      />
-    </div>
+    <template #controls>
+      <div v-if="shouldShowAssistantSelector" class="mb-4 -mt-3 flex gap-3">
+        <AssistantSelector
+          :assistant-id="selectedAssistant"
+          @update="handleAssistantFilterChange"
+        />
+      </div>
+    </template>
 
     <template #body>
       <LimitBanner class="mb-5" />

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

@@ -176,30 +176,32 @@ onMounted(() => {
       <CaptainPaywall />
     </template>
 
-    <div v-if="shouldShowDropdown" class="mb-4 -mt-3 flex gap-3">
-      <OnClickOutside @trigger="isStatusFilterOpen = false">
-        <Button
-          :label="selectedStatusLabel"
-          icon="i-lucide-chevron-down"
-          size="sm"
-          color="slate"
-          trailing-icon
-          class="max-w-48"
-          @click="isStatusFilterOpen = !isStatusFilterOpen"
-        />
+    <template #controls>
+      <div v-if="shouldShowDropdown" class="mb-4 -mt-3 flex gap-3">
+        <OnClickOutside @trigger="isStatusFilterOpen = false">
+          <Button
+            :label="selectedStatusLabel"
+            icon="i-lucide-chevron-down"
+            size="sm"
+            color="slate"
+            trailing-icon
+            class="max-w-48"
+            @click="isStatusFilterOpen = !isStatusFilterOpen"
+          />
 
-        <DropdownMenu
-          v-if="isStatusFilterOpen"
-          :menu-items="statusOptions"
-          class="mt-2"
-          @action="handleStatusFilterChange"
+          <DropdownMenu
+            v-if="isStatusFilterOpen"
+            :menu-items="statusOptions"
+            class="mt-2"
+            @action="handleStatusFilterChange"
+          />
+        </OnClickOutside>
+        <AssistantSelector
+          :assistant-id="selectedAssistant"
+          @update="handleAssistantFilterChange"
         />
-      </OnClickOutside>
-      <AssistantSelector
-        :assistant-id="selectedAssistant"
-        @update="handleAssistantFilterChange"
-      />
-    </div>
+      </div>
+    </template>
 
     <template #body>
       <LimitBanner class="mb-5" />