From 462b3aaf9eea7b757f3aeb90bac23cbdccb69912 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 9 Mar 2026 03:07:46 +0000
Subject: [PATCH] feat: show filtered ROM count below the filter button in
 gallery AppBar

Co-authored-by: gantoine <3247106+gantoine@users.noreply.github.com>
---
 .../components/Gallery/AppBar/common/FilterBtn.vue  | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Gallery/AppBar/common/FilterBtn.vue b/frontend/src/components/Gallery/AppBar/common/FilterBtn.vue
index 95047e516..bf87ece9d 100644
--- a/frontend/src/components/Gallery/AppBar/common/FilterBtn.vue
+++ b/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>