From 2cff2a340fbde0c284fa6be9a8dbcdbbf5ad48be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Sat, 17 Jul 2021 12:38:12 +0200
Subject: [PATCH] show badge on new messages.

---
 README.md                        |  1 +
 client/src/components/header.vue | 49 ++++++++++++++++++++++++++++++++
 client/src/store/chat.ts         |  6 ++++
 3 files changed, 56 insertions(+)

diff --git a/README.md b/README.md
index a701a3c4..71d40fac 100644
--- a/README.md
+++ b/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.
diff --git a/client/src/components/header.vue b/client/src/components/header.vue
index 1f5977d7..7c8b59e1 100644
--- a/client/src/components/header.vue
+++ b/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() {
diff --git a/client/src/store/chat.ts b/client/src/store/chat.ts
index 2ca5da96..7441db7f 100644
--- a/client/src/store/chat.ts
+++ b/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
   },
 })