fix navigation

src/components/navigation/navigation.js

@@ -76,7 +76,7 @@ export const ROOT_ITEMS = {
     icon: 'comments',
     label: 'nav.chats',
     badgeStyle: 'notification',
-    badgeGetter: 'unreadChatsCount',
+    badgeGetter: 'unreadChats',
     criteria: ['chats'],
   },
   friendRequests: {
@@ -85,7 +85,7 @@ export const ROOT_ITEMS = {
     label: 'nav.friend_requests',
     badgeStyle: 'notification',
     criteria: ['lockedUser'],
-    badgeGetter: 'followRequestsCount',
+    badgeGetter: 'followRequests',
   },
   about: {
     route: 'about',
@@ -99,7 +99,7 @@ export const ROOT_ITEMS = {
     label: 'nav.announcements',
     store: 'announcements',
     badgeStyle: 'notification',
-    badgeGetter: 'unreadAnnouncementCount',
+    badgeGetter: 'unreadAnnouncements',
     criteria: ['announcements'],
   },
   drafts: {
@@ -107,7 +107,7 @@ export const ROOT_ITEMS = {
     icon: 'file-pen',
     label: 'nav.drafts',
     badgeStyle: 'neutral',
-    badgeGetter: 'draftCount',
+    badgeGetter: 'drafts',
   },
 }
 

src/components/navigation/navigation_entry.js

@@ -6,6 +6,9 @@ import OptionalRouterLink from 'src/components/optional_router_link/optional_rou
 import { useAnnouncementsStore } from 'src/stores/announcements.js'
 import { useSyncConfigStore } from 'src/stores/sync_config.js'
 import { useUsersStore } from 'src/stores/users.js'
+import { useDraftsStore } from 'src/stores/drafts.js'
+import { useChatsStore } from 'src/stores/chats.js'
+import { useFollowRequestsStore } from 'src/stores/follow_requests.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faThumbtack } from '@fortawesome/free-solid-svg-icons'
@@ -40,11 +43,19 @@ const NavigationEntry = {
     routeTo() {
       return routeTo(this.item, this.currentUser)
     },
-    getters() {
-      return this.$store.getters
+    badges() {
+      return {
+        drafts: this.draftsCount,
+        unreadAnnouncements: this.unreadAnnouncementCount,
+        followRequests: this.followRequestsCount,
+        unreadChats: this.unreadChatsCount,
+      }
     },
     ...mapStores(useAnnouncementsStore),
+    ...mapState(useDraftsStore, ['draftsCount']),
     ...mapState(useUsersStore, ['currentUser']),
+    ...mapState(useChatsStore, ['unreadChatsCount']),
+    ...mapState(useFollowRequestsStore, ['followRequestsCount']),
     ...mapState(useSyncConfigStore, {
       pinnedItems: (store) =>
         new Set(store.prefsStorage.collections.pinnedNavItems),

src/components/navigation/navigation_entry.vue

@@ -47,11 +47,11 @@
       </component>
       <slot />
       <div
-        v-if="item.badgeGetter && getters[item.badgeGetter]"
+        v-if="item.badgeGetter && badges[item.badgeGetter]"
         class="badge"
         :class="[`-${item.badgeStyle}`]"
       >
-        {{ getters[item.badgeGetter] }}
+        {{ badges[item.badgeGetter] }}
       </div>
       <div
         v-else-if="item.badgeGetter && item.store && this[`${item.store}Store`][item.badgeGetter]"

src/components/navigation/navigation_pins.js

@@ -56,8 +56,13 @@ const NavPanel = {
   },
   components: {},
   computed: {
-    getters() {
-      return this.$store.getters
+    badges() {
+      return {
+        drafts: this.draftsCount,
+        unreadAnnouncements: this.unreadAnnouncementCount,
+        followRequests: this.followRequestsCount,
+        unreadChats: this.unreadChatsCount,
+      }
     },
     ...mapState(useListsStore, {
       lists: getListEntries,

src/components/navigation/navigation_pins.vue

@@ -23,7 +23,7 @@
         :src="item.iconEmojiUrl"
       />
       <div
-        v-if="item.badgeGetter && getters[item.badgeGetter]"
+        v-if="item.badgeGetter && badges[item.badgeGetter]"
         class="badge -dot"
         :class="[`-${item.badgeStyle}`]"
       />