Add Participants view to group chats

internal/webserver/static/styles.css

@@ -248,14 +248,17 @@ main {
 		flex-basis: 0;
 		flex-grow: 7;
 		border-left: 1px solid var(--color-outline-gray);
-		padding: 0.5em;
 		box-sizing: border-box;
 		display: flex;
 		flex-direction: column;
 
+		/* To position the participants list page */
+		position: relative;
+
 		.chat-messages {
 			flex-grow: 1;
 			overflow-y: auto;
+			padding: 0 0.5em;
 		}
 	}
 }
@@ -1248,12 +1251,26 @@ main {
 }
 
 .chat-header {
-    border-bottom: 1px solid var(--color-outline-gray);
+	border-bottom: 1px solid var(--color-outline-gray);
-    padding: 0.5em;
+	padding: 0.5em;
-    display: flex;
+	display: flex;
-    justify-content: space-around;
+	justify-content: space-around;
-    background-color: var(--color-twitter-off-white);
+	background-color: var(--color-twitter-off-white);
-    margin: -0.5em -0.5em 0 -0.5em;
+}
+
+.groupchat-participants-list {
+	position: absolute;
+	background-color: white;
+	top: 4.2em; /* TODO: wtf is this number */
+	left: 0;
+	right: 0;
+	bottom: 0;
+	overflow-y: scroll;
+	display: none;
+
+	&.unhidden {
+		display: revert;
+	}
 }
 
 /**

internal/webserver/tpl/tweet_page_includes/chat_view.tpl

@@ -102,7 +102,7 @@
         <div class="chat-header__buttons-container row">
           {{if (ne $room.Type "ONE_TO_ONE")}}
             <!-- Group chats need an "Info" button -->
-            <a class="button">
+            <a class="button" onclick="toggle_participants_view()">
               <img class="svg-icon" src="/static/icons/info.svg" width="24" height="24" />
             </a>
           {{end}}
@@ -121,7 +121,7 @@
     {{if .ActiveRoomID}}
       <div class="dm-composer">
         <form
-          hx-post="/messages/{{$.ActiveRoomID}}/send"
+          hx-post="/messages/{{.ActiveRoomID}}/send"
           hx-target="#new-messages-poller"
           hx-swap="outerHTML scroll:.chat-messages:bottom"
           hx-ext="json-enc"
@@ -142,6 +142,19 @@
           document.execCommand("insertHTML", false, text);
         });
       </script>
+
+      {{ $room := (index $.Rooms $.ActiveRoomID) }}
+      {{if (ne $room.Type "ONE_TO_ONE")}}
+        <div class="groupchat-participants-list">
+          <div class="header row">
+            <a onclick="toggle_participants_view()" class="button back-button">
+              <img class="svg-icon" src="/static/icons/back.svg" width="24" height="24">
+            </a>
+            <h3>People</h3>
+          </div>
+          {{template "list" (dict "UserIDs" $room.GetParticipantIDs)}}
+        </div>
+      {{end}}
     {{end}}
   </div>
 
@@ -200,6 +213,18 @@
         replied_to_message.classList.remove("highlighted");
       }, 1000);
     }
+
+    /**
+     * Show or hide the Participants view
+     */
+    function toggle_participants_view() {
+      const panel = document.querySelector(".groupchat-participants-list");
+      if (panel.classList.contains("unhidden")) {
+        panel.classList.remove("unhidden");
+      } else {
+        panel.classList.add("unhidden");
+      }
+    }
   </script>
 {{end}}
 

pkg/scraper/dm_chat_room.go

@@ -45,6 +45,14 @@ type DMChatRoom struct {
 	Participants  map[UserID]DMChatParticipant
 }
 
+func (r DMChatRoom) GetParticipantIDs() []UserID {
+	ret := []UserID{}
+	for user_id := range r.Participants {
+		ret = append(ret, user_id)
+	}
+	return ret
+}
+
 func ParseAPIDMChatRoom(api_room APIDMConversation) DMChatRoom {
 	ret := DMChatRoom{}
 	ret.ID = DMChatRoomID(api_room.ConversationID)