Show badges for unread announcements

src/components/mobile_nav/mobile_nav.js

@@ -54,7 +54,7 @@ const MobileNav = {
     isChat () {
       return this.$route.name === 'chat'
     },
-    ...mapGetters(['unreadChatCount']),
+    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount']),
     chatsPinned () {
       return new Set(this.$store.state.serverSideStorage.prefsStorage.collections.pinnedNavItems).has('chats')
     }

src/components/mobile_nav/mobile_nav.vue

@@ -19,7 +19,7 @@
             icon="bars"
           />
           <div
-            v-if="unreadChatCount && !chatsPinned"
+            v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
             class="alert-dot"
           />
         </button>

src/components/nav_panel/nav_panel.js

@@ -117,7 +117,7 @@ const NavPanel = {
         }
       )
     },
-    ...mapGetters(['unreadChatCount'])
+    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
   }
 }
 

src/components/navigation/navigation.js

@@ -75,6 +75,7 @@ export const ROOT_ITEMS = {
   announcements: {
     route: 'announcements',
     icon: 'bullhorn',
-    label: 'nav.announcements'
+    label: 'nav.announcements',
+    badgeGetter: 'unreadAnnouncementCount'
   }
 }

src/components/notifications/notifications.js

@@ -69,7 +69,7 @@ const Notifications = {
       return this.unseenNotifications.length
     },
     unseenCountTitle () {
-      return this.unseenCount + (this.unreadChatCount)
+      return this.unseenCount + (this.unreadChatCount) + this.unreadAnnouncementCount
     },
     loading () {
       return this.$store.state.statuses.notifications.loading
@@ -94,7 +94,7 @@ const Notifications = {
       return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
     },
     noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
-    ...mapGetters(['unreadChatCount'])
+    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
   },
   mounted () {
     this.scrollerRef = this.$refs.root.closest('.column.-scrollable')

src/components/side_drawer/side_drawer.js

@@ -97,7 +97,7 @@ const SideDrawer = {
     ...mapState({
       pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
     }),
-    ...mapGetters(['unreadChatCount'])
+    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
   },
   methods: {
     toggleDrawer () {

src/components/side_drawer/side_drawer.vue

@@ -202,6 +202,12 @@
               class="fa-scale-110 fa-old-padding"
               icon="bullhorn"
             /> {{ $t("nav.announcements") }}
+            <span
+              v-if="unreadAnnouncementCount"
+              class="badge badge-notification"
+            >
+              {{ unreadAnnouncementCount }}
+            </span>
           </router-link>
         </li>
         <li

src/modules/announcements.js

@@ -25,9 +25,18 @@ export const mutations = {
   }
 }
 
+export const getters = {
+  unreadAnnouncementCount (state) {
+    return state.announcements.reduce((acc, cur) => {
+      return (!cur.inactive && !cur.read) ? acc + 1 : acc
+    }, 0)
+  }
+}
+
 const announcements = {
   state: defaultState,
   mutations,
+  getters,
   actions: {
     fetchAnnouncements (store) {
       const currentUser = store.rootState.users.currentUser