refactor: carve out Badge component

komga-webui/src/assets/css/badge.css

@@ -1,10 +0,0 @@
-.badge-count {
-    background-color: #E0E0E0;
-    border-radius: 4px;
-    color: black;
-    display: inline-block;
-    padding: 1px 8px;
-    text-align: center;
-    font-size: .8em;
-    font-weight: normal;
-}

komga-webui/src/components/Badge.vue

@@ -0,0 +1,32 @@
+<template>
+    <span class="badge">
+      {{ value }}
+    </span>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'Badge',
+  props: {
+    value: {
+      type: [String, Number],
+      required: true
+    }
+  }
+})
+</script>
+
+<style scoped>
+.badge {
+  background-color: #E0E0E0;
+  border-radius: 4px;
+  color: black;
+  display: inline-block;
+  padding: 1px 8px;
+  text-align: center;
+  font-size: .8em;
+  font-weight: normal;
+}
+</style>

komga-webui/src/views/BrowseLibraries.vue

@@ -7,11 +7,7 @@
 
       <v-toolbar-title>
         <span>{{ library ? library.name : 'All libraries' }}</span>
-        <span class="ml-4 badge-count"
-              v-if="totalElements !== null"
-        >
-          {{ totalElements }}
-        </span>
+        <badge class="ml-4" v-if="totalElements" v-model="totalElements"/>
       </v-toolbar-title>
 
       <v-spacer/>
@@ -84,6 +80,7 @@
 </template>
 
 <script lang="ts">
+import Badge from '@/components/Badge.vue'
 import CardSeries from '@/components/CardSeries.vue'
 import EmptyState from '@/components/EmptyState.vue'
 import LibraryActionsMenu from '@/components/LibraryActionsMenu.vue'
@@ -95,7 +92,7 @@ import Vue from 'vue'
 
 export default Vue.extend({
   name: 'BrowseLibraries',
-  components: { LibraryActionsMenu, CardSeries, EmptyState, ToolbarSticky, SortMenuButton },
+  components: { LibraryActionsMenu, CardSeries, EmptyState, ToolbarSticky, SortMenuButton, Badge },
   data: () => {
     return {
       library: undefined as LibraryDto | undefined,
@@ -255,5 +252,4 @@ export default Vue.extend({
 })
 </script>
 <style scoped>
-@import "../assets/css/badge.css";
 </style>

komga-webui/src/views/BrowseSeries.vue

@@ -25,11 +25,7 @@
 
       <v-toolbar-title>
         <span v-if="series.name">{{ series.name }}</span>
-        <span class="ml-4 badge-count"
-              v-if="totalElements"
-        >
-          {{ totalElements }}
-        </span>
+        <badge class="ml-4" v-if="totalElements" v-model="totalElements"/>
       </v-toolbar-title>
 
       <v-spacer/>
@@ -91,6 +87,7 @@
 </template>
 
 <script lang="ts">
+import Badge from '@/components/Badge.vue'
 import CardBook from '@/components/CardBook.vue'
 import SortMenuButton from '@/components/SortMenuButton.vue'
 import ToolbarSticky from '@/components/ToolbarSticky.vue'
@@ -101,7 +98,7 @@ import Vue from 'vue'
 
 export default Vue.extend({
   name: 'BrowseSeries',
-  components: { CardBook, ToolbarSticky, SortMenuButton },
+  components: { CardBook, ToolbarSticky, SortMenuButton, Badge },
   data: () => {
     return {
       series: {} as SeriesDto,
@@ -250,5 +247,4 @@ export default Vue.extend({
 </script>
 
 <style scoped>
-@import "../assets/css/badge.css";
 </style>