Add new filter bar slot for Section component which teleports on mobile

dashboard/src/components/Section.vue

@@ -1,6 +1,10 @@
 <script setup>
 
-import { inject } from 'vue';
+import { inject, useTemplateRef, ref, onMounted, onUnmounted } from 'vue';
+
+const mobileFilterBar = useTemplateRef('mobileFilterBar');
+
+const isMobile = ref(false);
 
 defineProps({
   title: String,
@@ -16,6 +20,19 @@ function onTitleBadge() {
   subscriptionRequiredDialog.value.open();
 }
 
+function checkForMobile() {
+  isMobile.value = window.innerWidth <= 576;
+}
+
+onMounted(() => {
+  checkForMobile();
+  window.addEventListener('resize', checkForMobile);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkForMobile);
+});
+
 </script>
 
 <template>
@@ -28,8 +45,9 @@ function onTitleBadge() {
         </div>
         <div class="section-header-title-badge" v-if="titleBadge" @click="onTitleBadge()">{{ titleBadge }}</div>
       </div>
-      <div><slot name="header-buttons"></slot></div>
+      <div><Teleport :disabled="!isMobile" :to="mobileFilterBar"><slot name="filter-bar"></slot></Teleport><slot name="header-buttons"></slot></div>
     </h2>
+    <div class="section-mobile-filter-bar" ref="mobileFilterBar"></div>
     <hr class="section-divider"/>
     <div class="section-body">
       <slot></slot>
@@ -102,4 +120,11 @@ function onTitleBadge() {
   cursor: pointer;
 }
 
+.section-mobile-filter-bar {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin: 10px 15px;
+}
+
 </style>