See #890: Display the number of unhandled reports in the sidebar

front/src/components/Sidebar.vue

@@ -95,6 +95,10 @@
               class="item"
               :to="{name: 'manage.moderation.domains.list'}">
               <i class="shield icon"></i><translate translate-context="*/Moderation/*">Moderation</translate>
+              <div
+                v-if="$store.state.ui.notifications.pendingReviewReports > 0"
+                :title="labels.pendingReviewReports"
+                :class="['ui', 'teal', 'label']">{{ $store.state.ui.notifications.pendingReviewReports }}</div>
             </router-link>
             <router-link
               v-if="$store.state.auth.availablePermissions['settings']"

front/src/store/auth.js

@@ -126,7 +126,12 @@ export default {
             resolve(response.data)
           })
           dispatch('ui/fetchUnreadNotifications', null, { root: true })
-          dispatch('ui/fetchPendingReviewEdits', null, { root: true })
+          if (response.data.permissions.library) {
+            dispatch('ui/fetchPendingReviewEdits', null, { root: true })
+          }
+          if (response.data.permissions.moderation) {
+            dispatch('ui/fetchPendingReviewReports', null, { root: true })
+          }
           dispatch('favorites/fetch', null, { root: true })
           dispatch('moderation/fetchContentFilters', null, { root: true })
           dispatch('playlists/fetchOwn', null, { root: true })

front/src/store/ui.js

@@ -14,6 +14,7 @@ export default {
     notifications: {
       inbox: 0,
       pendingReviewEdits: 0,
+      pendingReviewReports: 0,
     },
     websocketEventsHandlers: {
       'inbox.item_added': {},
@@ -74,6 +75,11 @@ export default {
         commit('notifications', {type: 'pendingReviewEdits', count: response.data.count})
       })
     },
+    fetchPendingReviewReports ({commit, rootState}, payload) {
+      axios.get('manage/moderation/reports/', {params: {is_handled: 'false', page_size: 1}}).then((response) => {
+        commit('notifications', {type: 'pendingReviewReports', count: response.data.count})
+      })
+    },
     websocketEvent ({state}, event) {
       let handlers = state.websocketEventsHandlers[event.type]
       console.log('Dispatching websocket event', event, handlers)