Chat style updates

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

@@ -33,6 +33,11 @@
     background-color: rgba(0, 0, 0, 0.86) !important;
   }
 
+  .notification.is-success.is-light {
+    background-color: #232e29 !important;
+    color: #56cf98 !important;
+  }
+
   /* end nonshy custom overrides */
 
   html {

web/static/js/BareRTC.js

@@ -215,6 +215,9 @@ const app = Vue.createApp({
         window.addEventListener("click", () => {
             this.setupSounds();
         });
+        window.addEventListener("keydown", () => {
+            this.setupSounds();
+        });
 
         for (let channel of this.config.channels) {
             this.initHistory(channel.ID);
@@ -488,15 +491,18 @@ const app = Vue.createApp({
         // User logged in or out.
         onPresence(msg) {
             // TODO: make a dedicated leave event
+            let isLeave = false;
             if (msg.message.indexOf("has exited the room!") > -1) {
                 // Clean up data about this user.
                 this.onUserExited(msg);
                 this.playSound("Leave");
+                isLeave = true;
             } else {
                 this.playSound("Enter");
             }
 
-            // Push it to the history of all public channels.
+            // Push it to the history of all public channels (not leaves).
+            if (!isLeave) {
                 for (let channel of this.config.channels) {
                     this.pushHistory({
                         channel: channel.ID,
@@ -505,8 +511,9 @@ const app = Vue.createApp({
                         message: msg.message,
                     });
                 }
+            }
 
-            // Push also to any DM channels for this user.
+            // Push also to any DM channels for this user (leave events do push to DM thread for visibility).
             let channel = "@" + msg.username;
             if (this.channels[channel] != undefined) {
                 this.pushHistory({
@@ -896,6 +903,9 @@ const app = Vue.createApp({
                 if (nick) {
                     return nick;
                 }
+            } else if (this.whoMap[username] == undefined && username !== 'ChatServer' && username !== 'ChatClient') {
+                // User is not even logged in! Add this note to their name
+                username += " (offline)";
             }
             return username;
         },
@@ -1468,6 +1478,9 @@ const app = Vue.createApp({
             // allow it to set up the AudioContext. If we've successfully set one up before, exit
             // this function immediately.
             if (this.config.sounds.audioContext) {
+                if (this.config.sounds.audioContext.state === 'suspended') {
+                    this.config.sounds.audioContext.resume();
+                }
                 return;
             }
 

web/templates/chat.html

@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="/static/css/bulma.min.css">
-    <link rel="stylesheet" type="text/css" href="/static/css/bulma-prefers-dark.css">
+    <link rel="stylesheet" type="text/css" href="/static/css/bulma-prefers-dark.css?{{.CacheHash}}">
     <link rel="stylesheet" href="/static/fontawesome-free-6.1.2-web/css/all.css">
     <link rel="stylesheet" type="text/css" href="/static/css/chat.css?{{.CacheHash}}">
     <title>{{.Config.Title}}</title>
@@ -733,7 +733,28 @@
                         </em>
                     </div>
 
-                    <div v-for="(msg, i) in chatHistory" v-bind:key="i" class="box mb-2 px-4 pt-3 pb-1">
+                    <div v-for="(msg, i) in chatHistory" v-bind:key="i">
+                        <!-- Enter chat presence messages draw as a short banner -->
+                        <div v-if="msg.action === 'presence'" class="notification is-success is-light py-1 px-3 mb-2">
+
+                            <!-- Tiny avatar next to name and action buttons -->
+                            <div class="columns is-mobile">
+                                <div class="column is-narrow pr-0 pt-4">
+                                    <figure class="image is-16x16">
+                                        <img v-if="avatarForUsername(msg.username)"
+                                            :src="avatarForUsername(msg.username)">
+                                        <img v-else src="/static/img/shy.png">
+                                    </figure>
+                                </div>
+                                <div class="column">
+                                    <strong>[[ msg.username ]]</strong> [[msg.message]]
+                                </div>
+                            </div>
+
+                        </div>
+
+                        <!-- Normal chat message: full size card w/ avatar -->
+                        <div v-else class="box mb-2 px-4 pt-3 pb-1">
                             <div class="media mb-0">
                                 <div class="media-left">
                                     <a :href="profileURLForUsername(msg.username)" @click.prevent="openProfile({username: msg.username})"
@@ -829,6 +850,8 @@
                         </div>
 
                     </div>
+
+                </div>
             </div>
         </div>