}
&--alert {
- background-color: var(--bg-danger);
+ background-color: var(--bg-positive);
& .text { color: white }
}
iconSrc: PropTypes.string,
isSelected: PropTypes.bool,
isUnread: PropTypes.bool.isRequired,
- notificationCount: PropTypes.number.isRequired,
+ notificationCount: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number,
+ ]).isRequired,
isAlert: PropTypes.bool.isRequired,
options: PropTypes.node,
onClick: PropTypes.func.isRequired,
import PropTypes from 'prop-types';
import './SidebarAvatar.scss';
-import Tippy from '@tippyjs/react';
import Avatar from '../../atoms/avatar/Avatar';
import Text from '../../atoms/text/Text';
+import Tooltip from '../../atoms/tooltip/Tooltip';
import NotificationBadge from '../../atoms/badge/NotificationBadge';
import { blurOnBubbling } from '../../atoms/button/script';
const SidebarAvatar = React.forwardRef(({
tooltip, text, bgColor, imageSrc,
- iconSrc, active, onClick, notifyCount,
+ iconSrc, active, onClick, isUnread, notificationCount, isAlert,
}, ref) => {
let activeClass = '';
if (active) activeClass = ' sidebar-avatar--active';
return (
- <Tippy
+ <Tooltip
content={<Text variant="b1">{tooltip}</Text>}
- className="sidebar-avatar-tippy"
- touch="hold"
- arrow={false}
placement="right"
- maxWidth={200}
- delay={[0, 0]}
- duration={[100, 0]}
- offset={[0, 0]}
>
<button
ref={ref}
iconSrc={iconSrc}
size="normal"
/>
- { notifyCount !== null && <NotificationBadge alert content={notifyCount} /> }
+ { isUnread && (
+ <NotificationBadge
+ alert={isAlert}
+ content={notificationCount !== 0 ? notificationCount : null}
+ />
+ )}
</button>
- </Tippy>
+ </Tooltip>
);
});
SidebarAvatar.defaultProps = {
imageSrc: null,
active: false,
onClick: null,
- notifyCount: null,
+ isUnread: false,
+ notificationCount: 0,
+ isAlert: false,
};
SidebarAvatar.propTypes = {
iconSrc: PropTypes.string,
active: PropTypes.bool,
onClick: PropTypes.func,
- notifyCount: PropTypes.oneOfType([
+ isUnread: PropTypes.bool,
+ notificationCount: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
+ isAlert: PropTypes.bool,
};
export default SidebarAvatar;
-
-.sidebar-avatar-tippy {
- padding: var(--sp-extra-tight) var(--sp-normal);
- background-color: var(--bg-tooltip);
- border-radius: var(--bo-radius);
- box-shadow: var(--bs-popup);
-
- .text {
- color: var(--tc-tooltip);
- }
-}
-
.sidebar-avatar {
position: relative;
display: flex;
justify-content: center;
align-items: center;
- width: 100%;
cursor: pointer;
& .notification-badge {
position: absolute;
- right: var(--sp-extra-tight);
- top: calc(-1 * var(--sp-ultra-tight));
+ right: 0;
+ top: 0;
box-shadow: 0 0 0 2px var(--bg-surface-low);
+ transform: translate(20%, -20%);
+
+ margin: 0 !important;
}
&:focus {
outline: none;
content: "";
display: block;
position: absolute;
- left: 0;
+ left: -11px;
top: 50%;
transform: translateY(-50%);
transition: height 200ms linear;
[dir=rtl] & {
- right: 0;
+ left: unset;
+ right: -11px;
border-radius: 4px 0 0 4px;
}
}
const drawerPostie = new Postie();
function Directs() {
- const { roomList } = initMatrix;
+ const { roomList, notifications } = initMatrix;
const directIds = [...roomList.directs].sort(AtoZ);
const [, forceUpdate] = useState({});
drawerPostie.post('selector-change', addresses, selectedRoomId);
}
- function unreadChanged(roomId) {
- if (!drawerPostie.hasTopic('unread-change')) return;
- if (!drawerPostie.hasSubscriber('unread-change', roomId)) return;
- drawerPostie.post('unread-change', roomId);
+ function notiChanged(roomId, total, prevTotal) {
+ if (total === prevTotal) return;
+ if (drawerPostie.hasTopicAndSubscriber('unread-change', roomId)) {
+ drawerPostie.post('unread-change', roomId);
+ }
}
function roomListUpdated() {
useEffect(() => {
roomList.on(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
navigation.on(cons.events.navigation.ROOM_SELECTED, selectorChanged);
- roomList.on(cons.events.roomList.MY_RECEIPT_ARRIVED, unreadChanged);
- roomList.on(cons.events.roomList.EVENT_ARRIVED, unreadChanged);
+ notifications.on(cons.events.notifications.NOTI_CHANGED, notiChanged);
return () => {
roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged);
- roomList.removeListener(cons.events.roomList.MY_RECEIPT_ARRIVED, unreadChanged);
- roomList.removeListener(cons.events.roomList.EVENT_ARRIVED, unreadChanged);
+ notifications.removeListener(cons.events.notifications.NOTI_CHANGED, notiChanged);
};
}, []);
-import React, { useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import './DrawerBreadcrumb.scss';
import cons from '../../../client/state/cons';
import { selectSpace } from '../../../client/action/navigation';
import navigation from '../../../client/state/navigation';
+import { abbreviateNumber } from '../../../util/common';
import Text from '../../atoms/text/Text';
import RawIcon from '../../atoms/system-icons/RawIcon';
import Button from '../../atoms/button/Button';
import ScrollView from '../../atoms/scroll/ScrollView';
+import NotificationBadge from '../../atoms/badge/NotificationBadge';
import ChevronRightIC from '../../../../public/res/ic/outlined/chevron-right.svg';
function DrawerBreadcrumb({ spaceId }) {
+ const [, forceUpdate] = useState({});
const scrollRef = useRef(null);
+ const { roomList, notifications } = initMatrix;
const mx = initMatrix.matrixClient;
const spacePath = navigation.selectedSpacePath;
+ function onNotiChanged(roomId, total, prevTotal) {
+ if (total === prevTotal) return;
+ if (navigation.selectedSpacePath.includes(roomId)) {
+ forceUpdate({});
+ }
+ if (navigation.selectedSpacePath[0] === cons.tabs.HOME) {
+ if (!roomList.isOrphan(roomId)) return;
+ if (roomList.directs.has(roomId)) return;
+ forceUpdate({});
+ }
+ }
+
useEffect(() => {
requestAnimationFrame(() => {
if (scrollRef?.current === null) return;
scrollRef.current.scrollLeft = scrollRef.current.scrollWidth;
});
+ notifications.on(cons.events.notifications.NOTI_CHANGED, onNotiChanged);
+ return () => {
+ notifications.removeListener(cons.events.notifications.NOTI_CHANGED, onNotiChanged);
+ };
}, [spaceId]);
if (spacePath.length === 1) return null;
+ function getHomeNotiExcept(childId) {
+ const orphans = roomList.getOrphans();
+ const childIndex = orphans.indexOf(childId);
+ if (childId !== -1) orphans.splice(childIndex, 1);
+
+ let noti = null;
+
+ orphans.forEach((roomId) => {
+ if (!notifications.hasNoti(roomId)) return;
+ if (noti === null) noti = { total: 0, highlight: 0 };
+ const childNoti = notifications.getNoti(roomId);
+ noti.total += childNoti.total;
+ noti.highlight += childNoti.highlight;
+ });
+
+ return noti;
+ }
+
+ function getNotiExcept(roomId, childId) {
+ if (!notifications.hasNoti(roomId)) return null;
+
+ const noti = notifications.getNoti(roomId);
+ if (!notifications.hasNoti(childId)) return noti;
+ if (noti.from === null) return noti;
+ if (noti.from.has(childId) && noti.from.size === 1) return null;
+
+ const childNoti = notifications.getNoti(childId);
+
+ return {
+ total: noti.total - childNoti.total,
+ highlight: noti.highlight - childNoti.highlight,
+ };
+ }
+
return (
<div className="breadcrumb__wrapper">
<ScrollView ref={scrollRef} horizontal vertical={false} invisible>
<div className="breadcrumb">
{
spacePath.map((id, index) => {
- if (index === 0) {
- return (
- <Button key={id} onClick={() => selectSpace(id)}>
- <Text variant="b2">{id === cons.tabs.HOME ? 'Home' : mx.getRoom(id).name}</Text>
- </Button>
- );
- }
+ const noti = (id !== cons.tabs.HOME && index < spacePath.length)
+ ? getNotiExcept(id, (index === spacePath.length - 1) ? null : spacePath[index + 1])
+ : getHomeNotiExcept((index === spacePath.length - 1) ? null : spacePath[index + 1]);
+
return (
<React.Fragment
key={id}
>
- <RawIcon size="extra-small" src={ChevronRightIC} />
+ { index !== 0 && <RawIcon size="extra-small" src={ChevronRightIC} />}
<Button
className={index === spacePath.length - 1 ? 'breadcrumb__btn--selected' : ''}
onClick={() => selectSpace(id)}
>
- <Text variant="b2">{ mx.getRoom(id).name }</Text>
+ <Text variant="b2">{id === cons.tabs.HOME ? 'Home' : mx.getRoom(id).name}</Text>
+ { noti !== null && (
+ <NotificationBadge
+ alert={noti.highlight !== 0}
+ content={noti.total > 0 ? abbreviateNumber(noti.total) : null}
+ />
+ )}
</Button>
</React.Fragment>
);
overflow: hidden;
text-overflow: ellipsis;
}
+
+ & .notification-badge {
+ margin-left: var(--sp-extra-tight);
+ [dir=rtl] & {
+ margin-left: 0;
+ margin-right: var(--sp-extra-tight);
+ }
+ }
}
&__btn--selected {
const drawerPostie = new Postie();
function Home({ spaceId }) {
const [, forceUpdate] = useState({});
- const { roomList } = initMatrix;
+ const { roomList, notifications } = initMatrix;
let spaceIds = [];
let roomIds = [];
let directIds = [];
if (addresses.length === 0) return;
drawerPostie.post('selector-change', addresses, selectedRoomId);
}
- function unreadChanged(roomId) {
- if (!drawerPostie.hasTopic('unread-change')) return;
- if (!drawerPostie.hasSubscriber('unread-change', roomId)) return;
- drawerPostie.post('unread-change', roomId);
+ function notiChanged(roomId, total, prevTotal) {
+ if (total === prevTotal) return;
+ if (drawerPostie.hasTopicAndSubscriber('unread-change', roomId)) {
+ drawerPostie.post('unread-change', roomId);
+ }
}
function roomListUpdated() {
useEffect(() => {
roomList.on(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
navigation.on(cons.events.navigation.ROOM_SELECTED, selectorChanged);
- roomList.on(cons.events.roomList.MY_RECEIPT_ARRIVED, unreadChanged);
- roomList.on(cons.events.roomList.EVENT_ARRIVED, unreadChanged);
+ notifications.on(cons.events.notifications.NOTI_CHANGED, notiChanged);
return () => {
roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged);
- roomList.removeListener(cons.events.roomList.MY_RECEIPT_ARRIVED, unreadChanged);
- roomList.removeListener(cons.events.roomList.EVENT_ARRIVED, unreadChanged);
+ notifications.removeListener(cons.events.notifications.NOTI_CHANGED, notiChanged);
};
}, []);
import PropTypes from 'prop-types';
import initMatrix from '../../../client/initMatrix';
-import { doesRoomHaveUnread } from '../../../util/matrixUtil';
import navigation from '../../../client/state/navigation';
import { openRoomOptions } from '../../../client/action/navigation';
import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room';
-import { getEventCords } from '../../../util/common';
+import { getEventCords, abbreviateNumber } from '../../../util/common';
import IconButton from '../../atoms/button/IconButton';
import RoomSelector from '../../molecules/room-selector/RoomSelector';
roomId, isDM, drawerPostie, onClick,
}) {
const mx = initMatrix.matrixClient;
+ const noti = initMatrix.notifications;
const room = mx.getRoom(roomId);
let imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
if (imageSrc === null) imageSrc = room.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
name={room.name}
roomId={roomId}
iconSrc={room.getJoinRule() === 'invite' ? SpaceLockIC : SpaceIC}
- isUnread={doesRoomHaveUnread(room)}
- notificationCount={room.getUnreadNotificationCount('total') || 0}
- isAlert={room.getUnreadNotificationCount('highlight') !== 0}
+ isUnread={noti.hasNoti(roomId)}
+ notificationCount={abbreviateNumber(noti.getTotalNoti(roomId))}
+ isAlert={noti.getHighlightNoti(roomId) !== 0}
onClick={onClick}
options={(
<IconButton
// eslint-disable-next-line no-nested-ternary
iconSrc={isDM ? null : room.getJoinRule() === 'invite' ? HashLockIC : HashIC}
isSelected={isSelected}
- isUnread={doesRoomHaveUnread(room)}
- notificationCount={room.getUnreadNotificationCount('total') || 0}
- isAlert={room.getUnreadNotificationCount('highlight') !== 0}
+ isUnread={noti.hasNoti(roomId)}
+ notificationCount={abbreviateNumber(noti.getTotalNoti(roomId))}
+ isAlert={noti.getHighlightNoti(roomId) !== 0}
onClick={onClick}
options={(
<IconButton
selectTab, openInviteList, openPublicRooms, openSettings,
} from '../../../client/action/navigation';
import navigation from '../../../client/state/navigation';
+import { abbreviateNumber } from '../../../util/common';
import ScrollView from '../../atoms/scroll/ScrollView';
import SidebarAvatar from '../../molecules/sidebar-avatar/SidebarAvatar';
}
function SideBar() {
- const { roomList } = initMatrix;
+ const { roomList, notifications } = initMatrix;
const mx = initMatrix.matrixClient;
const totalInviteCount = () => roomList.inviteRooms.size
+ roomList.inviteSpaces.size
function onSpaceShortcutUpdated() {
forceUpdate({});
}
+ function onNotificationChanged(roomId, total, prevTotal) {
+ if (total === prevTotal) return;
+ forceUpdate({});
+ }
useEffect(() => {
navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
roomList.on(cons.events.roomList.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
- initMatrix.roomList.on(
- cons.events.roomList.INVITELIST_UPDATED,
- onInviteListChange,
- );
+ roomList.on(cons.events.roomList.INVITELIST_UPDATED, onInviteListChange);
+ notifications.on(cons.events.notifications.NOTI_CHANGED, onNotificationChanged);
return () => {
navigation.removeListener(cons.events.navigation.TAB_SELECTED, onTabSelected);
roomList.removeListener(cons.events.roomList.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
- initMatrix.roomList.removeListener(
- cons.events.roomList.INVITELIST_UPDATED,
- onInviteListChange,
- );
+ roomList.removeListener(cons.events.roomList.INVITELIST_UPDATED, onInviteListChange);
+ notifications.removeListener(cons.events.notifications.NOTI_CHANGED, onNotificationChanged);
};
}, []);
+ function getHomeNoti() {
+ const orphans = roomList.getOrphans();
+ let noti = null;
+
+ orphans.forEach((roomId) => {
+ if (!notifications.hasNoti(roomId)) return;
+ if (noti === null) noti = { total: 0, highlight: 0 };
+ const childNoti = notifications.getNoti(roomId);
+ noti.total += childNoti.total;
+ noti.highlight += childNoti.highlight;
+ });
+
+ return noti;
+ }
+ function getDMsNoti() {
+ if (roomList.directs.size === 0) return null;
+ let noti = null;
+
+ [...roomList.directs].forEach((roomId) => {
+ if (!notifications.hasNoti(roomId)) return;
+ if (noti === null) noti = { total: 0, highlight: 0 };
+ const childNoti = notifications.getNoti(roomId);
+ noti.total += childNoti.total;
+ noti.highlight += childNoti.highlight;
+ });
+
+ return noti;
+ }
+
+ // TODO: bellow operations are heavy.
+ // refactor this component into more smaller components.
+ const dmsNoti = getDMsNoti();
+ const homeNoti = getHomeNoti();
+
return (
<div className="sidebar">
<div className="sidebar__scrollable">
<ScrollView invisible>
<div className="scrollable-content">
<div className="featured-container">
- <SidebarAvatar active={selectedTab === cons.tabs.HOME} onClick={() => selectTab(cons.tabs.HOME)} tooltip="Home" iconSrc={HomeIC} />
- <SidebarAvatar active={selectedTab === cons.tabs.DIRECTS} onClick={() => selectTab(cons.tabs.DIRECTS)} tooltip="People" iconSrc={UserIC} />
+ <SidebarAvatar
+ active={selectedTab === cons.tabs.HOME}
+ onClick={() => selectTab(cons.tabs.HOME)}
+ tooltip="Home"
+ iconSrc={HomeIC}
+ isUnread={homeNoti !== null}
+ notificationCount={homeNoti !== null ? abbreviateNumber(homeNoti.total) : 0}
+ isAlert={homeNoti?.highlight > 0}
+ />
+ <SidebarAvatar
+ active={selectedTab === cons.tabs.DIRECTS}
+ onClick={() => selectTab(cons.tabs.DIRECTS)}
+ tooltip="People"
+ iconSrc={UserIC}
+ isUnread={dmsNoti !== null}
+ notificationCount={dmsNoti !== null ? abbreviateNumber(dmsNoti.total) : 0}
+ isAlert={dmsNoti?.highlight > 0}
+ />
<SidebarAvatar onClick={() => openPublicRooms()} tooltip="Public rooms" iconSrc={HashSearchIC} />
</div>
<div className="sidebar-divider" />
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)}
/>
);
<div className="sticky-container">
{ totalInvites !== 0 && (
<SidebarAvatar
- notifyCount={totalInvites}
+ isUnread
+ notificationCount={totalInvites}
+ isAlert
onClick={() => openInviteList()}
tooltip="Invites"
iconSrc={InviteIC}
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;
}
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;
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) {
}
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);
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];
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');
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') {
}
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;
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',
},
--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%);
projects / cinny.git / commitdiff