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

* remove listener

* Store pending task count

* Add iconBadge to queue icon

src/components/sidebar/SideBarIcon.vue

@@ -1,6 +1,5 @@
 <template>
   <Button
-    :icon="props.icon"
     :class="props.class"
     text
     :pt="{
@@ -8,16 +7,24 @@
         props.selected
           ? 'p-button-primary side-bar-button-selected'
           : 'p-button-secondary'
-      }`,
-      icon: 'side-bar-button-icon'
+      }`
     }"
     @click="emit('click', $event)"
     v-tooltip="{ value: props.tooltip, showDelay: 300, hideDelay: 300 }"
-  />
+  >
+    <template #icon>
+      <OverlayBadge v-if="shouldShowBadge" :value="overlayValue">
+        <i :class="props.icon + ' side-bar-button-icon'" />
+      </OverlayBadge>
+      <i v-else :class="props.icon + ' side-bar-button-icon'" />
+    </template>
+  </Button>
 </template>
 
 <script setup lang="ts">
+import OverlayBadge from 'primevue/overlaybadge'
 import Button from 'primevue/button'
+import { computed, PropType } from 'vue' // Add this line to import PropsType
 
 const props = defineProps({
   icon: String,
@@ -29,18 +36,28 @@ const props = defineProps({
   class: {
     type: String,
     default: ''
+  },
+  iconBadge: {
+    type: [String, Function] as PropType<string | (() => string | null)>,
+    default: ''
   }
 })
 
 const emit = defineEmits(['click'])
+const overlayValue = computed(() =>
+  typeof props.iconBadge === 'function'
+    ? props.iconBadge() || ''
+    : props.iconBadge
+)
+const shouldShowBadge = computed(() => !!overlayValue.value)
 </script>
 
 <style>
-.p-button-icon.side-bar-button-icon {
+.side-bar-button-icon {
   font-size: var(--sidebar-icon-size) !important;
 }
 
-.side-bar-button-selected .p-button-icon.side-bar-button-icon {
+.side-bar-button-selected .side-bar-button-icon {
   font-size: var(--sidebar-icon-size) !important;
   font-weight: bold;
 }

src/components/sidebar/SideToolBar.vue

@@ -5,6 +5,7 @@
         v-for="tab in tabs"
         :key="tab.id"
         :icon="tab.icon"
+        :iconBadge="tab.iconBadge"
         :tooltip="tab.tooltip"
         :selected="tab === selectedTab"
         :class="tab.id + '-tab-button'"

src/components/sidebar/tabs/QueueSideBarTab.vue

@@ -83,7 +83,7 @@ import {
   TaskItemImpl,
   useQueueStore
 } from '@/stores/queueStore'
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, onUnmounted } from 'vue'
 import { api } from '@/scripts/api'
 
 const confirm = useConfirm()
@@ -145,13 +145,16 @@ const confirmRemoveAll = (event) => {
     }
   })
 }
+
+const onStatus = () => queueStore.update()
 onMounted(() => {
-  api.addEventListener('status', () => {
-    queueStore.update()
-  })
+  api.addEventListener('status', onStatus)
 
   queueStore.update()
 })
+onUnmounted(() => {
+  api.removeEventListener('status', onStatus)
+})
 </script>
 
 <style>