n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/roomlist: render unread message counts

Browse source
This commit is contained in:
Tulir Asokan 2024-10-17 22:03:23 +03:00
parent 0455ff3d24
commit 00630f997d
3 changed files with 36 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
web/src/api/statestore/main.ts
View file

@ -36,8 +36,9 @@ export interface RoomListEntry {
name: string name: string
search_name: string search_name: string
avatar?: ContentURI avatar?: ContentURI
unread: number unread_messages: number
highlighted: boolean unread_notifications: number
unread_highlights: number
} }
// eslint-disable-next-line no-misleading-character-class // eslint-disable-next-line no-misleading-character-class
@ -58,6 +59,7 @@ export class StateStore {
#roomListEntryChanged(entry: SyncRoom, oldEntry: RoomStateStore): boolean { #roomListEntryChanged(entry: SyncRoom, oldEntry: RoomStateStore): boolean {
return entry.meta.sorting_timestamp !== oldEntry.meta.current.sorting_timestamp || 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_notifications !== oldEntry.meta.current.unread_notifications ||
entry.meta.unread_highlights !== oldEntry.meta.current.unread_highlights || entry.meta.unread_highlights !== oldEntry.meta.current.unread_highlights ||
entry.meta.preview_event_rowid !== oldEntry.meta.current.preview_event_rowid || entry.meta.preview_event_rowid !== oldEntry.meta.current.preview_event_rowid ||
@ -79,8 +81,9 @@ export class StateStore {
name, name,
search_name: toSearchableString(name), search_name: toSearchableString(name),
avatar: entry.meta.avatar, avatar: entry.meta.avatar,
unread: entry.meta.unread_notifications, unread_messages: entry.meta.unread_messages,
highlighted: entry.meta.unread_highlights > 0, unread_notifications: entry.meta.unread_notifications,
unread_highlights: entry.meta.unread_highlights,
} }
} }

9
web/src/ui/roomlist/Entry.tsx
View file

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

29
web/src/ui/roomlist/RoomList.css
View file

@ -82,19 +82,36 @@ div.room-entry {
> div.room-entry-unreads { > div.room-entry-unreads {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
width: 3rem; width: 3rem;
> div.unread-count { > div.unread-count {
width: 1.5rem; display: flex;
height: 1.5rem; align-items: center;
justify-content: center;
border-radius: 50%; border-radius: 50%;
background-color: green;
text-align: center;
color: white; 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 { &.highlighted {
background-color: darkred; background-color: rgba(200, 0, 0, 0.7);
} }
} }
} }