v2.0.0

Bumps [webpack-dev-server](https://github.com/webpack/webpack-dev-server) from 4.8.1 to 4.9.0.
- [Release notes](https://github.com/webpack/webpack-dev-server/releases)
- [Changelog](https://github.com/webpack/webpack-dev-server/blob/master/CHANGELOG.md)
- [Commits](https://github.com/webpack/webpack-dev-server/compare/v4.8.1...v4.9.0)

---
updated-dependencies:
- dependency-name: webpack-dev-server
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/workflows/deploy-pull-request.yml

@@ -56,7 +56,7 @@ jobs:
             console.log(`::set-output name=prnumber::${pr.number}`);
       - name: Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@v1.2.3
+        uses: nwtgck/actions-netlify@b7c1504e00c6b8a249d1848cc1b522a4865eed99
         with:
           publish-dir: dist
           deploy-message: "Deploy from GitHub Actions"
@@ -68,7 +68,7 @@ jobs:
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE3_ID }}
         timeout-minutes: 1
       - name: Edit PR Description
-        uses: Beakyn/gha-comment-pull-request@v1.0.2
+        uses: Beakyn/gha-comment-pull-request@2167a7aee24f9e61ce76a23039f322e49a990409
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:

.github/workflows/netlify-dev.yml

@@ -14,7 +14,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2
       - name: Build and deploy to Netlify
-        uses: jsmrcaga/action-netlify-deploy@v1.7.2
+        uses: jsmrcaga/action-netlify-deploy@fb6a5f936a4b06a8f7793e69fc5a022ffe39807a
         with:
           install_command: "npm ci"
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

.github/workflows/prod-deploy.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2
       - name: Build and deploy to Netlify
-        uses: jsmrcaga/action-netlify-deploy@v1.7.2
+        uses: jsmrcaga/action-netlify-deploy@fb6a5f936a4b06a8f7793e69fc5a022ffe39807a
         with:
           install_command: "npm ci"
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
@@ -25,11 +25,19 @@ jobs:
         run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
       - name: Create tar.gz
         run: tar -czvf cinny-${{ steps.vars.outputs.tag }}.tar.gz dist
+      - name: Sign tar.gz
+        uses: actionhippie/gpgsign@4e28208b142cae93e1582401dcda1cf79e4f72c0
+        with:
+          private_key: ${{ secrets.GNUPG_KEY }}
+          passphrase: ${{ secrets.GNUPG_PASSPHRASE }}
+          detach_sign: true
+          files: cinny-${{ steps.vars.outputs.tag }}.tar.gz
       - name: Upload tagged release
-        uses: softprops/action-gh-release@v0.1.14
+        uses: softprops/action-gh-release@1e07f4398721186383de40550babbdf2b84acfc5
         with:
           files: |
             cinny-${{ steps.vars.outputs.tag }}.tar.gz
+            cinny-${{ steps.vars.outputs.tag }}.tar.gz.asc
 
   push_to_dockerhub:
     name: Push Docker image to Docker Hub
@@ -44,7 +52,7 @@ jobs:
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@v3.7.0
+        uses: docker/metadata-action@v3.8.0
         with:
           images: ajbura/cinny
       - name: Build and push Docker image

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Ajay Bura (ajbura) and contributors
+Copyright (c) 2021 Ajay Bura (ajbura)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -11,7 +11,7 @@
 
 Cinny is a [Matrix](https://matrix.org) client focusing primarily on simple, elegant and secure interface.
 
-![preview](https://github.com/ajbura/cinny-site/blob/master/assets/preview-light.png)
+![preview](https://github.com/cinnyapp/cinny-site/blob/main/assets/preview-light.png)
 
 ## Building and Running
 
@@ -59,7 +59,7 @@ To set default Homeserver on login and register page, place a customized [`confi
 
 ## License
 
-Copyright (c) 2021 Ajay Bura (ajbura) and contributors
+Copyright (c) 2021 Ajay Bura (ajbura)
 
 Code licensed under the MIT License: <http://opensource.org/licenses/MIT>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "1.8.2",
+  "version": "2.0.0",
   "description": "Yet another matrix client",
   "main": "index.js",
   "engines": {
@@ -15,7 +15,7 @@
   "author": "Ajay Bura",
   "license": "MIT",
   "dependencies": {
-    "@fontsource/inter": "^4.5.7",
+    "@fontsource/inter": "^4.5.10",
     "@fontsource/roboto": "^4.5.5",
     "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
     "@tippyjs/react": "^4.2.6",
@@ -29,7 +29,7 @@
     "html-react-parser": "^1.4.12",
     "katex": "^0.15.3",
     "linkifyjs": "^2.1.9",
-    "matrix-js-sdk": "^17.0.0",
+    "matrix-js-sdk": "^17.1.0",
     "micromark": "^3.0.10",
     "micromark-extension-gfm": "^2.0.1",
     "micromark-extension-math": "^2.0.2",
@@ -43,14 +43,14 @@
     "react-dnd-html5-backend": "^15.1.3",
     "react-dom": "^17.0.2",
     "react-google-recaptcha": "^2.1.0",
-    "react-modal": "^3.14.4",
+    "react-modal": "^3.15.1",
     "sanitize-html": "^2.7.0",
     "tippy.js": "^6.3.7",
     "twemoji": "^14.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.9",
-    "@babel/preset-env": "^7.16.11",
+    "@babel/core": "^7.17.10",
+    "@babel/preset-env": "^7.17.10",
     "@babel/preset-react": "^7.16.7",
     "assert": "^2.0.0",
     "babel-loader": "^8.2.5",
@@ -66,14 +66,14 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "favicons": "^6.2.2",
     "favicons-webpack-plugin": "^5.0.2",
     "html-loader": "^3.1.0",
     "html-webpack-plugin": "^5.3.1",
     "mini-css-extract-plugin": "^2.6.0",
     "path-browserify": "^1.0.1",
-    "sass": "^1.50.1",
+    "sass": "^1.51.0",
     "sass-loader": "^12.6.0",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
@@ -81,7 +81,7 @@
     "util": "^0.12.4",
     "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.8.1",
+    "webpack-dev-server": "^4.9.0",
     "webpack-merge": "^5.7.3"
   }
 }

public/index.html

@@ -18,5 +18,11 @@
 </head>
 <body id="appBody">
     <div id="root"></div>
+    <audio id="notificationSound">
+        <source src="./sound/notification.ogg" type="audio/ogg" />
+    </audio>
+    <audio id="inviteSound">
+        <source src="./sound/invite.ogg" type="audio/ogg" />
+    </audio>
 </body>
 </html>

src/app/molecules/room-intro/RoomIntro.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './RoomIntro.scss';
 
-import { twemojify } from '../../../util/twemojify';
 import colorMXID from '../../../util/colorMXID';
 
 import Text from '../../atoms/text/Text';
@@ -15,8 +14,8 @@ function RoomIntro({
     <div className="room-intro">
       <Avatar imageSrc={avatarSrc} text={name} bgColor={colorMXID(roomId)} size="large" />
       <div className="room-intro__content">
-        <Text className="room-intro__name" variant="h1" weight="medium" primary>{twemojify(heading)}</Text>
-        <Text className="room-intro__desc" variant="b1">{twemojify(desc, undefined, true)}</Text>
+        <Text className="room-intro__name" variant="h1" weight="medium" primary>{heading}</Text>
+        <Text className="room-intro__desc" variant="b1">{desc}</Text>
         { time !== null && <Text className="room-intro__time" variant="b3">{time}</Text>}
       </div>
     </div>
@@ -35,9 +34,9 @@ RoomIntro.propTypes = {
     PropTypes.bool,
   ]),
   name: PropTypes.string.isRequired,
-  heading: PropTypes.string.isRequired,
-  desc: PropTypes.string.isRequired,
-  time: PropTypes.string,
+  heading: PropTypes.node.isRequired,
+  desc: PropTypes.node.isRequired,
+  time: PropTypes.node,
 };
 
 export default RoomIntro;

src/app/organisms/emoji-verification/EmojiVerification.jsx

@@ -0,0 +1,200 @@
+/* eslint-disable react/prop-types */
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import './EmojiVerification.scss';
+import { twemojify } from '../../../util/twemojify';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { hasPrivateKey } from '../../../client/state/secretStorageKeys';
+import { getDefaultSSKey, isCrossVerified } from '../../../util/matrixUtil';
+
+import Text from '../../atoms/text/Text';
+import IconButton from '../../atoms/button/IconButton';
+import Button from '../../atoms/button/Button';
+import Spinner from '../../atoms/spinner/Spinner';
+import Dialog from '../../molecules/dialog/Dialog';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import { useStore } from '../../hooks/useStore';
+import { accessSecretStorage } from '../settings/SecretStorageAccess';
+
+function EmojiVerificationContent({ data, requestClose }) {
+  const [sas, setSas] = useState(null);
+  const [process, setProcess] = useState(false);
+  const { request, targetDevice } = data;
+  const mx = initMatrix.matrixClient;
+  const mountStore = useStore();
+  const beginStore = useStore();
+
+  const beginVerification = async () => {
+    if (
+      isCrossVerified(mx.deviceId)
+      && (mx.getCrossSigningId() === null || await mx.crypto.crossSigningInfo.isStoredInKeyCache('self_signing') === false)
+    ) {
+      if (!hasPrivateKey(getDefaultSSKey())) {
+        const keyData = await accessSecretStorage('Emoji verification');
+        if (!keyData) {
+          request.cancel();
+          return;
+        }
+      }
+      await mx.checkOwnCrossSigningTrust();
+    }
+    setProcess(true);
+    await request.accept();
+
+    const verifier = request.beginKeyVerification('m.sas.v1', targetDevice);
+
+    const handleVerifier = (sasData) => {
+      verifier.off('show_sas', handleVerifier);
+      if (!mountStore.getItem()) return;
+      setSas(sasData);
+      setProcess(false);
+    };
+    verifier.on('show_sas', handleVerifier);
+    await verifier.verify();
+  };
+
+  const sasMismatch = () => {
+    sas.mismatch();
+    setProcess(true);
+  };
+
+  const sasConfirm = () => {
+    sas.confirm();
+    setProcess(true);
+  };
+
+  useEffect(() => {
+    mountStore.setItem(true);
+    const handleChange = () => {
+      if (request.done || request.cancelled) {
+        requestClose();
+        return;
+      }
+      if (targetDevice && !beginStore.getItem()) {
+        beginStore.setItem(true);
+        beginVerification();
+      }
+    };
+
+    if (request === null) return null;
+    const req = request;
+    req.on('change', handleChange);
+    return () => {
+      req.off('change', handleChange);
+      if (req.cancelled === false && req.done === false) {
+        req.cancel();
+      }
+    };
+  }, [request]);
+
+  const renderWait = () => (
+    <>
+      <Spinner size="small" />
+      <Text>Waiting for response from other device...</Text>
+    </>
+  );
+
+  if (sas !== null) {
+    return (
+      <div className="emoji-verification__content">
+        <Text>Confirm the emoji below are displayed on both devices, in the same order:</Text>
+        <div className="emoji-verification__emojis">
+          {sas.sas.emoji.map((emoji, i) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <div className="emoji-verification__emoji-block" key={`${emoji[1]}-${i}`}>
+              <Text variant="h1">{twemojify(emoji[0])}</Text>
+              <Text>{emoji[1]}</Text>
+            </div>
+          ))}
+        </div>
+        <div className="emoji-verification__buttons">
+          {process ? renderWait() : (
+            <>
+              <Button variant="primary" onClick={sasConfirm}>They match</Button>
+              <Button onClick={sasMismatch}>{'They don\'t match'}</Button>
+            </>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  if (targetDevice) {
+    return (
+      <div className="emoji-verification__content">
+        <Text>Please accept the request from other device.</Text>
+        <div className="emoji-verification__buttons">
+          {renderWait()}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="emoji-verification__content">
+      <Text>Click accept to start the verification process.</Text>
+      <div className="emoji-verification__buttons">
+        {
+          process
+            ? renderWait()
+            : <Button variant="primary" onClick={beginVerification}>Accept</Button>
+        }
+      </div>
+    </div>
+  );
+}
+EmojiVerificationContent.propTypes = {
+  data: PropTypes.shape({}).isRequired,
+  requestClose: PropTypes.func.isRequired,
+};
+
+function useVisibilityToggle() {
+  const [data, setData] = useState(null);
+  const mx = initMatrix.matrixClient;
+
+  useEffect(() => {
+    const handleOpen = (request, targetDevice) => {
+      setData({ request, targetDevice });
+    };
+    navigation.on(cons.events.navigation.EMOJI_VERIFICATION_OPENED, handleOpen);
+    mx.on('crypto.verification.request', handleOpen);
+    return () => {
+      navigation.removeListener(cons.events.navigation.EMOJI_VERIFICATION_OPENED, handleOpen);
+      mx.removeListener('crypto.verification.request', handleOpen);
+    };
+  }, []);
+
+  const requestClose = () => setData(null);
+
+  return [data, requestClose];
+}
+
+function EmojiVerification() {
+  const [data, requestClose] = useVisibilityToggle();
+
+  return (
+    <Dialog
+      isOpen={data !== null}
+      className="emoji-verification"
+      title={(
+        <Text variant="s1" weight="medium" primary>
+          Emoji verification
+        </Text>
+      )}
+      contentOptions={<IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />}
+      onRequestClose={requestClose}
+    >
+      {
+        data !== null
+          ? <EmojiVerificationContent data={data} requestClose={requestClose} />
+          : <div />
+      }
+    </Dialog>
+  );
+}
+
+export default EmojiVerification;

src/app/organisms/emoji-verification/EmojiVerification.scss

@@ -0,0 +1,35 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
+.emoji-verification {
+  &__content {
+    padding: var(--sp-normal);
+    @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-normal);
+  }
+
+  &__emojis {
+    margin: var(--sp-loose) 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    gap: var(--sp-extra-tight);
+    flex-wrap: wrap;
+  }
+
+  &__emoji-block {
+    @extend .cp-fx__column;
+    flex: 1;
+    align-items: center;
+    gap: var(--sp-extra-tight);
+    white-space: nowrap;
+    text-transform: capitalize;
+  }
+
+  &__buttons {
+    display: flex;
+    gap: var(--sp-normal);
+  }
+}

src/app/organisms/invite-list/InviteList.jsx

@@ -56,9 +56,10 @@ function InviteList({ isOpen, onRequestClose }) {
   function renderRoomTile(roomId) {
     const mx = initMatrix.matrixClient;
     const myRoom = mx.getRoom(roomId);
+    if (!myRoom) return null;
     const roomName = myRoom.name;
     let roomAlias = myRoom.getCanonicalAlias();
-    if (roomAlias === null) roomAlias = myRoom.roomId;
+    if (!roomAlias) roomAlias = myRoom.roomId;
     const inviterName = myRoom.getMember(mx.getUserId())?.events?.member?.getSender?.() ?? '';
     return (
       <RoomTile
@@ -97,12 +98,13 @@ function InviteList({ isOpen, onRequestClose }) {
         {
           Array.from(initMatrix.roomList.inviteDirects).map((roomId) => {
             const myRoom = initMatrix.matrixClient.getRoom(roomId);
+            if (myRoom === null) return null;
             const roomName = myRoom.name;
             return (
               <RoomTile
                 key={myRoom.roomId}
                 name={roomName}
-                id={myRoom.getDMInviter()}
+                id={myRoom.getDMInviter() || roomId}
                 options={
                   procInvite.has(myRoom.roomId)
                     ? (<Spinner size="small" />)

src/app/organisms/invite-user/InviteUser.jsx

@@ -103,6 +103,18 @@ function InviteUser({
     updateIsSearching(false);
   }
 
+  async function hasDevices(userId) {
+    try {
+      const usersDeviceMap = await mx.downloadKeys([userId, mx.getUserId()]);
+      return Object.values(usersDeviceMap).every((userDevices) =>
+        Object.keys(userDevices).length > 0,
+      );
+    } catch (e) {
+      console.error("Error determining if it's possible to encrypt to all users: ", e);
+      return false;
+    }
+  }
+
   async function createDM(userId) {
     if (mx.getUserId() === userId) return;
     const dmRoomId = hasDMWith(userId);
@@ -117,7 +129,7 @@ function InviteUser({
       procUserError.delete(userId);
       updateUserProcError(getMapCopy(procUserError));
 
-      const result = await roomActions.createDM(userId);
+      const result = await roomActions.createDM(userId, await hasDevices(userId));
       roomIdToUserId.set(result.room_id, userId);
       updateRoomIdToUserId(getMapCopy(roomIdToUserId));
     } catch (e) {

src/app/organisms/join-alias/JoinAlias.jsx

@@ -0,0 +1,155 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import './JoinAlias.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { join } from '../../../client/action/room';
+import { selectRoom, selectSpace } from '../../../client/action/navigation';
+
+import Text from '../../atoms/text/Text';
+import IconButton from '../../atoms/button/IconButton';
+import Button from '../../atoms/button/Button';
+import Input from '../../atoms/input/Input';
+import Spinner from '../../atoms/spinner/Spinner';
+import Dialog from '../../molecules/dialog/Dialog';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+import { useStore } from '../../hooks/useStore';
+
+const ALIAS_OR_ID_REG = /^[#|!].+:.+\..+$/;
+
+function JoinAliasContent({ term, requestClose }) {
+  const [process, setProcess] = useState(false);
+  const [error, setError] = useState(undefined);
+  const [lastJoinId, setLastJoinId] = useState(undefined);
+
+  const mx = initMatrix.matrixClient;
+  const mountStore = useStore();
+
+  const openRoom = (roomId) => {
+    const room = mx.getRoom(roomId);
+    if (!room) return;
+    if (room.isSpaceRoom()) selectSpace(roomId);
+    else selectRoom(roomId);
+    requestClose();
+  };
+
+  useEffect(() => {
+    const handleJoin = (roomId) => {
+      if (lastJoinId !== roomId) return;
+      openRoom(roomId);
+    };
+    initMatrix.roomList.on(cons.events.roomList.ROOM_JOINED, handleJoin);
+    return () => {
+      initMatrix.roomList.removeListener(cons.events.roomList.ROOM_JOINED, handleJoin);
+    };
+  }, [lastJoinId]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    mountStore.setItem(true);
+    const alias = e.target.alias.value;
+    if (alias?.trim() === '') return;
+    if (alias.match(ALIAS_OR_ID_REG) === null) {
+      setError('Invalid address.');
+      return;
+    }
+    setProcess('Looking for address...');
+    setError(undefined);
+    let via;
+    if (alias.startsWith('#')) {
+      try {
+        const aliasData = await mx.resolveRoomAlias(alias);
+        via = aliasData?.servers || [];
+        if (mountStore.getItem()) {
+          setProcess(`Joining ${alias}...`);
+        }
+      } catch (err) {
+        if (!mountStore.getItem()) return;
+        setProcess(false);
+        setError(`Unable to find room/space with ${alias}. Either room/space is private or doesn't exist.`);
+      }
+    }
+    try {
+      const roomId = await join(alias, false, via);
+      if (!mountStore.getItem()) return;
+      setLastJoinId(roomId);
+      openRoom(roomId);
+    } catch {
+      if (!mountStore.getItem()) return;
+      setProcess(false);
+      setError(`Unable to join ${alias}. Either room/space is private or doesn't exist.`);
+    }
+  };
+
+  return (
+    <form className="join-alias" onSubmit={handleSubmit}>
+      <Input
+        label="Address"
+        value={term}
+        name="alias"
+        required
+      />
+      {error && <Text className="join-alias__error" variant="b3">{error}</Text>}
+      <div className="join-alias__btn">
+        {
+          process
+            ? (
+              <>
+                <Spinner size="small" />
+                <Text>{process}</Text>
+              </>
+            )
+            : <Button variant="primary" type="submit">Join</Button>
+        }
+      </div>
+    </form>
+  );
+}
+JoinAliasContent.defaultProps = {
+  term: undefined,
+};
+JoinAliasContent.propTypes = {
+  term: PropTypes.string,
+  requestClose: PropTypes.func.isRequired,
+};
+
+function useWindowToggle() {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    const handleOpen = (term) => {
+      setData({ term });
+    };
+    navigation.on(cons.events.navigation.JOIN_ALIAS_OPENED, handleOpen);
+    return () => {
+      navigation.removeListener(cons.events.navigation.JOIN_ALIAS_OPENED, handleOpen);
+    };
+  }, []);
+
+  const onRequestClose = () => setData(null);
+
+  return [data, onRequestClose];
+}
+
+function JoinAlias() {
+  const [data, requestClose] = useWindowToggle();
+
+  return (
+    <Dialog
+      isOpen={data !== null}
+      title={(
+        <Text variant="s1" weight="medium" primary>Join with address</Text>
+      )}
+      contentOptions={<IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />}
+      onRequestClose={requestClose}
+    >
+      { data ? <JoinAliasContent term={data.term} requestClose={requestClose} /> : <div /> }
+    </Dialog>
+  );
+}
+
+export default JoinAlias;

src/app/organisms/join-alias/JoinAlias.scss

@@ -0,0 +1,20 @@
+@use '../../partials/dir';
+
+.join-alias {
+  padding: var(--sp-normal);
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
+
+  & > *:not(:first-child) {
+    margin-top: var(--sp-normal);
+  }
+
+  &__error {
+    color: var(--tc-danger-high);
+    margin-top: var(--sp-extra-tight) !important;
+  }
+
+  &__btn {
+    display: flex;
+    gap: var(--sp-normal);
+  }
+}

src/app/organisms/navigation/Directs.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
@@ -9,12 +10,12 @@ import { roomIdByActivity } from '../../../util/sort';
 import RoomsCategory from './RoomsCategory';
 
 const drawerPostie = new Postie();
-function Directs() {
+function Directs({ size }) {
   const mx = initMatrix.matrixClient;
   const { roomList, notifications } = initMatrix;
   const [directIds, setDirectIds] = useState([]);
 
-  useEffect(() => setDirectIds([...roomList.directs].sort(roomIdByActivity)), []);
+  useEffect(() => setDirectIds([...roomList.directs].sort(roomIdByActivity)), [size]);
 
   useEffect(() => {
     const handleTimeline = (event, room, toStartOfTimeline, removed, data) => {
@@ -63,5 +64,8 @@ function Directs() {
 
   return <RoomsCategory name="People" hideHeader roomIds={directIds} drawerPostie={drawerPostie} />;
 }
+Directs.propTypes = {
+  size: PropTypes.number.isRequired,
+};
 
 export default Directs;

src/app/organisms/navigation/Drawer.jsx

@@ -42,12 +42,15 @@ function Drawer() {
   const [spaceId] = useSelectedSpace();
   const [, forceUpdate] = useForceUpdate();
   const scrollRef = useRef(null);
+  const { roomList } = initMatrix;
 
   useEffect(() => {
-    const { roomList } = initMatrix;
-    roomList.on(cons.events.roomList.ROOMLIST_UPDATED, forceUpdate);
+    const handleUpdate = () => {
+      forceUpdate();
+    };
+    roomList.on(cons.events.roomList.ROOMLIST_UPDATED, handleUpdate);
     return () => {
-      roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, forceUpdate);
+      roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, handleUpdate);
     };
   }, []);
 
@@ -61,14 +64,16 @@ function Drawer() {
     <div className="drawer">
       <DrawerHeader selectedTab={selectedTab} spaceId={spaceId} />
       <div className="drawer__content-wrapper">
-        {navigation.selectedSpacePath.length > 1 && <DrawerBreadcrumb spaceId={spaceId} />}
+        {navigation.selectedSpacePath.length > 1 && selectedTab !== cons.tabs.DIRECTS && (
+          <DrawerBreadcrumb spaceId={spaceId} />
+        )}
         <div className="rooms__wrapper">
           <ScrollView ref={scrollRef} autoHide>
             <div className="rooms-container">
               {
                 selectedTab !== cons.tabs.DIRECTS
                   ? <Home spaceId={spaceId} />
-                  : <Directs />
+                  : <Directs size={roomList.directs.size} />
               }
             </div>
           </ScrollView>

src/app/organisms/navigation/DrawerHeader.jsx

@@ -7,7 +7,7 @@ import { twemojify } from '../../../util/twemojify';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import {
-  openPublicRooms, openCreateRoom, openSpaceManage,
+  openPublicRooms, openCreateRoom, openSpaceManage, openJoinAlias,
   openSpaceAddExisting, openInviteUser, openReusableContextMenu,
 } from '../../../client/action/navigation';
 import { getEventCords } from '../../../util/common';
@@ -60,6 +60,14 @@ export function HomeSpaceOptions({ spaceId, afterOptionSelect }) {
           Join public room
         </MenuItem>
       )}
+      { !spaceId && (
+        <MenuItem
+          iconSrc={PlusIC}
+          onClick={() => { afterOptionSelect(); openJoinAlias(); }}
+        >
+          Join with address
+        </MenuItem>
+      )}
       { spaceId && (
         <MenuItem
           iconSrc={PlusIC}

src/app/organisms/public-rooms/PublicRooms.jsx

@@ -195,7 +195,7 @@ function PublicRooms({ isOpen, searchTerm, onRequestClose }) {
     return rooms.map((room) => {
       const alias = typeof room.canonical_alias === 'string' ? room.canonical_alias : room.room_id;
       const name = typeof room.name === 'string' ? room.name : alias;
-      const isJoined = initMatrix.matrixClient.getRoom(room.room_id) !== null;
+      const isJoined = initMatrix.matrixClient.getRoom(room.room_id)?.getMyMembership() === 'join';
       return (
         <RoomTile
           key={room.room_id}

src/app/organisms/pw/Dialogs.jsx

@@ -7,6 +7,8 @@ import SpaceAddExisting from '../../molecules/space-add-existing/SpaceAddExistin
 import Search from '../search/Search';
 import ViewSource from '../view-source/ViewSource';
 import CreateRoom from '../create-room/CreateRoom';
+import JoinAlias from '../join-alias/JoinAlias';
+import EmojiVerification from '../emoji-verification/EmojiVerification';
 
 import ReusableDialog from '../../molecules/dialog/ReusableDialog';
 
@@ -18,8 +20,10 @@ function Dialogs() {
       <ProfileViewer />
       <ShortcutSpaces />
       <CreateRoom />
+      <JoinAlias />
       <SpaceAddExisting />
       <Search />
+      <EmojiVerification />
 
       <ReusableDialog />
     </>

src/app/organisms/room/RoomViewContent.jsx

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 import './RoomViewContent.scss';
 
 import dateFormat from 'dateformat';
+import { twemojify } from '../../../util/twemojify';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
@@ -50,21 +51,54 @@ function loadingMsgPlaceholders(key, count = 2) {
   );
 }
 
-function genRoomIntro(mEvent, roomTimeline) {
+function RoomIntroContainer({ event, timeline }) {
+  const [, nameForceUpdate] = useForceUpdate();
   const mx = initMatrix.matrixClient;
-  const roomTopic = roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;
-  const isDM = initMatrix.roomList.directs.has(roomTimeline.roomId);
-  let avatarSrc = roomTimeline.room.getAvatarUrl(mx.baseUrl, 80, 80, 'crop');
-  avatarSrc = isDM ? roomTimeline.room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 80, 80, 'crop') : avatarSrc;
+  const { roomList } = initMatrix;
+  const { room } = timeline;
+  const roomTopic = room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;
+  const isDM = roomList.directs.has(timeline.roomId);
+  let avatarSrc = room.getAvatarUrl(mx.baseUrl, 80, 80, 'crop');
+  avatarSrc = isDM ? room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 80, 80, 'crop') : avatarSrc;
+
+  const heading = isDM ? room.name : `Welcome to ${room.name}`;
+  const topic = twemojify(roomTopic || '', undefined, true);
+  const nameJsx = twemojify(room.name);
+  const desc = isDM
+    ? (
+      <>
+        This is the beginning of your direct message history with @
+        <b>{nameJsx}</b>
+        {'. '}
+        {topic}
+      </>
+    )
+    : (
+      <>
+        {'This is the beginning of the '}
+        <b>{nameJsx}</b>
+        {' room. '}
+        {topic}
+      </>
+    );
+
+  useEffect(() => {
+    const handleUpdate = () => nameForceUpdate();
+
+    roomList.on(cons.events.roomList.ROOM_PROFILE_UPDATED, handleUpdate);
+    return () => {
+      roomList.removeListener(cons.events.roomList.ROOM_PROFILE_UPDATED, handleUpdate);
+    };
+  }, []);
+
   return (
     <RoomIntro
-      key={mEvent ? mEvent.getId() : 'room-intro'}
-      roomId={roomTimeline.roomId}
+      roomId={timeline.roomId}
       avatarSrc={avatarSrc}
-      name={roomTimeline.room.name}
-      heading={`Welcome to ${roomTimeline.room.name}`}
-      desc={`This is the beginning of the ${roomTimeline.room.name} room.${typeof roomTopic !== 'undefined' ? (` Topic: ${roomTopic}`) : ''}`}
-      time={mEvent ? `Created at ${dateFormat(mEvent.getDate(), 'dd mmmm yyyy, hh:MM TT')}` : null}
+      name={room.name}
+      heading={twemojify(heading)}
+      desc={desc}
+      time={event ? `Created at ${dateFormat(event.getDate(), 'dd mmmm yyyy, hh:MM TT')}` : null}
     />
   );
 }
@@ -199,7 +233,7 @@ function usePaginate(
     };
     roomTimeline.on(cons.events.roomTimeline.PAGINATED, handlePaginatedFromServer);
     return () => {
-      roomTimeline.on(cons.events.roomTimeline.PAGINATED, handlePaginatedFromServer);
+      roomTimeline.removeListener(cons.events.roomTimeline.PAGINATED, handlePaginatedFromServer);
     };
   }, [roomTimeline]);
 
@@ -470,12 +504,14 @@ function RoomViewContent({ eventId, roomTimeline }) {
 
       if (i === 0 && !roomTimeline.canPaginateBackward()) {
         if (mEvent.getType() === 'm.room.create') {
-          tl.push(genRoomIntro(mEvent, roomTimeline));
+          tl.push(
+            <RoomIntroContainer key={mEvent.getId()} event={mEvent} timeline={roomTimeline} />,
+          );
           itemCountIndex += 1;
           // eslint-disable-next-line no-continue
           continue;
         } else {
-          tl.push(genRoomIntro(undefined, roomTimeline));
+          tl.push(<RoomIntroContainer key="room-intro" event={null} timeline={roomTimeline} />);
           itemCountIndex += 1;
         }
       }

src/app/organisms/settings/DeviceManage.jsx

@@ -4,7 +4,7 @@ import dateFormat from 'dateformat';
 
 import initMatrix from '../../../client/initMatrix';
 import { isCrossVerified } from '../../../util/matrixUtil';
-import { openReusableDialog } from '../../../client/action/navigation';
+import { openReusableDialog, openEmojiVerification } from '../../../client/action/navigation';
 
 import Text from '../../atoms/text/Text';
 import Button from '../../atoms/button/Button';
@@ -25,6 +25,7 @@ import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
 import { useStore } from '../../hooks/useStore';
 import { useDeviceList } from '../../hooks/useDeviceList';
 import { useCrossSigningStatus } from '../../hooks/useCrossSigningStatus';
+import { accessSecretStorage } from './SecretStorageAccess';
 
 const promptDeviceName = async (deviceName) => new Promise((resolve) => {
   let isCompleted = false;
@@ -69,6 +70,7 @@ function DeviceManage() {
   const [truncated, setTruncated] = useState(true);
   const mountStore = useStore();
   mountStore.setItem(true);
+  const isMeVerified = isCrossVerified(mx.deviceId);
 
   useEffect(() => {
     setProcessing([]);
@@ -127,18 +129,41 @@ function DeviceManage() {
     removeFromProcessing(device);
   };
 
+  const verifyWithKey = async (device) => {
+    const keyData = await accessSecretStorage('Session verification');
+    if (!keyData) return;
+    addToProcessing(device);
+    await mx.checkOwnCrossSigningTrust();
+  };
+
+  const verifyWithEmojis = async (deviceId) => {
+    const req = await mx.requestVerification(mx.getUserId(), [deviceId]);
+    openEmojiVerification(req, { userId: mx.getUserId(), deviceId });
+  };
+
+  const verify = (deviceId, isCurrentDevice) => {
+    if (isCurrentDevice) {
+      verifyWithKey(deviceId);
+      return;
+    }
+    verifyWithEmojis(deviceId);
+  };
+
   const renderDevice = (device, isVerified) => {
     const deviceId = device.device_id;
     const displayName = device.display_name;
     const lastIP = device.last_seen_ip;
     const lastTS = device.last_seen_ts;
+    const isCurrentDevice = mx.deviceId === deviceId;
+
     return (
       <SettingTile
         key={deviceId}
         title={(
-          <Text style={{ color: isVerified ? '' : 'var(--tc-danger-high)' }}>
+          <Text style={{ color: isVerified !== false ? '' : 'var(--tc-danger-high)' }}>
             {displayName}
-            <Text variant="b3" span>{` — ${deviceId}${mx.deviceId === deviceId ? ' (current)' : ''}`}</Text>
+            <Text variant="b3" span>{`${displayName ? ' — ' : ''}${deviceId}`}</Text>
+            {isCurrentDevice && <Text span className="device-manage__current-label" variant="b3">Current</Text>}
           </Text>
         )}
         options={
@@ -146,19 +171,27 @@ function DeviceManage() {
             ? <Spinner size="small" />
             : (
               <>
+                {((isMeVerified && isVerified === false) || (isCurrentDevice && isVerified === false)) && <Button onClick={() => verify(deviceId, isCurrentDevice)} variant="positive">Verify</Button>}
                 <IconButton size="small" onClick={() => handleRename(device)} src={PencilIC} tooltip="Rename" />
                 <IconButton size="small" onClick={() => handleRemove(device)} src={BinIC} tooltip="Remove session" />
               </>
             )
         }
         content={(
-          <Text variant="b3">
-            Last activity
-            <span style={{ color: 'var(--tc-surface-normal)' }}>
-              {dateFormat(new Date(lastTS), ' hh:MM TT, dd/mm/yyyy')}
-            </span>
-            {lastIP ? ` at ${lastIP}` : ''}
-          </Text>
+          <>
+            <Text variant="b3">
+              Last activity
+              <span style={{ color: 'var(--tc-surface-normal)' }}>
+                {dateFormat(new Date(lastTS), ' hh:MM TT, dd/mm/yyyy')}
+              </span>
+              {lastIP ? ` at ${lastIP}` : ''}
+            </Text>
+            {isCurrentDevice && (
+              <Text style={{ marginTop: 'var(--sp-ultra-tight)' }} variant="b3">
+                {`Session Key: ${initMatrix.matrixClient.getDeviceEd25519Key().match(/.{1,4}/g).join(' ')}`}
+              </Text>
+            )}
+          </>
         )}
       />
     );
@@ -200,7 +233,7 @@ function DeviceManage() {
       {noEncryption.length > 0 && (
       <div>
         <MenuHeader>Sessions without encryption support</MenuHeader>
-        {noEncryption.map((device) => renderDevice(device, true))}
+        {noEncryption.map((device) => renderDevice(device, null))}
       </div>
       )}
       <div>
@@ -211,7 +244,7 @@ function DeviceManage() {
               if (truncated && index >= TRUNCATED_COUNT) return null;
               return renderDevice(device, true);
             })
-            : <Text className="device-manage__info">No verified session</Text>
+            : <Text className="device-manage__info">No verified sessions</Text>
         }
         { verified.length > TRUNCATED_COUNT && (
           <Button className="device-manage__info" onClick={() => setTruncated(!truncated)}>

src/app/organisms/settings/DeviceManage.scss

@@ -15,6 +15,23 @@
   & .setting-tile:last-of-type {
      border-bottom: none;
   }
+  & .setting-tile__options {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-ultra-tight);
+    & .btn-positive {
+      padding: 6px var(--sp-tight);
+      min-width: 0;
+    }
+  }
+
+  &__current-label {
+    margin: 0 var(--sp-extra-tight);
+    padding: 2px var(--sp-ultra-tight);
+    color: var(--bg-surface);
+    background-color: var(--tc-surface-low);
+    border-radius: 4px;
+  }
 
   &__rename {
     padding: var(--sp-normal);

src/app/organisms/settings/KeyBackup.jsx

@@ -159,9 +159,9 @@ function DeleteKeyBackupDialog({ requestClose }) {
   const [isDeleting, setIsDeleting] = useState(false);
   const mx = initMatrix.matrixClient;
   const mountStore = useStore();
-  mountStore.setItem(true);
 
   const deleteBackup = async () => {
+    mountStore.setItem(true);
     setIsDeleting(true);
     try {
       const backupInfo = await mx.getKeyBackupVersion();

src/app/organisms/settings/SecretStorageAccess.jsx

@@ -24,14 +24,14 @@ function SecretStorageAccess({ onComplete }) {
   const [process, setProcess] = useState(false);
   const [error, setError] = useState(null);
   const mountStore = useStore();
-  mountStore.setItem(true);
 
   const toggleWithPhrase = () => setWithPhrase(!withPhrase);
 
   const processInput = async ({ key, phrase }) => {
+    mountStore.setItem(true);
     setProcess(true);
     try {
-      const { salt, iterations } = sSKeyInfo.passphrase;
+      const { salt, iterations } = sSKeyInfo.passphrase || {};
       const privateKey = key
         ? mx.keyBackupKeyFromRecoveryKey(key)
         : await deriveKey(phrase, salt, iterations);

src/client/action/navigation.js

@@ -86,6 +86,13 @@ export function openCreateRoom(isSpace = false, parentId = null) {
   });
 }
 
+export function openJoinAlias(term) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_JOIN_ALIAS,
+    term,
+  });
+}
+
 export function openInviteUser(roomId, searchTerm) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_INVITE_USER,
@@ -166,3 +173,11 @@ export function openReusableDialog(title, render, afterClose) {
     afterClose,
   });
 }
+
+export function openEmojiVerification(request, targetDevice) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_EMOJI_VERIFICATION,
+    request,
+    targetDevice,
+  });
+}

src/client/action/room.js

@@ -113,17 +113,20 @@ async function join(roomIdOrAlias, isDM, via) {
  * @param {string} roomId
  * @param {boolean} isDM
  */
-function leave(roomId) {
+async function leave(roomId) {
   const mx = initMatrix.matrixClient;
   const isDM = initMatrix.roomList.directs.has(roomId);
-  mx.leave(roomId)
-    .then(() => {
-      appDispatcher.dispatch({
-        type: cons.actions.room.LEAVE,
-        roomId,
-        isDM,
-      });
-    }).catch();
+  try {
+    await mx.leave(roomId);
+    await mx.forget(roomId);
+    appDispatcher.dispatch({
+      type: cons.actions.room.LEAVE,
+      roomId,
+      isDM,
+    });
+  } catch {
+    console.error('Unable to leave room.');
+  }
 }
 
 async function create(options, isDM = false) {

src/client/initMatrix.js

@@ -38,6 +38,9 @@ class InitMatrix extends EventEmitter {
       deviceId: secret.deviceId,
       timelineSupport: true,
       cryptoCallbacks,
+      verificationMethods: [
+        'm.sas.v1',
+      ],
     });
 
     await this.matrixClient.initCrypto();

src/client/state/Notifications.js

@@ -6,9 +6,6 @@ import cons from './cons';
 import navigation from './navigation';
 import settings from './settings';
 
-import NotificationSound from '../../../public/sound/notification.ogg';
-import InviteSound from '../../../public/sound/invite.ogg';
-
 function isNotifEvent(mEvent) {
   const eType = mEvent.getType();
   if (!cons.supportEventTypes.includes(eType)) return false;
@@ -238,14 +235,14 @@ class Notifications extends EventEmitter {
 
   _playNotiSound() {
     if (!this._notiAudio) {
-      this._notiAudio = new Audio(NotificationSound);
+      this._notiAudio = document.getElementById('notificationSound');
     }
     this._notiAudio.play();
   }
 
   _playInviteSound() {
     if (!this._inviteAudio) {
-      this._inviteAudio = new Audio(InviteSound);
+      this._inviteAudio = document.getElementById('inviteSound');
     }
     this._inviteAudio.play();
   }

src/client/state/RoomList.js

@@ -6,6 +6,21 @@ function isMEventSpaceChild(mEvent) {
   return mEvent.getType() === 'm.space.child' && Object.keys(mEvent.getContent()).length > 0;
 }
 
+/**
+ * @param {() => boolean} callback if return true wait will over else callback will be called again.
+ * @param {number} timeout timeout to callback
+ * @param {number} maxTry maximum callback try > 0. -1 means no limit
+ */
+async function waitFor(callback, timeout = 400, maxTry = -1) {
+  if (maxTry === 0) return false;
+  const isOver = async () => new Promise((resolve) => {
+    setTimeout(() => resolve(callback()), timeout);
+  });
+
+  if (await isOver()) return true;
+  return waitFor(callback, timeout, maxTry - 1);
+}
+
 class RoomList extends EventEmitter {
   constructor(matrixClient) {
     super();
@@ -228,6 +243,7 @@ class RoomList extends EventEmitter {
   }
 
   _isDMInvite(room) {
+    if (this.mDirects.has(room.roomId)) return true;
     const me = room.getMember(this.matrixClient.getUserId());
     const myEventContent = me.events.member.getContent();
     return myEventContent.membership === 'invite' && myEventContent.is_direct;
@@ -243,22 +259,11 @@ class RoomList extends EventEmitter {
       latestMDirects.forEach((directId) => {
         const myRoom = this.matrixClient.getRoom(directId);
         if (this.mDirects.has(directId)) return;
-
-        // Update mDirects
         this.mDirects.add(directId);
 
         if (myRoom === null) return;
-
-        if (this._isDMInvite(myRoom)) return;
-
-        if (myRoom.getMyMembership === 'join' && !this.directs.has(directId)) {
+        if (myRoom.getMyMembership() === 'join') {
           this.directs.add(directId);
-        }
-
-        // Newly added room.
-        // at this time my membership can be invite | join
-        if (myRoom.getMyMembership() === 'join' && this.rooms.has(directId)) {
-          // found a DM which accidentally gets added to this.rooms
           this.rooms.delete(directId);
           this.emit(cons.events.roomList.ROOMLIST_UPDATED);
         }
@@ -298,23 +303,17 @@ class RoomList extends EventEmitter {
       }
     });
 
-    this.matrixClient.on('Room.myMembership', (room, membership, prevMembership) => {
+    this.matrixClient.on('Room.myMembership', async (room, membership, prevMembership) => {
       // room => prevMembership = null | invite | join | leave | kick | ban | unban
       // room => membership = invite | join | leave | kick | ban | unban
       const { roomId } = room;
+      const isRoomReady = () => this.matrixClient.getRoom(roomId) !== null;
+      if (['join', 'invite'].includes(membership) && isRoomReady() === false) {
+        if (await waitFor(isRoomReady, 200, 100) === false) return;
+      }
 
       if (membership === 'unban') return;
 
-      // When user_reject/sender_undo room invite
-      if (prevMembership === 'invite') {
-        if (this.inviteDirects.has(roomId)) this.inviteDirects.delete(roomId);
-        else if (this.inviteSpaces.has(roomId)) this.inviteSpaces.delete(roomId);
-        else this.inviteRooms.delete(roomId);
-
-        this.emit(cons.events.roomList.INVITELIST_UPDATED, roomId);
-      }
-
-      // When user get invited
       if (membership === 'invite') {
         if (this._isDMInvite(room)) this.inviteDirects.add(roomId);
         else if (room.isSpaceRoom()) this.inviteSpaces.add(roomId);
@@ -324,88 +323,53 @@ class RoomList extends EventEmitter {
         return;
       }
 
-      // When user join room (first time) or start DM.
-      if ((prevMembership === null || prevMembership === 'invite') && membership === 'join') {
-        // when user create room/DM OR accept room/dm invite from this client.
-        // we will update this.rooms/this.directs with user action
-        if (this.directs.has(roomId) || this.spaces.has(roomId) || this.rooms.has(roomId)) return;
+      if (prevMembership === 'invite') {
+        if (this.inviteDirects.has(roomId)) this.inviteDirects.delete(roomId);
+        else if (this.inviteSpaces.has(roomId)) this.inviteSpaces.delete(roomId);
+        else this.inviteRooms.delete(roomId);
 
-        if (this.processingRooms.has(roomId)) {
-          const procRoomInfo = this.processingRooms.get(roomId);
-
-          if (procRoomInfo.isDM) this.directs.add(roomId);
-          else if (room.isSpaceRoom()) this.addToSpaces(roomId);
-          else this.rooms.add(roomId);
-
-          if (procRoomInfo.task === 'CREATE') this.emit(cons.events.roomList.ROOM_CREATED, roomId);
-          this.emit(cons.events.roomList.ROOM_JOINED, roomId);
-          this.emit(cons.events.roomList.ROOMLIST_UPDATED);
-
-          this.processingRooms.delete(roomId);
-          return;
-        }
-        if (room.isSpaceRoom()) {
-          this.addToSpaces(roomId);
-
-          this.emit(cons.events.roomList.ROOM_JOINED, roomId);
-          this.emit(cons.events.roomList.ROOMLIST_UPDATED);
-          return;
-        }
-
-        // below code intented to work when user create room/DM
-        // OR accept room/dm invite from other client.
-        // and we have to update our client. (it's ok to have 10sec delay)
-
-        // create a buffer of 10sec and HOPE client.accoundData get updated
-        // then accoundData event listener will update this.mDirects.
-        // and we will be able to know if it's a DM.
-        // ----------
-        // less likely situation:
-        // if we don't get accountData with 10sec then:
-        // we will temporary add it to this.rooms.
-        // and in future when accountData get updated
-        // accountData listener will automatically goona REMOVE it from this.rooms
-        // and will ADD it to this.directs
-        // and emit the cons.events.roomList.ROOMLIST_UPDATED to update the UI.
-
-        setTimeout(() => {
-          if (this.directs.has(roomId) || this.spaces.has(roomId) || this.rooms.has(roomId)) return;
-          if (this.mDirects.has(roomId)) this.directs.add(roomId);
-          else this.rooms.add(roomId);
-
-          this.emit(cons.events.roomList.ROOM_JOINED, roomId);
-          this.emit(cons.events.roomList.ROOMLIST_UPDATED);
-        }, 10000);
-        return;
+        this.emit(cons.events.roomList.INVITELIST_UPDATED, roomId);
       }
 
-      // when room is a DM add/remove it from DM's and return.
-      if (this.directs.has(roomId)) {
-        if (membership === 'leave' || membership === 'kick' || membership === 'ban') {
-          this.directs.delete(roomId);
-          this.emit(cons.events.roomList.ROOM_LEAVED, roomId);
-        }
-      }
-      if (this.mDirects.has(roomId)) {
-        if (membership === 'join') {
-          this.directs.add(roomId);
-          this.emit(cons.events.roomList.ROOM_JOINED, roomId);
-        }
+      if (['leave', 'kick', 'ban'].includes(membership)) {
+        if (this.directs.has(roomId)) this.directs.delete(roomId);
+        else if (this.spaces.has(roomId)) this.deleteFromSpaces(roomId);
+        else this.rooms.delete(roomId);
+        this.emit(cons.events.roomList.ROOM_LEAVED, roomId);
         this.emit(cons.events.roomList.ROOMLIST_UPDATED);
         return;
       }
-      // when room is not a DM add/remove it from rooms.
-      if (membership === 'leave' || membership === 'kick' || membership === 'ban') {
-        if (room.isSpaceRoom()) this.deleteFromSpaces(roomId);
-        else this.rooms.delete(roomId);
-        this.emit(cons.events.roomList.ROOM_LEAVED, roomId);
+
+      // when user create room/DM OR accept room/dm invite from this client.
+      // we will update this.rooms/this.directs with user action
+      if (membership === 'join' && this.processingRooms.has(roomId)) {
+        const procRoomInfo = this.processingRooms.get(roomId);
+
+        if (procRoomInfo.isDM) this.directs.add(roomId);
+        else if (room.isSpaceRoom()) this.addToSpaces(roomId);
+        else this.rooms.add(roomId);
+
+        if (procRoomInfo.task === 'CREATE') this.emit(cons.events.roomList.ROOM_CREATED, roomId);
+        this.emit(cons.events.roomList.ROOM_JOINED, roomId);
+        this.emit(cons.events.roomList.ROOMLIST_UPDATED);
+
+        this.processingRooms.delete(roomId);
+        return;
       }
+
+      if (this.mDirects.has(roomId) && membership === 'join') {
+        this.directs.add(roomId);
+        this.emit(cons.events.roomList.ROOM_JOINED, roomId);
+        this.emit(cons.events.roomList.ROOMLIST_UPDATED);
+        return;
+      }
+
       if (membership === 'join') {
         if (room.isSpaceRoom()) this.addToSpaces(roomId);
         else this.rooms.add(roomId);
         this.emit(cons.events.roomList.ROOM_JOINED, roomId);
+        this.emit(cons.events.roomList.ROOMLIST_UPDATED);
       }
-      this.emit(cons.events.roomList.ROOMLIST_UPDATED);
     });
   }
 }

src/client/state/cons.js

@@ -1,5 +1,5 @@
 const cons = {
-  version: '1.8.2',
+  version: '2.0.0',
   secretKey: {
     ACCESS_TOKEN: 'cinny_access_token',
     DEVICE_ID: 'cinny_device_id',
@@ -38,6 +38,7 @@ const cons = {
       OPEN_INVITE_LIST: 'OPEN_INVITE_LIST',
       OPEN_PUBLIC_ROOMS: 'OPEN_PUBLIC_ROOMS',
       OPEN_CREATE_ROOM: 'OPEN_CREATE_ROOM',
+      OPEN_JOIN_ALIAS: 'OPEN_JOIN_ALIAS',
       OPEN_INVITE_USER: 'OPEN_INVITE_USER',
       OPEN_PROFILE_VIEWER: 'OPEN_PROFILE_VIEWER',
       OPEN_SETTINGS: 'OPEN_SETTINGS',
@@ -49,6 +50,7 @@ const cons = {
       OPEN_REUSABLE_CONTEXT_MENU: 'OPEN_REUSABLE_CONTEXT_MENU',
       OPEN_NAVIGATION: 'OPEN_NAVIGATION',
       OPEN_REUSABLE_DIALOG: 'OPEN_REUSABLE_DIALOG',
+      OPEN_EMOJI_VERIFICATION: 'OPEN_EMOJI_VERIFICATION',
     },
     room: {
       JOIN: 'JOIN',
@@ -85,6 +87,7 @@ const cons = {
       INVITE_LIST_OPENED: 'INVITE_LIST_OPENED',
       PUBLIC_ROOMS_OPENED: 'PUBLIC_ROOMS_OPENED',
       CREATE_ROOM_OPENED: 'CREATE_ROOM_OPENED',
+      JOIN_ALIAS_OPENED: 'JOIN_ALIAS_OPENED',
       INVITE_USER_OPENED: 'INVITE_USER_OPENED',
       SETTINGS_OPENED: 'SETTINGS_OPENED',
       PROFILE_VIEWER_OPENED: 'PROFILE_VIEWER_OPENED',
@@ -96,6 +99,7 @@ const cons = {
       REUSABLE_CONTEXT_MENU_OPENED: 'REUSABLE_CONTEXT_MENU_OPENED',
       NAVIGATION_OPENED: 'NAVIGATION_OPENED',
       REUSABLE_DIALOG_OPENED: 'REUSABLE_DIALOG_OPENED',
+      EMOJI_VERIFICATION_OPENED: 'EMOJI_VERIFICATION_OPENED',
     },
     roomList: {
       ROOMLIST_UPDATED: 'ROOMLIST_UPDATED',

src/client/state/navigation.js

@@ -122,6 +122,12 @@ class Navigation extends EventEmitter {
           action.parentId,
         );
       },
+      [cons.actions.navigation.OPEN_JOIN_ALIAS]: () => {
+        this.emit(
+          cons.events.navigation.JOIN_ALIAS_OPENED,
+          action.term,
+        );
+      },
       [cons.actions.navigation.OPEN_INVITE_USER]: () => {
         this.emit(cons.events.navigation.INVITE_USER_OPENED, action.roomId, action.searchTerm);
       },
@@ -185,6 +191,13 @@ class Navigation extends EventEmitter {
           action.afterClose,
         );
       },
+      [cons.actions.navigation.OPEN_EMOJI_VERIFICATION]: () => {
+        this.emit(
+          cons.events.navigation.EMOJI_VERIFICATION_OPENED,
+          action.request,
+          action.targetDevice,
+        );
+      },
     };
     actions[action.type]?.();
   }

src/index.scss

@@ -475,6 +475,10 @@ textarea {
                                   supported by Chrome, Edge, Opera and Firefox */
 }
 
+audio:not([controls]) {
+  display: none !important;
+}
+
 .flex--center {
   display: flex;
   justify-content: center;