- selectTab(cons.tabs.HOME)} tooltip="Home" iconSrc={HomeIC} />
- selectTab(cons.tabs.DIRECTS)} tooltip="People" iconSrc={UserIC} />
+ selectTab(cons.tabs.HOME)}
+ tooltip="Home"
+ iconSrc={HomeIC}
+ isUnread={homeNoti !== null}
+ notificationCount={homeNoti !== null ? abbreviateNumber(homeNoti.total) : 0}
+ isAlert={homeNoti?.highlight > 0}
+ />
+ selectTab(cons.tabs.DIRECTS)}
+ tooltip="People"
+ iconSrc={UserIC}
+ isUnread={dmsNoti !== null}
+ notificationCount={dmsNoti !== null ? abbreviateNumber(dmsNoti.total) : 0}
+ isAlert={dmsNoti?.highlight > 0}
+ />
openPublicRooms()} tooltip="Public rooms" iconSrc={HashSearchIC} />
@@ -117,6 +168,9 @@ function SideBar() {
bgColor={colorMXID(room.roomId)}
imageSrc={room.getAvatarUrl(initMatrix.matrixClient.baseUrl, 42, 42, 'crop') || null}
text={room.name.slice(0, 1)}
+ isUnread={notifications.hasNoti(sRoomId)}
+ notificationCount={abbreviateNumber(notifications.getTotalNoti(sRoomId))}
+ isAlert={notifications.getHighlightNoti(sRoomId) !== 0}
onClick={() => selectTab(shortcut)}
/>
);
@@ -131,7 +185,9 @@ function SideBar() {
{ totalInvites !== 0 && (
openInviteList()}
tooltip="Invites"
iconSrc={InviteIC}
diff --git a/src/client/state/Notifications.js b/src/client/state/Notifications.js
index f3b56ace..f5ecce2b 100644
--- a/src/client/state/Notifications.js
+++ b/src/client/state/Notifications.js
@@ -58,11 +58,27 @@ class Notifications extends EventEmitter {
return this.roomIdToNoti.get(roomId) || { total: 0, highlight: 0, from: null };
}
+ getTotalNoti(roomId) {
+ const { total } = this.getNoti(roomId);
+ return total;
+ }
+
+ getHighlightNoti(roomId) {
+ const { highlight } = this.getNoti(roomId);
+ return highlight;
+ }
+
+ getFromNoti(roomId) {
+ const { from } = this.getNoti(roomId);
+ return from;
+ }
+
hasNoti(roomId) {
return this.roomIdToNoti.has(roomId);
}
_setNoti(roomId, total, highlight, childId) {
+ const prevTotal = this.roomIdToNoti.get(roomId)?.total ?? null;
const noti = this.getNoti(roomId);
noti.total += total;
@@ -73,7 +89,7 @@ class Notifications extends EventEmitter {
}
this.roomIdToNoti.set(roomId, noti);
- this.emit(cons.events.notification.NOTI_CHANGED, roomId);
+ this.emit(cons.events.notifications.NOTI_CHANGED, roomId, noti.total, prevTotal);
const parentIds = this.roomList.roomIdToParents.get(roomId);
if (typeof parentIds === 'undefined') return;
@@ -84,6 +100,7 @@ class Notifications extends EventEmitter {
if (this.roomIdToNoti.has(roomId) === false) return;
const noti = this.getNoti(roomId);
+ const prevTotal = noti.total;
noti.total -= total;
noti.highlight -= highlight;
if (childId && noti.from !== null) {
@@ -91,10 +108,11 @@ class Notifications extends EventEmitter {
}
if (noti.from === null || noti.from.size === 0) {
this.roomIdToNoti.delete(roomId);
- this.emit(cons.events.notification.FULL_READ, roomId);
+ this.emit(cons.events.notifications.FULL_READ, roomId);
+ this.emit(cons.events.notifications.NOTI_CHANGED, roomId, null, prevTotal);
} else {
this.roomIdToNoti.set(roomId, noti);
- this.emit(cons.events.notification.NOTI_CHANGED, roomId);
+ this.emit(cons.events.notifications.NOTI_CHANGED, roomId, noti.total, prevTotal);
}
const parentIds = this.roomList.roomIdToParents.get(roomId);
@@ -120,8 +138,6 @@ class Notifications extends EventEmitter {
this.matrixClient.on('Room.receipt', (mEvent, room) => {
if (mEvent.getType() === 'm.receipt') {
- if (typeof mEvent.event.room_id === 'string') return;
-
const content = mEvent.getContent();
const readedEventId = Object.keys(content)[0];
const readerUserId = Object.keys(content[readedEventId]['m.read'])[0];
diff --git a/src/client/state/RoomList.js b/src/client/state/RoomList.js
index c6b6f86b..b746a468 100644
--- a/src/client/state/RoomList.js
+++ b/src/client/state/RoomList.js
@@ -41,6 +41,15 @@ class RoomList extends EventEmitter {
this.matrixClient.setAccountData(cons['in.cinny.spaces'], spaceContent);
}
+ isOrphan(roomId) {
+ return !this.roomIdToParents.has(roomId);
+ }
+
+ getOrphans() {
+ const rooms = [...this.spaces].concat([...this.rooms]);
+ return rooms.filter((roomId) => !this.roomIdToParents.has(roomId));
+ }
+
getSpaceChildren(roomId) {
const space = this.matrixClient.getRoom(roomId);
const mSpaceChild = space?.currentState.getStateEvents('m.space.child');
@@ -254,15 +263,6 @@ class RoomList extends EventEmitter {
this.matrixClient.on('Room.name', () => {
this.emit(cons.events.roomList.ROOMLIST_UPDATED);
});
- this.matrixClient.on('Room.receipt', (event, room) => {
- if (event.getType() === 'm.receipt') {
- const content = event.getContent();
- const userReadEventId = Object.keys(content)[0];
- const eventReaderUserId = Object.keys(content[userReadEventId]['m.read'])[0];
- if (eventReaderUserId !== this.matrixClient.getUserId()) return;
- this.emit(cons.events.roomList.MY_RECEIPT_ARRIVED, room.roomId);
- }
- });
this.matrixClient.on('RoomState.events', (mEvent) => {
if (mEvent.getType() === 'm.space.child') {
@@ -387,16 +387,6 @@ class RoomList extends EventEmitter {
}
this.emit(cons.events.roomList.ROOMLIST_UPDATED);
});
-
- this.matrixClient.on('Room.timeline', (event, room) => {
- const supportEvents = ['m.room.message', 'm.room.encrypted', 'm.sticker'];
- if (!supportEvents.includes(event.getType())) return;
-
- const lastTimelineEvent = room.timeline[room.timeline.length - 1];
- if (lastTimelineEvent.getId() !== event.getId()) return;
- if (event.getSender() === this.matrixClient.getUserId()) return;
- this.emit(cons.events.roomList.EVENT_ARRIVED, room.roomId);
- });
}
}
export default RoomList;
diff --git a/src/client/state/cons.js b/src/client/state/cons.js
index 6211348b..fee81b5e 100644
--- a/src/client/state/cons.js
+++ b/src/client/state/cons.js
@@ -67,11 +67,9 @@ const cons = {
ROOM_JOINED: 'ROOM_JOINED',
ROOM_LEAVED: 'ROOM_LEAVED',
ROOM_CREATED: 'ROOM_CREATED',
- MY_RECEIPT_ARRIVED: 'MY_RECEIPT_ARRIVED',
- EVENT_ARRIVED: 'EVENT_ARRIVED',
SPACE_SHORTCUT_UPDATED: 'SPACE_SHORTCUT_UPDATED',
},
- notification: {
+ notifications: {
NOTI_CHANGED: 'NOTI_CHANGED',
FULL_READ: 'FULL_READ',
},
diff --git a/src/index.scss b/src/index.scss
index 552e9b08..77261e54 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -220,6 +220,8 @@
--bg-surface-low: hsl(64, 6%, 10%);
--bg-surface-low-transparent: hsla(64, 6%, 14%, 0);
+ --bg-badge: #c4c1ab;
+
/* text color | --tc-[background type]-[priority]: value */
--tc-surface-high: rgb(255, 251, 222, 94%);