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

Clarify text in "Import E2E room keys" section

.github/FUNDING.yml

@@ -1 +1,2 @@
-liberapay: kfiven
+patreon: ajbura
+liberapay: ajbura

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,26 +7,26 @@ assignees: ''
 
 ---
 
-**Describe the bug**
+#### Describe the bug
 A clear and concise description of what the bug is.
 
-**To Reproduce**
+#### To Reproduce
 Steps to reproduce the behavior:
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
 
-**Expected behavior**
+#### Expected behavior
 A clear and concise description of what you expected to happen.
 
-**Screenshots**
+#### Screenshots
 If applicable, add screenshots to help explain your problem.
 
-**Desktop (please complete the following information):**
+#### Desktop (please complete the following information):
- - OS: [e.g. iOS]
+ - OS: [e.g. Windows, MacOS]
- - Browser [e.g. chrome, safari]
+ - Browser: [e.g. chrome, firefox]
- - Version [e.g. 22]
+ - Version: [e.g. 3.22]
 
-**Additional context**
+#### Additional context
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -7,14 +7,14 @@ assignees: ''
 
 ---
 
-**Is your feature request related to a problem? Please describe.**
+#### Is your feature request related to a problem? Please describe.
 A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 
-**Describe the solution you'd like**
+#### Describe the solution you'd like
 A clear and concise description of what you want to happen.
 
-**Describe alternatives you've considered**
+#### Describe alternatives you've considered
 A clear and concise description of any alternative solutions or features you've considered.
 
-**Additional context**
+#### Additional context
 Add any other context or screenshots about the feature request here.

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,12 +1,12 @@
 <!-- Please read https://github.com/ajbura/cinny/CONTRIBUTING.md before submitting your pull request -->
 
-# Description
+### Description
 
 Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
 
 Fixes # (issue)
 
-## Type of change
+#### Type of change
 
 Please delete options that are not relevant.
 
@@ -15,7 +15,7 @@ Please delete options that are not relevant.
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
 - [ ] This change requires a documentation update
 
-# Checklist:
+### Checklist:
 
 - [ ] My code follows the style guidelines of this project
 - [ ] I have performed a self-review of my own code

.gitignore

@@ -1,5 +1,4 @@
 experiment
-package-lock.json
 dist
 node_modules
 devAssets

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

Dockerfile

@@ -0,0 +1,20 @@
+## Builder
+FROM node:14-alpine as builder
+
+WORKDIR /src
+
+COPY . /src
+RUN npm install \
+  && npm run build
+
+
+## App
+FROM nginx:alpine
+
+COPY --from=builder /src/dist /app
+
+# Insert wasm type into Nginx mime.types file so they load correctly.
+RUN sed -i '3i\ \ \ \ application/wasm wasm\;' /etc/nginx/mime.types
+
+RUN rm -rf /usr/share/nginx/html \
+  && ln -s /app /usr/share/nginx/html

README.md

@@ -8,4 +8,38 @@
 
 ## About <a name = "about"></a>
 
-Cinny is a [matrix](https://matrix.org) client focusing primarily on simple, elegant and secure interface.
+Cinny is a [Matrix](https://matrix.org) client focusing primarily on simple, elegant and secure interface.
+
+## Building and Running
+
+### Building from source
+
+Execute the following commands to compile the app from its source code:
+
+```sh
+npm install # Installs all dependencies
+npm run build # Compiles the app into the dist/ directory
+```
+
+You can then copy the files to a webserver's webroot of your choice. 
+To serve a development version of the app locally for testing, you may also use the command `npm start`.
+
+### Running with Docker
+
+This repository includes a Dockerfile, which builds the application from source and serves it with Nginx on port 80. To
+use this locally, you can build the container like so:
+
+```
+docker build -t cinny:latest .
+```
+
+You can then run the container you've built with a command similar to this:
+
+```
+docker run -p 8080:80 cinny:latest
+```
+
+This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by
+navigating to `http://localhost:8080`.
+
+

_redirects

@@ -0,0 +1,3 @@
+# Redirects from what the browser requests to what we serve
+/login       /
+/register    /

contrib/nginx/README.md

@@ -0,0 +1,12 @@
+# nginx configuration
+
+## Insert wasm type into nginx mime.types file so they load correctly.
+
+`/etc/nginx/mime.types`:
+```
+types {
+..
+    application/wasm                      wasm;
+..
+}
+```

contrib/nginx/cinny.domain.tld.conf

@@ -0,0 +1,27 @@
+server {
+	listen 80;
+	listen [::]:80;
+	server_name cinny.domain.tld;
+
+	location / {
+		return 301 https://$host$request_uri;
+	}
+
+	location /.well-known/acme-challenge/ {
+		alias /var/lib/letsencrypt/.well-known/acme-challenge/;
+	}
+}
+
+server {
+	listen 443 ssl http2;
+	listen [::]:443 ssl;
+	server_name cinny.domain.tld;
+
+	location / {
+		root /opt/cinny/dist/;
+		index index.html;
+	}
+	location ~* ^\/(login|register) {
+		try_files $uri $uri/ /index.html;
+	}
+}

package.json

@@ -1,31 +1,32 @@
 {
   "name": "cinny",
-  "version": "1.0.0",
+  "version": "1.2.0",
-  "description": "Organized and powerful matrix client.",
+  "description": "Yet another matrix client",
   "main": "index.js",
   "engines": {
-    "npm": "6.14.11",
+    "npm": ">=6.14.11",
-    "node": "14.6.0"
+    "node": ">=14.6.0"
   },
   "scripts": {
     "start": "webpack serve --config ./webpack.dev.js --open",
     "build": "webpack --config ./webpack.prod.js"
   },
   "keywords": [],
-  "author": "",
+  "author": "Ajay Bura",
-  "license": "ISC",
+  "license": "MIT",
   "dependencies": {
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.4.tgz",
     "@tippyjs/react": "^4.2.5",
     "babel-polyfill": "^6.26.0",
     "browser-encrypt-attachment": "^0.3.0",
     "dateformat": "^4.5.1",
     "emojibase-data": "^6.2.0",
     "flux": "^4.0.1",
-    "fuse.js": "^6.4.6",
     "html-react-parser": "^1.2.7",
     "linkifyjs": "^3.0.0-beta.3",
-    "matrix-js-sdk": "^11.2.0",
+    "matrix-js-sdk": "^12.4.1",
-    "olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
+    "micromark": "^3.0.3",
+    "micromark-extension-gfm": "^1.0.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-autosize-textarea": "^7.1.0",
@@ -43,10 +44,12 @@
     "@babel/core": "^7.13.13",
     "@babel/preset-env": "^7.13.12",
     "@babel/preset-react": "^7.13.13",
+    "assert": "^2.0.0",
     "babel-loader": "^8.2.2",
     "browserify-fs": "^1.0.0",
     "buffer": "^6.0.3",
     "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^9.0.1",
     "crypto-browserify": "^3.12.0",
     "css-loader": "^5.2.0",
     "css-minimizer-webpack-plugin": "^1.3.0",
@@ -67,7 +70,7 @@
     "sass-loader": "^11.0.1",
     "stream-browserify": "^3.0.0",
     "style-loader": "^2.0.0",
-    "util": "^0.12.3",
+    "util": "^0.12.4",
     "webpack": "^5.28.0",
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2",

public/index.html

@@ -7,13 +7,14 @@
     <link href="https://api.fontshare.com/css?f[]=supreme@300,301,400,401,500,501,700,701&display=swap" rel="stylesheet">
     <title>Cinny</title>
     <meta name="name"        content="Cinny">
-    <meta name="description" content="Yet another matrix client. Where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source.">
+    <meta name="author"      content="Ajay Bura">
+    <meta name="description" content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source.">
     <meta name="keywords"    content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element">
   
     <meta property="og:title"       content="Cinny">
     <meta property="og:url"         content="https://cinny.in">
     <meta property="og:image"       content="https://cinny.in/assets/favicon-48x48.png">
-    <meta property="og:description" content="Yet another matrix client. Where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source.">
+    <meta property="og:description" content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source.">
     <meta name="theme-color" content="#000000">
 </head>
 <body id="appBody">

public/res/ic/outlined/bin.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<rect x="9" y="8" width="2" height="8"/>
+		</g>
+		<g>
+			<rect x="13" y="8" width="2" height="8"/>
+		</g>
+	</g>
+	<path d="M21,3h-5l-1.4-1.4C14.2,1.2,13.7,1,13.2,1h-2.3c-0.5,0-1,0.2-1.4,0.6L8,3H3v2h2v14c0,1.1,0.9,2,2,2h10c1.1,0,2-0.9,2-2V5h2
+		V3z M17,19H7V5h10V19z"/>
+</g>
+</svg>

public/res/ic/outlined/cmd.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M20,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V6C22,4.9,21.1,4,20,4z M20,18H4V6h16V18z"/>
+	<polygon points="7.5,16.5 12.1,12 7.5,7.5 6.5,8.5 9.9,12 6.5,15.5 	"/>
+	<rect x="13" y="14.5" width="5" height="1.5"/>
+</g>
+</svg>

public/res/ic/outlined/emoji-add.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8V2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10h-2C20,16.4,16.4,20,12,20z"/>
+	<circle cx="9.5" cy="8.5" r="1.5"/>
+	<circle cx="14.5" cy="8.5" r="1.5"/>
+	<path d="M6,12c0,3.3,2.7,6,6,6s6-2.7,6-6h-2c0,2.2-1.8,4-4,4s-4-1.8-4-4H6z"/>
+	<polygon points="20.8,3.3 20.8,0 19.3,0 19.3,3.3 16,3.3 16,4.8 19.3,4.8 19.3,8 20.8,8 20.8,4.8 24,4.8 24,3.3 	"/>
+</g>
+</svg>

public/res/ic/outlined/info.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
+		S16.4,20,12,20z"/>
+	<g>
+		<polygon points="12.8,15.5 12.8,10 12.2,10 11.3,10 10,10 10,11 11.3,11.5 11.3,15.5 10,16 10,17 14,17 14,16 		"/>
+		<circle cx="12" cy="8" r="1"/>
+	</g>
+</g>
+</svg>

public/res/ic/outlined/markdown.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="12,7 12,7 8,11 4,7 4,7 4,7 2,7 2,17 4,17 4,9.8 8,13.8 12,9.8 12,17 14,17 14,7 12,7 	"/>
+	<path d="M20,14V7h-2v7h-2l3,3c0.1,0,0.5-0.4,1-0.9c0.9-0.9,2-2.1,2-2.1H20z"/>
+</g>
+</svg>

public/res/ic/outlined/pencil.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M20.6,5.6l-2.2-2.2C18,3,17.5,2.8,17,2.8S16,3,15.6,3.4L3,16v5h5L20.6,8.4C21.4,7.6,21.4,6.4,20.6,5.6z M7.2,19H5v-2.2
+	l9.2-9.2l2.2,2.2L7.2,19z M15.6,6.2L17,4.8c0,0,0,0,0,0L19.2,7l-1.4,1.4L15.6,6.2z"/>
+</svg>

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,18 +1,22 @@
 .notification-badge {
-  min-width: 18px;
+  min-width: 16px;
-  padding: 1px var(--sp-ultra-tight);
+  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);
+    background-color: var(--bg-danger);
-    .text {
+  }
-      color: white;
+
-    }
+  &:empty {
+    min-width: 8px;
+    margin: 0 var(--sp-ultra-tight);
   }
 }

src/app/atoms/button/IconButton.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './IconButton.scss';
 
-import Tippy from '@tippyjs/react';
 import RawIcon from '../system-icons/RawIcon';
+import Tooltip from '../tooltip/Tooltip';
 import { blurOnBubbling } from './script';
 import Text from '../text/Text';
 
@@ -17,15 +17,9 @@ const IconButton = React.forwardRef(({
   variant, size, type,
   tooltip, tooltipPlacement, src, onClick,
 }, ref) => (
-  <Tippy
+  <Tooltip
-    content={<Text variant="b2">{tooltip}</Text>}
-    className="ic-btn-tippy"
-    touch="hold"
-    arrow={false}
-    maxWidth={250}
     placement={tooltipPlacement}
-    delay={[0, 0]}
+    content={<Text variant="b2">{tooltip}</Text>}
-    duration={[100, 0]}
   >
     <button
       ref={ref}
@@ -36,7 +30,7 @@ const IconButton = React.forwardRef(({
     >
       <RawIcon size={size} src={src} />
     </button>
-  </Tippy>
+  </Tooltip>
 ));
 
 IconButton.defaultProps = {

src/app/atoms/button/IconButton.scss

@@ -32,14 +32,3 @@
   @include focus(var(--bg-surface-hover));
   @include state.active(var(--bg-surface-active));
 }
-
-.ic-btn-tippy {
-  padding: var(--sp-extra-tight) var(--sp-normal);
-  background-color: var(--bg-tooltip);
-  border-radius: var(--bo-radius);
-  box-shadow: var(--bs-popup);
-
-  .text {
-    color: var(--tc-tooltip);
-  }
-}

src/app/atoms/context-menu/ContextMenu.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './ContextMenu.scss';
 
@@ -10,12 +10,16 @@ import Button from '../button/Button';
 import ScrollView from '../scroll/ScrollView';
 
 function ContextMenu({
-  content, placement, maxWidth, render,
+  content, placement, maxWidth, render, afterToggle,
 }) {
   const [isVisible, setVisibility] = useState(false);
   const showMenu = () => setVisibility(true);
   const hideMenu = () => setVisibility(false);
 
+  useEffect(() => {
+    if (afterToggle !== null) afterToggle(isVisible);
+  }, [isVisible]);
+
   return (
     <Tippy
       animation="scale-extreme"
@@ -36,6 +40,7 @@ function ContextMenu({
 ContextMenu.defaultProps = {
   maxWidth: 'unset',
   placement: 'right',
+  afterToggle: null,
 };
 
 ContextMenu.propTypes = {
@@ -49,6 +54,7 @@ ContextMenu.propTypes = {
     PropTypes.number,
   ]),
   render: PropTypes.func.isRequired,
+  afterToggle: PropTypes.func,
 };
 
 function MenuHeader({ children }) {

src/app/atoms/context-menu/ContextMenu.scss

@@ -44,6 +44,7 @@
     justify-content: start;
     border-radius: 0;
     box-shadow: none;
+    white-space: nowrap;
 
     .text:first-child {
       margin: {

src/app/atoms/tooltip/Tooltip.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Tooltip.scss';
+import Tippy from '@tippyjs/react';
+
+function Tooltip({
+  className, placement, content, children,
+}) {
+  return (
+    <Tippy
+      content={content}
+      className={`tooltip ${className}`}
+      touch="hold"
+      arrow={false}
+      maxWidth={250}
+      placement={placement}
+      delay={[0, 0]}
+      duration={[100, 0]}
+    >
+      {children}
+    </Tippy>
+  );
+}
+
+Tooltip.defaultProps = {
+  placement: 'top',
+  className: '',
+};
+
+Tooltip.propTypes = {
+  className: PropTypes.string,
+  placement: PropTypes.string,
+  content: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export default Tooltip;

src/app/atoms/tooltip/Tooltip.scss

@@ -0,0 +1,10 @@
+.tooltip {
+  padding: var(--sp-extra-tight) var(--sp-normal);
+  background-color: var(--bg-tooltip);
+  border-radius: var(--bo-radius);
+  box-shadow: var(--bs-popup);
+
+  .text {
+    color: var(--tc-tooltip);
+  }
+}

src/app/molecules/channel-intro/ChannelIntro.jsx

@@ -13,11 +13,11 @@ function linkifyContent(content) {
 }
 
 function ChannelIntro({
-  avatarSrc, name, heading, desc, time,
+  roomId, avatarSrc, name, heading, desc, time,
 }) {
   return (
     <div className="channel-intro">
-      <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={colorMXID(name)} size="large" />
+      <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={colorMXID(roomId)} size="large" />
       <div className="channel-intro__content">
         <Text className="channel-intro__name" variant="h1">{heading}</Text>
         <Text className="channel-intro__desc" variant="b1">{linkifyContent(desc)}</Text>
@@ -33,6 +33,7 @@ ChannelIntro.defaultProps = {
 };
 
 ChannelIntro.propTypes = {
+  roomId: PropTypes.string.isRequired,
   avatarSrc: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.bool,

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({
+function ChannelSelectorWrapper({
-  selected, unread, notificationCount, alert,
+  isSelected, onClick, content, options,
-  iconSrc, imageSrc, roomId, onClick, children,
 }) {
   return (
-    <button
+    <div className={`channel-selector${isSelected ? ' channel-selector--selected' : ''}`}>
-      className={`channel-selector__button-wrapper${selected ? ' channel-selector--selected' : ''}`}
+      <button
-      type="button"
+        className="channel-selector__content"
-      onClick={onClick}
+        type="button"
-      onMouseUp={(e) => blurOnBubbling(e, '.channel-selector__button-wrapper')}
+        onClick={onClick}
-    >
+        onMouseUp={(e) => blurOnBubbling(e, '.channel-selector')}
-      <div className="channel-selector">
+      >
-        <div className="channel-selector__icon flex--center">
+        {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>
+          <Text variant="b1">{name}</Text>
-        <div className="channel-selector__text-container">
+          { isUnread && (
-          <Text variant="b1">{children}</Text>
+            <NotificationBadge
-        </div>
+              alert={isAlert}
-        <div className="channel-selector__badge-container">
+              content={notificationCount !== 0 ? notificationCount : null}
-          {
+            />
-            notificationCount !== 0
+          )}
-              ? unread && (
+        </>
-                <NotificationBadge alert={alert}>
+      )}
-                  {notificationCount}
+      options={options}
-                </NotificationBadge>
+      onClick={onClick}
-              )
+    />
-              : unread && <div className="channel-selector--unread" />
-          }
-        </div>
-      </div>
-    </button>
   );
 }
-
 ChannelSelector.defaultProps = {
-  selected: false,
-  unread: false,
-  notificationCount: 0,
-  alert: false,
-  iconSrc: null,
   imageSrc: null,
+  iconSrc: null,
+  options: null,
 };
-
 ChannelSelector.propTypes = {
-  selected: PropTypes.bool,
+  name: PropTypes.string.isRequired,
-  unread: PropTypes.bool,
-  notificationCount: PropTypes.number,
-  alert: PropTypes.bool,
-  iconSrc: PropTypes.string,
-  imageSrc: PropTypes.string,
   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,22 +1,35 @@
-.channel-selector__button-wrapper {
+.channel-selector-flex {
-  display: block;
+  display: flex;
-  width: calc(100% - var(--sp-extra-tight));
+  align-items: center;
-  margin-left: auto;
+}
-  padding: var(--sp-extra-tight) var(--sp-extra-tight);
+.channel-selector-flexItem {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.channel-selector {
+  @extend .channel-selector-flex;
+
   border: 1px solid transparent;
-  border-radius:  var(--bo-radius);
+  border-radius: var(--bo-radius);
   cursor: pointer;
   
-  [dir=rtl] & {
+  &--selected {
-    margin: {
+    background-color: var(--bg-surface);
-      left: 0;
+    border-color: var(--bg-surface-border);
-      right: auto;
+
+    & .channel-selector__options {
+      display: flex;
     }
   }
 
   @media (hover: hover) {
     &:hover {
       background-color: var(--bg-surface-hover);
+      & .channel-selector__options {
+        display: flex;
+      }
     }
   }
   &:focus {
@@ -26,41 +39,50 @@
   &:active {
     background-color: var(--bg-surface-active);
   }
-}
+  &--selected:hover,
-.channel-selector {
+  &--selected:focus,
-  display: flex;
+  &--selected:active {
-  align-items: center;
+    background-color: var(--bg-surface);
-
-  &__icon {
-    width: 24px;
-    height: 24px;
-    .avatar__border {
-      box-shadow: none;
-    }
   }
-  &__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);
-      color: var(--tc-surface-normal);
+    overflow: hidden;
-      overflow: hidden;
+    white-space: nowrap;
-      white-space: nowrap;
+    text-overflow: ellipsis;
-      text-overflow: ellipsis;
-    }
   }
 }
+.channel-selector__options {
+  @extend .channel-selector-flex;
+  display: none;
+  margin-right: var(--sp-ultra-tight);
 
-.channel-selector--unread {
+  [dir=rtl] & {
-  margin: 0 var(--sp-ultra-tight);
+    margin-right: 0;
-  height: 8px;
+    margin-left: var(--sp-ultra-tight);
-  width: 8px;
+  }
-  background-color: var(--tc-surface-low);
+
-  border-radius: 50%;
+  &:empty {
-  opacity: .4;
+    margin: 0 !important;
-}
+  }
-.channel-selector--selected {
+
-  background-color: var(--bg-surface);
+  & .ic-btn-surface {
-  border-color: var(--bg-surface-border);
+    padding: 6px;
+    border-radius: calc(var(--bo-radius) / 2);
+  }
 }

src/app/molecules/dialog/Dialog.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Dialog.scss';
+
+import Text from '../../atoms/text/Text';
+import Header, { TitleWrapper } from '../../atoms/header/Header';
+import ScrollView from '../../atoms/scroll/ScrollView';
+import RawModal from '../../atoms/modal/RawModal';
+
+function Dialog({
+  className, isOpen, title,
+  contentOptions, onRequestClose, children,
+}) {
+  return (
+    <RawModal
+      className={`${className === null ? '' : `${className} `}dialog-model`}
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      size="small"
+    >
+      <div className="dialog">
+        <div className="dialog__content">
+          <Header>
+            <TitleWrapper>
+              <Text variant="h2">{title}</Text>
+            </TitleWrapper>
+            {contentOptions}
+          </Header>
+          <div className="dialog__content__wrapper">
+            <ScrollView autoHide>
+              <div className="dialog__content-container">
+                {children}
+              </div>
+            </ScrollView>
+          </div>
+        </div>
+      </div>
+    </RawModal>
+  );
+}
+
+Dialog.defaultProps = {
+  className: null,
+  contentOptions: null,
+  onRequestClose: null,
+};
+
+Dialog.propTypes = {
+  className: PropTypes.string,
+  isOpen: PropTypes.bool.isRequired,
+  title: PropTypes.string.isRequired,
+  contentOptions: PropTypes.node,
+  onRequestClose: PropTypes.func,
+  children: PropTypes.node.isRequired,
+};
+
+export default Dialog;

src/app/molecules/dialog/Dialog.scss

@@ -0,0 +1,28 @@
+.dialog-model {
+  --modal-height: 656px;
+  max-height: var(--modal-height) !important;
+}
+
+.dialog {
+  width: 100%;
+  max-height: inherit;
+  background-color: var(--bg-surface);
+  display: flex;
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+
+.dialog__content-container {
+  padding-top: var(--sp-extra-tight);
+  padding-bottom: var(--sp-extra-loose);
+}
+.dialog__content__wrapper {
+  flex: 1;
+  min-height: 0;
+}

src/app/molecules/import-e2e-room-keys/ImportE2ERoomKeys.jsx

@@ -0,0 +1,108 @@
+import React, { useState, useEffect, useRef } from 'react';
+import './ImportE2ERoomKeys.scss';
+import EventEmitter from 'events';
+
+import initMatrix from '../../../client/initMatrix';
+import decryptMegolmKeyFile from '../../../util/decryptE2ERoomKeys';
+
+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 CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
+
+const viewEvent = new EventEmitter();
+
+async function tryDecrypt(file, password) {
+  try {
+    const arrayBuffer = await file.arrayBuffer();
+    viewEvent.emit('importing', true);
+    viewEvent.emit('status', 'Decrypting file...');
+    const keys = await decryptMegolmKeyFile(arrayBuffer, password);
+
+    viewEvent.emit('status', 'Decrypting messages...');
+    await initMatrix.matrixClient.importRoomKeys(JSON.parse(keys));
+
+    viewEvent.emit('status', null);
+    viewEvent.emit('importing', false);
+  } catch (e) {
+    viewEvent.emit('status', e.friendlyText || 'Something went wrong!');
+    viewEvent.emit('importing', false);
+  }
+}
+
+function ImportE2ERoomKeys() {
+  const [keyFile, setKeyFile] = useState(null);
+  const [status, setStatus] = useState(null);
+  const [isImporting, setIsImporting] = useState(false);
+  const inputRef = useRef(null);
+  const passwordRef = useRef(null);
+
+  useEffect(() => {
+    const handleIsImporting = (isImp) => setIsImporting(isImp);
+    const handleStatus = (msg) => setStatus(msg);
+    viewEvent.on('importing', handleIsImporting);
+    viewEvent.on('status', handleStatus);
+
+    return () => {
+      viewEvent.removeListener('importing', handleIsImporting);
+      viewEvent.removeListener('status', handleStatus);
+    };
+  }, []);
+
+  function importE2ERoomKeys() {
+    const password = passwordRef.current.value;
+    if (password === '' || keyFile === null) return;
+    if (isImporting) return;
+
+    tryDecrypt(keyFile, password);
+  }
+
+  function handleFileChange(e) {
+    const file = e.target.files.item(0);
+    passwordRef.current.value = '';
+    setKeyFile(file);
+    setStatus(null);
+  }
+  function removeImportKeysFile() {
+    inputRef.current.value = null;
+    passwordRef.current.value = null;
+    setKeyFile(null);
+    setStatus(null);
+  }
+
+  useEffect(() => {
+    if (!isImporting && status === null) {
+      removeImportKeysFile();
+    }
+  }, [isImporting, status]);
+
+  return (
+    <div className="import-e2e-room-keys">
+      <input ref={inputRef} onChange={handleFileChange} style={{ display: 'none' }} type="file" />
+
+      <form className="import-e2e-room-keys__form" onSubmit={(e) => { e.preventDefault(); importE2ERoomKeys(); }}>
+        { keyFile !== null && (
+          <div className="import-e2e-room-keys__file">
+            <IconButton onClick={removeImportKeysFile} src={CirclePlusIC} tooltip="Remove file" />
+            <Text>{keyFile.name}</Text>
+          </div>
+        )}
+        {keyFile === null && <Button onClick={() => inputRef.current.click()}>Import keys</Button>}
+        <Input forwardRef={passwordRef} type="password" placeholder="Password" required />
+        <Button disabled={isImporting} variant="primary" type="submit">Decrypt</Button>
+      </form>
+      { isImporting && status !== null && (
+        <div className="import-e2e-room-keys__process">
+          <Spinner size="small" />
+          <Text variant="b2">{status}</Text>
+        </div>
+      )}
+      {!isImporting && status !== null && <Text className="import-e2e-room-keys__error" variant="b2">{status}</Text>}
+    </div>
+  );
+}
+
+export default ImportE2ERoomKeys;

src/app/molecules/import-e2e-room-keys/ImportE2ERoomKeys.scss

@@ -0,0 +1,63 @@
+
+.import-e2e-room-keys {
+  &__file {
+    display: inline-flex;
+    align-items: center;
+    background: var(--bg-surface-low);
+    border-radius: var(--bo-radius);
+    box-shadow: var(--bs-surface-border);
+
+    & button {
+      --parent-height: 46px;
+      width: var(--parent-height);
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    & .ic-raw {
+      background-color: var(--bg-caution);
+      transform: rotate(45deg);
+    }
+    
+    & .text {
+      margin-left: var(--sp-tight);
+      margin-right: var(--sp-loose);
+      max-width: 86px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      [dir=rtl] {
+        margin-right: var(--sp-tight);
+        margin-left: var(--sp-loose);
+      }
+    }
+  }
+
+  &__form {
+    display: flex;
+    margin-top: var(--sp-extra-tight);
+    
+    
+    & .input-container {
+      flex: 1;
+      margin: 0 var(--sp-tight);
+    }
+  }
+
+  &__process {
+    margin-top: var(--sp-tight);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    & .text {
+      margin: 0 var(--sp-tight);
+    }
+  }
+  &__error {
+    margin-top: var(--sp-tight);
+    color: var(--bg-danger);
+  }
+}

src/app/molecules/media/Media.jsx

@@ -137,11 +137,12 @@ function File({
 }
 File.defaultProps = {
   file: null,
+  type: '',
 };
 File.propTypes = {
   name: PropTypes.string.isRequired,
   link: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
+  type: PropTypes.string,
   file: PropTypes.shape({}),
 };
 
@@ -176,6 +177,7 @@ Image.defaultProps = {
   file: null,
   width: null,
   height: null,
+  type: '',
 };
 Image.propTypes = {
   name: PropTypes.string.isRequired,
@@ -183,7 +185,7 @@ Image.propTypes = {
   height: PropTypes.number,
   link: PropTypes.string.isRequired,
   file: PropTypes.shape({}),
-  type: PropTypes.string.isRequired,
+  type: PropTypes.string,
 };
 
 function Audio({
@@ -220,11 +222,12 @@ function Audio({
 }
 Audio.defaultProps = {
   file: null,
+  type: '',
 };
 Audio.propTypes = {
   name: PropTypes.string.isRequired,
   link: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
+  type: PropTypes.string,
   file: PropTypes.shape({}),
 };
 
@@ -287,6 +290,7 @@ Video.defaultProps = {
   height: null,
   file: null,
   thumbnail: null,
+  type: '',
   thumbnailType: null,
   thumbnailFile: null,
 };
@@ -297,7 +301,7 @@ Video.propTypes = {
   width: PropTypes.number,
   height: PropTypes.number,
   file: PropTypes.shape({}),
-  type: PropTypes.string.isRequired,
+  type: PropTypes.string,
   thumbnailFile: PropTypes.shape({}),
   thumbnailType: PropTypes.string,
 };

src/app/molecules/message/Message.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import './Message.scss';
 
@@ -7,10 +7,15 @@ import ReactMarkdown from 'react-markdown';
 import gfm from 'remark-gfm';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { coy } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import parse from 'html-react-parser';
+import twemoji from 'twemoji';
+import { getUsername } from '../../../util/matrixUtil';
 
 import Text from '../../atoms/text/Text';
 import RawIcon from '../../atoms/system-icons/RawIcon';
-import Avatar from '../../atoms/avatar/Avatar';
+import Button from '../../atoms/button/Button';
+import Tooltip from '../../atoms/tooltip/Tooltip';
+import Input from '../../atoms/input/Input';
 
 import ReplyArrowIC from '../../../../public/res/ic/outlined/reply-arrow.svg';
 
@@ -61,89 +66,204 @@ function PlaceholderMessage() {
   );
 }
 
-function Message({
+function MessageHeader({
-  color, avatarSrc, name, content,
+  userId, name, color, time,
-  time, markdown, contentOnly, reply,
-  edited, reactions,
 }) {
-  const msgClass = contentOnly ? 'message--content-only' : 'message--full';
   return (
-    <div className={`message ${msgClass}`}>
+    <div className="message__header">
-      <div className="message__avatar-container">
+      <div style={{ color }} className="message__profile">
-        {!contentOnly && <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={color} size="small" />}
+        <Text variant="b1">{name}</Text>
+        <Text variant="b1">{userId}</Text>
       </div>
-      <div className="message__main-container">
+      <div className="message__time">
-        { !contentOnly && (
+        <Text variant="b3">{time}</Text>
-          <div className="message__header">
-            <div style={{ color }} className="message__profile">
-              <Text variant="b1">{name}</Text>
-            </div>
-            <div className="message__time">
-              <Text variant="b3">{time}</Text>
-            </div>
-          </div>
-        )}
-        <div className="message__content">
-          { reply !== null && (
-            <div className="message__reply-content">
-              <Text variant="b2">
-                <RawIcon color={reply.color} size="extra-small" src={ReplyArrowIC} />
-                <span style={{ color: reply.color }}>{reply.to}</span>
-                <>{` ${reply.content}`}</>
-              </Text>
-            </div>
-          )}
-          <div className="text text-b1">
-            { markdown ? genMarkdown(content) : linkifyContent(content) }
-          </div>
-          { edited && <Text className="message__edited" variant="b3">(edited)</Text>}
-          { reactions && (
-            <div className="message__reactions text text-b3 noselect">
-              {
-                reactions.map((reaction) => (
-                  <button key={reaction.id} onClick={() => alert('Sending reactions is yet to be implemented.')} type="button" className={`msg__reaction${reaction.active ? ' msg__reaction--active' : ''}`}>
-                    {`${reaction.key} ${reaction.count}`}
-                  </button>
-                ))
-              }
-            </div>
-          )}
-        </div>
       </div>
     </div>
   );
 }
-
+MessageHeader.propTypes = {
-Message.defaultProps = {
+  userId: PropTypes.string.isRequired,
-  color: 'var(--tc-surface-high)',
-  avatarSrc: null,
-  markdown: false,
-  contentOnly: false,
-  reply: null,
-  edited: false,
-  reactions: null,
-};
-
-Message.propTypes = {
-  color: PropTypes.string,
-  avatarSrc: PropTypes.string,
   name: PropTypes.string.isRequired,
-  content: PropTypes.node.isRequired,
+  color: PropTypes.string.isRequired,
   time: PropTypes.string.isRequired,
-  markdown: PropTypes.bool,
-  contentOnly: PropTypes.bool,
-  reply: PropTypes.shape({
-    color: PropTypes.string.isRequired,
-    to: PropTypes.string.isRequired,
-    content: PropTypes.string.isRequired,
-  }),
-  edited: PropTypes.bool,
-  reactions: PropTypes.arrayOf(PropTypes.exact({
-    id: PropTypes.string,
-    key: PropTypes.string,
-    count: PropTypes.number,
-    active: PropTypes.bool,
-  })),
 };
 
-export { Message as default, PlaceholderMessage };
+function MessageReply({ name, color, content }) {
+  return (
+    <div className="message__reply">
+      <Text variant="b2">
+        <RawIcon color={color} size="extra-small" src={ReplyArrowIC} />
+        <span style={{ color }}>{name}</span>
+        <>{` ${content}`}</>
+      </Text>
+    </div>
+  );
+}
+
+MessageReply.propTypes = {
+  name: PropTypes.string.isRequired,
+  color: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+};
+
+function MessageContent({ content, isMarkdown, isEdited }) {
+  return (
+    <div className="message__content">
+      <div className="text text-b1">
+        { isMarkdown ? genMarkdown(content) : linkifyContent(content) }
+      </div>
+      { isEdited && <Text className="message__content-edited" variant="b3">(edited)</Text>}
+    </div>
+  );
+}
+MessageContent.defaultProps = {
+  isMarkdown: false,
+  isEdited: false,
+};
+MessageContent.propTypes = {
+  content: PropTypes.node.isRequired,
+  isMarkdown: PropTypes.bool,
+  isEdited: PropTypes.bool,
+};
+
+function MessageEdit({ content, onSave, onCancel }) {
+  const editInputRef = useRef(null);
+  return (
+    <form className="message__edit" onSubmit={(e) => { e.preventDefault(); onSave(editInputRef.current.value); }}>
+      <Input
+        forwardRef={editInputRef}
+        value={content}
+        placeholder="Edit message"
+        required
+        resizable
+      />
+      <div className="message__edit-btns">
+        <Button type="submit" variant="primary">Save</Button>
+        <Button onClick={onCancel}>Cancel</Button>
+      </div>
+    </form>
+  );
+}
+MessageEdit.propTypes = {
+  content: PropTypes.string.isRequired,
+  onSave: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+};
+
+function MessageReactionGroup({ children }) {
+  return (
+    <div className="message__reactions text text-b3 noselect">
+      { children }
+    </div>
+  );
+}
+MessageReactionGroup.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+function genReactionMsg(userIds, reaction) {
+  const genLessContText = (text) => <span style={{ opacity: '.6' }}>{text}</span>;
+  let msg = <></>;
+  userIds.forEach((userId, index) => {
+    if (index === 0) msg = <>{getUsername(userId)}</>;
+    // eslint-disable-next-line react/jsx-one-expression-per-line
+    else if (index === userIds.length - 1) msg = <>{msg}{genLessContText(' and ')}{getUsername(userId)}</>;
+    // eslint-disable-next-line react/jsx-one-expression-per-line
+    else msg = <>{msg}{genLessContText(', ')}{getUsername(userId)}</>;
+  });
+  return (
+    <>
+      {msg}
+      {genLessContText(' reacted with')}
+      {parse(twemoji.parse(reaction))}
+    </>
+  );
+}
+
+function MessageReaction({
+  reaction, users, isActive, onClick,
+}) {
+  return (
+    <Tooltip
+      className="msg__reaction-tooltip"
+      content={<Text variant="b2">{genReactionMsg(users, reaction)}</Text>}
+    >
+      <button
+        onClick={onClick}
+        type="button"
+        className={`msg__reaction${isActive ? ' msg__reaction--active' : ''}`}
+      >
+        { parse(twemoji.parse(reaction)) }
+        <Text variant="b3" className="msg__reaction-count">{users.length}</Text>
+      </button>
+    </Tooltip>
+  );
+}
+MessageReaction.propTypes = {
+  reaction: PropTypes.node.isRequired,
+  users: PropTypes.arrayOf(PropTypes.string).isRequired,
+  isActive: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+function MessageOptions({ children }) {
+  return (
+    <div className="message__options">
+      {children}
+    </div>
+  );
+}
+MessageOptions.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+function Message({
+  avatar, header, reply, content, editContent, reactions, options,
+}) {
+  const msgClass = header === null ? ' message--content-only' : ' message--full';
+  return (
+    <div className={`message${msgClass}`}>
+      <div className="message__avatar-container">
+        {avatar !== null && avatar}
+      </div>
+      <div className="message__main-container">
+        {header !== null && header}
+        {reply !== null && reply}
+        {content !== null && content}
+        {editContent !== null && editContent}
+        {reactions !== null && reactions}
+        {options !== null && options}
+      </div>
+    </div>
+  );
+}
+Message.defaultProps = {
+  avatar: null,
+  header: null,
+  reply: null,
+  content: null,
+  editContent: null,
+  reactions: null,
+  options: null,
+};
+Message.propTypes = {
+  avatar: PropTypes.node,
+  header: PropTypes.node,
+  reply: PropTypes.node,
+  content: PropTypes.node,
+  editContent: PropTypes.node,
+  reactions: PropTypes.node,
+  options: PropTypes.node,
+};
+
+export {
+  Message,
+  MessageHeader,
+  MessageReply,
+  MessageContent,
+  MessageEdit,
+  MessageReactionGroup,
+  MessageReaction,
+  MessageOptions,
+  PlaceholderMessage,
+};

src/app/molecules/message/Message.scss

@@ -8,6 +8,9 @@
 
   &:hover {
     background-color: var(--bg-surface-hover);
+    & .message__options {
+      display: flex;
+    }
   }
 
   [dir=rtl] & {
@@ -21,8 +24,7 @@
     padding-top: 6px;
   }
   
-  &__avatar-container,
+  &__avatar-container{
-  &__profile {
     margin-right: var(--sp-tight);
 
     [dir=rtl] & {
@@ -36,6 +38,8 @@
   &__main-container {
     flex: 1;
     min-width: 0;
+
+    position: relative;
   }
 }
 
@@ -49,24 +53,6 @@
   &__avatar-container {
     width: var(--av-small);
   }
-  &__reply-content {
-    .text {
-      color: var(--tc-surface-low);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .ic-raw {
-      width: 16px;
-      height: 14px;
-    }
-  }
-  &__edited {
-    color: var(--tc-surface-low);
-  }
-  &__reactions {
-    margin-top: var(--sp-ultra-tight);
-  }
 }
 
 .ph-msg {
@@ -106,14 +92,28 @@
   }
 }
 
+.message__reply,
+.message__content,
+.message__edit,
+.message__reactions {
+  max-width: 640px;
+  min-width: 0;
+}
+
+
 .message__header {
   display: flex;
   align-items: baseline;
 
   & .message__profile {
-    flex: 1;
     min-width: 0;
     color: var(--tc-surface-high);
+    margin-right: var(--sp-tight);
+
+    [dir=rtl] & {
+      margin-left: var(--sp-tight);
+      margin-right: 0;
+    }
 
     & > .text {
       color: inherit;
@@ -122,16 +122,36 @@
       white-space: nowrap;
       text-overflow: ellipsis;
     }
+    & > .text:last-child { display: none; }
+    &:hover {
+      & > .text:first-child { display: none; }
+      & > .text:last-child { display: block; }
+    }
   }
 
   & .message__time {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
     & > .text {
+      white-space: nowrap;
       color: var(--tc-surface-low);
     }
   }
 }
+.message__reply {
+  .text {
+    color: var(--tc-surface-low);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .ic-raw {
+    width: 16px;
+    height: 14px;
+  }
+}
 .message__content {
-  max-width: 640px;
   word-break: break-word;
   
   & > .text > * {
@@ -141,21 +161,59 @@
   & a {
     word-break: break-all;
   }
+  &-edited {
+    color: var(--tc-surface-low);
+  }
+}
+.message__edit {
+  padding: var(--sp-extra-tight) 0;
+  &-btns button {
+    margin: var(--sp-tight) var(--sp-tight) 0 0;
+    [dir=rtl] & {
+      margin: var(--sp-tight) 0 0 var(--sp-tight);
+    }
+  }
+}
+.message__reactions {
+  display: flex;
+  flex-wrap: wrap;
+
+  & .ic-btn-surface {
+    display: none;
+    padding: var(--sp-ultra-tight);
+    margin-top: var(--sp-extra-tight);
+  }
+  &:hover .ic-btn-surface {
+    display: block;
+  }
 }
 .msg__reaction {
-  --reaction-height: 24px;
+  margin: var(--sp-extra-tight) var(--sp-extra-tight) 0 0;
-  --reaction-padding: 6px;
+  padding: 0 var(--sp-ultra-tight);
-  --reaction-radius: calc(var(--bo-radius) / 2);
+  min-height: 26px;
   display: inline-flex;
   align-items: center;
   color: var(--tc-surface-normal);
+  background-color: var(--bg-surface-low);
   border: 1px solid var(--bg-surface-border);
-  padding: 0 var(--reaction-padding);
+  border-radius: 4px;
-  border-radius: var(--reaction-radius);
   cursor: pointer;
-  height: var(--reaction-height);
 
-  margin-right: var(--sp-extra-tight);
+  & .emoji {
+    width: 14px;
+    height: 14px;
+    margin: 2px;
+  }
+  &-count {
+    margin: 0 var(--sp-ultra-tight);
+    color: var(--tc-surface-normal)
+  }
+  &-tooltip .emoji {
+    width: 14px;
+    height: 14px;
+    margin: 0 var(--sp-ultra-tight);
+    margin-bottom: -2px;
+  }
 
   [dir=rtl] & {
     margin: {
@@ -186,9 +244,26 @@
     }
   }
 }
+.message__options {
+  position: absolute;
+  top: 0;
+  right: 60px;
+  z-index: 999;
+  transform: translateY(-50%);
+
+  border-radius: var(--bo-radius);
+  box-shadow: var(--bs-surface-border);
+  background-color: var(--bg-surface-low);
+  display: none;
+
+  [dir=rtl] & {
+    left: 60px;
+    right: unset;
+  }
+}
 
 // markdown formating
-.message {
+.message__content {
   & h1,
   & h2 {
     color: var(--tc-surface-high);
@@ -290,4 +365,37 @@
       }
     }
   }
+  & ul.contains-task-list {
+    padding: 0;
+    list-style: none;
+  }
+  & table {
+    background-color: var(--bg-surface-hover);
+    border-radius: calc(var(--bo-radius) / 2);
+    border-spacing: 0;
+    border: 1px solid var(--bg-surface-border);
+
+    & td, & th {
+      padding: var(--sp-extra-tight);
+      border: 1px solid var(--bg-surface-border);
+      border-width: 0 1px 1px 0;
+      &:last-child {
+        border-width: 0;
+        border-bottom-width: 1px;
+        [dir=rtl] & {
+          border-width: 0 1px 1px 0;
+        }
+      }
+      [dir=rtl] &:first-child {
+        border-width: 0;
+        border-bottom-width: 1px;
+      }
+    }
+    & tbody tr:nth-child(2n + 1) {
+      background-color: var(--bg-surface-hover);
+    }
+    & tr:last-child td {
+      border-bottom-width: 0px !important;
+    }
+  }
 }

src/app/molecules/message/TimelineChange.jsx

@@ -14,7 +14,7 @@ import InviteCancelArraowIC from '../../../../public/res/ic/outlined/invite-canc
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
 
-function TimelineChange({ variant, content, time }) {
+function TimelineChange({ variant, content, time, onClick }) {
   let iconSrc;
 
   switch (variant) {
@@ -42,7 +42,7 @@ function TimelineChange({ variant, content, time }) {
   }
 
   return (
-    <div className="timeline-change">
+    <button style={{ cursor: onClick === null ? 'default' : 'pointer' }} onClick={onClick} type="button" className="timeline-change">
       <div className="timeline-change__avatar-container">
         <RawIcon src={iconSrc} size="extra-small" />
       </div>
@@ -55,12 +55,13 @@ function TimelineChange({ variant, content, time }) {
       <div className="timeline-change__time">
         <Text variant="b3">{time}</Text>
       </div>
-    </div>
+    </button>
   );
 }
 
 TimelineChange.defaultProps = {
   variant: 'other',
+  onClick: null,
 };
 
 TimelineChange.propTypes = {
@@ -74,6 +75,7 @@ TimelineChange.propTypes = {
     PropTypes.node,
   ]).isRequired,
   time: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
 };
 
 export default TimelineChange;

src/app/molecules/message/TimelineChange.scss

@@ -3,6 +3,7 @@
   padding-right: var(--sp-extra-tight);
   display: flex;
   align-items: center;
+  width: 100%;
 
   &:hover {
     background-color: var(--bg-surface-hover);

src/app/molecules/popup-window/PopupWindow.scss

@@ -5,7 +5,7 @@
 }
 
 .pw {
-  --popup-window-drawer-width: 312px;
+  --popup-window-drawer-width: 280px;
 
   width: 100%;
   height: 100%;
@@ -51,26 +51,21 @@
 
 .pw__drawer {
   & .header {
-    padding-left: var(--sp-extra-tight);
+    padding-left: var(--sp-tight);
-
+    & .header__title-wrapper {
-    & .ic-btn-surface:first-child {
+      margin: 0 var(--sp-extra-tight);
-      margin-right: var(--sp-ultra-tight);
     }
-
     [dir=rtl] & {
-        padding-right: var(--sp-extra-tight);
+        padding-right: var(--sp-tight);
-      & .ic-btn-surface:first-child {
-        margin-right: 0;
-        margin-left: var(--sp-ultra-tight);
-      }
     }
   }
 }
 
 .pw-content-selector {
+  margin: 0 var(--sp-extra-tight);
+  border-radius: var(--bo-radius);
   &--selected {
-    border: 1px solid var(--bg-surface-border);
+    box-shadow: var(--bs-surface-border);
-    border-width: 1px 0;
     background-color: var(--bg-surface);
 
     & .context-menu__item > button {
@@ -81,17 +76,13 @@
   }
 
   & .context-menu__item > button {
+    border-radius: var(--bo-radius);
     & .text {
       color: var(--tc-surface-normal);
     }
-    padding-left: var(--sp-normal);
     & .ic-raw {
       margin-right: var(--sp-tight);
-    }
+      [dir=rtl] & {
-
-    [dir=rtl] & {
-      padding-right: var(--sp-normal);
-      & .ic-raw {
         margin-right: 0;
         margin-left: var(--sp-tight);
       }

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/ChannelView.scss

@@ -22,103 +22,6 @@
     position: relative;
   }
   
-  &__content {
-    min-height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-
-    & .timeline__wrapper {
-      --typing-noti-height: 28px;
-      min-height: 0;
-      min-width: 0;
-      padding-bottom: var(--typing-noti-height);
-    }
-  }
-
-  &__typing {
-    display: flex;
-    padding: var(--sp-ultra-tight) var(--sp-normal);
-    background: var(--bg-surface);
-    transition: transform 200ms ease-in-out;
-
-    & b {
-      color: var(--tc-surface-high);
-    }
-
-    &--open {
-      transform: translateY(-99%);
-    }
-
-    & .text {
-      flex: 1;
-      min-width: 0;
-
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      margin: 0 var(--sp-tight);
-    }
-  }
-
-  .bouncingLoader {
-    transform: translateY(2px);
-    margin: 0 calc(var(--sp-ultra-tight) / 2);
-  }
-  .bouncingLoader > div,
-  .bouncingLoader:before,
-  .bouncingLoader:after {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    background: var(--tc-surface-high);
-    border-radius: 50%;
-    animation: bouncing-loader 0.6s infinite alternate;
-  }
-  
-  .bouncingLoader:before,
-  .bouncingLoader:after {
-    content: "";
-  }
-  
-  .bouncingLoader > div {
-    margin: 0 4px;
-  }
-  
-  .bouncingLoader > div {
-    animation-delay: 0.2s;
-  }
-  
-  .bouncingLoader:after {
-    animation-delay: 0.4s;
-  }
-  
-  @keyframes bouncing-loader {
-    to {
-      opacity: 0.1;
-      transform: translate3d(0, -4px, 0);
-    }
-  }
-
-  &__STB {
-    position: absolute;
-    right: var(--sp-normal);
-    bottom: 0;
-    border-radius: var(--bo-radius);
-    box-shadow: var(--bs-surface-border);
-    background-color: var(--bg-surface-low);
-    transition: transform 200ms ease-in-out;
-    transform: translateY(100%) scale(0);
-    [dir=rtl] & {
-      right: unset;
-      left: var(--sp-normal);
-    }
-
-    &--open {
-      transform: translateY(-28px) scale(1);
-    }
-  }
-  
   &__sticky {
     min-height: 85px;
     position: relative;
@@ -126,123 +29,3 @@
     border-top: 1px solid var(--bg-surface-border);
   }
 }
-
-.channel-input {
-  padding: var(--sp-extra-tight) calc(var(--sp-normal) - 2px);
-  display: flex;
-  min-height: 48px;
-
-  &__space {
-    min-width: 0;
-    align-self: center;
-    margin: auto;
-    padding: 0 var(--sp-tight);
-  }
-
-  &__input-container {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    align-items: center;
-
-    margin: 0 calc(var(--sp-tight)  - 2px);
-    background-color: var(--bg-surface-low);
-    box-shadow: var(--bs-surface-border);
-    border-radius: var(--bo-radius);
-
-    & > .ic-raw {
-      transform: scale(0.8);
-      margin-left: var(--sp-extra-tight);
-      [dir=rtl] & {
-        margin-left: 0;
-        margin-right: var(--sp-extra-tight);
-      }
-    }
-    & .scrollbar {
-      max-height: 50vh;
-    }
-  }
-
-  &__textarea-wrapper {
-    min-height: 40px;
-    display: flex;
-    align-items: center;
-
-    & textarea {
-      resize: none;
-      width: 100%;
-      min-width: 0;
-      min-height: 100%;
-      padding: var(--sp-ultra-tight) calc(var(--sp-tight) - 2px);
-
-      &::placeholder {
-        color: var(--tc-surface-low);
-      }
-      &:focus {
-        outline: none;
-      }
-    }
-  }
-}
-
-.channel-cmd-bar {
-  --cmd-bar-height: 28px;
-  min-height: var(--cmd-bar-height);
-
-  & .timeline-change {
-    justify-content: flex-end;
-    padding: var(--sp-ultra-tight) var(--sp-normal);
-
-    &__content {
-      margin: 0;
-      flex: unset;
-      & > .text {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        & b {
-          color: var(--tc-surface-normal);
-        }
-      }
-    }
-  }
-}
-
-.channel-attachment {
-  --side-spacing: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
-  display: flex;
-  align-items: center;
-  margin-left: var(--side-spacing);
-  margin-top: var(--sp-extra-tight);
-  line-height: 0;
-  [dir=rtl] & {
-    margin-left: 0;
-    margin-right: var(--side-spacing);
-  }
-
-  &__preview > img {
-    max-height: 40px;
-    border-radius: var(--bo-radius);
-  }
-  &__icon {
-    padding: var(--sp-extra-tight);
-    background-color: var(--bg-surface-low);
-    box-shadow: var(--bs-surface-border);
-    border-radius: var(--bo-radius);
-  }
-  &__info {
-    flex: 1;
-    min-width: 0;
-    margin: 0 var(--sp-tight);
-  }
-
-  &__option button {
-    transition: transform 200ms ease-in-out;
-    transform: translateY(-48px);
-    & .ic-raw {
-      transition: transform 200ms ease-in-out;
-      transform: rotate(45deg);
-      background-color: var(--bg-caution);
-    }
-  }
-}

src/app/organisms/channel/ChannelViewCmdBar.jsx

@@ -0,0 +1,475 @@
+/* eslint-disable react/prop-types */
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import './ChannelViewCmdBar.scss';
+import parse from 'html-react-parser';
+import twemoji from 'twemoji';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import { toggleMarkdown } from '../../../client/action/settings';
+import * as roomActions from '../../../client/action/room';
+import {
+  selectRoom,
+  openCreateChannel,
+  openPublicChannels,
+  openInviteUser,
+  openReadReceipts,
+} from '../../../client/action/navigation';
+import { emojis } from '../emoji-board/emoji';
+import AsyncSearch from '../../../util/AsyncSearch';
+
+import Text from '../../atoms/text/Text';
+import Button from '../../atoms/button/Button';
+import IconButton from '../../atoms/button/IconButton';
+import ContextMenu, { MenuHeader } from '../../atoms/context-menu/ContextMenu';
+import ScrollView from '../../atoms/scroll/ScrollView';
+import SettingTile from '../../molecules/setting-tile/SettingTile';
+import TimelineChange from '../../molecules/message/TimelineChange';
+
+import CmdIC from '../../../../public/res/ic/outlined/cmd.svg';
+
+import { getUsersActionJsx } from './common';
+
+const commands = [{
+  name: 'markdown',
+  description: 'Toggle markdown for messages.',
+  exe: () => toggleMarkdown(),
+}, {
+  name: 'startDM',
+  isOptions: true,
+  description: 'Start direct message with user. Example: /startDM/@johndoe.matrix.org',
+  exe: (roomId, searchTerm) => openInviteUser(undefined, searchTerm),
+}, {
+  name: 'createChannel',
+  description: 'Create new channel',
+  exe: () => openCreateChannel(),
+}, {
+  name: 'join',
+  isOptions: true,
+  description: 'Join channel with alias. Example: /join/#cinny:matrix.org',
+  exe: (roomId, searchTerm) => openPublicChannels(searchTerm),
+}, {
+  name: 'leave',
+  description: 'Leave current channel',
+  exe: (roomId) => roomActions.leave(roomId),
+}, {
+  name: 'invite',
+  isOptions: true,
+  description: 'Invite user to room. Example: /invite/@johndoe:matrix.org',
+  exe: (roomId, searchTerm) => openInviteUser(roomId, searchTerm),
+}];
+
+function CmdHelp() {
+  return (
+    <ContextMenu
+      placement="top"
+      content={(
+        <>
+          <MenuHeader>General command</MenuHeader>
+          <Text variant="b2">/command_name</Text>
+          <MenuHeader>Go-to commands</MenuHeader>
+          <Text variant="b2">{'>*space_name'}</Text>
+          <Text variant="b2">{'>#channel_name'}</Text>
+          <Text variant="b2">{'>@people_name'}</Text>
+          <MenuHeader>Autofill command</MenuHeader>
+          <Text variant="b2">:emoji_name:</Text>
+          <Text variant="b2">@name</Text>
+        </>
+      )}
+      render={(toggleMenu) => (
+        <IconButton
+          src={CmdIC}
+          size="extra-small"
+          onClick={toggleMenu}
+          tooltip="Commands"
+        />
+      )}
+    />
+  );
+}
+
+function ViewCmd() {
+  function renderAllCmds() {
+    return commands.map((command) => (
+      <SettingTile
+        key={command.name}
+        title={command.name}
+        content={(<Text variant="b3">{command.description}</Text>)}
+      />
+    ));
+  }
+  return (
+    <ContextMenu
+      maxWidth={250}
+      placement="top"
+      content={(
+        <>
+          <MenuHeader>General commands</MenuHeader>
+          {renderAllCmds()}
+        </>
+      )}
+      render={(toggleMenu) => (
+        <span>
+          <Button onClick={toggleMenu}><span className="text text-b3">View all</span></Button>
+        </span>
+      )}
+    />
+  );
+}
+
+function FollowingMembers({ roomId, roomTimeline, viewEvent }) {
+  const [followingMembers, setFollowingMembers] = useState([]);
+  const mx = initMatrix.matrixClient;
+
+  function handleOnMessageSent() {
+    setFollowingMembers([]);
+  }
+
+  function updateFollowingMembers() {
+    const room = mx.getRoom(roomId);
+    const { timeline } = room;
+    const userIds = room.getUsersReadUpTo(timeline[timeline.length - 1]);
+    const myUserId = mx.getUserId();
+    setFollowingMembers(userIds.filter((userId) => userId !== myUserId));
+  }
+
+  useEffect(() => updateFollowingMembers(), [roomId]);
+
+  useEffect(() => {
+    roomTimeline.on(cons.events.roomTimeline.READ_RECEIPT, updateFollowingMembers);
+    viewEvent.on('message_sent', handleOnMessageSent);
+    return () => {
+      roomTimeline.removeListener(cons.events.roomTimeline.READ_RECEIPT, updateFollowingMembers);
+      viewEvent.removeListener('message_sent', handleOnMessageSent);
+    };
+  }, [roomTimeline]);
+
+  const lastMEvent = roomTimeline.timeline[roomTimeline.timeline.length - 1];
+  return followingMembers.length !== 0 && (
+    <TimelineChange
+      variant="follow"
+      content={getUsersActionJsx(roomId, followingMembers, 'following the conversation.')}
+      time=""
+      onClick={() => openReadReceipts(roomId, lastMEvent.getId())}
+    />
+  );
+}
+
+FollowingMembers.propTypes = {
+  roomId: PropTypes.string.isRequired,
+  roomTimeline: PropTypes.shape({}).isRequired,
+  viewEvent: PropTypes.shape({}).isRequired,
+};
+
+function getCmdActivationMessage(prefix) {
+  function genMessage(prime, secondary) {
+    return (
+      <>
+        <span>{prime}</span>
+        <span>{secondary}</span>
+      </>
+    );
+  }
+  const cmd = {
+    '/': () => genMessage('General command mode activated. ', 'Type command name for suggestions.'),
+    '>*': () => genMessage('Go-to command mode activated. ', 'Type space name for suggestions.'),
+    '>#': () => genMessage('Go-to command mode activated. ', 'Type channel name for suggestions.'),
+    '>@': () => genMessage('Go-to command mode activated. ', 'Type people name for suggestions.'),
+    ':': () => genMessage('Emoji autofill command mode activated. ', 'Type emoji shortcut for suggestions.'),
+    '@': () => genMessage('Name autofill command mode activated. ', 'Type name for suggestions.'),
+  };
+  return cmd[prefix]?.();
+}
+
+function CmdItem({ onClick, children }) {
+  return (
+    <button className="cmd-item" onClick={onClick} type="button">
+      {children}
+    </button>
+  );
+}
+CmdItem.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+function getCmdSuggestions({ prefix, option, suggestions }, fireCmd) {
+  function getGenCmdSuggestions(cmdPrefix, cmds) {
+    const cmdOptString = (typeof option === 'string') ? `/${option}` : '/?';
+    return cmds.map((cmd) => (
+      <CmdItem
+        key={cmd.name}
+        onClick={() => {
+          fireCmd({
+            prefix: cmdPrefix,
+            option,
+            result: cmd,
+          });
+        }}
+      >
+        <Text variant="b2">{`${cmd.name}${cmd.isOptions ? cmdOptString : ''}`}</Text>
+      </CmdItem>
+    ));
+  }
+
+  function getRoomsSuggestion(cmdPrefix, rooms) {
+    return rooms.map((room) => (
+      <CmdItem
+        key={room.roomId}
+        onClick={() => {
+          fireCmd({
+            prefix: cmdPrefix,
+            result: room,
+          });
+        }}
+      >
+        <Text variant="b2">{room.name}</Text>
+      </CmdItem>
+    ));
+  }
+
+  function getEmojiSuggestion(emPrefix, emos) {
+    return emos.map((emoji) => (
+      <CmdItem
+        key={emoji.hexcode}
+        onClick={() => fireCmd({
+          prefix: emPrefix,
+          result: emoji,
+        })}
+      >
+        {
+          parse(twemoji.parse(
+            emoji.unicode,
+            {
+              attributes: () => ({
+                unicode: emoji.unicode,
+                shortcodes: emoji.shortcodes?.toString(),
+              }),
+            },
+          ))
+        }
+        <Text variant="b2">{`:${emoji.shortcode}:`}</Text>
+      </CmdItem>
+    ));
+  }
+
+  function getNameSuggestion(namePrefix, members) {
+    return members.map((member) => (
+      <CmdItem
+        key={member.userId}
+        onClick={() => {
+          fireCmd({
+            prefix: namePrefix,
+            result: member,
+          });
+        }}
+      >
+        <Text variant="b2">{member.name}</Text>
+      </CmdItem>
+    ));
+  }
+
+  const cmd = {
+    '/': (cmds) => getGenCmdSuggestions(prefix, cmds),
+    '>*': (spaces) => getRoomsSuggestion(prefix, spaces),
+    '>#': (channels) => getRoomsSuggestion(prefix, channels),
+    '>@': (peoples) => getRoomsSuggestion(prefix, peoples),
+    ':': (emos) => getEmojiSuggestion(prefix, emos),
+    '@': (members) => getNameSuggestion(prefix, members),
+  };
+  return cmd[prefix]?.(suggestions);
+}
+
+const asyncSearch = new AsyncSearch();
+let cmdPrefix;
+let cmdOption;
+function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) {
+  const [cmd, setCmd] = useState(null);
+
+  function displaySuggestions(suggestions) {
+    if (suggestions.length === 0) {
+      setCmd({ prefix: cmd?.prefix || cmdPrefix, error: 'No suggestion found.' });
+      viewEvent.emit('cmd_error');
+      return;
+    }
+    setCmd({ prefix: cmd?.prefix || cmdPrefix, suggestions, option: cmdOption });
+  }
+
+  function processCmd(prefix, slug) {
+    let searchTerm = slug;
+    cmdOption = undefined;
+    cmdPrefix = prefix;
+    if (prefix === '/') {
+      const cmdSlugParts = slug.split('/');
+      [searchTerm, cmdOption] = cmdSlugParts;
+    }
+    if (prefix === ':') {
+      if (searchTerm.length <= 3) {
+        if (searchTerm.match(/^[-]?(\))$/)) searchTerm = 'smile';
+        else if (searchTerm.match(/^[-]?(s|S)$/)) searchTerm = 'confused';
+        else if (searchTerm.match(/^[-]?(o|O|0)$/)) searchTerm = 'astonished';
+        else if (searchTerm.match(/^[-]?(\|)$/)) searchTerm = 'neutral_face';
+        else if (searchTerm.match(/^[-]?(d|D)$/)) searchTerm = 'grin';
+        else if (searchTerm.match(/^[-]?(\/)$/)) searchTerm = 'frown';
+        else if (searchTerm.match(/^[-]?(p|P)$/)) searchTerm = 'stuck_out_tongue';
+        else if (searchTerm.match(/^'[-]?(\()$/)) searchTerm = 'cry';
+        else if (searchTerm.match(/^[-]?(x|X)$/)) searchTerm = 'dizzy_face';
+        else if (searchTerm.match(/^[-]?(\()$/)) searchTerm = 'pleading_face';
+        else if (searchTerm.match(/^[-]?(\$)$/)) searchTerm = 'money';
+        else if (searchTerm.match(/^(<3)$/)) searchTerm = 'heart';
+      }
+    }
+
+    asyncSearch.search(searchTerm);
+  }
+  function activateCmd(prefix) {
+    setCmd({ prefix });
+    cmdPrefix = prefix;
+
+    const { roomList, matrixClient } = initMatrix;
+    function getRooms(roomIds) {
+      return roomIds.map((rId) => {
+        const room = matrixClient.getRoom(rId);
+        return {
+          name: room.name,
+          roomId: room.roomId,
+        };
+      });
+    }
+    const setupSearch = {
+      '/': () => asyncSearch.setup(commands, { keys: ['name'], isContain: true }),
+      '>*': () => asyncSearch.setup(getRooms([...roomList.spaces]), { keys: ['name'], limit: 20 }),
+      '>#': () => asyncSearch.setup(getRooms([...roomList.rooms]), { keys: ['name'], limit: 20 }),
+      '>@': () => asyncSearch.setup(getRooms([...roomList.directs]), { keys: ['name'], limit: 20 }),
+      ':': () => asyncSearch.setup(emojis, { keys: ['shortcode'], limit: 20 }),
+      '@': () => asyncSearch.setup(matrixClient.getRoom(roomId).getJoinedMembers().map((member) => ({
+        name: member.name,
+        userId: member.userId.slice(1),
+      })), { keys: ['name', 'userId'], limit: 20 }),
+    };
+    setupSearch[prefix]?.();
+  }
+  function deactivateCmd() {
+    setCmd(null);
+    cmdOption = undefined;
+    cmdPrefix = undefined;
+  }
+  function fireCmd(myCmd) {
+    if (myCmd.prefix.match(/^>[*#@]$/)) {
+      selectRoom(myCmd.result.roomId);
+      viewEvent.emit('cmd_fired');
+    }
+    if (myCmd.prefix === '/') {
+      myCmd.result.exe(roomId, myCmd.option);
+      viewEvent.emit('cmd_fired');
+    }
+    if (myCmd.prefix === ':') {
+      viewEvent.emit('cmd_fired', {
+        replace: myCmd.result.unicode,
+      });
+    }
+    if (myCmd.prefix === '@') {
+      viewEvent.emit('cmd_fired', {
+        replace: myCmd.result.name,
+      });
+    }
+    deactivateCmd();
+  }
+  function executeCmd() {
+    if (cmd.suggestions.length === 0) return;
+    fireCmd({
+      prefix: cmd.prefix,
+      option: cmd.option,
+      result: cmd.suggestions[0],
+    });
+  }
+
+  function listenKeyboard(event) {
+    const { activeElement } = document;
+    const lastCmdItem = document.activeElement.parentNode.lastElementChild;
+    if (event.keyCode === 27) {
+      if (activeElement.className !== 'cmd-item') return;
+      viewEvent.emit('focus_msg_input');
+    }
+    if (event.keyCode === 9) {
+      if (lastCmdItem.className !== 'cmd-item') return;
+      if (lastCmdItem !== activeElement) return;
+      if (event.shiftKey) return;
+      viewEvent.emit('focus_msg_input');
+      event.preventDefault();
+    }
+  }
+
+  useEffect(() => {
+    viewEvent.on('cmd_activate', activateCmd);
+    viewEvent.on('cmd_deactivate', deactivateCmd);
+    return () => {
+      deactivateCmd();
+      viewEvent.removeListener('cmd_activate', activateCmd);
+      viewEvent.removeListener('cmd_deactivate', deactivateCmd);
+    };
+  }, [roomId]);
+
+  useEffect(() => {
+    if (cmd !== null) document.body.addEventListener('keydown', listenKeyboard);
+    viewEvent.on('cmd_process', processCmd);
+    viewEvent.on('cmd_exe', executeCmd);
+    asyncSearch.on(asyncSearch.RESULT_SENT, displaySuggestions);
+    return () => {
+      if (cmd !== null) document.body.removeEventListener('keydown', listenKeyboard);
+
+      viewEvent.removeListener('cmd_process', processCmd);
+      viewEvent.removeListener('cmd_exe', executeCmd);
+      asyncSearch.removeListener(asyncSearch.RESULT_SENT, displaySuggestions);
+    };
+  }, [cmd]);
+
+  if (typeof cmd?.error === 'string') {
+    return (
+      <div className="cmd-bar">
+        <div className="cmd-bar__info">
+          <div className="cmd-bar__info-indicator--error" />
+        </div>
+        <div className="cmd-bar__content">
+          <Text className="cmd-bar__content-error" variant="b2">{cmd.error}</Text>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="cmd-bar">
+      <div className="cmd-bar__info">
+        {cmd === null && <CmdHelp />}
+        {cmd !== null && typeof cmd.suggestions === 'undefined' && <div className="cmd-bar__info-indicator" /> }
+        {cmd !== null && typeof cmd.suggestions !== 'undefined' && <Text variant="b3">TAB</Text>}
+      </div>
+      <div className="cmd-bar__content">
+        {cmd === null && (
+          <FollowingMembers
+            roomId={roomId}
+            roomTimeline={roomTimeline}
+            viewEvent={viewEvent}
+          />
+        )}
+        {cmd !== null && typeof cmd.suggestions === 'undefined' && <Text className="cmd-bar__content-help" variant="b2">{getCmdActivationMessage(cmd.prefix)}</Text>}
+        {cmd !== null && typeof cmd.suggestions !== 'undefined' && (
+          <ScrollView horizontal vertical={false} invisible>
+            <div className="cmd-bar__content__suggestions">{getCmdSuggestions(cmd, fireCmd)}</div>
+          </ScrollView>
+        )}
+      </div>
+      <div className="cmd-bar__more">
+        {cmd !== null && cmd.prefix === '/' && <ViewCmd />}
+      </div>
+    </div>
+  );
+}
+ChannelViewCmdBar.propTypes = {
+  roomId: PropTypes.string.isRequired,
+  roomTimeline: PropTypes.shape({}).isRequired,
+  viewEvent: PropTypes.shape({}).isRequired,
+};
+
+export default ChannelViewCmdBar;

src/app/organisms/channel/ChannelViewCmdBar.scss

@@ -0,0 +1,144 @@
+.overflow-ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.cmd-bar {
+  --cmd-bar-height: 28px;
+  min-height: var(--cmd-bar-height);
+  display: flex;
+
+  &__info {
+    display: flex;
+    width: calc(2 * var(--sp-extra-loose));
+    padding-left: var(--sp-ultra-tight);
+    [dir=rtl] & {
+      padding-left: 0;
+      padding-right: var(--sp-ultra-tight);
+    }
+
+    & > * {
+      margin: auto;
+    }
+
+    & .ic-btn-surface {
+      padding: 0;
+      & .ic-raw {
+        background-color: var(--tc-surface-low);
+      }
+    }
+    & .context-menu .text-b2 {
+      margin: var(--sp-extra-tight) var(--sp-tight);
+    }
+
+    &-indicator,
+    &-indicator--error {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: var(--bg-positive);
+    }
+    &-indicator--error {
+      background-color: var(--bg-danger);
+    }
+  }
+
+  &__content {
+    min-width: 0;
+    flex: 1;
+    display: flex;
+
+    &-help,
+    &-error {
+      @extend .overflow-ellipsis;
+      align-self: center;
+      span {
+        color: var(--tc-surface-low);
+        &:first-child {
+          color: var(--tc-surface-normal)
+        }
+      }
+    }
+    &-error {
+      color: var(--bg-danger);
+    }
+    &__suggestions {
+      display: flex;
+      height: 100%;
+      white-space: nowrap;
+    }
+  }
+  &__more {
+    display: flex;
+    & button {
+      min-width: 0;
+      height: 100%;
+      margin: 0 var(--sp-normal);
+      padding: 0 var(--sp-extra-tight);
+      box-shadow: none;
+      border-radius: var(--bo-radius) var(--bo-radius) 0 0;
+      & .text {
+        color: var(--tc-surface-normal);
+      }
+    }
+    & .setting-tile {
+      margin: var(--sp-tight);
+    }
+  }
+
+  & .timeline-change {
+    width: 100%;
+    justify-content: flex-end;
+    padding: var(--sp-ultra-tight) var(--sp-normal);
+    border-radius: var(--bo-radius) var(--bo-radius) 0 0;
+
+    &__content {
+      margin: 0;
+      flex: unset;
+      & > .text {
+        @extend .overflow-ellipsis;
+        & b {
+          color: var(--tc-surface-normal);
+        }
+      }
+    }
+  }
+}
+
+.cmd-item {
+  --cmd-item-bar: inset 0 -2px 0 0 var(--bg-caution);
+
+  display: inline-flex;
+  align-items: center;
+  margin-right: var(--sp-extra-tight);
+  padding: 0 var(--sp-extra-tight);
+  height: 100%;
+  border-radius: var(--bo-radius) var(--bo-radius) 0 0;
+  cursor: pointer;
+
+  & .emoji {
+    width: 20px;
+    height: 20px;
+    margin-right: var(--sp-ultra-tight);
+  }
+
+  &:hover {
+    background-color: var(--bg-caution-hover);
+  }
+  &:focus {
+    background-color: var(--bg-caution-active);
+    box-shadow: var(--cmd-item-bar);
+    border-bottom: 2px solid transparent;
+    outline: none;
+  }
+  
+  [dir=rtl] & {
+    margin-right: 0;
+    margin-left: var(--sp-extra-tight);
+    & .emoji {
+      margin-right: 0;
+      margin-left: var(--sp-ultra-tight);
+    }
+  }
+}

src/app/organisms/channel/ChannelViewContent.jsx

@@ -0,0 +1,581 @@
+/* eslint-disable react/prop-types */
+import React, { useState, useEffect, useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import './ChannelViewContent.scss';
+
+import dateFormat from 'dateformat';
+
+import initMatrix from '../../../client/initMatrix';
+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 { openEmojiBoard, openReadReceipts } from '../../../client/action/navigation';
+
+import Divider from '../../atoms/divider/Divider';
+import Avatar from '../../atoms/avatar/Avatar';
+import IconButton from '../../atoms/button/IconButton';
+import ContextMenu, { MenuHeader, MenuItem, MenuBorder } from '../../atoms/context-menu/ContextMenu';
+import {
+  Message,
+  MessageHeader,
+  MessageReply,
+  MessageContent,
+  MessageEdit,
+  MessageReactionGroup,
+  MessageReaction,
+  MessageOptions,
+  PlaceholderMessage,
+} from '../../molecules/message/Message';
+import * as Media from '../../molecules/media/Media';
+import ChannelIntro from '../../molecules/channel-intro/ChannelIntro';
+import TimelineChange from '../../molecules/message/TimelineChange';
+
+import ReplyArrowIC from '../../../../public/res/ic/outlined/reply-arrow.svg';
+import EmojiAddIC from '../../../../public/res/ic/outlined/emoji-add.svg';
+import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
+import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
+import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
+import BinIC from '../../../../public/res/ic/outlined/bin.svg';
+
+import { parseReply, parseTimelineChange } from './common';
+
+const MAX_MSG_DIFF_MINUTES = 5;
+
+function genPlaceholders() {
+  return (
+    <>
+      <PlaceholderMessage key="placeholder-1" />
+      <PlaceholderMessage key="placeholder-2" />
+      <PlaceholderMessage key="placeholder-3" />
+    </>
+  );
+}
+
+function isMedia(mE) {
+  return (
+    mE.getContent()?.msgtype === 'm.file'
+    || mE.getContent()?.msgtype === 'm.image'
+    || mE.getContent()?.msgtype === 'm.audio'
+    || mE.getContent()?.msgtype === 'm.video'
+    || mE.getType() === 'm.sticker'
+  );
+}
+
+function genMediaContent(mE) {
+  const mx = initMatrix.matrixClient;
+  const mContent = mE.getContent();
+  if (!mContent || !mContent.body) return <span style={{ color: 'var(--bg-danger)' }}>Malformed event</span>;
+
+  let mediaMXC = mContent?.url;
+  const isEncryptedFile = typeof mediaMXC === 'undefined';
+  if (isEncryptedFile) mediaMXC = mContent?.file?.url;
+
+  let thumbnailMXC = mContent?.info?.thumbnail_url;
+
+  if (typeof mediaMXC === 'undefined' || mediaMXC === '') return <span style={{ color: 'var(--bg-danger)' }}>Malformed event</span>;
+
+  let msgType = mE.getContent()?.msgtype;
+  if (mE.getType() === 'm.sticker') msgType = 'm.image';
+
+  switch (msgType) {
+    case 'm.file':
+      return (
+        <Media.File
+          name={mContent.body}
+          link={mx.mxcUrlToHttp(mediaMXC)}
+          type={mContent.info?.mimetype}
+          file={mContent.file || null}
+        />
+      );
+    case 'm.image':
+      return (
+        <Media.Image
+          name={mContent.body}
+          width={typeof mContent.info?.w === 'number' ? mContent.info?.w : null}
+          height={typeof mContent.info?.h === 'number' ? mContent.info?.h : null}
+          link={mx.mxcUrlToHttp(mediaMXC)}
+          file={isEncryptedFile ? mContent.file : null}
+          type={mContent.info?.mimetype}
+        />
+      );
+    case 'm.audio':
+      return (
+        <Media.Audio
+          name={mContent.body}
+          link={mx.mxcUrlToHttp(mediaMXC)}
+          type={mContent.info?.mimetype}
+          file={mContent.file || null}
+        />
+      );
+    case 'm.video':
+      if (typeof thumbnailMXC === 'undefined') {
+        thumbnailMXC = mContent.info?.thumbnail_file?.url || null;
+      }
+      return (
+        <Media.Video
+          name={mContent.body}
+          link={mx.mxcUrlToHttp(mediaMXC)}
+          thumbnail={thumbnailMXC === null ? null : mx.mxcUrlToHttp(thumbnailMXC)}
+          thumbnailFile={isEncryptedFile ? mContent.info?.thumbnail_file : null}
+          thumbnailType={mContent.info?.thumbnail_info?.mimetype || null}
+          width={typeof mContent.info?.w === 'number' ? mContent.info?.w : null}
+          height={typeof mContent.info?.h === 'number' ? mContent.info?.h : null}
+          file={isEncryptedFile ? mContent.file : null}
+          type={mContent.info?.mimetype}
+        />
+      );
+    default:
+      return <span style={{ color: 'var(--bg-danger)' }}>Malformed event</span>;
+  }
+}
+
+function genChannelIntro(mEvent, roomTimeline) {
+  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;
+  return (
+    <ChannelIntro
+      key={mEvent ? mEvent.getId() : 'channel-intro'}
+      roomId={roomTimeline.roomId}
+      avatarSrc={avatarSrc}
+      name={roomTimeline.room.name}
+      heading={`Welcome to ${roomTimeline.room.name}`}
+      desc={`This is the beginning of ${roomTimeline.room.name} channel.${typeof roomTopic !== 'undefined' ? (` Topic: ${roomTopic}`) : ''}`}
+      time={mEvent ? `Created at ${dateFormat(mEvent.getDate(), 'dd mmmm yyyy, hh:MM TT')}` : null}
+    />
+  );
+}
+
+function getMyEmojiEventId(emojiKey, eventId, roomTimeline) {
+  const mx = initMatrix.matrixClient;
+  const rEvents = roomTimeline.reactionTimeline.get(eventId);
+  let rEventId = null;
+  rEvents?.find((rE) => {
+    if (rE.getRelation() === null) return false;
+    if (rE.getRelation().key === emojiKey && rE.getSender() === mx.getUserId()) {
+      rEventId = rE.getId();
+      return true;
+    }
+    return false;
+  });
+  return rEventId;
+}
+
+function toggleEmoji(roomId, eventId, emojiKey, roomTimeline) {
+  const myAlreadyReactEventId = getMyEmojiEventId(emojiKey, eventId, roomTimeline);
+  if (typeof myAlreadyReactEventId === 'string') {
+    if (myAlreadyReactEventId.indexOf('~') === 0) return;
+    redactEvent(roomId, myAlreadyReactEventId);
+    return;
+  }
+  sendReaction(roomId, eventId, emojiKey);
+}
+
+function pickEmoji(e, roomId, eventId, roomTimeline) {
+  const boxInfo = e.target.getBoundingClientRect();
+  openEmojiBoard({
+    x: boxInfo.x,
+    y: boxInfo.y,
+    detail: e.detail,
+  }, (emoji) => {
+    toggleEmoji(roomId, eventId, emoji.unicode, roomTimeline);
+    e.target.click();
+  });
+}
+
+let wasAtBottom = true;
+function ChannelViewContent({
+  roomId, roomTimeline, timelineScroll, viewEvent,
+}) {
+  const [isReachedTimelineEnd, setIsReachedTimelineEnd] = useState(false);
+  const [onStateUpdate, updateState] = useState(null);
+  const [onPagination, setOnPagination] = useState(null);
+  const [editEvent, setEditEvent] = useState(null);
+  const mx = initMatrix.matrixClient;
+
+  function autoLoadTimeline() {
+    if (timelineScroll.isScrollable() === true) return;
+    roomTimeline.paginateBack();
+  }
+  function trySendingReadReceipt() {
+    const { room, timeline } = roomTimeline;
+    if (doesRoomHaveUnread(room) && timeline.length !== 0) {
+      mx.sendReadReceipt(timeline[timeline.length - 1]);
+    }
+  }
+
+  function onReachedTop() {
+    if (roomTimeline.isOngoingPagination || isReachedTimelineEnd) return;
+    roomTimeline.paginateBack();
+  }
+  function toggleOnReachedBottom(isBottom) {
+    wasAtBottom = isBottom;
+    if (!isBottom) return;
+    trySendingReadReceipt();
+  }
+
+  const updatePAG = (canPagMore) => {
+    if (!canPagMore) {
+      setIsReachedTimelineEnd(true);
+    } else {
+      setOnPagination({});
+      autoLoadTimeline();
+    }
+  };
+  // force update RoomTimeline on cons.events.roomTimeline.EVENT
+  const updateRT = () => {
+    if (wasAtBottom) {
+      trySendingReadReceipt();
+    }
+    updateState({});
+  };
+
+  useEffect(() => {
+    setIsReachedTimelineEnd(false);
+    wasAtBottom = true;
+  }, [roomId]);
+  useEffect(() => trySendingReadReceipt(), [roomTimeline]);
+
+  // init room setup completed.
+  // listen for future. setup stateUpdate listener.
+  useEffect(() => {
+    roomTimeline.on(cons.events.roomTimeline.EVENT, updateRT);
+    roomTimeline.on(cons.events.roomTimeline.PAGINATED, updatePAG);
+    viewEvent.on('reached-top', onReachedTop);
+    viewEvent.on('toggle-reached-bottom', toggleOnReachedBottom);
+
+    return () => {
+      roomTimeline.removeListener(cons.events.roomTimeline.EVENT, updateRT);
+      roomTimeline.removeListener(cons.events.roomTimeline.PAGINATED, updatePAG);
+      viewEvent.removeListener('reached-top', onReachedTop);
+      viewEvent.removeListener('toggle-reached-bottom', toggleOnReachedBottom);
+    };
+  }, [roomTimeline, isReachedTimelineEnd, onPagination]);
+
+  useLayoutEffect(() => {
+    timelineScroll.reachBottom();
+    autoLoadTimeline();
+  }, [roomTimeline]);
+
+  useLayoutEffect(() => {
+    if (onPagination === null) return;
+    timelineScroll.tryRestoringScroll();
+  }, [onPagination]);
+
+  useEffect(() => {
+    if (onStateUpdate === null) return;
+    if (wasAtBottom) timelineScroll.reachBottom();
+  }, [onStateUpdate]);
+
+  let prevMEvent = null;
+  function genMessage(mEvent) {
+    const myPowerlevel = roomTimeline.room.getMember(mx.getUserId()).powerLevel;
+    const canIRedact = roomTimeline.room.currentState.hasSufficientPowerLevelFor('redact', myPowerlevel);
+
+    const isContentOnly = (
+      prevMEvent !== null
+      && prevMEvent.getType() !== 'm.room.member'
+      && diffMinutes(mEvent.getDate(), prevMEvent.getDate()) <= MAX_MSG_DIFF_MINUTES
+      && prevMEvent.getSender() === mEvent.getSender()
+    );
+
+    let content = mEvent.getContent().body;
+    if (typeof content === 'undefined') return null;
+    let reply = null;
+    let reactions = null;
+    let isMarkdown = mEvent.getContent().format === 'org.matrix.custom.html';
+    const isReply = typeof mEvent.getWireContent()['m.relates_to']?.['m.in_reply_to'] !== 'undefined';
+    const isEdited = roomTimeline.editedTimeline.has(mEvent.getId());
+    const haveReactions = roomTimeline.reactionTimeline.has(mEvent.getId());
+
+    if (isReply) {
+      const parsedContent = parseReply(content);
+      if (parsedContent !== null) {
+        const c = roomTimeline.room.currentState;
+        const displayNameToUserIds = c.getUserIdsWithDisplayName(parsedContent.displayName);
+        const ID = parsedContent.userId || displayNameToUserIds[0];
+        reply = {
+          color: colorMXID(ID || parsedContent.displayName),
+          to: parsedContent.displayName || getUsername(parsedContent.userId),
+          content: parsedContent.replyContent,
+        };
+        content = parsedContent.content;
+      }
+    }
+
+    if (isEdited) {
+      const editedList = roomTimeline.editedTimeline.get(mEvent.getId());
+      const latestEdited = editedList[editedList.length - 1];
+      if (typeof latestEdited.getContent()['m.new_content'] === 'undefined') return null;
+      const latestEditBody = latestEdited.getContent()['m.new_content'].body;
+      const parsedEditedContent = parseReply(latestEditBody);
+      isMarkdown = latestEdited.getContent()['m.new_content'].format === 'org.matrix.custom.html';
+      if (parsedEditedContent === null) {
+        content = latestEditBody;
+      } else {
+        content = parsedEditedContent.content;
+      }
+    }
+
+    if (haveReactions) {
+      reactions = [];
+      roomTimeline.reactionTimeline.get(mEvent.getId()).forEach((rEvent) => {
+        if (rEvent.getRelation() === null) return;
+        function alreadyHaveThisReaction(rE) {
+          for (let i = 0; i < reactions.length; i += 1) {
+            if (reactions[i].key === rE.getRelation().key) return true;
+          }
+          return false;
+        }
+        if (alreadyHaveThisReaction(rEvent)) {
+          for (let i = 0; i < reactions.length; i += 1) {
+            if (reactions[i].key === rEvent.getRelation().key) {
+              reactions[i].users.push(rEvent.getSender());
+              if (reactions[i].isActive !== true) {
+                const myUserId = initMatrix.matrixClient.getUserId();
+                reactions[i].isActive = rEvent.getSender() === myUserId;
+                if (reactions[i].isActive) reactions[i].id = rEvent.getId();
+              }
+              break;
+            }
+          }
+        } else {
+          reactions.push({
+            id: rEvent.getId(),
+            key: rEvent.getRelation().key,
+            users: [rEvent.getSender()],
+            isActive: (rEvent.getSender() === initMatrix.matrixClient.getUserId()),
+          });
+        }
+      });
+    }
+
+    const senderMXIDColor = colorMXID(mEvent.sender.userId);
+    const userAvatar = isContentOnly ? null : (
+      <Avatar
+        imageSrc={mEvent.sender.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop')}
+        text={getUsernameOfRoomMember(mEvent.sender).slice(0, 1)}
+        bgColor={senderMXIDColor}
+        size="small"
+      />
+    );
+    const userHeader = isContentOnly ? null : (
+      <MessageHeader
+        userId={mEvent.sender.userId}
+        name={getUsernameOfRoomMember(mEvent.sender)}
+        color={senderMXIDColor}
+        time={`${dateFormat(mEvent.getDate(), 'hh:MM TT')}`}
+      />
+    );
+    const userReply = reply === null ? null : (
+      <MessageReply
+        name={reply.to}
+        color={reply.color}
+        content={reply.content}
+      />
+    );
+    const userContent = (
+      <MessageContent
+        isMarkdown={isMarkdown}
+        content={isMedia(mEvent) ? genMediaContent(mEvent) : content}
+        isEdited={isEdited}
+      />
+    );
+    const userReactions = reactions === null ? null : (
+      <MessageReactionGroup>
+        {
+          reactions.map((reaction) => (
+            <MessageReaction
+              key={reaction.id}
+              reaction={reaction.key}
+              users={reaction.users}
+              isActive={reaction.isActive}
+              onClick={() => {
+                toggleEmoji(roomId, mEvent.getId(), reaction.key, roomTimeline);
+              }}
+            />
+          ))
+        }
+        <IconButton
+          onClick={(e) => pickEmoji(e, roomId, mEvent.getId(), roomTimeline)}
+          src={EmojiAddIC}
+          size="extra-small"
+          tooltip="Add reaction"
+        />
+      </MessageReactionGroup>
+    );
+    const userOptions = (
+      <MessageOptions>
+        <IconButton
+          onClick={(e) => pickEmoji(e, roomId, mEvent.getId(), roomTimeline)}
+          src={EmojiAddIC}
+          size="extra-small"
+          tooltip="Add reaction"
+        />
+        <IconButton
+          onClick={() => {
+            viewEvent.emit('reply_to', mEvent.getSender(), mEvent.getId(), isMedia(mEvent) ? mEvent.getContent().body : content);
+          }}
+          src={ReplyArrowIC}
+          size="extra-small"
+          tooltip="Reply"
+        />
+        {(mEvent.getSender() === mx.getUserId() && !isMedia(mEvent)) && (
+          <IconButton
+            onClick={() => setEditEvent(mEvent)}
+            src={PencilIC}
+            size="extra-small"
+            tooltip="Edit"
+          />
+        )}
+        <ContextMenu
+          content={() => (
+            <>
+              <MenuHeader>Options</MenuHeader>
+              <MenuItem
+                iconSrc={EmojiAddIC}
+                onClick={(e) => pickEmoji(e, roomId, mEvent.getId(), roomTimeline)}
+              >
+                Add reaction
+              </MenuItem>
+              <MenuItem
+                iconSrc={ReplyArrowIC}
+                onClick={() => {
+                  viewEvent.emit('reply_to', mEvent.getSender(), mEvent.getId(), isMedia(mEvent) ? mEvent.getContent().body : content);
+                }}
+              >
+                Reply
+              </MenuItem>
+              {(mEvent.getSender() === mx.getUserId() && !isMedia(mEvent)) && (
+                <MenuItem iconSrc={PencilIC} onClick={() => setEditEvent(mEvent)}>Edit</MenuItem>
+              )}
+              <MenuItem
+                iconSrc={TickMarkIC}
+                onClick={() => openReadReceipts(roomId, mEvent.getId())}
+              >
+                Read receipts
+              </MenuItem>
+              {(canIRedact || mEvent.getSender() === mx.getUserId()) && (
+                <>
+                  <MenuBorder />
+                  <MenuItem
+                    variant="danger"
+                    iconSrc={BinIC}
+                    onClick={() => {
+                      if (window.confirm('Are you sure you want to delete this event')) {
+                        redactEvent(roomId, mEvent.getId());
+                      }
+                    }}
+                  >
+                    Delete
+                  </MenuItem>
+                </>
+              )}
+            </>
+          )}
+          render={(toggleMenu) => (
+            <IconButton
+              onClick={toggleMenu}
+              src={VerticalMenuIC}
+              size="extra-small"
+              tooltip="Options"
+            />
+          )}
+        />
+      </MessageOptions>
+    );
+
+    const isEditingEvent = editEvent?.getId() === mEvent.getId();
+    const myMessageEl = (
+      <Message
+        key={mEvent.getId()}
+        avatar={userAvatar}
+        header={userHeader}
+        reply={userReply}
+        content={editEvent !== null && isEditingEvent ? null : userContent}
+        editContent={editEvent !== null && isEditingEvent ? (
+          <MessageEdit
+            content={content}
+            onSave={(newBody) => {
+              if (newBody !== content) {
+                initMatrix.roomsInput.sendEditedMessage(roomId, mEvent, newBody);
+              }
+              setEditEvent(null);
+            }}
+            onCancel={() => setEditEvent(null)}
+          />
+        ) : null}
+        reactions={userReactions}
+        options={editEvent !== null && isEditingEvent ? null : userOptions}
+      />
+    );
+    return myMessageEl;
+  }
+
+  function renderMessage(mEvent) {
+    if (mEvent.getType() === 'm.room.create') return genChannelIntro(mEvent, roomTimeline);
+    if (
+      mEvent.getType() !== 'm.room.message'
+      && mEvent.getType() !== 'm.room.encrypted'
+      && mEvent.getType() !== 'm.room.member'
+      && mEvent.getType() !== 'm.sticker'
+    ) return false;
+    if (mEvent.getRelation()?.rel_type === 'm.replace') return false;
+
+    // ignore if message is deleted
+    if (mEvent.isRedacted()) return false;
+
+    let divider = null;
+    if (prevMEvent !== null && isNotInSameDay(mEvent.getDate(), prevMEvent.getDate())) {
+      divider = <Divider key={`divider-${mEvent.getId()}`} text={`${dateFormat(mEvent.getDate(), 'mmmm dd, yyyy')}`} />;
+    }
+
+    if (mEvent.getType() !== 'm.room.member') {
+      const messageComp = genMessage(mEvent);
+      prevMEvent = mEvent;
+      return (
+        <React.Fragment key={`box-${mEvent.getId()}`}>
+          {divider}
+          {messageComp}
+        </React.Fragment>
+      );
+    }
+
+    prevMEvent = mEvent;
+    const timelineChange = parseTimelineChange(mEvent);
+    if (timelineChange === null) return null;
+    return (
+      <React.Fragment key={`box-${mEvent.getId()}`}>
+        {divider}
+        <TimelineChange
+          key={mEvent.getId()}
+          variant={timelineChange.variant}
+          content={timelineChange.content}
+          time={`${dateFormat(mEvent.getDate(), 'hh:MM TT')}`}
+        />
+      </React.Fragment>
+    );
+  }
+
+  return (
+    <div className="channel-view__content">
+      <div className="timeline__wrapper">
+        { roomTimeline.timeline[0].getType() !== 'm.room.create' && !isReachedTimelineEnd && genPlaceholders() }
+        { roomTimeline.timeline[0].getType() !== 'm.room.create' && isReachedTimelineEnd && genChannelIntro(undefined, roomTimeline)}
+        { roomTimeline.timeline.map(renderMessage) }
+      </div>
+    </div>
+  );
+}
+ChannelViewContent.propTypes = {
+  roomId: PropTypes.string.isRequired,
+  roomTimeline: PropTypes.shape({}).isRequired,
+  timelineScroll: PropTypes.shape({}).isRequired,
+  viewEvent: PropTypes.shape({}).isRequired,
+};
+
+export default ChannelViewContent;

src/app/organisms/channel/ChannelViewContent.scss

@@ -0,0 +1,13 @@
+.channel-view__content {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+
+  & .timeline__wrapper {
+    --typing-noti-height: 28px;
+    min-height: 0;
+    min-width: 0;
+    padding-bottom: var(--typing-noti-height);
+  }
+}

src/app/organisms/channel/ChannelViewFloating.jsx

@@ -0,0 +1,83 @@
+/* eslint-disable react/prop-types */
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import './ChannelViewFloating.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+
+import Text from '../../atoms/text/Text';
+import IconButton from '../../atoms/button/IconButton';
+
+import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+
+import { getUsersActionJsx } from './common';
+
+function ChannelViewFloating({
+  roomId, roomTimeline, timelineScroll, viewEvent,
+}) {
+  const [reachedBottom, setReachedBottom] = useState(true);
+  const [typingMembers, setTypingMembers] = useState(new Set());
+  const mx = initMatrix.matrixClient;
+
+  function isSomeoneTyping(members) {
+    const m = members;
+    m.delete(mx.getUserId());
+    if (m.size === 0) return false;
+    return true;
+  }
+
+  function getTypingMessage(members) {
+    const userIds = members;
+    userIds.delete(mx.getUserId());
+    return getUsersActionJsx(roomId, [...userIds], 'typing...');
+  }
+
+  function updateTyping(members) {
+    setTypingMembers(members);
+  }
+
+  useEffect(() => {
+    setReachedBottom(true);
+    setTypingMembers(new Set());
+    viewEvent.on('toggle-reached-bottom', setReachedBottom);
+    return () => viewEvent.removeListener('toggle-reached-bottom', setReachedBottom);
+  }, [roomId]);
+
+  useEffect(() => {
+    roomTimeline.on(cons.events.roomTimeline.TYPING_MEMBERS_UPDATED, updateTyping);
+    return () => {
+      roomTimeline?.removeListener(cons.events.roomTimeline.TYPING_MEMBERS_UPDATED, updateTyping);
+    };
+  }, [roomTimeline]);
+
+  return (
+    <>
+      <div className={`channel-view__typing${isSomeoneTyping(typingMembers) ? ' channel-view__typing--open' : ''}`}>
+        <div className="bouncingLoader"><div /></div>
+        <Text variant="b2">{getTypingMessage(typingMembers)}</Text>
+      </div>
+      <div className={`channel-view__STB${reachedBottom ? '' : ' channel-view__STB--open'}`}>
+        <IconButton
+          onClick={() => {
+            timelineScroll.enableSmoothScroll();
+            timelineScroll.reachBottom();
+            timelineScroll.disableSmoothScroll();
+          }}
+          src={ChevronBottomIC}
+          tooltip="Scroll to Bottom"
+        />
+      </div>
+    </>
+  );
+}
+ChannelViewFloating.propTypes = {
+  roomId: PropTypes.string.isRequired,
+  roomTimeline: PropTypes.shape({}).isRequired,
+  timelineScroll: PropTypes.shape({
+    reachBottom: PropTypes.func,
+  }).isRequired,
+  viewEvent: PropTypes.shape({}).isRequired,
+};
+
+export default ChannelViewFloating;

src/app/organisms/channel/ChannelViewFloating.scss

@@ -0,0 +1,84 @@
+.channel-view {
+  &__typing {
+    display: flex;
+    padding: var(--sp-ultra-tight) var(--sp-normal);
+    background: var(--bg-surface);
+    transition: transform 200ms ease-in-out;
+
+    & b {
+      color: var(--tc-surface-high);
+    }
+
+    &--open {
+      transform: translateY(-99%);
+    }
+
+    & .text {
+      flex: 1;
+      min-width: 0;
+
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin: 0 var(--sp-tight);
+    }
+  }
+
+  .bouncingLoader {
+    transform: translateY(2px);
+    margin: 0 calc(var(--sp-ultra-tight) / 2);
+  }
+  .bouncingLoader > div,
+  .bouncingLoader:before,
+  .bouncingLoader:after {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background: var(--tc-surface-high);
+    border-radius: 50%;
+    animation: bouncing-loader 0.6s infinite alternate;
+  }
+  
+  .bouncingLoader:before,
+  .bouncingLoader:after {
+    content: "";
+  }
+  
+  .bouncingLoader > div {
+    margin: 0 4px;
+  }
+  
+  .bouncingLoader > div {
+    animation-delay: 0.2s;
+  }
+  
+  .bouncingLoader:after {
+    animation-delay: 0.4s;
+  }
+  
+  @keyframes bouncing-loader {
+    to {
+      opacity: 0.1;
+      transform: translate3d(0, -4px, 0);
+    }
+  }
+
+  &__STB {
+    position: absolute;
+    right: var(--sp-normal);
+    bottom: 0;
+    border-radius: var(--bo-radius);
+    box-shadow: var(--bs-surface-border);
+    background-color: var(--bg-surface-low);
+    transition: transform 200ms ease-in-out;
+    transform: translateY(100%) scale(0);
+    [dir=rtl] & {
+      right: unset;
+      left: var(--sp-normal);
+    }
+
+    &--open {
+      transform: translateY(-28px) scale(1);
+    }
+  }
+}

src/app/organisms/channel/ChannelViewHeader.jsx

@@ -0,0 +1,62 @@
+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 colorMXID from '../../../util/colorMXID';
+
+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 ChannelViewHeader({ roomId }) {
+  const mx = initMatrix.matrixClient;
+  const isDM = initMatrix.roomList.directs.has(roomId);
+  let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
+  avatarSrc = isDM ? mx.getRoom(roomId).getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc;
+  const roomName = mx.getRoom(roomId).name;
+  const roomTopic = mx.getRoom(roomId).currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;
+
+  return (
+    <Header>
+      <Avatar imageSrc={avatarSrc} text={roomName.slice(0, 1)} bgColor={colorMXID(roomId)} size="small" />
+      <TitleWrapper>
+        <Text variant="h2">{roomName}</Text>
+        { 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} />}
+      />
+    </Header>
+  );
+}
+ChannelViewHeader.propTypes = {
+  roomId: PropTypes.string.isRequired,
+};
+
+export default ChannelViewHeader;

src/app/organisms/channel/ChannelViewInput.jsx

@@ -0,0 +1,413 @@
+/* eslint-disable react/prop-types */
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import './ChannelViewInput.scss';
+
+import TextareaAutosize from 'react-autosize-textarea';
+
+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 { getUsername } from '../../../util/matrixUtil';
+import colorMXID from '../../../util/colorMXID';
+
+import Text from '../../atoms/text/Text';
+import RawIcon from '../../atoms/system-icons/RawIcon';
+import IconButton from '../../atoms/button/IconButton';
+import ScrollView from '../../atoms/scroll/ScrollView';
+import { MessageReply } from '../../molecules/message/Message';
+
+import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
+import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
+import SendIC from '../../../../public/res/ic/outlined/send.svg';
+import ShieldIC from '../../../../public/res/ic/outlined/shield.svg';
+import VLCIC from '../../../../public/res/ic/outlined/vlc.svg';
+import VolumeFullIC from '../../../../public/res/ic/outlined/volume-full.svg';
+import MarkdownIC from '../../../../public/res/ic/outlined/markdown.svg';
+import FileIC from '../../../../public/res/ic/outlined/file.svg';
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+const CMD_REGEX = /(\/|>[#*@]|:|@)(\S*)$/;
+let isTyping = false;
+let isCmdActivated = false;
+let cmdCursorPos = null;
+function ChannelViewInput({
+  roomId, roomTimeline, timelineScroll, viewEvent,
+}) {
+  const [attachment, setAttachment] = useState(null);
+  const [isMarkdown, setIsMarkdown] = useState(settings.isMarkdown);
+  const [replyTo, setReplyTo] = useState(null);
+
+  const textAreaRef = useRef(null);
+  const inputBaseRef = useRef(null);
+  const uploadInputRef = useRef(null);
+  const uploadProgressRef = useRef(null);
+  const rightOptionsRef = useRef(null);
+  const escBtnRef = useRef(null);
+
+  const TYPING_TIMEOUT = 5000;
+  const mx = initMatrix.matrixClient;
+  const { roomsInput } = initMatrix;
+
+  function requestFocusInput() {
+    if (textAreaRef === null) return;
+    textAreaRef.current.focus();
+  }
+
+  useEffect(() => {
+    settings.on(cons.events.settings.MARKDOWN_TOGGLED, setIsMarkdown);
+    viewEvent.on('focus_msg_input', requestFocusInput);
+    return () => {
+      settings.removeListener(cons.events.settings.MARKDOWN_TOGGLED, setIsMarkdown);
+      viewEvent.removeListener('focus_msg_input', requestFocusInput);
+    };
+  }, []);
+
+  const sendIsTyping = (isT) => {
+    mx.sendTyping(roomId, isT, isT ? TYPING_TIMEOUT : undefined);
+    isTyping = isT;
+
+    if (isT === true) {
+      setTimeout(() => {
+        if (isTyping) sendIsTyping(false);
+      }, TYPING_TIMEOUT);
+    }
+  };
+
+  function uploadingProgress(myRoomId, { loaded, total }) {
+    if (myRoomId !== roomId) return;
+    const progressPer = Math.round((loaded * 100) / total);
+    uploadProgressRef.current.textContent = `Uploading: ${bytesToSize(loaded)}/${bytesToSize(total)} (${progressPer}%)`;
+    inputBaseRef.current.style.backgroundImage = `linear-gradient(90deg, var(--bg-surface-hover) ${progressPer}%, var(--bg-surface-low) ${progressPer}%)`;
+  }
+  function clearAttachment(myRoomId) {
+    if (roomId !== myRoomId) return;
+    setAttachment(null);
+    inputBaseRef.current.style.backgroundImage = 'unset';
+    uploadInputRef.current.value = null;
+  }
+
+  function rightOptionsA11Y(A11Y) {
+    const rightOptions = rightOptionsRef.current.children;
+    for (let index = 0; index < rightOptions.length; index += 1) {
+      rightOptions[index].disabled = !A11Y;
+    }
+  }
+
+  function activateCmd(prefix) {
+    isCmdActivated = true;
+    requestAnimationFrame(() => {
+      inputBaseRef.current.style.boxShadow = '0 0 0 1px var(--bg-positive)';
+      escBtnRef.current.style.display = 'block';
+    });
+    rightOptionsA11Y(false);
+    viewEvent.emit('cmd_activate', prefix);
+  }
+  function deactivateCmd() {
+    if (inputBaseRef.current !== null) {
+      requestAnimationFrame(() => {
+        inputBaseRef.current.style.boxShadow = 'var(--bs-surface-border)';
+        escBtnRef.current.style.display = 'none';
+      });
+      rightOptionsA11Y(true);
+    }
+    isCmdActivated = false;
+    cmdCursorPos = null;
+  }
+  function deactivateCmdAndEmit() {
+    deactivateCmd();
+    viewEvent.emit('cmd_deactivate');
+  }
+  function errorCmd() {
+    requestAnimationFrame(() => {
+      inputBaseRef.current.style.boxShadow = '0 0 0 1px var(--bg-danger)';
+    });
+  }
+  function setCursorPosition(pos) {
+    setTimeout(() => {
+      textAreaRef.current.focus();
+      textAreaRef.current.setSelectionRange(pos, pos);
+    }, 0);
+  }
+  function replaceCmdWith(msg, cursor, replacement) {
+    if (msg === null) return null;
+    const targetInput = msg.slice(0, cursor);
+    const cmdParts = targetInput.match(CMD_REGEX);
+    const leadingInput = msg.slice(0, cmdParts.index);
+    if (replacement.length > 0) setCursorPosition(leadingInput.length + replacement.length);
+    return leadingInput + replacement + msg.slice(cursor);
+  }
+  function firedCmd(cmdData) {
+    const msg = textAreaRef.current.value;
+    textAreaRef.current.value = replaceCmdWith(
+      msg, cmdCursorPos, typeof cmdData?.replace !== 'undefined' ? cmdData.replace : '',
+    );
+    deactivateCmd();
+  }
+
+  function focusInput() {
+    if (settings.isTouchScreenDevice) return;
+    textAreaRef.current.focus();
+  }
+
+  function setUpReply(userId, eventId, content) {
+    setReplyTo({ userId, eventId, content });
+    roomsInput.setReplyTo(roomId, { userId, eventId, content });
+    focusInput();
+  }
+
+  useEffect(() => {
+    roomsInput.on(cons.events.roomsInput.UPLOAD_PROGRESS_CHANGES, uploadingProgress);
+    roomsInput.on(cons.events.roomsInput.ATTACHMENT_CANCELED, clearAttachment);
+    roomsInput.on(cons.events.roomsInput.FILE_UPLOADED, clearAttachment);
+    viewEvent.on('cmd_error', errorCmd);
+    viewEvent.on('cmd_fired', firedCmd);
+    viewEvent.on('reply_to', setUpReply);
+    if (textAreaRef?.current !== null) {
+      isTyping = false;
+      focusInput();
+      textAreaRef.current.value = roomsInput.getMessage(roomId);
+      setAttachment(roomsInput.getAttachment(roomId));
+      setReplyTo(roomsInput.getReplyTo(roomId));
+    }
+    return () => {
+      roomsInput.removeListener(cons.events.roomsInput.UPLOAD_PROGRESS_CHANGES, uploadingProgress);
+      roomsInput.removeListener(cons.events.roomsInput.ATTACHMENT_CANCELED, clearAttachment);
+      roomsInput.removeListener(cons.events.roomsInput.FILE_UPLOADED, clearAttachment);
+      viewEvent.removeListener('cmd_error', errorCmd);
+      viewEvent.removeListener('cmd_fired', firedCmd);
+      viewEvent.removeListener('reply_to', setUpReply);
+      if (isCmdActivated) deactivateCmd();
+      if (textAreaRef?.current === null) return;
+
+      const msg = textAreaRef.current.value;
+      inputBaseRef.current.style.backgroundImage = 'unset';
+      if (msg.trim() === '') {
+        roomsInput.setMessage(roomId, '');
+        return;
+      }
+      roomsInput.setMessage(roomId, msg);
+    };
+  }, [roomId]);
+
+  async function sendMessage() {
+    const msgBody = textAreaRef.current.value;
+    if (roomsInput.isSending(roomId)) return;
+    if (msgBody.trim() === '' && attachment === null) return;
+    sendIsTyping(false);
+
+    roomsInput.setMessage(roomId, msgBody);
+    if (attachment !== null) {
+      roomsInput.setAttachment(roomId, attachment);
+    }
+    textAreaRef.current.disabled = true;
+    textAreaRef.current.style.cursor = 'not-allowed';
+    await roomsInput.sendInput(roomId);
+    textAreaRef.current.disabled = false;
+    textAreaRef.current.style.cursor = 'unset';
+    focusInput();
+
+    textAreaRef.current.value = roomsInput.getMessage(roomId);
+    timelineScroll.reachBottom();
+    viewEvent.emit('message_sent');
+    textAreaRef.current.style.height = 'unset';
+    if (replyTo !== null) setReplyTo(null);
+  }
+
+  function processTyping(msg) {
+    const isEmptyMsg = msg === '';
+
+    if (isEmptyMsg && isTyping) {
+      sendIsTyping(false);
+      return;
+    }
+    if (!isEmptyMsg && !isTyping) {
+      sendIsTyping(true);
+    }
+  }
+
+  function getCursorPosition() {
+    return textAreaRef.current.selectionStart;
+  }
+
+  function recognizeCmd(rawInput) {
+    const cursor = getCursorPosition();
+    const targetInput = rawInput.slice(0, cursor);
+
+    const cmdParts = targetInput.match(CMD_REGEX);
+    if (cmdParts === null) {
+      if (isCmdActivated) deactivateCmdAndEmit();
+      return;
+    }
+    const cmdPrefix = cmdParts[1];
+    const cmdSlug = cmdParts[2];
+
+    if (cmdPrefix === ':') {
+      // skip emoji autofill command if link is suspected.
+      const checkForLink = targetInput.slice(0, cmdParts.index);
+      if (checkForLink.match(/(http|https|mailto|matrix|ircs|irc)$/)) {
+        deactivateCmdAndEmit();
+        return;
+      }
+    }
+
+    cmdCursorPos = cursor;
+    if (cmdSlug === '') {
+      activateCmd(cmdPrefix);
+      return;
+    }
+    if (!isCmdActivated) activateCmd(cmdPrefix);
+    requestAnimationFrame(() => {
+      inputBaseRef.current.style.boxShadow = '0 0 0 1px var(--bg-caution)';
+    });
+    viewEvent.emit('cmd_process', cmdPrefix, cmdSlug);
+  }
+
+  function handleMsgTyping(e) {
+    const msg = e.target.value;
+    recognizeCmd(e.target.value);
+    if (!isCmdActivated) processTyping(msg);
+  }
+
+  function handleKeyDown(e) {
+    if (e.keyCode === 13 && e.shiftKey === false) {
+      e.preventDefault();
+
+      if (isCmdActivated) {
+        viewEvent.emit('cmd_exe');
+      } else sendMessage();
+    }
+    if (e.keyCode === 27 && isCmdActivated) {
+      deactivateCmdAndEmit();
+      e.preventDefault();
+    }
+  }
+
+  function addEmoji(emoji) {
+    textAreaRef.current.value += emoji.unicode;
+  }
+
+  function handleUploadClick() {
+    if (attachment === null) uploadInputRef.current.click();
+    else {
+      roomsInput.cancelAttachment(roomId);
+    }
+  }
+  function uploadFileChange(e) {
+    const file = e.target.files.item(0);
+    setAttachment(file);
+    if (file !== null) roomsInput.setAttachment(roomId, file);
+  }
+
+  function renderInputs() {
+    return (
+      <>
+        <div className={`channel-input__option-container${attachment === null ? '' : ' channel-attachment__option'}`}>
+          <input onChange={uploadFileChange} style={{ display: 'none' }} ref={uploadInputRef} type="file" />
+          <IconButton onClick={handleUploadClick} tooltip={attachment === null ? 'Upload' : 'Cancel'} src={CirclePlusIC} />
+        </div>
+        <div ref={inputBaseRef} className="channel-input__input-container">
+          {roomTimeline.isEncryptedRoom() && <RawIcon size="extra-small" src={ShieldIC} />}
+          <ScrollView autoHide>
+            <Text className="channel-input__textarea-wrapper">
+              <TextareaAutosize
+                ref={textAreaRef}
+                onChange={handleMsgTyping}
+                onResize={() => timelineScroll.autoReachBottom()}
+                onKeyDown={handleKeyDown}
+                placeholder="Send a message..."
+              />
+            </Text>
+          </ScrollView>
+          {isMarkdown && <RawIcon size="extra-small" src={MarkdownIC} />}
+          <button ref={escBtnRef} tabIndex="-1" onClick={deactivateCmdAndEmit} className="btn-cmd-esc" type="button"><Text variant="b3">ESC</Text></button>
+        </div>
+        <div ref={rightOptionsRef} className="channel-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);
+            }}
+            tooltip="Emoji"
+            src={EmojiIC}
+          />
+          <IconButton onClick={sendMessage} tooltip="Send" src={SendIC} />
+        </div>
+      </>
+    );
+  }
+
+  function attachFile() {
+    const fileType = attachment.type.slice(0, attachment.type.indexOf('/'));
+    return (
+      <div className="channel-attachment">
+        <div className={`channel-attachment__preview${fileType !== 'image' ? ' channel-attachment__icon' : ''}`}>
+          {fileType === 'image' && <img alt={attachment.name} src={URL.createObjectURL(attachment)} />}
+          {fileType === 'video' && <RawIcon src={VLCIC} />}
+          {fileType === 'audio' && <RawIcon src={VolumeFullIC} />}
+          {fileType !== 'image' && fileType !== 'video' && fileType !== 'audio' && <RawIcon src={FileIC} />}
+        </div>
+        <div className="channel-attachment__info">
+          <Text variant="b1">{attachment.name}</Text>
+          <Text variant="b3"><span ref={uploadProgressRef}>{`size: ${bytesToSize(attachment.size)}`}</span></Text>
+        </div>
+      </div>
+    );
+  }
+
+  function attachReply() {
+    return (
+      <div className="channel-reply">
+        <IconButton
+          onClick={() => {
+            roomsInput.cancelReplyTo(roomId);
+            setReplyTo(null);
+          }}
+          src={CrossIC}
+          tooltip="Cancel reply"
+          size="extra-small"
+        />
+        <MessageReply
+          userId={replyTo.userId}
+          name={getUsername(replyTo.userId)}
+          color={colorMXID(replyTo.userId)}
+          content={replyTo.content}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      { replyTo !== null && attachReply()}
+      { attachment !== null && attachFile() }
+      <form className="channel-input" onSubmit={(e) => { e.preventDefault(); }}>
+        {
+          roomTimeline.room.isSpaceRoom()
+            ? <Text className="channel-input__space" variant="b1">Spaces are yet to be implemented</Text>
+            : renderInputs()
+        }
+      </form>
+    </>
+  );
+}
+ChannelViewInput.propTypes = {
+  roomId: PropTypes.string.isRequired,
+  roomTimeline: PropTypes.shape({}).isRequired,
+  timelineScroll: PropTypes.shape({
+    reachBottom: PropTypes.func,
+    autoReachBottom: PropTypes.func,
+    tryRestoringScroll: PropTypes.func,
+    enableSmoothScroll: PropTypes.func,
+    disableSmoothScroll: PropTypes.func,
+  }).isRequired,
+  viewEvent: PropTypes.shape({}).isRequired,
+};
+
+export default ChannelViewInput;

src/app/organisms/channel/ChannelViewInput.scss

@@ -0,0 +1,128 @@
+.channel-input {
+  padding: var(--sp-extra-tight) calc(var(--sp-normal) - 2px);
+  display: flex;
+  min-height: 48px;
+
+  &__space {
+    min-width: 0;
+    align-self: center;
+    margin: auto;
+    padding: 0 var(--sp-tight);
+  }
+
+  &__input-container {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+
+    margin: 0 calc(var(--sp-tight)  - 2px);
+    background-color: var(--bg-surface-low);
+    box-shadow: var(--bs-surface-border);
+    border-radius: var(--bo-radius);
+
+    & > .ic-raw {
+      transform: scale(0.8);
+      margin: 0 var(--sp-extra-tight);
+    }
+
+    & .btn-cmd-esc {
+      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;
+      & .text { color: var(--tc-surface-normal); }
+    }
+ 
+    & .scrollbar {
+      max-height: 50vh;
+      flex: 1;
+
+      &:first-child {
+        margin-left: var(--sp-tight);
+        [dir=rtl] & {
+          margin-left: 0;
+          margin-right: var(--sp-tight);
+        }
+      }
+    }
+  }
+
+  &__textarea-wrapper {
+    min-height: 40px;
+    display: flex;
+    align-items: center;
+
+    & textarea {
+      resize: none;
+      width: 100%;
+      min-width: 0;
+      min-height: 100%;
+      padding: var(--sp-ultra-tight) 0;
+
+      &::placeholder {
+        color: var(--tc-surface-low);
+      }
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+}
+
+.channel-attachment {
+  --side-spacing: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
+  display: flex;
+  align-items: center;
+  margin-left: var(--side-spacing);
+  margin-top: var(--sp-extra-tight);
+  line-height: 0;
+  [dir=rtl] & {
+    margin-left: 0;
+    margin-right: var(--side-spacing);
+  }
+
+  &__preview > img {
+    max-height: 40px;
+    border-radius: var(--bo-radius);
+  }
+  &__icon {
+    padding: var(--sp-extra-tight);
+    background-color: var(--bg-surface-low);
+    box-shadow: var(--bs-surface-border);
+    border-radius: var(--bo-radius);
+  }
+  &__info {
+    flex: 1;
+    min-width: 0;
+    margin: 0 var(--sp-tight);
+  }
+
+  &__option button {
+    transition: transform 200ms ease-in-out;
+    transform: translateY(-48px);
+    & .ic-raw {
+      transition: transform 200ms ease-in-out;
+      transform: rotate(45deg);
+      background-color: var(--bg-caution);
+    }
+  }
+}
+
+.channel-reply {
+  display: flex;
+  align-items: center;
+  background-color: var(--bg-surface-low);
+  border-bottom: 1px solid var(--bg-surface-border);
+
+  & .ic-btn-surface {
+    margin: 0 13px 0 17px;
+    border-radius: 0;
+    [dir=rtl] & {
+      margin: 0 17px 0 13px;
+    }
+  }
+}

src/app/organisms/channel/PeopleDrawer.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import './PeopleDrawer.scss';
 
 import initMatrix from '../../../client/initMatrix';
-import { getUsername } from '../../../util/matrixUtil';
+import { getUsernameOfRoomMember } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
 import { openInviteUser } from '../../../client/action/navigation';
 
@@ -105,7 +105,7 @@ function PeopleDrawer({ roomId }) {
                     key={member.userId}
                     onClick={() => alert('Viewing profile is yet to be implemented')}
                     avatarSrc={member.getAvatarUrl(initMatrix.matrixClient.baseUrl, 24, 24, 'crop')}
-                    name={getUsername(member.userId)}
+                    name={getUsernameOfRoomMember(member)}
                     color={colorMXID(member.userId)}
                     peopleRole={getPowerLabel(member.powerLevel)}
                   />

src/app/organisms/channel/common.jsx

@@ -0,0 +1,272 @@
+import React from 'react';
+
+import initMatrix from '../../../client/initMatrix';
+import { getUsername, getUsernameOfRoomMember } from '../../../util/matrixUtil';
+
+function getTimelineJSXMessages() {
+  return {
+    join(user) {
+      return (
+        <>
+          <b>{user}</b>
+          {' joined the channel'}
+        </>
+      );
+    },
+    leave(user, reason) {
+      const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : '';
+      return (
+        <>
+          <b>{user}</b>
+          {' left the channel'}
+          {reasonMsg}
+        </>
+      );
+    },
+    invite(inviter, user) {
+      return (
+        <>
+          <b>{inviter}</b>
+          {' invited '}
+          <b>{user}</b>
+        </>
+      );
+    },
+    cancelInvite(inviter, user) {
+      return (
+        <>
+          <b>{inviter}</b>
+          {' canceled '}
+          <b>{user}</b>
+          {'\'s invite'}
+        </>
+      );
+    },
+    rejectInvite(user) {
+      return (
+        <>
+          <b>{user}</b>
+          {' rejected the invitation'}
+        </>
+      );
+    },
+    kick(actor, user, reason) {
+      const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : '';
+      return (
+        <>
+          <b>{actor}</b>
+          {' kicked '}
+          <b>{user}</b>
+          {reasonMsg}
+        </>
+      );
+    },
+    ban(actor, user, reason) {
+      const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : '';
+      return (
+        <>
+          <b>{actor}</b>
+          {' banned '}
+          <b>{user}</b>
+          {reasonMsg}
+        </>
+      );
+    },
+    unban(actor, user) {
+      return (
+        <>
+          <b>{actor}</b>
+          {' unbanned '}
+          <b>{user}</b>
+        </>
+      );
+    },
+    avatarSets(user) {
+      return (
+        <>
+          <b>{user}</b>
+          {' set the avatar'}
+        </>
+      );
+    },
+    avatarChanged(user) {
+      return (
+        <>
+          <b>{user}</b>
+          {' changed the avatar'}
+        </>
+      );
+    },
+    avatarRemoved(user) {
+      return (
+        <>
+          <b>{user}</b>
+          {' removed the avatar'}
+        </>
+      );
+    },
+    nameSets(user, newName) {
+      return (
+        <>
+          <b>{user}</b>
+          {' set the display name to '}
+          <b>{newName}</b>
+        </>
+      );
+    },
+    nameChanged(user, newName) {
+      return (
+        <>
+          <b>{user}</b>
+          {' changed the display name to '}
+          <b>{newName}</b>
+        </>
+      );
+    },
+    nameRemoved(user, lastName) {
+      return (
+        <>
+          <b>{user}</b>
+          {' removed the display name '}
+          <b>{lastName}</b>
+        </>
+      );
+    },
+  };
+}
+
+function getUsersActionJsx(roomId, userIds, actionStr) {
+  const room = initMatrix.matrixClient.getRoom(roomId);
+  const getUserDisplayName = (userId) => {
+    if (room?.getMember(userId)) return getUsernameOfRoomMember(room.getMember(userId));
+    return getUsername(userId);
+  };
+  const getUserJSX = (userId) => <b>{getUserDisplayName(userId)}</b>;
+  if (!Array.isArray(userIds)) return 'Idle';
+  if (userIds.length === 0) return 'Idle';
+  const MAX_VISIBLE_COUNT = 3;
+
+  const u1Jsx = getUserJSX(userIds[0]);
+  // eslint-disable-next-line react/jsx-one-expression-per-line
+  if (userIds.length === 1) return <>{u1Jsx} is {actionStr}</>;
+
+  const u2Jsx = getUserJSX(userIds[1]);
+  // eslint-disable-next-line react/jsx-one-expression-per-line
+  if (userIds.length === 2) return <>{u1Jsx} and {u2Jsx} are {actionStr}</>;
+
+  const u3Jsx = getUserJSX(userIds[2]);
+  if (userIds.length === 3) {
+    // eslint-disable-next-line react/jsx-one-expression-per-line
+    return <>{u1Jsx}, {u2Jsx} and {u3Jsx} are {actionStr}</>;
+  }
+
+  const othersCount = userIds.length - MAX_VISIBLE_COUNT;
+  // eslint-disable-next-line react/jsx-one-expression-per-line
+  return <>{u1Jsx}, {u2Jsx}, {u3Jsx} and {othersCount} other are {actionStr}</>;
+}
+
+function parseReply(rawContent) {
+  if (rawContent.indexOf('>') !== 0) return null;
+  let content = rawContent.slice(rawContent.indexOf('<') + 1);
+  const user = content.slice(0, content.indexOf('>'));
+
+  content = content.slice(content.indexOf('>') + 2);
+  const replyContent = content.slice(0, content.indexOf('\n\n'));
+  content = content.slice(content.indexOf('\n\n') + 2);
+
+  if (user === '') return null;
+
+  const isUserId = user.match(/^@.+:.+/);
+
+  return {
+    userId: isUserId ? user : null,
+    displayName: isUserId ? null : user,
+    replyContent,
+    content,
+  };
+}
+
+function parseTimelineChange(mEvent) {
+  const tJSXMsgs = getTimelineJSXMessages();
+  const makeReturnObj = (variant, content) => ({
+    variant,
+    content,
+  });
+  const content = mEvent.getContent();
+  const prevContent = mEvent.getPrevContent();
+  const sender = mEvent.getSender();
+  const senderName = getUsername(sender);
+  const userName = getUsername(mEvent.getStateKey());
+
+  switch (content.membership) {
+    case 'invite': return makeReturnObj('invite', tJSXMsgs.invite(senderName, userName));
+    case 'ban': return makeReturnObj('leave', tJSXMsgs.ban(senderName, userName, content.reason));
+    case 'join':
+      if (prevContent.membership === 'join') {
+        if (content.displayname !== prevContent.displayname) {
+          if (typeof content.displayname === 'undefined') return makeReturnObj('avatar', tJSXMsgs.nameRemoved(sender, prevContent.displayname));
+          if (typeof prevContent.displayname === 'undefined') return makeReturnObj('avatar', tJSXMsgs.nameSets(sender, content.displayname));
+          return makeReturnObj('avatar', tJSXMsgs.nameChanged(prevContent.displayname, content.displayname));
+        }
+        if (content.avatar_url !== prevContent.avatar_url) {
+          if (typeof content.avatar_url === 'undefined') return makeReturnObj('avatar', tJSXMsgs.avatarRemoved(content.displayname));
+          if (typeof prevContent.avatar_url === 'undefined') return makeReturnObj('avatar', tJSXMsgs.avatarSets(content.displayname));
+          return makeReturnObj('avatar', tJSXMsgs.avatarChanged(content.displayname));
+        }
+        return null;
+      }
+      return makeReturnObj('join', tJSXMsgs.join(senderName));
+    case 'leave':
+      if (sender === mEvent.getStateKey()) {
+        switch (prevContent.membership) {
+          case 'invite': return makeReturnObj('invite-cancel', tJSXMsgs.rejectInvite(senderName));
+          default: return makeReturnObj('leave', tJSXMsgs.leave(senderName, content.reason));
+        }
+      }
+      switch (prevContent.membership) {
+        case 'invite': return makeReturnObj('invite-cancel', tJSXMsgs.cancelInvite(senderName, userName));
+        case 'ban': return makeReturnObj('other', tJSXMsgs.unban(senderName, userName));
+        // sender is not target and made the target leave,
+        // if not from invite/ban then this is a kick
+        default: return makeReturnObj('leave', tJSXMsgs.kick(senderName, userName, content.reason));
+      }
+    default: return null;
+  }
+}
+
+function scrollToBottom(ref) {
+  const maxScrollTop = ref.current.scrollHeight - ref.current.offsetHeight;
+  // eslint-disable-next-line no-param-reassign
+  ref.current.scrollTop = maxScrollTop;
+}
+
+function isAtBottom(ref) {
+  const { scrollHeight, scrollTop, offsetHeight } = ref.current;
+  const scrollUptoBottom = scrollTop + offsetHeight;
+
+  // scroll view have to div inside div which contains messages
+  const lastMessage = ref.current.lastElementChild.lastElementChild.lastElementChild;
+  const lastChildHeight = lastMessage.offsetHeight;
+
+  // auto scroll to bottom even if user has EXTRA_SPACE left to scroll
+  const EXTRA_SPACE = 48;
+
+  if (scrollHeight - scrollUptoBottom <= lastChildHeight + EXTRA_SPACE) {
+    return true;
+  }
+  return false;
+}
+
+function autoScrollToBottom(ref) {
+  if (isAtBottom(ref)) scrollToBottom(ref);
+}
+
+export {
+  getTimelineJSXMessages,
+  getUsersActionJsx,
+  parseReply,
+  parseTimelineChange,
+  scrollToBottom,
+  isAtBottom,
+  autoScrollToBottom,
+};

src/app/organisms/emoji-board/EmojiBoard.jsx

@@ -4,11 +4,10 @@ import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './EmojiBoard.scss';
 
-import EventEmitter from 'events';
-
 import parse from 'html-react-parser';
 import twemoji from 'twemoji';
-import { emojiGroups, searchEmoji } from './emoji';
+import { emojiGroups, emojis } from './emoji';
+import AsyncSearch from '../../../util/AsyncSearch';
 
 import Text from '../../atoms/text/Text';
 import RawIcon from '../../atoms/system-icons/RawIcon';
@@ -26,20 +25,18 @@ import BulbIC from '../../../../public/res/ic/outlined/bulb.svg';
 import PeaceIC from '../../../../public/res/ic/outlined/peace.svg';
 import FlagIC from '../../../../public/res/ic/outlined/flag.svg';
 
-const viewEvent = new EventEmitter();
+function EmojiGroup({ name, groupEmojis }) {
-
-function EmojiGroup({ name, emojis }) {
   function getEmojiBoard() {
+    const emojiBoard = [];
     const ROW_EMOJIS_COUNT = 7;
-    const emojiRows = [];
+    const totalEmojis = groupEmojis.length;
-    const totalEmojis = emojis.length;
 
     for (let r = 0; r < totalEmojis; r += ROW_EMOJIS_COUNT) {
       const emojiRow = [];
       for (let c = r; c < r + ROW_EMOJIS_COUNT; c += 1) {
-        const emojiIndex = r + c;
+        const emojiIndex = c;
         if (emojiIndex >= totalEmojis) break;
-        const emoji = emojis[emojiIndex];
+        const emoji = groupEmojis[emojiIndex];
         emojiRow.push(
           <span key={emojiIndex}>
             {
@@ -49,6 +46,7 @@ function EmojiGroup({ name, emojis }) {
                   attributes: () => ({
                     unicode: emoji.unicode,
                     shortcodes: emoji.shortcodes?.toString(),
+                    hexcode: emoji.hexcode,
                   }),
                 },
               ))
@@ -56,23 +54,24 @@ function EmojiGroup({ name, emojis }) {
           </span>,
         );
       }
-      emojiRows.push(<div key={r} className="emoji-row">{emojiRow}</div>);
+      emojiBoard.push(<div key={r} className="emoji-row">{emojiRow}</div>);
     }
-    return emojiRows;
+    return emojiBoard;
   }
 
   return (
     <div className="emoji-group">
       <Text className="emoji-group__header" variant="b2">{name}</Text>
-      <div className="emoji-set">{getEmojiBoard()}</div>
+      {groupEmojis.length !== 0 && <div className="emoji-set">{getEmojiBoard()}</div>}
     </div>
   );
 }
 EmojiGroup.propTypes = {
   name: PropTypes.string.isRequired,
-  emojis: PropTypes.arrayOf(PropTypes.shape({
+  groupEmojis: PropTypes.arrayOf(PropTypes.shape({
     length: PropTypes.number,
     unicode: PropTypes.string,
+    hexcode: PropTypes.string,
     shortcodes: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.arrayOf(PropTypes.string),
@@ -80,40 +79,47 @@ EmojiGroup.propTypes = {
   })).isRequired,
 };
 
+const asyncSearch = new AsyncSearch();
+asyncSearch.setup(emojis, { keys: ['shortcode'], limit: 30 });
 function SearchedEmoji() {
-  const [searchedEmojis, setSearchedEmojis] = useState([]);
+  const [searchedEmojis, setSearchedEmojis] = useState(null);
 
-  function handleSearchEmoji(term) {
+  function handleSearchEmoji(resultEmojis, term) {
-    if (term.trim() === '') {
+    if (term === '' || resultEmojis.length === 0) {
-      setSearchedEmojis([]);
+      if (term === '') setSearchedEmojis(null);
+      else setSearchedEmojis([]);
       return;
     }
-    setSearchedEmojis(searchEmoji(term));
+    setSearchedEmojis(resultEmojis);
   }
 
   useEffect(() => {
-    viewEvent.on('search-emoji', handleSearchEmoji);
+    asyncSearch.on(asyncSearch.RESULT_SENT, handleSearchEmoji);
     return () => {
-      viewEvent.removeListener('search-emoji', handleSearchEmoji);
+      asyncSearch.removeListener(asyncSearch.RESULT_SENT, handleSearchEmoji);
     };
   }, []);
 
-  return searchedEmojis.length !== 0 && <EmojiGroup key="-1" name="Search results" emojis={searchedEmojis} />;
+  if (searchedEmojis === null) return false;
+
+  return <EmojiGroup key="-1" name={searchedEmojis.length === 0 ? 'No search result found' : 'Search results'} groupEmojis={searchedEmojis} />;
 }
 
 function EmojiBoard({ onSelect }) {
   const searchRef = useRef(null);
   const scrollEmojisRef = useRef(null);
+  const emojiInfo = useRef(null);
 
   function isTargetNotEmoji(target) {
     return target.classList.contains('emoji') === false;
   }
   function getEmojiDataFromTarget(target) {
     const unicode = target.getAttribute('unicode');
+    const hexcode = target.getAttribute('hexcode');
     let shortcodes = target.getAttribute('shortcodes');
     if (typeof shortcodes === 'undefined') shortcodes = undefined;
     else shortcodes = shortcodes.split(',');
-    return { unicode, shortcodes };
+    return { unicode, hexcode, shortcodes };
   }
 
   function selectEmoji(e) {
@@ -123,27 +129,35 @@ function EmojiBoard({ onSelect }) {
     onSelect(getEmojiDataFromTarget(emoji));
   }
 
+  function setEmojiInfo(emoji) {
+    const infoEmoji = emojiInfo.current.firstElementChild.firstElementChild;
+    const infoShortcode = emojiInfo.current.lastElementChild;
+
+    const emojiSrc = infoEmoji.src;
+    infoEmoji.src = `${emojiSrc.slice(0, emojiSrc.lastIndexOf('/') + 1)}${emoji.hexcode.toLowerCase()}.png`;
+    infoShortcode.textContent = `:${emoji.shortcode}:`;
+  }
+
   function hoverEmoji(e) {
     if (isTargetNotEmoji(e.target)) return;
 
     const emoji = e.target;
-    const { shortcodes } = getEmojiDataFromTarget(emoji);
+    const { shortcodes, hexcode } = getEmojiDataFromTarget(emoji);
 
     if (typeof shortcodes === 'undefined') {
       searchRef.current.placeholder = 'Search';
+      setEmojiInfo({ hexcode: '1f643', shortcode: 'slight_smile' });
       return;
     }
     if (searchRef.current.placeholder === shortcodes[0]) return;
-    searchRef.current.setAttribute('placeholder', `:${shortcodes[0]}:`);
+    searchRef.current.setAttribute('placeholder', shortcodes[0]);
+    setEmojiInfo({ hexcode, shortcode: shortcodes[0] });
   }
 
   function handleSearchChange(e) {
     const term = e.target.value;
-    setTimeout(() => {
+    asyncSearch.search(term);
-      if (e.target.value !== term) return;
+    scrollEmojisRef.current.scrollTop = 0;
-      viewEvent.emit('search-emoji', term);
-      scrollEmojisRef.current.scrollTop = 0;
-    }, 500);
   }
 
   function openGroup(groupOrder) {
@@ -157,21 +171,25 @@ function EmojiBoard({ onSelect }) {
   return (
     <div id="emoji-board" className="emoji-board">
       <div className="emoji-board__content">
-        <div className="emoji-board__emojis">
+        <div className="emoji-board__content__search">
+          <RawIcon size="small" src={SearchIC} />
+          <Input onChange={handleSearchChange} forwardRef={searchRef} placeholder="Search" />
+        </div>
+        <div className="emoji-board__content__emojis">
           <ScrollView ref={scrollEmojisRef} autoHide>
             <div onMouseMove={hoverEmoji} onClick={selectEmoji}>
               <SearchedEmoji />
               {
                 emojiGroups.map((group) => (
-                  <EmojiGroup key={group.name} name={group.name} emojis={group.emojis} />
+                  <EmojiGroup key={group.name} name={group.name} groupEmojis={group.emojis} />
                 ))
               }
             </div>
           </ScrollView>
         </div>
-        <div className="emoji-board__search">
+        <div ref={emojiInfo} className="emoji-board__content__info">
-          <RawIcon size="small" src={SearchIC} />
+          <div>{ parse(twemoji.parse('🙂')) }</div>
-          <Input onChange={handleSearchChange} forwardRef={searchRef} placeholder="Search" />
+          <Text>:slight_smile:</Text>
         </div>
       </div>
       <div className="emoji-board__nav">

src/app/organisms/emoji-board/EmojiBoard.scss

@@ -10,14 +10,15 @@
 
 .emoji-board {
   display: flex;
-
   &__content {
     @extend .emoji-board-flexItem;
     @extend .emoji-board-flexBoxV;
-    height: 360px;
+    height: 400px;
+    width: 286px;
   }
   &__nav {
     @extend .emoji-board-flexBoxV;
+    justify-content: center;
 
     padding: 4px 6px;
     background-color: var(--bg-surface-low);
@@ -29,30 +30,62 @@
 
     & > .ic-btn-surface {
       margin: calc(var(--sp-ultra-tight) / 2) 0;
+      opacity: 0.8;
     }
   }
 }
 
+.emoji-board__content__search {
+  padding: var(--sp-extra-tight);
+  position: relative;
   
-.emoji-board__emojis {
+  & .ic-raw {
-  @extend .emoji-board-flexItem;
+    position: absolute;
-}
+    left: var(--sp-normal);
-.emoji-board__search {
+    top: var(--sp-normal);
-  display: flex;
+    transform: translateY(1px);
-  align-items: center;
+    [dir=rtl] & {
-  padding: calc(var(--sp-ultra-tight) / 2) var(--sp-normal);
+      left: unset;
+      right: var(--sp-normal);
+    }
+  }
 
   & .input-container {
-    @extend .emoji-board-flexItem;
     & .input {
       min-width: 100%;
       width: 0;
-      background-color: transparent;
+      padding: var(--sp-extra-tight) 36px;
-      border: none !important;
+      border-radius: calc(var(--bo-radius) / 2);
-      box-shadow: none !important;
     }
   }
 }
+.emoji-board__content__emojis {
+  @extend .emoji-board-flexItem;
+  @extend .emoji-board-flexBoxV;
+}
+.emoji-board__content__info {
+  margin: 0 var(--sp-extra-tight);
+  padding: var(--sp-tight) var(--sp-extra-tight);
+  border-top: 1px solid var(--bg-surface-border);
+
+  display: flex;
+  align-items: center;
+
+  & > div:first-child {
+    line-height: 0;
+    .emoji {
+      width: 32px;
+      height: 32px;
+    }
+  }
+  & > p:last-child {
+    @extend .emoji-board-flexItem;
+    margin: 0 var(--sp-tight);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
 
 .emoji-group {
   --emoji-padding: 6px;
@@ -65,12 +98,19 @@
     z-index: 99;
     background-color: var(--bg-surface);
 
-    padding: var(--sp-tight) var(--sp-normal);
+    margin-left: var(--sp-extra-tight);
+    padding: var(--sp-extra-tight) var(--sp-ultra-tight);
     text-transform: uppercase;
     font-weight: 600;
+    box-shadow: 0 -4px 0 0 var(--bg-surface);
+    border-bottom: 1px solid var(--bg-surface-border);
+    [dir=rtl] & {
+      margin-left: 0;
+      margin-right: var(--sp-extra-tight);
+    }
   }
   & .emoji-set {
-    margin: 0 calc(var(--sp-normal) - var(--emoji-padding));
+    margin: var(--sp-extra-tight) calc(var(--sp-normal) - var(--emoji-padding));
     margin-right: calc(var(--sp-extra-tight) - var(--emoji-padding));
     [dir=rtl] & {
       margin-right: calc(var(--sp-normal) - var(--emoji-padding));
@@ -79,6 +119,7 @@
   }
   & .emoji {
     width: 38px;
+    height: 38px;
     padding: var(--emoji-padding);
     cursor: pointer;
     &:hover {

src/app/organisms/emoji-board/EmojiBoardOpener.jsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useRef } from 'react';
+
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+
+import ContextMenu from '../../atoms/context-menu/ContextMenu';
+import EmojiBoard from './EmojiBoard';
+
+let requestCallback = null;
+let isEmojiBoardVisible = false;
+function EmojiBoardOpener() {
+  const openerRef = useRef(null);
+
+  function openEmojiBoard(cords, requestEmojiCallback) {
+    if (requestCallback !== null || isEmojiBoardVisible) {
+      requestCallback = null;
+      if (cords.detail === 0) openerRef.current.click();
+      return;
+    }
+
+    openerRef.current.style.transform = `translate(${cords.x}px, ${cords.y}px)`;
+    requestCallback = requestEmojiCallback;
+    openerRef.current.click();
+  }
+
+  function afterEmojiBoardToggle(isVisible) {
+    isEmojiBoardVisible = isVisible;
+    if (!isVisible) {
+      setTimeout(() => {
+        if (!isEmojiBoardVisible) requestCallback = null;
+      }, 500);
+    }
+  }
+
+  function addEmoji(emoji) {
+    requestCallback(emoji);
+  }
+
+  useEffect(() => {
+    navigation.on(cons.events.navigation.EMOJIBOARD_OPENED, openEmojiBoard);
+    return () => {
+      navigation.removeListener(cons.events.navigation.EMOJIBOARD_OPENED, openEmojiBoard);
+    };
+  }, []);
+
+  return (
+    <ContextMenu
+      content={(
+        <EmojiBoard onSelect={addEmoji} />
+      )}
+      afterToggle={afterEmojiBoardToggle}
+      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 EmojiBoardOpener;

src/app/organisms/emoji-board/emoji.js

@@ -1,6 +1,5 @@
 import emojisData from 'emojibase-data/en/compact.json';
 import shortcodes from 'emojibase-data/en/shortcodes/joypixels.json';
-import Fuse from 'fuse.js';
 
 const emojiGroups = [{
   name: 'Smileys & people',
@@ -47,30 +46,22 @@ function addToGroup(emoji) {
   else if (emoji.group === 6) addEmoji(emoji, 3);
   else if (emoji.group === 5) addEmoji(emoji, 4);
   else if (emoji.group === 7) addEmoji(emoji, 5);
-  else if (emoji.group === 8) addEmoji(emoji, 6);
+  else if (emoji.group === 8 || typeof emoji.group === 'undefined') addEmoji(emoji, 6);
   else if (emoji.group === 9) addEmoji(emoji, 7);
 }
 
 const emojis = [];
 emojisData.forEach((emoji) => {
-  const em = { ...emoji, shortcodes: shortcodes[emoji.hexcode] };
+  const myShortCodes = shortcodes[emoji.hexcode];
+  const em = {
+    ...emoji,
+    shortcode: Array.isArray(myShortCodes) ? myShortCodes[0] : myShortCodes,
+    shortcodes: myShortCodes,
+  };
   addToGroup(em);
   emojis.push(em);
 });
 
-function searchEmoji(term) {
-  const options = {
-    includeScore: true,
-    keys: ['shortcodes', 'annotation', 'tags'],
-    threshold: '0.3',
-  };
-  const fuse = new Fuse(emojis, options);
-
-  let result = fuse.search(term);
-  if (result.length > 20) result = result.slice(0, 20);
-  return result.map((finding) => finding.item);
-}
-
 export {
-  emojis, emojiGroups, searchEmoji,
+  emojis, emojiGroups,
 };

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

@@ -18,7 +18,9 @@ import ChannelTile from '../../molecules/channel-tile/ChannelTile';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
 
-function InviteUser({ isOpen, roomId, onRequestClose }) {
+function InviteUser({
+  isOpen, roomId, searchTerm, onRequestClose,
+}) {
   const [isSearching, updateIsSearching] = useState(false);
   const [searchQuery, updateSearchQuery] = useState({});
   const [users, updateUsers] = useState([]);
@@ -63,26 +65,8 @@ function InviteUser({ isOpen, roomId, onRequestClose }) {
     updateRoomIdToUserId(getMapCopy(roomIdToUserId));
   }
 
-  useEffect(() => () => {
+  async function searchUser(username) {
-    updateIsSearching(false);
+    const inputUsername = username.trim();
-    updateSearchQuery({});
-    updateUsers([]);
-    updateProcUsers(new Set());
-    updateUserProcError(new Map());
-    updateCreatedDM(new Map());
-    updateRoomIdToUserId(new Map());
-    updateInvitedUserIds(new Set());
-  }, [isOpen]);
-
-  useEffect(() => {
-    initMatrix.roomList.on(cons.events.roomList.ROOM_CREATED, onDMCreated);
-    return () => {
-      initMatrix.roomList.removeListener(cons.events.roomList.ROOM_CREATED, onDMCreated);
-    };
-  }, [isOpen, procUsers, createdDM, roomIdToUserId]);
-
-  async function searchUser() {
-    const inputUsername = usernameRef.current.value.trim();
     if (isSearching || inputUsername === '' || inputUsername === searchQuery.username) return;
     const isInputUserId = inputUsername[0] === '@' && inputUsername.indexOf(':') > 1;
     updateIsSearching(true);
@@ -216,6 +200,27 @@ function InviteUser({ isOpen, roomId, onRequestClose }) {
     });
   }
 
+  useEffect(() => {
+    if (isOpen && typeof searchTerm === 'string') searchUser(searchTerm);
+    return () => {
+      updateIsSearching(false);
+      updateSearchQuery({});
+      updateUsers([]);
+      updateProcUsers(new Set());
+      updateUserProcError(new Map());
+      updateCreatedDM(new Map());
+      updateRoomIdToUserId(new Map());
+      updateInvitedUserIds(new Set());
+    };
+  }, [isOpen, searchTerm]);
+
+  useEffect(() => {
+    initMatrix.roomList.on(cons.events.roomList.ROOM_CREATED, onDMCreated);
+    return () => {
+      initMatrix.roomList.removeListener(cons.events.roomList.ROOM_CREATED, onDMCreated);
+    };
+  }, [isOpen, procUsers, createdDM, roomIdToUserId]);
+
   return (
     <PopupWindow
       isOpen={isOpen}
@@ -224,8 +229,8 @@ function InviteUser({ isOpen, roomId, onRequestClose }) {
       onRequestClose={onRequestClose}
     >
       <div className="invite-user">
-        <form className="invite-user__form" onSubmit={(e) => { e.preventDefault(); searchUser(); }}>
+        <form className="invite-user__form" onSubmit={(e) => { e.preventDefault(); searchUser(usernameRef.current.value); }}>
-          <Input forwardRef={usernameRef} label="Username or userId" />
+          <Input value={searchTerm} forwardRef={usernameRef} label="Name or userId" />
           <Button disabled={isSearching} iconSrc={UserIC} variant="primary" type="submit">Search</Button>
         </form>
         <div className="invite-user__search-status">
@@ -258,11 +263,13 @@ function InviteUser({ isOpen, roomId, onRequestClose }) {
 
 InviteUser.defaultProps = {
   roomId: undefined,
+  searchTerm: undefined,
 };
 
 InviteUser.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   roomId: PropTypes.string,
+  searchTerm: PropTypes.string,
   onRequestClose: PropTypes.func.isRequired,
 };
 

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 DrawerHeader from './DrawerHeader';
-// import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
+import Home from './Home';
-import HashIC from '../../../../public/res/ic/outlined/hash.svg';
+import Directs from './Directs';
-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,
-};
 
 function DrawerBradcrumb() {
   return (
@@ -94,121 +22,33 @@ function DrawerBradcrumb() {
   );
 }
 
-function renderSelector(room, roomId, isSelected, isDM) {
+function Drawer() {
-  const mx = initMatrix.matrixClient;
+  const [activeTab, setActiveTab] = useState('home');
-  let imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop');
-  if (typeof imageSrc === 'undefined') imageSrc = null;
 
-  return (
+  function onTabChanged(tabId) {
-    <ChannelSelector
+    setActiveTab(tabId);
-      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);
-    }
-  };
 
   useEffect(() => {
-    navigation.on(cons.events.navigation.ROOM_SELECTED, selectHandler);
+    navigation.on(cons.events.navigation.TAB_CHANGED, onTabChanged);
-    initMatrix.roomList.on(cons.events.roomList.ROOMLIST_UPDATED, handleDataChanges);
-
     return () => {
-      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectHandler);
+      navigation.removeListener(cons.events.navigation.TAB_CHANGED, onTabChanged);
-      initMatrix.roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, handleDataChanges);
     };
   }, []);
-  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} />
+      <SideBar />
-      <Drawer tabId={activeTab} />
+      <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={activeTab === 'home'} onClick={() => changeTab('home')} tooltip="Home" iconSrc={HomeIC} />
-              <SidebarAvatar active={tabId === 'dm'} onClick={() => changeTab('dm')} tooltip="People" iconSrc={UserIC} />
+              <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/public-channels/PublicChannels.jsx

@@ -20,7 +20,71 @@ import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
 
 const SEARCH_LIMIT = 20;
 
-function PublicChannels({ isOpen, onRequestClose }) {
+function TryJoinWithAlias({ alias, onRequestClose }) {
+  const [status, setStatus] = useState({
+    isJoining: false,
+    error: null,
+    roomId: null,
+    tempRoomId: null,
+  });
+  function handleOnRoomAdded(roomId) {
+    if (status.tempRoomId !== null && status.tempRoomId !== roomId) return;
+    setStatus({
+      isJoining: false, error: null, roomId, tempRoomId: null,
+    });
+  }
+
+  useEffect(() => {
+    initMatrix.roomList.on(cons.events.roomList.ROOM_JOINED, handleOnRoomAdded);
+    return () => {
+      initMatrix.roomList.removeListener(cons.events.roomList.ROOM_JOINED, handleOnRoomAdded);
+    };
+  }, [status]);
+
+  async function joinWithAlias() {
+    setStatus({
+      isJoining: true, error: null, roomId: null, tempRoomId: null,
+    });
+    try {
+      const roomId = await roomActions.join(alias, false);
+      setStatus({
+        isJoining: true, error: null, roomId: null, tempRoomId: roomId,
+      });
+    } catch (e) {
+      setStatus({
+        isJoining: false,
+        error: `Unable to join ${alias}. Either channel is private or doesn't exist.`,
+        roomId: null,
+        tempRoomId: null,
+      });
+    }
+  }
+
+  return (
+    <div className="try-join-with-alias">
+      {status.roomId === null && !status.isJoining && status.error === null && (
+        <Button onClick={() => joinWithAlias()}>{`Try joining ${alias}`}</Button>
+      )}
+      {status.isJoining && (
+        <>
+          <Spinner size="small" />
+          <Text>{`Joining ${alias}...`}</Text>
+        </>
+      )}
+      {status.roomId !== null && (
+        <Button onClick={() => { onRequestClose(); selectRoom(status.roomId); }}>Open</Button>
+      )}
+      {status.error !== null && <Text variant="b2"><span style={{ color: 'var(--bg-danger)' }}>{status.error}</span></Text>}
+    </div>
+  );
+}
+
+TryJoinWithAlias.propTypes = {
+  alias: PropTypes.string.isRequired,
+  onRequestClose: PropTypes.func.isRequired,
+};
+
+function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
   const [isSearching, updateIsSearching] = useState(false);
   const [isViewMore, updateIsViewMore] = useState(false);
   const [publicChannels, updatePublicChannels] = useState([]);
@@ -33,8 +97,13 @@ function PublicChannels({ isOpen, onRequestClose }) {
   const userId = initMatrix.matrixClient.getUserId();
 
   async function searchChannels(viewMore) {
-    let inputHs = hsRef?.current?.value;
+    let inputChannelName = channelNameRef?.current?.value || searchTerm;
-    let inputChannelName = channelNameRef?.current?.value;
+    let isInputAlias = false;
+    if (typeof inputChannelName === 'string') {
+      isInputAlias = inputChannelName[0] === '#' && inputChannelName.indexOf(':') > 1;
+    }
+    const hsFromAlias = (isInputAlias) ? inputChannelName.slice(inputChannelName.indexOf(':') + 1) : null;
+    let inputHs = hsFromAlias || hsRef?.current?.value;
 
     if (typeof inputHs !== 'string') inputHs = userId.slice(userId.indexOf(':') + 1);
     if (typeof inputChannelName !== 'string') inputChannelName = '';
@@ -68,9 +137,18 @@ function PublicChannels({ isOpen, onRequestClose }) {
       updateNextBatch(result.next_batch);
       updateIsSearching(false);
       updateIsViewMore(false);
+      if (totalChannels.length === 0) {
+        updateSearchQuery({
+          error: `No result found for "${inputChannelName}" on ${inputHs}`,
+          alias: isInputAlias ? inputChannelName : null,
+        });
+      }
     } catch (e) {
       updatePublicChannels([]);
-      updateSearchQuery({ error: 'Something went wrong!' });
+      updateSearchQuery({
+        error: 'Something went wrong!',
+        alias: isInputAlias ? inputChannelName : null,
+      });
       updateIsSearching(false);
       updateNextBatch(undefined);
       updateIsViewMore(false);
@@ -99,10 +177,10 @@ function PublicChannels({ isOpen, onRequestClose }) {
     onRequestClose();
   }
 
-  function joinChannel(roomId) {
+  function joinChannel(roomIdOrAlias) {
-    joiningChannels.add(roomId);
+    joiningChannels.add(roomIdOrAlias);
     updateJoiningChannels(new Set(Array.from(joiningChannels)));
-    roomActions.join(roomId, false);
+    roomActions.join(roomIdOrAlias, false);
   }
 
   function renderChannelList(channels) {
@@ -121,7 +199,7 @@ function PublicChannels({ isOpen, onRequestClose }) {
           options={(
             <>
               {isJoined && <Button onClick={() => handleViewChannel(channel.room_id)}>Open</Button>}
-              {!isJoined && (joiningChannels.has(channel.room_id) ? <Spinner size="small" /> : <Button onClick={() => joinChannel(channel.room_id)} variant="primary">Join</Button>)}
+              {!isJoined && (joiningChannels.has(channel.room_id) ? <Spinner size="small" /> : <Button onClick={() => joinChannel(channel.aliases?.[0] || channel.room_id)} variant="primary">Join</Button>)}
             </>
           )}
         />
@@ -139,7 +217,7 @@ function PublicChannels({ isOpen, onRequestClose }) {
       <div className="public-channels">
         <form className="public-channels__form" onSubmit={(e) => { e.preventDefault(); searchChannels(); }}>
           <div className="public-channels__input-wrapper">
-            <Input forwardRef={channelNameRef} label="Channel name" />
+            <Input value={searchTerm} forwardRef={channelNameRef} label="Channel name or alias" />
             <Input forwardRef={hsRef} value={userId.slice(userId.indexOf(':') + 1)} label="Homeserver" required />
           </div>
           <Button disabled={isSearching} iconSrc={HashSearchIC} variant="primary" type="submit">Search</Button>
@@ -169,9 +247,14 @@ function PublicChannels({ isOpen, onRequestClose }) {
                 : <Text variant="b2">{`Search result for "${searchQuery.name}" on ${searchQuery.homeserver}.`}</Text>
             )
           }
-          {
+          { searchQuery.error && (
-            searchQuery.error && <Text className="public-channels__search-error" variant="b2">{searchQuery.error}</Text>
+            <>
-          }
+              <Text className="public-channels__search-error" variant="b2">{searchQuery.error}</Text>
+              {typeof searchQuery.alias === 'string' && (
+                <TryJoinWithAlias onRequestClose={onRequestClose} alias={searchQuery.alias} />
+              )}
+            </>
+          )}
         </div>
         { publicChannels.length !== 0 && (
           <div className="public-channels__content">
@@ -191,8 +274,13 @@ function PublicChannels({ isOpen, onRequestClose }) {
   );
 }
 
+PublicChannels.defaultProps = {
+  searchTerm: undefined,
+};
+
 PublicChannels.propTypes = {
   isOpen: PropTypes.bool.isRequired,
+  searchTerm: PropTypes.string,
   onRequestClose: PropTypes.func.isRequired,
 };
 

src/app/organisms/public-channels/PublicChannels.scss

@@ -55,6 +55,10 @@
     & .donut-spinner {
       margin: 0 var(--sp-tight);
     }
+
+    .try-join-with-alias {
+      margin-top: var(--sp-normal);
+    }
   }
   &__search-error {
     color: var(--bg-danger);
@@ -85,3 +89,12 @@
     }
   }
 }
+
+.try-join-with-alias {
+  display: flex;
+  align-items: center;
+  
+  & >.text:nth-child(2) {
+    margin: 0 var(--sp-normal);
+  }
+}

src/app/organisms/pw/Dialogs.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import ReadReceipts from '../read-receipts/ReadReceipts';
+
+function Dialogs() {
+  return (
+    <>
+      <ReadReceipts />
+    </>
+  );
+}
+
+export default Dialogs;

src/app/organisms/pw/Windows.jsx

@@ -11,24 +11,32 @@ import Settings from '../settings/Settings';
 
 function Windows() {
   const [isInviteList, changeInviteList] = useState(false);
-  const [isPubilcChannels, changePubilcChannels] = useState(false);
+  const [publicChannels, changePublicChannels] = useState({
+    isOpen: false, searchTerm: undefined,
+  });
   const [isCreateChannel, changeCreateChannel] = useState(false);
-  const [inviteUser, changeInviteUser] = useState({ isOpen: false, roomId: undefined });
+  const [inviteUser, changeInviteUser] = useState({
+    isOpen: false, roomId: undefined, term: undefined,
+  });
   const [settings, changeSettings] = useState(false);
 
   function openInviteList() {
     changeInviteList(true);
   }
-  function openPublicChannels() {
+  function openPublicChannels(searchTerm) {
-    changePubilcChannels(true);
+    changePublicChannels({
+      isOpen: true,
+      searchTerm,
+    });
   }
   function openCreateChannel() {
     changeCreateChannel(true);
   }
-  function openInviteUser(roomId) {
+  function openInviteUser(roomId, searchTerm) {
     changeInviteUser({
       isOpen: true,
       roomId,
+      searchTerm,
     });
   }
   function openSettings() {
@@ -57,8 +65,9 @@ function Windows() {
         onRequestClose={() => changeInviteList(false)}
       />
       <PublicChannels
-        isOpen={isPubilcChannels}
+        isOpen={publicChannels.isOpen}
-        onRequestClose={() => changePubilcChannels(false)}
+        searchTerm={publicChannels.searchTerm}
+        onRequestClose={() => changePublicChannels({ isOpen: false, searchTerm: undefined })}
       />
       <CreateChannel
         isOpen={isCreateChannel}
@@ -67,6 +76,7 @@ function Windows() {
       <InviteUser
         isOpen={inviteUser.isOpen}
         roomId={inviteUser.roomId}
+        searchTerm={inviteUser.searchTerm}
         onRequestClose={() => changeInviteUser({ isOpen: false, roomId: undefined })}
       />
       <Settings

src/app/organisms/read-receipts/ReadReceipts.jsx

@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from 'react';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { getUsername, getUsernameOfRoomMember } from '../../../util/matrixUtil';
+import colorMXID from '../../../util/colorMXID';
+
+import IconButton from '../../atoms/button/IconButton';
+import PeopleSelector from '../../molecules/people-selector/PeopleSelector';
+import Dialog from '../../molecules/dialog/Dialog';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+function ReadReceipts() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [roomId, setRoomId] = useState(null);
+  const [readReceipts, setReadReceipts] = useState([]);
+
+  function loadReadReceipts(myRoomId, eventId) {
+    const mx = initMatrix.matrixClient;
+    const room = mx.getRoom(myRoomId);
+    const { timeline } = room;
+    const myReadReceipts = [];
+
+    const myEventIndex = timeline.findIndex((mEvent) => mEvent.getId() === eventId);
+
+    for (let eventIndex = myEventIndex; eventIndex < timeline.length; eventIndex += 1) {
+      myReadReceipts.push(...room.getReceiptsForEvent(timeline[eventIndex]));
+    }
+
+    setReadReceipts(myReadReceipts);
+    setRoomId(myRoomId);
+    setIsOpen(true);
+  }
+
+  useEffect(() => {
+    navigation.on(cons.events.navigation.READRECEIPTS_OPENED, loadReadReceipts);
+    return () => {
+      navigation.removeListener(cons.events.navigation.READRECEIPTS_OPENED, loadReadReceipts);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isOpen === false) {
+      setRoomId(null);
+      setReadReceipts([]);
+    }
+  }, [isOpen]);
+
+  function renderPeople(receipt) {
+    const room = initMatrix.matrixClient.getRoom(roomId);
+    const member = room.getMember(receipt.userId);
+    const getUserDisplayName = (userId) => {
+      if (room?.getMember(userId)) return getUsernameOfRoomMember(room.getMember(userId));
+      return getUsername(userId);
+    };
+    return (
+      <PeopleSelector
+        key={receipt.userId}
+        onClick={() => alert('Viewing profile is yet to be implemented')}
+        avatarSrc={member?.getAvatarUrl(initMatrix.matrixClient.baseUrl, 24, 24, 'crop')}
+        name={getUserDisplayName(receipt.userId)}
+        color={colorMXID(receipt.userId)}
+      />
+    );
+  }
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      title="Seen by"
+      onRequestClose={() => setIsOpen(false)}
+      contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />}
+    >
+      {
+        readReceipts.map(renderPeople)
+      }
+    </Dialog>
+  );
+}
+
+export default ReadReceipts;

src/app/organisms/settings/Settings.jsx

@@ -1,49 +1,151 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import './Settings.scss';
 
+import initMatrix from '../../../client/initMatrix';
 import settings from '../../../client/state/settings';
+import { toggleMarkdown } from '../../../client/action/settings';
 
 import Text from '../../atoms/text/Text';
 import IconButton from '../../atoms/button/IconButton';
+import Button from '../../atoms/button/Button';
+import Toggle from '../../atoms/button/Toggle';
 import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls';
 
-import PopupWindow from '../../molecules/popup-window/PopupWindow';
+import PopupWindow, { PWContentSelector } from '../../molecules/popup-window/PopupWindow';
 import SettingTile from '../../molecules/setting-tile/SettingTile';
+import ImportE2ERoomKeys from '../../molecules/import-e2e-room-keys/ImportE2ERoomKeys';
 
+import SunIC from '../../../../public/res/ic/outlined/sun.svg';
+import LockIC from '../../../../public/res/ic/outlined/lock.svg';
+import InfoIC from '../../../../public/res/ic/outlined/info.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
+import CinnySVG from '../../../../public/res/svg/cinny.svg';
+
+function AppearanceSection() {
+  const [, updateState] = useState({});
+
+  return (
+    <div className="settings-content">
+      <SettingTile
+        title="Theme"
+        content={(
+          <SegmentedControls
+            selected={settings.getThemeIndex()}
+            segments={[
+              { text: 'Light' },
+              { text: 'Silver' },
+              { text: 'Dark' },
+              { text: 'Butter' },
+            ]}
+            onSelect={(index) => settings.setTheme(index)}
+          />
+        )}
+      />
+      <SettingTile
+        title="Markdown formatting"
+        options={(
+          <Toggle
+            isActive={settings.isMarkdown}
+            onToggle={(isMarkdown) => { toggleMarkdown(isMarkdown); updateState({}); }}
+          />
+        )}
+        content={<Text variant="b3">Format messages with markdown syntax before sending.</Text>}
+      />
+    </div>
+  );
+}
+
+function SecuritySection() {
+  return (
+    <div className="set-security settings-content">
+      <SettingTile
+        title={`Device ID: ${initMatrix.matrixClient.getDeviceId()}`}
+      />
+      <SettingTile
+        title={`Device key: ${initMatrix.matrixClient.getDeviceEd25519Key().match(/.{1,4}/g).join(' ')}`}
+        content={<Text variant="b3">Use this device ID-key combo to verify or manage this session from Element client.</Text>}
+      />
+      <SettingTile
+        title="Import E2E room keys"
+        content={(
+          <>
+            <Text variant="b3">{'To decrypt older messages, Export E2EE room keys from Element (Settings > Security & Privacy > Encryption > Cryptography) and import them here. Imported keys are encrypted so you\'ll have to enter the password you set in order to decrypt it.'}</Text>
+            <ImportE2ERoomKeys />
+          </>
+        )}
+      />
+    </div>
+  );
+}
+
+function AboutSection() {
+  return (
+    <div className="settings-content settings__about">
+      <div className="set-about__branding">
+        <img width="60" height="60" src={CinnySVG} alt="Cinny logo" />
+        <div>
+          <Text variant="h2">
+            Cinny
+            <span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>v1.2.1</span>
+          </Text>
+          <Text>Yet another matrix client</Text>
+
+          <div className="set-about__btns">
+            <Button onClick={() => window.open('https://github.com/ajbura/cinny')}>Source code</Button>
+            <Button onClick={() => window.open('https://liberapay.com/ajbura/donate')}>Support</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function Settings({ isOpen, onRequestClose }) {
+  const settingSections = [{
+    name: 'Appearance',
+    iconSrc: SunIC,
+    render() {
+      return <AppearanceSection />;
+    },
+  }, {
+    name: 'Security & Privacy',
+    iconSrc: LockIC,
+    render() {
+      return <SecuritySection />;
+    },
+  }, {
+    name: 'Help & About',
+    iconSrc: InfoIC,
+    render() {
+      return <AboutSection />;
+    },
+  }];
+  const [selectedSection, setSelectedSection] = useState(settingSections[0]);
+
   return (
     <PopupWindow
       className="settings-window"
       isOpen={isOpen}
       onRequestClose={onRequestClose}
       title="Settings"
+      contentTitle={selectedSection.name}
+      drawer={
+        settingSections.map((section) => (
+          <PWContentSelector
+            key={section.name}
+            selected={selectedSection.name === section.name}
+            onClick={() => setSelectedSection(section)}
+            iconSrc={section.iconSrc}
+          >
+            {section.name}
+          </PWContentSelector>
+        ))
+      }
       contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
     >
-      <div className="settings-content">
+      {selectedSection.render()}
-        <SettingTile
-          title="Theme"
-          content={(
-            <SegmentedControls
-              selected={settings.getThemeIndex()}
-              segments={[
-                { text: 'Light' },
-                { text: 'Silver' },
-                { text: 'Dark' },
-                { text: 'Butter' },
-              ]}
-              onSelect={(index) => settings.setTheme(index)}
-            />
-          )}
-        />
-        <div style={{ flex: '1' }} />
-        <Text className="settings__about" variant="b1">
-          <a href="https://cinny.in/#about" target="_blank" rel="noreferrer">About</a>
-        </Text>
-        <Text className="settings__about">Version: 1.0.0</Text>
-      </div>
     </PopupWindow>
   );
 }

src/app/organisms/settings/Settings.scss

@@ -1,6 +1,6 @@
 .settings-window {
   & .pw__content-container {
-    height: 100%;
+    min-height: 100%;
   }
 }
 
@@ -12,11 +12,32 @@
     margin-right: var(--sp-normal);
   }
 
-  display: flex;
+  & .setting-tile {
-  flex-direction: column;
+    margin-top: var(--sp-normal);
-  height: 100%;
+    border-bottom: 1px solid var(--bg-surface-border);
+    padding-bottom: 16px;
+    &__title__wrapper {
+      margin-bottom: var(--sp-ultra-tight);
+    }
+  }
 }
 
-.settings__about {
+.set-about {
-  text-align: center;
+  &__branding {
+    margin-top: var(--sp-extra-tight);
+    margin-bottom: var(--sp-normal);
+    display: flex;
+
+    & > div {
+      margin: 0 calc(var(--sp-loose) + var(--sp-ultra-tight));
+    }
+
+  }
+  &__btns {
+    margin: 0;
+    margin-top: var(--sp-normal);
+    & button:last-child {
+      margin: 0 var(--sp-tight)
+    }
+  }
 }

src/app/templates/auth/Auth.jsx

@@ -13,13 +13,17 @@ import Spinner from '../../atoms/spinner/Spinner';
 
 import CinnySvg from '../../../../public/res/svg/cinny.svg';
 
-const USERNAME_REGEX = /^[a-z0-9_-]+$/;
+// This regex validates historical usernames, which don't satisy today's username requirements.
-const BAD_USERNAME_ERROR = 'Username must contain only lowercase letters, numbers, dashes and underscores.';
+// See https://matrix.org/docs/spec/appendices#id13 for more info.
+const LOCALPART_LOGIN_REGEX = /.*/;
+const LOCALPART_SIGNUP_REGEX = /^[a-z0-9_\-.=/]+$/;
+const BAD_LOCALPART_ERROR = 'Username must contain only a-z, 0-9, ., _, =, -, and /.';
+const USER_ID_TOO_LONG_ERROR = 'Your user ID, including the hostname, can\'t be more than 255 characters long.';
 
 const PASSWORD_REGEX = /.+/;
-const PASSWORD_STRENGHT_REGEX = /^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[^\w\d\s:])([^\s]){8,16}$/;
+const PASSWORD_STRENGHT_REGEX = /^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[^\w\d\s:])([^\s]){8,127}$/;
-const BAD_PASSWORD_ERROR = 'Password must contain 1 number, 1 uppercase letters, 1 lowercase letters, 1 non-alpha numeric number, 8-16 characters with no space.';
+const BAD_PASSWORD_ERROR = 'Password must contain at least 1 number, 1 uppercase letter, 1 lowercase letter, 1 non-alphanumeric character. Passwords can range from 8-127 characters with no whitespaces.';
-const CONFIRM_PASSWORD_ERROR = 'Password don\'t match.';
+const CONFIRM_PASSWORD_ERROR = 'Passwords don\'t match.';
 
 const EMAIL_REGEX = /([a-z0-9]+[_a-z0-9.-][a-z0-9]+)@([a-z0-9-]+(?:.[a-z0-9-]+).[a-z]{2,4})/;
 const BAD_EMAIL_ERROR = 'Invalid email address';
@@ -52,6 +56,18 @@ function validateOnChange(e, regex, error) {
   document.getElementById('auth_submit-btn').disabled = false;
 }
 
+/**
+ * Normalizes a username into a standard format.
+ *
+ * Removes leading and trailing whitespaces and leading "@" symbols.
+ * @param {string} rawUsername A raw-input username, which may include invalid characters.
+ * @returns {string}
+ */
+function normalizeUsername(rawUsername) {
+  const noLeadingAt = rawUsername.indexOf('@') === 0 ? rawUsername.substr(1) : rawUsername;
+  return noLeadingAt.trim();
+}
+
 function Auth({ type }) {
   const [process, changeProcess] = useState(null);
   const usernameRef = useRef(null);
@@ -99,12 +115,12 @@ function Auth({ type }) {
     document.getElementById('auth_submit-btn').disabled = true;
     document.getElementById('auth_error').style.display = 'none';
 
-    if (!isValidInput(usernameRef.current.value, USERNAME_REGEX)) {
+    /** @type {string} */
-      showBadInputError(usernameRef.current, BAD_USERNAME_ERROR);
+    const rawUsername = usernameRef.current.value;
-      return;
+    /** @type {string} */
-    }
+    const normalizedUsername = normalizeUsername(rawUsername);
 
-    auth.login(usernameRef.current.value, homeserverRef.current.value, passwordRef.current.value)
+    auth.login(normalizedUsername, homeserverRef.current.value, passwordRef.current.value)
       .then(() => {
         document.getElementById('auth_submit-btn').disabled = false;
         window.location.replace('/');
@@ -122,8 +138,8 @@ function Auth({ type }) {
     document.getElementById('auth_submit-btn').disabled = true;
     document.getElementById('auth_error').style.display = 'none';
 
-    if (!isValidInput(usernameRef.current.value, USERNAME_REGEX)) {
+    if (!isValidInput(usernameRef.current.value, LOCALPART_SIGNUP_REGEX)) {
-      showBadInputError(usernameRef.current, BAD_USERNAME_ERROR);
+      showBadInputError(usernameRef.current, BAD_LOCALPART_ERROR);
       return;
     }
     if (!isValidInput(passwordRef.current.value, PASSWORD_STRENGHT_REGEX)) {
@@ -138,6 +154,10 @@ function Auth({ type }) {
       showBadInputError(emailRef.current, BAD_EMAIL_ERROR);
       return;
     }
+    if (`@${usernameRef.current.value}:${homeserverRef.current.value}`.length > 255) {
+      showBadInputError(usernameRef.current, USER_ID_TOO_LONG_ERROR);
+      return;
+    }
     register();
   }
 
@@ -171,7 +191,9 @@ function Auth({ type }) {
             <div className="username__wrapper">
               <Input
                 forwardRef={usernameRef}
-                onChange={(e) => validateOnChange(e, USERNAME_REGEX, BAD_USERNAME_ERROR)}
+                onChange={(e) => (type === 'login'
+                  ? validateOnChange(e, LOCALPART_LOGIN_REGEX, BAD_LOCALPART_ERROR)
+                  : validateOnChange(e, LOCALPART_SIGNUP_REGEX, BAD_LOCALPART_ERROR))}
                 id="auth_username"
                 label="Username"
                 required
@@ -251,7 +273,7 @@ function StaticWrapper({ children }) {
             <img className="app-ident__logo noselect" src={CinnySvg} alt="Cinny logo" />
             <div className="app-ident__text flex-v--center">
               <Text variant="h2">Cinny</Text>
-              <Text variant="b2">Yet another matrix client.</Text>
+              <Text variant="b2">Yet another matrix client</Text>
             </div>
           </div>
           { children }
@@ -302,7 +324,7 @@ function Terms({ url, onSubmit }) {
         <div style={{ margin: 'var(--sp-normal)', maxWidth: '450px' }}>
           <Text variant="h2">Agree with terms</Text>
           <div style={{ marginBottom: 'var(--sp-normal)' }} />
-          <Text variant="b1">In order to complete registration, you need to agree with terms and conditions.</Text>
+          <Text variant="b1">In order to complete registration, you need to agree to the terms and conditions.</Text>
           <div style={{ display: 'flex', alignItems: 'center', margin: 'var(--sp-normal) 0' }}>
             <input id="termsCheckbox" type="checkbox" required />
             <Text variant="b1">

src/app/templates/client/Client.jsx

@@ -6,6 +6,8 @@ import Spinner from '../../atoms/spinner/Spinner';
 import Navigation from '../../organisms/navigation/Navigation';
 import Channel from '../../organisms/channel/Channel';
 import Windows from '../../organisms/pw/Windows';
+import Dialogs from '../../organisms/pw/Dialogs';
+import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
 
 import initMatrix from '../../../client/initMatrix';
 
@@ -40,6 +42,8 @@ function Client() {
         <Channel />
       </div>
       <Windows />
+      <Dialogs />
+      <EmojiBoardOpener />
     </div>
   );
 }

src/client/action/auth.js

@@ -3,14 +3,22 @@ import cons from '../state/cons';
 import { getBaseUrl } from '../../util/matrixUtil';
 
 async function login(username, homeserver, password) {
-  const baseUrl = await getBaseUrl(homeserver);
+  let baseUrl = null;
+  try {
+    baseUrl = await getBaseUrl(homeserver);
+  } catch (e) {
+    baseUrl = `https://${homeserver}`;
+  }
 
   if (typeof baseUrl === 'undefined') throw new Error('Homeserver not found');
 
   const client = sdk.createClient({ baseUrl });
 
   const response = await client.login('m.login.password', {
-    user: `@${username}:${homeserver}`,
+    identifier: {
+      type: 'm.id.user',
+      user: username,
+    },
     password,
     initial_device_display_name: cons.DEVICE_DISPLAY_NAME,
   });
@@ -18,7 +26,7 @@ async function login(username, homeserver, password) {
   localStorage.setItem(cons.secretKey.ACCESS_TOKEN, response.access_token);
   localStorage.setItem(cons.secretKey.DEVICE_ID, response.device_id);
   localStorage.setItem(cons.secretKey.USER_ID, response.user_id);
-  localStorage.setItem(cons.secretKey.BASE_URL, response.well_known['m.homeserver'].base_url);
+  localStorage.setItem(cons.secretKey.BASE_URL, response?.well_known?.['m.homeserver']?.base_url || baseUrl);
 }
 
 async function getAdditionalInfo(baseUrl, content) {
@@ -39,7 +47,7 @@ async function getAdditionalInfo(baseUrl, content) {
 }
 async function verifyEmail(baseUrl, content) {
   try {
-    const res = await fetch(`${baseUrl}/_matrix/client/r0/register/email/requestToken           `, {
+    const res = await fetch(`${baseUrl}/_matrix/client/r0/register/email/requestToken`, {
       method: 'POST',
       body: JSON.stringify(content),
       headers: {
@@ -85,7 +93,6 @@ async function register(username, homeserver, password, email, recaptchaValue, t
   } else if (verified !== true) {
     session = null;
     clientSecret = client.generateClientSecret();
-    console.log(clientSecret);
     const verifyData = await verifyEmail(baseUrl, {
       email,
       client_secret: clientSecret,

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,
@@ -27,9 +27,10 @@ function openInviteList() {
   });
 }
 
-function openPublicChannels() {
+function openPublicChannels(searchTerm) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_PUBLIC_CHANNELS,
+    searchTerm,
   });
 }
 
@@ -39,10 +40,11 @@ function openCreateChannel() {
   });
 }
 
-function openInviteUser(roomId) {
+function openInviteUser(roomId, searchTerm) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_INVITE_USER,
     roomId,
+    searchTerm,
   });
 }
 
@@ -52,8 +54,24 @@ function openSettings() {
   });
 }
 
+function openEmojiBoard(cords, requestEmojiCallback) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_EMOJIBOARD,
+    cords,
+    requestEmojiCallback,
+  });
+}
+
+function openReadReceipts(roomId, eventId) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_READRECEIPTS,
+    roomId,
+    eventId,
+  });
+}
+
 export {
-  handleTabChange,
+  changeTab,
   selectRoom,
   togglePeopleDrawer,
   openInviteList,
@@ -61,4 +79,6 @@ export {
   openCreateChannel,
   openInviteUser,
   openSettings,
+  openEmojiBoard,
+  openReadReceipts,
 };

src/client/action/room.js

@@ -83,20 +83,25 @@ function guessDMRoomTargetId(room, myUserId) {
  * @param {string} roomId
  * @param {boolean} isDM
  */
-function join(roomId, isDM) {
+async function join(roomIdOrAlias, isDM) {
   const mx = initMatrix.matrixClient;
-  mx.joinRoom(roomId)
+  const roomIdParts = roomIdOrAlias.split(':');
-    .then(async () => {
+  try {
-      if (isDM) {
+    const resultRoom = await mx.joinRoom(roomIdOrAlias, { viaServers: [roomIdParts[1]] });
-        const targetUserId = guessDMRoomTargetId(mx.getRoom(roomId), mx.getUserId());
+
-        await addRoomToMDirect(roomId, targetUserId);
+    if (isDM) {
-      }
+      const targetUserId = guessDMRoomTargetId(mx.getRoom(resultRoom.roomId), mx.getUserId());
-      appDispatcher.dispatch({
+      await addRoomToMDirect(resultRoom.roomId, targetUserId);
-        type: cons.actions.room.JOIN,
+    }
-        roomId,
+    appDispatcher.dispatch({
-        isDM,
+      type: cons.actions.room.JOIN,
-      });
+      roomId: resultRoom.roomId,
-    }).catch();
+      isDM,
+    });
+    return resultRoom.roomId;
+  } catch (e) {
+    throw new Error(e);
+  }
 }
 
 /**
@@ -104,8 +109,9 @@ function join(roomId, isDM) {
  * @param {string} roomId
  * @param {boolean} isDM
  */
-function leave(roomId, isDM) {
+function leave(roomId) {
   const mx = initMatrix.matrixClient;
+  const isDM = initMatrix.roomList.directs.has(roomId);
   mx.leave(roomId)
     .then(() => {
       appDispatcher.dispatch({
@@ -185,5 +191,6 @@ async function invite(roomId, userId) {
 }
 
 export {
-  join, leave, create, invite,
+  join, leave,
+  create, invite,
 };

src/client/action/roomTimeline.js

@@ -0,0 +1,33 @@
+import initMatrix from '../initMatrix';
+
+async function redactEvent(roomId, eventId, reason) {
+  const mx = initMatrix.matrixClient;
+
+  try {
+    await mx.redactEvent(roomId, eventId, undefined, typeof reason === 'undefined' ? undefined : { reason });
+    return true;
+  } catch (e) {
+    throw new Error(e);
+  }
+}
+
+async function sendReaction(roomId, toEventId, reaction) {
+  const mx = initMatrix.matrixClient;
+
+  try {
+    await mx.sendEvent(roomId, 'm.reaction', {
+      'm.relates_to': {
+        event_id: toEventId,
+        key: reaction,
+        rel_type: 'm.annotation',
+      },
+    });
+  } catch (e) {
+    throw new Error(e);
+  }
+}
+
+export {
+  redactEvent,
+  sendReaction,
+};

src/client/action/settings.js

@@ -0,0 +1,12 @@
+import appDispatcher from '../dispatcher';
+import cons from '../state/cons';
+
+function toggleMarkdown() {
+  appDispatcher.dispatch({
+    type: cons.actions.settings.TOGGLE_MARKDOWN,
+  });
+}
+
+export {
+  toggleMarkdown,
+};

src/client/initMatrix.js

@@ -5,7 +5,7 @@ import { secret } from './state/auth';
 import RoomList from './state/RoomList';
 import RoomsInput from './state/RoomsInput';
 
-global.Olm = require('olm');
+global.Olm = require('@matrix-org/olm');
 
 class InitMatrix extends EventEmitter {
   async init() {
@@ -77,6 +77,7 @@ class InitMatrix extends EventEmitter {
 
   listenEvents() {
     this.matrixClient.on('Session.logged_out', () => {
+      this.matrixClient.stopClient();
       this.matrixClient.clearStores();
       window.localStorage.clear();
       window.location.reload();

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 content = event.getContent();
-        const userId = Object.keys(evContent[Object.keys(evContent)[0]]['m.read'])[0];
+        const userReadEventId = Object.keys(content)[0];
-        if (userId !== this.matrixClient.getUserId()) return;
+        const eventReaderUserId = Object.keys(content[userReadEventId]['m.read'])[0];
-        this.emit(cons.events.roomList.ROOMLIST_UPDATED);
+        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.matrixClient.on('Room.timeline', (event, room) => {
-      this.emit(cons.events.roomList.ROOMLIST_UPDATED);
+      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/RoomTimeline.js

@@ -32,6 +32,12 @@ class RoomTimeline extends EventEmitter {
       }
 
       if (this.ongoingDecryptionCount !== 0) return;
+      if (this.isOngoingPagination) return;
+      this.emit(cons.events.roomTimeline.EVENT);
+    };
+
+    this._listenRedaction = (event, room) => {
+      if (room.roomId !== this.roomId) return;
       this.emit(cons.events.roomTimeline.EVENT);
     };
 
@@ -67,6 +73,7 @@ class RoomTimeline extends EventEmitter {
     };
 
     this.matrixClient.on('Room.timeline', this._listenRoomTimeline);
+    this.matrixClient.on('Room.redaction', this._listenRedaction);
     this.matrixClient.on('Event.decrypted', this._listenDecryptEvent);
     this.matrixClient.on('RoomMember.typing', this._listenTypingEvent);
     this.matrixClient.on('Room.receipt', this._listenReciptEvent);
@@ -152,6 +159,7 @@ class RoomTimeline extends EventEmitter {
 
   removeInternalListeners() {
     this.matrixClient.removeListener('Room.timeline', this._listenRoomTimeline);
+    this.matrixClient.removeListener('Room.redaction', this._listenRedaction);
     this.matrixClient.removeListener('Event.decrypted', this._listenDecryptEvent);
     this.matrixClient.removeListener('RoomMember.typing', this._listenTypingEvent);
     this.matrixClient.removeListener('Room.receipt', this._listenReciptEvent);

src/client/state/RoomsInput.js

@@ -1,6 +1,9 @@
 import EventEmitter from 'events';
+import { micromark } from 'micromark';
+import { gfm, gfmHtml } from 'micromark-extension-gfm';
 import encrypt from 'browser-encrypt-attachment';
 import cons from './cons';
+import settings from './settings';
 
 function getImageDimension(file) {
   return new Promise((resolve) => {
@@ -78,6 +81,37 @@ function getVideoThumbnail(video, width, height, mimeType) {
   });
 }
 
+function getFormattedBody(markdown) {
+  const result = micromark(markdown, {
+    extensions: [gfm()],
+    htmlExtensions: [gfmHtml],
+  });
+  const bodyParts = result.match(/^(<p>)(.*)(<\/p>)$/);
+  if (bodyParts === null) return result;
+  if (bodyParts[2].indexOf('</p>') >= 0) return result;
+  return bodyParts[2];
+}
+
+function getReplyFormattedBody(roomId, reply) {
+  const replyToLink = `<a href="https://matrix.to/#/${roomId}/${reply.eventId}">In reply to</a>`;
+  const userLink = `<a href="https://matrix.to/#/${reply.userId}">${reply.userId}</a>`;
+  const formattedReply = getFormattedBody(reply.content.replaceAll('\n', '\n> '));
+  return `<mx-reply><blockquote>${replyToLink}${userLink}<br />${formattedReply}</blockquote></mx-reply>`;
+}
+
+function bindReplyToContent(roomId, reply, content) {
+  const newContent = { ...content };
+  newContent.body = `> <${reply.userId}> ${reply.content.replaceAll('\n', '\n> ')}`;
+  newContent.body += `\n\n${content.body}`;
+  newContent.format = 'org.matrix.custom.html';
+  newContent['m.relates_to'] = content['m.relates_to'] || {};
+  newContent['m.relates_to']['m.in_reply_to'] = { event_id: reply.eventId };
+
+  const formattedReply = getReplyFormattedBody(roomId, reply);
+  newContent.formatted_body = formattedReply + (content.formatted_body || content.body);
+  return newContent;
+}
+
 class RoomsInput extends EventEmitter {
   constructor(mx) {
     super();
@@ -89,6 +123,7 @@ class RoomsInput extends EventEmitter {
   cleanEmptyEntry(roomId) {
     const input = this.getInput(roomId);
     const isEmpty = typeof input.attachment === 'undefined'
+      && typeof input.replyTo === 'undefined'
       && (typeof input.message === 'undefined' || input.message === '');
     if (isEmpty) {
       this.roomIdToInput.delete(roomId);
@@ -112,6 +147,25 @@ class RoomsInput extends EventEmitter {
     return input.message;
   }
 
+  setReplyTo(roomId, replyTo) {
+    const input = this.getInput(roomId);
+    input.replyTo = replyTo;
+    this.roomIdToInput.set(roomId, input);
+  }
+
+  getReplyTo(roomId) {
+    const input = this.getInput(roomId);
+    if (typeof input.replyTo === 'undefined') return null;
+    return input.replyTo;
+  }
+
+  cancelReplyTo(roomId) {
+    const input = this.getInput(roomId);
+    if (typeof input.replyTo === 'undefined') return;
+    delete input.replyTo;
+    this.roomIdToInput.set(roomId, input);
+  }
+
   setAttachment(roomId, file) {
     const input = this.getInput(roomId);
     input.attachment = {
@@ -136,13 +190,9 @@ class RoomsInput extends EventEmitter {
       this.matrixClient.cancelUpload(uploadingPromise);
       delete input.attachment.uploadingPromise;
     }
-    if (input.message) {
+    delete input.attachment;
-      delete input.attachment;
+    delete input.isSending;
-      delete input.isSending;
+    this.roomIdToInput.set(roomId, input);
-      this.roomIdToInput.set(roomId, input);
-    } else {
-      this.roomIdToInput.delete(roomId);
-    }
     this.emit(cons.events.roomsInput.ATTACHMENT_CANCELED, roomId);
   }
 
@@ -156,13 +206,24 @@ class RoomsInput extends EventEmitter {
     this.roomIdToInput.set(roomId, input);
     if (input.attachment) {
       await this.sendFile(roomId, input.attachment.file);
+      if (!this.isSending(roomId)) return;
     }
 
     if (this.getMessage(roomId).trim() !== '') {
-      const content = {
+      let content = {
         body: input.message,
         msgtype: 'm.text',
       };
+      if (settings.isMarkdown) {
+        const formattedBody = getFormattedBody(input.message);
+        if (formattedBody !== input.message) {
+          content.format = 'org.matrix.custom.html';
+          content.formatted_body = formattedBody;
+        }
+      }
+      if (typeof input.replyTo !== 'undefined') {
+        content = bindReplyToContent(roomId, input.replyTo, content);
+      }
       this.matrixClient.sendMessage(roomId, content);
     }
 
@@ -271,6 +332,45 @@ class RoomsInput extends EventEmitter {
     }
     return { url };
   }
+
+  async sendEditedMessage(roomId, mEvent, editedBody) {
+    const isReply = typeof mEvent.getWireContent()['m.relates_to']?.['m.in_reply_to'] !== 'undefined';
+
+    const content = {
+      body: ` * ${editedBody}`,
+      msgtype: 'm.text',
+      'm.new_content': {
+        body: editedBody,
+        msgtype: 'm.text',
+      },
+      'm.relates_to': {
+        event_id: mEvent.getId(),
+        rel_type: 'm.replace',
+      },
+    };
+    if (settings.isMarkdown) {
+      const formattedBody = getFormattedBody(editedBody);
+      if (formattedBody !== editedBody) {
+        content.formatted_body = ` * ${formattedBody}`;
+        content.format = 'org.matrix.custom.html';
+        content['m.new_content'].formatted_body = formattedBody;
+        content['m.new_content'].format = 'org.matrix.custom.html';
+      }
+    }
+    if (isReply) {
+      const evBody = mEvent.getContent().body;
+      const replyHead = evBody.slice(0, evBody.indexOf('\n\n'));
+      const evFBody = mEvent.getContent().formatted_body;
+      const fReplyHead = evFBody.slice(0, evFBody.indexOf('</mx-reply>'));
+
+      content.format = 'org.matrix.custom.html';
+      content.formatted_body = `${fReplyHead}</mx-reply>${(content.formatted_body || content.body)}`;
+
+      content.body = `${replyHead}\n\n${content.body}`;
+    }
+
+    this.matrixClient.sendMessage(roomId, content);
+  }
 }
 
 export default RoomsInput;

src/client/state/cons.js

@@ -16,15 +16,20 @@ const cons = {
       OPEN_CREATE_CHANNEL: 'OPEN_CREATE_CHANNEL',
       OPEN_INVITE_USER: 'OPEN_INVITE_USER',
       OPEN_SETTINGS: 'OPEN_SETTINGS',
+      OPEN_EMOJIBOARD: 'OPEN_EMOJIBOARD',
+      OPEN_READRECEIPTS: 'OPEN_READRECEIPTS',
     },
     room: {
       JOIN: 'JOIN',
       LEAVE: 'LEAVE',
       CREATE: 'CREATE',
       error: {
-        CREATE: 'CREATE',
+        CREATE: 'ERROR_CREATE',
       },
     },
+    settings: {
+      TOGGLE_MARKDOWN: 'TOGGLE_MARKDOWN',
+    },
   },
   events: {
     navigation: {
@@ -36,6 +41,8 @@ const cons = {
       CREATE_CHANNEL_OPENED: 'CREATE_CHANNEL_OPENED',
       INVITE_USER_OPENED: 'INVITE_USER_OPENED',
       SETTINGS_OPENED: 'SETTINGS_OPENED',
+      EMOJIBOARD_OPENED: 'EMOJIBOARD_OPENED',
+      READRECEIPTS_OPENED: 'READRECEIPTS_OPENED',
     },
     roomList: {
       ROOMLIST_UPDATED: 'ROOMLIST_UPDATED',
@@ -43,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',
@@ -57,6 +66,9 @@ const cons = {
       FILE_UPLOAD_CANCELED: 'FILE_UPLOAD_CANCELED',
       ATTACHMENT_CANCELED: 'ATTACHMENT_CANCELED',
     },
+    settings: {
+      MARKDOWN_TOGGLED: 'MARKDOWN_TOGGLED',
+    },
   },
 };
 

src/client/state/navigation.js

@@ -6,8 +6,8 @@ class Navigation extends EventEmitter {
   constructor() {
     super();
 
-    this.activeTab = 'channels';
+    this.activeTab = 'home';
-    this.selectedRoom = null;
+    this.activeRoomId = null;
     this.isPeopleDrawerVisible = true;
   }
 
@@ -15,8 +15,8 @@ class Navigation extends EventEmitter {
     return this.activeTab;
   }
 
-  getActiveRoom() {
+  getActiveRoomId() {
-    return this.selectedRoom;
+    return this.activeRoomId;
   }
 
   navigate(action) {
@@ -26,8 +26,9 @@ class Navigation extends EventEmitter {
         this.emit(cons.events.navigation.TAB_CHANGED, this.activeTab);
       },
       [cons.actions.navigation.SELECT_ROOM]: () => {
-        this.selectedRoom = action.roomId;
+        const prevActiveRoomId = this.activeRoomId;
-        this.emit(cons.events.navigation.ROOM_SELECTED, this.selectedRoom);
+        this.activeRoomId = action.roomId;
+        this.emit(cons.events.navigation.ROOM_SELECTED, this.activeRoomId, prevActiveRoomId);
       },
       [cons.actions.navigation.TOGGLE_PEOPLE_DRAWER]: () => {
         this.isPeopleDrawerVisible = !this.isPeopleDrawerVisible;
@@ -37,17 +38,30 @@ class Navigation extends EventEmitter {
         this.emit(cons.events.navigation.INVITE_LIST_OPENED);
       },
       [cons.actions.navigation.OPEN_PUBLIC_CHANNELS]: () => {
-        this.emit(cons.events.navigation.PUBLIC_CHANNELS_OPENED);
+        this.emit(cons.events.navigation.PUBLIC_CHANNELS_OPENED, action.searchTerm);
       },
       [cons.actions.navigation.OPEN_CREATE_CHANNEL]: () => {
         this.emit(cons.events.navigation.CREATE_CHANNEL_OPENED);
       },
       [cons.actions.navigation.OPEN_INVITE_USER]: () => {
-        this.emit(cons.events.navigation.INVITE_USER_OPENED, action.roomId);
+        this.emit(cons.events.navigation.INVITE_USER_OPENED, action.roomId, action.searchTerm);
       },
       [cons.actions.navigation.OPEN_SETTINGS]: () => {
         this.emit(cons.events.navigation.SETTINGS_OPENED);
       },
+      [cons.actions.navigation.OPEN_EMOJIBOARD]: () => {
+        this.emit(
+          cons.events.navigation.EMOJIBOARD_OPENED,
+          action.cords, action.requestEmojiCallback,
+        );
+      },
+      [cons.actions.navigation.OPEN_READRECEIPTS]: () => {
+        this.emit(
+          cons.events.navigation.READRECEIPTS_OPENED,
+          action.roomId,
+          action.eventId,
+        );
+      },
     };
     actions[action.type]?.();
   }

src/client/state/settings.js

@@ -1,15 +1,38 @@
-class Settings {
+import EventEmitter from 'events';
+import appDispatcher from '../dispatcher';
+
+import cons from './cons';
+
+function getSettings() {
+  const settings = localStorage.getItem('settings');
+  if (settings === null) return null;
+  return JSON.parse(settings);
+}
+
+function setSettings(key, value) {
+  let settings = getSettings();
+  if (settings === null) settings = {};
+  settings[key] = value;
+  localStorage.setItem('settings', JSON.stringify(settings));
+}
+
+class Settings extends EventEmitter {
   constructor() {
+    super();
+
     this.themes = ['', 'silver-theme', 'dark-theme', 'butter-theme'];
     this.themeIndex = this.getThemeIndex();
+
+    this.isMarkdown = this.getIsMarkdown();
+
+    this.isTouchScreenDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
   }
 
   getThemeIndex() {
     if (typeof this.themeIndex === 'number') return this.themeIndex;
 
-    let settings = localStorage.getItem('settings');
+    const settings = getSettings();
     if (settings === null) return 0;
-    settings = JSON.parse(settings);
     if (typeof settings.themeIndex === 'undefined') return 0;
     // eslint-disable-next-line radix
     return parseInt(settings.themeIndex);
@@ -26,11 +49,33 @@ class Settings {
       appBody.classList.remove(themeName);
     });
     if (this.themes[themeIndex] !== '') appBody.classList.add(this.themes[themeIndex]);
-    localStorage.setItem('settings', JSON.stringify({ themeIndex }));
+    setSettings('themeIndex', themeIndex);
     this.themeIndex = themeIndex;
   }
+
+  getIsMarkdown() {
+    if (typeof this.isMarkdown === 'boolean') return this.isMarkdown;
+
+    const settings = getSettings();
+    if (settings === null) return false;
+    if (typeof settings.isMarkdown === 'undefined') return false;
+    return settings.isMarkdown;
+  }
+
+  setter(action) {
+    const actions = {
+      [cons.actions.settings.TOGGLE_MARKDOWN]: () => {
+        this.isMarkdown = !this.isMarkdown;
+        setSettings('isMarkdown', this.isMarkdown);
+        this.emit(cons.events.settings.MARKDOWN_TOGGLED, this.isMarkdown);
+      },
+    };
+
+    actions[action.type]?.();
+  }
 }
 
 const settings = new Settings();
+appDispatcher.register(settings.setter.bind(settings));
 
 export default settings;

src/index.scss

@@ -14,7 +14,10 @@
   --bg-primary-active: rgba(83, 110, 234, 70%);
   --bg-primary-border: rgba(83, 110, 234, 38%);
 
-  --bg-positive: #45B83B;
+  --bg-positive: rgb(69, 184, 59);
+  --bg-positive-hover: rgba(69, 184, 59, 8%);
+  --bg-positive-active: rgba(69, 184, 59, 15%);
+  --bg-positive-border: rgba(69, 184, 59, 40%);
   
   --bg-caution: rgb(255, 179, 0);
   --bg-caution-hover: rgba(255, 179, 0, 8%);
@@ -37,6 +40,10 @@
   --tc-primary-normal: rgba(255, 255, 255, 68%);
   --tc-primary-low: rgba(255, 255, 255, 40%);
   
+  --tc-positive-high: var(--bg-positive);
+  --tc-positive-normal: rgb(69, 184, 59, 80%);
+  --tc-positive-low: rgb(69, 184, 59, 60%);
+
   --tc-caution-high: var(--bg-caution);
   --tc-caution-normal: rgb(255, 179, 0, 80%);
   --tc-caution-low: rgb(255, 179, 0, 60%);
@@ -53,6 +60,7 @@
   /* system icons | --ic-[background type]-[priority]: value */
   --ic-surface-normal: #626262;
   --ic-primary-normal: #ffffff;
+  --ic-positive-normal: rgba(69, 184, 59, 80%);
   --ic-caution-normal: rgba(255, 179, 0, 80%);
   --ic-danger-normal: rgba(240, 71, 71, 0.7);
 
@@ -81,6 +89,9 @@
   --bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
   --bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
 
+  --bs-positive-border: inset 0 0 0 1px var(--bg-positive-border);
+  --bs-positive-outline: 0 0 0 2px var(--bg-positive-border);
+
   --bs-caution-border: inset 0 0 0 1px var(--bg-caution-border);
   --bs-caution-outline: 0 0 0 2px var(--bg-caution-border);
 
@@ -210,6 +221,7 @@
 
 html {
   height: 100%;
+  overflow: hidden;
 }
 
 body {

src/util/AsyncSearch.js

@@ -0,0 +1,128 @@
+import EventEmitter from 'events';
+
+class AsyncSearch extends EventEmitter {
+  constructor() {
+    super();
+
+    this._reset();
+
+    this.RESULT_SENT = 'RESULT_SENT';
+  }
+
+  _reset() {
+    this.dataList = null;
+    this.term = null;
+    this.searchKeys = null;
+    this.isContain = false;
+    this.isCaseSensitive = false;
+    this.ignoreWhitespace = true;
+    this.limit = null;
+    this.findingList = [];
+
+    this.searchUptoIndex = 0;
+    this.sessionStartTimestamp = 0;
+  }
+
+  _softReset() {
+    this.term = null;
+    this.findingList = [];
+    this.searchUptoIndex = 0;
+    this.sessionStartTimestamp = 0;
+  }
+
+  /**
+   * Setup the search.
+   * opts.keys are required when dataList items are object.
+   *
+   * @param {[string | object]} dataList - A list to search in
+   * @param {object} opts - Options
+   * @param {string | [string]} [opts.keys=null]
+   * @param {boolean} [opts.isContain=false] - Add finding to result if it contain search term
+   * @param {boolean} [opts.isCaseSensitive=false]
+   * @param {boolean} [opts.ignoreWhitespace=true]
+   * @param {number} [opts.limit=null] - Stop search after limit
+   */
+  setup(dataList, opts) {
+    this._reset();
+    this.dataList = dataList;
+    this.searchKeys = opts?.keys || null;
+    this.isContain = opts?.isContain || false;
+    this.isCaseSensitive = opts?.isCaseSensitive || false;
+    this.ignoreWhitespace = opts?.ignoreWhitespace || true;
+    this.limit = opts?.limit || null;
+  }
+
+  search(term) {
+    this._softReset();
+
+    this.term = (this.isCaseSensitive) ? term : term.toLocaleLowerCase();
+    if (this.ignoreWhitespace) this.term = this.term.replace(' ', '');
+    if (this.term === '') {
+      this._sendFindings();
+      return;
+    }
+
+    this._find(this.sessionStartTimestamp, 0);
+  }
+
+  _find(sessionTimestamp, lastFindingCount) {
+    if (sessionTimestamp !== this.sessionStartTimestamp) return;
+    this.sessionStartTimestamp = window.performance.now();
+
+    for (
+      let searchIndex = this.searchUptoIndex;
+      searchIndex < this.dataList.length;
+      searchIndex += 1
+    ) {
+      if (this._match(this.dataList[searchIndex])) {
+        this.findingList.push(this.dataList[searchIndex]);
+        if (typeof this.limit === 'number' && this.findingList.length >= this.limit) break;
+      }
+
+      const calcFinishTime = window.performance.now();
+      if (calcFinishTime - this.sessionStartTimestamp > 8) {
+        const thisFindingCount = this.findingList.length;
+        const thisSessionTimestamp = this.sessionStartTimestamp;
+        if (lastFindingCount !== thisFindingCount) this._sendFindings();
+
+        this.searchUptoIndex = searchIndex + 1;
+        setTimeout(() => this._find(thisSessionTimestamp, thisFindingCount));
+        return;
+      }
+    }
+
+    if (lastFindingCount !== this.findingList.length
+      || lastFindingCount === 0) this._sendFindings();
+    this._softReset();
+  }
+
+  _match(item) {
+    if (typeof item === 'string') {
+      return this._compare(item);
+    }
+    if (typeof item === 'object') {
+      if (Array.isArray(this.searchKeys)) {
+        return !!this.searchKeys.find((key) => this._compare(item[key]));
+      }
+      if (typeof this.searchKeys === 'string') {
+        return this._compare(item[this.searchKeys]);
+      }
+    }
+    return false;
+  }
+
+  _compare(item) {
+    if (typeof item !== 'string') return false;
+    let myItem = (this.isCaseSensitive) ? item : item.toLocaleLowerCase();
+    if (this.ignoreWhitespace) myItem = myItem.replace(' ', '');
+
+    if (this.isContain) return myItem.indexOf(this.term) !== -1;
+    return myItem.startsWith(this.term);
+  }
+
+  _sendFindings() {
+    this.emit(this.RESULT_SENT, this.findingList, this.term);
+  }
+}
+
+export default AsyncSearch;

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;

src/util/decryptE2ERoomKeys.js

@@ -0,0 +1,225 @@
+// https://github.com/matrix-org/matrix-react-sdk/blob/e78a1adb6f1af2ea425b0bae9034fb7344a4b2e8/src/utils/MegolmExportEncryption.js
+
+const subtleCrypto = window.crypto.subtle || window.crypto.webkitSubtle;
+
+/**
+ * Make an Error object which has a friendlyText property which is already
+ * translated and suitable for showing to the user.
+ *
+ * @param {string} msg   message for the exception
+ * @param {string} friendlyText
+ * @returns {Error}
+ */
+function friendlyError(msg, friendlyText) {
+  const e = new Error(msg);
+  e.friendlyText = friendlyText;
+  return e;
+}
+
+function cryptoFailMsg() {
+  return 'Your browser does not support the required cryptography extensions';
+}
+/**
+ * Derive the AES and HMAC-SHA-256 keys for the file
+ *
+ * @param {Unit8Array} salt  salt for pbkdf
+ * @param {Number} iterations number of pbkdf iterations
+ * @param {String} password  password
+ * @return {Promise<[CryptoKey, CryptoKey]>} promise for [aes key, hmac key]
+ */
+async function deriveKeys(salt, iterations, password) {
+  const start = new Date();
+
+  let key;
+  try {
+    key = await subtleCrypto.importKey(
+      'raw',
+      new TextEncoder().encode(password),
+      { name: 'PBKDF2' },
+      false,
+      ['deriveBits'],
+    );
+  } catch (e) {
+    throw friendlyError(`subtleCrypto.importKey failed: ${e}`, cryptoFailMsg());
+  }
+
+  let keybits;
+  try {
+    keybits = await subtleCrypto.deriveBits(
+      {
+        name: 'PBKDF2',
+        salt,
+        iterations,
+        hash: 'SHA-512',
+      },
+      key,
+      512,
+    );
+  } catch (e) {
+    throw friendlyError(`subtleCrypto.deriveBits failed: ${e}`, cryptoFailMsg());
+  }
+
+  const now = new Date();
+  console.log(`E2e import/export: deriveKeys took ${(now - start)}ms`);
+
+  const aesKey = keybits.slice(0, 32);
+  const hmacKey = keybits.slice(32);
+
+  const aesProm = subtleCrypto.importKey(
+    'raw',
+    aesKey,
+    { name: 'AES-CTR' },
+    false,
+    ['encrypt', 'decrypt'],
+  ).catch((e) => {
+    throw friendlyError(`subtleCrypto.importKey failed for AES key: ${e}`, cryptoFailMsg());
+  });
+
+  const hmacProm = subtleCrypto.importKey(
+    'raw',
+    hmacKey,
+    {
+      name: 'HMAC',
+      hash: { name: 'SHA-256' },
+    },
+    false,
+    ['sign', 'verify'],
+  ).catch((e) => {
+    throw friendlyError(`subtleCrypto.importKey failed for HMAC key: ${e}`, cryptoFailMsg());
+  });
+
+  // eslint-disable-next-line no-return-await
+  return await Promise.all([aesProm, hmacProm]);
+}
+
+/**
+ * Decode a base64 string to a typed array of uint8.
+ * @param {string} base64 The base64 to decode.
+ * @return {Uint8Array} The decoded data.
+ */
+function decodeBase64(base64) {
+  // window.atob returns a unicode string with codepoints in the range 0-255.
+  const latin1String = window.atob(base64);
+  // Encode the string as a Uint8Array
+  const uint8Array = new Uint8Array(latin1String.length);
+  for (let i = 0; i < latin1String.length; i += 1) {
+    uint8Array[i] = latin1String.charCodeAt(i);
+  }
+  return uint8Array;
+}
+
+const HEADER_LINE = '-----BEGIN MEGOLM SESSION DATA-----';
+const TRAILER_LINE = '-----END MEGOLM SESSION DATA-----';
+
+/**
+ * Unbase64 an ascii-armoured megolm key file
+ *
+ * Strips the header and trailer lines, and unbase64s the content
+ *
+ * @param {ArrayBuffer} data  input file
+ * @return {Uint8Array} unbase64ed content
+ */
+function unpackMegolmKeyFile(data) {
+  // parse the file as a great big String. This should be safe, because there
+  // should be no non-ASCII characters, and it means that we can do string
+  // comparisons to find the header and footer, and feed it into window.atob.
+  const fileStr = new TextDecoder().decode(new Uint8Array(data));
+
+  // look for the start line
+  let lineStart = 0;
+  while (1) {
+    const lineEnd = fileStr.indexOf('\n', lineStart);
+    if (lineEnd < 0) {
+      throw new Error('Header line not found');
+    }
+    const line = fileStr.slice(lineStart, lineEnd).trim();
+
+    // start the next line after the newline
+    lineStart = lineEnd + 1;
+
+    if (line === HEADER_LINE) {
+      break;
+    }
+  }
+
+  const dataStart = lineStart;
+
+  // look for the end line
+  while (1) {
+    const lineEnd = fileStr.indexOf('\n', lineStart);
+    const line = fileStr.slice(lineStart, lineEnd < 0 ? undefined : lineEnd).trim();
+    if (line === TRAILER_LINE) {
+      break;
+    }
+
+    if (lineEnd < 0) {
+      throw new Error('Trailer line not found');
+    }
+
+    // start the next line after the newline
+    lineStart = lineEnd + 1;
+  }
+
+  const dataEnd = lineStart;
+  return decodeBase64(fileStr.slice(dataStart, dataEnd));
+}
+
+export default async function decryptMegolmKeyFile(data, password) {
+  const body = unpackMegolmKeyFile(data);
+
+  // check we have a version byte
+  if (body.length < 1) {
+    throw friendlyError('Invalid file: too short', 'Not a valid keyfile');
+  }
+
+  const version = body[0];
+  if (version !== 1) {
+    throw friendlyError('Unsupported version', 'Not a valid keyfile');
+  }
+
+  const ciphertextLength = body.length - (1 + 16 + 16 + 4 + 32);
+  if (ciphertextLength < 0) {
+    throw friendlyError('Invalid file: too short', 'Not a valid keyfile');
+  }
+
+  const salt = body.subarray(1, 1 + 16);
+  const iv = body.subarray(17, 17 + 16);
+  const iterations = body[33] << 24 | body[34] << 16 | body[35] << 8 | body[36];
+  const ciphertext = body.subarray(37, 37 + ciphertextLength);
+  const hmac = body.subarray(-32);
+
+  const [aesKey, hmacKey] = await deriveKeys(salt, iterations, password);
+  const toVerify = body.subarray(0, -32);
+
+  let isValid;
+  try {
+    isValid = await subtleCrypto.verify(
+      { name: 'HMAC' },
+      hmacKey,
+      hmac,
+      toVerify,
+    );
+  } catch (e) {
+    throw friendlyError(`subtleCrypto.verify failed: ${e}`, cryptoFailMsg());
+  }
+  if (!isValid) {
+    throw friendlyError('hmac mismatch', 'Authentication check failed: Incorrect password?');
+  }
+
+  let plaintext;
+  try {
+    plaintext = await subtleCrypto.decrypt(
+      {
+        name: 'AES-CTR',
+        counter: iv,
+        length: 64,
+      },
+      aesKey,
+      ciphertext,
+    );
+  } catch (e) {
+    throw friendlyError(`subtleCrypto.decrypt failed: ${e}`, cryptoFailMsg());
+  }
+
+  return new TextDecoder().decode(new Uint8Array(plaintext));
+}

src/util/matrixUtil.js

@@ -25,6 +25,10 @@ function getUsername(userId) {
   return username;
 }
 
+function getUsernameOfRoomMember(roomMember) {
+  return roomMember.name || roomMember.userId;
+}
+
 async function isRoomAliasAvailable(alias) {
   try {
     const myUserId = initMatrix.matrixClient.getUserId();
@@ -44,6 +48,7 @@ async function isRoomAliasAvailable(alias) {
 function doesRoomHaveUnread(room) {
   const userId = initMatrix.matrixClient.getUserId();
   const readUpToId = room.getEventReadUpTo(userId);
+  const supportEvents = ['m.room.message', 'm.room.encrypted', 'm.sticker'];
 
   if (room.timeline.length
     && room.timeline[room.timeline.length - 1].sender
@@ -56,12 +61,15 @@ function doesRoomHaveUnread(room) {
     const event = room.timeline[i];
 
     if (event.getId() === readUpToId) return false;
-    return true;
+
+    if (supportEvents.includes(event.getType())) {
+      return true;
+    }
   }
   return true;
 }
 
 export {
-  getBaseUrl, getUsername,
+  getBaseUrl, getUsername, getUsernameOfRoomMember,
   isRoomAliasAvailable, doesRoomHaveUnread,
 };

webpack.common.js

@@ -1,5 +1,6 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
+const webpack = require('webpack');
 
 module.exports = {
   entry: {
@@ -14,6 +15,7 @@ module.exports = {
       'fs': require.resolve('browserify-fs'),
       'stream': require.resolve('stream-browserify'),
       'util': require.resolve('util/'),
+      'assert': require.resolve('assert/'),
     }
   },
   node: {
@@ -55,15 +57,18 @@ module.exports = {
       devMode: 'light',
       favicons: {
         appName: 'Cinny',
-        appDescription: 'A matrix client',
+        appDescription: 'Yet another matrix client',
-        developerName: 'ajbura, 1997kB',
+        developerName: 'Ajay Bura',
-        developerURL: null,
+        developerURL: 'https://github.com/ajbura',
         icons: {
           coast: false,
           yandex: false,
           appleStartup: false,
         }
       }
-    })
+    }),
+    new webpack.DefinePlugin({
+      'process.env': JSON.stringify(process.env),
+    }),
   ],
 };

webpack.prod.js

@@ -4,6 +4,7 @@ const { merge } = require('webpack-merge');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyPlugin = require("copy-webpack-plugin");
 
 module.exports = merge(common, {
   mode: 'production',
@@ -35,5 +36,11 @@ module.exports = merge(common, {
     new MiniCssExtractPlugin({
       filename: '[name].[contenthash].bundle.css',
     }),
+    new CopyPlugin({
+      patterns: [
+        { from: 'olm.wasm' },
+        { from: '_redirects' },
+      ],
+    }),
   ],
 });