Improve DM chat list previews

- add "unread" indicators
- message preview should now always say something, e.g., "So-and-so sent a Tweet" instead of being empty

internal/webserver/handler_messages.go

@@ -15,6 +15,7 @@ type MessageData struct {
 	persistence.DMChatView
 	LatestPollingTimestamp int
 	ScrollBottom           bool
+	UnreadRoomIDs          map[scraper.DMChatRoomID]bool
 }
 
 func (app *Application) Messages(w http.ResponseWriter, r *http.Request) {
@@ -34,6 +35,10 @@ func (app *Application) Messages(w http.ResponseWriter, r *http.Request) {
 	}
 
 	chat_view_data := MessageData{DMChatView: app.Profile.GetChatRoomsPreview(app.ActiveUser.ID)} // Get message list previews
+	chat_view_data.UnreadRoomIDs = make(map[scraper.DMChatRoomID]bool)
+	for _, room_id := range app.Profile.GetUnreadConversations(app.ActiveUser.ID) {
+		chat_view_data.UnreadRoomIDs[room_id] = true
+	}
 	global_data := PageGlobalData{TweetTrove: chat_view_data.DMChatView.TweetTrove}
 
 	if room_id != "" {

internal/webserver/static/styles.css

@@ -1195,11 +1195,33 @@ main {
 		white-space: nowrap;
 		cursor: default; /* TODO: redundancy check `.author-info` */
 	}
+	.chat-list-entry__preview-and-unread-container {
+		justify-content: space-between;
+	}
 	.chat-list-entry__message-preview {
 		font-size: 0.9em;
 		color: var(--color-twitter-text-gray);
 		padding: 0 1em;
 		border-left: 1px solid var(--color-outline-gray);
+
+		.chat-list-entry--unread & {
+			font-weight: bold;
+		}
+	}
+	.chat-list-entry__unread-indicator {
+		display: none;
+        background-color: var(--color-twitter-blue);
+        height: 0.5em;
+        width: 0.5em;
+        border-radius: 50%;
+        flex: auto 0 0; /* Otherwise it gets squished if the message preview is long */
+
+		.chat-list-entry--unread & {
+			display: revert;
+		}
+	}
+	.chat-list-entry__preview-no-text {
+		font-style: italic;
 	}
 
 	.posted-at__text {
@@ -1273,6 +1295,7 @@ main {
 	.dm-message__embedded-image, .dm-message__embedded-video {
 		max-width: 100%;
 		height: auto; /* preserve aspect ratio */
+		cursor: pointer;
 	}
 	.dm-message__text-content {
 		display: inline-block;

internal/webserver/tpl/tweet_page_includes/chat_list.tpl

@@ -1,7 +1,12 @@
 {{define "chat-list"}}
   <div class="chat-list">
     {{range .RoomIDs}}
-      {{template "chat-list-entry" (dict "room" (index $.Rooms .) "messages" $.DMTrove.Messages "is_active" (eq $.ActiveRoomID .))}}
+      {{template "chat-list-entry" (dict
+          "room" (index $.Rooms .)
+          "messages" $.DMTrove.Messages
+          "is_active" (eq $.ActiveRoomID .)
+          "is_unread" (index $.UnreadRoomIDs .)
+      ) }}
     {{end}}
 
     {{/* Scroll the active chat into view, if there is one */}}

internal/webserver/tpl/tweet_page_includes/chat_list_entry.tpl

@@ -32,6 +32,26 @@
         </p>
       </div>
     </div>
-    <p class="chat-list-entry__message-preview">{{(index $.messages $room.LastMessageID).Text}}</p>
+    <div class="chat-list-entry__preview-and-unread-container row">
+      <p class="chat-list-entry__message-preview">
+        {{ $message := (index $.messages $room.LastMessageID)}}
+        {{ $sender  := (user $message.SenderID) }}
+        {{if ne $message.Text ""}}
+          {{if eq $room.Type "GROUP_DM"}}
+            {{ $sender.DisplayName }}:
+          {{end}}
+          {{$message.Text}}
+        {{else if $message.EmbeddedTweetID}}
+          <span class="chat-list-entry__preview-no-text">{{$sender.DisplayName}} sent a Tweet</span>
+        {{else if $message.Images}}
+          <span class="chat-list-entry__preview-no-text">{{$sender.DisplayName}} sent an image</span>
+        {{else if $message.Videos}}
+          <span class="chat-list-entry__preview-no-text">{{$sender.DisplayName}} sent a video</span>
+        {{else if $message.Urls}}
+          <span class="chat-list-entry__preview-no-text">{{$sender.DisplayName}} sent a link</span>
+        {{end}}
+      </p>
+      <span class="chat-list-entry__unread-indicator"></span>
+    </div>
   </div>
 {{end}}

pkg/persistence/dm_queries.go

@@ -257,6 +257,8 @@ func (p Profile) GetChatRoomsPreview(id UserID) DMChatView {
 		ret.Messages[msg.ID] = msg
 		ret.RoomIDs = append(ret.RoomIDs, room.ID)
 	}
+	// Since the message text might be empty, fetch contents (images, tweets etc) so we can still create a preview
+	p.fill_dm_contents(&ret.DMTrove)
 	return ret
 }