Add quick info badges to home page (+ other places?)

Author: alexAubin

app/src/views/HomeView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import api from '@/api'
 const menu = [
   { routeName: 'user-list', icon: 'users', translation: 'users' },
   {
@@ -17,6 +18,13 @@ const menu = [
   },
   { routeName: 'backup', icon: 'archive', translation: 'backup' },
 ]
+
+const { apps, upgrades, diagnosis } = await api
+  .get({ uri: 'dash', initial: true})
+  .then(({ apps, upgrades, diagnosis }) => {
+    return {apps, upgrades, diagnosis}
+  })
+
 </script>
 
 <template>
@@ -29,6 +37,24 @@ const menu = [
       >
         <YIcon :iname="item.icon" class="lg ms-1" />
         <h4>{{ $t(item.translation) }}</h4>
+        <BBadge v-if="item.routeName == 'app-list' && apps.notifications > 0" class="ms-2" variant="info" pill>
+        <YIcon iname="info-circle" /> {{ apps.notifications }} notifications
+        </BBadge>
+        <BBadge v-if="item.routeName == 'update' && upgrades.pending_migrations > 0" class="ms-2" variant="info" pill>
+          <YIcon iname="forward" /> {{ upgrades.pending_migrations }} pending migration
+        </BBadge>
+        <BBadge v-if="item.routeName == 'update' && upgrades.system_packages > 0" class="ms-2" variant="info" pill>
+          <YIcon iname="arrow-up" /> {{ upgrades.system_packages }} system upgrades
+        </BBadge>
+        <BBadge v-if="item.routeName == 'update' && upgrades.apps > 0" class="ms-2" variant="info" pill>
+          <YIcon iname="arrow-up" /> {{ upgrades.apps }} app upgrades
+        </BBadge>
+        <BBadge v-if="item.routeName == 'diagnosis' && diagnosis.warnings > 0" class="ms-2" variant="warning" pill>
+          <YIcon iname="exclamation-triangle" /> {{ diagnosis.warnings }} warnings
+        </BBadge>
+        <BBadge v-if="item.routeName == 'diagnosis' && diagnosis.errors > 0" class="ms-2" variant="danger" pill>
+          <YIcon iname="times" /> {{ diagnosis.errors }} errors
+        </BBadge>
         <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
       </BListGroupItem>
     </BListGroup>