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

@@ -38,6 +38,10 @@
     color: #56cf98 !important;
   }
 
+  .has-background-dm {
+    background-color: #100010 !important;
+  }
+
   /* end nonshy custom overrides */
 
   html {

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;
 }
 

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() {
+        scrollHistory(channel, force) {
-            if (!this.autoscroll) return;
+            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',

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,6 +724,8 @@
                         </label>
                     </div>
 
+                    <div :class="fontSizeClass">
+
                         <!-- No history? -->
                         <div v-if="chatHistory.length === 0">
                             <em v-if="isDM">
@@ -775,14 +778,14 @@
                                     <div class="media-content">
                                         <div class="columns is-mobile pb-0">
                                             <div class="column is-narrow pb-0">
-                                            <label class="label"
+                                                <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)]]
-                                            </label>
+                                                </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>
@@ -853,6 +856,8 @@
 
                         </div>
 
+                    </div>
+
                     <!-- If this is a DM with a muted user, offer to unmute. -->
                     <div v-if="isDM && isMutedUser(channel)" class="has-text-danger">
                         <i class="fa fa-comment-slash"></i>
@@ -948,6 +953,9 @@
                             <div class="columns is-mobile">
                                 <!-- Avatar URL if available -->
                                 <div class="column is-narrow pr-0" style="position: relative">
+                                    <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">
@@ -958,6 +966,7 @@
                                         <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}">