UI: Add favicon unread message counter

package-lock.json

@@ -13,6 +13,7 @@
         "bootstrap-icons": "^1.9.1",
         "moment": "^2.29.4",
         "prismjs": "^1.29.0",
+        "tinycon": "^0.6.8",
         "vue": "^3.2.13"
       },
       "devDependencies": {
@@ -1124,6 +1125,11 @@
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
     },
+    "node_modules/tinycon": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/tinycon/-/tinycon-0.6.8.tgz",
+      "integrity": "sha512-bF8Lxm4JUXF6Cw0XlZdugJ44GV575OinZ0Pt8vQPr8ooNqd2yyNkoFdCHzmdpHlgoqfSLfcyk4HDP1EyllT+ug=="
+    },
     "node_modules/tmp": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@@ -1902,6 +1908,11 @@
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
     },
+    "tinycon": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/tinycon/-/tinycon-0.6.8.tgz",
+      "integrity": "sha512-bF8Lxm4JUXF6Cw0XlZdugJ44GV575OinZ0Pt8vQPr8ooNqd2yyNkoFdCHzmdpHlgoqfSLfcyk4HDP1EyllT+ug=="
+    },
     "tmp": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",

package.json

@@ -13,6 +13,7 @@
     "bootstrap-icons": "^1.9.1",
     "moment": "^2.29.4",
     "prismjs": "^1.29.0",
+    "tinycon": "^0.6.8",
     "vue": "^3.2.13"
   },
   "devDependencies": {

server/ui-src/App.vue

@@ -1,7 +1,8 @@
 <script>
-import commonMixins from './mixins.js'
+import commonMixins from './mixins.js';
 import Message from './templates/Message.vue';
-import moment from 'moment'
+import moment from 'moment';
+import Tinycon from 'tinycon';
 
 export default {
 	mixins: [commonMixins],
@@ -26,7 +27,8 @@ export default {
 			messageNext: false,
 			notificationsSupported: false,
 			notificationsEnabled: false,
-			selected: []
+			selected: [],
+			tcStatus: 0
 		}
 	},
 	watch: {
@@ -36,6 +38,17 @@ export default {
 			} else {
 				this.message = false;
 			}
+		},
+		unread(v, old) {
+			if (v == this.tcStatus) {
+				return;
+			}
+			this.tcStatus = v;
+			if (v == 0) {
+				Tinycon.reset();
+			} else {
+				Tinycon.setBubble(v);
+			}
 		}
 	},
 	computed: {
@@ -56,6 +69,12 @@ export default {
 			&& ("Notification" in window && Notification.permission !== "denied");
 		this.notificationsEnabled = this.notificationsSupported && Notification.permission == "granted";
 
+		Tinycon.setOptions({
+			height: 11,
+			background: '#dd0000',
+			fallback: false
+		});
+
 		this.connect();
 		this.loadMessages();
 	},
@@ -192,6 +211,7 @@ export default {
 			let self = this;
 			let uri = 'api/delete'
 			self.get(uri, false, function(response) {
+				window.location.hash = "";
 				self.reloadMessages();
 			});
 		},
@@ -206,7 +226,6 @@ export default {
 				window.location.hash = "";
 				self.scrollInPlace = true;
 				self.loadMessages();
-
 			});
 		},
 
@@ -388,6 +407,12 @@ export default {
 
 			let selecting = false;
 			let lastSelected = this.selected.length > 0 && this.selected[this.selected.length - 1];
+			if (lastSelected == id) {
+				this.selected =  this.selected.filter(function(ele){ 
+					return ele != id; 
+				});
+				return
+			}
 
 			if (lastSelected === false) {
 				this.selected.push(id);