ill do it myself

frontend/src/components/Gallery/AppBar/Base.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { storeToRefs } from "pinia";
-import { useI18n } from "vue-i18n";
 import SearchTextField from "@/components/Gallery/AppBar/Search/SearchTextField.vue";
 import CharIndexBar from "@/components/Gallery/AppBar/common/CharIndexBar.vue";
 import ContextualRandomBtn from "@/components/Gallery/AppBar/common/ContextualRandomBtn.vue";
@@ -9,7 +7,6 @@ import FilterDrawer from "@/components/Gallery/AppBar/common/FilterDrawer/Base.v
 import GalleryViewBtn from "@/components/Gallery/AppBar/common/GalleryViewBtn.vue";
 import SelectingBtn from "@/components/Gallery/AppBar/common/SelectingBtn.vue";
 import SmartCollectionBtn from "@/components/Gallery/AppBar/common/SmartCollectionBtn.vue";
-import storeRoms from "@/stores/roms";
 import { calculateMainLayoutWidth } from "@/utils";
 
 withDefaults(
@@ -24,9 +21,7 @@ withDefaults(
     showSearchBar: false,
   },
 );
-const { t } = useI18n();
-const romsStore = storeRoms();
-const { fetchTotalRoms } = storeToRefs(romsStore);
+
 const { calculatedWidth } = calculateMainLayoutWidth();
 </script>
 <template>
@@ -40,14 +35,6 @@ const { calculatedWidth } = calculateMainLayoutWidth();
     <template #prepend>
       <slot name="prepend" />
       <FilterBtn />
-      <v-chip
-        v-if="fetchTotalRoms > 0"
-        size="x-small"
-        variant="tonal"
-        class="mr-1"
-      >
-        {{ t("gallery.filtered-results", { count: fetchTotalRoms }) }}
-      </v-chip>
       <SmartCollectionBtn />
     </template>
     <SearchTextField v-if="showSearchBar" />

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 { activeFilterDrawer } = storeToRefs(galleryFilterStore);
+const romsStore = storeRoms();
+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 px-3 min-w-auto! h-full!"
         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"
-      />
+      >
+        <div class="d-flex flex-col align-center">
+          <span class="text-caption leading-none!">{{ fetchTotalRoms }}</span>
+          <v-icon size="x-large">mdi-filter-variant</v-icon>
+        </div>
+      </v-btn>
     </template>
   </v-tooltip>
 </template>

frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue

@@ -41,7 +41,6 @@ const { xs, smAndDown } = useDisplay();
 const router = useRouter();
 const galleryFilterStore = storeGalleryFilter();
 const romsStore = storeRoms();
-const { fetchTotalRoms } = storeToRefs(romsStore);
 const platformsStore = storePlatforms();
 const {
   searchTerm,
@@ -557,7 +556,7 @@ onMounted(async () => {
             variant="outlined"
             density="comfortable"
             :items="filter.items.value"
-            class="flex-grow-1"
+            class="grow"
             @update:model-value="
               nextTick(() => emitter?.emit('filterRoms', null))
             "
@@ -568,7 +567,7 @@ onMounted(async () => {
             mandatory
             variant="outlined"
             density="compact"
-            class="flex-shrink-0"
+            class="shrink-0"
             @update:model-value="
               (value) => {
                 filter.setLogic(value);
@@ -613,7 +612,7 @@ onMounted(async () => {
         </div>
       </v-list-item>
       <v-list-item
-        class="justify-center d-flex flex-column ga-2"
+        class="justify-center d-flex"
         :tabindex="activeFilterDrawer ? 0 : -1"
       >
         <v-btn
@@ -624,12 +623,6 @@ onMounted(async () => {
         >
           {{ t("platform.reset-filters") }}
         </v-btn>
-        <span
-          v-if="fetchTotalRoms > 0"
-          class="text-caption text-medium-emphasis"
-        >
-          {{ t("gallery.filtered-results", { count: fetchTotalRoms }) }}
-        </span>
       </v-list-item>
     </v-list>
   </v-navigation-drawer>

frontend/src/locales/en_US/gallery.json

@@ -1,5 +1,4 @@
 {
   "all-loaded": "All games have been loaded",
-  "load-more": "Load more",
-  "filtered-results": "{count} results"
+  "load-more": "Load more"
 }