move filter button to its own component

next-ui/src/components.d.ts

@@ -35,6 +35,7 @@ declare module 'vue' {
     EmptyStateConstruction: typeof import('./components/EmptyStateConstruction.vue')['default']
     EmptyStateNetworkError: typeof import('./components/EmptyStateNetworkError.vue')['default']
     FilterAnyAll: typeof import('./components/filter/AnyAll.vue')['default']
+    FilterButton: typeof import('./components/FilterButton.vue')['default']
     FilterByAgeRating: typeof import('./components/filter/by/AgeRating.vue')['default']
     FilterByAuthor: typeof import('./components/filter/by/Author.vue')['default']
     FilterByComplete: typeof import('./components/filter/by/Complete.vue')['default']

next-ui/src/components/FilterButton.vue

@@ -0,0 +1,39 @@
+<template>
+  <!-- We use padding end so that the badge is displayed properly, else it goes off screen -->
+  <v-badge
+    location="top right"
+    color="primary"
+    bordered
+    :content="count"
+    :model-value="count > 0"
+    class="pe-4"
+    offset-x="7"
+    offset-y="7"
+  >
+    <v-icon-btn
+      v-tooltip:bottom="
+        $formatMessage({
+          description: 'Filter button: tooltip',
+          defaultMessage: 'Show filters',
+          id: 'kFQatO',
+        })
+      "
+      icon="i-mdi:filter-variant"
+      @click="emit('click')"
+    />
+  </v-badge>
+</template>
+
+<script setup lang="ts">
+const { count } = defineProps<{
+  count: number
+}>()
+
+const emit = defineEmits<{
+  click: []
+}>()
+</script>
+
+<script lang="ts"></script>
+
+<style scoped></style>

next-ui/src/pages/libraries/[id]/series.vue

@@ -23,28 +23,10 @@
       class="px-2"
     />
 
-    <!-- We use padding end so that the badge is displayed properly, else it goes off screen -->
-    <v-badge
-      location="top right"
-      color="primary"
-      :content="filterCount"
-      :model-value="filterCount > 0"
-      class="pe-4"
-      offset-x="7"
-      offset-y="7"
-    >
-      <v-icon-btn
-        v-tooltip:bottom="
-          $formatMessage({
-            description: 'Filter button: tooltip',
-            defaultMessage: 'Show filters',
-            id: 'kFQatO',
-          })
-        "
-        icon="i-mdi:filter-variant"
-        @click="filterDrawer = true"
-      />
-    </v-badge>
+    <FilterButton
+      :count="filterCount"
+      @click="filterDrawer = true"
+    />
   </v-app-bar>
 
   <TempDrawer v-model="filterDrawer">
@@ -313,6 +295,7 @@ import { useIntlFormatter } from '@/composables/intlFormatter'
 import { sortSeries } from '@/types/sort'
 import { komgaClient } from '@/api/komga-client'
 import PosterSizeSlider from '@/components/PosterSizeSlider.vue'
+import FilterButton from '@/components/FilterButton.vue'
 
 const route = useRoute('/libraries/[id]/series')
 const libraryId = route.params.id