Add header section to DM chat views

internal/webserver/static/icons/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-4qtqp9 r-yyyyoo r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-z80fyv r-19wmn03" style="color: rgb(239, 243, 244);"><g><path d="M13.5 8.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5S11.17 7 12 7s1.5.67 1.5 1.5zM13 17v-5h-2v5h2zm-1 5.25c5.66 0 10.25-4.59 10.25-10.25S17.66 1.75 12 1.75 1.75 6.34 1.75 12 6.34 22.25 12 22.25zM20.25 12c0 4.56-3.69 8.25-8.25 8.25S3.75 16.56 3.75 12 7.44 3.75 12 3.75s8.25 3.69 8.25 8.25z"></path></g></svg>

internal/webserver/static/styles.css

@@ -1202,16 +1202,6 @@ main {
 		align-items: center;
 		justify-content: space-between;
 	}
-	.chat-list-entry__groupchat-profile-image {
-		display: flex;
-	}
-	.chat-list-entry__groupchat-profile-image .display-name {
-		padding: 0.6em;
-		font-style: italic;
-		font-weight: bold; /* TODO: redundancy check `.author-info__display-name` */
-		white-space: nowrap;
-		cursor: default; /* TODO: redundancy check `.author-info` */
-	}
 	.chat-list-entry__preview-and-unread-container {
 		justify-content: space-between;
 	}
@@ -1246,6 +1236,28 @@ main {
 	}
 }
 
+/**
+ * Groupchat info module (like Author Info but for group chats)
+ */
+.groupchat-info {
+	.groupchat-info__display-name {
+		padding: 0.6em;
+		font-style: italic;
+		font-weight: bold; /* TODO: redundancy check `.author-info__display-name` */
+		white-space: nowrap;
+		cursor: default; /* TODO: redundancy check `.author-info` */
+	}
+}
+
+.chat-header {
+    border-bottom: 1px solid var(--color-outline-gray);
+    padding: 0.5em;
+    display: flex;
+    justify-content: space-around;
+    background-color: var(--color-twitter-off-white);
+    margin: -0.5em -0.5em 0 -0.5em;
+}
+
 /**
  * DM message module
  */

internal/webserver/tpl/tweet_page_includes/chat_list_entry.tpl

@@ -7,23 +7,7 @@
     hx-target="body"
   >
     <div class="chat-list-entry__header">
-      {{if (eq $room.Type "ONE_TO_ONE")}}
+      {{template "chat-profile-image" $room}}
-        {{range $room.Participants}}
-          {{if (ne .UserID (active_user).ID)}}
-            <!-- This is some fuckery; I have no idea why "hx-target" is needed, but otherwise it targets the #chat-view. -->
-            <div class="click-eater" hx-trigger="click consume" hx-target="body">
-              {{template "author-info" (user .UserID)}}
-            </div>
-          {{end}}
-        {{end}}
-      {{else}}
-        <div class="chat-list-entry__groupchat-profile-image">
-          {{template "circle-profile-img-no-link" (dict "IsContentDownloaded" false "ProfileImageUrl" $room.AvatarImageRemoteURL)}}
-          <div class="click-eater" hx-trigger="click consume" hx-target="body">
-            <div class="display-name row">{{$room.Name}}</div>
-          </div>
-        </div>
-      {{end}}
       <div class="posted-at">
         <p class="posted-at__text">
           {{$room.LastMessagedAt.Time.Format "Jan 2, 2006"}}

internal/webserver/tpl/tweet_page_includes/chat_view.tpl

@@ -92,6 +92,18 @@
 
 {{define "chat-view"}}
   <div id="chat-view">
+    {{if $.ActiveRoomID}}
+      <div class="chat-header">
+        {{ $room := (index $.Rooms $.ActiveRoomID) }}
+        {{template "chat-profile-image" $room}}
+        {{if (ne $room.Type "ONE_TO_ONE")}}
+          <!-- Group chats need an "Info" button -->
+          <a class="button">
+            <img class="svg-icon" src="/static/icons/info.svg" width="24" height="24" />
+          </a>
+        {{end}}
+      </div>
+    {{end}}
     <div class="chat-messages">
       {{if $.ActiveRoomID}}
         {{template "messages-with-poller" .}}

internal/webserver/tpl/tweet_page_includes/single_tweet.tpl

@@ -156,7 +156,7 @@
         <div class="interactions__dummy"></div>
         <div class="row" hx-trigger="click consume">
           <a class="button" title="Copy link" onclick="navigator.clipboard.writeText('https://twitter.com/{{ $author.Handle }}/status/{{ $main_tweet.ID }}')">
-            <img class="svg-icon" src="/static/icons/352285_content_copy_icon.svg" width="24" height="24" />
+            <img class="svg-icon" src="/static/icons/copy.svg" width="24" height="24" />
           </a>
           <a
             class="button"