Show pending task count on side bar queue icon (#376)

* remove listener

* Store pending task count

* Add iconBadge to queue icon

src/App.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, markRaw, onMounted, watch } from 'vue'
+import { computed, markRaw, onMounted, onUnmounted, watch } from 'vue'
 import BlockUI from 'primevue/blockui'
 import ProgressSpinner from 'primevue/progressspinner'
 import GraphCanvas from '@/components/graph/GraphCanvas.vue'
@@ -17,6 +17,9 @@ import { useI18n } from 'vue-i18n'
 import { useWorkspaceStore } from './stores/workspaceStateStore'
 import NodeLibrarySideBarTab from './components/sidebar/tabs/NodeLibrarySideBarTab.vue'
 import GlobalDialog from './components/dialog/GlobalDialog.vue'
+import { api } from './scripts/api'
+import { StatusWsMessageStatus } from './types/apiTypes'
+import { useQueuePendingTaskCountStore } from './stores/queueStore'
 
 const isLoading = computed<boolean>(() => useWorkspaceStore().spinner)
 const theme = computed<string>(() =>
@@ -43,6 +46,10 @@ const init = () => {
   app.extensionManager.registerSidebarTab({
     id: 'queue',
     icon: 'pi pi-history',
+    iconBadge: () => {
+      const value = useQueuePendingTaskCountStore().count.toString()
+      return value === '0' ? null : value
+    },
     title: t('sideToolBar.queue'),
     tooltip: t('sideToolBar.queue'),
     component: markRaw(QueueSideBarTab),
@@ -58,13 +65,22 @@ const init = () => {
   })
 }
 
+const queuePendingTaskCountStore = useQueuePendingTaskCountStore()
+const onStatus = (e: CustomEvent<StatusWsMessageStatus>) =>
+  queuePendingTaskCountStore.update(e)
+
 onMounted(() => {
+  api.addEventListener('status', onStatus)
   try {
     init()
   } catch (e) {
     console.error('Failed to init Vue app', e)
   }
 })
+
+onUnmounted(() => {
+  api.removeEventListener('status', onStatus)
+})
 </script>
 
 <style scoped>