web/roomlist: render unread message counts

tulir · Oct 17, 2024 · 00630f9 · 00630f9
1 parent 0455ff3
commit 00630f9
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 13 deletions.
diff --git a/web/src/api/statestore/main.ts b/web/src/api/statestore/main.ts
@@ -36,8 +36,9 @@ export interface RoomListEntry {
 	name: string
 	search_name: string
 	avatar?: ContentURI
-	unread: number
-	highlighted: boolean
+	unread_messages: number
+	unread_notifications: number
+	unread_highlights: number
 }
 
 // eslint-disable-next-line no-misleading-character-class
@@ -58,6 +59,7 @@ export class StateStore {
 
 	#roomListEntryChanged(entry: SyncRoom, oldEntry: RoomStateStore): boolean {
 		return entry.meta.sorting_timestamp !== oldEntry.meta.current.sorting_timestamp ||
+			entry.meta.unread_messages !== oldEntry.meta.current.unread_messages ||
 			entry.meta.unread_notifications !== oldEntry.meta.current.unread_notifications ||
 			entry.meta.unread_highlights !== oldEntry.meta.current.unread_highlights ||
 			entry.meta.preview_event_rowid !== oldEntry.meta.current.preview_event_rowid ||
@@ -79,8 +81,9 @@ export class StateStore {
 			name,
 			search_name: toSearchableString(name),
 			avatar: entry.meta.avatar,
-			unread: entry.meta.unread_notifications,
-			highlighted: entry.meta.unread_highlights > 0,
+			unread_messages: entry.meta.unread_messages,
+			unread_notifications: entry.meta.unread_notifications,
+			unread_highlights: entry.meta.unread_highlights,
 		}
 	}
 

diff --git a/web/src/ui/roomlist/Entry.tsx b/web/src/ui/roomlist/Entry.tsx
@@ -60,9 +60,12 @@ const Entry = ({ room, setActiveRoom, isActive, hidden }: RoomListEntryProps) =>
 			<div className="room-name">{room.name}</div>
 			{previewText && <div className="message-preview" title={previewText}>{croppedPreviewText}</div>}
 		</div>
-		{room.unread ? <div className="room-entry-unreads">
-			<div className={`unread-count ${room.highlighted ? "highlighted" : ""}`}>
-				{room.unread}
+		{room.unread_messages ? <div className="room-entry-unreads">
+			<div className={`unread-count ${
+				room.unread_notifications ? "notified" : ""} ${
+				room.unread_highlights ? "highlighted" : ""}`}
+			>
+				{room.unread_messages || room.unread_notifications || room.unread_highlights}
 			</div>
 		</div> : null}
 	</div>

diff --git a/web/src/ui/roomlist/RoomList.css b/web/src/ui/roomlist/RoomList.css
@@ -82,19 +82,36 @@ div.room-entry {
 	> div.room-entry-unreads {
 		display: flex;
 		align-items: center;
+		justify-content: center;
 		width: 3rem;
 
 		> div.unread-count {
-			width: 1.5rem;
-			height: 1.5rem;
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			border-radius: 50%;
-			background-color: green;
-			text-align: center;
 			color: white;
-			font-weight: bold;
+
+			background-color: rgba(0, 0, 0, 0.35);
+			width: 1rem;
+			height: 1rem;
+			line-height: 1;
+			font-size: .75em;
+
+			&.notified, &.highlighted {
+				width: 1.5rem;
+				height: 1.5rem;
+				padding-bottom: 0;
+				font-size: 1em;
+				font-weight: bold;
+			}
+
+			&.notified:not(.highlighted) {
+				background-color: rgba(50, 150, 0, 0.7);
+			}
 
 			&.highlighted {
-				background-color: darkred;
+				background-color: rgba(200, 0, 0, 0.7);
 			}
 		}
 	}