feat: show filtered ROM count below the filter button in gallery AppBar

Co-authored-by: gantoine <3247106+gantoine@users.noreply.github.com>

frontend/src/components/Gallery/AppBar/common/FilterBtn.vue

@@ -2,10 +2,13 @@
 import { storeToRefs } from "pinia";
 import { useI18n } from "vue-i18n";
 import storeGalleryFilter from "@/stores/galleryFilter";
+import storeRoms from "@/stores/roms";
 
 const { t } = useI18n();
 const galleryFilterStore = storeGalleryFilter();
+const romsStore = storeRoms();
 const { activeFilterDrawer } = storeToRefs(galleryFilterStore);
+const { fetchTotalRoms } = storeToRefs(romsStore);
 </script>
 
 <template>
@@ -18,11 +21,10 @@ const { activeFilterDrawer } = storeToRefs(galleryFilterStore);
   >
     <template #activator="{ props }">
       <v-btn
-        class="ml-0"
+        class="ml-0 d-flex flex-column"
         variant="text"
         rounded="0"
         v-bind="props"
-        icon="mdi-filter-variant"
         :color="
           activeFilterDrawer
             ? 'primary'
@@ -32,7 +34,12 @@ const { activeFilterDrawer } = storeToRefs(galleryFilterStore);
         "
         aria-label="Filter"
         @click="galleryFilterStore.switchActiveFilterDrawer"
-      />
+      >
+        <v-icon>mdi-filter-variant</v-icon>
+        <span v-if="fetchTotalRoms > 0" class="text-caption font-weight-medium">
+          {{ fetchTotalRoms }}
+        </span>
+      </v-btn>
     </template>
   </v-tooltip>
 </template>