Take back emojis and other small tweaks

web/static/css/bulma-prefers-dark.css

@@ -19,6 +19,11 @@
     background-color: rgba(15, 129, 204, 0.25) !important;
   }
 
+  .tag.is-success {
+    background-color: #15241d !important;
+    color: #85dfb6 !important;
+  }
+
   .has-text-dark {
     /* note: this css file otherwise didn't override this, dark's always dark, brighten it! */
     color: #b5b5b5 !important;

web/static/css/chat.css

@@ -76,7 +76,7 @@ body {
 .autoscroll-field {
     position: absolute;
     z-index: 39; /* just below modal shadow */
-    right: 6px;
+    right: 12px;
     bottom: 4px;
 }
 

web/static/js/BareRTC.js

@@ -65,9 +65,9 @@ const app = Vue.createApp({
                 },
                 reactions: [
                     ['❤️', '👍', '😂', '😉', '😢', '😡', '🥰'],
-                    ['😏', '🔥', '😈', '🍑', '🍆', '💦', '🍌'],
+                    ['👋', '🔥', '😈', '🍑', '🍆', '💦', '🍌'],
                     ['😋', '⭐', '😇', '😴', '😱', '👀', '🎃'],
-                    ['🙈', '🙉', '🙊', '☀️', '🌈', '✨', '🎂']
+                    ['😏', '🙈', '🙉', '🙊', '☀️', '🌈', '🎂']
                 ]
             },
 
@@ -425,9 +425,22 @@ const app = Vue.createApp({
                 this.messageReactions[msgID][emoji] = [];
             }
 
-            // don't count double reactions of same emoji from same chatter
-            for (let reactor of this.messageReactions[msgID][emoji]) {
-                if (reactor === who) return;
+            // if they double sent the same reaction, it counts as a removal
+            let unreact = false;
+            for (let i = 0; i < this.messageReactions[msgID][emoji].length; i++) {
+                let reactor = this.messageReactions[msgID][emoji][i];
+                if (reactor === who) {
+                    this.messageReactions[msgID][emoji].splice(i, 1);
+                    unreact = true;
+                }
+            }
+
+            // if this emoji reaction is empty, clean it up
+            if (unreact) {
+                if (this.messageReactions[msgID][emoji].length === 0) {
+                    delete(this.messageReactions[msgID][emoji]);
+                }
+                return;
             }
 
             this.messageReactions[msgID][emoji].push(who);
@@ -489,6 +502,13 @@ const app = Vue.createApp({
             username = this.normalizeUsername(username);
             let mute = this.muted[username] == undefined;
             if (mute) {
+                if (!window.confirm(
+                    `Do you want to mute ${username}? If muted, you will no longer see their `+
+                    `chat messages or any DMs they send you going forward. Also, ${username} will `+
+                    `not be able to see whether your webcam is active until you unmute them.`
+                )) {
+                    return;
+                }
                 this.muted[username] = true;
             } else {
                 delete this.muted[username];
@@ -1055,6 +1075,17 @@ const app = Vue.createApp({
             if (!this.hasReactions(msg)) return [];
             return this.messageReactions[msg.msgID];
         },
+        iReacted(msg, emoji) {
+            // test whether the current user has reacted
+            if (this.messageReactions[msg.msgID] != undefined && this.messageReactions[msg.msgID][emoji] != undefined) {
+                for (let reactor of this.messageReactions[msg.msgID][emoji]) {
+                    if (reactor === this.username) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        },
 
         activeChannels() {
             // List of current channels, unread indicators etc.

web/templates/chat.html

@@ -921,6 +921,7 @@
                                     <div v-if="hasReactions(msg)" class="mt-1">
                                         <span v-for="(users, emoji) in getReactions(msg)"
                                             class="tag is-secondary mr-1 cursor-pointer"
+                                            :class="{'is-success is-light': iReacted(msg, emoji), 'is-secondary': !iReacted(msg, emoji)}"
                                             :title="emoji + ' by: ' + users.join(', ')"
                                             @click="sendReact(msg, emoji)">
                                             [[emoji]] <small class="ml-1">[[users.length]]</small>