feat(navigation): show notification badge on tab if it has news

src/components/TabMain.vue

@@ -14,6 +14,7 @@
     <tab-webview
       ref="webview"
       :item="item"
+      :is-active="isActive"
     />
   </div>
 </template>
@@ -44,6 +45,11 @@ export default {
   watch: {
     isActive(isActive) {
       if (isActive) {
+        this.$store.commit('Pages/setState', {
+          tabId: this.item.id,
+          data: { hasNotificationBadge: false },
+        });
+
         this.webview.focus();
       }
     },

src/components/TabWebview.vue

@@ -19,6 +19,15 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    isActive: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isLoaded: false,
+    };
   },
   computed: {
     muteOnWindowBlur() {
@@ -44,6 +53,14 @@ export default {
     },
   },
   mounted() {
+    this.webview.addEventListener('did-stop-loading', () => {
+      this.isLoaded = true;
+    });
+
+    this.webview.addEventListener('did-start-loading', () => {
+      this.isLoaded = false;
+    });
+
     this.webview.addEventListener('ipc-message', (event) => {
       if (event.channel !== 'notification') return;
 
@@ -54,6 +71,8 @@ export default {
         tabId: this.item.id,
       });
 
+      this.evaluateIfHasNotifications();
+
       if (!this.notificationsPreventOnBlur || this.windowHasFocus) {
         new Notification(notification.title, notification.options); // eslint-disable-line no-new
       }
@@ -64,6 +83,8 @@ export default {
         tabId: this.item.id,
         data: { title },
       });
+
+      this.evaluateIfHasNotifications();
     });
 
     this.webview.addEventListener('page-favicon-updated', ({ favicons }) => {
@@ -73,6 +94,8 @@ export default {
         tabId: this.item.id,
         data: { favicon },
       });
+
+      this.evaluateIfHasNotifications();
     });
 
     this.webview.addEventListener('dom-ready', (view) => {
@@ -92,6 +115,16 @@ export default {
       }
     });
   },
+  methods: {
+    evaluateIfHasNotifications() {
+      this.$store.commit('Pages/setState', {
+        tabId: this.item.id,
+        data: {
+          hasNotificationBadge: this.isLoaded && !this.isActive,
+        },
+      });
+    },
+  },
 };
 </script>
 

src/components/TabsNavItem.vue

@@ -5,6 +5,10 @@
     :active-class="$style.active"
     tag="button"
   >
+    <div
+      v-if="pageState.hasNotificationBadge"
+      :class="$style.badge"
+    />
     <div
       :class="{
         [$style.thumb]: true,
@@ -59,6 +63,11 @@ export default {
   @apply text-grey-light bg-grey-darkest shadow;
 }
 
+.badge {
+  @apply absolute pin-l w-2 h-2 bg-grey-darker rounded-full;
+  transform: translateX(-50%);
+}
+
 .thumb {
   @apply
     flex flex-no-shrink justify-center items-center

src/store/modules/Pages.js

@@ -12,7 +12,13 @@ export default {
     setState({ pages }, { tabId, data = {} }) {
       const pageIndex = pages.findIndex(page => page.tabId === tabId);
       const pageState = pages[pageIndex] || {};
-      const newState = { ...pageState, ...data };
+
+      const newState = {
+        title: '',
+        hasNotificationBadge: false,
+        ...pageState,
+        ...data,
+      };
 
       if (pageIndex !== -1) {
         this._vm.$set(pages, pageIndex, newState);