✨ Favicon > Add favicon with notification

site/src/components/application/script.js

@@ -1,6 +1,7 @@
 import Connexion from '@/components/connexion'
 import ProjectsHub from '@/components/projects-hub'
 import Project from '@/components/project'
+import Favicon from '@/components/favicon'
 
 export default
 {
@@ -10,7 +11,8 @@ export default
     {
         Connexion,
         ProjectsHub,
-        Project
+        Project,
+        Favicon
     },
 
     computed:

site/src/components/application/template.html

@@ -2,6 +2,9 @@
     <!-- Connexion -->
     <connexion></connexion>
 
+    <!-- Favicon -->
+    <favicon></favicon>
+
     <!-- Header -->
     <a class="application-header" href="#" @click.prevent="onHeaderClick">
         <img class="element background" src="../../../static/svg/header-background.svg" alt="">

site/src/components/chat/script.js

@@ -6,8 +6,7 @@ export default
     {
         return {
             userName: '',
-            messageText: '',
-            unreadCount: 0
+            messageText: ''
         }
     },
 
@@ -36,6 +35,11 @@ export default
         scrollbarWidth()
         {
             return this.$store.state.scrollbarWidth
+        },
+
+        unreadCount()
+        {
+            return this.$store.state.chat.unreadCount
         }
     },
 
@@ -48,11 +52,6 @@ export default
 
         messages()
         {
-            if(!this.atBottom || !this.open)
-            {
-                this.unreadCount++
-            }
-
             window.requestAnimationFrame(() =>
             {
                 if(this.atBottom)
@@ -107,12 +106,6 @@ export default
         onHeaderClick()
         {
             this.$store.commit('toggleChat')
-
-            // Reset unread count
-            if(this.open)
-            {
-                this.unreadCount = 0
-            }
         },
 
         onUserNameChange()
@@ -167,12 +160,6 @@ export default
         onMessagesScroll()
         {
             this.atBottom = this.$messages.scrollTop + this.$messages.offsetHeight >= this.$innerMessages.offsetHeight - 15
-
-            // Reset unread count
-            if(this.atBottom)
-            {
-                this.unreadCount = 0
-            }
         },
 
         onQuestionRemoveClick()
@@ -204,7 +191,7 @@ export default
 
         scrollToBottom()
         {
-            this.$messages.scrollTop = this.$innerMessages.offsetHeight - this.$messages.offsetHeight + 10
+            this.$messages.scrollTop = this.$innerMessages.offsetHeight - this.$messages.offsetHeight + 15
         },
 
         formatMinutes(time)

site/src/components/favicon/index.vue

@@ -0,0 +1,3 @@
+<template src="./template.html"></template>
+<script src="./script.js"></script>
+<style src="./style.styl" lang="stylus" scoped></style>

site/src/components/favicon/script.js

@@ -0,0 +1,85 @@
+export default
+{
+    name: 'favicon',
+
+    computed:
+    {
+
+        chatUnreadCount()
+        {
+            return this.$store.state.chat.unreadCount
+        }
+    },
+
+    watch:
+    {
+        chatUnreadCount: 'onChatUnreadCountChange'
+    },
+
+    created()
+    {
+        this.$favicon = document.querySelector('.favicon')
+
+        this.size = 16 * window.devicePixelRatio
+        this.notifSize = 0.2
+
+        this.canvas = document.createElement('canvas')
+        this.canvas.width = this.size
+        this.canvas.height = this.size
+
+        this.context = this.canvas.getContext('2d')
+
+        this.image = new Image()
+
+        this.image.addEventListener('load', () =>
+        {
+            this.updateFavicon()
+        })
+
+        this.image.src = require('../../../static/images/favicon-32x32.png')
+    },
+
+    methods:
+    {
+        onChatUnreadCountChange()
+        {
+            this.updateFavicon()
+        },
+
+        updateFavicon()
+        {
+            // Clear
+            this.context.clearRect(0, 0, this.size, this.size)
+
+            // Draw image
+            this.context.drawImage(this.image, 0, 0, this.size, this.size)
+
+            // // Draw file notif
+            // this.context.beginPath()
+            // this.context.arc(this.size * (1 - this.notifSize), this.size * (1 - this.notifSize), this.size * this.notifSize, 0, Math.PI * 2)
+
+            // this.context.fillStyle = '#9B52F5'
+            // this.context.fill()
+
+            // this.context.strokeStyle = '#360079'
+            // this.context.stroke()
+
+            // Draw chat notif
+            if(this.chatUnreadCount > 0)
+            {
+                this.context.beginPath()
+                this.context.arc(this.size * (1 - this.notifSize), this.size * (1 - this.notifSize), this.size * this.notifSize, 0, Math.PI * 2)
+                // this.context.arc(this.size * (1 - this.notifSize * 2.25), this.size * (1 - this.notifSize), this.size * this.notifSize, 0, Math.PI * 2)
+
+                this.context.fillStyle = '#ff763d'
+                this.context.fill()
+
+                this.context.strokeStyle = '#ad1d3c'
+                this.context.stroke()
+            }
+
+            // Add to DOM
+            this.$favicon.setAttribute('href', this.canvas.toDataURL())
+        }
+    }
+}

site/src/components/favicon/template.html

@@ -0,0 +1,2 @@
+<div>
+</div>

site/src/store/modules/chat.js

@@ -7,7 +7,8 @@ export default {
         messages: [],
         pendingMessage: null,
         pendingAlert: null,
-        question: null
+        question: null,
+        unreadCount: 0
     },
 
     mutations:
@@ -16,6 +17,13 @@ export default {
         {
             state.messages.push(data)
 
+            // Add to unread count if not open or document is hidden (tab not active)
+            if(!state.open || document.hidden)
+            {
+                state.unreadCount++
+            }
+
+            // Clamp
             if(state.messages.length > 100)
             {
                 state.messages.splice(0, state.messages.length - 100)
@@ -50,6 +58,7 @@ export default {
 
         openChat(state)
         {
+            state.unreadCount = 0
             state.open = true
         },
 
@@ -60,6 +69,7 @@ export default {
 
         toggleChat(state)
         {
+            state.unreadCount = 0
             state.open = !state.open
         }
     }