From a797bc45dac447b054d0d6a39d40d04820ac390a Mon Sep 17 00:00:00 2001
From: Noah Petherbridge <root@kirsle.net>
Date: Sat, 24 Jun 2023 11:12:02 -0700
Subject: [PATCH] Spit and polish

* Add a distinctly colored title and background for DM threads apart
  from the public channels
* On the Who List, the profile picture is clickable to open profile
  links
* Fix auto-scrolling issues: it won't autoscroll if the new message was
  in a different channel, and when toggling between channels always
  scroll back to the bottom of that channel
---
 web/static/css/bulma-prefers-dark.css |   6 +-
 web/static/css/chat.css               |  18 +-
 web/static/js/BareRTC.js              |  13 +-
 web/templates/chat.html               | 257 +++++++++++++-------------
 4 files changed, 159 insertions(+), 135 deletions(-)

diff --git a/web/static/css/bulma-prefers-dark.css b/web/static/css/bulma-prefers-dark.css
index 39f9e93..d618f8a 100644
--- a/web/static/css/bulma-prefers-dark.css
+++ b/web/static/css/bulma-prefers-dark.css
@@ -38,6 +38,10 @@
     color: #56cf98 !important;
   }
 
+  .has-background-dm {
+    background-color: #100010 !important;
+  }
+
   /* end nonshy custom overrides */
 
   html {
@@ -8818,4 +8822,4 @@
   }
 }
 
-/*# sourceMappingURL=bulma-prefers-dark.css.map */
\ No newline at end of file
+/*# sourceMappingURL=bulma-prefers-dark.css.map */
diff --git a/web/static/css/chat.css b/web/static/css/chat.css
index 45990da..ac0d6d0 100644
--- a/web/static/css/chat.css
+++ b/web/static/css/chat.css
@@ -19,6 +19,14 @@ body {
     overflow: hidden !important;
 }
 
+/* DM title and bg color */
+.has-background-private {
+    background-color: #b748c7;
+}
+.has-background-dm {
+    background-color: #ffefff;
+}
+
 /************************
  * Main CSS Grid Layout *
  ************************/
@@ -149,16 +157,16 @@ body {
 }
 
 /* User configurable font size increases */
-#chatHistory.x1 {
+#chatHistory .x1 {
     font-size: large;
 }
-#chatHistory.x2 {
+#chatHistory .x2 {
     font-size: x-large;
 }
-#chatHistory.x3 {
+#chatHistory .x3 {
     font-size: xx-large;
 }
-#chatHistory.x4 {
+#chatHistory .x4 {
     font-size: 64pt;
 }
 
@@ -265,4 +273,4 @@ div.feed.popped-out {
 /* Cursors */
 .cursor-notallowed {
     cursor: not-allowed;
-}
\ No newline at end of file
+}
diff --git a/web/static/js/BareRTC.js b/web/static/js/BareRTC.js
index e043cf1..3daa317 100644
--- a/web/static/js/BareRTC.js
+++ b/web/static/js/BareRTC.js
@@ -852,7 +852,7 @@ const app = Vue.createApp({
         // Set active chat room.
         setChannel(channel) {
             this.channel = typeof(channel) === "string" ? channel : channel.ID;
-            this.scrollHistory();
+            this.scrollHistory(this.channel, true);
             this.channels[this.channel].unread = 0;
 
             // Responsive CSS: switch back to chat panel upon selecting a channel.
@@ -1376,7 +1376,7 @@ const app = Vue.createApp({
                 isChatServer,
                 isChatClient,
             });
-            this.scrollHistory();
+            this.scrollHistory(channel);
 
             // Mark unread notifiers if this is not our channel.
             if (this.channel !== channel) {
@@ -1390,10 +1390,13 @@ const app = Vue.createApp({
             this.makeLinksExternal();
         },
 
-        scrollHistory() {
-            if (!this.autoscroll) return;
+        scrollHistory(channel, force) {
+            if (!this.autoscroll && !force) return;
 
             window.requestAnimationFrame(() => {
+                // Only scroll if it's the current channel.
+                if (channel !== this.channel) return;
+
                 this.historyScrollbox.scroll({
                     top: this.historyScrollbox.scrollHeight,
                     behavior: 'smooth',
@@ -1621,4 +1624,4 @@ const app = Vue.createApp({
     }
 });
 
-app.mount("#BareRTC-App");
\ No newline at end of file
+app.mount("#BareRTC-App");
diff --git a/web/templates/chat.html b/web/templates/chat.html
index 2d61587..4b01942 100644
--- a/web/templates/chat.html
+++ b/web/templates/chat.html
@@ -563,7 +563,8 @@
         <div class="chat-column">
 
             <div class="card grid-card">
-                <header class="card-header has-background-link">
+                <header class="card-header"
+                    :class="{'has-background-private': isDM, 'has-background-link': !isDM}">
                     <div class="columns is-mobile card-header-title has-text-light">
                         <div class="column is-narrow mobile-only pr-0">
                             <!-- Responsive mobile button to pan to Left Column -->
@@ -712,7 +713,7 @@
                     -->
 
                 </div>
-                <div class="card-content" id="chatHistory" :class="fontSizeClass">
+                <div class="card-content" id="chatHistory" :class="{'has-background-dm': isDM}">
 
                     <div class="autoscroll-field tag">
                         <label class="checkbox is-size-6" title="Automatically scroll when new chat messages come in.">
@@ -723,130 +724,134 @@
                         </label>
                     </div>
 
-                    <!-- No history? -->
-                    <div v-if="chatHistory.length === 0">
-                        <em v-if="isDM">
-                            Starting a direct message chat with [[channel]]. Type a message and say hello!
-                        </em>
-                        <em v-else>
-                            There are no messages in this channel yet.
-                        </em>
-                    </div>
-
-                    <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>[[ nicknameForUsername(msg.username) ]]</strong>
-                                    <small v-if="isUsernameOnline(msg.username)" class="ml-1">(@[[msg.username]])</small>
-                                    [[msg.message]]
-                                </div>
-                            </div>
+                    <div :class="fontSizeClass">
 
+                        <!-- No history? -->
+                        <div v-if="chatHistory.length === 0">
+                            <em v-if="isDM">
+                                Starting a direct message chat with [[channel]]. Type a message and say hello!
+                            </em>
+                            <em v-else>
+                                There are no messages in this channel yet.
+                            </em>
                         </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)"
+                        <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>[[ nicknameForUsername(msg.username) ]]</strong>
+                                        <small v-if="isUsernameOnline(msg.username)" class="ml-1">(@[[msg.username]])</small>
+                                        [[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">
+                                                <strong
+                                                    :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)]]
+                                                </strong>
+                                            </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>
@@ -948,16 +953,20 @@
                             <div class="columns is-mobile">
                                 <!-- Avatar URL if available -->
                                 <div class="column is-narrow pr-0" style="position: relative">
-                                    <img v-if="u.avatar" :src="avatarURL(u)"
-                                        width="24" height="24"
-                                        :alt="'Avatar image for ' + u.username">
-                                    <img v-else src="/static/img/shy.png"
-                                        width="24" height="24">
+                                    <a :href="profileURLForUsername(u.username)" @click.prevent="openProfile({username: u.username})"
+                                        :class="{'cursor-default': !profileURLForUsername(u.username)}"
+                                        class="p-0">
+                                        <img v-if="u.avatar" :src="avatarURL(u)"
+                                            width="24" height="24"
+                                            :alt="'Avatar image for ' + u.username">
+                                        <img v-else src="/static/img/shy.png"
+                                            width="24" height="24">
 
-                                    <!-- Away symbol -->
-                                    <div v-if="u.status !== 'online'" class="status-away-icon" :title="'Status: '+u.status">
-                                        <i class="fa fa-clock has-text-light"></i>
-                                    </div>
+                                        <!-- Away symbol -->
+                                        <div v-if="u.status !== 'online'" class="status-away-icon" :title="'Status: '+u.status">
+                                            <i class="fa fa-clock has-text-light"></i>
+                                        </div>
+                                    </a>
                                 </div>
                                 <div class="column pr-0"
                                     :class="{'pl-1': u.avatar}">