From b4d2255e513cb1335d51b12d2f012e05507aad3f Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Wed, 1 Apr 2026 10:40:33 +0800
Subject: [PATCH] move filter button to its own component

---
 next-ui/src/components.d.ts                 |  1 +
 next-ui/src/components/FilterButton.vue     | 39 +++++++++++++++++++++
 next-ui/src/pages/libraries/[id]/series.vue | 27 +++-----------
 3 files changed, 45 insertions(+), 22 deletions(-)
 create mode 100644 next-ui/src/components/FilterButton.vue

diff --git a/next-ui/src/components.d.ts b/next-ui/src/components.d.ts
index b3eb1788..84380674 100644
--- a/next-ui/src/components.d.ts
+++ b/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']
diff --git a/next-ui/src/components/FilterButton.vue b/next-ui/src/components/FilterButton.vue
new file mode 100644
index 00000000..e9259087
--- /dev/null
+++ b/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>
diff --git a/next-ui/src/pages/libraries/[id]/series.vue b/next-ui/src/pages/libraries/[id]/series.vue
index af5b79c8..4f67e800 100644
--- a/next-ui/src/pages/libraries/[id]/series.vue
+++ b/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