Updated matrix-js-sdk to v12.4.1 (Security fix)

CONTRIBUTING.md

@@ -10,7 +10,7 @@ All types of contributions are encouraged and valued. See the [Table of Contents
 > - Tweet about it (tag @cinnyapp)
 > - Refer this project in your project's readme
 > - Mention the project at local meetups and tell your friends/colleagues
-> - [Donate to us](https://liberapay.com/kfiven/donate)
+> - [Donate to us](https://liberapay.com/ajbura/donate)
 
 <!-- omit in toc -->
 ## Table of Contents

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -7951,9 +7951,9 @@
       }
     },
     "matrix-js-sdk": {
-      "version": "12.2.0",
-      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-12.2.0.tgz",
-      "integrity": "sha512-foSs3uKRc6uvFNhgY35eErBvLWVDd5RNIxxsdFKlmU3B+70YUf3BP3petyBNW34ORyOqNdX36IiApfLo3npNEw==",
+      "version": "12.4.1",
+      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-12.4.1.tgz",
+      "integrity": "sha512-C9aSGX9e4GoCm0Rli+iGBXmcnRxnwETw7MvgNcSBfPaLHOMZi/wz4YOV7HEZK8R+OXuDrDYyglncWSJkkoDpAQ==",
       "requires": {
         "@babel/runtime": "^7.12.5",
         "another-json": "^0.2.0",

package.json

@@ -24,7 +24,7 @@
     "flux": "^4.0.1",
     "html-react-parser": "^1.2.7",
     "linkifyjs": "^3.0.0-beta.3",
-    "matrix-js-sdk": "^12.2.0",
+    "matrix-js-sdk": "^12.4.1",
     "micromark": "^3.0.3",
     "micromark-extension-gfm": "^1.0.0",
     "prop-types": "^15.7.2",

src/app/atoms/badge/NotificationBadge.jsx

@@ -4,25 +4,26 @@ import './NotificationBadge.scss';
 
 import Text from '../text/Text';
 
-function NotificationBadge({ alert, children }) {
+function NotificationBadge({ alert, content }) {
   const notificationClass = alert ? ' notification-badge--alert' : '';
   return (
     <div className={`notification-badge${notificationClass}`}>
-      <Text variant="b3">{children}</Text>
+      {content && <Text variant="b3">{content}</Text>}
     </div>
   );
 }
 
 NotificationBadge.defaultProps = {
   alert: false,
+  content: null,
 };
 
 NotificationBadge.propTypes = {
   alert: PropTypes.bool,
-  children: PropTypes.oneOfType([
+  content: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
-  ]).isRequired,
+  ]),
 };
 
 export default NotificationBadge;

src/app/atoms/badge/NotificationBadge.scss

@@ -1,19 +1,22 @@
 .notification-badge {
-  min-width: 18px;
-  padding: 1px var(--sp-ultra-tight);
+  min-width: 16px;
+  min-height: 8px;
+  padding: 0 var(--sp-ultra-tight);
   background-color: var(--tc-surface-low);
-  border-radius: 9px;
+  border-radius: var(--bo-radius);
 
   .text {
-    color: var(--bg-surface-low);
+    color: white;
     text-align: center;
     font-weight: 700;
   }
 
   &--alert {
-    background-color: var(--bg-positive);
-    .text {
-      color: white;
-    }
+    background-color: var(--bg-danger);
+  }
+
+  &:empty {
+    min-width: 8px;
+    margin: 0 var(--sp-ultra-tight);
   }
 }

src/app/molecules/channel-selector/ChannelSelector.jsx

@@ -9,65 +9,80 @@ import Avatar from '../../atoms/avatar/Avatar';
 import NotificationBadge from '../../atoms/badge/NotificationBadge';
 import { blurOnBubbling } from '../../atoms/button/script';
 
-function ChannelSelector({
-  selected, unread, notificationCount, alert,
-  iconSrc, imageSrc, roomId, onClick, children,
+function ChannelSelectorWrapper({
+  isSelected, onClick, content, options,
 }) {
   return (
-    <button
-      className={`channel-selector__button-wrapper${selected ? ' channel-selector--selected' : ''}`}
-      type="button"
-      onClick={onClick}
-      onMouseUp={(e) => blurOnBubbling(e, '.channel-selector__button-wrapper')}
-    >
-      <div className="channel-selector">
-        <div className="channel-selector__icon flex--center">
+    <div className={`channel-selector${isSelected ? ' channel-selector--selected' : ''}`}>
+      <button
+        className="channel-selector__content"
+        type="button"
+        onClick={onClick}
+        onMouseUp={(e) => blurOnBubbling(e, '.channel-selector')}
+      >
+        {content}
+      </button>
+      <div className="channel-selector__options">{options}</div>
+    </div>
+  );
+}
+ChannelSelectorWrapper.defaultProps = {
+  options: null,
+};
+ChannelSelectorWrapper.propTypes = {
+  isSelected: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+  content: PropTypes.node.isRequired,
+  options: PropTypes.node,
+};
+
+function ChannelSelector({
+  name, roomId, imageSrc, iconSrc,
+  isSelected, isUnread, notificationCount, isAlert,
+  options, onClick,
+}) {
+  return (
+    <ChannelSelectorWrapper
+      isSelected={isSelected}
+      content={(
+        <>
           <Avatar
-            text={children.slice(0, 1)}
+            text={name.slice(0, 1)}
             bgColor={colorMXID(roomId)}
             imageSrc={imageSrc}
             iconSrc={iconSrc}
             size="extra-small"
           />
-        </div>
-        <div className="channel-selector__text-container">
-          <Text variant="b1">{children}</Text>
-        </div>
-        <div className="channel-selector__badge-container">
-          {
-            notificationCount !== 0
-              ? unread && (
-                <NotificationBadge alert={alert}>
-                  {notificationCount}
-                </NotificationBadge>
-              )
-              : unread && <div className="channel-selector--unread" />
-          }
-        </div>
-      </div>
-    </button>
+          <Text variant="b1">{name}</Text>
+          { isUnread && (
+            <NotificationBadge
+              alert={isAlert}
+              content={notificationCount !== 0 ? notificationCount : null}
+            />
+          )}
+        </>
+      )}
+      options={options}
+      onClick={onClick}
+    />
   );
 }
-
 ChannelSelector.defaultProps = {
-  selected: false,
-  unread: false,
-  notificationCount: 0,
-  alert: false,
-  iconSrc: null,
   imageSrc: null,
+  iconSrc: null,
+  options: null,
 };
-
 ChannelSelector.propTypes = {
-  selected: PropTypes.bool,
-  unread: PropTypes.bool,
-  notificationCount: PropTypes.number,
-  alert: PropTypes.bool,
-  iconSrc: PropTypes.string,
-  imageSrc: PropTypes.string,
+  name: PropTypes.string.isRequired,
   roomId: PropTypes.string.isRequired,
+  imageSrc: PropTypes.string,
+  iconSrc: PropTypes.string,
+  isSelected: PropTypes.bool.isRequired,
+  isUnread: PropTypes.bool.isRequired,
+  notificationCount: PropTypes.number.isRequired,
+  isAlert: PropTypes.bool.isRequired,
+  options: PropTypes.node,
   onClick: PropTypes.func.isRequired,
-  children: PropTypes.string.isRequired,
 };
 
 export default ChannelSelector;

src/app/molecules/channel-selector/ChannelSelector.scss

@@ -1,24 +1,35 @@
-.channel-selector__button-wrapper {
-  display: block;
-  width: calc(100% - var(--sp-extra-tight));
-  margin-left: auto;
-  padding: var(--sp-extra-tight) var(--sp-extra-tight);
-  
-  border: 1px solid transparent;
-  border-radius:  var(--bo-radius);
-  cursor: pointer;
+.channel-selector-flex {
+  display: flex;
+  align-items: center;
+}
+.channel-selector-flexItem {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
 
-  [dir=rtl] & {
-    
-    margin: {
-      left: 0;
-      right: auto;
+.channel-selector {
+  @extend .channel-selector-flex;
+
+  border: 1px solid transparent;
+  border-radius: var(--bo-radius);
+  cursor: pointer;
+  
+  &--selected {
+    background-color: var(--bg-surface);
+    border-color: var(--bg-surface-border);
+
+    & .channel-selector__options {
+      display: flex;
     }
   }
 
   @media (hover: hover) {
     &:hover {
       background-color: var(--bg-surface-hover);
+      & .channel-selector__options {
+        display: flex;
+      }
     }
   }
   &:focus {
@@ -28,41 +39,50 @@
   &:active {
     background-color: var(--bg-surface-active);
   }
-}
-.channel-selector {
-  display: flex;
-  align-items: center;
-
-  &__icon {
-    width: 24px;
-    height: 24px;
-    .avatar__border {
-      box-shadow: none;
-    }
+  &--selected:hover,
+  &--selected:focus,
+  &--selected:active {
+    background-color: var(--bg-surface);
   }
-  &__text-container {
-    flex: 1;
-    min-width: 0;
+}
+
+.channel-selector__content {
+  @extend .channel-selector-flexItem;
+  @extend .channel-selector-flex;
+  padding: 0 var(--sp-extra-tight);
+  min-height: 40px;
+  cursor: inherit;
+
+  & > .avatar-container .avatar__bordered {
+    box-shadow: none;
+  }
+
+  & > .text {
+    @extend .channel-selector-flexItem;
     margin: 0 var(--sp-extra-tight);
 
-    & .text {
-      color: var(--tc-surface-normal);
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
+    color: var(--tc-surface-normal);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 }
+.channel-selector__options {
+  @extend .channel-selector-flex;
+  display: none;
+  margin-right: var(--sp-ultra-tight);
 
-.channel-selector--unread {
-  margin: 0 var(--sp-ultra-tight);
-  height: 8px;
-  width: 8px;
-  background-color: var(--tc-surface-normal);
-  border-radius: 50%;
-  opacity: .4;
-}
-.channel-selector--selected {
-  background-color: var(--bg-surface);
-  border-color: var(--bg-surface-border);
+  [dir=rtl] & {
+    margin-right: 0;
+    margin-left: var(--sp-ultra-tight);
+  }
+
+  &:empty {
+    margin: 0 !important;
+  }
+
+  & .ic-btn-surface {
+    padding: 6px;
+    border-radius: calc(var(--bo-radius) / 2);
+  }
 }

src/app/molecules/sidebar-avatar/SidebarAvatar.jsx

@@ -40,7 +40,7 @@ const SidebarAvatar = React.forwardRef(({
           iconSrc={iconSrc}
           size="normal"
         />
-        { notifyCount !== null && <NotificationBadge alert>{notifyCount}</NotificationBadge> }
+        { notifyCount !== null && <NotificationBadge alert content={notifyCount} /> }
       </button>
     </Tippy>
   );

src/app/organisms/channel/ChannelViewInput.scss

@@ -30,6 +30,7 @@
       display: none;
       margin: 0 var(--sp-extra-tight);
       padding: var(--sp-ultra-tight) var(--sp-extra-tight);
+      background-color: var(--bg-surface);
       border-radius: calc(var(--bo-radius) / 2);
       box-shadow: var(--bs-surface-border);
       cursor: pointer;

src/app/organisms/navigation/Directs.jsx

@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { selectRoom } from '../../../client/action/navigation';
+import Postie from '../../../util/Postie';
+
+import Selector from './Selector';
+
+import { AtoZ } from './common';
+
+const drawerPostie = new Postie();
+function Directs() {
+  const { roomList } = initMatrix;
+  const directIds = [...roomList.directs].sort(AtoZ);
+
+  const [, forceUpdate] = useState({});
+
+  function selectorChanged(activeRoomID, prevActiveRoomId) {
+    if (!drawerPostie.hasTopic('selector-change')) return;
+    const addresses = [];
+    if (drawerPostie.hasSubscriber('selector-change', activeRoomID)) addresses.push(activeRoomID);
+    if (drawerPostie.hasSubscriber('selector-change', prevActiveRoomId)) addresses.push(prevActiveRoomId);
+    if (addresses.length === 0) return;
+    drawerPostie.post('selector-change', addresses, activeRoomID);
+  }
+
+  function unreadChanged(roomId) {
+    if (!drawerPostie.hasTopic('unread-change')) return;
+    if (!drawerPostie.hasSubscriber('unread-change', roomId)) return;
+    drawerPostie.post('unread-change', roomId);
+  }
+
+  function roomListUpdated() {
+    const { spaces, rooms, directs } = initMatrix.roomList;
+    if (!(
+      spaces.has(navigation.getActiveRoomId())
+      || rooms.has(navigation.getActiveRoomId())
+      || directs.has(navigation.getActiveRoomId()))
+    ) {
+      selectRoom(null);
+    }
+    forceUpdate({});
+  }
+
+  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);
+    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);
+    };
+  }, []);
+
+  return directIds.map((id) => (
+    <Selector
+      key={id}
+      roomId={id}
+      drawerPostie={drawerPostie}
+    />
+  ));
+}
+
+export default Directs;

src/app/organisms/navigation/Drawer.jsx

@@ -1,86 +1,14 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import './Drawer.scss';
 
-import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
-import { doesRoomHaveUnread } from '../../../util/matrixUtil';
-import {
-  selectRoom, openPublicChannels, openCreateChannel, openInviteUser,
-} from '../../../client/action/navigation';
 import navigation from '../../../client/state/navigation';
 
-import Header, { TitleWrapper } from '../../atoms/header/Header';
-import Text from '../../atoms/text/Text';
-import IconButton from '../../atoms/button/IconButton';
 import ScrollView from '../../atoms/scroll/ScrollView';
-import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import ChannelSelector from '../../molecules/channel-selector/ChannelSelector';
 
-import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
-// import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
-import HashIC from '../../../../public/res/ic/outlined/hash.svg';
-import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
-import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
-import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
-import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
-import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
-
-function AtoZ(aId, bId) {
-  let aName = initMatrix.matrixClient.getRoom(aId).name;
-  let bName = initMatrix.matrixClient.getRoom(bId).name;
-
-  // remove "#" from the room name
-  // To ignore it in sorting
-  aName = aName.replaceAll('#', '');
-  bName = bName.replaceAll('#', '');
-
-  if (aName.toLowerCase() < bName.toLowerCase()) {
-    return -1;
-  }
-  if (aName.toLowerCase() > bName.toLowerCase()) {
-    return 1;
-  }
-  return 0;
-}
-
-function DrawerHeader({ tabId }) {
-  return (
-    <Header>
-      <TitleWrapper>
-        <Text variant="s1">{(tabId === 'channels' ? 'Home' : 'Direct messages')}</Text>
-      </TitleWrapper>
-      {(tabId === 'dm')
-        ? <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="normal" />
-        : (
-          <ContextMenu
-            content={(hideMenu) => (
-              <>
-                <MenuHeader>Add channel</MenuHeader>
-                <MenuItem
-                  iconSrc={HashPlusIC}
-                  onClick={() => { hideMenu(); openCreateChannel(); }}
-                >
-                  Create new channel
-                </MenuItem>
-                <MenuItem
-                  iconSrc={HashSearchIC}
-                  onClick={() => { hideMenu(); openPublicChannels(); }}
-                >
-                  Add Public channel
-                </MenuItem>
-              </>
-            )}
-            render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add channel" src={PlusIC} size="normal" />)}
-          />
-        )}
-      {/* <IconButton onClick={() => ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */}
-    </Header>
-  );
-}
-DrawerHeader.propTypes = {
-  tabId: PropTypes.string.isRequired,
-};
+import DrawerHeader from './DrawerHeader';
+import Home from './Home';
+import Directs from './Directs';
 
 function DrawerBradcrumb() {
   return (
@@ -94,121 +22,33 @@ function DrawerBradcrumb() {
   );
 }
 
-function renderSelector(room, roomId, isSelected, isDM) {
-  const mx = initMatrix.matrixClient;
-  let imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop');
-  if (typeof imageSrc === 'undefined') imageSrc = null;
+function Drawer() {
+  const [activeTab, setActiveTab] = useState('home');
 
-  return (
-    <ChannelSelector
-      key={roomId}
-      iconSrc={
-        isDM
-          ? null
-          : (() => {
-            if (room.isSpaceRoom()) {
-              return (room.getJoinRule() === 'invite' ? SpaceLockIC : SpaceIC);
-            }
-            return (room.getJoinRule() === 'invite' ? HashLockIC : HashIC);
-          })()
-      }
-      imageSrc={isDM ? imageSrc : null}
-      roomId={roomId}
-      unread={doesRoomHaveUnread(room)}
-      onClick={() => selectRoom(roomId)}
-      notificationCount={room.getUnreadNotificationCount('total')}
-      alert={room.getUnreadNotificationCount('highlight') !== 0}
-      selected={isSelected}
-    >
-      {room.name}
-    </ChannelSelector>
-  );
-}
-
-function Directs({ selectedRoomId }) {
-  const mx = initMatrix.matrixClient;
-  const directIds = [...initMatrix.roomList.directs].sort(AtoZ);
-
-  return directIds.map((id) => renderSelector(mx.getRoom(id), id, selectedRoomId === id, true));
-}
-Directs.defaultProps = { selectedRoomId: null };
-Directs.propTypes = { selectedRoomId: PropTypes.string };
-
-function Home({ selectedRoomId }) {
-  const mx = initMatrix.matrixClient;
-  const spaceIds = [...initMatrix.roomList.spaces].sort(AtoZ);
-  const roomIds = [...initMatrix.roomList.rooms].sort(AtoZ);
-
-  return (
-    <>
-      { spaceIds.length !== 0 && <Text className="cat-header" variant="b3">Spaces</Text> }
-      { spaceIds.map((id) => renderSelector(mx.getRoom(id), id, selectedRoomId === id, false)) }
-      { roomIds.length !== 0 && <Text className="cat-header" variant="b3">Channels</Text> }
-      { roomIds.map((id) => renderSelector(mx.getRoom(id), id, selectedRoomId === id, false)) }
-    </>
-  );
-}
-Home.defaultProps = { selectedRoomId: null };
-Home.propTypes = { selectedRoomId: PropTypes.string };
-
-function Channels({ tabId }) {
-  const [selectedRoomId, changeSelectedRoomId] = useState(null);
-  const [, updateState] = useState();
-
-  const selectHandler = (roomId) => changeSelectedRoomId(roomId);
-  const handleDataChanges = () => updateState({});
-
-  const onRoomListChange = () => {
-    const { spaces, rooms, directs } = initMatrix.roomList;
-    if (!(
-      spaces.has(selectedRoomId)
-      || rooms.has(selectedRoomId)
-      || directs.has(selectedRoomId))
-    ) {
-      selectRoom(null);
-    }
-  };
+  function onTabChanged(tabId) {
+    setActiveTab(tabId);
+  }
 
   useEffect(() => {
-    navigation.on(cons.events.navigation.ROOM_SELECTED, selectHandler);
-    initMatrix.roomList.on(cons.events.roomList.ROOMLIST_UPDATED, handleDataChanges);
-
+    navigation.on(cons.events.navigation.TAB_CHANGED, onTabChanged);
     return () => {
-      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectHandler);
-      initMatrix.roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, handleDataChanges);
+      navigation.removeListener(cons.events.navigation.TAB_CHANGED, onTabChanged);
     };
   }, []);
-  useEffect(() => {
-    initMatrix.roomList.on(cons.events.roomList.ROOMLIST_UPDATED, onRoomListChange);
-
-    return () => {
-      initMatrix.roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, onRoomListChange);
-    };
-  }, [selectedRoomId]);
-
-  return (
-    <div className="channels-container">
-      {
-        tabId === 'channels'
-          ? <Home selectedRoomId={selectedRoomId} />
-          : <Directs selectedRoomId={selectedRoomId} />
-      }
-    </div>
-  );
-}
-Channels.propTypes = {
-  tabId: PropTypes.string.isRequired,
-};
-
-function Drawer({ tabId }) {
   return (
     <div className="drawer">
-      <DrawerHeader tabId={tabId} />
+      <DrawerHeader activeTab={activeTab} />
       <div className="drawer__content-wrapper">
         <DrawerBradcrumb />
         <div className="channels__wrapper">
           <ScrollView autoHide>
-            <Channels tabId={tabId} />
+            <div className="channels-container">
+              {
+                activeTab === 'home'
+                  ? <Home />
+                  : <Directs />
+              }
+            </div>
           </ScrollView>
         </div>
       </div>
@@ -216,8 +56,4 @@ function Drawer({ tabId }) {
   );
 }
 
-Drawer.propTypes = {
-  tabId: PropTypes.string.isRequired,
-};
-
 export default Drawer;

src/app/organisms/navigation/Drawer.scss

@@ -35,7 +35,18 @@
 .channels-container {
   padding-bottom: var(--sp-extra-loose);
 
-  & > .channel-selector__button-wrapper:first-child {
+  & > .channel-selector {
+    width: calc(100% - var(--sp-extra-tight));
+    margin-left: auto;
+
+    [dir=rtl] & {
+      margin-left: 0;
+      margin-right: auto;
+    }
+
+  }
+
+  & > .channel-selector:first-child {
     margin-top: var(--sp-extra-tight);
   }
 

src/app/organisms/navigation/DrawerHeader.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  openPublicChannels, openCreateChannel, openInviteUser,
+} from '../../../client/action/navigation';
+
+import Text from '../../atoms/text/Text';
+import Header, { TitleWrapper } from '../../atoms/header/Header';
+import IconButton from '../../atoms/button/IconButton';
+import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
+
+import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
+import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
+import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
+
+function DrawerHeader({ activeTab }) {
+  return (
+    <Header>
+      <TitleWrapper>
+        <Text variant="s1">{(activeTab === 'home' ? 'Home' : 'Direct messages')}</Text>
+      </TitleWrapper>
+      {(activeTab === 'dms')
+        ? <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="normal" />
+        : (
+          <ContextMenu
+            content={(hideMenu) => (
+              <>
+                <MenuHeader>Add channel</MenuHeader>
+                <MenuItem
+                  iconSrc={HashPlusIC}
+                  onClick={() => { hideMenu(); openCreateChannel(); }}
+                >
+                  Create new channel
+                </MenuItem>
+                <MenuItem
+                  iconSrc={HashSearchIC}
+                  onClick={() => { hideMenu(); openPublicChannels(); }}
+                >
+                  Add Public channel
+                </MenuItem>
+              </>
+            )}
+            render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add channel" src={PlusIC} size="normal" />)}
+          />
+        )}
+      {/* <IconButton onClick={() => ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */}
+    </Header>
+  );
+}
+DrawerHeader.propTypes = {
+  activeTab: PropTypes.string.isRequired,
+};
+
+export default DrawerHeader;

src/app/organisms/navigation/Home.jsx

@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from 'react';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { selectRoom } from '../../../client/action/navigation';
+import Postie from '../../../util/Postie';
+
+import Text from '../../atoms/text/Text';
+import Selector from './Selector';
+
+import { AtoZ } from './common';
+
+const drawerPostie = new Postie();
+function Home() {
+  const { roomList } = initMatrix;
+  const spaceIds = [...roomList.spaces].sort(AtoZ);
+  const roomIds = [...roomList.rooms].sort(AtoZ);
+
+  const [, forceUpdate] = useState({});
+
+  function selectorChanged(activeRoomID, prevActiveRoomId) {
+    if (!drawerPostie.hasTopic('selector-change')) return;
+    const addresses = [];
+    if (drawerPostie.hasSubscriber('selector-change', activeRoomID)) addresses.push(activeRoomID);
+    if (drawerPostie.hasSubscriber('selector-change', prevActiveRoomId)) addresses.push(prevActiveRoomId);
+    if (addresses.length === 0) return;
+    drawerPostie.post('selector-change', addresses, activeRoomID);
+  }
+  function unreadChanged(roomId) {
+    if (!drawerPostie.hasTopic('unread-change')) return;
+    if (!drawerPostie.hasSubscriber('unread-change', roomId)) return;
+    drawerPostie.post('unread-change', roomId);
+  }
+
+  function roomListUpdated() {
+    const { spaces, rooms, directs } = initMatrix.roomList;
+    if (!(
+      spaces.has(navigation.getActiveRoomId())
+      || rooms.has(navigation.getActiveRoomId())
+      || directs.has(navigation.getActiveRoomId()))
+    ) {
+      selectRoom(null);
+    }
+    forceUpdate({});
+  }
+
+  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);
+    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);
+    };
+  }, []);
+
+  return (
+    <>
+      { spaceIds.length !== 0 && <Text className="cat-header" variant="b3">Spaces</Text> }
+      { spaceIds.map((id) => (
+        <Selector
+          key={id}
+          roomId={id}
+          isDM={false}
+          drawerPostie={drawerPostie}
+        />
+      ))}
+
+      { roomIds.length !== 0 && <Text className="cat-header" variant="b3">Channels</Text> }
+      { roomIds.map((id) => (
+        <Selector
+          key={id}
+          roomId={id}
+          isDM={false}
+          drawerPostie={drawerPostie}
+        />
+      )) }
+    </>
+  );
+}
+
+export default Home;

src/app/organisms/navigation/Navigation.jsx

@@ -1,34 +1,14 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import './Navigation.scss';
 
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import { handleTabChange } from '../../../client/action/navigation';
-
 import SideBar from './SideBar';
 import Drawer from './Drawer';
 
 function Navigation() {
-  const [activeTab, changeActiveTab] = useState(navigation.getActiveTab());
-
-  function changeTab(tabId) {
-    handleTabChange(tabId);
-  }
-
-  useEffect(() => {
-    const handleTab = () => {
-      changeActiveTab(navigation.getActiveTab());
-    };
-    navigation.on(cons.events.navigation.TAB_CHANGED, handleTab);
-
-    return () => {
-      navigation.removeListener(cons.events.navigation.TAB_CHANGED, handleTab);
-    };
-  }, []);
   return (
     <div className="navigation">
-      <SideBar tabId={activeTab} changeTab={changeTab} />
-      <Drawer tabId={activeTab} />
+      <SideBar />
+      <Drawer />
     </div>
   );
 }

src/app/organisms/navigation/Selector.jsx

@@ -0,0 +1,76 @@
+/* eslint-disable react/prop-types */
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import initMatrix from '../../../client/initMatrix';
+import { doesRoomHaveUnread } from '../../../util/matrixUtil';
+import { selectRoom } from '../../../client/action/navigation';
+import navigation from '../../../client/state/navigation';
+
+import ChannelSelector from '../../molecules/channel-selector/ChannelSelector';
+
+import HashIC from '../../../../public/res/ic/outlined/hash.svg';
+import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
+import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
+import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
+
+function Selector({ roomId, isDM, drawerPostie }) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  const imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
+
+  const [isSelected, setIsSelected] = useState(navigation.getActiveRoomId() === roomId);
+  const [, forceUpdate] = useState({});
+
+  function selectorChanged(activeRoomId) {
+    setIsSelected(activeRoomId === roomId);
+  }
+  function changeNotificationBadge() {
+    forceUpdate({});
+  }
+
+  useEffect(() => {
+    drawerPostie.subscribe('selector-change', roomId, selectorChanged);
+    drawerPostie.subscribe('unread-change', roomId, changeNotificationBadge);
+    return () => {
+      drawerPostie.unsubscribe('selector-change', roomId);
+      drawerPostie.unsubscribe('unread-change', roomId);
+    };
+  }, []);
+
+  return (
+    <ChannelSelector
+      key={roomId}
+      name={room.name}
+      roomId={roomId}
+      imageSrc={isDM ? imageSrc : null}
+      iconSrc={
+        isDM
+          ? null
+          : (() => {
+            if (room.isSpaceRoom()) {
+              return (room.getJoinRule() === 'invite' ? SpaceLockIC : SpaceIC);
+            }
+            return (room.getJoinRule() === 'invite' ? HashLockIC : HashIC);
+          })()
+      }
+      isSelected={isSelected}
+      isUnread={doesRoomHaveUnread(room)}
+      notificationCount={room.getUnreadNotificationCount('total') || 0}
+      isAlert={room.getUnreadNotificationCount('highlight') !== 0}
+      onClick={() => selectRoom(roomId)}
+    />
+  );
+}
+
+Selector.defaultProps = {
+  isDM: true,
+};
+
+Selector.propTypes = {
+  roomId: PropTypes.string.isRequired,
+  isDM: PropTypes.bool,
+  drawerPostie: PropTypes.shape({}).isRequired,
+};
+
+export default Selector;

src/app/organisms/navigation/SideBar.jsx

@@ -1,12 +1,14 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import './SideBar.scss';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import colorMXID from '../../../util/colorMXID';
 import logout from '../../../client/action/logout';
-import { openInviteList, openPublicChannels, openSettings } from '../../../client/action/navigation';
+import {
+  changeTab, openInviteList, openPublicChannels, openSettings,
+} from '../../../client/action/navigation';
+import navigation from '../../../client/state/navigation';
 
 import ScrollView from '../../atoms/scroll/ScrollView';
 import SidebarAvatar from '../../molecules/sidebar-avatar/SidebarAvatar';
@@ -52,24 +54,30 @@ function ProfileAvatarMenu() {
   );
 }
 
-function SideBar({ tabId, changeTab }) {
+function SideBar() {
   const totalInviteCount = () => initMatrix.roomList.inviteRooms.size
     + initMatrix.roomList.inviteSpaces.size
     + initMatrix.roomList.inviteDirects.size;
 
   const [totalInvites, updateTotalInvites] = useState(totalInviteCount());
+  const [activeTab, setActiveTab] = useState('home');
 
+  function onTabChanged(tabId) {
+    setActiveTab(tabId);
+  }
   function onInviteListChange() {
     updateTotalInvites(totalInviteCount());
   }
 
   useEffect(() => {
+    navigation.on(cons.events.navigation.TAB_CHANGED, onTabChanged);
     initMatrix.roomList.on(
       cons.events.roomList.INVITELIST_UPDATED,
       onInviteListChange,
     );
 
     return () => {
+      navigation.removeListener(cons.events.navigation.TAB_CHANGED, onTabChanged);
       initMatrix.roomList.removeListener(
         cons.events.roomList.INVITELIST_UPDATED,
         onInviteListChange,
@@ -83,8 +91,8 @@ function SideBar({ tabId, changeTab }) {
         <ScrollView invisible>
           <div className="scrollable-content">
             <div className="featured-container">
-              <SidebarAvatar active={tabId === 'channels'} onClick={() => changeTab('channels')} tooltip="Home" iconSrc={HomeIC} />
-              <SidebarAvatar active={tabId === 'dm'} onClick={() => changeTab('dm')} tooltip="People" iconSrc={UserIC} />
+              <SidebarAvatar active={activeTab === 'home'} onClick={() => changeTab('home')} tooltip="Home" iconSrc={HomeIC} />
+              <SidebarAvatar active={activeTab === 'dms'} onClick={() => changeTab('dms')} tooltip="People" iconSrc={UserIC} />
               <SidebarAvatar onClick={() => openPublicChannels()} tooltip="Public channels" iconSrc={HashSearchIC} />
             </div>
             <div className="sidebar-divider" />
@@ -110,9 +118,4 @@ function SideBar({ tabId, changeTab }) {
   );
 }
 
-SideBar.propTypes = {
-  tabId: PropTypes.string.isRequired,
-  changeTab: PropTypes.func.isRequired,
-};
-
 export default SideBar;

src/app/organisms/navigation/common.js

@@ -0,0 +1,21 @@
+import initMatrix from '../../../client/initMatrix';
+
+function AtoZ(aId, bId) {
+  let aName = initMatrix.matrixClient.getRoom(aId).name;
+  let bName = initMatrix.matrixClient.getRoom(bId).name;
+
+  // remove "#" from the room name
+  // To ignore it in sorting
+  aName = aName.replaceAll('#', '');
+  bName = bName.replaceAll('#', '');
+
+  if (aName.toLowerCase() < bName.toLowerCase()) {
+    return -1;
+  }
+  if (aName.toLowerCase() > bName.toLowerCase()) {
+    return 1;
+  }
+  return 0;
+}
+
+export { AtoZ };

src/app/organisms/settings/Settings.jsx

@@ -88,7 +88,7 @@ function AboutSection() {
         <div>
           <Text variant="h2">
             Cinny
-            <span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>v1.2.0</span>
+            <span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>v1.2.1</span>
           </Text>
           <Text>Yet another matrix client</Text>
 

src/client/action/navigation.js

@@ -1,7 +1,7 @@
 import appDispatcher from '../dispatcher';
 import cons from '../state/cons';
 
-function handleTabChange(tabId) {
+function changeTab(tabId) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.CHANGE_TAB,
     tabId,
@@ -71,7 +71,7 @@ function openReadReceipts(roomId, eventId) {
 }
 
 export {
-  handleTabChange,
+  changeTab,
   selectRoom,
   togglePeopleDrawer,
   openInviteList,

src/client/state/RoomList.js

@@ -155,12 +155,13 @@ class RoomList extends EventEmitter {
     this.matrixClient.on('Room.name', () => {
       this.emit(cons.events.roomList.ROOMLIST_UPDATED);
     });
-    this.matrixClient.on('Room.receipt', (event) => {
+    this.matrixClient.on('Room.receipt', (event, room) => {
       if (event.getType() === 'm.receipt') {
-        const evContent = event.getContent();
-        const userId = Object.keys(evContent[Object.keys(evContent)[0]]['m.read'])[0];
-        if (userId !== this.matrixClient.getUserId()) return;
-        this.emit(cons.events.roomList.ROOMLIST_UPDATED);
+        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);
       }
     });
 
@@ -280,8 +281,13 @@ class RoomList extends EventEmitter {
       this.emit(cons.events.roomList.ROOMLIST_UPDATED);
     });
 
-    this.matrixClient.on('Room.timeline', () => {
-      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;
+      this.emit(cons.events.roomList.EVENT_ARRIVED, room.roomId);
     });
   }
 }

src/client/state/cons.js

@@ -50,6 +50,8 @@ const cons = {
       ROOM_JOINED: 'ROOM_JOINED',
       ROOM_LEAVED: 'ROOM_LEAVED',
       ROOM_CREATED: 'ROOM_CREATED',
+      MY_RECEIPT_ARRIVED: 'MY_RECEIPT_ARRIVED',
+      EVENT_ARRIVED: 'EVENT_ARRIVED',
     },
     roomTimeline: {
       EVENT: 'EVENT',

src/client/state/navigation.js

@@ -6,7 +6,7 @@ class Navigation extends EventEmitter {
   constructor() {
     super();
 
-    this.activeTab = 'channels';
+    this.activeTab = 'home';
     this.activeRoomId = null;
     this.isPeopleDrawerVisible = true;
   }
@@ -26,8 +26,9 @@ class Navigation extends EventEmitter {
         this.emit(cons.events.navigation.TAB_CHANGED, this.activeTab);
       },
       [cons.actions.navigation.SELECT_ROOM]: () => {
+        const prevActiveRoomId = this.activeRoomId;
         this.activeRoomId = action.roomId;
-        this.emit(cons.events.navigation.ROOM_SELECTED, this.activeRoomId);
+        this.emit(cons.events.navigation.ROOM_SELECTED, this.activeRoomId, prevActiveRoomId);
       },
       [cons.actions.navigation.TOGGLE_PEOPLE_DRAWER]: () => {
         this.isPeopleDrawerVisible = !this.isPeopleDrawerVisible;

src/util/Postie.js

@@ -0,0 +1,91 @@
+class Postie {
+  constructor() {
+    this._topics = new Map();
+  }
+
+  _getSubscribers(topic) {
+    const subscribers = this._topics.get(topic);
+    if (typeof subscribers === 'undefined') {
+      throw new Error(`Topic:"${topic}" doesn't exist.`);
+    }
+    return subscribers;
+  }
+
+  _getSubscriber(topic, address) {
+    const subscribers = this._getSubscribers(topic);
+    const subscriber = subscribers.get(address);
+    if (typeof subscriber === 'undefined') {
+      throw new Error(`Subscriber on topic:"${topic}" at address:"${address}" doesn't exist.`);
+    }
+    return subscriber;
+  }
+
+  hasTopic(topic) {
+    return typeof this._topics.get(topic) !== 'undefined';
+  }
+
+  hasSubscriber(topic, address) {
+    const subscribers = this._getSubscribers(topic);
+    return typeof subscribers.get(address) !== 'undefined';
+  }
+
+  hasTopicAndSubscriber(topic, address) {
+    return (this.isTopicExist(topic))
+      ? this.isSubscriberExist(topic, address)
+      : false;
+  }
+
+  /**
+   * @param {string} topic - Subscription topic
+   * @param {string} address - Address of subscriber
+   * @param {function} inbox - The inbox function to receive post data
+   */
+  subscribe(topic, address, inbox) {
+    if (typeof inbox !== 'function') {
+      throw new TypeError('Inbox  must be a function.');
+    }
+
+    if (typeof this._topics.get(topic) === 'undefined') {
+      this._topics.set(topic, new Map());
+    }
+    const subscribers = this._topics.get(topic);
+    if (subscribers.get(address)) {
+      throw new Error(`Subscription on topic:"${topic}" at address:"${address}" already exist.`);
+    }
+    subscribers.set(address, inbox);
+  }
+
+  unsubscribe(topic, address) {
+    const subscribers = this._getSubscribers(topic);
+    if (subscribers.has(address)) {
+      subscribers.delete(address);
+    } else throw new Error(`Unable to unsubscribe. Subscriber on topic:"${topic}" at address:"${address}" doesn't exist`);
+    if (subscribers.size === 0) {
+      this._topics.delete(topic);
+    }
+  }
+
+  /**
+   * @param {string} topic - Subscription topic
+   * @param {string|string[]} address - Address of subscriber
+   * @param {*} data - Data to deliver to subscriber
+   */
+  post(topic, address, data) {
+    const sendPost = (subscriber, addr) => {
+      if (typeof subscriber === 'undefined') {
+        throw new Error(`Unable to post on topic:"${topic}" at address:"${addr}". Subscriber doesn't exist.`);
+      }
+      subscriber(data);
+    };
+    if (Array.isArray(address)) {
+      const subscribers = this._getSubscribers(topic);
+      address.forEach((addr) => {
+        sendPost(subscribers.get(addr), addr);
+      });
+      return;
+    }
+    sendPost(this._getSubscriber(topic, address), address);
+  }
+}
+
+export default Postie;