feat(tab-selector): replace badge with amount

Author: VChet

src/components/tab-selector.vue

@@ -13,7 +13,6 @@ import { useVModel } from "@vueuse/core";
 interface Tab {
   value: string
   text: string
-  badge?: boolean
 }
 
 const props = defineProps<{ modelValue: Tab["value"], items: Tab[] }>();
@@ -24,8 +23,7 @@ function getTabClassList(tab: Tab): Record<string, boolean> {
   const key = "tab-selector__button";
   return {
     [key]: true,
-    [`${key}--active`]: tab.value === selectedTab.value,
-    [`${key}--badge`]: !!tab.badge
+    [`${key}--active`]: tab.value === selectedTab.value
   };
 }
 </script>
@@ -39,20 +37,6 @@ function getTabClassList(tab: Tab): Record<string, boolean> {
       color: var(--accent);
       border-color: var(--accent);
     }
-    &--badge {
-      position: relative;
-      &::after {
-        position: absolute;
-        top: calc(0% - 0.375rem);
-        left: calc(100% - 0.375rem);
-        width: 0.75rem;
-        height: 0.75rem;
-        content: '';
-        background: var(--accent);
-        border-radius: 50%;
-        box-shadow: 0 0 1.25rem 0 var(--accent);
-      }
-    }
   }
 }
 </style>

src/store/events.ts

@@ -41,11 +41,11 @@ export function useEventsStore() {
     get: () => storage.value.data,
     set: (value) => { storage.value.data = value; }
   });
+  const amount = computed<number>(() => events.value.length);
   const lastUpdate = computed({
     get: () => storage.value.lastUpdate,
     set: (value) => { storage.value.lastUpdate = value; }
   });
-  const isEmpty = computed(() => !Object.keys(events.value).length);
   const { settings } = useSettingsStore();
   const isFeedAvailable = computed(() => !!settings.value.authToken && !!settings.value.username);
 
@@ -80,7 +80,7 @@ export function useEventsStore() {
 
   return {
     events,
-    isEmpty,
+    amount,
     isFeedAvailable,
     updateEvents,
     updateCheck

src/views/FeedView.vue

@@ -1,7 +1,7 @@
 <template>
   <fieldset class="user-feed">
     <legend>Recent events</legend>
-    <span v-if="isEmpty">
+    <span v-if="!amount">
       No recent events
     </span>
     <ul v-else>
@@ -17,7 +17,7 @@
 <script setup lang="ts">
 import { useEventsStore } from "@/store/events";
 
-const { events, isEmpty, updateCheck } = useEventsStore();
+const { events, amount, updateCheck } = useEventsStore();
 updateCheck();
 </script>
 <style lang="scss">

src/views/HomeView.vue

@@ -28,14 +28,14 @@ const pages = computed(() => router.currentRoute.value.matched[0].children.map((
 const isTabRoute = (name: string): name is Tab => pages.value.includes(name);
 
 const { repositories } = useRepositoriesStore();
-const { isEmpty, isFeedAvailable } = useEventsStore();
+const { isFeedAvailable, amount } = useEventsStore();
 
 const tabs = computed(() => {
-  const entries: { value: Tab, text: string, badge?: boolean }[] = [
+  const entries: { value: Tab, text: string }[] = [
     { value: "Repositories", text: "Repositories" },
     { value: "Dependencies", text: "Dependencies" }
   ];
-  if (isFeedAvailable.value) entries.push({ value: "User Feed", text: "User Feed", badge: !isEmpty.value });
+  if (isFeedAvailable.value) entries.push({ value: "User Feed", text: `User Feed (${amount.value})` });
   return entries;
 });