add counter to tabbar

apps/frontend/src/components/layout/TabBar.vue

@@ -6,11 +6,12 @@
       class="flex justify-around sm:justify-between sm:gap-8 sm:px-4 sm:flex-row sm:bg-white sm:max-w-prose mx-auto"
     >
       <TabMenuItem
-        v-for="{ route, label, icon } in tabs"
+        v-for="{ route, label, icon, unreadCount } in tabs"
         :key="route"
         :label
         :icon
         :to="{ name: route }"
+        :unreadCount
       />
     </div>
   </div>
@@ -22,6 +23,7 @@ type Tab = {
   route: (typeof ROUTE_NAMES)[keyof typeof ROUTE_NAMES]
   label: string
   icon: string
+  unreadCount?: number
 }
 const tabs: Tab[] = [
   { route: ROUTE_NAMES.CREATE, label: 'Создать QR-код', icon: 'plus' },

apps/frontend/src/components/layout/TabMenuItem.vue

@@ -1,11 +1,10 @@
 <template>
-  <RouterLink :to custom v-slot="{ isActive, href, navigate }">
+  <RouterLink :to="to" custom v-slot="{ isActive, href, navigate }">
     <a
       v-bind="$attrs"
       :href="href"
       @click="navigate"
-      class="flex flex-col items-center w-full sm:flex-row sm:items-center sm:w-auto gap-1"
+      class="flex flex-col items-center w-full sm:flex-row sm:items-center sm:w-auto gap-1 relative"
-      :class="{ 'text-primary-700 font-bold': isActive }"
     >
       <i :class="['pi', `pi-${icon}`, 'text-2xl sm:mr-2', isActive && 'text-primary-700']"></i>
       <span
@@ -14,6 +13,12 @@
       >
         {{ label }}
       </span>
+      <span
+        v-if="unreadCount && unreadCount > 0"
+        class="absolute top-0 -right-2.5 bg-red-500 text-white text-xs rounded-full px-1"
+      >
+        {{ unreadCount }}
+      </span>
     </a>
   </RouterLink>
 </template>
@@ -25,5 +30,6 @@ defineProps<{
   readonly to: RouteLocationRaw | string
   readonly icon: string
   readonly label: string
+  readonly unreadCount?: number
 }>()
 </script>