Merge branch 'ajbura:dev' into profile-editor

src/app/organisms/navigation/Directs.jsx

@@ -12,7 +12,7 @@ import { AtoZ } from './common';
 
 const drawerPostie = new Postie();
 function Directs() {
-  const { roomList } = initMatrix;
+  const { roomList, notifications } = initMatrix;
   const directIds = [...roomList.directs].sort(AtoZ);
 
   const [, forceUpdate] = useState({});
@@ -26,10 +26,11 @@ function Directs() {
     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() {
@@ -47,13 +48,11 @@ function Directs() {
   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);
     };
   }, []);
 

src/app/organisms/navigation/DrawerBreadcrumb.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './DrawerBreadcrumb.scss';
 
@@ -6,51 +6,108 @@ import initMatrix from '../../../client/initMatrix';
 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>
               );

src/app/organisms/navigation/DrawerBreadcrumb.scss

@@ -51,6 +51,14 @@
       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 {

src/app/organisms/navigation/Home.jsx

@@ -15,7 +15,7 @@ import { AtoZ } from './common';
 const drawerPostie = new Postie();
 function Home({ spaceId }) {
   const [, forceUpdate] = useState({});
-  const { roomList } = initMatrix;
+  const { roomList, notifications } = initMatrix;
   let spaceIds = [];
   let roomIds = [];
   let directIds = [];
@@ -40,10 +40,11 @@ function Home({ spaceId }) {
     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() {
@@ -61,13 +62,11 @@ function Home({ spaceId }) {
   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);
     };
   }, []);
 

src/app/organisms/navigation/Selector.jsx

@@ -3,9 +3,10 @@ import React, { useState, useEffect } from 'react';
 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, abbreviateNumber } from '../../../util/common';
 
 import IconButton from '../../atoms/button/IconButton';
 import RoomSelector from '../../molecules/room-selector/RoomSelector';
@@ -16,11 +17,13 @@ import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
 import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
 import StarIC from '../../../../public/res/ic/outlined/star.svg';
 import FilledStarIC from '../../../../public/res/ic/filled/star.svg';
+import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
 
 function Selector({
   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;
@@ -44,43 +47,56 @@ function Selector({
     };
   }, []);
 
+  if (room.isSpaceRoom()) {
+    return (
+      <RoomSelector
+        key={roomId}
+        name={room.name}
+        roomId={roomId}
+        iconSrc={room.getJoinRule() === 'invite' ? SpaceLockIC : SpaceIC}
+        isUnread={noti.hasNoti(roomId)}
+        notificationCount={abbreviateNumber(noti.getTotalNoti(roomId))}
+        isAlert={noti.getHighlightNoti(roomId) !== 0}
+        onClick={onClick}
+        options={(
+          <IconButton
+            size="extra-small"
+            variant={initMatrix.roomList.spaceShortcut.has(roomId) ? 'positive' : 'surface'}
+            tooltip={initMatrix.roomList.spaceShortcut.has(roomId) ? 'Remove favourite' : 'Favourite'}
+            tooltipPlacement="right"
+            src={initMatrix.roomList.spaceShortcut.has(roomId) ? FilledStarIC : StarIC}
+            onClick={() => {
+              if (initMatrix.roomList.spaceShortcut.has(roomId)) deleteSpaceShortcut(roomId);
+              else createSpaceShortcut(roomId);
+              forceUpdate({});
+            }}
+          />
+        )}
+      />
+    );
+  }
+
   return (
     <RoomSelector
       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);
-          })()
-      }
+      // 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={(
-        !room.isSpaceRoom()
-          ? null
-          : (
-            <IconButton
-              size="extra-small"
-              variant={initMatrix.roomList.spaceShortcut.has(roomId) ? 'positive' : 'surface'}
-              tooltip={initMatrix.roomList.spaceShortcut.has(roomId) ? 'Remove favourite' : 'Favourite'}
-              src={initMatrix.roomList.spaceShortcut.has(roomId) ? FilledStarIC : StarIC}
-              onClick={() => {
-                if (initMatrix.roomList.spaceShortcut.has(roomId)) deleteSpaceShortcut(roomId);
-                else createSpaceShortcut(roomId);
-                forceUpdate({});
-              }}
-            />
-          )
+        <IconButton
+          size="extra-small"
+          tooltip="Options"
+          tooltipPlacement="right"
+          src={VerticalMenuIC}
+          onClick={(e) => openRoomOptions(getEventCords(e), roomId)}
+        />
       )}
     />
   );

src/app/organisms/navigation/SideBar.jsx

@@ -9,6 +9,7 @@ import {
   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';
@@ -55,7 +56,7 @@ function ProfileAvatarMenu() {
 }
 
 function SideBar() {
-  const { roomList } = initMatrix;
+  const { roomList, notifications } = initMatrix;
   const mx = initMatrix.matrixClient;
   const totalInviteCount = () => roomList.inviteRooms.size
     + roomList.inviteSpaces.size
@@ -74,33 +75,83 @@ function SideBar() {
   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" />
@@ -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() {
         <div className="sticky-container">
           { totalInvites !== 0 && (
             <SidebarAvatar
-              notifyCount={totalInvites}
+              isUnread
+              notificationCount={totalInvites}
+              isAlert
               onClick={() => openInviteList()}
               tooltip="Invites"
               iconSrc={InviteIC}

src/app/organisms/room-optons/RoomOptions.jsx

@@ -0,0 +1,229 @@
+import React, { useState, useEffect, useRef } from 'react';
+import './RoomOptions.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { openInviteUser } from '../../../client/action/navigation';
+import * as roomActions from '../../../client/action/room';
+
+import ContextMenu, { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
+
+import BellIC from '../../../../public/res/ic/outlined/bell.svg';
+import BellRingIC from '../../../../public/res/ic/outlined/bell-ring.svg';
+import BellPingIC from '../../../../public/res/ic/outlined/bell-ping.svg';
+import BellOffIC from '../../../../public/res/ic/outlined/bell-off.svg';
+import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
+import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
+
+function getNotifState(roomId) {
+  const mx = initMatrix.matrixClient;
+  const pushRule = mx.getRoomPushRule('global', roomId);
+
+  if (typeof pushRule === 'undefined') {
+    const overridePushRules = mx.getAccountData('m.push_rules')?.getContent()?.global?.override;
+    if (typeof overridePushRules === 'undefined') return 0;
+
+    const isMuteOverride = overridePushRules.find((rule) => (
+      rule.rule_id === roomId
+      && rule.actions[0] === 'dont_notify'
+      && rule.conditions[0].kind === 'event_match'
+    ));
+
+    return isMuteOverride ? cons.notifs.MUTE : cons.notifs.DEFAULT;
+  }
+  if (pushRule.actions[0] === 'notify') return cons.notifs.ALL_MESSAGES;
+  return cons.notifs.MENTIONS_AND_KEYWORDS;
+}
+
+function setRoomNotifMute(roomId) {
+  const mx = initMatrix.matrixClient;
+  const roomPushRule = mx.getRoomPushRule('global', roomId);
+
+  const promises = [];
+  if (roomPushRule) {
+    promises.push(mx.deletePushRule('global', 'room', roomPushRule.rule_id));
+  }
+
+  promises.push(mx.addPushRule('global', 'override', roomId, {
+    conditions: [
+      {
+        kind: 'event_match',
+        key: 'room_id',
+        pattern: roomId,
+      },
+    ],
+    actions: [
+      'dont_notify',
+    ],
+  }));
+
+  return Promise.all(promises);
+}
+
+function setRoomNotifsState(newState, roomId) {
+  const mx = initMatrix.matrixClient;
+  const promises = [];
+
+  const oldState = getNotifState(roomId);
+  if (oldState === cons.notifs.MUTE) {
+    promises.push(mx.deletePushRule('global', 'override', roomId));
+  }
+
+  if (newState === cons.notifs.DEFAULT) {
+    const roomPushRule = mx.getRoomPushRule('global', roomId);
+    if (roomPushRule) {
+      promises.push(mx.deletePushRule('global', 'room', roomPushRule.rule_id));
+    }
+    return Promise.all(promises);
+  }
+
+  if (newState === cons.notifs.MENTIONS_AND_KEYWORDS) {
+    promises.push(mx.addPushRule('global', 'room', roomId, {
+      actions: [
+        'dont_notify',
+      ],
+    }));
+    promises.push(mx.setPushRuleEnabled('global', 'room', roomId, true));
+    return Promise.all(promises);
+  }
+
+  // cons.notifs.ALL_MESSAGES
+  promises.push(mx.addPushRule('global', 'room', roomId, {
+    actions: [
+      'notify',
+      {
+        set_tweak: 'sound',
+        value: 'default',
+      },
+    ],
+  }));
+
+  promises.push(mx.setPushRuleEnabled('global', 'room', roomId, true));
+
+  return Promise.all(promises);
+}
+
+function setRoomNotifPushRule(notifState, roomId) {
+  if (notifState === cons.notifs.MUTE) {
+    setRoomNotifMute(roomId);
+    return;
+  }
+  setRoomNotifsState(notifState, roomId);
+}
+
+let isRoomOptionVisible = false;
+let roomId = null;
+function RoomOptions() {
+  const openerRef = useRef(null);
+  const [notifState, setNotifState] = useState(cons.notifs.DEFAULT);
+
+  function openRoomOptions(cords, rId) {
+    if (roomId !== null || isRoomOptionVisible) {
+      roomId = null;
+      if (cords.detail === 0) openerRef.current.click();
+      return;
+    }
+    openerRef.current.style.transform = `translate(${cords.x}px, ${cords.y}px)`;
+    roomId = rId;
+    setNotifState(getNotifState(roomId));
+    openerRef.current.click();
+  }
+
+  function afterRoomOptionsToggle(isVisible) {
+    isRoomOptionVisible = isVisible;
+    if (!isVisible) {
+      setTimeout(() => {
+        if (!isRoomOptionVisible) roomId = null;
+      }, 500);
+    }
+  }
+
+  useEffect(() => {
+    navigation.on(cons.events.navigation.ROOMOPTIONS_OPENED, openRoomOptions);
+    return () => {
+      navigation.on(cons.events.navigation.ROOMOPTIONS_OPENED, openRoomOptions);
+    };
+  }, []);
+
+  const handleInviteClick = () => openInviteUser(roomId);
+  const handleLeaveClick = () => {
+    if (confirm('Are you really want to leave this room?')) roomActions.leave(roomId);
+  };
+
+  function setNotif(nState, currentNState) {
+    if (nState === currentNState) return;
+    setRoomNotifPushRule(nState, roomId);
+    setNotifState(nState);
+  }
+
+  return (
+    <ContextMenu
+      afterToggle={afterRoomOptionsToggle}
+      maxWidth={298}
+      content={(toggleMenu) => (
+        <>
+          <MenuHeader>{`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`}</MenuHeader>
+          <MenuItem
+            iconSrc={AddUserIC}
+            onClick={() => {
+              handleInviteClick(); toggleMenu();
+            }}
+          >
+            Invite
+          </MenuItem>
+          <MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={handleLeaveClick}>Leave</MenuItem>
+          <MenuHeader>Notification</MenuHeader>
+          <MenuItem
+            variant={notifState === cons.notifs.DEFAULT ? 'positive' : 'surface'}
+            iconSrc={BellIC}
+            onClick={() => setNotif(cons.notifs.DEFAULT, notifState)}
+          >
+            Default
+          </MenuItem>
+          <MenuItem
+            variant={notifState === cons.notifs.ALL_MESSAGES ? 'positive' : 'surface'}
+            iconSrc={BellRingIC}
+            onClick={() => setNotif(cons.notifs.ALL_MESSAGES, notifState)}
+          >
+            All messages
+          </MenuItem>
+          <MenuItem
+            variant={notifState === cons.notifs.MENTIONS_AND_KEYWORDS ? 'positive' : 'surface'}
+            iconSrc={BellPingIC}
+            onClick={() => setNotif(cons.notifs.MENTIONS_AND_KEYWORDS, notifState)}
+          >
+            Mentions & Keywords
+          </MenuItem>
+          <MenuItem
+            variant={notifState === cons.notifs.MUTE ? 'positive' : 'surface'}
+            iconSrc={BellOffIC}
+            onClick={() => setNotif(cons.notifs.MUTE, notifState)}
+          >
+            Mute
+          </MenuItem>
+        </>
+      )}
+      render={(toggleMenu) => (
+        <input
+          ref={openerRef}
+          onClick={toggleMenu}
+          type="button"
+          style={{
+            width: '32px',
+            height: '32px',
+            backgroundColor: 'transparent',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            padding: 0,
+            border: 'none',
+            visibility: 'hidden',
+          }}
+        />
+      )}
+    />
+  );
+}
+
+export default RoomOptions;

src/app/organisms/room-optons/RoomOptions.scss

@@ -0,0 +1,20 @@
+.context-menu__item {
+  position: relative;
+}
+
+.context-menu__item .btn-positive::before {
+  content: '';
+  display: inline-block;
+  width: 3px;
+  height: 12px;
+  background: var(--bg-positive);
+  border-radius: 0 4px 4px 0;
+  position: absolute;
+  left: 0;
+
+  [dir=rtl] & {
+    left: unset;
+    right: 0;
+    border-radius: 4px 0 0 4px;
+  }
+}

src/app/organisms/room/RoomViewContent.jsx

@@ -10,7 +10,7 @@ import cons from '../../../client/state/cons';
 import { redactEvent, sendReaction } from '../../../client/action/roomTimeline';
 import { getUsername, getUsernameOfRoomMember, doesRoomHaveUnread } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
-import { diffMinutes, isNotInSameDay } from '../../../util/common';
+import { diffMinutes, isNotInSameDay, getEventCords } from '../../../util/common';
 import { openEmojiBoard, openReadReceipts } from '../../../client/action/navigation';
 
 import Divider from '../../atoms/divider/Divider';
@@ -176,12 +176,7 @@ function toggleEmoji(roomId, eventId, emojiKey, roomTimeline) {
 }
 
 function pickEmoji(e, roomId, eventId, roomTimeline) {
-  const boxInfo = e.target.getBoundingClientRect();
-  openEmojiBoard({
-    x: boxInfo.x,
-    y: boxInfo.y,
-    detail: e.detail,
-  }, (emoji) => {
+  openEmojiBoard(getEventCords(e), (emoji) => {
     toggleEmoji(roomId, eventId, emoji.unicode, roomTimeline);
     e.target.click();
   });

src/app/organisms/room/RoomViewHeader.jsx

@@ -2,20 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import initMatrix from '../../../client/initMatrix';
-import { togglePeopleDrawer, openInviteUser } from '../../../client/action/navigation';
-import * as roomActions from '../../../client/action/room';
+import { togglePeopleDrawer, openRoomOptions } from '../../../client/action/navigation';
 import colorMXID from '../../../util/colorMXID';
+import { getEventCords } from '../../../util/common';
 
 import Text from '../../atoms/text/Text';
 import IconButton from '../../atoms/button/IconButton';
 import Header, { TitleWrapper } from '../../atoms/header/Header';
 import Avatar from '../../atoms/avatar/Avatar';
-import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
 
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
-import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
-import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
 
 function RoomViewHeader({ roomId }) {
   const mx = initMatrix.matrixClient;
@@ -33,24 +30,10 @@ function RoomViewHeader({ roomId }) {
         { typeof roomTopic !== 'undefined' && <p title={roomTopic} className="text text-b3">{roomTopic}</p>}
       </TitleWrapper>
       <IconButton onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
-      <ContextMenu
-        placement="bottom"
-        content={(toogleMenu) => (
-          <>
-            <MenuHeader>Options</MenuHeader>
-            {/* <MenuBorder /> */}
-            <MenuItem
-              iconSrc={AddUserIC}
-              onClick={() => {
-                openInviteUser(roomId); toogleMenu();
-              }}
-            >
-              Invite
-            </MenuItem>
-            <MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={() => roomActions.leave(roomId)}>Leave</MenuItem>
-          </>
-        )}
-        render={(toggleMenu) => <IconButton onClick={toggleMenu} tooltip="Options" src={VerticalMenuIC} />}
+      <IconButton
+        onClick={(e) => openRoomOptions(getEventCords(e), roomId)}
+        tooltip="Options"
+        src={VerticalMenuIC}
       />
     </Header>
   );

src/app/organisms/room/RoomViewInput.jsx

@@ -9,7 +9,7 @@ import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import settings from '../../../client/state/settings';
 import { openEmojiBoard } from '../../../client/action/navigation';
-import { bytesToSize } from '../../../util/common';
+import { bytesToSize, getEventCords } from '../../../util/common';
 import { getUsername } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
 
@@ -327,12 +327,10 @@ function RoomViewInput({
         <div ref={rightOptionsRef} className="room-input__option-container">
           <IconButton
             onClick={(e) => {
-              const boxInfo = e.target.getBoundingClientRect();
-              openEmojiBoard({
-                x: boxInfo.x + (document.dir === 'rtl' ? -80 : 80),
-                y: boxInfo.y - 250,
-                detail: e.detail,
-              }, addEmoji);
+              const cords = getEventCords(e);
+              cords.x += (document.dir === 'rtl' ? -80 : 80);
+              cords.y -= 250;
+              openEmojiBoard(cords, addEmoji);
             }}
             tooltip="Emoji"
             src={EmojiIC}