From 50d7aea39df46f709f99efb4bb41ba838acce941 Mon Sep 17 00:00:00 2001
From: Noah Petherbridge <root@kirsle.net>
Date: Sun, 11 Jun 2023 20:33:26 -0700
Subject: [PATCH] Chat style updates

---
 web/static/css/bulma-prefers-dark.css |   5 +
 web/static/js/BareRTC.js              |  31 +++--
 web/templates/chat.html               | 191 +++++++++++++++-----------
 3 files changed, 134 insertions(+), 93 deletions(-)

diff --git a/web/static/css/bulma-prefers-dark.css b/web/static/css/bulma-prefers-dark.css
index bd36ab0..39f9e93 100644
--- a/web/static/css/bulma-prefers-dark.css
+++ b/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 {
diff --git a/web/static/js/BareRTC.js b/web/static/js/BareRTC.js
index eabebd3..3449975 100644
--- a/web/static/js/BareRTC.js
+++ b/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,25 +491,29 @@ 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.
-            for (let channel of this.config.channels) {
-                this.pushHistory({
-                    channel: channel.ID,
-                    action: msg.action,
-                    username: msg.username,
-                    message: msg.message,
-                });
+            // 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,
+                        action: msg.action,
+                        username: msg.username,
+                        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;
             }
 
diff --git a/web/templates/chat.html b/web/templates/chat.html
index b6ddf74..b367714 100644
--- a/web/templates/chat.html
+++ b/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,97 +733,120 @@
                         </em>
                     </div>
 
-                    <div v-for="(msg, i) in chatHistory" v-bind:key="i" 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})"
-                                    :class="{'cursor-default': !profileURLForUsername(msg.username)}">
-                                    <figure class="image is-48x48">
-                                        <img v-if="msg.isChatServer"
-                                            src="/static/img/server.png">
-                                        <img v-else-if="msg.isChatClient"
-                                            src="/static/img/client.png">
-                                        <img v-else-if="avatarForUsername(msg.username)"
+                    <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>
-                                </a>
-                            </div>
-                            <div class="media-content">
-                                <div class="columns is-mobile pb-0">
-                                    <div class="column is-narrow pb-0">
-                                        <label class="label"
-                                            :class="{'has-text-success is-dark': msg.isChatServer,
-                                                    'has-text-warning is-dark': msg.isAdmin,
-                                                    'has-text-danger': msg.isChatClient}">
-
-                                            <!-- User nickname/display name -->
-                                            [[nicknameForUsername(msg.username)]]
-                                        </label>
-                                    </div>
-                                    <div class="column has-text-right pb-0">
-                                        <small class="has-text-grey is-size-7" :title="msg.at">[[prettyDate(msg.at)]]</small>
-                                    </div>
                                 </div>
-
-                                <!-- User @username below it which may link to a profile URL if JWT -->
-                                <div class="columns is-mobile pt-0" v-if="(msg.isChatClient || msg.isChatServer)">
-                                    <div class="column is-narrow pt-0">
-                                        <small v-if="!(msg.isChatClient || msg.isChatServer)">
-                                            <a v-if="profileURLForUsername(msg.username)"
-                                                :href="profileURLForUsername(msg.username)"
-                                                target="_blank"
-                                                class="has-text-grey">
-                                                @[[msg.username]]
-                                            </a>
-                                            <span v-else class="has-text-grey">@[[msg.username]]</span>
-                                        </small>
-                                        <small v-else class="has-text-grey">internal</small>
-                                    </div>
-                                </div>
-                                <div v-else class="columns is-mobile pt-0">
-                                    <div class="column is-narrow pt-0">
-                                        <small v-if="!(msg.isChatClient || msg.isChatServer)">
-                                            <a v-if="profileURLForUsername(msg.username)"
-                                                :href="profileURLForUsername(msg.username)"
-                                                target="_blank"
-                                                class="has-text-grey">
-                                                @[[msg.username]]
-                                            </a>
-                                            <span v-else class="has-text-grey">@[[msg.username]]</span>
-                                        </small>
-                                        <small v-else class="has-text-grey">internal</small>
-                                    </div>
-
-                                    <div class="column is-narrow px-1 pt-0"
-                                        v-if="!(msg.username === username || isDM)">
-                                        <!-- DMs button -->
-                                        <button type="button"
-                                            class="button is-grey is-outlined is-small px-2"
-                                            @click="openDMs({username: msg.username})">
-                                            <i class="fa fa-message"></i>
-                                        </button>
-                                    </div>
-                                    <div class="column is-narrow pl-1 pt-0"
-                                        v-if="!(msg.username === username)">
-                                        <!-- Mute button -->
-                                        <button type="button"
-                                            class="button is-grey is-outlined is-small px-2"
-                                            @click="muteUser(msg.username)"
-                                            title="Mute user">
-                                            <i class="fa fa-comment-slash"
-                                                :class="{'has-text-success': isMutedUser(msg.username),
-                                                        'has-text-danger': !isMutedUser(msg.username)}"></i>
-                                        </button>
-                                    </div>
+                                <div class="column">
+                                    <strong>[[ msg.username ]]</strong> [[msg.message]]
                                 </div>
                             </div>
+
                         </div>
 
-                        <!-- Message box -->
-                        <div class="content pl-5 py-3 mb-0">
-                            <em v-if="msg.action === 'presence'">[[msg.message]]</em>
-                            <div v-else v-html="msg.message"></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})"
+                                        :class="{'cursor-default': !profileURLForUsername(msg.username)}">
+                                        <figure class="image is-48x48">
+                                            <img v-if="msg.isChatServer"
+                                                src="/static/img/server.png">
+                                            <img v-else-if="msg.isChatClient"
+                                                src="/static/img/client.png">
+                                            <img v-else-if="avatarForUsername(msg.username)"
+                                                :src="avatarForUsername(msg.username)">
+                                            <img v-else src="/static/img/shy.png">
+                                        </figure>
+                                    </a>
+                                </div>
+                                <div class="media-content">
+                                    <div class="columns is-mobile pb-0">
+                                        <div class="column is-narrow pb-0">
+                                            <label class="label"
+                                                :class="{'has-text-success is-dark': msg.isChatServer,
+                                                        'has-text-warning is-dark': msg.isAdmin,
+                                                        'has-text-danger': msg.isChatClient}">
+
+                                                <!-- User nickname/display name -->
+                                                [[nicknameForUsername(msg.username)]]
+                                            </label>
+                                        </div>
+                                        <div class="column has-text-right pb-0">
+                                            <small class="has-text-grey is-size-7" :title="msg.at">[[prettyDate(msg.at)]]</small>
+                                        </div>
+                                    </div>
+
+                                    <!-- User @username below it which may link to a profile URL if JWT -->
+                                    <div class="columns is-mobile pt-0" v-if="(msg.isChatClient || msg.isChatServer)">
+                                        <div class="column is-narrow pt-0">
+                                            <small v-if="!(msg.isChatClient || msg.isChatServer)">
+                                                <a v-if="profileURLForUsername(msg.username)"
+                                                    :href="profileURLForUsername(msg.username)"
+                                                    target="_blank"
+                                                    class="has-text-grey">
+                                                    @[[msg.username]]
+                                                </a>
+                                                <span v-else class="has-text-grey">@[[msg.username]]</span>
+                                            </small>
+                                            <small v-else class="has-text-grey">internal</small>
+                                        </div>
+                                    </div>
+                                    <div v-else class="columns is-mobile pt-0">
+                                        <div class="column is-narrow pt-0">
+                                            <small v-if="!(msg.isChatClient || msg.isChatServer)">
+                                                <a v-if="profileURLForUsername(msg.username)"
+                                                    :href="profileURLForUsername(msg.username)"
+                                                    target="_blank"
+                                                    class="has-text-grey">
+                                                    @[[msg.username]]
+                                                </a>
+                                                <span v-else class="has-text-grey">@[[msg.username]]</span>
+                                            </small>
+                                            <small v-else class="has-text-grey">internal</small>
+                                        </div>
+
+                                        <div class="column is-narrow px-1 pt-0"
+                                            v-if="!(msg.username === username || isDM)">
+                                            <!-- DMs button -->
+                                            <button type="button"
+                                                class="button is-grey is-outlined is-small px-2"
+                                                @click="openDMs({username: msg.username})">
+                                                <i class="fa fa-message"></i>
+                                            </button>
+                                        </div>
+                                        <div class="column is-narrow pl-1 pt-0"
+                                            v-if="!(msg.username === username)">
+                                            <!-- Mute button -->
+                                            <button type="button"
+                                                class="button is-grey is-outlined is-small px-2"
+                                                @click="muteUser(msg.username)"
+                                                title="Mute user">
+                                                <i class="fa fa-comment-slash"
+                                                    :class="{'has-text-success': isMutedUser(msg.username),
+                                                            'has-text-danger': !isMutedUser(msg.username)}"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Message box -->
+                            <div class="content pl-5 py-3 mb-0">
+                                <em v-if="msg.action === 'presence'">[[msg.message]]</em>
+                                <div v-else v-html="msg.message"></div>
+                            </div>
+
                         </div>
 
                     </div>