v1.4.0: SSO login and profile viewer

Signed-off-by: Ajay Bura <ajbura@gmail.com>

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

@@ -1,32 +0,0 @@
-name: 'Build PR'
-
-on:
-  pull_request:
-    types: ['opened', 'synchronize']
-
-jobs:
-    build:
-        runs-on: ubuntu-latest
-        env:
-          PR_NUMBER: ${{github.event.number}}
-        steps:
-            - uses: actions/checkout@v2
-            - name: Build
-              run: npm install && npm run build
-            - name: Upload Artifact
-              uses: actions/upload-artifact@v2
-              with:
-                  name: previewbuild
-                  path: dist
-                  retention-days: 1
-            - uses: actions/github-script@v3.1.0
-              with:
-                script: |
-                    var fs = require('fs');
-                    fs.writeFileSync('${{github.workspace}}/pr.json', JSON.stringify(context.payload.pull_request));
-            - name: Upload PR Info
-              uses: actions/upload-artifact@v2
-              with:
-                  name: pr.json
-                  path: pr.json
-                  retention-days: 1

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

@@ -1,78 +0,0 @@
-name: Upload Preview Build to Netlify
-on:
-    workflow_run:
-        workflows: ["Build PR"]
-        types:
-            - completed
-jobs:
-    build:
-        runs-on: ubuntu-latest
-        if: >
-            ${{ github.event.workflow_run.conclusion == 'success' }}
-        steps:
-            # There's a 'download artifact' action but it hasn't been updated for the
-            # workflow_run action (https://github.com/actions/download-artifact/issues/60)
-            # so instead we get this mess:
-            - name: 'Download artifact'
-              uses: actions/github-script@v3.1.0
-              with:
-                script: |
-                  var artifacts = await github.actions.listWorkflowRunArtifacts({
-                     owner: context.repo.owner,
-                     repo: context.repo.repo,
-                     run_id: ${{github.event.workflow_run.id }},
-                  });
-                  var matchArtifact = artifacts.data.artifacts.filter((artifact) => {
-                    return artifact.name == "previewbuild"
-                  })[0];
-                  var download = await github.actions.downloadArtifact({
-                     owner: context.repo.owner,
-                     repo: context.repo.repo,
-                     artifact_id: matchArtifact.id,
-                     archive_format: 'zip',
-                  });
-                  var fs = require('fs');
-                  fs.writeFileSync('${{github.workspace}}/previewbuild.zip', Buffer.from(download.data));
-                  var prInfoArtifact = artifacts.data.artifacts.filter((artifact) => {
-                    return artifact.name == "pr.json"
-                  })[0];
-                  var download = await github.actions.downloadArtifact({
-                     owner: context.repo.owner,
-                     repo: context.repo.repo,
-                     artifact_id: prInfoArtifact.id,
-                     archive_format: 'zip',
-                  });
-                  var fs = require('fs');
-                  fs.writeFileSync('${{github.workspace}}/pr.json.zip', Buffer.from(download.data));
-            - name: Extract Artifacts
-              run: unzip -d dist previewbuild.zip && rm previewbuild.zip && unzip pr.json.zip && rm pr.json.zip
-            - name: 'Read PR Info'
-              id: readctx
-              uses: actions/github-script@v3.1.0
-              with:
-                script: |
-                    var fs = require('fs');
-                    var pr = JSON.parse(fs.readFileSync('${{github.workspace}}/pr.json'));
-                    console.log(`::set-output name=prnumber::${pr.number}`);
-            - name: Deploy to Netlify
-              id: netlify
-              uses: nwtgck/actions-netlify@v1.2
-              with:
-                  publish-dir: dist
-                  deploy-message: "Deploy from GitHub Actions"
-                  # These don't work because we're in workflow_run
-                  enable-pull-request-comment: false
-                  enable-commit-comment: false
-              env:
-                  NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-                  NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE3_ID }}
-              timeout-minutes: 1
-            - name: Edit PR Description
-              uses: velas/pr-description@v1.0.1
-              env:
-                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-              with:
-                  pull-request-number: ${{ steps.readctx.outputs.prnumber }}
-                  description-message: |
-                      Preview: ${{ steps.netlify.outputs.deploy-url }}
-                      ⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

.github/workflows/netlify-dev.yaml

@@ -12,7 +12,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v1
-      - uses: jsmrcaga/action-netlify-deploy@9cc40dcd499dd1511b3cc99912444f8970411cc6
+      - uses: jsmrcaga/action-netlify-deploy@master
         with:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE2_ID }}

.github/workflows/netlify-prod.yaml

@@ -11,7 +11,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v1
-      - uses: jsmrcaga/action-netlify-deploy@9cc40dcd499dd1511b3cc99912444f8970411cc6
+      - uses: jsmrcaga/action-netlify-deploy@master
         with:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

.github/workflows/pull-request.yml

@@ -0,0 +1,30 @@
+name: 'Netlify Preview Deploy'
+
+on:
+  pull_request_target:
+    types: ['opened', 'synchronize']
+
+jobs:
+  deploy:
+    name: "Deploy to Netlify"
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v1      
+      - uses: jsmrcaga/action-netlify-deploy@master
+        with:          
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE3_ID }}
+          BUILD_DIRECTORY: "dist"
+      - name: Post on PR
+        uses: nwtgck/actions-netlify@v1.1
+        with:
+          publish-dir: "dist"
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          deploy-message: "Deploy from GitHub Actions"
+          enable-pull-request-comment: true
+          enable-commit-comment: false
+          overwrites-pull-request-comment: true
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE3_ID }}

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://cinny.in/#sponsor)
+> - [Donate to us](https://liberapay.com/ajbura/donate)
 
 <!-- omit in toc -->
 ## Table of Contents

README.md

@@ -51,13 +51,9 @@ navigating to `http://localhost:8080`.
 
 Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by `docker pull ajbura/cinny`.
 
-### Configuring default Homeserver
-
-To set default Homeserver on login and register page, place a customized [`config.json`](config.json) in webroot of your choice.
-
 ## License
 
-Copyright (c) 2021 Ajay Bura (ajbura) and contributors
+Copyright (c) 2021 Ajay Bura (ajbura) and other contributors
 
 Code licensed under the MIT License: <http://opensource.org/licenses/MIT>
 

config.json

@@ -1,12 +0,0 @@
-{
-  "defaultHomeserver": 5,
-  "homeserverList": [
-    "boba.best",
-    "converser.eu",
-    "envs.net",
-    "halogen.city",
-    "kde.org",
-    "matrix.org",
-    "mozilla.modular.im"
-  ]
-}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "1.6.0",
+  "version": "1.4.0",
   "description": "Yet another matrix client",
   "main": "index.js",
   "engines": {
@@ -15,18 +15,16 @@
   "author": "Ajay Bura",
   "license": "MIT",
   "dependencies": {
-    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
+    "@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",
-    "file-saver": "^2.0.5",
     "flux": "^4.0.1",
-    "formik": "^2.2.9",
     "html-react-parser": "^1.2.7",
-    "linkifyjs": "^2.1.9",
-    "matrix-js-sdk": "^15.2.1",
+    "linkifyjs": "^3.0.0-beta.3",
+    "matrix-js-sdk": "^12.4.1",
     "micromark": "^3.0.3",
     "micromark-extension-gfm": "^1.0.0",
     "prop-types": "^15.7.2",
@@ -34,8 +32,11 @@
     "react-autosize-textarea": "^7.1.0",
     "react-dom": "^17.0.2",
     "react-google-recaptcha": "^2.1.0",
+    "react-markdown": "^6.0.1",
     "react-modal": "^3.13.1",
-    "sanitize-html": "^2.5.3",
+    "react-router-dom": "^5.2.0",
+    "react-syntax-highlighter": "^15.4.3",
+    "remark-gfm": "^1.0.0",
     "tippy.js": "^6.3.1",
     "twemoji": "^13.1.0"
   },
@@ -70,9 +71,9 @@
     "stream-browserify": "^3.0.0",
     "style-loader": "^2.0.0",
     "util": "^0.12.4",
-    "webpack": "^5.62.1",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.4.0",
+    "webpack": "^5.28.0",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "^3.11.2",
     "webpack-merge": "^5.7.3"
   }
 }

public/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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">

src/app/atoms/avatar/Avatar.jsx

@@ -2,8 +2,6 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './Avatar.scss';
 
-import { twemojify } from '../../../util/twemojify';
-
 import Text from '../text/Text';
 import RawIcon from '../system-icons/RawIcon';
 
@@ -31,11 +29,7 @@ function Avatar({
               {
                 iconSrc !== null
                   ? <RawIcon size={size} src={iconSrc} />
-                  : text !== null && (
-                    <Text variant={textSize}>
-                      {twemojify([...text][0])}
-                    </Text>
-                  )
+                  : text !== null && <Text variant={textSize}>{text}</Text>
               }
             </span>
           )

src/app/atoms/avatar/Avatar.scss

@@ -24,7 +24,7 @@
     height: var(--av-extra-small);
   }
 
-  > img {
+  img {
     width: 100%;
     height: 100%;
     object-fit: cover;

src/app/atoms/button/Button.jsx

@@ -6,14 +6,13 @@ import Text from '../text/Text';
 import RawIcon from '../system-icons/RawIcon';
 import { blurOnBubbling } from './script';
 
-const Button = React.forwardRef(({
+function Button({
   id, className, variant, iconSrc,
   type, onClick, children, disabled,
-}, ref) => {
+}) {
   const iconClass = (iconSrc === null) ? '' : `btn-${variant}--icon`;
   return (
     <button
-      ref={ref}
       id={id === '' ? undefined : id}
       className={`${className ? `${className} ` : ''}btn-${variant} ${iconClass} noselect`}
       onMouseUp={(e) => blurOnBubbling(e, `.btn-${variant}`)}
@@ -27,7 +26,7 @@ const Button = React.forwardRef(({
       {typeof children !== 'string' && children }
     </button>
   );
-});
+}
 
 Button.defaultProps = {
   id: '',

src/app/atoms/button/IconButton.jsx

@@ -9,7 +9,7 @@ import Text from '../text/Text';
 
 const IconButton = React.forwardRef(({
   variant, size, type,
-  tooltip, tooltipPlacement, src, onClick, tabIndex,
+  tooltip, tooltipPlacement, src, onClick,
 }, ref) => {
   const btn = (
     <button
@@ -19,7 +19,6 @@ const IconButton = React.forwardRef(({
       onClick={onClick}
       // eslint-disable-next-line react/button-has-type
       type={type}
-      tabIndex={tabIndex}
     >
       <RawIcon size={size} src={src} />
     </button>
@@ -42,18 +41,16 @@ IconButton.defaultProps = {
   tooltip: null,
   tooltipPlacement: 'top',
   onClick: null,
-  tabIndex: 0,
 };
 
 IconButton.propTypes = {
-  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
+  variant: PropTypes.oneOf(['surface', 'positive', 'caution', 'danger']),
   size: PropTypes.oneOf(['normal', 'small', 'extra-small']),
   type: PropTypes.oneOf(['button', 'submit', 'reset']),
   tooltip: PropTypes.string,
   tooltipPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
   src: PropTypes.string.isRequired,
   onClick: PropTypes.func,
-  tabIndex: PropTypes.number,
 };
 
 export default IconButton;

src/app/atoms/button/IconButton.scss

@@ -29,13 +29,6 @@
   @include focus(var(--bg-surface-hover));
   @include state.active(var(--bg-surface-active));
 }
-.ic-btn-primary {
-  @include color(var(--ic-primary-normal));
-  @include state.hover(var(--bg-primary-hover));
-  @include focus(var(--bg-primary-hover));
-  @include state.active(var(--bg-primary-active));
-  background-color: var(--bg-primary);
-}
 .ic-btn-positive {
   @include color(var(--ic-positive-normal));
   @include state.hover(var(--bg-positive-hover));

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

@@ -67,7 +67,7 @@ function MenuHeader({ children }) {
 }
 
 MenuHeader.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.string.isRequired,
 };
 
 function MenuItem({

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

@@ -44,7 +44,7 @@
 .context-menu__item {
   button[class^="btn"] {
     width: 100%;
-    justify-content: flex-start;
+    justify-content: start;
     border-radius: 0;
     box-shadow: none;
     white-space: nowrap;

src/app/atoms/divider/Divider.jsx

@@ -4,25 +4,26 @@ import './Divider.scss';
 
 import Text from '../text/Text';
 
-function Divider({ text, variant, align }) {
-  const dividerClass = ` divider--${variant} divider--${align}`;
+function Divider({ text, variant }) {
+  const dividerClass = ` divider--${variant}`;
   return (
     <div className={`divider${dividerClass}`}>
-      {text !== null && <Text className="divider__text" variant="b3">{text}</Text>}
+      {text !== false && <Text className="divider__text" variant="b3">{text}</Text>}
     </div>
   );
 }
 
 Divider.defaultProps = {
-  text: null,
+  text: false,
   variant: 'surface',
-  align: 'center',
 };
 
 Divider.propTypes = {
-  text: PropTypes.string,
-  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
-  align: PropTypes.oneOf(['left', 'center', 'right']),
+  text: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.bool,
+  ]),
+  variant: PropTypes.oneOf(['surface', 'primary', 'caution', 'danger']),
 };
 
 export default Divider;

src/app/atoms/divider/Divider.scss

@@ -1,69 +1,68 @@
-.divider-line {
-  content: '';
-  display: inline-block;
-  flex: 1;
-  border-bottom: 1px solid var(--local-divider-color);
-  opacity: var(--local-divider-opacity);
-}
-
 .divider {
+  --local-divider-color: var(--bg-surface-border);
+
+  margin: var(--sp-extra-tight) var(--sp-normal);
+  margin-right: var(--sp-extra-tight);
   display: flex;
   align-items: center;
+  position: relative;
 
-  &--center::before,
-  &--right::before {
-    @extend .divider-line;
-  }
-  &--center::after,
-  &--left::after {
-    @extend .divider-line;
+  &::before {
+    content: "";
+    display: inline-block;
+    flex: 1;
+    margin-left: calc(var(--av-small) + var(--sp-tight));
+    border-bottom: 1px solid var(--local-divider-color);
+    opacity: 0.18;
+
+    [dir=rtl] & {
+      margin: {
+        left: 0;
+        right: calc(var(--av-small) + var(--sp-tight));
+      }
+    }
   }
 
   &__text {
-    padding: 2px var(--sp-extra-tight);
-    border-radius: calc(var(--bo-radius) / 2);
-    font-weight: 500;
+    margin-left: var(--sp-normal);
+  }
+
+  [dir=rtl] & {
+    margin: {
+      left: var(--sp-extra-tight);
+      right: var(--sp-normal);
+    }
+
+    &__text {
+      margin: {
+        left: 0;
+        right: var(--sp-normal);
+      }
+    }
   }
 }
 
 .divider--surface {
-  --local-divider-color: var(--bg-divider);
-  --local-divider-opacity: 1;
-
+  --local-divider-color: var(--tc-surface-low);
   .divider__text {
     color: var(--tc-surface-low);
-    border: 1px solid var(--bg-divider);
   }
 }
 .divider--primary {
   --local-divider-color: var(--bg-primary);
-  --local-divider-opacity: .8;
   .divider__text {
-    color: var(--tc-primary-high);
-    background-color: var(--bg-primary);
-  }
-}
-.divider--positive {
-  --local-divider-color: var(--bg-positive);
-  --local-divider-opacity: .8;
-  .divider__text {
-    color: var(--bg-surface);
-    background-color: var(--bg-positive);
+    color: var(--bg-primary);
   }
 }
 .divider--danger {
   --local-divider-color: var(--bg-danger);
-  --local-divider-opacity: .8;
   .divider__text {
-    color: var(--bg-surface);
-    background-color: var(--bg-danger);
+    color: var(--bg-danger);
   }
 }
 .divider--caution {
   --local-divider-color: var(--bg-caution);
-  --local-divider-opacity: .8;
   .divider__text {
-    color: var(--bg-surface);
-    background-color: var(--bg-caution);
+    color: var(--bg-caution);
   }
-}
+}

src/app/atoms/input/Input.jsx

@@ -5,7 +5,7 @@ import './Input.scss';
 import TextareaAutosize from 'react-autosize-textarea';
 
 function Input({
-  id, label, name, value, placeholder,
+  id, label, value, placeholder,
   required, type, onChange, forwardRef,
   resizable, minHeight, onResize, state,
   onKeyDown,
@@ -17,7 +17,6 @@ function Input({
         ? (
           <TextareaAutosize
             style={{ minHeight: `${minHeight}px` }}
-            name={name}
             id={id}
             className={`input input--resizable${state !== 'normal' ? ` input--${state}` : ''}`}
             ref={forwardRef}
@@ -34,7 +33,6 @@ function Input({
           <input
             ref={forwardRef}
             id={id}
-            name={name}
             className={`input ${state !== 'normal' ? ` input--${state}` : ''}`}
             type={type}
             placeholder={placeholder}
@@ -51,7 +49,6 @@ function Input({
 
 Input.defaultProps = {
   id: null,
-  name: '',
   label: '',
   value: '',
   placeholder: '',
@@ -68,7 +65,6 @@ Input.defaultProps = {
 
 Input.propTypes = {
   id: PropTypes.string,
-  name: PropTypes.string,
   label: PropTypes.string,
   value: PropTypes.string,
   placeholder: PropTypes.string,

src/app/atoms/input/Input.scss

@@ -2,7 +2,6 @@
   display: block;
   width: 100%;
   min-width: 0px;
-  margin: 0;
   padding: var(--sp-tight) var(--sp-normal);
   background-color: var(--bg-surface-low);
   color: var(--tc-surface-normal);

src/app/atoms/modal/RawModal.jsx

@@ -4,8 +4,6 @@ import './RawModal.scss';
 
 import Modal from 'react-modal';
 
-import navigation from '../../../client/state/navigation';
-
 Modal.setAppElement('#root');
 
 function RawModal({
@@ -25,9 +23,6 @@ function RawModal({
     default:
       modalClass += 'raw-modal__small ';
   }
-
-  navigation.setIsRawModalVisible(isOpen);
-
   const modalOverlayClass = (overlayClassName !== null) ? `${overlayClassName} ` : '';
   return (
     <Modal

src/app/atoms/scroll/_scrollbar.scss

@@ -32,8 +32,6 @@
 
 @mixin scroll {
   overflow: hidden;
-  // Below code stop scroll when x-scrollable content come in timeline
-  // overscroll-behavior: none;
   @extend .firefox-scrollbar;
   @extend .webkit-scrollbar;
   @extend .webkit-scrollbar-track;

src/app/atoms/text/Text.scss

@@ -4,26 +4,12 @@
   font-weight: $weight;
   letter-spacing: var(--ls-#{$type});
   line-height: var(--lh-#{$type});
-
-  & img.emoji,
-  & img[data-mx-emoticon] {
-    height: var(--fs-#{$type});
-  }
 }
 
 %text {
   margin: 0;
   padding: 0;
   color: var(--tc-surface-high);
-
-  & img.emoji,
-  & img[data-mx-emoticon] {
-    margin: 0 !important;
-    margin-right: 2px !important;
-    padding: 0 !important;
-    position: relative;
-    top: 2px;
-  }
 }
 
 .text-h1 {

src/app/atoms/tooltip/Tooltip.jsx

@@ -4,7 +4,7 @@ import './Tooltip.scss';
 import Tippy from '@tippyjs/react';
 
 function Tooltip({
-  className, placement, content, delay, children,
+  className, placement, content, children,
 }) {
   return (
     <Tippy
@@ -14,7 +14,7 @@ function Tooltip({
       arrow={false}
       maxWidth={250}
       placement={placement}
-      delay={delay}
+      delay={[0, 0]}
       duration={[100, 0]}
     >
       {children}
@@ -25,14 +25,12 @@ function Tooltip({
 Tooltip.defaultProps = {
   placement: 'top',
   className: '',
-  delay: [200, 0],
 };
 
 Tooltip.propTypes = {
   className: PropTypes.string,
   placement: PropTypes.string,
   content: PropTypes.node.isRequired,
-  delay: PropTypes.arrayOf(PropTypes.number),
   children: PropTypes.node.isRequired,
 };
 

src/app/hooks/useForceUpdate.js

@@ -1,10 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import { useState } from 'react';
-
-export function useForceUpdate() {
-  const [data, setData] = useState(null);
-
-  return [data, function forceUpdateHook() {
-    setData({});
-  }];
-}

src/app/hooks/useStore.js

@@ -1,22 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import { useEffect, useRef } from 'react';
-
-export function useStore(...args) {
-  const itemRef = useRef(null);
-
-  const getItem = () => itemRef.current;
-
-  const setItem = (event) => {
-    itemRef.current = event;
-    return itemRef.current;
-  };
-
-  useEffect(() => {
-    itemRef.current = null;
-    return () => {
-      itemRef.current = null;
-    };
-  }, args);
-
-  return { getItem, setItem };
-}

src/app/molecules/dialog/Dialog.jsx

@@ -2,8 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './Dialog.scss';
 
-import { twemojify } from '../../../util/twemojify';
-
 import Text from '../../atoms/text/Text';
 import Header, { TitleWrapper } from '../../atoms/header/Header';
 import ScrollView from '../../atoms/scroll/ScrollView';
@@ -24,7 +22,7 @@ function Dialog({
         <div className="dialog__content">
           <Header>
             <TitleWrapper>
-              <Text variant="h2">{twemojify(title)}</Text>
+              <Text variant="h2">{title}</Text>
             </TitleWrapper>
             {contentOptions}
           </Header>

src/app/molecules/following-members/FollowingMembers.jsx

@@ -1,59 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './FollowingMembers.scss';
-
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import { openReadReceipts } from '../../../client/action/navigation';
-
-import Text from '../../atoms/text/Text';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
-
-import { getUsersActionJsx } from '../../organisms/room/common';
-
-function FollowingMembers({ roomTimeline }) {
-  const [followingMembers, setFollowingMembers] = useState([]);
-  const { roomId } = roomTimeline;
-  const mx = initMatrix.matrixClient;
-  const { roomsInput } = initMatrix;
-  const myUserId = mx.getUserId();
-
-  const handleOnMessageSent = () => setFollowingMembers([]);
-
-  useEffect(() => {
-    const updateFollowingMembers = () => {
-      setFollowingMembers(roomTimeline.getLiveReaders());
-    };
-    updateFollowingMembers();
-    roomTimeline.on(cons.events.roomTimeline.LIVE_RECEIPT, updateFollowingMembers);
-    roomsInput.on(cons.events.roomsInput.MESSAGE_SENT, handleOnMessageSent);
-    return () => {
-      roomTimeline.removeListener(cons.events.roomTimeline.LIVE_RECEIPT, updateFollowingMembers);
-      roomsInput.removeListener(cons.events.roomsInput.MESSAGE_SENT, handleOnMessageSent);
-    };
-  }, [roomTimeline]);
-
-  const filteredM = followingMembers.filter((userId) => userId !== myUserId);
-
-  return filteredM.length !== 0 && (
-    <button
-      className="following-members"
-      onClick={() => openReadReceipts(roomId, followingMembers)}
-      type="button"
-    >
-      <RawIcon
-        size="extra-small"
-        src={TickMarkIC}
-      />
-      <Text variant="b2">{getUsersActionJsx(roomId, filteredM, 'following the conversation.')}</Text>
-    </button>
-  );
-}
-
-FollowingMembers.propTypes = {
-  roomTimeline: PropTypes.shape({}).isRequired,
-};
-
-export default FollowingMembers;

src/app/molecules/following-members/FollowingMembers.scss

@@ -1,32 +0,0 @@
-
-.following-members {
-  width: 100%;
-  padding: 0 var(--sp-normal);
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  cursor: pointer;
-  
-  & .ic-raw {
-    min-width: var(--ic-extra-small);
-    opacity: 0.4;
-    margin: 0 var(--sp-extra-tight);
-  }
-  & .text {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    color: var(--tc-surface-low);
-    b {
-      color: var(--tc-surface-normal);
-    }
-  }
-
-  &:hover,
-  &:focus {
-    background-color: var(--bg-surface-hover);
-  }
-  &:active {
-    background-color: var(--bg-surface-active);
-  }
-}

src/app/molecules/image-upload/ImageUpload.jsx

@@ -48,7 +48,7 @@ function ImageUpload({
       >
         <Avatar
           imageSrc={imageSrc}
-          text={text}
+          text={text.slice(0, 1)}
           bgColor={bgColor}
           size="large"
         />

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

@@ -58,10 +58,6 @@
   }
   &__error {
     margin-top: var(--sp-tight);
-    color: var(--tc-danger-high);
-  }
-  &__success {
-    margin-top: var(--sp-tight);
-    color: var(--tc-positive-high);
+    color: var(--bg-danger);
   }
 }

src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.jsx

@@ -1,100 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import './ExportE2ERoomKeys.scss';
-
-import FileSaver from 'file-saver';
-
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import { encryptMegolmKeyFile } from '../../../util/cryptE2ERoomKeys';
-
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import Input from '../../atoms/input/Input';
-import Spinner from '../../atoms/spinner/Spinner';
-
-import { useStore } from '../../hooks/useStore';
-
-function ExportE2ERoomKeys() {
-  const isMountStore = useStore();
-  const [status, setStatus] = useState({
-    isOngoing: false,
-    msg: null,
-    type: cons.status.PRE_FLIGHT,
-  });
-  const passwordRef = useRef(null);
-  const confirmPasswordRef = useRef(null);
-
-  const exportE2ERoomKeys = async () => {
-    const password = passwordRef.current.value;
-    if (password !== confirmPasswordRef.current.value) {
-      setStatus({
-        isOngoing: false,
-        msg: 'Password does not match.',
-        type: cons.status.ERROR,
-      });
-      return;
-    }
-    setStatus({
-      isOngoing: true,
-      msg: 'Getting keys...',
-      type: cons.status.IN_FLIGHT,
-    });
-    try {
-      const keys = await initMatrix.matrixClient.exportRoomKeys();
-      if (isMountStore.getItem()) {
-        setStatus({
-          isOngoing: true,
-          msg: 'Encrypting keys...',
-          type: cons.status.IN_FLIGHT,
-        });
-      }
-      const encKeys = await encryptMegolmKeyFile(JSON.stringify(keys), password);
-      const blob = new Blob([encKeys], {
-        type: 'text/plain;charset=us-ascii',
-      });
-      FileSaver.saveAs(blob, 'cinny-keys.txt');
-      if (isMountStore.getItem()) {
-        setStatus({
-          isOngoing: false,
-          msg: 'Successfully exported all keys.',
-          type: cons.status.SUCCESS,
-        });
-      }
-    } catch (e) {
-      if (isMountStore.getItem()) {
-        setStatus({
-          isOngoing: false,
-          msg: e.friendlyText || 'Failed to export keys. Please try again.',
-          type: cons.status.ERROR,
-        });
-      }
-    }
-  };
-
-  useEffect(() => {
-    isMountStore.setItem(true);
-    return () => {
-      isMountStore.setItem(false);
-    };
-  }, []);
-
-  return (
-    <div className="export-e2e-room-keys">
-      <form className="export-e2e-room-keys__form" onSubmit={(e) => { e.preventDefault(); exportE2ERoomKeys(); }}>
-        <Input forwardRef={passwordRef} type="password" placeholder="Password" required />
-        <Input forwardRef={confirmPasswordRef} type="password" placeholder="Confirm password" required />
-        <Button disabled={status.isOngoing} variant="primary" type="submit">Export</Button>
-      </form>
-      { status.type === cons.status.IN_FLIGHT && (
-        <div className="import-e2e-room-keys__process">
-          <Spinner size="small" />
-          <Text variant="b2">{status.msg}</Text>
-        </div>
-      )}
-      {status.type === cons.status.SUCCESS && <Text className="import-e2e-room-keys__success" variant="b2">{status.msg}</Text>}
-      {status.type === cons.status.ERROR && <Text className="import-e2e-room-keys__error" variant="b2">{status.msg}</Text>}
-    </div>
-  );
-}
-
-export default ExportE2ERoomKeys;

src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.scss

@@ -1,28 +0,0 @@
-.export-e2e-room-keys {
-  margin-top: var(--sp-extra-tight);
-  &__form {
-    display: flex;
-    & > .input-container {
-      flex: 1;
-      min-width: 0;
-    }
-    & > *:nth-child(2) {
-      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(--tc-danger-high);
-  }
-
-}

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

@@ -1,133 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import './ImportE2ERoomKeys.scss';
-
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import { decryptMegolmKeyFile } from '../../../util/cryptE2ERoomKeys';
-
-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';
-
-import { useStore } from '../../hooks/useStore';
-
-function ImportE2ERoomKeys() {
-  const isMountStore = useStore();
-  const [keyFile, setKeyFile] = useState(null);
-  const [status, setStatus] = useState({
-    isOngoing: false,
-    msg: null,
-    type: cons.status.PRE_FLIGHT,
-  });
-  const inputRef = useRef(null);
-  const passwordRef = useRef(null);
-
-  async function tryDecrypt(file, password) {
-    try {
-      const arrayBuffer = await file.arrayBuffer();
-      if (isMountStore.getItem()) {
-        setStatus({
-          isOngoing: true,
-          msg: 'Decrypting file...',
-          type: cons.status.IN_FLIGHT,
-        });
-      }
-
-      const keys = await decryptMegolmKeyFile(arrayBuffer, password);
-      if (isMountStore.getItem()) {
-        setStatus({
-          isOngoing: true,
-          msg: 'Decrypting messages...',
-          type: cons.status.IN_FLIGHT,
-        });
-      }
-      await initMatrix.matrixClient.importRoomKeys(JSON.parse(keys));
-      if (isMountStore.getItem()) {
-        setStatus({
-          isOngoing: false,
-          msg: 'Successfully imported all keys.',
-          type: cons.status.SUCCESS,
-        });
-        inputRef.current.value = null;
-        passwordRef.current.value = null;
-      }
-    } catch (e) {
-      if (isMountStore.getItem()) {
-        setStatus({
-          isOngoing: false,
-          msg: e.friendlyText || 'Failed to decrypt keys. Please try again.',
-          type: cons.status.ERROR,
-        });
-      }
-    }
-  }
-
-  const importE2ERoomKeys = () => {
-    const password = passwordRef.current.value;
-    if (password === '' || keyFile === null) return;
-    if (status.isOngoing) return;
-
-    tryDecrypt(keyFile, password);
-  };
-
-  const handleFileChange = (e) => {
-    const file = e.target.files.item(0);
-    passwordRef.current.value = '';
-    setKeyFile(file);
-    setStatus({
-      isOngoing: false,
-      msg: null,
-      type: cons.status.PRE_FLIGHT,
-    });
-  };
-  const removeImportKeysFile = () => {
-    if (status.isOngoing) return;
-    inputRef.current.value = null;
-    passwordRef.current.value = null;
-    setKeyFile(null);
-    setStatus({
-      isOngoing: false,
-      msg: null,
-      type: cons.status.PRE_FLIGHT,
-    });
-  };
-
-  useEffect(() => {
-    isMountStore.setItem(true);
-    return () => {
-      isMountStore.setItem(false);
-    };
-  }, []);
-
-  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={status.isOngoing} variant="primary" type="submit">Decrypt</Button>
-      </form>
-      { status.type === cons.status.IN_FLIGHT && (
-        <div className="import-e2e-room-keys__process">
-          <Spinner size="small" />
-          <Text variant="b2">{status.msg}</Text>
-        </div>
-      )}
-      {status.type === cons.status.SUCCESS && <Text className="import-e2e-room-keys__success" variant="b2">{status.msg}</Text>}
-      {status.type === cons.status.ERROR && <Text className="import-e2e-room-keys__error" variant="b2">{status.msg}</Text>}
-    </div>
-  );
-}
-
-export default ImportE2ERoomKeys;

src/app/molecules/media/Media.scss

@@ -11,10 +11,6 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
-  & a {
-    line-height: 0;
-  }
 }
 
 .file-container {

src/app/molecules/message/Message.jsx

@@ -1,37 +1,51 @@
-/* eslint-disable react/prop-types */
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import './Message.scss';
 
-import dateFormat from 'dateformat';
-import { twemojify } from '../../../util/twemojify';
-
-import initMatrix from '../../../client/initMatrix';
-import { getUsername, getUsernameOfRoomMember, parseReply } from '../../../util/matrixUtil';
-import colorMXID from '../../../util/colorMXID';
-import { getEventCords } from '../../../util/common';
-import { redactEvent, sendReaction } from '../../../client/action/roomTimeline';
-import {
-  openEmojiBoard, openProfileViewer, openReadReceipts, replyTo,
-} from '../../../client/action/navigation';
-import { sanitizeCustomHtml } from '../../../util/sanitize';
+import Linkify from 'linkifyjs/react';
+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 Button from '../../atoms/button/Button';
 import Tooltip from '../../atoms/tooltip/Tooltip';
 import Input from '../../atoms/input/Input';
-import Avatar from '../../atoms/avatar/Avatar';
-import IconButton from '../../atoms/button/IconButton';
-import ContextMenu, { MenuHeader, MenuItem, MenuBorder } from '../../atoms/context-menu/ContextMenu';
-import * as Media from '../media/Media';
 
 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';
+
+const components = {
+  code({
+    // eslint-disable-next-line react/prop-types
+    inline, className, children,
+  }) {
+    const match = /language-(\w+)/.exec(className || '');
+    return !inline && match ? (
+      <SyntaxHighlighter
+        style={coy}
+        language={match[1]}
+        PreTag="div"
+        showLineNumbers
+      >
+        {String(children).replace(/\n$/, '')}
+      </SyntaxHighlighter>
+    ) : (
+      <code className={className}>{String(children)}</code>
+    );
+  },
+};
+
+function linkifyContent(content) {
+  return <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify>;
+}
+function genMarkdown(content) {
+  return <ReactMarkdown remarkPlugins={[gfm]} components={components} linkTarget="_blank">{content}</ReactMarkdown>;
+}
 
 function PlaceholderMessage() {
   return (
@@ -41,7 +55,7 @@ function PlaceholderMessage() {
       </div>
       <div className="ph-msg__main-container">
         <div className="ph-msg__header" />
-        <div className="ph-msg__body">
+        <div className="ph-msg__content">
           <div />
           <div />
           <div />
@@ -52,46 +66,35 @@ function PlaceholderMessage() {
   );
 }
 
-const MessageAvatar = React.memo(({
-  roomId, mEvent, userId, username,
-}) => {
-  const avatarSrc = mEvent.sender.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop');
+function MessageHeader({
+  userId, name, color, time,
+}) {
   return (
-    <div className="message__avatar-container">
-      <button type="button" onClick={() => openProfileViewer(userId, roomId)}>
-        <Avatar imageSrc={avatarSrc} text={username} bgColor={colorMXID(userId)} size="small" />
-      </button>
+    <div className="message__header">
+      <div style={{ color }} className="message__profile">
+        <Text variant="b1">{name}</Text>
+        <Text variant="b1">{userId}</Text>
+      </div>
+      <div className="message__time">
+        <Text variant="b3">{time}</Text>
+      </div>
     </div>
   );
-});
-
-const MessageHeader = React.memo(({
-  userId, username, time,
-}) => (
-  <div className="message__header">
-    <div style={{ color: colorMXID(userId) }} className="message__profile">
-      <Text variant="b1">{twemojify(username)}</Text>
-      <Text variant="b1">{twemojify(userId)}</Text>
-    </div>
-    <div className="message__time">
-      <Text variant="b3">{time}</Text>
-    </div>
-  </div>
-));
+}
 MessageHeader.propTypes = {
   userId: PropTypes.string.isRequired,
-  username: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  color: PropTypes.string.isRequired,
   time: PropTypes.string.isRequired,
 };
 
-function MessageReply({ name, color, body }) {
+function MessageReply({ name, color, content }) {
   return (
     <div className="message__reply">
       <Text variant="b2">
         <RawIcon color={color} size="extra-small" src={ReplyArrowIC} />
-        <span style={{ color }}>{twemojify(name)}</span>
-        {' '}
-        {twemojify(body)}
+        <span style={{ color }}>{name}</span>
+        <>{` ${content}`}</>
       </Text>
     </div>
   );
@@ -100,122 +103,45 @@ function MessageReply({ name, color, body }) {
 MessageReply.propTypes = {
   name: PropTypes.string.isRequired,
   color: PropTypes.string.isRequired,
-  body: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
 };
 
-const MessageReplyWrapper = React.memo(({ roomTimeline, eventId }) => {
-  const [reply, setReply] = useState(null);
-  const isMountedRef = useRef(true);
-
-  useEffect(() => {
-    const mx = initMatrix.matrixClient;
-    const timelineSet = roomTimeline.getUnfilteredTimelineSet();
-    const loadReply = async () => {
-      const eTimeline = await mx.getEventTimeline(timelineSet, eventId);
-      await roomTimeline.decryptAllEventsOfTimeline(eTimeline);
-
-      const mEvent = eTimeline.getTimelineSet().findEventById(eventId);
-
-      const rawBody = mEvent.getContent().body;
-      const username = getUsernameOfRoomMember(mEvent.sender);
-
-      if (isMountedRef.current === false) return;
-      const fallbackBody = mEvent.isRedacted() ? '*** This message has been deleted ***' : '*** Unable to load reply content ***';
-      setReply({
-        to: username,
-        color: colorMXID(mEvent.getSender()),
-        body: parseReply(rawBody)?.body ?? rawBody ?? fallbackBody,
-        event: mEvent,
-      });
-    };
-    loadReply();
-
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, []);
-
-  const focusReply = () => {
-    if (reply?.event.isRedacted()) return;
-    roomTimeline.loadEventTimeline(eventId);
-  };
-
+function MessageContent({ content, isMarkdown, isEdited }) {
   return (
-    <div
-      className="message__reply-wrapper"
-      onClick={focusReply}
-      onKeyDown={focusReply}
-      role="button"
-      tabIndex="0"
-    >
-      {reply !== null && <MessageReply name={reply.to} color={reply.color} body={reply.body} />}
-    </div>
-  );
-});
-MessageReplyWrapper.propTypes = {
-  roomTimeline: PropTypes.shape({}).isRequired,
-  eventId: PropTypes.string.isRequired,
-};
-
-const MessageBody = React.memo(({
-  senderName,
-  body,
-  isCustomHTML,
-  isEdited,
-  msgType,
-}) => {
-  // if body is not string it is a React element.
-  if (typeof body !== 'string') return <div className="message__body">{body}</div>;
-
-  const content = isCustomHTML
-    ? twemojify(sanitizeCustomHtml(body), undefined, true, false)
-    : <p>{twemojify(body, undefined, true)}</p>;
-
-  return (
-    <div className="message__body">
+    <div className="message__content">
       <div className="text text-b1">
-        { msgType === 'm.emote' && (
-          <>
-            {'* '}
-            {twemojify(senderName)}
-            {' '}
-          </>
-        )}
-        { content }
+        { isMarkdown ? genMarkdown(content) : linkifyContent(content) }
       </div>
-      { isEdited && <Text className="message__body-edited" variant="b3">(edited)</Text>}
+      { isEdited && <Text className="message__content-edited" variant="b3">(edited)</Text>}
     </div>
   );
-});
-MessageBody.defaultProps = {
-  isCustomHTML: false,
+}
+MessageContent.defaultProps = {
+  isMarkdown: false,
   isEdited: false,
-  msgType: null,
 };
-MessageBody.propTypes = {
-  senderName: PropTypes.string.isRequired,
-  body: PropTypes.node.isRequired,
-  isCustomHTML: PropTypes.bool,
+MessageContent.propTypes = {
+  content: PropTypes.node.isRequired,
+  isMarkdown: PropTypes.bool,
   isEdited: PropTypes.bool,
-  msgType: PropTypes.string,
 };
 
-function MessageEdit({ body, onSave, onCancel }) {
+function MessageEdit({ content, onSave, onCancel }) {
   const editInputRef = useRef(null);
 
-  const handleKeyDown = (e) => {
+  function handleKeyDown(e) {
     if (e.keyCode === 13 && e.shiftKey === false) {
       e.preventDefault();
       onSave(editInputRef.current.value);
     }
-  };
+  }
 
   return (
     <form className="message__edit" onSubmit={(e) => { e.preventDefault(); onSave(editInputRef.current.value); }}>
       <Input
         forwardRef={editInputRef}
         onKeyDown={handleKeyDown}
-        value={body}
+        value={content}
         placeholder="Edit message"
         required
         resizable
@@ -228,43 +154,21 @@ function MessageEdit({ body, onSave, onCancel }) {
   );
 }
 MessageEdit.propTypes = {
-  body: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
   onSave: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
 };
 
-function getMyEmojiEvent(emojiKey, eventId, roomTimeline) {
-  const mx = initMatrix.matrixClient;
-  const rEvents = roomTimeline.reactionTimeline.get(eventId);
-  let rEvent = null;
-  rEvents?.find((rE) => {
-    if (rE.getRelation() === null) return false;
-    if (rE.getRelation().key === emojiKey && rE.getSender() === mx.getUserId()) {
-      rEvent = rE;
-      return true;
-    }
-    return false;
-  });
-  return rEvent;
-}
-
-function toggleEmoji(roomId, eventId, emojiKey, roomTimeline) {
-  const myAlreadyReactEvent = getMyEmojiEvent(emojiKey, eventId, roomTimeline);
-  if (myAlreadyReactEvent) {
-    const rId = myAlreadyReactEvent.getId();
-    if (rId.startsWith('~')) return;
-    redactEvent(roomId, rId);
-    return;
-  }
-  sendReaction(roomId, eventId, emojiKey);
-}
-
-function pickEmoji(e, roomId, eventId, roomTimeline) {
-  openEmojiBoard(getEventCords(e), (emoji) => {
-    toggleEmoji(roomId, eventId, emoji.unicode, roomTimeline);
-    e.target.click();
-  });
+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>;
@@ -280,390 +184,95 @@ function genReactionMsg(userIds, reaction) {
     <>
       {msg}
       {genLessContText(' reacted with')}
-      {twemojify(reaction, { className: 'react-emoji' })}
+      {parse(twemoji.parse(reaction))}
     </>
   );
 }
 
 function MessageReaction({
-  reaction, count, users, isActive, onClick,
+  reaction, users, isActive, onClick,
 }) {
   return (
     <Tooltip
       className="msg__reaction-tooltip"
-      content={<Text variant="b2">{users.length > 0 ? genReactionMsg(users, reaction) : 'Unable to load who has reacted'}</Text>}
+      content={<Text variant="b2">{genReactionMsg(users, reaction)}</Text>}
     >
       <button
         onClick={onClick}
         type="button"
         className={`msg__reaction${isActive ? ' msg__reaction--active' : ''}`}
       >
-        { twemojify(reaction, { className: 'react-emoji' }) }
-        <Text variant="b3" className="msg__reaction-count">{count}</Text>
+        { parse(twemoji.parse(reaction)) }
+        <Text variant="b3" className="msg__reaction-count">{users.length}</Text>
       </button>
     </Tooltip>
   );
 }
 MessageReaction.propTypes = {
   reaction: PropTypes.node.isRequired,
-  count: PropTypes.number.isRequired,
   users: PropTypes.arrayOf(PropTypes.string).isRequired,
   isActive: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
 };
 
-function MessageReactionGroup({ roomTimeline, mEvent }) {
-  const { roomId, reactionTimeline } = roomTimeline;
-  const eventId = mEvent.getId();
-  const mx = initMatrix.matrixClient;
-  const reactions = {};
-
-  const eventReactions = reactionTimeline.get(eventId);
-  const addReaction = (key, count, senderId, isActive) => {
-    let reaction = reactions[key];
-    if (reaction === undefined) {
-      reaction = {
-        count: 0,
-        users: [],
-        isActive: false,
-      };
-    }
-    if (count) {
-      reaction.count = count;
-    } else {
-      reaction.users.push(senderId);
-      reaction.count = reaction.users.length;
-      reaction.isActive = isActive;
-    }
-
-    reactions[key] = reaction;
-  };
-  if (eventReactions) {
-    eventReactions.forEach((rEvent) => {
-      if (rEvent.getRelation() === null) return;
-      const reaction = rEvent.getRelation();
-      const senderId = rEvent.getSender();
-      const isActive = senderId === mx.getUserId();
-
-      addReaction(reaction.key, undefined, senderId, isActive);
-    });
-  } else {
-    // Use aggregated reactions
-    const aggregatedReaction = mEvent.getServerAggregatedRelation('m.annotation')?.chunk;
-    if (!aggregatedReaction) return null;
-    aggregatedReaction.forEach((reaction) => {
-      if (reaction.type !== 'm.reaction') return;
-      addReaction(reaction.key, reaction.count, undefined, false);
-    });
-  }
-
-  return (
-    <div className="message__reactions text text-b3 noselect">
-      {
-        Object.keys(reactions).map((key) => (
-          <MessageReaction
-            key={key}
-            reaction={key}
-            count={reactions[key].count}
-            users={reactions[key].users}
-            isActive={reactions[key].isActive}
-            onClick={() => {
-              toggleEmoji(roomId, eventId, key, roomTimeline);
-            }}
-          />
-        ))
-      }
-      <IconButton
-        onClick={(e) => {
-          pickEmoji(e, roomId, eventId, roomTimeline);
-        }}
-        src={EmojiAddIC}
-        size="extra-small"
-        tooltip="Add reaction"
-      />
-    </div>
-  );
-}
-MessageReactionGroup.propTypes = {
-  roomTimeline: PropTypes.shape({}).isRequired,
-  mEvent: PropTypes.shape({}).isRequired,
-};
-
-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'
-  );
-}
-
-const MessageOptions = React.memo(({
-  roomTimeline, mEvent, edit, reply,
-}) => {
-  const { roomId, room } = roomTimeline;
-  const mx = initMatrix.matrixClient;
-  const eventId = mEvent.getId();
-  const senderId = mEvent.getSender();
-
-  const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel;
-  const canIRedact = room.currentState.hasSufficientPowerLevelFor('redact', myPowerlevel);
-
+function MessageOptions({ children }) {
   return (
     <div className="message__options">
-      <IconButton
-        onClick={(e) => pickEmoji(e, roomId, eventId, roomTimeline)}
-        src={EmojiAddIC}
-        size="extra-small"
-        tooltip="Add reaction"
-      />
-      <IconButton
-        onClick={() => reply()}
-        src={ReplyArrowIC}
-        size="extra-small"
-        tooltip="Reply"
-      />
-      {(senderId === mx.getUserId() && !isMedia(mEvent)) && (
-        <IconButton
-          onClick={() => edit(true)}
-          src={PencilIC}
-          size="extra-small"
-          tooltip="Edit"
-        />
-      )}
-      <ContextMenu
-        content={() => (
-          <>
-            <MenuHeader>Options</MenuHeader>
-            <MenuItem
-              iconSrc={TickMarkIC}
-              onClick={() => openReadReceipts(roomId, roomTimeline.getEventReaders(eventId))}
-            >
-              Read receipts
-            </MenuItem>
-            {(canIRedact || senderId === mx.getUserId()) && (
-              <>
-                <MenuBorder />
-                <MenuItem
-                  variant="danger"
-                  iconSrc={BinIC}
-                  onClick={() => {
-                    if (window.confirm('Are you sure you want to delete this event')) {
-                      redactEvent(roomId, eventId);
-                    }
-                  }}
-                >
-                  Delete
-                </MenuItem>
-              </>
-            )}
-          </>
-        )}
-        render={(toggleMenu) => (
-          <IconButton
-            onClick={toggleMenu}
-            src={VerticalMenuIC}
-            size="extra-small"
-            tooltip="Options"
-          />
-        )}
-      />
+      {children}
     </div>
   );
-});
+}
 MessageOptions.propTypes = {
-  roomTimeline: PropTypes.shape({}).isRequired,
-  mEvent: PropTypes.shape({}).isRequired,
-  edit: PropTypes.func.isRequired,
-  reply: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
 };
 
-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 getEditedBody(editedMEvent) {
-  const newContent = editedMEvent.getContent()['m.new_content'];
-  if (typeof newContent === 'undefined') return [null, false, null];
-
-  const isCustomHTML = newContent.format === 'org.matrix.custom.html';
-  const parsedContent = parseReply(newContent.body);
-  if (parsedContent === null) {
-    return [newContent.body, isCustomHTML, newContent.formatted_body ?? null];
-  }
-  return [parsedContent.body, isCustomHTML, newContent.formatted_body ?? null];
-}
-
 function Message({
-  mEvent, isBodyOnly, roomTimeline, focus, time,
+  avatar, header, reply, content, editContent, reactions, options,
 }) {
-  const [isEditing, setIsEditing] = useState(false);
-  const { roomId, editedTimeline, reactionTimeline } = roomTimeline;
-
-  const className = ['message', (isBodyOnly ? 'message--body-only' : 'message--full')];
-  if (focus) className.push('message--focus');
-  const content = mEvent.getContent();
-  const eventId = mEvent.getId();
-  const msgType = content?.msgtype;
-  const senderId = mEvent.getSender();
-  let { body } = content;
-  const username = getUsernameOfRoomMember(mEvent.sender);
-
-  const edit = useCallback(() => {
-    setIsEditing(true);
-  }, []);
-  const reply = useCallback(() => {
-    replyTo(senderId, eventId, body);
-  }, [body]);
-
-  if (body === undefined) return null;
-  if (msgType === 'm.emote') className.push('message--type-emote');
-
-  let isCustomHTML = content.format === 'org.matrix.custom.html';
-  const isEdited = editedTimeline.has(eventId);
-  const haveReactions = reactionTimeline.has(eventId) || !!mEvent.getServerAggregatedRelation('m.annotation');
-  const isReply = !!mEvent.replyEventId;
-  let customHTML = isCustomHTML ? content.formatted_body : null;
-
-  if (isEdited) {
-    const editedList = editedTimeline.get(eventId);
-    const editedMEvent = editedList[editedList.length - 1];
-    [body, isCustomHTML, customHTML] = getEditedBody(editedMEvent);
-    if (typeof body !== 'string') return null;
-  }
-
-  if (isReply) {
-    body = parseReply(body)?.body ?? body;
-  }
-
+  const msgClass = header === null ? ' message--content-only' : ' message--full';
   return (
-    <div className={className.join(' ')}>
-      {
-        isBodyOnly
-          ? <div className="message__avatar-container" />
-          : <MessageAvatar roomId={roomId} mEvent={mEvent} userId={senderId} username={username} />
-      }
+    <div className={`message${msgClass}`}>
+      <div className="message__avatar-container">
+        {avatar !== null && avatar}
+      </div>
       <div className="message__main-container">
-        {!isBodyOnly && (
-          <MessageHeader userId={senderId} username={username} time={time} />
-        )}
-        {isReply && (
-          <MessageReplyWrapper
-            roomTimeline={roomTimeline}
-            eventId={mEvent.replyEventId}
-          />
-        )}
-        {!isEditing && (
-          <MessageBody
-            senderName={username}
-            isCustomHTML={isCustomHTML}
-            body={isMedia(mEvent) ? genMediaContent(mEvent) : customHTML ?? body}
-            msgType={msgType}
-            isEdited={isEdited}
-          />
-        )}
-        {isEditing && (
-          <MessageEdit
-            body={body}
-            onSave={(newBody) => {
-              if (newBody !== body) {
-                initMatrix.roomsInput.sendEditedMessage(roomId, mEvent, newBody);
-              }
-              setIsEditing(false);
-            }}
-            onCancel={() => setIsEditing(false)}
-          />
-        )}
-        {haveReactions && (
-          <MessageReactionGroup roomTimeline={roomTimeline} mEvent={mEvent} />
-        )}
-        {!isEditing && (
-          <MessageOptions
-            roomTimeline={roomTimeline}
-            mEvent={mEvent}
-            edit={edit}
-            reply={reply}
-          />
-        )}
+        {header !== null && header}
+        {reply !== null && reply}
+        {content !== null && content}
+        {editContent !== null && editContent}
+        {reactions !== null && reactions}
+        {options !== null && options}
       </div>
     </div>
   );
 }
 Message.defaultProps = {
-  isBodyOnly: false,
-  focus: false,
+  avatar: null,
+  header: null,
+  reply: null,
+  content: null,
+  editContent: null,
+  reactions: null,
+  options: null,
 };
 Message.propTypes = {
-  mEvent: PropTypes.shape({}).isRequired,
-  isBodyOnly: PropTypes.bool,
-  roomTimeline: PropTypes.shape({}).isRequired,
-  focus: PropTypes.bool,
-  time: PropTypes.string.isRequired,
+  avatar: PropTypes.node,
+  header: PropTypes.node,
+  reply: PropTypes.node,
+  content: PropTypes.node,
+  editContent: PropTypes.node,
+  reactions: PropTypes.node,
+  options: PropTypes.node,
 };
 
-export { Message, MessageReply, PlaceholderMessage };
+export {
+  Message,
+  MessageHeader,
+  MessageReply,
+  MessageContent,
+  MessageEdit,
+  MessageReactionGroup,
+  MessageReaction,
+  MessageOptions,
+  PlaceholderMessage,
+};

src/app/molecules/message/Message.scss

@@ -23,16 +23,9 @@
   &__avatar-container {
     padding-top: 6px;
     margin-right: var(--sp-tight);
-    & .avatar-container {
-      transition: transform 200ms var(--fluid-push);
-      &:hover {
-        transform: translateY(-4px);
-      }
-    }
 
     & button {
       cursor: pointer;
-      display: flex;
     }
 
     [dir=rtl] & {
@@ -53,7 +46,7 @@
 
 .message {
   &--full + &--full,
-  &--body-only + &--full,
+  &--content-only + &--full,
   & + .timeline-change,
   .timeline-change + & {
     margin-top: var(--sp-normal);
@@ -61,10 +54,6 @@
   &__avatar-container {
     width: var(--av-small);
   }
-  &--focus {
-    box-shadow: inset 2px 0 0 var(--bg-caution);
-    background-color: var(--bg-caution-hover);
-  }
 }
 
 .ph-msg {
@@ -76,7 +65,7 @@
   }
 
   &__header,
-  &__body > div {
+  &__content > div {
     margin: var(--sp-ultra-tight) 0;
     margin-right: var(--sp-extra-tight);
     height: var(--fs-b1);
@@ -92,24 +81,23 @@
       }
     }
   }
-  &__body {
+  &__content {
     display: flex;
     flex-wrap: wrap;
   }
-  &__body > div:nth-child(1n) {
+  &__content > div:nth-child(1n) {
     max-width: 10%;
   }
-  &__body > div:nth-child(2n) {
+  &__content > div:nth-child(2n) {
     max-width: 50%;
   }
 }
 
 .message__reply,
-.message__body,
-.message__body__wrapper,
+.message__content,
 .message__edit,
 .message__reactions {
-  max-width: calc(100% - 88px);
+  max-width: 640px;
   min-width: 0;
 }
 
@@ -153,19 +141,6 @@
   }
 }
 .message__reply {
-  &-wrapper {
-    min-height: 20px;
-    cursor: pointer;
-    &:empty {
-      border-radius: calc(var(--bo-radius) / 2);
-      background-color: var(--bg-surface-hover);
-      max-width: 200px;
-      cursor: auto;
-    }
-    &:hover .text {
-      color: var(--tc-surface-high);
-    }
-  }
   .text {
     color: var(--tc-surface-low);
     white-space: nowrap;
@@ -177,57 +152,15 @@
     height: 14px;
   }
 }
-.message__body {
+.message__content {
   word-break: break-word;
-
+  
   & > .text > * {
     white-space: pre-wrap;
   }
 
   & a {
-    word-break: break-word;
-  }
-  & span[data-mx-pill] {
-    background-color: hsla(0, 0%, 64%, 0.15);
-    padding: 0 2px;
-    border-radius: 4px;
-    cursor: pointer;
-    font-weight: 500;
-    &:hover {
-      background-color: hsla(0, 0%, 64%, 0.3);
-      color: var(--tc-surface-high);
-    }
-
-    &[data-mx-ping] {
-      background-color: var(--bg-ping);
-      &:hover {
-        background-color: var(--bg-ping-hover);
-      }
-    }
-  }
-
-  & span[data-mx-spoiler] {
-    border-radius: 4px;
-    background-color: rgba(124, 124, 124, 0.5);
-    color:transparent;
-    cursor: pointer;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    & > * {
-      opacity: 0;
-    }
-  }
-  .data-mx-spoiler--visible {
-    background-color: var(--bg-surface-active) !important;
-    color: inherit !important;
-    user-select: initial !important;
-    & > * {
-      opacity: inherit !important;
-    }
+    word-break: break-all;
   }
   &-edited {
     color: var(--tc-surface-low);
@@ -267,7 +200,7 @@
   border-radius: 4px;
   cursor: pointer;
 
-  & .react-emoji {
+  & .emoji {
     width: 14px;
     height: 14px;
     margin: 2px;
@@ -276,7 +209,7 @@
     margin: 0 var(--sp-ultra-tight);
     color: var(--tc-surface-normal)
   }
-  &-tooltip .react-emoji  {
+  &-tooltip .emoji {
     width: 14px;
     height: 14px;
     margin: 0 var(--sp-ultra-tight);
@@ -316,7 +249,7 @@
   position: absolute;
   top: 0;
   right: 60px;
-  z-index: 99;
+  z-index: 999;
   transform: translateY(-50%);
 
   border-radius: var(--bo-radius);
@@ -329,29 +262,39 @@
     right: unset;
   }
 }
+@media (min-width: 1620px) {
+  .message__options {
+    right: unset;
+    left: 770px;
+    [dir=rtl] {
+      left: unset;
+      right: 770px
+    }
+  }
+}
 
 // markdown formating
-.message__body {
+.message__content {
   & h1,
   & h2 {
     color: var(--tc-surface-high);
-    margin: var(--sp-loose) 0 var(--sp-normal);
+    margin: var(--sp-extra-loose) 0 var(--sp-normal);
     line-height: var(--lh-h1);
   }
   & h3,
   & h4 {
     color: var(--tc-surface-high);
-    margin: var(--sp-normal) 0 var(--sp-tight);
+    margin: var(--sp-loose) 0 var(--sp-tight);
     line-height: var(--lh-h2);
   }
   & h5,
   & h6 {
     color: var(--tc-surface-high);
-    margin: var(--sp-tight) 0 var(--sp-extra-tight);
+    margin: var(--sp-normal) 0 var(--sp-extra-tight);
     line-height: var(--lh-s1);
   }
   & hr {
-    border-color: var(--bg-divider);
+    border-color: var(--bg-surface-border);
   }
 
   .text img {
@@ -393,20 +336,10 @@
     @include scrollbar.scroll__h;
     @include scrollbar.scroll--auto-hide;
   }
-  & pre {
-    display: inline-block;
-    max-width: 100%;
-    @include scrollbar.scroll;
-    @include scrollbar.scroll__h;
-    @include scrollbar.scroll--auto-hide;
-    & code {
-      color: var(--tc-surface-normal) !important;
-      white-space: pre;
-    }
+  & pre code {
+    color: var(--tc-surface-normal) !important;
   }
   & blockquote {
-    display: inline-block;
-    max-width: 100%;
     padding-left: var(--sp-extra-tight);
     border-left: 4px solid var(--bg-surface-active);
     white-space: initial !important;
@@ -448,22 +381,15 @@
     list-style: none;
   }
   & table {
-    display: inline-block;
-    max-width: 100%;
-    white-space: normal !important;
     background-color: var(--bg-surface-hover);
     border-radius: calc(var(--bo-radius) / 2);
     border-spacing: 0;
     border: 1px solid var(--bg-surface-border);
-    @include scrollbar.scroll;
-    @include scrollbar.scroll__h;
-    @include scrollbar.scroll--auto-hide;
 
     & td, & th {
       padding: var(--sp-extra-tight);
       border: 1px solid var(--bg-surface-border);
       border-width: 0 1px 1px 0;
-      white-space: pre;
       &:last-child {
         border-width: 0;
         border-bottom-width: 1px;
@@ -483,15 +409,4 @@
       border-bottom-width: 0px !important;
     }
   }
-}
-
-.message.message--type-emote {
-  .message__body {
-    font-style: italic;
-
-    // Remove blockness of first `<p>` so that markdown emotes stay on one line.
-    p:first-of-type {
-      display: inline;
-    }
-  }
-}
+}

src/app/molecules/message/TimelineChange.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './TimelineChange.scss';
 
+// import Linkify from 'linkifyjs/react';
+
 import Text from '../../atoms/text/Text';
 import RawIcon from '../../atoms/system-icons/RawIcon';
 
@@ -10,10 +12,9 @@ import LeaveArraowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
 import InviteArraowIC from '../../../../public/res/ic/outlined/invite-arrow.svg';
 import InviteCancelArraowIC from '../../../../public/res/ic/outlined/invite-cancel-arrow.svg';
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
+import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
 
-function TimelineChange({
-  variant, content, time, onClick,
-}) {
+function TimelineChange({ variant, content, time, onClick }) {
   let iconSrc;
 
   switch (variant) {
@@ -32,6 +33,9 @@ function TimelineChange({
     case 'avatar':
       iconSrc = UserIC;
       break;
+    case 'follow':
+      iconSrc = TickMarkIC;
+      break;
     default:
       iconSrc = JoinArraowIC;
       break;
@@ -45,6 +49,7 @@ function TimelineChange({
       <div className="timeline-change__content">
         <Text variant="b2">
           {content}
+          {/* <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify> */}
         </Text>
       </div>
       <div className="timeline-change__time">
@@ -63,6 +68,7 @@ TimelineChange.propTypes = {
   variant: PropTypes.oneOf([
     'join', 'leave', 'invite',
     'invite-cancel', 'avatar', 'other',
+    'follow',
   ]),
   content: PropTypes.oneOfType([
     PropTypes.string,

src/app/molecules/people-selector/PeopleSelector.jsx

@@ -2,8 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './PeopleSelector.scss';
 
-import { twemojify } from '../../../util/twemojify';
-
 import { blurOnBubbling } from '../../atoms/button/script';
 
 import Text from '../../atoms/text/Text';
@@ -20,8 +18,8 @@ function PeopleSelector({
         onClick={onClick}
         type="button"
       >
-        <Avatar imageSrc={avatarSrc} text={name} bgColor={color} size="extra-small" />
-        <Text className="people-selector__name" variant="b1">{twemojify(name)}</Text>
+        <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={color} size="extra-small" />
+        <Text className="people-selector__name" variant="b1">{name}</Text>
         {peopleRole !== null && <Text className="people-selector__role" variant="b3">{peopleRole}</Text>}
       </button>
     </div>

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

@@ -2,8 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './PopupWindow.scss';
 
-import { twemojify } from '../../../util/twemojify';
-
 import Text from '../../atoms/text/Text';
 import IconButton from '../../atoms/button/IconButton';
 import { MenuItem } from '../../atoms/context-menu/ContextMenu';
@@ -68,7 +66,7 @@ function PopupWindow({
             <Header>
               <IconButton size="small" src={ChevronLeftIC} onClick={onRequestClose} tooltip="Back" />
               <TitleWrapper>
-                <Text variant="s1">{twemojify(title)}</Text>
+                <Text variant="s1">{title}</Text>
               </TitleWrapper>
               {drawerOptions}
             </Header>
@@ -84,7 +82,7 @@ function PopupWindow({
         <div className="pw__content">
           <Header>
             <TitleWrapper>
-              <Text variant="h2">{twemojify(contentTitle !== null ? contentTitle : title)}</Text>
+              <Text variant="h2">{contentTitle !== null ? contentTitle : title}</Text>
             </TitleWrapper>
             {contentOptions}
           </Header>

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

@@ -2,21 +2,25 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './RoomIntro.scss';
 
-import { twemojify } from '../../../util/twemojify';
+import Linkify from 'linkifyjs/react';
 import colorMXID from '../../../util/colorMXID';
 
 import Text from '../../atoms/text/Text';
 import Avatar from '../../atoms/avatar/Avatar';
 
+function linkifyContent(content) {
+  return <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify>;
+}
+
 function RoomIntro({
   roomId, avatarSrc, name, heading, desc, time,
 }) {
   return (
     <div className="room-intro">
-      <Avatar imageSrc={avatarSrc} text={name} bgColor={colorMXID(roomId)} size="large" />
+      <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={colorMXID(roomId)} size="large" />
       <div className="room-intro__content">
-        <Text className="room-intro__name" variant="h1">{twemojify(heading)}</Text>
-        <Text className="room-intro__desc" variant="b1">{twemojify(desc, undefined, true)}</Text>
+        <Text className="room-intro__name" variant="h1">{heading}</Text>
+        <Text className="room-intro__desc" variant="b1">{linkifyContent(desc)}</Text>
         { time !== null && <Text className="room-intro__time" variant="b3">{time}</Text>}
       </div>
     </div>

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

@@ -13,7 +13,7 @@
 
   .room-intro__content {
     margin-top: var(--sp-extra-loose);
-    width: calc(100% - 88px);
+    max-width: 640px;
   }
   &__name {
     color: var(--tc-surface-high);

src/app/molecules/room-selector/RoomSelector.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './RoomSelector.scss';
 
-import { twemojify } from '../../../util/twemojify';
 import colorMXID from '../../../util/colorMXID';
 
 import Text from '../../atoms/text/Text';
@@ -41,7 +40,7 @@ RoomSelectorWrapper.propTypes = {
 };
 
 function RoomSelector({
-  name, parentName, roomId, imageSrc, iconSrc,
+  name, roomId, imageSrc, iconSrc,
   isSelected, isUnread, notificationCount, isAlert,
   options, onClick,
 }) {
@@ -52,21 +51,13 @@ function RoomSelector({
       content={(
         <>
           <Avatar
-            text={name}
+            text={name.slice(0, 1)}
             bgColor={colorMXID(roomId)}
             imageSrc={imageSrc}
             iconSrc={iconSrc}
             size="extra-small"
           />
-          <Text variant="b1">
-            {twemojify(name)}
-            {parentName && (
-              <span className="text text-b3">
-                {' — '}
-                {twemojify(parentName)}
-              </span>
-            )}
-          </Text>
+          <Text variant="b1">{name}</Text>
           { isUnread && (
             <NotificationBadge
               alert={isAlert}
@@ -81,7 +72,6 @@ function RoomSelector({
   );
 }
 RoomSelector.defaultProps = {
-  parentName: null,
   isSelected: false,
   imageSrc: null,
   iconSrc: null,
@@ -89,7 +79,6 @@ RoomSelector.defaultProps = {
 };
 RoomSelector.propTypes = {
   name: PropTypes.string.isRequired,
-  parentName: PropTypes.string,
   roomId: PropTypes.string.isRequired,
   imageSrc: PropTypes.string,
   iconSrc: PropTypes.string,

src/app/molecules/room-tile/RoomTile.jsx

@@ -2,14 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './RoomTile.scss';
 
-import { twemojify } from '../../../util/twemojify';
-import { sanitizeText } from '../../../util/sanitize';
-
+import Linkify from 'linkifyjs/react';
 import colorMXID from '../../../util/colorMXID';
 
 import Text from '../../atoms/text/Text';
 import Avatar from '../../atoms/avatar/Avatar';
 
+function linkifyContent(content) {
+  return <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify>;
+}
+
 function RoomTile({
   avatarSrc, name, id,
   inviterName, memberCount, desc, options,
@@ -20,11 +22,11 @@ function RoomTile({
         <Avatar
           imageSrc={avatarSrc}
           bgColor={colorMXID(id)}
-          text={name}
+          text={name.slice(0, 1)}
         />
       </div>
       <div className="room-tile__content">
-        <Text variant="s1">{twemojify(name)}</Text>
+        <Text variant="s1">{name}</Text>
         <Text variant="b3">
           {
             inviterName !== null
@@ -34,7 +36,7 @@ function RoomTile({
         </Text>
         {
           desc !== null && (typeof desc === 'string')
-            ? <Text className="room-tile__content__desc" variant="b2">{twemojify(desc, undefined, true)}</Text>
+            ? <Text className="room-tile__content__desc" variant="b2">{linkifyContent(desc)}</Text>
             : desc
         }
       </div>

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

@@ -2,8 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './SidebarAvatar.scss';
 
-import { twemojify } from '../../../util/twemojify';
-
 import Avatar from '../../atoms/avatar/Avatar';
 import Text from '../../atoms/text/Text';
 import Tooltip from '../../atoms/tooltip/Tooltip';
@@ -18,7 +16,7 @@ const SidebarAvatar = React.forwardRef(({
   if (active) activeClass = ' sidebar-avatar--active';
   return (
     <Tooltip
-      content={<Text variant="b1">{twemojify(tooltip)}</Text>}
+      content={<Text variant="b1">{tooltip}</Text>}
       placement="right"
     >
       <button

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

@@ -14,16 +14,6 @@
 
     margin: 0 !important;
   }
-  & .avatar-container,
-  & .notification-badge {
-    transition: transform 200ms var(--fluid-push);
-  }
-  &:hover .avatar-container {
-    transform: translateX(4px)
-  }
-  &:hover .notification-badge {
-    transform: translate(calc(20% + 4px), -20%);
-  }
   &:focus {
     outline: none;
   }
@@ -43,7 +33,7 @@
 
     width: 3px;
     height: 12px;
-    background-color: var(--tc-surface-high);
+    background-color: var(--ic-surface-normal);
     border-radius: 0 4px 4px 0;
     transition: height 200ms linear;
 

src/app/molecules/sso-buttons/SSOButtons.jsx

@@ -1,41 +1,98 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import './SSOButtons.scss';
 
-import { createTemporaryClient, startSsoLogin } from '../../../client/action/auth';
+import { createTemporaryClient, getLoginFlows, startSsoLogin } from '../../../client/action/auth';
 
-import Button from '../../atoms/button/Button';
+import Text from '../../atoms/text/Text';
+
+function SSOButtons({ homeserver }) {
+  const [identityProviders, setIdentityProviders] = useState([]);
+
+  useEffect(() => {
+    // If the homeserver passed in is not a fully-qualified domain name, do not update.
+    if (!homeserver.match('^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\\.[a-zA-Z]{2,})+$')) {
+      return;
+    }
+
+    // TODO Check that there is a Matrix server at homename before making requests.
+    // This will prevent the CORS errors that happen when a user changes their homeserver.
+    createTemporaryClient(homeserver).then((client) => {
+      const providers = [];
+      getLoginFlows(client).then((flows) => {
+        if (flows.flows !== undefined) {
+          const ssoFlows = flows.flows.filter((flow) => flow.type === 'm.login.sso' || flow.type === 'm.login.cas');
+          ssoFlows.forEach((flow) => {
+            if (flow.identity_providers !== undefined) {
+              const type = flow.type.substring(8);
+              flow.identity_providers.forEach((idp) => {
+                const imageSrc = client.mxcUrlToHttp(idp.icon);
+                providers.push({
+                  homeserver, id: idp.id, name: idp.name, type, imageSrc,
+                });
+              });
+            }
+          });
+        }
+        setIdentityProviders(providers);
+      }).catch(() => {});
+    }).catch(() => {
+      setIdentityProviders([]);
+    });
+  }, [homeserver]);
+
+  if (identityProviders.length === 0) return <></>;
 
-function SSOButtons({ type, identityProviders, baseUrl }) {
-  const tempClient = createTemporaryClient(baseUrl);
-  function handleClick(id) {
-    startSsoLogin(baseUrl, type, id);
-  }
   return (
     <div className="sso-buttons">
-      {identityProviders
-        .sort((idp, idp2) => {
-          if (typeof idp.icon !== 'string') return -1;
-          return idp.name.toLowerCase() > idp2.name.toLowerCase() ? 1 : -1;
-        })
-        .map((idp) => (
-          idp.icon
-            ? (
-              <button key={idp.id} type="button" className="sso-btn" onClick={() => handleClick(idp.id)}>
-                <img className="sso-btn__img" src={tempClient.mxcUrlToHttp(idp.icon)} alt={idp.name} />
-              </button>
-            ) : <Button key={idp.id} className="sso-btn__text-only" onClick={() => handleClick(idp.id)}>{`Login with ${idp.name}`}</Button>
+      <div className="sso-buttons__divider">
+        <Text>OR</Text>
+      </div>
+      <div className="sso-buttons__container">
+        {identityProviders.sort((idp) => !!idp.imageSrc).map((idp) => (
+          <SSOButton
+            key={idp.id}
+            homeserver={idp.homeserver}
+            id={idp.id}
+            name={idp.name}
+            type={idp.type}
+            imageSrc={idp.imageSrc}
+          />
         ))}
+      </div>
     </div>
   );
 }
 
+function SSOButton({
+  homeserver, id, name, type, imageSrc,
+}) {
+  const isImageAvail = !!imageSrc;
+  function handleClick() {
+    startSsoLogin(homeserver, type, id);
+  }
+  return (
+    <button
+      type="button"
+      className={`sso-btn${!isImageAvail ? ' sso-btn__text-only' : ''}`}
+      onClick={handleClick}
+    >
+      {isImageAvail && <img className="sso-btn__img" src={imageSrc} alt={name} />}
+      {!isImageAvail && <Text>{`Login with ${name}`}</Text>}
+    </button>
+  );
+}
+
 SSOButtons.propTypes = {
-  identityProviders: PropTypes.arrayOf(
-    PropTypes.shape({}),
-  ).isRequired,
-  baseUrl: PropTypes.string.isRequired,
-  type: PropTypes.oneOf(['sso', 'cas']).isRequired,
+  homeserver: PropTypes.string.isRequired,
+};
+
+SSOButton.propTypes = {
+  homeserver: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  imageSrc: PropTypes.string.isRequired,
 };
 
 export default SSOButtons;

src/app/molecules/sso-buttons/SSOButtons.scss

@@ -1,7 +1,22 @@
 .sso-buttons {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;  
+  &__divider {
+    display: flex;
+    align-items: center;
+
+    &::before,
+    &::after {
+      flex: 1;
+      content: '';
+      margin: var(--sp-tight);
+      border-bottom: 1px solid var(--bg-surface-border);
+    }
+  }
+  &__container {
+    margin-bottom: var(--sp-extra-loose);
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;  
+  }
 }
 
 .sso-btn {
@@ -16,8 +31,11 @@
     width: var(--av-small);
   }
   &__text-only {
-    margin-top: var(--sp-normal);
     flex-basis: 100%;
+    text-align: center;
+
+    margin: var(--sp-tight) 0px;
+    cursor: pointer;
     & .text {
       color: var(--tc-link);
     }

src/app/organisms/create-room/CreateRoom.jsx

@@ -1,12 +1,10 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './CreateRoom.scss';
 
 import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
 import { isRoomAliasAvailable } from '../../../util/matrixUtil';
 import * as roomActions from '../../../client/action/room';
-import { selectRoom } from '../../../client/action/navigation';
 
 import Text from '../../atoms/text/Text';
 import Button from '../../atoms/button/Button';
@@ -14,7 +12,6 @@ import Toggle from '../../atoms/button/Toggle';
 import IconButton from '../../atoms/button/IconButton';
 import Input from '../../atoms/input/Input';
 import Spinner from '../../atoms/spinner/Spinner';
-import SegmentControl from '../../atoms/segmented-controls/SegmentedControls';
 import PopupWindow from '../../molecules/popup-window/PopupWindow';
 import SettingTile from '../../molecules/setting-tile/SettingTile';
 
@@ -31,7 +28,6 @@ function CreateRoom({ isOpen, onRequestClose }) {
   const [titleValue, updateTitleValue] = useState(undefined);
   const [topicValue, updateTopicValue] = useState(undefined);
   const [addressValue, updateAddressValue] = useState(undefined);
-  const [roleIndex, setRoleIndex] = useState(0);
 
   const addressRef = useRef(null);
   const topicRef = useRef(null);
@@ -49,23 +45,8 @@ function CreateRoom({ isOpen, onRequestClose }) {
     updateTitleValue(undefined);
     updateTopicValue(undefined);
     updateAddressValue(undefined);
-    setRoleIndex(0);
   }
 
-  const onCreated = (roomId) => {
-    resetForm();
-    selectRoom(roomId);
-    onRequestClose();
-  };
-
-  useEffect(() => {
-    const { roomList } = initMatrix;
-    roomList.on(cons.events.roomList.ROOM_CREATED, onCreated);
-    return () => {
-      roomList.removeListener(cons.events.roomList.ROOM_CREATED, onCreated);
-    };
-  }, []);
-
   async function createRoom() {
     if (isCreatingRoom) return;
     updateIsCreatingRoom(true);
@@ -79,12 +60,13 @@ function CreateRoom({ isOpen, onRequestClose }) {
       if (roomAlias.trim() === '') roomAlias = undefined;
     }
 
-    const powerLevel = roleIndex === 1 ? 101 : undefined;
-
     try {
       await roomActions.create({
-        name, topic, isPublic, roomAlias, isEncrypted, powerLevel,
+        name, topic, isPublic, roomAlias, isEncrypted,
       });
+
+      resetForm();
+      onRequestClose();
     } catch (e) {
       if (e.message === 'M_UNKNOWN: Invalid characters in room alias') {
         updateCreatingError('ERROR: Invalid characters in room address');
@@ -93,8 +75,8 @@ function CreateRoom({ isOpen, onRequestClose }) {
         updateCreatingError('ERROR: Room address is already in use');
         updateIsValidAddress(false);
       } else updateCreatingError(e.message);
-      updateIsCreatingRoom(false);
     }
+    updateIsCreatingRoom(false);
   }
 
   function validateAddress(e) {
@@ -157,19 +139,6 @@ function CreateRoom({ isOpen, onRequestClose }) {
               content={<Text variant="b3">You can’t disable this later. Bridges & most bots won’t work yet.</Text>}
             />
           )}
-          <SettingTile
-            title="Select your role"
-            options={(
-              <SegmentControl
-                selected={roleIndex}
-                segments={[{ text: 'Admin' }, { text: 'Founder' }]}
-                onSelect={setRoleIndex}
-              />
-            )}
-            content={(
-              <Text variant="b3">Override the default (100) power level.</Text>
-            )}
-          />
           <Input value={topicValue} onChange={handleTopicChange} forwardRef={topicRef} minHeight={174} resizable label="Topic (optional)" />
           <div className="create-room__name-wrapper">
             <Input value={titleValue} onChange={handleTitleChange} forwardRef={nameRef} label="Room name" required />

src/app/organisms/create-room/CreateRoom.scss

@@ -9,13 +9,6 @@
     }
   }
 
-  & .segment-btn {
-    padding: var(--sp-ultra-tight) 0;
-    &__base {
-      padding: 0 var(--sp-tight);
-    }
-  }
-
   &__address {
     display: flex;
     &__label {

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

@@ -5,7 +5,6 @@ import './InviteList.scss';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import * as roomActions from '../../../client/action/room';
-import { selectRoom, selectTab } from '../../../client/action/navigation';
 
 import Text from '../../atoms/text/Text';
 import Button from '../../atoms/button/Button';
@@ -30,18 +29,13 @@ function InviteList({ isOpen, onRequestClose }) {
     roomActions.leave(roomId, isDM);
   }
   function updateInviteList(roomId) {
-    if (procInvite.has(roomId)) procInvite.delete(roomId);
-    changeProcInvite(new Set(Array.from(procInvite)));
+    if (procInvite.has(roomId)) {
+      procInvite.delete(roomId);
+      changeProcInvite(new Set(Array.from(procInvite)));
+    } else changeProcInvite(new Set(Array.from(procInvite)));
 
     const rl = initMatrix.roomList;
-    const totalInvites = rl.inviteDirects.size + rl.inviteRooms.size + rl.inviteSpaces.size;
-    const room = initMatrix.matrixClient.getRoom(roomId);
-    const isRejected = room === null || room?.getMyMembership() !== 'join';
-    if (!isRejected) {
-      if (room.isSpaceRoom()) selectTab(roomId);
-      else selectRoom(roomId);
-      onRequestClose();
-    }
+    const totalInvites = rl.inviteDirects.size + rl.inviteRooms.size;
     if (totalInvites === 0) onRequestClose();
   }
 

src/app/organisms/navigation/Drawer.scss

@@ -49,7 +49,7 @@
   &::before {
     position: absolute;
     top: 0;
-    z-index: 99;
+    
     content: '';
     display: inline-block;
     width: 100%;

src/app/organisms/navigation/DrawerBreadcrumb.jsx

@@ -2,8 +2,6 @@ import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './DrawerBreadcrumb.scss';
 
-import { twemojify } from '../../../util/twemojify';
-
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import { selectSpace } from '../../../client/action/navigation';
@@ -103,7 +101,7 @@ function DrawerBreadcrumb({ spaceId }) {
                     className={index === spacePath.length - 1 ? 'breadcrumb__btn--selected' : ''}
                     onClick={() => selectSpace(id)}
                   >
-                    <Text variant="b2">{id === cons.tabs.HOME ? 'Home' : twemojify(mx.getRoom(id).name)}</Text>
+                    <Text variant="b2">{id === cons.tabs.HOME ? 'Home' : mx.getRoom(id).name}</Text>
                     { noti !== null && (
                       <NotificationBadge
                         alert={noti.highlight !== 0}

src/app/organisms/navigation/DrawerHeader.jsx

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { twemojify } from '../../../util/twemojify';
-
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import {
@@ -32,7 +30,7 @@ function DrawerHeader({ selectedTab, spaceId }) {
   return (
     <Header>
       <TitleWrapper>
-        <Text variant="s1">{twemojify(spaceName) || tabName}</Text>
+        <Text variant="s1">{spaceName || tabName}</Text>
       </TitleWrapper>
       {spaceName && (
         <IconButton

src/app/organisms/navigation/SideBar.jsx

@@ -6,7 +6,7 @@ import cons from '../../../client/state/cons';
 import colorMXID from '../../../util/colorMXID';
 import logout from '../../../client/action/logout';
 import {
-  selectTab, openInviteList, openSearch, openSettings,
+  selectTab, openInviteList, openPublicRooms, openSettings,
 } from '../../../client/action/navigation';
 import navigation from '../../../client/state/navigation';
 import { abbreviateNumber } from '../../../util/common';
@@ -17,7 +17,7 @@ import ContextMenu, { MenuItem, MenuHeader, MenuBorder } from '../../atoms/conte
 
 import HomeIC from '../../../../public/res/ic/outlined/home.svg';
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
-import SearchIC from '../../../../public/res/ic/outlined/search.svg';
+import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
 import InviteIC from '../../../../public/res/ic/outlined/invite.svg';
 import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
 import PowerIC from '../../../../public/res/ic/outlined/power.svg';
@@ -70,7 +70,7 @@ function ProfileAvatarMenu() {
           tooltip={profile.displayName}
           imageSrc={profile.avatarUrl !== null ? mx.mxcUrlToHttp(profile.avatarUrl, 42, 42, 'crop') : null}
           bgColor={colorMXID(mx.getUserId())}
-          text={profile.displayName}
+          text={profile.displayName.slice(0, 1)}
         />
       )}
     />
@@ -121,7 +121,6 @@ function SideBar() {
     let noti = null;
 
     orphans.forEach((roomId) => {
-      if (roomList.spaceShortcut.has(roomId)) return;
       if (!notifications.hasNoti(roomId)) return;
       if (noti === null) noti = { total: 0, highlight: 0 };
       const childNoti = notifications.getNoti(roomId);
@@ -175,6 +174,7 @@ function SideBar() {
                 notificationCount={dmsNoti !== null ? abbreviateNumber(dmsNoti.total) : 0}
                 isAlert={dmsNoti?.highlight > 0}
               />
+              <SidebarAvatar onClick={() => openPublicRooms()} tooltip="Public rooms" iconSrc={HashSearchIC} />
             </div>
             <div className="sidebar-divider" />
             <div className="space-container">
@@ -189,7 +189,7 @@ function SideBar() {
                       tooltip={room.name}
                       bgColor={colorMXID(room.roomId)}
                       imageSrc={room.getAvatarUrl(initMatrix.matrixClient.baseUrl, 42, 42, 'crop') || null}
-                      text={room.name}
+                      text={room.name.slice(0, 1)}
                       isUnread={notifications.hasNoti(sRoomId)}
                       notificationCount={abbreviateNumber(notifications.getTotalNoti(sRoomId))}
                       isAlert={notifications.getHighlightNoti(sRoomId) !== 0}
@@ -205,11 +205,6 @@ function SideBar() {
       <div className="sidebar__sticky">
         <div className="sidebar-divider" />
         <div className="sticky-container">
-          <SidebarAvatar
-            onClick={() => openSearch()}
-            tooltip="Search"
-            iconSrc={SearchIC}
-          />
           { totalInvites !== 0 && (
             <SidebarAvatar
               isUnread

src/app/organisms/navigation/SideBar.scss

@@ -10,7 +10,6 @@
   width: var(--navigation-sidebar-width);
   height: 100%;
   border-right: 1px solid var(--bg-surface-border);
-  background-color: var(--bg-surface-extra-low);
 
   [dir=rtl] & {
     border-right: none;
@@ -42,8 +41,8 @@
     background: transparent;
     background-image: linear-gradient(
       to top,
-      var(--bg-surface-extra-low),
-      var(--bg-surface-extra-low-transparent));
+      var(--bg-surface-low),
+      var(--bg-surface-low-transparent));
     position: sticky;
     bottom: -1px;
     left: 0;

src/app/organisms/profile-viewer/ProfileViewer.jsx

@@ -2,8 +2,6 @@ import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './ProfileViewer.scss';
 
-import { twemojify } from '../../../util/twemojify';
-
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
@@ -80,43 +78,19 @@ SessionInfo.propTypes = {
   userId: PropTypes.string.isRequired,
 };
 
-function ProfileFooter({ roomId, userId, onRequestClose }) {
+function ProfileFooter({ userId, onRequestClose }) {
   const [isCreatingDM, setIsCreatingDM] = useState(false);
   const [isIgnoring, setIsIgnoring] = useState(false);
   const [isUserIgnored, setIsUserIgnored] = useState(initMatrix.matrixClient.isUserIgnored(userId));
 
-  const isMountedRef = useRef(true);
   const mx = initMatrix.matrixClient;
-  const room = mx.getRoom(roomId);
-  const member = room.getMember(userId);
-  const isInvitable = member?.membership !== 'join' && member?.membership !== 'ban';
+  const isMountedRef = useRef(true);
 
-  const [isInviting, setIsInviting] = useState(false);
-  const [isInvited, setIsInvited] = useState(member?.membership === 'invite');
-
-  const myPowerlevel = room.getMember(mx.getUserId()).powerLevel;
-  const userPL = room.getMember(userId)?.powerLevel || 0;
-  const canIKick = room.currentState.hasSufficientPowerLevelFor('kick', myPowerlevel) && userPL < myPowerlevel;
-
-  const onCreated = (dmRoomId) => {
-    if (isMountedRef.current === false) return;
-    setIsCreatingDM(false);
-    selectRoom(dmRoomId);
-    onRequestClose();
-  };
-
-  useEffect(() => {
-    const { roomList } = initMatrix;
-    roomList.on(cons.events.roomList.ROOM_CREATED, onCreated);
-    return () => {
-      isMountedRef.current = false;
-      roomList.removeListener(cons.events.roomList.ROOM_CREATED, onCreated);
-    };
+  useEffect(() => () => {
+    isMountedRef.current = false;
   }, []);
   useEffect(() => {
     setIsUserIgnored(initMatrix.matrixClient.isUserIgnored(userId));
-    setIsIgnoring(false);
-    setIsInviting(false);
   }, [userId]);
 
   async function openDM() {
@@ -126,7 +100,7 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
     for (let i = 0; i < directIds.length; i += 1) {
       const dRoom = mx.getRoom(directIds[i]);
       const roomMembers = dRoom.getMembers();
-      if (roomMembers.length <= 2 && dRoom.getMember(userId)) {
+      if (roomMembers.length <= 2 && dRoom.currentState.members[userId]) {
         selectRoom(directIds[i]);
         onRequestClose();
         return;
@@ -136,14 +110,18 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
     // Create new DM
     try {
       setIsCreatingDM(true);
-      await roomActions.create({
+      const result = await roomActions.create({
         isEncrypted: true,
         isDirect: true,
         invite: [userId],
       });
-    } catch {
+
       if (isMountedRef.current === false) return;
       setIsCreatingDM(false);
+      selectRoom(result.room_id);
+      onRequestClose();
+    } catch {
+      setIsCreatingDM(false);
     }
   }
 
@@ -166,24 +144,6 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
       setIsIgnoring(false);
     }
   }
-
-  async function toggleInvite() {
-    try {
-      setIsInviting(true);
-      let isInviteSent = false;
-      if (isInvited) await roomActions.kick(roomId, userId);
-      else {
-        await roomActions.invite(roomId, userId);
-        isInviteSent = true;
-      }
-      if (isMountedRef.current === false) return;
-      setIsInvited(isInviteSent);
-      setIsInviting(false);
-    } catch {
-      setIsInviting(false);
-    }
-  }
-
   return (
     <div className="profile-viewer__buttons">
       <Button
@@ -193,19 +153,7 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
       >
         {isCreatingDM ? 'Creating room...' : 'Message'}
       </Button>
-      { member?.membership === 'join' && <Button>Mention</Button>}
-      { (isInvited ? canIKick : room.canInvite(mx.getUserId())) && isInvitable && (
-        <Button
-          onClick={toggleInvite}
-          disabled={isInviting}
-        >
-          {
-            isInvited
-              ? `${isInviting ? 'Disinviting...' : 'Disinvite'}`
-              : `${isInviting ? 'Inviting...' : 'Invite'}`
-          }
-        </Button>
-      )}
+      <Button>Mention</Button>
       <Button
         variant={isUserIgnored ? 'positive' : 'danger'}
         onClick={toggleIgnore}
@@ -221,7 +169,6 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
   );
 }
 ProfileFooter.propTypes = {
-  roomId: PropTypes.string.isRequired,
   userId: PropTypes.string.isRequired,
   onRequestClose: PropTypes.func.isRequired,
 };
@@ -260,21 +207,21 @@ function ProfileViewer() {
   }, [isOpen]);
 
   function renderProfile() {
-    const member = room.getMember(userId) || mx.getUser(userId) || {};
-    const avatarMxc = member.getMxcAvatarUrl?.() || member.avatarUrl;
+    const member = room.getMember(userId) || mx.getUser(userId);
+    const avatarMxc = member.getMxcAvatarUrl() || member.avatarUrl;
 
     return (
       <div className="profile-viewer">
         <div className="profile-viewer__user">
           <Avatar
             imageSrc={!avatarMxc ? null : mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop')}
-            text={username}
+            text={username.slice(0, 1)}
             bgColor={colorMXID(userId)}
             size="large"
           />
           <div className="profile-viewer__user__info">
-            <Text variant="s1">{twemojify(username)}</Text>
-            <Text variant="b2">{twemojify(userId)}</Text>
+            <Text variant="s1">{username}</Text>
+            <Text variant="b2">{userId}</Text>
           </div>
           <div className="profile-viewer__user__role">
             <Text variant="b3">Role</Text>
@@ -284,7 +231,6 @@ function ProfileViewer() {
         <SessionInfo userId={userId} />
         { userId !== mx.getUserId() && (
           <ProfileFooter
-            roomId={roomId}
             userId={userId}
             onRequestClose={() => setIsOpen(false)}
           />

src/app/organisms/profile-viewer/ProfileViewer.scss

@@ -20,7 +20,7 @@
     border-bottom: 1px solid var(--bg-surface-border);
 
     &__info {
-      align-self: flex-end;
+      align-self: end;
       flex: 1;
       min-width: 0;
 
@@ -35,7 +35,7 @@
       }
     }
     &__role {
-      align-self: flex-end;
+      align-self: end;
       & > .text {
         margin-bottom: var(--sp-ultra-tight);
       }

src/app/organisms/pw/Dialogs.jsx

@@ -2,14 +2,12 @@ import React from 'react';
 
 import ReadReceipts from '../read-receipts/ReadReceipts';
 import ProfileViewer from '../profile-viewer/ProfileViewer';
-import Search from '../search/Search';
 
 function Dialogs() {
   return (
     <>
       <ReadReceipts />
       <ProfileViewer />
-      <Search />
     </>
   );
 }

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

@@ -15,15 +15,27 @@ import { openProfileViewer } from '../../../client/action/navigation';
 
 function ReadReceipts() {
   const [isOpen, setIsOpen] = useState(false);
-  const [readers, setReaders] = useState([]);
   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(() => {
-    const loadReadReceipts = (rId, userIds) => {
-      setReaders(userIds);
-      setRoomId(rId);
-      setIsOpen(true);
-    };
     navigation.on(cons.events.navigation.READRECEIPTS_OPENED, loadReadReceipts);
     return () => {
       navigation.removeListener(cons.events.navigation.READRECEIPTS_OPENED, loadReadReceipts);
@@ -32,28 +44,28 @@ function ReadReceipts() {
 
   useEffect(() => {
     if (isOpen === false) {
-      setReaders([]);
       setRoomId(null);
+      setReadReceipts([]);
     }
   }, [isOpen]);
 
-  function renderPeople(userId) {
+  function renderPeople(receipt) {
     const room = initMatrix.matrixClient.getRoom(roomId);
-    const member = room.getMember(userId);
-    const getUserDisplayName = () => {
+    const member = room.getMember(receipt.userId);
+    const getUserDisplayName = (userId) => {
       if (room?.getMember(userId)) return getUsernameOfRoomMember(room.getMember(userId));
       return getUsername(userId);
     };
     return (
       <PeopleSelector
-        key={userId}
+        key={receipt.userId}
         onClick={() => {
           setIsOpen(false);
-          openProfileViewer(userId, roomId);
+          openProfileViewer(receipt.userId, roomId);
         }}
         avatarSrc={member?.getAvatarUrl(initMatrix.matrixClient.baseUrl, 24, 24, 'crop')}
-        name={getUserDisplayName(userId)}
-        color={colorMXID(userId)}
+        name={getUserDisplayName(receipt.userId)}
+        color={colorMXID(receipt.userId)}
       />
     );
   }
@@ -66,7 +78,7 @@ function ReadReceipts() {
       contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />}
     >
       {
-        readers.map(renderPeople)
+        readReceipts.map(renderPeople)
       }
     </Dialog>
   );

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

@@ -1,8 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import './RoomOptions.scss';
 
-import { twemojify } from '../../../util/twemojify';
-
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
@@ -11,7 +9,6 @@ import * as roomActions from '../../../client/action/room';
 
 import ContextMenu, { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
 
-import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
 import BellIC from '../../../../public/res/ic/outlined/bell.svg';
 import BellRingIC from '../../../../public/res/ic/outlined/bell-ring.svg';
 import BellPingIC from '../../../../public/res/ic/outlined/bell-ping.svg';
@@ -149,20 +146,9 @@ function RoomOptions() {
     };
   }, []);
 
-  const handleMarkAsRead = () => {
-    const mx = initMatrix.matrixClient;
-    const room = mx.getRoom(roomId);
-    if (!room) return;
-    const events = room.getLiveTimeline().getEvents();
-    mx.sendReadReceipt(events[events.length - 1]);
-  };
-
   const handleInviteClick = () => openInviteUser(roomId);
-  const handleLeaveClick = (toggleMenu) => {
-    if (confirm('Are you really want to leave this room?')) {
-      roomActions.leave(roomId);
-      toggleMenu();
-    }
+  const handleLeaveClick = () => {
+    if (confirm('Are you really want to leave this room?')) roomActions.leave(roomId);
   };
 
   function setNotif(nState, currentNState) {
@@ -177,15 +163,7 @@ function RoomOptions() {
       maxWidth={298}
       content={(toggleMenu) => (
         <>
-          <MenuHeader>{twemojify(`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`)}</MenuHeader>
-          <MenuItem
-            iconSrc={TickMarkIC}
-            onClick={() => {
-              handleMarkAsRead(); toggleMenu();
-            }}
-          >
-            Mark as read
-          </MenuItem>
+          <MenuHeader>{`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`}</MenuHeader>
           <MenuItem
             iconSrc={AddUserIC}
             onClick={() => {
@@ -194,7 +172,7 @@ function RoomOptions() {
           >
             Invite
           </MenuItem>
-          <MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={() => handleLeaveClick(toggleMenu)}>Leave</MenuItem>
+          <MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={handleLeaveClick}>Leave</MenuItem>
           <MenuHeader>Notification</MenuHeader>
           <MenuItem
             variant={notifState === cons.notifs.DEFAULT ? 'positive' : 'surface'}

src/app/organisms/room/PeopleDrawer.jsx

@@ -61,6 +61,7 @@ function PeopleDrawer({ roomId }) {
   const PER_PAGE_MEMBER = 50;
   const mx = initMatrix.matrixClient;
   const room = mx.getRoom(roomId);
+  let isRoomChanged = false;
 
   const [itemCount, setItemCount] = useState(PER_PAGE_MEMBER);
   const [membership, setMembership] = useState('join');
@@ -102,35 +103,30 @@ function PeopleDrawer({ roomId }) {
   }, [memberList]);
 
   useEffect(() => {
-    let isGettingMembers = true;
-    let isRoomChanged = false;
-    const updateMemberList = (event) => {
-      if (isGettingMembers) return;
-      if (event && event?.event?.room_id !== roomId) return;
+    searchRef.current.value = '';
+    setMemberList(
+      simplyfiMembers(
+        getMembersWithMembership(membership)
+          .sort(AtoZ).sort(sortByPowerLevel),
+      ),
+    );
+    room.loadMembersIfNeeded().then(() => {
+      if (isRoomChanged) return;
       setMemberList(
         simplyfiMembers(
           getMembersWithMembership(membership)
             .sort(AtoZ).sort(sortByPowerLevel),
         ),
       );
-    };
-    searchRef.current.value = '';
-    updateMemberList();
-    room.loadMembersIfNeeded().then(() => {
-      isGettingMembers = false;
-      if (isRoomChanged) return;
-      updateMemberList();
     });
 
     asyncSearch.on(asyncSearch.RESULT_SENT, handleSearchData);
-    mx.on('RoomMember.membership', updateMemberList);
     return () => {
       isRoomChanged = true;
       setMemberList([]);
       setSearchedMembers(null);
       setItemCount(PER_PAGE_MEMBER);
       asyncSearch.removeListener(asyncSearch.RESULT_SENT, handleSearchData);
-      mx.removeListener('RoomMember.membership', updateMemberList);
     };
   }, [roomId, membership]);
 

src/app/organisms/room/Room.jsx

@@ -1,50 +1,38 @@
 import React, { useState, useEffect } from 'react';
 import './Room.scss';
 
-import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
-import settings from '../../../client/state/settings';
-import RoomTimeline from '../../../client/state/RoomTimeline';
 
 import Welcome from '../welcome/Welcome';
 import RoomView from './RoomView';
 import PeopleDrawer from './PeopleDrawer';
 
 function Room() {
-  const [roomTimeline, setRoomTimeline] = useState(null);
-  const [eventId, setEventId] = useState(null);
-  const [isDrawer, setIsDrawer] = useState(settings.isPeopleDrawer);
-
-  const mx = initMatrix.matrixClient;
-  const handleRoomSelected = (rId, pRoomId, eId) => {
-    if (mx.getRoom(rId)) {
-      setRoomTimeline(new RoomTimeline(rId, initMatrix.notifications));
-      setEventId(eId);
-    } else {
-      // TODO: add ability to join room if roomId is invalid
-      setRoomTimeline(null);
-      setEventId(null);
-    }
-  };
-  const handleDrawerToggling = (visiblity) => setIsDrawer(visiblity);
-
+  const [selectedRoomId, changeSelectedRoomId] = useState(null);
+  const [isDrawerVisible, toggleDrawerVisiblity] = useState(navigation.isPeopleDrawerVisible);
   useEffect(() => {
+    const handleRoomSelected = (roomId) => {
+      changeSelectedRoomId(roomId);
+    };
+    const handleDrawerToggling = (visiblity) => {
+      toggleDrawerVisiblity(visiblity);
+    };
     navigation.on(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
-    settings.on(cons.events.settings.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
+    navigation.on(cons.events.navigation.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
+
     return () => {
       navigation.removeListener(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
-      settings.removeListener(cons.events.settings.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
-      roomTimeline?.removeInternalListeners();
+      navigation.removeListener(cons.events.navigation.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
     };
   }, []);
 
-  if (roomTimeline === null) return <Welcome />;
+  if (selectedRoomId === null) return <Welcome />;
 
   return (
     <div className="room-container">
-      <RoomView roomTimeline={roomTimeline} eventId={eventId} />
-      { isDrawer && <PeopleDrawer roomId={roomTimeline.roomId} />}
+      <RoomView roomId={selectedRoomId} />
+      { isDrawerVisible && <PeopleDrawer roomId={selectedRoomId} />}
     </div>
   );
 }

src/app/organisms/room/RoomView.jsx

@@ -1,58 +1,150 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './RoomView.scss';
 
 import EventEmitter from 'events';
 
+import RoomTimeline from '../../../client/state/RoomTimeline';
+
+import ScrollView from '../../atoms/scroll/ScrollView';
+
 import RoomViewHeader from './RoomViewHeader';
 import RoomViewContent from './RoomViewContent';
 import RoomViewFloating from './RoomViewFloating';
 import RoomViewInput from './RoomViewInput';
 import RoomViewCmdBar from './RoomViewCmdBar';
 
+import { scrollToBottom, isAtBottom, autoScrollToBottom } from './common';
+
 const viewEvent = new EventEmitter();
 
-function RoomView({ roomTimeline, eventId }) {
-  // eslint-disable-next-line react/prop-types
-  const { roomId } = roomTimeline;
+let lastScrollTop = 0;
+let lastScrollHeight = 0;
+let isReachedBottom = true;
+let isReachedTop = false;
+function RoomView({ roomId }) {
+  const [roomTimeline, updateRoomTimeline] = useState(null);
+  const timelineSVRef = useRef(null);
+
+  useEffect(() => {
+    roomTimeline?.removeInternalListeners();
+    updateRoomTimeline(new RoomTimeline(roomId));
+    isReachedBottom = true;
+    isReachedTop = false;
+  }, [roomId]);
+
+  const timelineScroll = {
+    reachBottom() {
+      scrollToBottom(timelineSVRef);
+    },
+    autoReachBottom() {
+      autoScrollToBottom(timelineSVRef);
+    },
+    tryRestoringScroll() {
+      const sv = timelineSVRef.current;
+      const { scrollHeight } = sv;
+
+      if (lastScrollHeight === scrollHeight) return;
+
+      if (lastScrollHeight < scrollHeight) {
+        sv.scrollTop = lastScrollTop + (scrollHeight - lastScrollHeight);
+      } else {
+        timelineScroll.reachBottom();
+      }
+    },
+    enableSmoothScroll() {
+      timelineSVRef.current.style.scrollBehavior = 'smooth';
+    },
+    disableSmoothScroll() {
+      timelineSVRef.current.style.scrollBehavior = 'auto';
+    },
+    isScrollable() {
+      const oHeight = timelineSVRef.current.offsetHeight;
+      const sHeight = timelineSVRef.current.scrollHeight;
+      if (sHeight > oHeight) return true;
+      return false;
+    },
+  };
+
+  function onTimelineScroll(e) {
+    const { scrollTop, scrollHeight, offsetHeight } = e.target;
+    const scrollBottom = scrollTop + offsetHeight;
+    lastScrollTop = scrollTop;
+    lastScrollHeight = scrollHeight;
+
+    const PLACEHOLDER_HEIGHT = 96;
+    const PLACEHOLDER_COUNT = 3;
+
+    const topPagKeyPoint = PLACEHOLDER_COUNT * PLACEHOLDER_HEIGHT;
+    const bottomPagKeyPoint = scrollHeight - (offsetHeight / 2);
+
+    if (!isReachedBottom && isAtBottom(timelineSVRef)) {
+      isReachedBottom = true;
+      viewEvent.emit('toggle-reached-bottom', true);
+    }
+    if (isReachedBottom && !isAtBottom(timelineSVRef)) {
+      isReachedBottom = false;
+      viewEvent.emit('toggle-reached-bottom', false);
+    }
+    // TOP of timeline
+    if (scrollTop < topPagKeyPoint && isReachedTop === false) {
+      isReachedTop = true;
+      viewEvent.emit('reached-top');
+      return;
+    }
+    isReachedTop = false;
+
+    // BOTTOM of timeline
+    if (scrollBottom > bottomPagKeyPoint) {
+      // TODO:
+    }
+  }
 
   return (
     <div className="room-view">
       <RoomViewHeader roomId={roomId} />
       <div className="room-view__content-wrapper">
         <div className="room-view__scrollable">
-          <RoomViewContent
-            eventId={eventId}
-            roomTimeline={roomTimeline}
-          />
-          <RoomViewFloating
-            roomId={roomId}
-            roomTimeline={roomTimeline}
-          />
-        </div>
-        <div className="room-view__sticky">
-          <RoomViewInput
-            roomId={roomId}
-            roomTimeline={roomTimeline}
-            viewEvent={viewEvent}
-          />
-          <RoomViewCmdBar
-            roomId={roomId}
-            roomTimeline={roomTimeline}
-            viewEvent={viewEvent}
-          />
+          <ScrollView onScroll={onTimelineScroll} ref={timelineSVRef} autoHide>
+            {roomTimeline !== null && (
+              <RoomViewContent
+                roomId={roomId}
+                roomTimeline={roomTimeline}
+                timelineScroll={timelineScroll}
+                viewEvent={viewEvent}
+              />
+            )}
+          </ScrollView>
+          {roomTimeline !== null && (
+            <RoomViewFloating
+              roomId={roomId}
+              roomTimeline={roomTimeline}
+              timelineScroll={timelineScroll}
+              viewEvent={viewEvent}
+            />
+          )}
         </div>
+        {roomTimeline !== null && (
+          <div className="room-view__sticky">
+            <RoomViewInput
+              roomId={roomId}
+              roomTimeline={roomTimeline}
+              timelineScroll={timelineScroll}
+              viewEvent={viewEvent}
+            />
+            <RoomViewCmdBar
+              roomId={roomId}
+              roomTimeline={roomTimeline}
+              viewEvent={viewEvent}
+            />
+          </div>
+        )}
       </div>
     </div>
   );
 }
-
-RoomView.defaultProps = {
-  eventId: null,
-};
 RoomView.propTypes = {
-  roomTimeline: PropTypes.shape({}).isRequired,
-  eventId: PropTypes.string,
+  roomId: PropTypes.string.isRequired,
 };
 
 export default RoomView;

src/app/organisms/room/RoomViewCmdBar.jsx

@@ -6,19 +6,31 @@ 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 {
+  selectTab,
+  selectRoom,
   openCreateRoom,
   openPublicRooms,
   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 FollowingMembers from '../../molecules/following-members/FollowingMembers';
+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',
@@ -49,6 +61,128 @@ const commands = [{
   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">{'>#room_name'}</Text>
+          <Text variant="b2">{'>@people_name'}</Text>
+          <MenuHeader>Autofill commands</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 room 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">
@@ -61,8 +195,8 @@ CmdItem.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
-  function renderCmdSuggestions(cmdPrefix, cmds) {
+function getCmdSuggestions({ prefix, option, suggestions }, fireCmd) {
+  function getGenCmdSuggestions(cmdPrefix, cmds) {
     const cmdOptString = (typeof option === 'string') ? `/${option}` : '/?';
     return cmds.map((cmd) => (
       <CmdItem
@@ -80,7 +214,23 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
     ));
   }
 
-  function renderEmojiSuggestion(emPrefix, emos) {
+  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}
@@ -105,7 +255,7 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
     ));
   }
 
-  function renderNameSuggestion(namePrefix, members) {
+  function getNameSuggestion(namePrefix, members) {
     return members.map((member) => (
       <CmdItem
         key={member.userId}
@@ -122,9 +272,12 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
   }
 
   const cmd = {
-    '/': (cmds) => renderCmdSuggestions(prefix, cmds),
-    ':': (emos) => renderEmojiSuggestion(prefix, emos),
-    '@': (members) => renderNameSuggestion(prefix, members),
+    '/': (cmds) => getGenCmdSuggestions(prefix, cmds),
+    '>*': (spaces) => getRoomsSuggestion(prefix, spaces),
+    '>#': (rooms) => getRoomsSuggestion(prefix, rooms),
+    '>@': (peoples) => getRoomsSuggestion(prefix, peoples),
+    ':': (emos) => getEmojiSuggestion(prefix, emos),
+    '@': (members) => getNameSuggestion(prefix, members),
   };
   return cmd[prefix]?.(suggestions);
 }
@@ -173,28 +326,29 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
     asyncSearch.search(searchTerm);
   }
   function activateCmd(prefix) {
+    setCmd({ prefix });
     cmdPrefix = prefix;
-    cmdPrefix = undefined;
 
-    const mx = initMatrix.matrixClient;
+    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 });
-        setCmd({ prefix, suggestions: commands });
-      },
-      ':': () => {
-        asyncSearch.setup(emojis, { keys: ['shortcode'], isContain: true, limit: 20 });
-        setCmd({ prefix, suggestions: emojis.slice(26, 46) });
-      },
-      '@': () => {
-        const members = mx.getRoom(roomId).getJoinedMembers().map((member) => ({
-          name: member.name,
-          userId: member.userId.slice(1),
-        }));
-        asyncSearch.setup(members, { keys: ['name', 'userId'], limit: 20 });
-        const endIndex = members.length > 20 ? 20 : members.length;
-        setCmd({ prefix, suggestions: members.slice(0, endIndex) });
-      },
+      '/': () => 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'], isContain: true, 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]?.();
   }
@@ -204,6 +358,11 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
     cmdPrefix = undefined;
   }
   function fireCmd(myCmd) {
+    if (myCmd.prefix.match(/^>[*#@]$/)) {
+      if (cmd.prefix === '>*') selectTab(myCmd.result.roomId);
+      else selectRoom(myCmd.result.roomId);
+      viewEvent.emit('cmd_fired');
+    }
     if (myCmd.prefix === '/') {
       myCmd.result.exe(roomId, myCmd.option);
       viewEvent.emit('cmd_fired');
@@ -220,6 +379,14 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
     }
     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;
@@ -250,20 +417,26 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
   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]);
 
-  const isError = typeof cmd?.error === 'string';
-  if (cmd === null || isError) {
+  if (typeof cmd?.error === 'string') {
     return (
       <div className="cmd-bar">
-        <FollowingMembers roomTimeline={roomTimeline} />
+        <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>
     );
   }
@@ -271,14 +444,27 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
   return (
     <div className="cmd-bar">
       <div className="cmd-bar__info">
-        <Text variant="b3">TAB</Text>
+        {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">
-        <ScrollView horizontal vertical={false} invisible>
-          <div className="cmd-bar__content-suggestions">
-            { renderSuggestions(cmd, fireCmd) }
-          </div>
-        </ScrollView>
+        {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>
   );

src/app/organisms/room/RoomViewCmdBar.scss

@@ -11,14 +11,37 @@
 
   &__info {
     display: flex;
-    width: 40px;
-    margin: 0 10px 0 14px;
+    width: calc(2 * var(--sp-extra-loose));
+    padding-left: var(--sp-ultra-tight);
     [dir=rtl] & {
-      margin: 0 14px 0 10px;
+      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 {
@@ -26,14 +49,58 @@
     flex: 1;
     display: flex;
 
-    &-suggestions {
+    &-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;
-      display: flex;
-      align-items: center;
+    }
+  }
+  &__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);
+        }
       }
     }
   }

src/app/organisms/room/RoomViewContent.scss

@@ -9,30 +9,5 @@
     min-height: 0;
     min-width: 0;
     padding-bottom: var(--typing-noti-height);
-
-    & .message,
-    & .ph-msg,
-    & .timeline-change {
-      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
-      [dir=rtl] & {
-        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
-      }
-    }
-    
-    & > .divider {
-      margin: var(--sp-extra-tight) var(--sp-normal);
-      margin-right: var(--sp-extra-tight);
-      padding-left: calc(var(--av-small) + var(--sp-tight));
-      [dir=rtl] & {
-        padding: {
-          left: 0;
-          right: calc(var(--av-small) + var(--sp-tight));
-        }
-        margin: {
-          left: var(--sp-extra-tight);
-          right: var(--sp-normal);
-        }
-      }
-    }
   }
 }

src/app/organisms/room/RoomViewFloating.jsx

@@ -7,114 +7,63 @@ import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 
 import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
 import IconButton from '../../atoms/button/IconButton';
 
 import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
-import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
 
 import { getUsersActionJsx } from './common';
 
-function useJumpToEvent(roomTimeline) {
-  const [eventId, setEventId] = useState(null);
-
-  const jumpToEvent = () => {
-    roomTimeline.loadEventTimeline(eventId);
-  };
-
-  const cancelJumpToEvent = () => {
-    roomTimeline.markAllAsRead();
-    setEventId(null);
-  };
-
-  useEffect(() => {
-    const readEventId = roomTimeline.getReadUpToEventId();
-    // we only show "Jump to unread" btn only if the event is not in timeline.
-    // if event is in timeline
-    // we will automatically open the timeline from that event position
-    if (!readEventId?.startsWith('~') && !roomTimeline.hasEventInTimeline(readEventId)) {
-      setEventId(readEventId);
-    }
-
-    const handleMarkAsRead = () => setEventId(null);
-    roomTimeline.on(cons.events.roomTimeline.MARKED_AS_READ, handleMarkAsRead);
-
-    return () => {
-      roomTimeline.removeListener(cons.events.roomTimeline.MARKED_AS_READ, handleMarkAsRead);
-      setEventId(null);
-    };
-  }, [roomTimeline]);
-
-  return [!!eventId, jumpToEvent, cancelJumpToEvent];
-}
-
-function useTypingMembers(roomTimeline) {
+function RoomViewFloating({
+  roomId, roomTimeline, timelineScroll, viewEvent,
+}) {
+  const [reachedBottom, setReachedBottom] = useState(true);
   const [typingMembers, setTypingMembers] = useState(new Set());
+  const mx = initMatrix.matrixClient;
 
-  const updateTyping = (members) => {
-    const mx = initMatrix.matrixClient;
-    members.delete(mx.getUserId());
+  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 [typingMembers];
-}
-
-function useScrollToBottom(roomTimeline) {
-  const [isAtBottom, setIsAtBottom] = useState(true);
-  const handleAtBottom = (atBottom) => setIsAtBottom(atBottom);
-
-  useEffect(() => {
-    setIsAtBottom(true);
-    roomTimeline.on(cons.events.roomTimeline.AT_BOTTOM, handleAtBottom);
-    return () => roomTimeline.removeListener(cons.events.roomTimeline.AT_BOTTOM, handleAtBottom);
-  }, [roomTimeline]);
-
-  return [isAtBottom, setIsAtBottom];
-}
-
-function RoomViewFloating({
-  roomId, roomTimeline,
-}) {
-  const [isJumpToEvent, jumpToEvent, cancelJumpToEvent] = useJumpToEvent(roomTimeline);
-  const [typingMembers] = useTypingMembers(roomTimeline);
-  const [isAtBottom, setIsAtBottom] = useScrollToBottom(roomTimeline);
-
-  const handleScrollToBottom = () => {
-    roomTimeline.emit(cons.events.roomTimeline.SCROLL_TO_LIVE);
-    setIsAtBottom(true);
-  };
-
   return (
     <>
-      <div className={`room-view__unread ${isJumpToEvent ? 'room-view__unread--open' : ''}`}>
-        <Button onClick={jumpToEvent} variant="primary">
-          <Text variant="b2">Jump to unread</Text>
-        </Button>
-        <IconButton
-          onClick={cancelJumpToEvent}
-          variant="primary"
-          size="extra-small"
-          src={TickMarkIC}
-          tooltipPlacement="bottom"
-          tooltip="Mark as read"
-        />
-      </div>
-      <div className={`room-view__typing${typingMembers.size > 0 ? ' room-view__typing--open' : ''}`}>
+      <div className={`room-view__typing${isSomeoneTyping(typingMembers) ? ' room-view__typing--open' : ''}`}>
         <div className="bouncing-loader"><div /></div>
-        <Text variant="b2">{getUsersActionJsx(roomId, [...typingMembers], 'typing...')}</Text>
+        <Text variant="b2">{getTypingMessage(typingMembers)}</Text>
       </div>
-      <div className={`room-view__STB${isAtBottom ? '' : ' room-view__STB--open'}`}>
+      <div className={`room-view__STB${reachedBottom ? '' : ' room-view__STB--open'}`}>
         <IconButton
-          onClick={handleScrollToBottom}
+          onClick={() => {
+            timelineScroll.enableSmoothScroll();
+            timelineScroll.reachBottom();
+            timelineScroll.disableSmoothScroll();
+          }}
           src={ChevronBottomIC}
           tooltip="Scroll to Bottom"
         />
@@ -125,6 +74,10 @@ function RoomViewFloating({
 RoomViewFloating.propTypes = {
   roomId: PropTypes.string.isRequired,
   roomTimeline: PropTypes.shape({}).isRequired,
+  timelineScroll: PropTypes.shape({
+    reachBottom: PropTypes.func,
+  }).isRequired,
+  viewEvent: PropTypes.shape({}).isRequired,
 };
 
 export default RoomViewFloating;

src/app/organisms/room/RoomViewFloating.scss

@@ -88,35 +88,4 @@
       transform: translateY(-28px) scale(1);
     }
   }
-
-  &__unread {
-    position: absolute;
-    top: var(--sp-extra-tight);
-    right: var(--sp-extra-tight);
-    z-index: 999;
-
-    display: none;
-    background-color: var(--bg-surface);
-    border-radius: var(--bo-radius);
-    box-shadow: var(--bs-primary-border);
-    overflow: hidden;
-
-    &--open {
-      display: flex;
-    }
-    
-    & .ic-btn {
-      padding: 6px var(--sp-extra-tight);
-      border-radius: 0;
-    }
-    & .btn-primary {
-      flex: 1;
-      min-width: 0;
-      border-radius: 0;
-      padding: 0 var(--sp-tight);
-      &:focus {
-        background-color: var(--bg-primary-hover);
-      }
-    }
-  }
 }

src/app/organisms/room/RoomViewHeader.jsx

@@ -1,11 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { twemojify } from '../../../util/twemojify';
-
 import initMatrix from '../../../client/initMatrix';
-import { openRoomOptions } from '../../../client/action/navigation';
-import { togglePeopleDrawer } from '../../../client/action/settings';
+import { togglePeopleDrawer, openRoomOptions } from '../../../client/action/navigation';
 import colorMXID from '../../../util/colorMXID';
 import { getEventCords } from '../../../util/common';
 
@@ -27,10 +24,10 @@ function RoomViewHeader({ roomId }) {
 
   return (
     <Header>
-      <Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="small" />
+      <Avatar imageSrc={avatarSrc} text={roomName.slice(0, 1)} bgColor={colorMXID(roomId)} size="small" />
       <TitleWrapper>
-        <Text variant="h2">{twemojify(roomName)}</Text>
-        { typeof roomTopic !== 'undefined' && <p title={roomTopic} className="text text-b3">{twemojify(roomTopic)}</p>}
+        <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} />
       <IconButton

src/app/organisms/room/RoomViewInput.jsx

@@ -9,7 +9,6 @@ import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import settings from '../../../client/state/settings';
 import { openEmojiBoard } from '../../../client/action/navigation';
-import navigation from '../../../client/state/navigation';
 import { bytesToSize, getEventCords } from '../../../util/common';
 import { getUsername } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
@@ -30,12 +29,12 @@ 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*)$/;
+const CMD_REGEX = /(\/|>[#*@]|:|@)(\S*)$/;
 let isTyping = false;
 let isCmdActivated = false;
 let cmdCursorPos = null;
 function RoomViewInput({
-  roomId, roomTimeline, viewEvent,
+  roomId, roomTimeline, timelineScroll, viewEvent,
 }) {
   const [attachment, setAttachment] = useState(null);
   const [isMarkdown, setIsMarkdown] = useState(settings.isMarkdown);
@@ -46,6 +45,7 @@ function RoomViewInput({
   const uploadInputRef = useRef(null);
   const uploadProgressRef = useRef(null);
   const rightOptionsRef = useRef(null);
+  const escBtnRef = useRef(null);
 
   const TYPING_TIMEOUT = 5000;
   const mx = initMatrix.matrixClient;
@@ -92,24 +92,39 @@ function RoomViewInput({
   function rightOptionsA11Y(A11Y) {
     const rightOptions = rightOptionsRef.current.children;
     for (let index = 0; index < rightOptions.length; index += 1) {
-      rightOptions[index].tabIndex = A11Y ? 0 : -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;
-    rightOptionsA11Y(true);
   }
   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();
@@ -137,9 +152,9 @@ function RoomViewInput({
     textAreaRef.current.focus();
   }
 
-  function setUpReply(userId, eventId, body) {
-    setReplyTo({ userId, eventId, body });
-    roomsInput.setReplyTo(roomId, { userId, eventId, body });
+  function setUpReply(userId, eventId, content) {
+    setReplyTo({ userId, eventId, content });
+    roomsInput.setReplyTo(roomId, { userId, eventId, content });
     focusInput();
   }
 
@@ -147,8 +162,9 @@ function RoomViewInput({
     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);
-    navigation.on(cons.events.navigation.REPLY_TO_CLICKED, setUpReply);
+    viewEvent.on('reply_to', setUpReply);
     if (textAreaRef?.current !== null) {
       isTyping = false;
       focusInput();
@@ -160,13 +176,13 @@ function RoomViewInput({
       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);
-      navigation.removeListener(cons.events.navigation.REPLY_TO_CLICKED, setUpReply);
+      viewEvent.removeListener('reply_to', setUpReply);
       if (isCmdActivated) deactivateCmd();
       if (textAreaRef?.current === null) return;
 
       const msg = textAreaRef.current.value;
-      textAreaRef.current.style.height = 'unset';
       inputBaseRef.current.style.backgroundImage = 'unset';
       if (msg.trim() === '') {
         roomsInput.setMessage(roomId, '');
@@ -176,8 +192,7 @@ function RoomViewInput({
     };
   }, [roomId]);
 
-  const sendMessage = async () => {
-    requestAnimationFrame(() => deactivateCmdAndEmit());
+  async function sendMessage() {
     const msgBody = textAreaRef.current.value;
     if (roomsInput.isSending(roomId)) return;
     if (msgBody.trim() === '' && attachment === null) return;
@@ -195,10 +210,11 @@ function RoomViewInput({
     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 === '';
@@ -243,23 +259,33 @@ function RoomViewInput({
       return;
     }
     if (!isCmdActivated) activateCmd(cmdPrefix);
+    requestAnimationFrame(() => {
+      inputBaseRef.current.style.boxShadow = '0 0 0 1px var(--bg-caution)';
+    });
     viewEvent.emit('cmd_process', cmdPrefix, cmdSlug);
   }
 
-  const handleMsgTyping = (e) => {
+  function handleMsgTyping(e) {
     const msg = e.target.value;
     recognizeCmd(e.target.value);
     if (!isCmdActivated) processTyping(msg);
-  };
+  }
 
-  const handleKeyDown = (e) => {
+  function handleKeyDown(e) {
     if (e.keyCode === 13 && e.shiftKey === false) {
       e.preventDefault();
-      sendMessage();
-    }
-  };
 
-  const handlePaste = (e) => {
+      if (isCmdActivated) {
+        viewEvent.emit('cmd_exe');
+      } else sendMessage();
+    }
+    if (e.keyCode === 27 && isCmdActivated) {
+      deactivateCmdAndEmit();
+      e.preventDefault();
+    }
+  }
+
+  function handlePaste(e) {
     if (e.clipboardData === false) {
       return;
     }
@@ -283,19 +309,19 @@ function RoomViewInput({
         }
       }
     }
-  };
+  }
 
   function addEmoji(emoji) {
     textAreaRef.current.value += emoji.unicode;
     textAreaRef.current.focus();
   }
 
-  const handleUploadClick = () => {
+  function handleUploadClick() {
     if (attachment === null) uploadInputRef.current.click();
     else {
       roomsInput.cancelAttachment(roomId);
     }
-  };
+  }
   function uploadFileChange(e) {
     const file = e.target.files.item(0);
     setAttachment(file);
@@ -307,7 +333,7 @@ function RoomViewInput({
   function renderInputs() {
     if (!canISend) {
       return (
-        <Text className="room-input__alert">You do not have permission to post to this room</Text>
+        <Text className="room-input__disallowed">You do not have permission to post to this room</Text>
       );
     }
     return (
@@ -317,20 +343,21 @@ function RoomViewInput({
           <IconButton onClick={handleUploadClick} tooltip={attachment === null ? 'Upload' : 'Cancel'} src={CirclePlusIC} />
         </div>
         <div ref={inputBaseRef} className="room-input__input-container">
-          {roomTimeline.isEncrypted() && <RawIcon size="extra-small" src={ShieldIC} />}
+          {roomTimeline.isEncryptedRoom() && <RawIcon size="extra-small" src={ShieldIC} />}
           <ScrollView autoHide>
             <Text className="room-input__textarea-wrapper">
               <TextareaAutosize
-                id="message-textarea"
                 ref={textAreaRef}
                 onChange={handleMsgTyping}
                 onPaste={handlePaste}
+                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="room-input__option-container">
           <IconButton
@@ -383,7 +410,7 @@ function RoomViewInput({
           userId={replyTo.userId}
           name={getUsername(replyTo.userId)}
           color={colorMXID(replyTo.userId)}
-          body={replyTo.body}
+          content={replyTo.content}
         />
       </div>
     );
@@ -395,7 +422,9 @@ function RoomViewInput({
       { attachment !== null && attachFile() }
       <form className="room-input" onSubmit={(e) => { e.preventDefault(); }}>
         {
-          renderInputs()
+          roomTimeline.room.isSpaceRoom()
+            ? <Text className="room-input__space" variant="b1">Spaces are yet to be implemented</Text>
+            : renderInputs()
         }
       </form>
     </>
@@ -404,6 +433,13 @@ function RoomViewInput({
 RoomViewInput.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,
 };
 

src/app/organisms/room/RoomViewInput.scss

@@ -1,12 +1,18 @@
 .room-input {
   padding: var(--sp-extra-tight) calc(var(--sp-normal) - 2px);
   display: flex;
-  min-height: 56px;
+  min-height: 48px;
 
-  &__alert {
+  &__disallowed {
+    flex: 1;
+    text-align: center;
+  }
+
+  &__space {
+    min-width: 0;
+    align-self: center;
     margin: auto;
     padding: 0 var(--sp-tight);
-    text-align: center;
   }
 
   &__input-container {
@@ -24,6 +30,17 @@
       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;

src/app/organisms/room/common.jsx

@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { twemojify } from '../../../util/twemojify';
-
 import initMatrix from '../../../client/initMatrix';
 import { getUsername, getUsernameOfRoomMember } from '../../../util/matrixUtil';
 
@@ -10,7 +8,7 @@ function getTimelineJSXMessages() {
     join(user) {
       return (
         <>
-          <b>{twemojify(user)}</b>
+          <b>{user}</b>
           {' joined the room'}
         </>
       );
@@ -19,27 +17,27 @@ function getTimelineJSXMessages() {
       const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : '';
       return (
         <>
-          <b>{twemojify(user)}</b>
+          <b>{user}</b>
           {' left the room'}
-          {twemojify(reasonMsg)}
+          {reasonMsg}
         </>
       );
     },
     invite(inviter, user) {
       return (
         <>
-          <b>{twemojify(inviter)}</b>
+          <b>{inviter}</b>
           {' invited '}
-          <b>{twemojify(user)}</b>
+          <b>{user}</b>
         </>
       );
     },
     cancelInvite(inviter, user) {
       return (
         <>
-          <b>{twemojify(inviter)}</b>
+          <b>{inviter}</b>
           {' canceled '}
-          <b>{twemojify(user)}</b>
+          <b>{user}</b>
           {'\'s invite'}
         </>
       );
@@ -47,7 +45,7 @@ function getTimelineJSXMessages() {
     rejectInvite(user) {
       return (
         <>
-          <b>{twemojify(user)}</b>
+          <b>{user}</b>
           {' rejected the invitation'}
         </>
       );
@@ -56,10 +54,10 @@ function getTimelineJSXMessages() {
       const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : '';
       return (
         <>
-          <b>{twemojify(actor)}</b>
+          <b>{actor}</b>
           {' kicked '}
-          <b>{twemojify(user)}</b>
-          {twemojify(reasonMsg)}
+          <b>{user}</b>
+          {reasonMsg}
         </>
       );
     },
@@ -67,26 +65,26 @@ function getTimelineJSXMessages() {
       const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : '';
       return (
         <>
-          <b>{twemojify(actor)}</b>
+          <b>{actor}</b>
           {' banned '}
-          <b>{twemojify(user)}</b>
-          {twemojify(reasonMsg)}
+          <b>{user}</b>
+          {reasonMsg}
         </>
       );
     },
     unban(actor, user) {
       return (
         <>
-          <b>{twemojify(actor)}</b>
+          <b>{actor}</b>
           {' unbanned '}
-          <b>{twemojify(user)}</b>
+          <b>{user}</b>
         </>
       );
     },
     avatarSets(user) {
       return (
         <>
-          <b>{twemojify(user)}</b>
+          <b>{user}</b>
           {' set the avatar'}
         </>
       );
@@ -94,7 +92,7 @@ function getTimelineJSXMessages() {
     avatarChanged(user) {
       return (
         <>
-          <b>{twemojify(user)}</b>
+          <b>{user}</b>
           {' changed the avatar'}
         </>
       );
@@ -102,7 +100,7 @@ function getTimelineJSXMessages() {
     avatarRemoved(user) {
       return (
         <>
-          <b>{twemojify(user)}</b>
+          <b>{user}</b>
           {' removed the avatar'}
         </>
       );
@@ -110,27 +108,27 @@ function getTimelineJSXMessages() {
     nameSets(user, newName) {
       return (
         <>
-          <b>{twemojify(user)}</b>
+          <b>{user}</b>
           {' set the display name to '}
-          <b>{twemojify(newName)}</b>
+          <b>{newName}</b>
         </>
       );
     },
     nameChanged(user, newName) {
       return (
         <>
-          <b>{twemojify(user)}</b>
+          <b>{user}</b>
           {' changed the display name to '}
-          <b>{twemojify(newName)}</b>
+          <b>{newName}</b>
         </>
       );
     },
     nameRemoved(user, lastName) {
       return (
         <>
-          <b>{twemojify(user)}</b>
+          <b>{user}</b>
           {' removed the display name '}
-          <b>{twemojify(lastName)}</b>
+          <b>{lastName}</b>
         </>
       );
     },
@@ -143,7 +141,7 @@ function getUsersActionJsx(roomId, userIds, actionStr) {
     if (room?.getMember(userId)) return getUsernameOfRoomMember(room.getMember(userId));
     return getUsername(userId);
   };
-  const getUserJSX = (userId) => <b>{twemojify(getUserDisplayName(userId))}</b>;
+  const getUserJSX = (userId) => <b>{getUserDisplayName(userId)}</b>;
   if (!Array.isArray(userIds)) return 'Idle';
   if (userIds.length === 0) return 'Idle';
   const MAX_VISIBLE_COUNT = 3;
@@ -167,6 +165,27 @@ function getUsersActionJsx(roomId, userIds, actionStr) {
   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) => ({
@@ -215,8 +234,39 @@ function parseTimelineChange(mEvent) {
   }
 }
 
+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/search/Search.jsx

@@ -1,239 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import './Search.scss';
-
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import AsyncSearch from '../../../util/AsyncSearch';
-import { selectRoom, selectTab } from '../../../client/action/navigation';
-
-import Text from '../../atoms/text/Text';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import IconButton from '../../atoms/button/IconButton';
-import Input from '../../atoms/input/Input';
-import RawModal from '../../atoms/modal/RawModal';
-import ScrollView from '../../atoms/scroll/ScrollView';
-import RoomSelector from '../../molecules/room-selector/RoomSelector';
-
-import SearchIC from '../../../../public/res/ic/outlined/search.svg';
-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';
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
-
-function useVisiblityToggle(setResult) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  useEffect(() => {
-    const handleSearchOpen = (term) => {
-      setResult({
-        term,
-        chunk: [],
-      });
-      setIsOpen(true);
-    };
-    navigation.on(cons.events.navigation.SEARCH_OPENED, handleSearchOpen);
-    return () => {
-      navigation.removeListener(cons.events.navigation.SEARCH_OPENED, handleSearchOpen);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (isOpen === false) {
-      setResult(undefined);
-    }
-  }, [isOpen]);
-
-  const requestClose = () => setIsOpen(false);
-
-  return [isOpen, requestClose];
-}
-
-function mapRoomIds(roomIds, type) {
-  const mx = initMatrix.matrixClient;
-  const { directs, roomIdToParents } = initMatrix.roomList;
-
-  return roomIds.map((roomId) => {
-    let roomType = type;
-
-    if (!roomType) {
-      roomType = directs.has(roomId) ? 'direct' : 'room';
-    }
-
-    const room = mx.getRoom(roomId);
-    const parentSet = roomIdToParents.get(roomId);
-    const parentNames = parentSet
-      ? [...parentSet].map((parentId) => mx.getRoom(parentId).name)
-      : undefined;
-
-    const parents = parentNames ? parentNames.join(', ') : null;
-
-    return ({
-      type: roomType,
-      name: room.name,
-      parents,
-      roomId,
-      room,
-    });
-  });
-}
-
-function Search() {
-  const [result, setResult] = useState(null);
-  const [asyncSearch] = useState(new AsyncSearch());
-  const [isOpen, requestClose] = useVisiblityToggle(setResult);
-  const searchRef = useRef(null);
-  const mx = initMatrix.matrixClient;
-
-  const handleSearchResults = (chunk, term) => {
-    setResult({
-      term,
-      chunk,
-    });
-  };
-
-  const generateResults = (term) => {
-    const prefix = term.match(/^[#@*]/)?.[0];
-
-    if (term.length === 1) {
-      const { roomList } = initMatrix;
-      const spaces = mapRoomIds([...roomList.spaces], 'space').reverse();
-      const rooms = mapRoomIds([...roomList.rooms], 'room').reverse();
-      const directs = mapRoomIds([...roomList.directs], 'direct').reverse();
-
-      if (prefix === '*') {
-        asyncSearch.setup(spaces, { keys: 'name', isContain: true, limit: 20 });
-        handleSearchResults(spaces, '*');
-      } else if (prefix === '#') {
-        asyncSearch.setup(rooms, { keys: 'name', isContain: true, limit: 20 });
-        handleSearchResults(rooms, '#');
-      } else if (prefix === '@') {
-        asyncSearch.setup(directs, { keys: 'name', isContain: true, limit: 20 });
-        handleSearchResults(directs, '@');
-      } else {
-        const dataList = spaces.concat(rooms, directs);
-        asyncSearch.setup(dataList, { keys: 'name', isContain: true, limit: 20 });
-        asyncSearch.search(term);
-      }
-    } else {
-      asyncSearch.search(prefix ? term.slice(1) : term);
-    }
-  };
-
-  const loadRecentRooms = () => {
-    const { recentRooms } = navigation;
-    handleSearchResults(mapRoomIds(recentRooms).reverse(), '');
-  };
-
-  const handleAfterOpen = () => {
-    searchRef.current.focus();
-    loadRecentRooms();
-    asyncSearch.on(asyncSearch.RESULT_SENT, handleSearchResults);
-
-    if (typeof result.term === 'string') {
-      generateResults(result.term);
-      searchRef.current.value = result.term;
-    }
-  };
-
-  const handleAfterClose = () => {
-    asyncSearch.removeListener(asyncSearch.RESULT_SENT, handleSearchResults);
-  };
-
-  const handleOnChange = () => {
-    const { value } = searchRef.current;
-    if (value.length === 0) {
-      loadRecentRooms();
-      return;
-    }
-    generateResults(value);
-  };
-
-  const handleCross = (e) => {
-    e.preventDefault();
-    const { value } = searchRef.current;
-    if (value.length === 0) requestClose();
-    else {
-      searchRef.current.value = '';
-      searchRef.current.focus();
-    }
-  };
-
-  const openItem = (roomId, type) => {
-    if (type === 'space') selectTab(roomId);
-    else selectRoom(roomId);
-    requestClose();
-  };
-
-  const openFirstResult = () => {
-    const { chunk } = result;
-    if (chunk?.length > 0) {
-      const item = chunk[0];
-      openItem(item.roomId, item.type);
-    }
-  };
-
-  const notifs = initMatrix.notifications;
-  const renderRoomSelector = (item) => {
-    const isPrivate = item.room.getJoinRule() === 'invite';
-    let imageSrc = null;
-    let iconSrc = null;
-    if (item.type === 'room') iconSrc = isPrivate ? HashLockIC : HashIC;
-    if (item.type === 'space') iconSrc = isPrivate ? SpaceLockIC : SpaceIC;
-    if (item.type === 'direct') imageSrc = item.room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
-
-    const isUnread = notifs.hasNoti(item.roomId);
-    const noti = notifs.getNoti(item.roomId);
-
-    return (
-      <RoomSelector
-        key={item.roomId}
-        name={item.name}
-        parentName={item.parents}
-        roomId={item.roomId}
-        imageSrc={imageSrc}
-        iconSrc={iconSrc}
-        isUnread={isUnread}
-        notificationCount={noti.total}
-        isAlert={noti.highlight > 0}
-        onClick={() => openItem(item.roomId, item.type)}
-      />
-    );
-  };
-
-  return (
-    <RawModal
-      className="search-dialog__model dialog-model"
-      isOpen={isOpen}
-      onAfterOpen={handleAfterOpen}
-      onAfterClose={handleAfterClose}
-      onRequestClose={requestClose}
-      size="small"
-    >
-      <div className="search-dialog">
-        <form className="search-dialog__input" onSubmit={(e) => { e.preventDefault(); openFirstResult()}}>
-          <RawIcon src={SearchIC} size="small" />
-          <Input
-            onChange={handleOnChange}
-            forwardRef={searchRef}
-            placeholder="Search"
-          />
-          <IconButton size="small" src={CrossIC} type="reset" onClick={handleCross} tabIndex={-1} />
-        </form>
-        <div className="search-dialog__content-wrapper">
-          <ScrollView autoHide>
-            <div className="search-dialog__content">
-              { Array.isArray(result?.chunk) && result.chunk.map(renderRoomSelector) }
-            </div>
-          </ScrollView>
-        </div>
-        <div className="search-dialog__footer">
-          <Text variant="b3">Type # for rooms, @ for DMs and * for spaces. Hotkey: Ctrl + k</Text>
-        </div>
-      </div>
-    </RawModal>
-  );
-}
-
-export default Search;

src/app/organisms/search/Search.scss

@@ -1,86 +0,0 @@
-.search-dialog__model {
-  --modal-height: 380px;
-  height: 100%;
-  background-color: var(--bg-surface);
-}
-
-.search-dialog {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-  &__input {
-    padding: var(--sp-normal);
-    display: flex;
-    align-items: center;
-    position: relative;
-
-    & > .ic-raw {
-      position: absolute;
-      left: calc(var(--sp-normal) + var(--sp-tight));
-      [dir=rtl] & {
-        left: unset;
-        right: calc(var(--sp-normal) + var(--sp-tight));
-      }
-    }
-    & > .ic-btn {
-      border-radius: calc(var(--bo-radius) / 2);
-      position: absolute;
-      right: calc(var(--sp-normal) + var(--sp-extra-tight));
-      [dir=rtl] & {
-        right: unset;
-        left: calc(var(--sp-normal) + var(--sp-extra-tight));
-      }
-    }
-    & .input-container {
-      min-width: 0;
-      flex: 1;
-    }
-
-    & input {
-      padding-left: 40px;
-      padding-right: 40px;
-      font-size: var(--fs-s1);
-      letter-spacing: var(--ls-s1);
-      line-height: var(--lh-s1);
-      color: var(--tc-surface-high);
-    }
-  }
-  &__content-wrapper {
-    min-height: 0;
-    flex: 1;
-    position: relative;
-    &::before,
-    &::after {
-      position: absolute;
-      top: 0;
-      z-index: 99;
-      content: "";
-      display: inline-block;
-      width: 100%;
-      height: 8px;
-      background-image: linear-gradient(to bottom, var(--bg-surface), var(--bg-surface-transparent));
-    }
-    &::after {
-      top: unset;
-      bottom: 0;
-      background-image: linear-gradient(to bottom, var(--bg-surface-transparent), var(--bg-surface));
-    }
-  }
-
-  &__content {
-    padding: var(--sp-extra-tight) var(--sp-normal);
-    padding-right: var(--sp-extra-tight);
-    
-    [dir=rtl] & {
-      padding-left: var(--sp-extra-tight);
-      padding-right: var(--sp-normal);
-    }
-  }
-
-  &__footer {
-    padding: var(--sp-tight) var(--sp-normal);
-    text-align: center;
-  }
-
-}

src/app/organisms/settings/Settings.jsx

@@ -3,9 +3,8 @@ import PropTypes from 'prop-types';
 import './Settings.scss';
 
 import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
 import settings from '../../../client/state/settings';
-import { toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents } from '../../../client/action/settings';
+import { toggleMarkdown } from '../../../client/action/settings';
 
 import Text from '../../atoms/text/Text';
 import IconButton from '../../atoms/button/IconButton';
@@ -15,8 +14,7 @@ import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls'
 
 import PopupWindow, { PWContentSelector } from '../../molecules/popup-window/PopupWindow';
 import SettingTile from '../../molecules/setting-tile/SettingTile';
-import ImportE2ERoomKeys from '../../molecules/import-export-e2e-room-keys/ImportE2ERoomKeys';
-import ExportE2ERoomKeys from '../../molecules/import-export-e2e-room-keys/ExportE2ERoomKeys';
+import ImportE2ERoomKeys from '../../molecules/import-e2e-room-keys/ImportE2ERoomKeys';
 
 import ProfileEditor from '../profile-editor/ProfileEditor';
 
@@ -66,31 +64,11 @@ function AppearanceSection() {
         options={(
           <Toggle
             isActive={settings.isMarkdown}
-            onToggle={() => { toggleMarkdown(); updateState({}); }}
+            onToggle={(isMarkdown) => { toggleMarkdown(isMarkdown); updateState({}); }}
           />
         )}
         content={<Text variant="b3">Format messages with markdown syntax before sending.</Text>}
       />
-      <SettingTile
-        title="Hide membership events"
-        options={(
-          <Toggle
-            isActive={settings.hideMembershipEvents}
-            onToggle={() => { toggleMembershipEvents(); updateState({}); }}
-          />
-        )}
-        content={<Text variant="b3">Hide membership change messages from room timeline. (Join, Leave, Invite, Kick and Ban)</Text>}
-      />
-      <SettingTile
-        title="Hide nick/avatar events"
-        options={(
-          <Toggle
-            isActive={settings.hideNickAvatarEvents}
-            onToggle={() => { toggleNickAvatarEvents(); updateState({}); }}
-          />
-        )}
-        content={<Text variant="b3">Hide nick and avatar change messages from room timeline.</Text>}
-      />
     </div>
   );
 }
@@ -105,15 +83,6 @@ function SecuritySection() {
         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="Export E2E room keys"
-        content={(
-          <>
-            <Text variant="b3">Export end-to-end encryption room keys to decrypt old messages in other session. In order to encrypt keys you need to set a password, which will be used while importing.</Text>
-            <ExportE2ERoomKeys />
-          </>
-        )}
-      />
       <SettingTile
         title="Import E2E room keys"
         content={(
@@ -135,7 +104,7 @@ function AboutSection() {
         <div>
           <Text variant="h2">
             Cinny
-            <span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>{`v${cons.version}`}</span>
+            <span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>v1.4.0</span>
           </Text>
           <Text>Yet another matrix client</Text>
 

src/app/pages/App.jsx

@@ -1,4 +1,7 @@
 import React from 'react';
+import {
+  BrowserRouter,
+} from 'react-router-dom';
 
 import { isAuthenticated } from '../../client/state/auth';
 
@@ -6,7 +9,11 @@ import Auth from '../templates/auth/Auth';
 import Client from '../templates/client/Client';
 
 function App() {
-  return isAuthenticated() ? <Client /> : <Auth />;
+  return (
+    <BrowserRouter>
+      { isAuthenticated() ? <Client /> : <Auth />}
+    </BrowserRouter>
+  );
 }
 
 export default App;

src/app/templates/auth/Auth.jsx

@@ -1,14 +1,11 @@
-/* eslint-disable react/prop-types */
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './Auth.scss';
 import ReCAPTCHA from 'react-google-recaptcha';
-import { Formik } from 'formik';
 
+import { useLocation } from 'react-router-dom';
 import * as auth from '../../../client/action/auth';
 import cons from '../../../client/state/cons';
-import { Debounce, getUrlPrams } from '../../../util/common';
-import { getBaseUrl } from '../../../util/matrixUtil';
 
 import Text from '../../atoms/text/Text';
 import Button from '../../atoms/button/Button';
@@ -16,556 +13,356 @@ import IconButton from '../../atoms/button/IconButton';
 import Input from '../../atoms/input/Input';
 import Spinner from '../../atoms/spinner/Spinner';
 import ScrollView from '../../atoms/scroll/ScrollView';
-import Header, { TitleWrapper } from '../../atoms/header/Header';
-import Avatar from '../../atoms/avatar/Avatar';
-import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
 
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+import EyeIC from '../../../../public/res/ic/outlined/eye.svg';
 import CinnySvg from '../../../../public/res/svg/cinny.svg';
 import SSOButtons from '../../molecules/sso-buttons/SSOButtons';
 
+// This regex validates historical usernames, which don't satisfy today's username requirements.
+// 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 can only contain characters a-z, 0-9, or \'=_-./\'';
+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,127}$/;
-const BAD_PASSWORD_ERROR = 'Password must contain at least 1 lowercase, 1 uppercase, 1 number, 1 non-alphanumeric character, 8-127 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 = 'Passwords don\'t match.';
 
-const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+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';
 
 function isValidInput(value, regex) {
   if (typeof regex === 'string') return regex === value;
   return regex.test(value);
 }
+function renderErrorMessage(error) {
+  const $error = document.getElementById('auth_error');
+  $error.textContent = error;
+  $error.style.display = 'block';
+}
+function showBadInputError($input, error, stopAutoFocus) {
+  renderErrorMessage(error);
+  if (!stopAutoFocus) $input.focus();
+  const myInput = $input;
+  myInput.style.border = '1px solid var(--bg-danger)';
+  myInput.style.boxShadow = 'none';
+  document.getElementById('auth_submit-btn').disabled = true;
+}
+
+function validateOnChange(targetInput, regex, error, stopAutoFocus) {
+  if (!isValidInput(targetInput.value, regex) && targetInput.value) {
+    showBadInputError(targetInput, error, stopAutoFocus);
+    return false;
+  }
+  document.getElementById('auth_error').style.display = 'none';
+  targetInput.style.removeProperty('border');
+  targetInput.style.removeProperty('box-shadow');
+  document.getElementById('auth_submit-btn').disabled = false;
+  return true;
+}
+
+/**
+ * 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();
 }
 
-let searchingHs = null;
-function Homeserver({ onChange }) {
-  const [hs, setHs] = useState(null);
-  const [debounce] = useState(new Debounce());
-  const [process, setProcess] = useState({ isLoading: true, message: 'Loading homeserver list...' });
-  const hsRef = useRef();
-
-  const setupHsConfig = async (servername) => {
-    setProcess({ isLoading: true, message: 'Looking for homeserver...' });
-    let baseUrl = null;
-    try {
-      baseUrl = await getBaseUrl(servername);
-    } catch (e) {
-      baseUrl = e.message;
-    }
-    if (searchingHs !== servername) return;
-    setProcess({ isLoading: true, message: `Connecting to ${baseUrl}...` });
-    const tempClient = auth.createTemporaryClient(baseUrl);
-
-    Promise.allSettled([tempClient.loginFlows(), tempClient.register()])
-      .then((values) => {
-        const loginFlow = values[0].status === 'fulfilled' ? values[0]?.value : undefined;
-        const registerFlow = values[1].status === 'rejected' ? values[1]?.reason?.data : undefined;
-        if (loginFlow === undefined || registerFlow === undefined) throw new Error();
-
-        if (searchingHs !== servername) return;
-        onChange({ baseUrl, login: loginFlow, register: registerFlow });
-        setProcess({ isLoading: false });
-      }).catch(() => {
-        if (searchingHs !== servername) return;
-        onChange(null);
-        setProcess({ isLoading: false, error: 'Unable to connect. Please check your input.' });
-      });
-  };
-
-  useEffect(() => {
-    onChange(null);
-    if (hs === null || hs?.selected.trim() === '') return;
-    searchingHs = hs.selected;
-    setupHsConfig(hs.selected);
-  }, [hs]);
-
-  useEffect(async () => {
-    const link = window.location.href;
-    const configFileUrl = `${link}${link[link.length - 1] === '/' ? '' : '/'}config.json`;
-    try {
-      const result = await (await fetch(configFileUrl, { method: 'GET' })).json();
-      const selectedHs = result?.defaultHomeserver;
-      const hsList = result?.homeserverList;
-      if (!hsList?.length > 0 || selectedHs < 0 || selectedHs >= hsList?.length) {
-        throw new Error();
-      }
-      setHs({ selected: hsList[selectedHs], list: hsList });
-    } catch {
-      setHs({ selected: 'matrix.org', list: ['matrix.org'] });
-    }
-  }, []);
-
-  const handleHsInput = (e) => {
-    const { value } = e.target;
-    setProcess({ isLoading: false });
-    debounce._(async () => {
-      setHs({ selected: value, list: hs.list });
-    }, 700)();
-  };
-
-  return (
-    <>
-      <div className="homeserver-form">
-        <Input name="homeserver" onChange={handleHsInput} value={hs?.selected} forwardRef={hsRef} label="Homeserver" />
-        <ContextMenu
-          placement="right"
-          content={(hideMenu) => (
-            <>
-              <MenuHeader>Homeserver list</MenuHeader>
-              {
-                hs?.list.map((hsName) => (
-                  <MenuItem
-                    key={hsName}
-                    onClick={() => {
-                      hideMenu();
-                      hsRef.current.value = hsName;
-                      setHs({ selected: hsName, list: hs.list });
-                    }}
-                  >
-                    {hsName}
-                  </MenuItem>
-                ))
-              }
-            </>
-          )}
-          render={(toggleMenu) => <IconButton onClick={toggleMenu} src={ChevronBottomIC} />}
-        />
-      </div>
-      {process.error !== undefined && <Text className="homeserver-form__error" variant="b3">{process.error}</Text>}
-      {process.isLoading && (
-        <div className="homeserver-form__status flex--center">
-          <Spinner size="small" />
-          <Text variant="b2">{process.message}</Text>
-        </div>
-      )}
-    </>
-  );
-}
-Homeserver.propTypes = {
-  onChange: PropTypes.func.isRequired,
-};
-
-function Login({ loginFlow, baseUrl }) {
-  const [typeIndex, setTypeIndex] = useState(0);
-  const loginTypes = ['Username', 'Email'];
-  const isPassword = loginFlow?.filter((flow) => flow.type === 'm.login.password')[0];
-  const ssoProviders = loginFlow?.filter((flow) => flow.type === 'm.login.sso')[0];
-
-  const initialValues = {
-    username: '', password: '', email: '', other: '',
-  };
-
-  const validator = (values) => {
-    const errors = {};
-    if (typeIndex === 0 && values.username.length > 0 && values.username.indexOf(':') > -1) {
-      errors.username = 'Username must contain local-part only';
-    }
-    if (typeIndex === 1 && values.email.length > 0 && !isValidInput(values.email, EMAIL_REGEX)) {
-      errors.email = BAD_EMAIL_ERROR;
-    }
-    return errors;
-  };
-  const submitter = (values, actions) => auth.login(
-    baseUrl,
-    typeIndex === 0 ? normalizeUsername(values.username) : undefined,
-    typeIndex === 1 ? values.email : undefined,
-    values.password,
-  ).then(() => {
-    actions.setSubmitting(true);
-    window.location.reload();
-  }).catch((error) => {
-    let msg = error.message;
-    if (msg === 'Unknown message') msg = 'Please check your credentials';
-    actions.setErrors({
-      password: msg === 'Invalid password' ? msg : undefined,
-      other: msg !== 'Invalid password' ? msg : undefined,
-    });
-    actions.setSubmitting(false);
-  });
-
-  return (
-    <>
-      <div className="auth-form__heading">
-        <Text variant="h2">Login</Text>
-        {isPassword && (
-          <ContextMenu
-            placement="right"
-            content={(hideMenu) => (
-              loginTypes.map((type, index) => (
-                <MenuItem
-                  key={type}
-                  onClick={() => {
-                    hideMenu();
-                    setTypeIndex(index);
-                  }}
-                >
-                  {type}
-                </MenuItem>
-              ))
-            )}
-            render={(toggleMenu) => (
-              <Button onClick={toggleMenu} iconSrc={ChevronBottomIC}>
-                {loginTypes[typeIndex]}
-              </Button>
-            )}
-          />
-        )}
-      </div>
-      {isPassword && (
-        <Formik
-          initialValues={initialValues}
-          onSubmit={submitter}
-          validate={validator}
-        >
-          {({
-            values, errors, handleChange, handleSubmit, isSubmitting,
-          }) => (
-            <>
-              {isSubmitting && <LoadingScreen message="Login in progress..." />}
-              <form className="auth-form" onSubmit={handleSubmit}>
-                {typeIndex === 0 && <Input values={values.username} name="username" onChange={handleChange} label="Username" type="username" required />}
-                {errors.username && <Text className="auth-form__error" variant="b3">{errors.username}</Text>}
-                {typeIndex === 1 && <Input values={values.email} name="email" onChange={handleChange} label="Email" type="email" required />}
-                {errors.email && <Text className="auth-form__error" variant="b3">{errors.email}</Text>}
-                <Input values={values.password} name="password" onChange={handleChange} label="Password" type="password" required />
-                {errors.password && <Text className="auth-form__error" variant="b3">{errors.password}</Text>}
-                {errors.other && <Text className="auth-form__error" variant="b3">{errors.other}</Text>}
-                <div className="auth-form__btns">
-                  <Button variant="primary" type="submit" disabled={isSubmitting}>Login</Button>
-                </div>
-              </form>
-            </>
-          )}
-        </Formik>
-      )}
-      {ssoProviders && isPassword && <Text className="sso__divider">OR</Text>}
-      {ssoProviders && (
-        <SSOButtons
-          type="sso"
-          identityProviders={ssoProviders.identity_providers}
-          baseUrl={baseUrl}
-        />
-      )}
-    </>
-  );
-}
-Login.propTypes = {
-  loginFlow: PropTypes.arrayOf(
-    PropTypes.shape({}),
-  ).isRequired,
-  baseUrl: PropTypes.string.isRequired,
-};
-
-let sid;
-let clientSecret;
-function Register({ registerInfo, loginFlow, baseUrl }) {
-  const [process, setProcess] = useState({});
-  const formRef = useRef();
-
-  const ssoProviders = loginFlow?.filter((flow) => flow.type === 'm.login.sso')[0];
-  const isDisabled = registerInfo.errcode !== undefined;
-  const { flows, params, session } = registerInfo;
-
-  let isEmail = false;
-  let isEmailRequired = true;
-  let isRecaptcha = false;
-  let isTerms = false;
-  let isDummy = false;
-
-  flows?.forEach((flow) => {
-    if (isEmailRequired && flow.stages.indexOf('m.login.email.identity') === -1) isEmailRequired = false;
-    if (!isEmail) isEmail = flow.stages.indexOf('m.login.email.identity') > -1;
-    if (!isRecaptcha) isRecaptcha = flow.stages.indexOf('m.login.recaptcha') > -1;
-    if (!isTerms) isTerms = flow.stages.indexOf('m.login.terms') > -1;
-    if (!isDummy) isDummy = flow.stages.indexOf('m.login.dummy') > -1;
-  });
-
-  const initialValues = {
-    username: '', password: '', confirmPassword: '', email: '', other: '',
-  };
-
-  const validator = (values) => {
-    const errors = {};
-    if (values.username.list > 255) errors.username = USER_ID_TOO_LONG_ERROR;
-    if (values.username.length > 0 && !isValidInput(values.username, LOCALPART_SIGNUP_REGEX)) {
-      errors.username = BAD_LOCALPART_ERROR;
-    }
-    if (values.password.length > 0 && !isValidInput(values.password, PASSWORD_STRENGHT_REGEX)) {
-      errors.password = BAD_PASSWORD_ERROR;
-    }
-    if (values.confirmPassword.length > 0
-      && !isValidInput(values.confirmPassword, values.password)) {
-      errors.confirmPassword = CONFIRM_PASSWORD_ERROR;
-    }
-    if (values.email.length > 0 && !isValidInput(values.email, EMAIL_REGEX)) {
-      errors.email = BAD_EMAIL_ERROR;
-    }
-    return errors;
-  };
-  const submitter = (values, actions) => {
-    const tempClient = auth.createTemporaryClient(baseUrl);
-    clientSecret = tempClient.generateClientSecret();
-    return tempClient.isUsernameAvailable(values.username)
-      .then(async (isAvail) => {
-        if (!isAvail) {
-          actions.setErrors({ username: 'Username is already taken' });
-          actions.setSubmitting(false);
-        }
-        if (isEmail && values.email.length > 0) {
-          const result = await auth.verifyEmail(baseUrl, values.email, clientSecret, 1);
-          if (result.errcode) {
-            if (result.errcode === 'M_THREEPID_IN_USE') actions.setErrors({ email: result.error });
-            else actions.setErrors({ others: result.error || result.message });
-            actions.setSubmitting(false);
-            return;
-          }
-          sid = result.sid;
-        }
-        setProcess({ type: 'processing', message: 'Registration in progress....' });
-        actions.setSubmitting(false);
-      }).catch((err) => {
-        const msg = err.message || err.error;
-        if (['M_USER_IN_USE', 'M_INVALID_USERNAME', 'M_EXCLUSIVE'].indexOf(err.errcode) > -1) {
-          actions.setErrors({ username: err.errcode === 'M_USER_IN_USE' ? 'Username is already taken' : msg });
-        } else if (msg) actions.setErrors({ other: msg });
-
-        actions.setSubmitting(false);
-      });
-  };
-
-  const refreshWindow = () => window.location.reload();
-
-  const getInputs = () => {
-    const f = formRef.current;
-    return [f.username.value, f.password.value, f?.email?.value];
-  };
-
-  useEffect(() => {
-    if (process.type !== 'processing') return;
-    const asyncProcess = async () => {
-      const [username, password, email] = getInputs();
-      const d = await auth.completeRegisterStage(baseUrl, username, password, { session });
-
-      if (isRecaptcha && !d.completed.includes('m.login.recaptcha')) {
-        const sitekey = params['m.login.recaptcha'].public_key;
-        setProcess({ type: 'm.login.recaptcha', sitekey });
-        return;
-      }
-      if (isTerms && !d.completed.includes('m.login.terms')) {
-        const pp = params['m.login.terms'].policies.privacy_policy;
-        const url = pp?.en.url || pp[Object.keys(pp)[0]].url;
-        setProcess({ type: 'm.login.terms', url });
-        return;
-      }
-      if (isEmail && email.length > 0) {
-        setProcess({ type: 'm.login.email.identity', email });
-        return;
-      }
-      if (isDummy) {
-        const data = await auth.completeRegisterStage(baseUrl, username, password, {
-          type: 'm.login.dummy',
-          session,
-        });
-        if (data.done) refreshWindow();
-      }
-    };
-    asyncProcess();
-  }, [process]);
-
-  const handleRecaptcha = async (value) => {
-    if (typeof value !== 'string') return;
-    const [username, password] = getInputs();
-    const d = await auth.completeRegisterStage(baseUrl, username, password, {
-      type: 'm.login.recaptcha',
-      response: value,
-      session,
-    });
-    if (d.done) refreshWindow();
-    else setProcess({ type: 'processing', message: 'Registration in progress...' });
-  };
-  const handleTerms = async () => {
-    const [username, password] = getInputs();
-    const d = await auth.completeRegisterStage(baseUrl, username, password, {
-      type: 'm.login.terms',
-      session,
-    });
-    if (d.done) refreshWindow();
-    else setProcess({ type: 'processing', message: 'Registration in progress...' });
-  };
-  const handleEmailVerify = async () => {
-    const [username, password] = getInputs();
-    const d = await auth.completeRegisterStage(baseUrl, username, password, {
-      type: 'm.login.email.identity',
-      threepidCreds: { sid, client_secret: clientSecret },
-      threepid_creds: { sid, client_secret: clientSecret },
-      session,
-    });
-    if (d.done) refreshWindow();
-    else setProcess({ type: 'processing', message: 'Registration in progress...' });
-  };
-
-  return (
-    <>
-      {process.type === 'processing' && <LoadingScreen message={process.message} />}
-      {process.type === 'm.login.recaptcha' && <Recaptcha message="Please check the box below to proceed." sitekey={process.sitekey} onChange={handleRecaptcha} />}
-      {process.type === 'm.login.terms' && <Terms url={process.url} onSubmit={handleTerms} />}
-      {process.type === 'm.login.email.identity' && <EmailVerify email={process.email} onContinue={handleEmailVerify} />}
-      <div className="auth-form__heading">
-        {!isDisabled && <Text variant="h2">Register</Text>}
-        {isDisabled && <Text className="auth-form__error">{registerInfo.error}</Text>}
-      </div>
-      {!isDisabled && (
-        <Formik
-          initialValues={initialValues}
-          onSubmit={submitter}
-          validate={validator}
-        >
-          {({
-            values, errors, handleChange, handleSubmit, isSubmitting,
-          }) => (
-            <>
-              {process.type === undefined && isSubmitting && <LoadingScreen message="Registration in progress..." />}
-              <form className="auth-form" ref={formRef} onSubmit={handleSubmit}>
-                <Input values={values.username} name="username" onChange={handleChange} label="Username" type="username" required />
-                {errors.username && <Text className="auth-form__error" variant="b3">{errors.username}</Text>}
-                <Input values={values.password} name="password" onChange={handleChange} label="Password" type="password" required />
-                {errors.password && <Text className="auth-form__error" variant="b3">{errors.password}</Text>}
-                <Input values={values.confirmPassword} name="confirmPassword" onChange={handleChange} label="Confirm password" type="password" required />
-                {errors.confirmPassword && <Text className="auth-form__error" variant="b3">{errors.confirmPassword}</Text>}
-                {isEmail && <Input values={values.email} name="email" onChange={handleChange} label={`Email${isEmailRequired ? '' : ' (optional)'}`} type="email" required={isEmailRequired} />}
-                {errors.email && <Text className="auth-form__error" variant="b3">{errors.email}</Text>}
-                {errors.other && <Text className="auth-form__error" variant="b3">{errors.other}</Text>}
-                <div className="auth-form__btns">
-                  <Button variant="primary" type="submit" disabled={isSubmitting}>Register</Button>
-                </div>
-              </form>
-            </>
-          )}
-        </Formik>
-      )}
-      {isDisabled && ssoProviders && (
-        <SSOButtons
-          type="sso"
-          identityProviders={ssoProviders.identity_providers}
-          baseUrl={baseUrl}
-        />
-      )}
-    </>
-  );
-}
-Register.propTypes = {
-  registerInfo: PropTypes.shape({}).isRequired,
-  loginFlow: PropTypes.arrayOf(
-    PropTypes.shape({}),
-  ).isRequired,
-  baseUrl: PropTypes.string.isRequired,
-};
-
-function AuthCard() {
-  const [hsConfig, setHsConfig] = useState(null);
-  const [type, setType] = useState('login');
-
-  const handleHsChange = (info) => {
-    console.log(info);
-    setHsConfig(info);
-  };
-
-  return (
-    <>
-      <Homeserver onChange={handleHsChange} />
-      { hsConfig !== null && (
-        type === 'login'
-          ? <Login loginFlow={hsConfig.login.flows} baseUrl={hsConfig.baseUrl} />
-          : (
-            <Register
-              registerInfo={hsConfig.register}
-              loginFlow={hsConfig.login.flows}
-              baseUrl={hsConfig.baseUrl}
-            />
-          )
-      )}
-      { hsConfig !== null && (
-        <Text variant="b2" className="auth-card__switch flex--center">
-          {`${(type === 'login' ? 'Don\'t have' : 'Already have')} an account?`}
-          <button
-            type="button"
-            style={{ color: 'var(--tc-link)', cursor: 'pointer', margin: '0 var(--sp-ultra-tight)' }}
-            onClick={() => setType((type === 'login') ? 'register' : 'login')}
-          >
-            { type === 'login' ? ' Register' : ' Login' }
-          </button>
-        </Text>
-      )}
-    </>
-  );
-}
-
 function Auth() {
-  const [loginToken, setLoginToken] = useState(getUrlPrams('loginToken'));
+  const [type, setType] = useState('login');
+  const [process, changeProcess] = useState(null);
+  const [homeserver, changeHomeserver] = useState('matrix.org');
 
-  useEffect(async () => {
-    if (!loginToken) return;
-    if (localStorage.getItem(cons.secretKey.BASE_URL) === undefined) {
-      setLoginToken(null);
+  const usernameRef = useRef(null);
+  const homeserverRef = useRef(null);
+  const passwordRef = useRef(null);
+  const confirmPasswordRef = useRef(null);
+  const emailRef = useRef(null);
+
+  const { search } = useLocation();
+  const searchParams = new URLSearchParams(search);
+  if (searchParams.has('loginToken')) {
+    const loginToken = searchParams.get('loginToken');
+    if (loginToken !== undefined) {
+      if (localStorage.getItem(cons.secretKey.BASE_URL) !== undefined) {
+        const baseUrl = localStorage.getItem(cons.secretKey.BASE_URL);
+        auth.loginWithToken(baseUrl, loginToken)
+          .then(() => {
+            const { href } = window.location;
+            window.location.replace(href.slice(0, href.indexOf('?')));
+          })
+          .catch((error) => {
+            changeProcess(null);
+            if (!error.contains('CORS request rejected')) {
+              renderErrorMessage(error);
+            }
+          });
+      }
+    }
+  }
+
+  function register(recaptchaValue, terms, verified) {
+    auth.register(
+      usernameRef.current.value,
+      homeserverRef.current.value,
+      passwordRef.current.value,
+      emailRef.current.value,
+      recaptchaValue,
+      terms,
+      verified,
+    ).then((res) => {
+      document.getElementById('auth_submit-btn').disabled = false;
+      if (res.type === 'recaptcha') {
+        changeProcess({ type: res.type, sitekey: res.public_key });
+        return;
+      }
+      if (res.type === 'terms') {
+        changeProcess({ type: res.type, en: res.en });
+      }
+      if (res.type === 'email') {
+        changeProcess({ type: res.type });
+      }
+      if (res.type === 'done') {
+        window.location.replace('/');
+      }
+    }).catch((error) => {
+      changeProcess(null);
+      renderErrorMessage(error);
+      document.getElementById('auth_submit-btn').disabled = false;
+    });
+    if (terms) {
+      changeProcess({ type: 'loading', message: 'Sending email verification link...' });
+    } else changeProcess({ type: 'loading', message: 'Registration in progress...' });
+  }
+
+  function handleLogin(e) {
+    e.preventDefault();
+    document.getElementById('auth_submit-btn').disabled = true;
+    document.getElementById('auth_error').style.display = 'none';
+
+    /** @type {string} */
+    const rawUsername = usernameRef.current.value;
+    /** @type {string} */
+    const normalizedUsername = normalizeUsername(rawUsername);
+
+    auth.login(normalizedUsername, homeserverRef.current.value, passwordRef.current.value)
+      .then(() => {
+        document.getElementById('auth_submit-btn').disabled = false;
+        window.location.replace('/');
+      })
+      .catch((error) => {
+        changeProcess(null);
+        renderErrorMessage(error);
+        document.getElementById('auth_submit-btn').disabled = false;
+      });
+    changeProcess({ type: 'loading', message: 'Login in progress...' });
+  }
+
+  function handleRegister(e) {
+    e.preventDefault();
+    document.getElementById('auth_submit-btn').disabled = true;
+    document.getElementById('auth_error').style.display = 'none';
+
+    if (!isValidInput(usernameRef.current.value, LOCALPART_SIGNUP_REGEX)) {
+      showBadInputError(usernameRef.current, BAD_LOCALPART_ERROR);
       return;
     }
-    const baseUrl = localStorage.getItem(cons.secretKey.BASE_URL);
-    try {
-      await auth.loginWithToken(baseUrl, loginToken);
-
-      const { href } = window.location;
-      window.location.replace(href.slice(0, href.indexOf('?')));
-    } catch {
-      setLoginToken(null);
+    if (!isValidInput(passwordRef.current.value, PASSWORD_STRENGHT_REGEX)) {
+      showBadInputError(passwordRef.current, BAD_PASSWORD_ERROR);
+      return;
     }
-  }, []);
+    if (passwordRef.current.value !== confirmPasswordRef.current.value) {
+      showBadInputError(confirmPasswordRef.current, CONFIRM_PASSWORD_ERROR);
+      return;
+    }
+    if (!isValidInput(emailRef.current.value, EMAIL_REGEX)) {
+      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();
+  }
 
+  const handleAuth = (type === 'login') ? handleLogin : handleRegister;
   return (
-    <ScrollView invisible>
-      <div className="auth__base">
-        <div className="auth__wrapper">
-          {loginToken && <LoadingScreen message="Redirecting..." />}
-          {!loginToken && (
-            <div className="auth-card flex-v">
-              <Header>
-                <Avatar size="extra-small" imageSrc={CinnySvg} />
-                <TitleWrapper>
-                  <Text variant="h2">Cinny</Text>
-                </TitleWrapper>
-              </Header>
-              <div className="auth-card__content">
-                <AuthCard />
-              </div>
+    <>
+      {process?.type === 'loading' && <LoadingScreen message={process.message} />}
+      {process?.type === 'recaptcha' && <Recaptcha message="Please check the box below to proceed." sitekey={process.sitekey} onChange={(v) => { if (typeof v === 'string') register(v); }} />}
+      {process?.type === 'terms' && <Terms url={process.en.url} onSubmit={register} />}
+      {process?.type === 'email' && (
+        <ProcessWrapper>
+          <div style={{ margin: 'var(--sp-normal)', maxWidth: '450px' }}>
+            <Text variant="h2">Verify email</Text>
+            <div style={{ margin: 'var(--sp-normal) 0' }}>
+              <Text variant="b1">
+                Please check your email
+                {' '}
+                <b>{`(${emailRef.current.value})`}</b>
+                {' '}
+                and validate before continuing further.
+              </Text>
             </div>
-          )}
+            <Button variant="primary" onClick={() => register(undefined, undefined, true)}>Continue</Button>
+          </div>
+        </ProcessWrapper>
+      )}
+      <StaticWrapper>
+        <div className="auth-form__wrapper flex-v--center">
+          <form onSubmit={handleAuth} className="auth-form">
+            <Text variant="h2">{ type === 'login' ? 'Login' : 'Register' }</Text>
+            <div className="username__wrapper">
+              <Input
+                forwardRef={usernameRef}
+                onChange={(e) => (type === 'login'
+                  ? validateOnChange(e.target, LOCALPART_LOGIN_REGEX, BAD_LOCALPART_ERROR)
+                  : validateOnChange(e.target, LOCALPART_SIGNUP_REGEX, BAD_LOCALPART_ERROR))}
+                id="auth_username"
+                label="Username"
+                required
+              />
+              <Input
+                forwardRef={homeserverRef}
+                onChange={(e) => changeHomeserver(e.target.value)}
+                id="auth_homeserver"
+                placeholder="Homeserver"
+                value="matrix.org"
+                required
+              />
+            </div>
+            <div className="password__wrapper">
+              <Input
+                forwardRef={passwordRef}
+                onChange={(e) => {
+                  const isValidPass = validateOnChange(e.target, ((type === 'login') ? PASSWORD_REGEX : PASSWORD_STRENGHT_REGEX), BAD_PASSWORD_ERROR);
+                  if (type === 'register' && isValidPass) {
+                    validateOnChange(
+                      confirmPasswordRef.current, passwordRef.current.value,
+                      CONFIRM_PASSWORD_ERROR, true,
+                    );
+                  }
+                }}
+                id="auth_password"
+                type="password"
+                label="Password"
+                required
+              />
+              <IconButton
+                onClick={() => {
+                  if (passwordRef.current.type === 'password') {
+                    passwordRef.current.type = 'text';
+                  } else passwordRef.current.type = 'password';
+                }}
+                size="extra-small"
+                src={EyeIC}
+              />
+            </div>
+            {type === 'register' && (
+              <>
+                <div className="password__wrapper">
+                  <Input
+                    forwardRef={confirmPasswordRef}
+                    onChange={(e) => {
+                      validateOnChange(e.target, passwordRef.current.value, CONFIRM_PASSWORD_ERROR);
+                    }}
+                    id="auth_confirmPassword"
+                    type="password"
+                    label="Confirm password"
+                    required
+                  />
+                  <IconButton
+                    onClick={() => {
+                      if (confirmPasswordRef.current.type === 'password') {
+                        confirmPasswordRef.current.type = 'text';
+                      } else confirmPasswordRef.current.type = 'password';
+                    }}
+                    size="extra-small"
+                    src={EyeIC}
+                  />
+                </div>
+                <Input
+                  forwardRef={emailRef}
+                  onChange={(e) => validateOnChange(e.target, EMAIL_REGEX, BAD_EMAIL_ERROR)}
+                  id="auth_email"
+                  type="email"
+                  label="Email"
+                  required
+                />
+              </>
+            )}
+            <div className="submit-btn__wrapper flex--end">
+              <Text id="auth_error" className="error-message" variant="b3">Error</Text>
+              <Button
+                id="auth_submit-btn"
+                variant="primary"
+                type="submit"
+              >
+                {type === 'login' ? 'Login' : 'Register' }
+              </Button>
+            </div>
+            {type === 'login' && (
+              <SSOButtons homeserver={homeserver} />
+            )}
+          </form>
         </div>
 
-        <div className="auth-footer">
+        <div style={{ flexDirection: 'column' }} className="flex--center">
           <Text variant="b2">
-            <a href="https://cinny.in" target="_blank" rel="noreferrer">About</a>
-          </Text>
-          <Text variant="b2">
-            <a href="https://github.com/ajbura/cinny/releases" target="_blank" rel="noreferrer">{`v${cons.version}`}</a>
-          </Text>
-          <Text variant="b2">
-            <a href="https://twitter.com/cinnyapp" target="_blank" rel="noreferrer">Twitter</a>
-          </Text>
-          <Text variant="b2">
-            <a href="https://matrix.org" target="_blank" rel="noreferrer">Powered by Matrix</a>
+            {`${(type === 'login' ? 'Don\'t have' : 'Already have')} an account?`}
+            <button
+              type="button"
+              style={{ color: 'var(--tc-link)', cursor: 'pointer', margin: '0 var(--sp-ultra-tight)' }}
+              onClick={() => {
+                if (type === 'login') setType('register');
+                else setType('login');
+              }}
+            >
+              { type === 'login' ? ' Register' : ' Login' }
+            </button>
           </Text>
+          <span style={{ marginTop: 'var(--sp-extra-tight)' }}>
+            <Text variant="b3">v1.4.0</Text>
+          </span>
+        </div>
+      </StaticWrapper>
+    </>
+  );
+}
+
+function StaticWrapper({ children }) {
+  return (
+    <ScrollView invisible>
+      <div className="auth__wrapper flex--center">
+        <div className="auth-card">
+          <div className="auth-card__interactive flex-v">
+            <div className="app-ident flex">
+              <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>
+              </div>
+            </div>
+            { children }
+          </div>
         </div>
       </div>
     </ScrollView>
   );
 }
 
+StaticWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
 function LoadingScreen({ message }) {
   return (
     <ProcessWrapper>
@@ -599,13 +396,13 @@ Recaptcha.propTypes = {
 function Terms({ url, onSubmit }) {
   return (
     <ProcessWrapper>
-      <form onSubmit={(e) => { e.preventDefault(); onSubmit(); }}>
+      <form onSubmit={() => onSubmit(undefined, true)}>
         <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 to the terms and conditions.</Text>
           <div style={{ display: 'flex', alignItems: 'center', margin: 'var(--sp-normal) 0' }}>
-            <input style={{ marginRight: '8px' }} id="termsCheckbox" type="checkbox" required />
+            <input id="termsCheckbox" type="checkbox" required />
             <Text variant="b1">
               {'I accept '}
               <a style={{ cursor: 'pointer' }} href={url} rel="noreferrer" target="_blank">Terms and Conditions</a>
@@ -622,27 +419,6 @@ Terms.propTypes = {
   onSubmit: PropTypes.func.isRequired,
 };
 
-function EmailVerify({ email, onContinue }) {
-  return (
-    <ProcessWrapper>
-      <div style={{ margin: 'var(--sp-normal)', maxWidth: '450px' }}>
-        <Text variant="h2">Verify email</Text>
-        <div style={{ margin: 'var(--sp-normal) 0' }}>
-          <Text variant="b1">
-            {'Please check your email '}
-            <b>{`(${email})`}</b>
-            {' and validate before continuing further.'}
-          </Text>
-        </div>
-        <Button variant="primary" onClick={onContinue}>Continue</Button>
-      </div>
-    </ProcessWrapper>
-  );
-}
-EmailVerify.propTypes = {
-  email: PropTypes.string.isRequired,
-};
-
 function ProcessWrapper({ children }) {
   return (
     <div className="process-wrapper">

src/app/templates/auth/Auth.scss

@@ -1,144 +1,156 @@
-.auth__base {
-  --pattern-size: 48px;
-  min-height: 100%;
+.auth__wrapper {
+  min-height: 100vh;
+  padding: var(--sp-loose);
   background-color: var(--bg-surface-low);
 
-  background-image: radial-gradient(rgba(0, 0, 0, 6%) 2px, rgba(0, 0, 0, 0%) 2px);
-  background-size: var(--pattern-size) var(--pattern-size);
+  background-image: url("https://images.unsplash.com/photo-1562619371-b67725b6fde2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
 
-  display: flex;
-  flex-direction: column;
-}
-.auth__wrapper {
-  flex: 1;
-  padding: var(--sp-loose);
-  padding-bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-}
-.auth-footer {
-  padding: var(--sp-normal) 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  .auth-card {
+    width: 462px;
+    min-height: 644px;
+    background-color: var(--bg-surface-low);
+    border-radius: var(--bo-radius);
+    box-shadow: var(--bs-popup);
+    overflow: hidden;
+    display: flex;
+    flex-flow: row nowrap;
+    
+    &__interactive{
+      flex: 1;
+      min-width: 0;
+    }
 
-  & > *:nth-child(2n) {
-    margin: 0 var(--sp-loose);
-  }
-  & a {
-    color: var(--tc-surface-normal);
-    &:hover { text-decoration: underline; }
-  }
-}
-.auth-card {
-  width: 462px;
-  background-color: var(--bg-surface);
-  border-radius: var(--bo-radius);
-  box-shadow: var(--bs-popup);
-  overflow: hidden;
-
-  &__content {
-    padding: var(--sp-extra-loose) calc(var(--sp-normal) + var(--sp-extra-loose));
-  }
-  &__switch {
-    margin-top: var(--sp-loose) !important;
-  }
-}
-
-.homeserver-form,
-.auth-form__heading {
-  & .context-menu .btn-surface .ic-raw {
-    width: 0;
-  }
-}
-
-.homeserver-form {
-  display: flex;
-  margin-bottom: var(--sp-extra-tight);
-  align-items: flex-end;
-  & > .input-container {
-    flex: 1;
-    & .input {
-      border-right: unset;
-      border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+    &__interactive {
+      padding: calc(var(--sp-normal) + var(--sp-extra-loose));
+      padding-bottom: var(--sp-extra-loose);
       background-color: var(--bg-surface);
     }
-  }
-  & .ic-btn {
-    height: 46px;
-    border: 1px solid var(--bg-surface-border);
-    border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
-  }
-  [dir=rtl] & {
-    & .input {
-      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
-      border-radius: 1px;
-      border-left: unset;
-    }
-    .ic-btn {
-      border-radius: var(--bo-radius) 0 0 var(--bo-radius);
-    }
-  }
 
-  &__status {
-    margin-top: var(--sp-normal);
-    & .donut-spinner {
-      min-width: 28px;
-    }
-    & .text {
-      margin: 0 var(--sp-tight);
-    }
   }
-  &__error {
-    margin-bottom: var(--sp-normal) !important;
-    color: var(--tc-danger-normal) !important;
+}
+
+.app-ident {
+  margin-bottom: var(--sp-extra-loose);
+
+  &__logo {
+    width: 60px;
+    height: 60px;
+  }
+  &__text {
+    margin-left: calc(var(--sp-loose) + var(--sp-ultra-tight));
+
+    .text-s1 {
+      margin-top: var(--sp-tight);
+      color: var(--tc-surface-normal);
+    }
+
+    [dir=rtl] & {
+      margin-left: 0;
+      margin-right:  calc(var(--sp-loose) + var(--sp-ultra-tight));
+    }
   }
 }
 
 .auth-form {
+
+  & > .text {
+    margin-bottom: var(--sp-loose);
+    margin-top: var(--sp-loose);
+  }
   & > .input-container {
-    margin: var(--sp-tight) 0 var(--sp-ultra-tight);
-  }
-  
-  &__heading {
-    display: flex;
-    justify-content: space-between;
-    margin-top: calc(var(--sp-extra-loose) + var(--sp-tight));
+    margin-top: var(--sp-tight);
   }
 
-  &__btns {
-    padding-top: var(--sp-loose);
-    margin-bottom: var(--sp-extra-loose);
-    display: flex;
-    justify-content: flex-end;
+  .submit-btn__wrapper {
+    margin-top: var(--sp-extra-loose);
+    margin-bottom: var(--sp-loose);
+    align-items: flex-start;
+
+    & > .error-message {
+      display: none;
+      flex: 1;
+      color: var(--tc-danger-normal);
+      margin-right: var(--sp-normal);
+      word-break: break;
+
+      [dir=rtl] & {
+        margin: {
+          right: 0;
+          left: var(--sp-normal);
+        }
+      }
+    }
   }
 
-  &__error {
-    color: var(--tc-danger-normal) !important;
+  &__wrapper {
+    height: 100%;
   }
 }
-.sso__divider {
-  margin-bottom: var(--sp-tight);
-  display: flex;
-  align-items: center;
 
-  &::before,
-  &::after {
+.username__wrapper {
+  display: flex;
+  align-items: flex-end;
+
+  & > :first-child {
     flex: 1;
-    content: '';
-    margin: var(--sp-tight);
-    border-bottom: 1px solid var(--bg-surface-border);
+
+    .input {
+      border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+
+      [dir=rtl] & {
+        border-radius:  0 var(--bo-radius) var(--bo-radius) 0;
+      }
+    }
+  }
+  & > :last-child {
+    width: 110px;
+
+    .input {
+      border-left-width: 0;
+      background-color: var(--bg-surface);
+      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
+
+      [dir=rtl] & {
+        border-left-width: 1px;
+        border-right-width: 0;
+        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+      }
+    }
+  }
+}
+
+.password__wrapper {
+  margin-top: var(--sp-tight);
+  position: relative;
+
+  & .ic-btn {
+    position: absolute;
+    right: 6px;
+    bottom: 6px;
+    border-radius: calc(var(--bo-radius) / 2);
+    [dir=rtl] & {
+      left: 6px;
+      right: unset;
+    }
   }
 }
 
 @media (max-width: 462px) {
   .auth__wrapper {
-    padding: var(--sp-tight);
-  }
-  .auth-card {
-    &__content {
-      padding: var(--sp-loose) var(--sp-normal);
+    padding: 0;
+    background-image: none;
+    background-color: var(--bg-surface);
+
+    .auth-card {
+      border-radius: 0;
+      box-shadow: none;
+
+      &__interactive {
+        padding: var(--sp-extra-loose);
+      }
     }
   }
 }

src/app/templates/client/Client.jsx

@@ -9,31 +9,14 @@ import Windows from '../../organisms/pw/Windows';
 import Dialogs from '../../organisms/pw/Dialogs';
 import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
 import RoomOptions from '../../organisms/room-optons/RoomOptions';
-import logout from '../../../client/action/logout';
 
 import initMatrix from '../../../client/initMatrix';
 
 function Client() {
   const [isLoading, changeLoading] = useState(true);
-  const [loadingMsg, setLoadingMsg] = useState('Heating up');
 
   useEffect(() => {
-    let counter = 0;
-    const iId = setInterval(() => {
-      const msgList = [
-        'Sometimes it takes a while...',
-        'Looks like you have a lot of stuff to heat up!',
-      ];
-      if (counter === msgList.length - 1) {
-        setLoadingMsg(msgList[msgList.length - 1]);
-        clearInterval(iId);
-        return;
-      }
-      setLoadingMsg(msgList[counter]);
-      counter += 1;
-    }, 9000);
     initMatrix.once('init_loading_finished', () => {
-      clearInterval(iId);
       changeLoading(false);
     });
     initMatrix.init();
@@ -42,11 +25,8 @@ function Client() {
   if (isLoading) {
     return (
       <div className="loading-display">
-        <button className="loading__logout" onClick={logout} type="button">
-          <Text variant="b3">Logout</Text>
-        </button>
         <Spinner />
-        <Text className="loading__message" variant="b2">{loadingMsg}</Text>
+        <Text className="loading__message" variant="b2">Heating up</Text>
 
         <div className="loading__appname">
           <Text variant="h2">Cinny</Text>

src/app/templates/client/Client.scss

@@ -18,7 +18,7 @@
   top: 0;
   left: 0;
   width: 100vw;
-  height: 100%;
+  height: 100vh;
 
   display: flex;
   flex-direction: column;
@@ -27,19 +27,8 @@
 }
 .loading__message {
   margin-top: var(--sp-normal);
-  max-width: 350px;
-  text-align: center;
 }
 .loading__appname {
   position: absolute;
   bottom: var(--sp-normal);
-}
-.loading__logout {
-  position: absolute;
-  bottom: var(--sp-extra-tight);
-  right: var(--sp-extra-tight);
-  cursor: pointer;
-  .text {
-    color: var(--tc-link);
-  }
 }

src/client/action/auth.js

@@ -1,104 +1,189 @@
 import * as sdk from 'matrix-js-sdk';
 import cons from '../state/cons';
+import { getBaseUrl } from '../../util/matrixUtil';
 
-function updateLocalStore(accessToken, deviceId, userId, baseUrl) {
-  localStorage.setItem(cons.secretKey.ACCESS_TOKEN, accessToken);
-  localStorage.setItem(cons.secretKey.DEVICE_ID, deviceId);
-  localStorage.setItem(cons.secretKey.USER_ID, userId);
-  localStorage.setItem(cons.secretKey.BASE_URL, baseUrl);
-}
+// This method inspired by a similar one in matrix-react-sdk
+async function createTemporaryClient(homeserver) {
+  let baseUrl = null;
+  try {
+    baseUrl = await getBaseUrl(homeserver);
+  } catch (e) {
+    baseUrl = `https://${homeserver}`;
+  }
+
+  if (typeof baseUrl === 'undefined') throw new Error('Homeserver not found');
 
-function createTemporaryClient(baseUrl) {
   return sdk.createClient({ baseUrl });
 }
 
-async function startSsoLogin(baseUrl, type, idpId) {
-  const client = createTemporaryClient(baseUrl);
+async function getLoginFlows(client) {
+  const flows = await client.loginFlows();
+  if (flows !== undefined) {
+    return flows;
+  }
+  return null;
+}
+
+async function startSsoLogin(homeserver, type, idpId) {
+  const client = await createTemporaryClient(homeserver);
   localStorage.setItem(cons.secretKey.BASE_URL, client.baseUrl);
   window.location.href = client.getSsoLoginUrl(window.location.href, type, idpId);
 }
 
-async function login(baseUrl, username, email, password) {
-  const identifier = {};
-  if (username) {
-    identifier.type = 'm.id.user';
-    identifier.user = username;
-  } else if (email) {
-    identifier.type = 'm.id.thirdparty';
-    identifier.medium = 'email';
-    identifier.address = email;
-  } else throw new Error('Bad Input');
+async function login(username, homeserver, password) {
+  const client = await createTemporaryClient(homeserver);
 
-  const client = createTemporaryClient(baseUrl);
-  const res = await client.login('m.login.password', {
-    identifier,
+  const response = await client.login('m.login.password', {
+    identifier: {
+      type: 'm.id.user',
+      user: username,
+    },
     password,
     initial_device_display_name: cons.DEVICE_DISPLAY_NAME,
   });
 
-  const myBaseUrl = res?.well_known?.['m.homeserver']?.base_url || client.baseUrl;
-  updateLocalStore(res.access_token, res.device_id, res.user_id, myBaseUrl);
+  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 || client.baseUrl);
 }
 
 async function loginWithToken(baseUrl, token) {
-  const client = createTemporaryClient(baseUrl);
+  const client = sdk.createClient(baseUrl);
 
-  const res = await client.login('m.login.token', {
+  const response = await client.login('m.login.token', {
     token,
     initial_device_display_name: cons.DEVICE_DISPLAY_NAME,
   });
 
-  const myBaseUrl = res?.well_known?.['m.homeserver']?.base_url || client.baseUrl;
-  updateLocalStore(res.access_token, res.device_id, res.user_id, myBaseUrl);
+  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 || client.baseUrl);
 }
 
-// eslint-disable-next-line camelcase
-async function verifyEmail(baseUrl, email, client_secret, send_attempt, next_link) {
-  const res = await fetch(`${baseUrl}/_matrix/client/r0/register/email/requestToken`, {
-    method: 'POST',
-    body: JSON.stringify({
-      email, client_secret, send_attempt, next_link,
-    }),
-    headers: {
-      'Content-Type': 'application/json; charset=utf-8',
-    },
-    credentials: 'same-origin',
-  });
-  const data = await res.json();
-  return data;
-}
-
-async function completeRegisterStage(
-  baseUrl, username, password, auth,
-) {
-  const tempClient = createTemporaryClient(baseUrl);
-
+async function getAdditionalInfo(baseUrl, content) {
   try {
-    const result = await tempClient.registerRequest({
-      username,
-      password,
-      auth,
-      initial_device_display_name: cons.DEVICE_DISPLAY_NAME,
+    const res = await fetch(`${baseUrl}/_matrix/client/r0/register`, {
+      method: 'POST',
+      body: JSON.stringify(content),
+      headers: {
+        'Content-Type': 'application/json; charset=utf-8',
+      },
+      credentials: 'same-origin',
     });
-    const data = { completed: result.completed || [] };
-    if (result.access_token) {
-      data.done = true;
-      updateLocalStore(result.access_token, result.device_id, result.user_id, baseUrl);
-    }
+    const data = await res.json();
     return data;
   } catch (e) {
-    const result = e.data;
-    const data = { completed: result.completed || [] };
-    if (result.access_token) {
-      data.done = true;
-      updateLocalStore(result.access_token, result.device_id, result.user_id, baseUrl);
-    }
-    return data;
+    throw new Error(e);
   }
 }
 
+async function verifyEmail(baseUrl, content) {
+  try {
+    const res = await fetch(`${baseUrl}/_matrix/client/r0/register/email/requestToken`, {
+      method: 'POST',
+      body: JSON.stringify(content),
+      headers: {
+        'Content-Type': 'application/json; charset=utf-8',
+      },
+      credentials: 'same-origin',
+    });
+    const data = await res.json();
+    return data;
+  } catch (e) {
+    throw new Error(e);
+  }
+}
+
+let session = null;
+let clientSecret = null;
+let sid = null;
+async function register(username, homeserver, password, email, recaptchaValue, terms, verified) {
+  const baseUrl = await getBaseUrl(homeserver);
+
+  if (typeof baseUrl === 'undefined') throw new Error('Homeserver not found');
+
+  const client = sdk.createClient({ baseUrl });
+
+  const isAvailable = await client.isUsernameAvailable(username);
+  if (!isAvailable) throw new Error('Username not available');
+
+  if (typeof recaptchaValue === 'string') {
+    await getAdditionalInfo(baseUrl, {
+      auth: {
+        type: 'm.login.recaptcha',
+        session,
+        response: recaptchaValue,
+      },
+    });
+  } else if (terms === true) {
+    await getAdditionalInfo(baseUrl, {
+      auth: {
+        type: 'm.login.terms',
+        session,
+      },
+    });
+  } else if (verified !== true) {
+    session = null;
+    clientSecret = client.generateClientSecret();
+    const verifyData = await verifyEmail(baseUrl, {
+      email,
+      client_secret: clientSecret,
+      send_attempt: 1,
+    });
+    if (typeof verifyData.error === 'string') {
+      throw new Error(verifyData.error);
+    }
+    sid = verifyData.sid;
+  }
+
+  const additionalInfo = await getAdditionalInfo(baseUrl, {
+    auth: { session: (session !== null) ? session : undefined },
+  });
+  session = additionalInfo.session;
+  if (typeof additionalInfo.completed === 'undefined' || additionalInfo.completed.length === 0) {
+    return ({
+      type: 'recaptcha',
+      public_key: additionalInfo.params['m.login.recaptcha'].public_key,
+    });
+  }
+  if (additionalInfo.completed.find((process) => process === 'm.login.recaptcha') === 'm.login.recaptcha'
+    && !additionalInfo.completed.find((process) => process === 'm.login.terms')) {
+    return ({
+      type: 'terms',
+      en: additionalInfo.params['m.login.terms'].policies.privacy_policy.en,
+    });
+  }
+  if (verified || additionalInfo.completed.find((process) => process === 'm.login.terms') === 'm.login.terms') {
+    const tpc = {
+      client_secret: clientSecret,
+      sid,
+    };
+    const verifyData = await getAdditionalInfo(baseUrl, {
+      auth: {
+        session,
+        type: 'm.login.email.identity',
+        threepidCreds: tpc,
+        threepid_creds: tpc,
+      },
+      username,
+      password,
+    });
+    if (verifyData.errcode === 'M_UNAUTHORIZED') {
+      return { type: 'email' };
+    }
+
+    localStorage.setItem(cons.secretKey.ACCESS_TOKEN, verifyData.access_token);
+    localStorage.setItem(cons.secretKey.DEVICE_ID, verifyData.device_id);
+    localStorage.setItem(cons.secretKey.USER_ID, verifyData.user_id);
+    localStorage.setItem(cons.secretKey.BASE_URL, baseUrl);
+    return { type: 'done' };
+  }
+  return {};
+}
+
 export {
-  createTemporaryClient, login, verifyEmail,
-  loginWithToken, startSsoLogin,
-  completeRegisterStage,
+  createTemporaryClient, getLoginFlows, login,
+  loginWithToken, register, startSsoLogin,
 };

src/client/action/logout.js

@@ -2,7 +2,6 @@ import initMatrix from '../initMatrix';
 
 function logout() {
   const mx = initMatrix.matrixClient;
-  mx.stopClient();
   mx.logout().then(() => {
     mx.clearStores();
     window.localStorage.clear();

src/client/action/navigation.js

@@ -1,48 +1,53 @@
 import appDispatcher from '../dispatcher';
 import cons from '../state/cons';
 
-export function selectTab(tabId) {
+function selectTab(tabId) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.SELECT_TAB,
     tabId,
   });
 }
 
-export function selectSpace(roomId) {
+function selectSpace(roomId) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.SELECT_SPACE,
     roomId,
   });
 }
 
-export function selectRoom(roomId, eventId) {
+function selectRoom(roomId) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.SELECT_ROOM,
     roomId,
-    eventId,
   });
 }
 
-export function openInviteList() {
+function togglePeopleDrawer() {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.TOGGLE_PEOPLE_DRAWER,
+  });
+}
+
+function openInviteList() {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_INVITE_LIST,
   });
 }
 
-export function openPublicRooms(searchTerm) {
+function openPublicRooms(searchTerm) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_PUBLIC_ROOMS,
     searchTerm,
   });
 }
 
-export function openCreateRoom() {
+function openCreateRoom() {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_CREATE_ROOM,
   });
 }
 
-export function openInviteUser(roomId, searchTerm) {
+function openInviteUser(roomId, searchTerm) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_INVITE_USER,
     roomId,
@@ -50,7 +55,7 @@ export function openInviteUser(roomId, searchTerm) {
   });
 }
 
-export function openProfileViewer(userId, roomId) {
+function openProfileViewer(userId, roomId) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_PROFILE_VIEWER,
     userId,
@@ -58,13 +63,13 @@ export function openProfileViewer(userId, roomId) {
   });
 }
 
-export function openSettings() {
+function openSettings() {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_SETTINGS,
   });
 }
 
-export function openEmojiBoard(cords, requestEmojiCallback) {
+function openEmojiBoard(cords, requestEmojiCallback) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_EMOJIBOARD,
     cords,
@@ -72,15 +77,15 @@ export function openEmojiBoard(cords, requestEmojiCallback) {
   });
 }
 
-export function openReadReceipts(roomId, userIds) {
+function openReadReceipts(roomId, eventId) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_READRECEIPTS,
     roomId,
-    userIds,
+    eventId,
   });
 }
 
-export function openRoomOptions(cords, roomId) {
+function openRoomOptions(cords, roomId) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_ROOMOPTIONS,
     cords,
@@ -88,18 +93,18 @@ export function openRoomOptions(cords, roomId) {
   });
 }
 
-export function replyTo(userId, eventId, body) {
-  appDispatcher.dispatch({
-    type: cons.actions.navigation.CLICK_REPLY_TO,
-    userId,
-    eventId,
-    body,
-  });
-}
-
-export function openSearch(term) {
-  appDispatcher.dispatch({
-    type: cons.actions.navigation.OPEN_SEARCH,
-    term,
-  });
-}
+export {
+  selectTab,
+  selectSpace,
+  selectRoom,
+  togglePeopleDrawer,
+  openInviteList,
+  openPublicRooms,
+  openCreateRoom,
+  openInviteUser,
+  openProfileViewer,
+  openSettings,
+  openEmojiBoard,
+  openReadReceipts,
+  openRoomOptions,
+};

src/client/action/room.js

@@ -132,11 +132,9 @@ function leave(roomId) {
  * @param {boolean} [opts.isEncrypted=false] Makes room encrypted
  * @param {boolean} [opts.isDirect=false] Makes room as direct message
  * @param {string[]} [opts.invite=[]] An array of userId's to invite
- * @param{number} [opts.powerLevel=100] My power level
  */
 async function create(opts) {
   const mx = initMatrix.matrixClient;
-  const customPowerLevels = [101];
   const options = {
     name: opts.name,
     topic: opts.topic,
@@ -146,9 +144,6 @@ async function create(opts) {
     invite: opts.invite || [],
     initial_state: [],
     preset: opts.isDirect === true ? 'trusted_private_chat' : undefined,
-    power_level_content_override: customPowerLevels.indexOf(opts.powerLevel) === -1 ? undefined : {
-      users: { [initMatrix.matrixClient.getUserId()]: opts.powerLevel },
-    },
   };
 
   if (opts.isPublic !== true && opts.isEncrypted === true) {
@@ -188,15 +183,12 @@ async function create(opts) {
 async function invite(roomId, userId) {
   const mx = initMatrix.matrixClient;
 
-  const result = await mx.invite(roomId, userId);
-  return result;
-}
-
-async function kick(roomId, userId) {
-  const mx = initMatrix.matrixClient;
-
-  const result = await mx.kick(roomId, userId);
-  return result;
+  try {
+    const result = await mx.invite(roomId, userId);
+    return result;
+  } catch (e) {
+    throw new Error(e);
+  }
 }
 
 function createSpaceShortcut(roomId) {
@@ -215,6 +207,6 @@ function deleteSpaceShortcut(roomId) {
 
 export {
   join, leave,
-  create, invite, kick,
+  create, invite,
   createSpaceShortcut, deleteSpaceShortcut,
 };

src/client/action/settings.js

@@ -1,26 +1,12 @@
 import appDispatcher from '../dispatcher';
 import cons from '../state/cons';
 
-export function toggleMarkdown() {
+function toggleMarkdown() {
   appDispatcher.dispatch({
     type: cons.actions.settings.TOGGLE_MARKDOWN,
   });
 }
 
-export function togglePeopleDrawer() {
-  appDispatcher.dispatch({
-    type: cons.actions.settings.TOGGLE_PEOPLE_DRAWER,
-  });
-}
-
-export function toggleMembershipEvents() {
-  appDispatcher.dispatch({
-    type: cons.actions.settings.TOGGLE_MEMBERSHIP_EVENT,
-  });
-}
-
-export function toggleNickAvatarEvents() {
-  appDispatcher.dispatch({
-    type: cons.actions.settings.TOGGLE_NICKAVATAR_EVENT,
-  });
-}
+export {
+  toggleMarkdown,
+};

src/client/event/hotkeys.js

@@ -1,37 +0,0 @@
-import { openSearch } from '../action/navigation';
-import navigation from '../state/navigation';
-
-function listenKeyboard(event) {
-  // Ctrl +
-  if (event.ctrlKey) {
-    // k - for search Modal
-    if (event.keyCode === 75) {
-      event.preventDefault();
-      if (navigation.isRawModalVisible) return;
-      openSearch();
-    }
-  }
-  if (!event.ctrlKey && !event.altKey) {
-    if (navigation.isRawModalVisible) return;
-    if (['text', 'textarea'].includes(document.activeElement.type)) {
-      return;
-    }
-    if (event.keyCode < 48
-      || (event.keyCode >= 91 && event.keyCode <= 93)
-      || (event.keyCode >= 112 && event.keyCode <= 183)) {
-      return;
-    }
-    const msgTextarea = document.getElementById('message-textarea');
-    msgTextarea?.focus();
-  }
-}
-
-function initHotkeys() {
-  document.body.addEventListener('keydown', listenKeyboard);
-}
-
-function removeHotkeys() {
-  document.body.removeEventListener('keydown', listenKeyboard);
-}
-
-export { initHotkeys, removeHotkeys };

src/client/initMatrix.js

@@ -1,17 +1,13 @@
 import EventEmitter from 'events';
 import * as sdk from 'matrix-js-sdk';
-// import { logger } from 'matrix-js-sdk/lib/logger';
 
 import { secret } from './state/auth';
 import RoomList from './state/RoomList';
 import RoomsInput from './state/RoomsInput';
 import Notifications from './state/Notifications';
-import { initHotkeys } from './event/hotkeys';
 
 global.Olm = require('@matrix-org/olm');
 
-// logger.disableAll();
-
 class InitMatrix extends EventEmitter {
   async init() {
     await this.startClient();
@@ -35,7 +31,6 @@ class InitMatrix extends EventEmitter {
       sessionStore: new sdk.WebStorageSessionStore(global.localStorage),
       cryptoStore: new sdk.IndexedDBCryptoStore(global.indexedDB, 'crypto-store'),
       deviceId: secret.deviceId,
-      timelineSupport: true,
     });
 
     await this.matrixClient.initCrypto();
@@ -63,7 +58,6 @@ class InitMatrix extends EventEmitter {
           this.roomList = new RoomList(this.matrixClient);
           this.roomsInput = new RoomsInput(this.matrixClient);
           this.notifications = new Notifications(this.roomList);
-          initHotkeys();
           this.emit('init_loading_finished');
         }
       },

src/client/state/Notifications.js

@@ -1,17 +1,6 @@
 import EventEmitter from 'events';
 import cons from './cons';
 
-function isNotifEvent(mEvent) {
-  const eType = mEvent.getType();
-  if (!cons.supportEventTypes.includes(eType)) return false;
-  if (eType === 'm.room.member') return false;
-
-  if (mEvent.isRedacted()) return false;
-  if (mEvent.getRelation()?.rel_type === 'm.replace') return false;
-
-  return true;
-}
-
 class Notifications extends EventEmitter {
   constructor(roomList) {
     super();
@@ -44,16 +33,23 @@ class Notifications extends EventEmitter {
   doesRoomHaveUnread(room) {
     const userId = this.matrixClient.getUserId();
     const readUpToId = room.getEventReadUpTo(userId);
-    const liveEvents = room.getLiveTimeline().getEvents();
+    const supportEvents = ['m.room.message', 'm.room.encrypted', 'm.sticker'];
 
-    if (liveEvents[liveEvents.length - 1]?.getSender() === userId) {
+    if (room.timeline.length
+      && room.timeline[room.timeline.length - 1].sender
+      && room.timeline[room.timeline.length - 1].sender.userId === userId
+      && room.timeline[room.timeline.length - 1].getType() !== 'm.room.member') {
       return false;
     }
 
-    for (let i = liveEvents.length - 1; i >= 0; i -= 1) {
-      const event = liveEvents[i];
+    for (let i = room.timeline.length - 1; i >= 0; i -= 1) {
+      const event = room.timeline[i];
+
       if (event.getId() === readUpToId) return false;
-      if (isNotifEvent(event)) return true;
+
+      if (supportEvents.includes(event.getType())) {
+        return true;
+      }
     }
     return true;
   }
@@ -81,35 +77,12 @@ class Notifications extends EventEmitter {
     return this.roomIdToNoti.has(roomId);
   }
 
-  deleteNoti(roomId) {
-    if (this.hasNoti(roomId)) {
-      const noti = this.getNoti(roomId);
-      this._deleteNoti(roomId, noti.total, noti.highlight);
-    }
-  }
-
-  _getAllParentIds(roomId) {
-    let allParentIds = this.roomList.roomIdToParents.get(roomId);
-    if (allParentIds === undefined) return new Set();
-    const parentIds = [...allParentIds];
-
-    parentIds.forEach((pId) => {
-      allParentIds = new Set(
-        [...allParentIds, ...this._getAllParentIds(pId)],
-      );
-    });
-
-    return allParentIds;
-  }
-
   _setNoti(roomId, total, highlight, childId) {
     const prevTotal = this.roomIdToNoti.get(roomId)?.total ?? null;
     const noti = this.getNoti(roomId);
 
-    if (!childId || this._remainingParentIds?.has(roomId)) {
-      noti.total += total;
-      noti.highlight += highlight;
-    }
+    noti.total += total;
+    noti.highlight += highlight;
     if (childId) {
       if (noti.from === null) noti.from = new Set();
       noti.from.add(childId);
@@ -118,16 +91,9 @@ class Notifications extends EventEmitter {
     this.roomIdToNoti.set(roomId, noti);
     this.emit(cons.events.notifications.NOTI_CHANGED, roomId, noti.total, prevTotal);
 
-    if (!childId) this._remainingParentIds = this._getAllParentIds(roomId);
-    else this._remainingParentIds.delete(roomId);
-
     const parentIds = this.roomList.roomIdToParents.get(roomId);
-    if (typeof parentIds === 'undefined') {
-      if (!childId) this._remainingParentIds = undefined;
-      return;
-    }
+    if (typeof parentIds === 'undefined') return;
     [...parentIds].forEach((parentId) => this._setNoti(parentId, total, highlight, roomId));
-    if (!childId) this._remainingParentIds = undefined;
   }
 
   _deleteNoti(roomId, total, highlight, childId) {
@@ -137,12 +103,8 @@ class Notifications extends EventEmitter {
     const prevTotal = noti.total;
     noti.total -= total;
     noti.highlight -= highlight;
-    if (noti.total < 0) {
-      noti.total = 0;
-      noti.highlight = 0;
-    }
     if (childId && noti.from !== null) {
-      if (!this.hasNoti(childId)) noti.from.delete(childId);
+      noti.from.delete(childId);
     }
     if (noti.from === null || noti.from.size === 0) {
       this.roomIdToNoti.delete(roomId);
@@ -160,10 +122,10 @@ class Notifications extends EventEmitter {
 
   _listenEvents() {
     this.matrixClient.on('Room.timeline', (mEvent, room) => {
-      if (!isNotifEvent(mEvent)) return;
-      const liveEvents = room.getLiveTimeline().getEvents();
+      const supportEvents = ['m.room.message', 'm.room.encrypted', 'm.sticker'];
+      if (!supportEvents.includes(mEvent.getType())) return;
 
-      const lastTimelineEvent = liveEvents[liveEvents.length - 1];
+      const lastTimelineEvent = room.timeline[room.timeline.length - 1];
       if (lastTimelineEvent.getId() !== mEvent.getId()) return;
       if (mEvent.getSender() === this.matrixClient.getUserId()) return;
 
@@ -181,13 +143,17 @@ class Notifications extends EventEmitter {
         const readerUserId = Object.keys(content[readedEventId]['m.read'])[0];
         if (readerUserId !== this.matrixClient.getUserId()) return;
 
-        this.deleteNoti(room.roomId);
+        if (this.hasNoti(room.roomId)) {
+          const noti = this.getNoti(room.roomId);
+          this._deleteNoti(room.roomId, noti.total, noti.highlight);
+        }
       }
     });
 
     this.matrixClient.on('Room.myMembership', (room, membership) => {
       if (membership === 'leave' && this.hasNoti(room.roomId)) {
-        this.deleteNoti(room.roomId);
+        const noti = this.getNoti(room.roomId);
+        this._deleteNoti(room.roomId, noti.total, noti.highlight);
       }
     });
   }

src/client/state/RoomTimeline.js

@@ -2,360 +2,53 @@ import EventEmitter from 'events';
 import initMatrix from '../initMatrix';
 import cons from './cons';
 
-import settings from './settings';
-
-function isEdited(mEvent) {
-  return mEvent.getRelation()?.rel_type === 'm.replace';
-}
-
-function isReaction(mEvent) {
-  return mEvent.getType() === 'm.reaction';
-}
-
-function getRelateToId(mEvent) {
-  const relation = mEvent.getRelation();
-  return relation && relation.event_id;
-}
-
-function addToMap(myMap, mEvent) {
-  const relateToId = getRelateToId(mEvent);
-  if (relateToId === null) return null;
-  const mEventId = mEvent.getId();
-
-  if (typeof myMap.get(relateToId) === 'undefined') myMap.set(relateToId, []);
-  const mEvents = myMap.get(relateToId);
-  if (mEvents.find((ev) => ev.getId() === mEventId)) return mEvent;
-  mEvents.push(mEvent);
-  return mEvent;
-}
-
-function getFirstLinkedTimeline(timeline) {
-  let tm = timeline;
-  while (tm.prevTimeline) {
-    tm = tm.prevTimeline;
-  }
-  return tm;
-}
-function getLastLinkedTimeline(timeline) {
-  let tm = timeline;
-  while (tm.nextTimeline) {
-    tm = tm.nextTimeline;
-  }
-  return tm;
-}
-
-function iterateLinkedTimelines(timeline, backwards, callback) {
-  let tm = timeline;
-  while (tm) {
-    callback(tm);
-    if (backwards) tm = tm.prevTimeline;
-    else tm = tm.nextTimeline;
-  }
-}
-
-function isTimelineLinked(tm1, tm2) {
-  let tm = getFirstLinkedTimeline(tm1);
-  while (tm) {
-    if (tm === tm2) return true;
-    tm = tm.nextTimeline;
-  }
-  return false;
-}
-
 class RoomTimeline extends EventEmitter {
-  constructor(roomId, notifications) {
+  constructor(roomId) {
     super();
-    // These are local timelines
-    this.timeline = [];
-    this.editedTimeline = new Map();
-    this.reactionTimeline = new Map();
-    this.typingMembers = new Set();
-
     this.matrixClient = initMatrix.matrixClient;
     this.roomId = roomId;
     this.room = this.matrixClient.getRoom(roomId);
-    this.notifications = notifications;
-
-    this.liveTimeline = this.room.getLiveTimeline();
-    this.activeTimeline = this.liveTimeline;
-
+    this.timeline = this.room.timeline;
+    this.editedTimeline = this.getEditedTimeline();
+    this.reactionTimeline = this.getReactionTimeline();
     this.isOngoingPagination = false;
     this.ongoingDecryptionCount = 0;
-    this.initialized = false;
+    this.typingMembers = new Set();
 
-    setTimeout(() => this.room.loadMembersIfNeeded());
-
-    // TODO: remove below line
-    window.selectedRoom = this;
-  }
-
-  isServingLiveTimeline() {
-    return getLastLinkedTimeline(this.activeTimeline) === this.liveTimeline;
-  }
-
-  canPaginateBackward() {
-    if (this.timeline[0]?.getType() === 'm.room.create') return false;
-    const tm = getFirstLinkedTimeline(this.activeTimeline);
-    return tm.getPaginationToken('b') !== null;
-  }
-
-  canPaginateForward() {
-    return !this.isServingLiveTimeline();
-  }
-
-  isEncrypted() {
-    return this.matrixClient.isRoomEncrypted(this.roomId);
-  }
-
-  clearLocalTimelines() {
-    this.timeline = [];
-  }
-
-  addToTimeline(mEvent) {
-    if (mEvent.getType() === 'm.room.member' && (settings.hideMembershipEvents || settings.hideNickAvatarEvents)) {
-      const content = mEvent.getContent();
-      const prevContent = mEvent.getPrevContent();
-      const { membership } = content;
-
-      if (settings.hideMembershipEvents) {
-        if (membership === 'invite' || membership === 'ban' || membership === 'leave') return;
-        if (prevContent.membership !== 'join') return;
-      }
-      if (settings.hideNickAvatarEvents) {
-        if (membership === 'join' && prevContent.membership === 'join') return;
-      }
-    }
-    if (mEvent.isRedacted()) return;
-    if (isReaction(mEvent)) {
-      addToMap(this.reactionTimeline, mEvent);
-      return;
-    }
-    if (!cons.supportEventTypes.includes(mEvent.getType())) return;
-    if (isEdited(mEvent)) {
-      addToMap(this.editedTimeline, mEvent);
-      return;
-    }
-    this.timeline.push(mEvent);
-  }
-
-  _populateAllLinkedEvents(timeline) {
-    const firstTimeline = getFirstLinkedTimeline(timeline);
-    iterateLinkedTimelines(firstTimeline, false, (tm) => {
-      tm.getEvents().forEach((mEvent) => this.addToTimeline(mEvent));
-    });
-  }
-
-  _populateTimelines() {
-    this.clearLocalTimelines();
-    this._populateAllLinkedEvents(this.activeTimeline);
-  }
-
-  async _reset(eventId) {
-    if (this.isEncrypted()) await this.decryptAllEventsOfTimeline(this.activeTimeline);
-    this._populateTimelines();
-    if (!this.initialized) {
-      this.initialized = true;
-      this._listenEvents();
-    }
-    this.emit(cons.events.roomTimeline.READY, eventId ?? null);
-  }
-
-  async loadLiveTimeline() {
-    this.activeTimeline = this.liveTimeline;
-    await this._reset();
-    return true;
-  }
-
-  async loadEventTimeline(eventId) {
-    // we use first unfiltered EventTimelineSet for room pagination.
-    const timelineSet = this.getUnfilteredTimelineSet();
-    try {
-      const eventTimeline = await this.matrixClient.getEventTimeline(timelineSet, eventId);
-      this.activeTimeline = eventTimeline;
-      await this._reset(eventId);
-      return true;
-    } catch {
-      return false;
-    }
-  }
-
-  async paginateTimeline(backwards = false, limit = 30) {
-    if (this.initialized === false) return false;
-    if (this.isOngoingPagination) return false;
-
-    this.isOngoingPagination = true;
-
-    const timelineToPaginate = backwards
-      ? getFirstLinkedTimeline(this.activeTimeline)
-      : getLastLinkedTimeline(this.activeTimeline);
-
-    if (timelineToPaginate.getPaginationToken(backwards ? 'b' : 'f') === null) {
-      this.emit(cons.events.roomTimeline.PAGINATED, backwards, 0);
-      this.isOngoingPagination = false;
-      return false;
-    }
-
-    const oldSize = this.timeline.length;
-    try {
-      await this.matrixClient.paginateEventTimeline(timelineToPaginate, { backwards, limit });
-
-      if (this.isEncrypted()) await this.decryptAllEventsOfTimeline(this.activeTimeline);
-      this._populateTimelines();
-
-      const loaded = this.timeline.length - oldSize;
-      this.emit(cons.events.roomTimeline.PAGINATED, backwards, loaded);
-      this.isOngoingPagination = false;
-      return true;
-    } catch {
-      this.emit(cons.events.roomTimeline.PAGINATED, backwards, 0);
-      this.isOngoingPagination = false;
-      return false;
-    }
-  }
-
-  decryptAllEventsOfTimeline(eventTimeline) {
-    const decryptionPromises = eventTimeline
-      .getEvents()
-      .filter((event) => event.isEncrypted() && !event.clearEvent)
-      .reverse()
-      .map((event) => event.attemptDecryption(this.matrixClient.crypto, { isRetry: true }));
-
-    return Promise.allSettled(decryptionPromises);
-  }
-
-  markAllAsRead() {
-    const readEventId = this.getReadUpToEventId();
-    this.notifications.deleteNoti(this.roomId);
-    if (this.timeline.length === 0) return;
-    const latestEvent = this.timeline[this.timeline.length - 1];
-    if (readEventId === latestEvent.getId()) return;
-    this.matrixClient.sendReadReceipt(latestEvent);
-    this.emit(cons.events.roomTimeline.MARKED_AS_READ, latestEvent);
-  }
-
-  hasEventInTimeline(eventId, timeline = this.activeTimeline) {
-    const timelineSet = this.getUnfilteredTimelineSet();
-    const eventTimeline = timelineSet.getTimelineForEvent(eventId);
-    if (!eventTimeline) return false;
-    return isTimelineLinked(eventTimeline, timeline);
-  }
-
-  getUnfilteredTimelineSet() {
-    return this.room.getUnfilteredTimelineSet();
-  }
-
-  getLiveReaders() {
-    const lastEvent = this.timeline[this.timeline.length - 1];
-    const liveEvents = this.liveTimeline.getEvents();
-    const lastLiveEvent = liveEvents[liveEvents.length - 1];
-
-    let readers = [];
-    if (lastEvent) readers = this.room.getUsersReadUpTo(lastEvent);
-    if (lastLiveEvent !== lastEvent) {
-      readers.splice(readers.length, 0, ...this.room.getUsersReadUpTo(lastLiveEvent));
-    }
-    return [...new Set(readers)];
-  }
-
-  getEventReaders(eventId) {
-    const readers = [];
-    let eventIndex = this.getEventIndex(eventId);
-    if (eventIndex < 0) return this.getLiveReaders();
-    for (; eventIndex < this.timeline.length; eventIndex += 1) {
-      readers.splice(readers.length, 0, ...this.room.getUsersReadUpTo(this.timeline[eventIndex]));
-    }
-    return [...new Set(readers)];
-  }
-
-  getUnreadEventIndex(readUpToEventId) {
-    if (!this.hasEventInTimeline(readUpToEventId)) return -1;
-
-    const readUpToEvent = this.findEventByIdInTimelineSet(readUpToEventId);
-    if (!readUpToEvent) return -1;
-    const rTs = readUpToEvent.getTs();
-
-    const tLength = this.timeline.length;
-
-    for (let i = 0; i < tLength; i += 1) {
-      const mEvent = this.timeline[i];
-      if (mEvent.getTs() > rTs) return i;
-    }
-    return -1;
-  }
-
-  getReadUpToEventId() {
-    return this.room.getEventReadUpTo(this.matrixClient.getUserId());
-  }
-
-  getEventIndex(eventId) {
-    return this.timeline.findIndex((mEvent) => mEvent.getId() === eventId);
-  }
-
-  findEventByIdInTimelineSet(eventId, eventTimelineSet = this.getUnfilteredTimelineSet()) {
-    return eventTimelineSet.findEventById(eventId);
-  }
-
-  findEventById(eventId) {
-    return this.timeline[this.getEventIndex(eventId)] ?? null;
-  }
-
-  deleteFromTimeline(eventId) {
-    const i = this.getEventIndex(eventId);
-    if (i === -1) return undefined;
-    return this.timeline.splice(i, 1)[0];
-  }
-
-  _listenEvents() {
-    this._listenRoomTimeline = (event, room, toStartOfTimeline, removed, data) => {
+    this._listenRoomTimeline = (event, room) => {
       if (room.roomId !== this.roomId) return;
-      if (this.isOngoingPagination) return;
-
-      // User is currently viewing the old events probably
-      // no need to add new event and emit changes.
-      // only add reactions and edited messages
-      if (this.isServingLiveTimeline() === false) {
-        if (!isReaction(event) && !isEdited(event)) return;
-      }
-
-      // We only process live events here
-      if (!data.liveEvent) return;
 
       if (event.isEncrypted()) {
-        // We will add this event after it is being decrypted.
         this.ongoingDecryptionCount += 1;
         return;
       }
 
-      // FIXME: An unencrypted plain event can come
-      // while previous event is still decrypting
-      // and has not been added to timeline
-      // causing unordered timeline view.
+      this.timeline = this.room.timeline;
+      if (this.isEdited(event)) {
+        this.addToMap(this.editedTimeline, event);
+      }
+      if (this.isReaction(event)) {
+        this.addToMap(this.reactionTimeline, event);
+      }
 
-      this.addToTimeline(event);
-      this.emit(cons.events.roomTimeline.EVENT, event);
+      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);
     };
 
     this._listenDecryptEvent = (event) => {
       if (event.getRoomId() !== this.roomId) return;
-      if (this.isOngoingPagination) return;
 
-      // Not a live event.
-      // so we don't need to process it here
-      if (this.ongoingDecryptionCount === 0) return;
+      if (this.ongoingDecryptionCount > 0) this.ongoingDecryptionCount -= 1;
+      this.timeline = this.room.timeline;
 
-      if (this.ongoingDecryptionCount > 0) {
-        this.ongoingDecryptionCount -= 1;
-      }
-      this.addToTimeline(event);
-      this.emit(cons.events.roomTimeline.EVENT, event);
-    };
-
-    this._listenRedaction = (mEvent, room) => {
-      if (room.roomId !== this.roomId) return;
-      const rEvent = this.deleteFromTimeline(mEvent.event.redacts);
-      this.editedTimeline.delete(mEvent.event.redacts);
-      this.reactionTimeline.delete(mEvent.event.redacts);
-      this.emit(cons.events.roomTimeline.EVENT_REDACTED, rEvent, mEvent);
+      if (this.ongoingDecryptionCount !== 0) return;
+      this.emit(cons.events.roomTimeline.EVENT);
     };
 
     this._listenTypingEvent = (event, member) => {
@@ -367,18 +60,15 @@ class RoomTimeline extends EventEmitter {
       this.emit(cons.events.roomTimeline.TYPING_MEMBERS_UPDATED, new Set([...this.typingMembers]));
     };
     this._listenReciptEvent = (event, room) => {
-      // we only process receipt for latest message here.
       if (room.roomId !== this.roomId) return;
       const receiptContent = event.getContent();
-
-      const mEvents = this.liveTimeline.getEvents();
-      const lastMEvent = mEvents[mEvents.length - 1];
-      const lastEventId = lastMEvent.getId();
+      if (this.timeline.length === 0) return;
+      const tmlLastEvent = this.timeline[this.timeline.length - 1];
+      const lastEventId = tmlLastEvent.getId();
       const lastEventRecipt = receiptContent[lastEventId];
-
       if (typeof lastEventRecipt === 'undefined') return;
       if (lastEventRecipt['m.read']) {
-        this.emit(cons.events.roomTimeline.LIVE_RECEIPT);
+        this.emit(cons.events.roomTimeline.READ_RECEIPT);
       }
     };
 
@@ -387,10 +77,87 @@ class RoomTimeline extends EventEmitter {
     this.matrixClient.on('Event.decrypted', this._listenDecryptEvent);
     this.matrixClient.on('RoomMember.typing', this._listenTypingEvent);
     this.matrixClient.on('Room.receipt', this._listenReciptEvent);
+
+    // TODO: remove below line when release
+    window.selectedRoom = this;
+
+    if (this.isEncryptedRoom()) this.room.decryptAllEvents();
+  }
+
+  isEncryptedRoom() {
+    return this.matrixClient.isRoomEncrypted(this.roomId);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  isEdited(mEvent) {
+    return mEvent.getRelation()?.rel_type === 'm.replace';
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  getRelateToId(mEvent) {
+    const relation = mEvent.getRelation();
+    return relation && relation.event_id;
+  }
+
+  addToMap(myMap, mEvent) {
+    const relateToId = this.getRelateToId(mEvent);
+    if (relateToId === null) return null;
+
+    if (typeof myMap.get(relateToId) === 'undefined') myMap.set(relateToId, []);
+    myMap.get(relateToId).push(mEvent);
+    return mEvent;
+  }
+
+  getEditedTimeline() {
+    const mReplace = new Map();
+    this.timeline.forEach((mEvent) => {
+      if (this.isEdited(mEvent)) {
+        this.addToMap(mReplace, mEvent);
+      }
+    });
+
+    return mReplace;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  isReaction(mEvent) {
+    return mEvent.getType() === 'm.reaction';
+  }
+
+  getReactionTimeline() {
+    const mReaction = new Map();
+    this.timeline.forEach((mEvent) => {
+      if (this.isReaction(mEvent)) {
+        this.addToMap(mReaction, mEvent);
+      }
+    });
+
+    return mReaction;
+  }
+
+  paginateBack() {
+    if (this.isOngoingPagination) return;
+    this.isOngoingPagination = true;
+
+    const MSG_LIMIT = 30;
+    this.matrixClient.scrollback(this.room, MSG_LIMIT).then(async (room) => {
+      if (room.oldState.paginationToken === null) {
+        // We have reached start of the timeline
+        this.isOngoingPagination = false;
+        if (this.isEncryptedRoom()) await this.room.decryptAllEvents();
+        this.emit(cons.events.roomTimeline.PAGINATED, false);
+        return;
+      }
+      this.editedTimeline = this.getEditedTimeline();
+      this.reactionTimeline = this.getReactionTimeline();
+
+      this.isOngoingPagination = false;
+      if (this.isEncryptedRoom()) await this.room.decryptAllEvents();
+      this.emit(cons.events.roomTimeline.PAGINATED, true);
+    });
   }
 
   removeInternalListeners() {
-    if (!this.initialized) return;
     this.matrixClient.removeListener('Room.timeline', this._listenRoomTimeline);
     this.matrixClient.removeListener('Room.redaction', this._listenRedaction);
     this.matrixClient.removeListener('Event.decrypted', this._listenDecryptEvent);

src/client/state/RoomsInput.js

@@ -95,13 +95,13 @@ function getFormattedBody(markdown) {
 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.body.replaceAll('\n', '\n> '));
+  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.body.replaceAll('\n', '\n> ')}`;
+  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'] || {};

src/client/state/cons.js

@@ -1,5 +1,4 @@
 const cons = {
-  version: '1.6.0',
   secretKey: {
     ACCESS_TOKEN: 'cinny_access_token',
     DEVICE_ID: 'cinny_device_id',
@@ -12,19 +11,12 @@ const cons = {
     HOME: 'home',
     DIRECTS: 'dm',
   },
-  supportEventTypes: ['m.room.create', 'm.room.message', 'm.room.encrypted', 'm.room.member', 'm.sticker'],
   notifs: {
     DEFAULT: 'default',
     ALL_MESSAGES: 'all_messages',
     MENTIONS_AND_KEYWORDS: 'mentions_and_keywords',
     MUTE: 'mute',
   },
-  status: {
-    PRE_FLIGHT: 'pre-flight',
-    IN_FLIGHT: 'in-flight',
-    SUCCESS: 'success',
-    ERROR: 'error',
-  },
   actions: {
     navigation: {
       SELECT_TAB: 'SELECT_TAB',
@@ -40,8 +32,6 @@ const cons = {
       OPEN_EMOJIBOARD: 'OPEN_EMOJIBOARD',
       OPEN_READRECEIPTS: 'OPEN_READRECEIPTS',
       OPEN_ROOMOPTIONS: 'OPEN_ROOMOPTIONS',
-      CLICK_REPLY_TO: 'CLICK_REPLY_TO',
-      OPEN_SEARCH: 'OPEN_SEARCH',
     },
     room: {
       JOIN: 'JOIN',
@@ -55,9 +45,6 @@ const cons = {
     },
     settings: {
       TOGGLE_MARKDOWN: 'TOGGLE_MARKDOWN',
-      TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
-      TOGGLE_MEMBERSHIP_EVENT: 'TOGGLE_MEMBERSHIP_EVENT',
-      TOGGLE_NICKAVATAR_EVENT: 'TOGGLE_NICKAVATAR_EVENT',
     },
   },
   events: {
@@ -75,8 +62,6 @@ const cons = {
       EMOJIBOARD_OPENED: 'EMOJIBOARD_OPENED',
       READRECEIPTS_OPENED: 'READRECEIPTS_OPENED',
       ROOMOPTIONS_OPENED: 'ROOMOPTIONS_OPENED',
-      REPLY_TO_CLICKED: 'REPLY_TO_CLICKED',
-      SEARCH_OPENED: 'SEARCH_OPENED',
     },
     roomList: {
       ROOMLIST_UPDATED: 'ROOMLIST_UPDATED',
@@ -91,15 +76,10 @@ const cons = {
       FULL_READ: 'FULL_READ',
     },
     roomTimeline: {
-      READY: 'READY',
       EVENT: 'EVENT',
       PAGINATED: 'PAGINATED',
       TYPING_MEMBERS_UPDATED: 'TYPING_MEMBERS_UPDATED',
-      LIVE_RECEIPT: 'LIVE_RECEIPT',
-      MARKED_AS_READ: 'MARKED_AS_READ',
-      EVENT_REDACTED: 'EVENT_REDACTED',
-      AT_BOTTOM: 'AT_BOTTOM',
-      SCROLL_TO_LIVE: 'SCROLL_TO_LIVE',
+      READ_RECEIPT: 'READ_RECEIPT',
     },
     roomsInput: {
       MESSAGE_SENT: 'MESSAGE_SENT',
@@ -110,9 +90,6 @@ const cons = {
     },
     settings: {
       MARKDOWN_TOGGLED: 'MARKDOWN_TOGGLED',
-      PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED',
-      MEMBERSHIP_EVENTS_TOGGLED: 'MEMBERSHIP_EVENTS_TOGGLED',
-      NICKAVATAR_EVENTS_TOGGLED: 'NICKAVATAR_EVENTS_TOGGLED',
     },
   },
 };

src/client/state/navigation.js

@@ -11,9 +11,7 @@ class Navigation extends EventEmitter {
     this.selectedSpacePath = [cons.tabs.HOME];
 
     this.selectedRoomId = null;
-    this.recentRooms = [];
-
-    this.isRawModalVisible = false;
+    this.isPeopleDrawerVisible = true;
   }
 
   _setSpacePath(roomId) {
@@ -29,27 +27,6 @@ class Navigation extends EventEmitter {
     this.selectedSpacePath.push(roomId);
   }
 
-  removeRecentRoom(roomId) {
-    if (typeof roomId !== 'string') return;
-    const roomIdIndex = this.recentRooms.indexOf(roomId);
-    if (roomIdIndex >= 0) {
-      this.recentRooms.splice(roomIdIndex, 1);
-    }
-  }
-
-  addRecentRoom(roomId) {
-    if (typeof roomId !== 'string') return;
-
-    this.recentRooms.push(roomId);
-    if (this.recentRooms.length > 10) {
-      this.recentRooms.splice(0, 1);
-    }
-  }
-
-  setIsRawModalVisible(visible) {
-    this.isRawModalVisible = visible;
-  }
-
   navigate(action) {
     const actions = {
       [cons.actions.navigation.SELECT_TAB]: () => {
@@ -74,15 +51,11 @@ class Navigation extends EventEmitter {
       [cons.actions.navigation.SELECT_ROOM]: () => {
         const prevSelectedRoomId = this.selectedRoomId;
         this.selectedRoomId = action.roomId;
-        this.removeRecentRoom(prevSelectedRoomId);
-        this.addRecentRoom(prevSelectedRoomId);
-        this.removeRecentRoom(this.selectedRoomId);
-        this.emit(
-          cons.events.navigation.ROOM_SELECTED,
-          this.selectedRoomId,
-          prevSelectedRoomId,
-          action.eventId,
-        );
+        this.emit(cons.events.navigation.ROOM_SELECTED, this.selectedRoomId, prevSelectedRoomId);
+      },
+      [cons.actions.navigation.TOGGLE_PEOPLE_DRAWER]: () => {
+        this.isPeopleDrawerVisible = !this.isPeopleDrawerVisible;
+        this.emit(cons.events.navigation.PEOPLE_DRAWER_TOGGLED, this.isPeopleDrawerVisible);
       },
       [cons.actions.navigation.OPEN_INVITE_LIST]: () => {
         this.emit(cons.events.navigation.INVITE_LIST_OPENED);
@@ -112,7 +85,7 @@ class Navigation extends EventEmitter {
         this.emit(
           cons.events.navigation.READRECEIPTS_OPENED,
           action.roomId,
-          action.userIds,
+          action.eventId,
         );
       },
       [cons.actions.navigation.OPEN_ROOMOPTIONS]: () => {
@@ -122,20 +95,6 @@ class Navigation extends EventEmitter {
           action.roomId,
         );
       },
-      [cons.actions.navigation.CLICK_REPLY_TO]: () => {
-        this.emit(
-          cons.events.navigation.REPLY_TO_CLICKED,
-          action.userId,
-          action.eventId,
-          action.body,
-        );
-      },
-      [cons.actions.navigation.OPEN_SEARCH]: () => {
-        this.emit(
-          cons.events.navigation.SEARCH_OPENED,
-          action.term,
-        );
-      },
     };
     actions[action.type]?.();
   }

src/client/state/settings.js

@@ -24,9 +24,6 @@ class Settings extends EventEmitter {
     this.themeIndex = this.getThemeIndex();
 
     this.isMarkdown = this.getIsMarkdown();
-    this.isPeopleDrawer = this.getIsPeopleDrawer();
-    this.hideMembershipEvents = this.getHideMembershipEvents();
-    this.hideNickAvatarEvents = this.getHideNickAvatarEvents();
 
     this.isTouchScreenDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
   }
@@ -65,33 +62,6 @@ class Settings extends EventEmitter {
     return settings.isMarkdown;
   }
 
-  getHideMembershipEvents() {
-    if (typeof this.hideMembershipEvents === 'boolean') return this.hideMembershipEvents;
-
-    const settings = getSettings();
-    if (settings === null) return false;
-    if (typeof settings.hideMembershipEvents === 'undefined') return false;
-    return settings.hideMembershipEvents;
-  }
-
-  getHideNickAvatarEvents() {
-    if (typeof this.hideNickAvatarEvents === 'boolean') return this.hideNickAvatarEvents;
-
-    const settings = getSettings();
-    if (settings === null) return false;
-    if (typeof settings.hideNickAvatarEvents === 'undefined') return false;
-    return settings.hideNickAvatarEvents;
-  }
-
-  getIsPeopleDrawer() {
-    if (typeof this.isPeopleDrawer === 'boolean') return this.isPeopleDrawer;
-
-    const settings = getSettings();
-    if (settings === null) return true;
-    if (typeof settings.isPeopleDrawer === 'undefined') return true;
-    return settings.isPeopleDrawer;
-  }
-
   setter(action) {
     const actions = {
       [cons.actions.settings.TOGGLE_MARKDOWN]: () => {
@@ -99,21 +69,6 @@ class Settings extends EventEmitter {
         setSettings('isMarkdown', this.isMarkdown);
         this.emit(cons.events.settings.MARKDOWN_TOGGLED, this.isMarkdown);
       },
-      [cons.actions.settings.TOGGLE_PEOPLE_DRAWER]: () => {
-        this.isPeopleDrawer = !this.isPeopleDrawer;
-        setSettings('isPeopleDrawer', this.isPeopleDrawer);
-        this.emit(cons.events.settings.PEOPLE_DRAWER_TOGGLED, this.isPeopleDrawer);
-      },
-      [cons.actions.settings.TOGGLE_MEMBERSHIP_EVENT]: () => {
-        this.hideMembershipEvents = !this.hideMembershipEvents;
-        setSettings('hideMembershipEvents', this.hideMembershipEvents);
-        this.emit(cons.events.settings.MEMBERSHIP_EVENTS_TOGGLED, this.hideMembershipEvents);
-      },
-      [cons.actions.settings.TOGGLE_NICKAVATAR_EVENT]: () => {
-        this.hideNickAvatarEvents = !this.hideNickAvatarEvents;
-        setSettings('hideNickAvatarEvents', this.hideNickAvatarEvents);
-        this.emit(cons.events.settings.NICKAVATAR_EVENTS_TOGGLED, this.hideNickAvatarEvents);
-      },
     };
 
     actions[action.type]?.();

src/index.scss

@@ -7,8 +7,6 @@
   --bg-surface-transparent: #FFFFFF00;
   --bg-surface-low: #F6F6F6;
   --bg-surface-low-transparent: #F6F6F600;
-  --bg-surface-extra-low: #F6F6F6;
-  --bg-surface-extra-low-transparent: #F6F6F600;
   --bg-surface-hover: rgba(0, 0, 0, 3%);
   --bg-surface-active: rgba(0, 0, 0, 5%);
   --bg-surface-border: rgba(0, 0, 0, 6%);
@@ -35,13 +33,10 @@
 
   --bg-tooltip: #353535;
   --bg-badge: #989898;
-  --bg-ping: hsla(137deg, 100%, 68%, 40%);
-  --bg-ping-hover: hsla(137deg, 100%, 68%, 50%);
-  --bg-divider: hsla(0, 0%, 0%, .1);
 
   /* text color | --tc-[background type]-[priority]: value */
   --tc-surface-high: #000000;
-  --tc-surface-normal: rgba(0, 0, 0, 78%);
+  --tc-surface-normal: rgba(0, 0, 0, 68%);
   --tc-surface-normal-low: rgba(0, 0, 0, 60%);
   --tc-surface-low: rgba(0, 0, 0, 38%);
   
@@ -159,9 +154,6 @@
   // large size nav drawer & people drawer width => 326px, 312px
   // medium size nav drawer & people drawer width => 280, 268
 
-  /* transition curves */
-  --fluid-push: cubic-bezier(0, 0.8, 0.67, 0.97);
-  
   --font-family: 'Roboto', 'Supreme', sans-serif;
 }
 
@@ -171,8 +163,6 @@
   --bg-surface-transparent: hsla(0, 0%, 95%, 0);
   --bg-surface-low: hsl(0, 0%, 91%);
   --bg-surface-low-transparent: hsla(0, 0%, 91%, 0);
-  --bg-surface-extra-low: hsl(0, 0%, 91%);
-  --bg-surface-extra-low-transparent: hsla(0, 0%, 91%, 0);
 }
 
 .dark-theme,
@@ -182,8 +172,6 @@
   --bg-surface-transparent: hsla(208, 8%, 20%, 0);
   --bg-surface-low: hsl(208, 8%, 16%);
   --bg-surface-low-transparent: hsla(208, 8%, 16%, 0);
-  --bg-surface-extra-low: hsl(208, 8%, 14%);
-  --bg-surface-extra-low-transparent: hsla(208, 8%, 14%, 0);
   --bg-surface-hover: rgba(255, 255, 255, 3%);
   --bg-surface-active: rgba(255, 255, 255, 5%);
   --bg-surface-border: rgba(0, 0, 0, 20%);
@@ -195,16 +183,12 @@
 
   --bg-tooltip: #000;
   --bg-badge: hsl(0, 0%, 75%);
-  --bg-ping: hsla(137deg, 100%, 38%, 40%);
-  --bg-ping-hover: hsla(137deg, 100%, 38%, 50%);
-  --bg-divider: hsla(0, 0%, 100%, .1);
-
 
   /* text color | --tc-[background type]-[priority]: value */
   --tc-surface-high: rgba(255, 255, 255, 98%);
-  --tc-surface-normal: rgba(255, 255, 255, 94%);
+  --tc-surface-normal: rgba(255, 255, 255, 84%);
   --tc-surface-normal-low: rgba(255, 255, 255, 60%);
-  --tc-surface-low: rgba(255, 255, 255, 58%);
+  --tc-surface-low: rgba(255, 255, 255, 48%);
   
   --tc-primary-high: #ffffff;
   --tc-primary-normal: rgba(255, 255, 255, 0.68);
@@ -215,7 +199,7 @@
   --tc-badge: black;
 
   /* system icons | --ic-[background type]-[priority]: value */
-  --ic-surface-normal: rgba(255, 255, 255, 84%);
+  --ic-surface-normal: rgba(255, 255, 255, 68%);
   --ic-primary-normal: #ffffff;
   
   /* shadow and overlay */
@@ -237,22 +221,20 @@
   --bg-surface: hsl(64, 6%, 14%);
   --bg-surface-transparent: hsla(64, 6%, 14%, 0);
   --bg-surface-low: hsl(64, 6%, 10%);
-  --bg-surface-low-transparent: hsla(64, 6%, 10%, 0);
-  --bg-surface-extra-low: hsl(64, 6%, 8%);
-  --bg-surface-extra-low-transparent: hsla(64, 6%, 8%, 0);
+  --bg-surface-low-transparent: hsla(64, 6%, 14%, 0);
 
   --bg-badge: #c4c1ab;
 
   
   /* text color | --tc-[background type]-[priority]: value */
   --tc-surface-high: rgb(255, 251, 222, 94%);
-  --tc-surface-normal: rgba(255, 251, 222, 94%);
+  --tc-surface-normal: rgba(255, 251, 222, 74%);
   --tc-surface-normal-low: rgba(255, 251, 222, 60%); 
-  --tc-surface-low: rgba(255, 251, 222, 58%);
+  --tc-surface-low: rgba(255, 251, 222, 38%);
 
 
   /* system icons | --ic-[background type]-[priority]: value */
-  --ic-surface-normal: rgb(255, 251, 222, 84%);
+  --ic-surface-normal: rgb(255 251 222 / 68%);
 }
 
 html {
@@ -308,43 +290,6 @@ button {
   overflow: visible;
   -webkit-appearance: button;
 }
-textarea,
-input,
-input[type],
-input[type=text],
-input[type=username],
-input[type=password],
-input[type=email],
-input[type=checkbox] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-input[type=checkbox] {
-  margin: 0;
-  padding: 0;
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
-  box-shadow: var(--bs-primary-border);
-  background-color: var(--bg-surface);
-  cursor: pointer;
-  @extend .flex--center;
-
-  &:checked {
-    background-color: var(--bg-primary);
-    &::before {
-      content: "";
-      display: inline-block;
-      width: 12px;
-      height: 6px;
-      border: 6px solid white;
-      border-width: 0 0 3px 3px;
-      transform: rotateZ(-45deg) translate(1px, -1px);
-    }
-  }
-}
-
 textarea {
   color: inherit;
   word-spacing: inherit;