show badge on new messages.

README.md

@@ -50,6 +50,7 @@ For n.eko room management software visit https://github.com/m1k1o/neko-rooms.
 - Support for password protected `NEKO_ICESERVERS` (by @mbattista).
 - Added bunch of translations (🇸🇰, 🇪🇸, 🇸🇪, 🇳🇴, 🇫🇷) by various people.
 - Added `m1k1o/neko:google-chrome` tag.
+- Show red dot badge on sidebar toggle if there are new messages, and user can't see them.
 
 ### Bugs
 - Fixed minor gst pipeline bug.

client/src/components/header.vue

@@ -25,6 +25,7 @@
         />
       </li>
       <li>
+        <span v-if="showBadge" class="badge">&bull;</span>
         <i class="fas fa-bars toggle" @click="toggleMenu" />
       </li>
     </ul>
@@ -94,6 +95,40 @@
         .toggle {
           background: $background-primary;
         }
+
+        .badge {
+          position: absolute;
+          background: red;
+          font-weight: bold;
+          font-size: 1.25em;
+          border-radius: 50%;
+          width: 20px;
+          height: 20px;
+          text-align: center;
+          line-height: 20px;
+          pointer-events: none;
+
+          transform: translate(-50%, -25%) scale(1);
+          box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
+          animation: badger-pulse 2s infinite;
+        }
+
+        @keyframes badger-pulse {
+          0% {
+            transform: translate(-50%, -25%) scale(0.85);
+            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
+          }
+
+          70% {
+            transform: translate(-50%, -25%) scale(1);
+            box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
+          }
+
+          100% {
+            transform: translate(-50%, -25%) scale(0.85);
+            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+          }
+        }
       }
     }
   }
@@ -112,8 +147,22 @@
       return this.$accessor.locked
     }
 
+    get side() {
+      return this.$accessor.client.side
+    }
+
+    get texts() {
+      return this.$accessor.chat.texts
+    }
+
+    get showBadge() {
+      return !this.side && this.readTexts != this.texts
+    }
+
+    readTexts: number = 0
     toggleMenu() {
       this.$accessor.client.toggleSide()
+      this.readTexts = this.texts
     }
 
     toggleLock() {

client/src/store/chat.ts

@@ -23,6 +23,7 @@ interface Message {
 export const state = () => ({
   history: [] as Message[],
   emotes: {} as Emotes,
+  texts: 0,
 })
 
 export const getters = getterTree(state, {
@@ -31,6 +32,10 @@ export const getters = getterTree(state, {
 
 export const mutations = mutationTree(state, {
   addMessage(state, message: Message) {
+    if (message.type == 'text') {
+      state.texts++
+    }
+
     state.history = state.history.concat([message])
   },
 
@@ -52,6 +57,7 @@ export const mutations = mutationTree(state, {
   reset(state) {
     state.emotes = {}
     state.history = []
+    state.texts = 0
   },
 })