Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-20 10:33:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

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
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,
}
}

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>
{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>

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

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