Bugs fixed

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

.github/FUNDING.yml

@@ -1,2 +1,2 @@
-patreon: ajbura
+open_collective: cinny
 liberapay: ajbura

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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,78 @@
+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/docker.yaml

@@ -0,0 +1,34 @@
+name: Publish Docker image
+
+on:
+  release:
+    types: [published]
+
+jobs:
+   push_to_registry:
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v2
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v3
+        with:
+          images: ajbura/cinny
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/netlify-dev.yaml

@@ -0,0 +1,21 @@
+name: 'Deploy to Netlify (dev)'
+
+on:
+  push:
+    branches:
+       - dev
+
+jobs:
+  deploy:
+    name: 'Deploy'
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v1
+      - uses: jsmrcaga/action-netlify-deploy@9cc40dcd499dd1511b3cc99912444f8970411cc6
+        with:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE2_ID }}
+          BUILD_DIRECTORY: "dist"
+          NETLIFY_DEPLOY_MESSAGE: "Dev deploy v${{ github.ref }}"
+          NETLIFY_DEPLOY_TO_PROD: true

.github/workflows/netlify-prod.yaml

@@ -0,0 +1,20 @@
+name: 'Deploy to Netlify (prod)'
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  deploy:
+    name: 'Deploy'
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v1
+      - uses: jsmrcaga/action-netlify-deploy@9cc40dcd499dd1511b3cc99912444f8970411cc6
+        with:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+          BUILD_DIRECTORY: "dist"
+          NETLIFY_DEPLOY_MESSAGE: "Prod deploy v${{ github.ref }}"
+          NETLIFY_DEPLOY_TO_PROD: true

.gitignore

@@ -1,4 +1,6 @@
 experiment
 dist
 node_modules
-devAssets
+devAssets
+
+.DS_Store

CONTRIBUTING.md

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

LICENSE

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

README.md

@@ -10,8 +10,15 @@
 
 Cinny is a [Matrix](https://matrix.org) client focusing primarily on simple, elegant and secure interface.
 
+![preview](https://github.com/ajbura/cinny-site/blob/master/assets/preview-light.png)
+
 ## Building and Running
 
+### Running pre-compiled
+
+A tarball of pre-compiled version of the app is provided with each [release](https://github.com/ajbura/cinny/releases).
+You can serve the application with a webserver of your choosing by simply copying `dist/` directory to the webroot.
+
 ### Building from source
 
 Execute the following commands to compile the app from its source code:
@@ -42,4 +49,16 @@ docker run -p 8080:80 cinny:latest
 This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by
 navigating to `http://localhost:8080`.
 
+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
+
+Code licensed under the MIT License: <http://opensource.org/licenses/MIT>
+
+Graphics licensed under CC-BY 4.0: <https://creativecommons.org/licenses/by/4.0/>

config.json

@@ -0,0 +1,12 @@
+{
+  "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.2.0",
+  "version": "1.6.0",
   "description": "Yet another matrix client",
   "main": "index.js",
   "engines": {
@@ -15,16 +15,18 @@
   "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.4.tgz",
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
     "@tippyjs/react": "^4.2.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": "^3.0.0-beta.3",
+    "linkifyjs": "^2.1.9",
-    "matrix-js-sdk": "^12.4.1",
+    "matrix-js-sdk": "^15.2.1",
     "micromark": "^3.0.3",
     "micromark-extension-gfm": "^1.0.0",
     "prop-types": "^15.7.2",
@@ -32,16 +34,13 @@
     "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",
-    "react-router-dom": "^5.2.0",
+    "sanitize-html": "^2.5.3",
-    "react-syntax-highlighter": "^15.4.3",
-    "remark-gfm": "^1.0.0",
     "tippy.js": "^6.3.1",
     "twemoji": "^13.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.13",
+    "@babel/core": "^7.15.5",
     "@babel/preset-env": "^7.13.12",
     "@babel/preset-react": "^7.13.13",
     "assert": "^2.0.0",
@@ -71,9 +70,9 @@
     "stream-browserify": "^3.0.0",
     "style-loader": "^2.0.0",
     "util": "^0.12.4",
-    "webpack": "^5.28.0",
+    "webpack": "^5.62.1",
-    "webpack-cli": "^4.5.0",
+    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-dev-server": "^4.4.0",
     "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">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 user-scalable=no">
     <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">

public/res/ic/filled/pin.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M13.8,4.5l0.7,0.7l-3.4,3.4L7.7,9.7l-1-1l-1.4,1.4l3.5,3.5l-5.7,5.7l1.4,1.4l5.7-5.7l3.5,3.5l1.4-1.4l-1-1l1.1-3.4l3.4-3.4
+	l0.7,0.7l1.4-1.4l-5.7-5.7L13.8,4.5z"/>
+</svg>

public/res/ic/filled/star.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="12,2 15.1,8.6 22,9.6 17,14.8 18.2,22 12,18.6 5.8,22 7,14.8 2,9.6 8.9,8.6 	"/>
+</g>
+</svg>

public/res/ic/outlined/bell-off.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
+	<path d="M20.1,18.1L20.1,18.1L16,14L9.2,7.2L7.8,5.8L5.9,3.9L4.5,5.3l2.1,2.1C6.2,8.2,6,9.1,6,10v6H4v2h13.2l1.5,1.5L20.1,18.1z
+		 M8,16v-6c0-0.4,0.1-0.7,0.1-1l7,7H8z"/>
+	<path d="M12,6c2.2,0,4,1.8,4,4v1.2l2,2V10c0-3-2.2-5.4-5-5.9V3h-2v1.1c-0.6,0.1-1.1,0.3-1.6,0.5L11,6.1C11.3,6.1,11.6,6,12,6z"/>
+</g>
+</svg>

public/res/ic/outlined/bell-ping.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<circle cx="17" cy="8" r="3"/>
+	<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
+	<path d="M18,12.9C17.7,13,17.3,13,17,13s-0.7,0-1-0.1V16H8v-6c0-2.2,1.8-4,4-4c0.1,0,0.3,0,0.4,0c0.3-0.7,0.7-1.3,1.3-1.8
+		c-0.2-0.1-0.5-0.1-0.7-0.2V3h-2v1.1C8.2,4.6,6,7,6,10v6H4v2h16v-2h-2V12.9z"/>
+	<path d="M6.3,4.3L4.9,2.9C3.1,4.7,2,7.2,2,10h2C4,7.8,4.9,5.8,6.3,4.3z"/>
+</g>
+</svg>

public/res/ic/outlined/bell-ring.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
+	<path d="M18,10c0-3-2.2-5.4-5-5.9V3h-2v1.1C8.2,4.6,6,7,6,10v6H4v2h16v-2h-2V10z M16,16H8v-6c0-2.2,1.8-4,4-4s4,1.8,4,4V16z"/>
+	<path d="M6.3,4.3L4.9,2.9C3.1,4.7,2,7.2,2,10h2C4,7.8,4.9,5.8,6.3,4.3z"/>
+	<path d="M19.1,2.9l-1.4,1.4C19.1,5.8,20,7.8,20,10h2C22,7.2,20.9,4.7,19.1,2.9z"/>
+</g>
+</svg>

public/res/ic/outlined/bell.svg

@@ -4,8 +4,7 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
 <g>
-	<path d="M12,4c2.8,0,5,2.2,5,5v4v0.8l0.6,0.6l0.6,0.6H5.8l0.6-0.6L7,13.8V13V9C7,6.2,9.2,4,12,4 M12,2C8.1,2,5,5.1,5,9v4l-2,2v2h18
+	<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
-		v-2l-2-2V9C19,5.1,15.9,2,12,2L12,2z"/>
+	<path d="M18,16v-6c0-3-2.2-5.4-5-5.9V3h-2v1.1C8.2,4.6,6,7,6,10v6H4v2h16v-2H18z M16,16H8v-6c0-2.2,1.8-4,4-4s4,1.8,4,4V16z"/>
-	<path d="M9,19c0,1.7,1.3,3,3,3s3-1.3,3-3H9z"/>
 </g>
 </svg>

public/res/ic/outlined/eye.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<g>
+		<path d="M12,19c-4.4,0-8-4-9.3-5.8c-0.6-0.7-0.6-1.7,0-2.4C4,9,7.6,5,12,5s8,4,9.3,5.8c0.6,0.7,0.6,1.7,0,2.4C20,15,16.4,19,12,19
+			z M12,7c-3.6,0-6.9,3.8-7.8,5c0.9,1.2,4.2,5,7.8,5s6.9-3.8,7.8-5C18.9,10.8,15.6,7,12,7z"/>
+	</g>
+	<circle cx="12" cy="12" r="3"/>
+</g>
+</svg>

public/res/ic/outlined/pin.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M13.8,4.5l0.7,0.7l-3.4,3.4L7.7,9.7l-1-1l-1.4,1.4l3.5,3.5l-5.7,5.7l1.4,1.4l5.7-5.7l3.5,3.5l1.4-1.4l-1-1l1.1-3.4l3.4-3.4
+	l0.7,0.7l1.4-1.4l-5.7-5.7L13.8,4.5z M13.7,11.8l-1,2.9l-3.4-3.4l2.9-1l3.7-3.7l1.4,1.4L13.7,11.8z"/>
+</svg>

public/res/ic/outlined/shield-empty.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M12,2L3,6v7c0,5,4,9,9,9c5,0,9-4,9-9V6L12,2z M19,13c0,3.9-3.1,7-7,7s-7-3.1-7-7V7.3l7-3.1l7,3.1V13z"/>
+</svg>

public/res/ic/outlined/star.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M12,6.7l1.7,3.7l4.1,0.6l-3,3.1l0.7,4.2l-3.5-2l-3.5,2l0.7-4.2l-3-3.1l4.1-0.6L12,6.7 M12,2L8.9,8.6L2,9.6l5,5.1L5.8,22
+	l6.2-3.4l6.2,3.4L17,14.8l5-5.1l-6.9-1.1L12,2L12,2z"/>
+</svg>

src/app/atoms/avatar/Avatar.jsx

@@ -2,6 +2,8 @@ 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';
 
@@ -29,7 +31,11 @@ function Avatar({
               {
                 iconSrc !== null
                   ? <RawIcon size={size} src={iconSrc} />
-                  : text !== null && <Text variant={textSize}>{text}</Text>
+                  : text !== null && (
+                    <Text variant={textSize}>
+                      {twemojify([...text][0])}
+                    </Text>
+                  )
               }
             </span>
           )

src/app/atoms/avatar/Avatar.scss

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

src/app/atoms/badge/NotificationBadge.jsx

@@ -8,7 +8,7 @@ function NotificationBadge({ alert, content }) {
   const notificationClass = alert ? ' notification-badge--alert' : '';
   return (
     <div className={`notification-badge${notificationClass}`}>
-      {content && <Text variant="b3">{content}</Text>}
+      {content !== null && <Text variant="b3">{content}</Text>}
     </div>
   );
 }

src/app/atoms/badge/NotificationBadge.scss

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

src/app/atoms/button/Button.jsx

@@ -6,27 +6,32 @@ import Text from '../text/Text';
 import RawIcon from '../system-icons/RawIcon';
 import { blurOnBubbling } from './script';
 
-function Button({
+const Button = React.forwardRef(({
-  id, variant, iconSrc, type, onClick, children, disabled,
+  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={`btn-${variant} ${iconClass} noselect`}
+      className={`${className ? `${className} ` : ''}btn-${variant} ${iconClass} noselect`}
       onMouseUp={(e) => blurOnBubbling(e, `.btn-${variant}`)}
       onClick={onClick}
-      type={type === 'button' ? 'button' : 'submit'}
+      // eslint-disable-next-line react/button-has-type
+      type={type}
       disabled={disabled}
     >
       {iconSrc !== null && <RawIcon size="small" src={iconSrc} />}
-      <Text variant="b1">{ children }</Text>
+      {typeof children === 'string' && <Text variant="b1">{ children }</Text>}
+      {typeof children !== 'string' && children }
     </button>
   );
-}
+});
 
 Button.defaultProps = {
   id: '',
+  className: null,
   variant: 'surface',
   iconSrc: null,
   type: 'button',
@@ -36,9 +41,10 @@ Button.defaultProps = {
 
 Button.propTypes = {
   id: PropTypes.string,
-  variant: PropTypes.oneOf(['surface', 'primary', 'caution', 'danger']),
+  className: PropTypes.string,
+  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
   iconSrc: PropTypes.string,
-  type: PropTypes.oneOf(['button', 'submit']),
+  type: PropTypes.oneOf(['button', 'submit', 'reset']),
   onClick: PropTypes.func,
   children: PropTypes.node.isRequired,
   disabled: PropTypes.bool,

src/app/atoms/button/Button.scss

@@ -2,6 +2,7 @@
 
 .btn-surface,
 .btn-primary,
+.btn-positive,
 .btn-caution,
 .btn-danger {
   display: inline-flex;
@@ -67,6 +68,13 @@
   @include state.focus(var(--bs-primary-outline));
   @include state.active(var(--bg-primary-active));
 }
+.btn-positive {
+  box-shadow: var(--bs-positive-border);
+  @include color(var(--tc-positive-high), var(--ic-positive-normal));
+  @include state.hover(var(--bg-positive-hover));
+  @include state.focus(var(--bs-positive-outline));
+  @include state.active(var(--bg-positive-active));
+}
 .btn-caution {
   box-shadow: var(--bs-caution-border);
   @include color(var(--tc-caution-high), var(--ic-caution-normal));

src/app/atoms/button/IconButton.jsx

@@ -7,48 +7,53 @@ import Tooltip from '../tooltip/Tooltip';
 import { blurOnBubbling } from './script';
 import Text from '../text/Text';
 
-// TODO:
-// 1. [done] an icon only button have "src"
-// 2. have multiple variant
-// 3. [done] should have a smart accessibility "label" arial-label
-// 4. [done] have size as RawIcon
-
 const IconButton = React.forwardRef(({
   variant, size, type,
-  tooltip, tooltipPlacement, src, onClick,
+  tooltip, tooltipPlacement, src, onClick, tabIndex,
-}, ref) => (
+}, ref) => {
-  <Tooltip
+  const btn = (
-    placement={tooltipPlacement}
-    content={<Text variant="b2">{tooltip}</Text>}
-  >
     <button
       ref={ref}
-      className={`ic-btn-${variant}`}
+      className={`ic-btn ic-btn-${variant}`}
       onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)}
       onClick={onClick}
-      type={type === 'button' ? 'button' : 'submit'}
+      // eslint-disable-next-line react/button-has-type
+      type={type}
+      tabIndex={tabIndex}
     >
       <RawIcon size={size} src={src} />
     </button>
-  </Tooltip>
+  );
-));
+  if (tooltip === null) return btn;
+  return (
+    <Tooltip
+      placement={tooltipPlacement}
+      content={<Text variant="b2">{tooltip}</Text>}
+    >
+      {btn}
+    </Tooltip>
+  );
+});
 
 IconButton.defaultProps = {
   variant: 'surface',
   size: 'normal',
   type: 'button',
+  tooltip: null,
   tooltipPlacement: 'top',
   onClick: null,
+  tabIndex: 0,
 };
 
 IconButton.propTypes = {
-  variant: PropTypes.oneOf(['surface']),
+  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
   size: PropTypes.oneOf(['normal', 'small', 'extra-small']),
-  type: PropTypes.oneOf(['button', 'submit']),
+  type: PropTypes.oneOf(['button', 'submit', 'reset']),
-  tooltip: PropTypes.string.isRequired,
+  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

@@ -1,9 +1,6 @@
 @use 'state';
 
-.ic-btn-surface,
+.ic-btn {
-.ic-btn-primary,
-.ic-btn-caution,
-.ic-btn-danger {
   padding: var(--sp-extra-tight);
   border: none;
   border-radius: var(--bo-radius);
@@ -31,4 +28,29 @@
   @include state.hover(var(--bg-surface-hover));
   @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));
+  @include focus(var(--bg-positive-hover));
+  @include state.active(var(--bg-positive-active));
+}
+.ic-btn-caution {
+  @include color(var(--ic-caution-normal));
+  @include state.hover(var(--bg-caution-hover));
+  @include focus(var(--bg-caution-hover));
+  @include state.active(var(--bg-caution-active));
+}
+.ic-btn-danger {
+  @include color(var(--ic-danger-normal));
+  @include state.hover(var(--bg-danger-hover));
+  @include focus(var(--bg-danger-hover));
+  @include state.active(var(--bg-danger-active));
 }

src/app/atoms/chip/Chip.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Chip.scss';
+
+import Text from '../text/Text';
+import RawIcon from '../system-icons/RawIcon';
+
+function Chip({
+  iconSrc, iconColor, text, children,
+  onClick,
+}) {
+  return (
+    <button className="chip" type="button" onClick={onClick}>
+      {iconSrc != null && <RawIcon src={iconSrc} color={iconColor} size="extra-small" />}
+      {(text != null && text !== '') && <Text variant="b3">{text}</Text>}
+      {children}
+    </button>
+  );
+}
+
+Chip.propTypes = {
+  iconSrc: PropTypes.string,
+  iconColor: PropTypes.string,
+  text: PropTypes.string,
+  children: PropTypes.element,
+  onClick: PropTypes.func,
+};
+
+Chip.defaultProps = {
+  iconSrc: null,
+  iconColor: null,
+  text: null,
+  children: null,
+  onClick: null,
+};
+
+export default Chip;

src/app/atoms/chip/Chip.scss

@@ -0,0 +1,33 @@
+.chip {
+  padding: var(--sp-ultra-tight) var(--sp-extra-tight);
+  
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  
+  background: var(--bg-surface-low);
+  border-radius: var(--bo-radius);
+  box-shadow: var(--bs-surface-border);
+  cursor: pointer;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--bg-surface-hover);
+    }
+  }
+
+  & > .text {
+    flex: 1;
+    color: var(--tc-surface-high);
+  }
+
+  & > .ic-raw {
+    width: 16px;
+    height: 16px;
+    margin-right: var(--sp-ultra-tight);
+    [dir=rtl] & {
+      margin-right: 0;
+      margin-left: var(--sp-ultra-tight);
+    }
+  }
+}

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

@@ -31,6 +31,7 @@ function ContextMenu({
       interactive
       arrow={false}
       maxWidth={maxWidth}
+      duration={200}
     >
       {render(isVisible ? hideMenu : showMenu)}
     </Tippy>
@@ -66,7 +67,7 @@ function MenuHeader({ children }) {
 }
 
 MenuHeader.propTypes = {
-  children: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
 };
 
 function MenuItem({
@@ -93,7 +94,7 @@ MenuItem.defaultProps = {
 };
 
 MenuItem.propTypes = {
-  variant: PropTypes.oneOf(['surface', 'caution', 'danger']),
+  variant: PropTypes.oneOf(['surface', 'positive', 'caution', 'danger']),
   iconSrc: PropTypes.string,
   type: PropTypes.oneOf(['button', 'submit']),
   onClick: PropTypes.func.isRequired,

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

@@ -30,6 +30,9 @@
 
   .text {
     color: var(--tc-surface-low);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &:not(:first-child) {
@@ -41,7 +44,7 @@
 .context-menu__item {
   button[class^="btn"] {
     width: 100%;
-    justify-content: start;
+    justify-content: flex-start;
     border-radius: 0;
     box-shadow: none;
     white-space: nowrap;

src/app/atoms/divider/Divider.jsx

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

src/app/atoms/divider/Divider.scss

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

src/app/atoms/input/Input.jsx

@@ -5,9 +5,10 @@ import './Input.scss';
 import TextareaAutosize from 'react-autosize-textarea';
 
 function Input({
-  id, label, value, placeholder,
+  id, label, name, value, placeholder,
   required, type, onChange, forwardRef,
   resizable, minHeight, onResize, state,
+  onKeyDown,
 }) {
   return (
     <div className="input-container">
@@ -16,6 +17,7 @@ function Input({
         ? (
           <TextareaAutosize
             style={{ minHeight: `${minHeight}px` }}
+            name={name}
             id={id}
             className={`input input--resizable${state !== 'normal' ? ` input--${state}` : ''}`}
             ref={forwardRef}
@@ -26,11 +28,13 @@ function Input({
             autoComplete="off"
             onChange={onChange}
             onResize={onResize}
+            onKeyDown={onKeyDown}
           />
         ) : (
           <input
             ref={forwardRef}
             id={id}
+            name={name}
             className={`input ${state !== 'normal' ? ` input--${state}` : ''}`}
             type={type}
             placeholder={placeholder}
@@ -38,6 +42,7 @@ function Input({
             defaultValue={value}
             autoComplete="off"
             onChange={onChange}
+            onKeyDown={onKeyDown}
           />
         )}
     </div>
@@ -46,6 +51,7 @@ function Input({
 
 Input.defaultProps = {
   id: null,
+  name: '',
   label: '',
   value: '',
   placeholder: '',
@@ -57,10 +63,12 @@ Input.defaultProps = {
   minHeight: 46,
   onResize: null,
   state: 'normal',
+  onKeyDown: null,
 };
 
 Input.propTypes = {
   id: PropTypes.string,
+  name: PropTypes.string,
   label: PropTypes.string,
   value: PropTypes.string,
   placeholder: PropTypes.string,
@@ -72,6 +80,7 @@ Input.propTypes = {
   minHeight: PropTypes.number,
   onResize: PropTypes.func,
   state: PropTypes.oneOf(['normal', 'success', 'error']),
+  onKeyDown: PropTypes.func,
 };
 
 export default Input;

src/app/atoms/input/Input.scss

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

src/app/atoms/scroll/_scrollbar.scss

@@ -32,6 +32,8 @@
 
 @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/segmented-controls/SegmentedControls.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './SegmentedControls.scss';
 
@@ -17,6 +17,10 @@ function SegmentedControls({
     onSelect(segmentIndex);
   }
 
+  useEffect(() => {
+    setSelect(selected);
+  }, [selected]);
+
   return (
     <div className="segmented-controls">
       {

src/app/atoms/text/Text.scss

@@ -4,12 +4,26 @@
   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, children,
+  className, placement, content, delay, children,
 }) {
   return (
     <Tippy
@@ -14,7 +14,7 @@ function Tooltip({
       arrow={false}
       maxWidth={250}
       placement={placement}
-      delay={[0, 0]}
+      delay={delay}
       duration={[100, 0]}
     >
       {children}
@@ -25,12 +25,14 @@ 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

@@ -0,0 +1,10 @@
+/* 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

@@ -0,0 +1,22 @@
+/* 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/channel-intro/ChannelIntro.jsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './ChannelIntro.scss';
-
-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 ChannelIntro({
-  roomId, avatarSrc, name, heading, desc, time,
-}) {
-  return (
-    <div className="channel-intro">
-      <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={colorMXID(roomId)} size="large" />
-      <div className="channel-intro__content">
-        <Text className="channel-intro__name" variant="h1">{heading}</Text>
-        <Text className="channel-intro__desc" variant="b1">{linkifyContent(desc)}</Text>
-        { time !== null && <Text className="channel-intro__time" variant="b3">{time}</Text>}
-      </div>
-    </div>
-  );
-}
-
-ChannelIntro.defaultProps = {
-  avatarSrc: false,
-  time: null,
-};
-
-ChannelIntro.propTypes = {
-  roomId: PropTypes.string.isRequired,
-  avatarSrc: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.bool,
-  ]),
-  name: PropTypes.string.isRequired,
-  heading: PropTypes.string.isRequired,
-  desc: PropTypes.string.isRequired,
-  time: PropTypes.string,
-};
-
-export default ChannelIntro;

src/app/molecules/dialog/Dialog.jsx

@@ -2,6 +2,8 @@ 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';
@@ -22,7 +24,7 @@ function Dialog({
         <div className="dialog__content">
           <Header>
             <TitleWrapper>
-              <Text variant="h2">{title}</Text>
+              <Text variant="h2">{twemojify(title)}</Text>
             </TitleWrapper>
             {contentOptions}
           </Header>

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

@@ -0,0 +1,59 @@
+/* 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

@@ -0,0 +1,32 @@
+
+.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

@@ -0,0 +1,88 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import './ImageUpload.scss';
+
+import initMatrix from '../../../client/initMatrix';
+
+import Text from '../../atoms/text/Text';
+import Avatar from '../../atoms/avatar/Avatar';
+import Spinner from '../../atoms/spinner/Spinner';
+
+function ImageUpload({
+  text, bgColor, imageSrc, onUpload, onRequestRemove,
+}) {
+  const [uploadPromise, setUploadPromise] = useState(null);
+  const uploadImageRef = useRef(null);
+
+  async function uploadImage(e) {
+    const file = e.target.files.item(0);
+    if (file === null) return;
+    try {
+      const uPromise = initMatrix.matrixClient.uploadContent(file, { onlyContentUri: false });
+      setUploadPromise(uPromise);
+
+      const res = await uPromise;
+      if (typeof res?.content_uri === 'string') onUpload(res.content_uri);
+      setUploadPromise(null);
+    } catch {
+      setUploadPromise(null);
+    }
+    uploadImageRef.current.value = null;
+  }
+
+  function cancelUpload() {
+    initMatrix.matrixClient.cancelUpload(uploadPromise);
+    setUploadPromise(null);
+    uploadImageRef.current.value = null;
+  }
+
+  return (
+    <div className="img-upload__wrapper">
+      <button
+        type="button"
+        className="img-upload"
+        onClick={() => {
+          if (uploadPromise !== null) return;
+          uploadImageRef.current.click();
+        }}
+      >
+        <Avatar
+          imageSrc={imageSrc}
+          text={text}
+          bgColor={bgColor}
+          size="large"
+        />
+        <div className={`img-upload__process ${uploadPromise === null ? ' img-upload__process--stopped' : ''}`}>
+          {uploadPromise === null && <Text variant="b3">Upload</Text>}
+          {uploadPromise !== null && <Spinner size="small" />}
+        </div>
+      </button>
+      { (typeof imageSrc === 'string' || uploadPromise !== null) && (
+        <button
+          className="img-upload__btn-cancel"
+          type="button"
+          onClick={uploadPromise === null ? onRequestRemove : cancelUpload}
+        >
+          <Text variant="b3">{uploadPromise ? 'Cancel' : 'Remove'}</Text>
+        </button>
+      )}
+      <input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" />
+    </div>
+  );
+}
+
+ImageUpload.defaultProps = {
+  text: null,
+  bgColor: 'transparent',
+  imageSrc: null,
+};
+
+ImageUpload.propTypes = {
+  text: PropTypes.string,
+  bgColor: PropTypes.string,
+  imageSrc: PropTypes.string,
+  onUpload: PropTypes.func.isRequired,
+  onRequestRemove: PropTypes.func.isRequired,
+};
+
+export default ImageUpload;

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

@@ -0,0 +1,50 @@
+.img-upload__wrapper {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.img-upload {
+	display: flex;
+	cursor: pointer;
+	position: relative;
+
+	&__process {
+		width: 100%;
+		height: 100%;
+		border-radius: var(--bo-radius);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: rgba(0, 0, 0, .6);
+		
+		position: absolute;
+		left: 0;
+		right: 0;
+		z-index: 1;
+		& .text {
+			text-transform: uppercase;
+			font-weight: 600;
+			color: white;
+		}
+		&--stopped {
+			display: none;
+		}
+		& .donut-spinner {
+			border-color: rgb(255, 255, 255, .3);
+    	border-left-color: white;
+		}
+	}
+	&:hover .img-upload__process--stopped {
+		display: flex;
+	}
+
+
+	&__btn-cancel {
+		margin-top: var(--sp-extra-tight);
+		cursor: pointer;
+		& .text {
+			color: var(--tc-danger-normal)
+		}
+	}
+}

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

@@ -1,108 +0,0 @@
-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-export-e2e-room-keys/ExportE2ERoomKeys.jsx

@@ -0,0 +1,100 @@
+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

@@ -0,0 +1,28 @@
+.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

@@ -0,0 +1,133 @@
+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/import-export-e2e-room-keys/ImportE2ERoomKeys.scss

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

src/app/molecules/media/Media.scss

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

src/app/molecules/message/Message.jsx

@@ -1,51 +1,37 @@
-import React, { useRef } from 'react';
+/* eslint-disable react/prop-types */
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './Message.scss';
 
-import Linkify from 'linkifyjs/react';
+import dateFormat from 'dateformat';
-import ReactMarkdown from 'react-markdown';
+import { twemojify } from '../../../util/twemojify';
-import gfm from 'remark-gfm';
+
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import initMatrix from '../../../client/initMatrix';
-import { coy } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { getUsername, getUsernameOfRoomMember, parseReply } from '../../../util/matrixUtil';
-import parse from 'html-react-parser';
+import colorMXID from '../../../util/colorMXID';
-import twemoji from 'twemoji';
+import { getEventCords } from '../../../util/common';
-import { getUsername } from '../../../util/matrixUtil';
+import { redactEvent, sendReaction } from '../../../client/action/roomTimeline';
+import {
+  openEmojiBoard, openProfileViewer, openReadReceipts, replyTo,
+} from '../../../client/action/navigation';
+import { sanitizeCustomHtml } from '../../../util/sanitize';
 
 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';
-const components = {
+import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
-  code({
+import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
-    // eslint-disable-next-line react/prop-types
+import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
-    inline, className, children,
+import BinIC from '../../../../public/res/ic/outlined/bin.svg';
-  }) {
-    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 (
@@ -55,7 +41,7 @@ function PlaceholderMessage() {
       </div>
       <div className="ph-msg__main-container">
         <div className="ph-msg__header" />
-        <div className="ph-msg__content">
+        <div className="ph-msg__body">
           <div />
           <div />
           <div />
@@ -66,35 +52,46 @@ function PlaceholderMessage() {
   );
 }
 
-function MessageHeader({
+const MessageAvatar = React.memo(({
-  userId, name, color, time,
+  roomId, mEvent, userId, username,
-}) {
+}) => {
+  const avatarSrc = mEvent.sender.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop');
   return (
-    <div className="message__header">
+    <div className="message__avatar-container">
-      <div style={{ color }} className="message__profile">
+      <button type="button" onClick={() => openProfileViewer(userId, roomId)}>
-        <Text variant="b1">{name}</Text>
+        <Avatar imageSrc={avatarSrc} text={username} bgColor={colorMXID(userId)} size="small" />
-        <Text variant="b1">{userId}</Text>
+      </button>
-      </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,
-  name: PropTypes.string.isRequired,
+  username: PropTypes.string.isRequired,
-  color: PropTypes.string.isRequired,
   time: PropTypes.string.isRequired,
 };
 
-function MessageReply({ name, color, content }) {
+function MessageReply({ name, color, body }) {
   return (
     <div className="message__reply">
       <Text variant="b2">
         <RawIcon color={color} size="extra-small" src={ReplyArrowIC} />
-        <span style={{ color }}>{name}</span>
+        <span style={{ color }}>{twemojify(name)}</span>
-        <>{` ${content}`}</>
+        {' '}
+        {twemojify(body)}
       </Text>
     </div>
   );
@@ -103,36 +100,122 @@ function MessageReply({ name, color, content }) {
 MessageReply.propTypes = {
   name: PropTypes.string.isRequired,
   color: PropTypes.string.isRequired,
-  content: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
 };
 
-function MessageContent({ content, isMarkdown, isEdited }) {
+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);
+  };
+
   return (
-    <div className="message__content">
+    <div
-      <div className="text text-b1">
+      className="message__reply-wrapper"
-        { isMarkdown ? genMarkdown(content) : linkifyContent(content) }
+      onClick={focusReply}
-      </div>
+      onKeyDown={focusReply}
-      { isEdited && <Text className="message__content-edited" variant="b3">(edited)</Text>}
+      role="button"
+      tabIndex="0"
+    >
+      {reply !== null && <MessageReply name={reply.to} color={reply.color} body={reply.body} />}
     </div>
   );
-}
+});
-MessageContent.defaultProps = {
+MessageReplyWrapper.propTypes = {
-  isMarkdown: false,
+  roomTimeline: PropTypes.shape({}).isRequired,
-  isEdited: false,
+  eventId: PropTypes.string.isRequired,
-};
-MessageContent.propTypes = {
-  content: PropTypes.node.isRequired,
-  isMarkdown: PropTypes.bool,
-  isEdited: PropTypes.bool,
 };
 
-function MessageEdit({ content, onSave, onCancel }) {
+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="text text-b1">
+        { msgType === 'm.emote' && (
+          <>
+            {'* '}
+            {twemojify(senderName)}
+            {' '}
+          </>
+        )}
+        { content }
+      </div>
+      { isEdited && <Text className="message__body-edited" variant="b3">(edited)</Text>}
+    </div>
+  );
+});
+MessageBody.defaultProps = {
+  isCustomHTML: false,
+  isEdited: false,
+  msgType: null,
+};
+MessageBody.propTypes = {
+  senderName: PropTypes.string.isRequired,
+  body: PropTypes.node.isRequired,
+  isCustomHTML: PropTypes.bool,
+  isEdited: PropTypes.bool,
+  msgType: PropTypes.string,
+};
+
+function MessageEdit({ body, onSave, onCancel }) {
   const editInputRef = useRef(null);
+
+  const 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}
-        value={content}
+        onKeyDown={handleKeyDown}
+        value={body}
         placeholder="Edit message"
         required
         resizable
@@ -145,21 +228,43 @@ function MessageEdit({ content, onSave, onCancel }) {
   );
 }
 MessageEdit.propTypes = {
-  content: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
   onSave: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
 };
 
-function MessageReactionGroup({ children }) {
+function getMyEmojiEvent(emojiKey, eventId, roomTimeline) {
-  return (
+  const mx = initMatrix.matrixClient;
-    <div className="message__reactions text text-b3 noselect">
+  const rEvents = roomTimeline.reactionTimeline.get(eventId);
-      { children }
+  let rEvent = null;
-    </div>
+  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();
+  });
 }
-MessageReactionGroup.propTypes = {
-  children: PropTypes.node.isRequired,
-};
 
 function genReactionMsg(userIds, reaction) {
   const genLessContText = (text) => <span style={{ opacity: '.6' }}>{text}</span>;
@@ -175,95 +280,390 @@ function genReactionMsg(userIds, reaction) {
     <>
       {msg}
       {genLessContText(' reacted with')}
-      {parse(twemoji.parse(reaction))}
+      {twemojify(reaction, { className: 'react-emoji' })}
     </>
   );
 }
 
 function MessageReaction({
-  reaction, users, isActive, onClick,
+  reaction, count, users, isActive, onClick,
 }) {
   return (
     <Tooltip
       className="msg__reaction-tooltip"
-      content={<Text variant="b2">{genReactionMsg(users, reaction)}</Text>}
+      content={<Text variant="b2">{users.length > 0 ? genReactionMsg(users, reaction) : 'Unable to load who has reacted'}</Text>}
     >
       <button
         onClick={onClick}
         type="button"
         className={`msg__reaction${isActive ? ' msg__reaction--active' : ''}`}
       >
-        { parse(twemoji.parse(reaction)) }
+        { twemojify(reaction, { className: 'react-emoji' }) }
-        <Text variant="b3" className="msg__reaction-count">{users.length}</Text>
+        <Text variant="b3" className="msg__reaction-count">{count}</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 MessageOptions({ children }) {
+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__options">
+    <div className="message__reactions text text-b3 noselect">
-      {children}
+      {
+        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>
   );
 }
-MessageOptions.propTypes = {
+MessageReactionGroup.propTypes = {
-  children: PropTypes.node.isRequired,
+  roomTimeline: PropTypes.shape({}).isRequired,
+  mEvent: PropTypes.shape({}).isRequired,
 };
 
-function Message({
+function isMedia(mE) {
-  avatar, header, reply, content, editContent, reactions, options,
-}) {
-  const msgClass = header === null ? ' message--content-only' : ' message--full';
   return (
-    <div className={`message${msgClass}`}>
+    mE.getContent()?.msgtype === 'm.file'
-      <div className="message__avatar-container">
+    || mE.getContent()?.msgtype === 'm.image'
-        {avatar !== null && avatar}
+    || mE.getContent()?.msgtype === 'm.audio'
-      </div>
+    || 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);
+
+  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"
+          />
+        )}
+      />
+    </div>
+  );
+});
+MessageOptions.propTypes = {
+  roomTimeline: PropTypes.shape({}).isRequired,
+  mEvent: PropTypes.shape({}).isRequired,
+  edit: PropTypes.func.isRequired,
+  reply: PropTypes.func.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,
+}) {
+  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;
+  }
+
+  return (
+    <div className={className.join(' ')}>
+      {
+        isBodyOnly
+          ? <div className="message__avatar-container" />
+          : <MessageAvatar roomId={roomId} mEvent={mEvent} userId={senderId} username={username} />
+      }
       <div className="message__main-container">
-        {header !== null && header}
+        {!isBodyOnly && (
-        {reply !== null && reply}
+          <MessageHeader userId={senderId} username={username} time={time} />
-        {content !== null && content}
+        )}
-        {editContent !== null && editContent}
+        {isReply && (
-        {reactions !== null && reactions}
+          <MessageReplyWrapper
-        {options !== null && options}
+            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}
+          />
+        )}
       </div>
     </div>
   );
 }
 Message.defaultProps = {
-  avatar: null,
+  isBodyOnly: false,
-  header: null,
+  focus: false,
-  reply: null,
-  content: null,
-  editContent: null,
-  reactions: null,
-  options: null,
 };
 Message.propTypes = {
-  avatar: PropTypes.node,
+  mEvent: PropTypes.shape({}).isRequired,
-  header: PropTypes.node,
+  isBodyOnly: PropTypes.bool,
-  reply: PropTypes.node,
+  roomTimeline: PropTypes.shape({}).isRequired,
-  content: PropTypes.node,
+  focus: PropTypes.bool,
-  editContent: PropTypes.node,
+  time: PropTypes.string.isRequired,
-  reactions: PropTypes.node,
-  options: PropTypes.node,
 };
 
-export {
+export { Message, MessageReply, PlaceholderMessage };
-  Message,
-  MessageHeader,
-  MessageReply,
-  MessageContent,
-  MessageEdit,
-  MessageReactionGroup,
-  MessageReaction,
-  MessageOptions,
-  PlaceholderMessage,
-};

src/app/molecules/message/Message.scss

@@ -22,10 +22,18 @@
   
   &__avatar-container {
     padding-top: 6px;
-  }
-  
-  &__avatar-container{
     margin-right: var(--sp-tight);
+    & .avatar-container {
+      transition: transform 200ms var(--fluid-push);
+      &:hover {
+        transform: translateY(-4px);
+      }
+    }
+
+    & button {
+      cursor: pointer;
+      display: flex;
+    }
 
     [dir=rtl] & {
       margin: {
@@ -45,7 +53,7 @@
 
 .message {
   &--full + &--full,
-  &--content-only + &--full,
+  &--body-only + &--full,
   & + .timeline-change,
   .timeline-change + & {
     margin-top: var(--sp-normal);
@@ -53,6 +61,10 @@
   &__avatar-container {
     width: var(--av-small);
   }
+  &--focus {
+    box-shadow: inset 2px 0 0 var(--bg-caution);
+    background-color: var(--bg-caution-hover);
+  }
 }
 
 .ph-msg {
@@ -64,7 +76,7 @@
   }
 
   &__header,
-  &__content > div {
+  &__body > div {
     margin: var(--sp-ultra-tight) 0;
     margin-right: var(--sp-extra-tight);
     height: var(--fs-b1);
@@ -80,23 +92,24 @@
       }
     }
   }
-  &__content {
+  &__body {
     display: flex;
     flex-wrap: wrap;
   }
-  &__content > div:nth-child(1n) {
+  &__body > div:nth-child(1n) {
     max-width: 10%;
   }
-  &__content > div:nth-child(2n) {
+  &__body > div:nth-child(2n) {
     max-width: 50%;
   }
 }
 
 .message__reply,
-.message__content,
+.message__body,
+.message__body__wrapper,
 .message__edit,
 .message__reactions {
-  max-width: 640px;
+  max-width: calc(100% - 88px);
   min-width: 0;
 }
 
@@ -140,6 +153,19 @@
   }
 }
 .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;
@@ -151,15 +177,57 @@
     height: 14px;
   }
 }
-.message__content {
+.message__body {
   word-break: break-word;
-  
+
   & > .text > * {
     white-space: pre-wrap;
   }
 
   & a {
-    word-break: break-all;
+    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;
+    }
   }
   &-edited {
     color: var(--tc-surface-low);
@@ -199,7 +267,7 @@
   border-radius: 4px;
   cursor: pointer;
 
-  & .emoji {
+  & .react-emoji {
     width: 14px;
     height: 14px;
     margin: 2px;
@@ -208,7 +276,7 @@
     margin: 0 var(--sp-ultra-tight);
     color: var(--tc-surface-normal)
   }
-  &-tooltip .emoji {
+  &-tooltip .react-emoji  {
     width: 14px;
     height: 14px;
     margin: 0 var(--sp-ultra-tight);
@@ -248,7 +316,7 @@
   position: absolute;
   top: 0;
   right: 60px;
-  z-index: 999;
+  z-index: 99;
   transform: translateY(-50%);
 
   border-radius: var(--bo-radius);
@@ -263,27 +331,27 @@
 }
 
 // markdown formating
-.message__content {
+.message__body {
   & h1,
   & h2 {
     color: var(--tc-surface-high);
-    margin: var(--sp-extra-loose) 0 var(--sp-normal);
+    margin: var(--sp-loose) 0 var(--sp-normal);
     line-height: var(--lh-h1);
   }
   & h3,
   & h4 {
     color: var(--tc-surface-high);
-    margin: var(--sp-loose) 0 var(--sp-tight);
+    margin: var(--sp-normal) 0 var(--sp-tight);
     line-height: var(--lh-h2);
   }
   & h5,
   & h6 {
     color: var(--tc-surface-high);
-    margin: var(--sp-normal) 0 var(--sp-extra-tight);
+    margin: var(--sp-tight) 0 var(--sp-extra-tight);
     line-height: var(--lh-s1);
   }
   & hr {
-    border-color: var(--bg-surface-border);
+    border-color: var(--bg-divider);
   }
 
   .text img {
@@ -325,10 +393,20 @@
     @include scrollbar.scroll__h;
     @include scrollbar.scroll--auto-hide;
   }
-  & pre code {
+  & pre {
-    color: var(--tc-surface-normal) !important;
+    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;
+    }
   }
   & 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;
@@ -370,15 +448,22 @@
     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;
@@ -398,4 +483,15 @@
       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,8 +2,6 @@ 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';
 
@@ -12,9 +10,10 @@ 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) {
@@ -33,9 +32,6 @@ function TimelineChange({ variant, content, time, onClick }) {
     case 'avatar':
       iconSrc = UserIC;
       break;
-    case 'follow':
-      iconSrc = TickMarkIC;
-      break;
     default:
       iconSrc = JoinArraowIC;
       break;
@@ -49,7 +45,6 @@ function TimelineChange({ variant, content, time, onClick }) {
       <div className="timeline-change__content">
         <Text variant="b2">
           {content}
-          {/* <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify> */}
         </Text>
       </div>
       <div className="timeline-change__time">
@@ -68,7 +63,6 @@ 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,6 +2,8 @@ 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';
@@ -18,8 +20,8 @@ function PeopleSelector({
         onClick={onClick}
         type="button"
       >
-        <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={color} size="extra-small" />
+        <Avatar imageSrc={avatarSrc} text={name} bgColor={color} size="extra-small" />
-        <Text className="people-selector__name" variant="b1">{name}</Text>
+        <Text className="people-selector__name" variant="b1">{twemojify(name)}</Text>
         {peopleRole !== null && <Text className="people-selector__role" variant="b3">{peopleRole}</Text>}
       </button>
     </div>

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

@@ -2,6 +2,8 @@ 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';
@@ -66,7 +68,7 @@ function PopupWindow({
             <Header>
               <IconButton size="small" src={ChevronLeftIC} onClick={onRequestClose} tooltip="Back" />
               <TitleWrapper>
-                <Text variant="s1">{title}</Text>
+                <Text variant="s1">{twemojify(title)}</Text>
               </TitleWrapper>
               {drawerOptions}
             </Header>
@@ -82,7 +84,7 @@ function PopupWindow({
         <div className="pw__content">
           <Header>
             <TitleWrapper>
-              <Text variant="h2">{contentTitle !== null ? contentTitle : title}</Text>
+              <Text variant="h2">{twemojify(contentTitle !== null ? contentTitle : title)}</Text>
             </TitleWrapper>
             {contentOptions}
           </Header>

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './RoomIntro.scss';
+
+import { twemojify } from '../../../util/twemojify';
+import colorMXID from '../../../util/colorMXID';
+
+import Text from '../../atoms/text/Text';
+import Avatar from '../../atoms/avatar/Avatar';
+
+function RoomIntro({
+  roomId, avatarSrc, name, heading, desc, time,
+}) {
+  return (
+    <div className="room-intro">
+      <Avatar imageSrc={avatarSrc} text={name} bgColor={colorMXID(roomId)} size="large" />
+      <div className="room-intro__content">
+        <Text className="room-intro__name" variant="h1">{twemojify(heading)}</Text>
+        <Text className="room-intro__desc" variant="b1">{twemojify(desc, undefined, true)}</Text>
+        { time !== null && <Text className="room-intro__time" variant="b3">{time}</Text>}
+      </div>
+    </div>
+  );
+}
+
+RoomIntro.defaultProps = {
+  avatarSrc: null,
+  time: null,
+};
+
+RoomIntro.propTypes = {
+  roomId: PropTypes.string.isRequired,
+  avatarSrc: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.bool,
+  ]),
+  name: PropTypes.string.isRequired,
+  heading: PropTypes.string.isRequired,
+  desc: PropTypes.string.isRequired,
+  time: PropTypes.string,
+};
+
+export default RoomIntro;

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

@@ -1,4 +1,4 @@
-.channel-intro {
+.room-intro {
   margin-top: calc(2 * var(--sp-extra-loose));
   margin-bottom: var(--sp-extra-loose);
   padding-left: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
@@ -11,9 +11,9 @@
     }
   }
 
-  .channel-intro__content {
+  .room-intro__content {
     margin-top: var(--sp-extra-loose);
-    max-width: 640px;
+    width: calc(100% - 88px);
   }
   &__name {
     color: var(--tc-surface-high);

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import './ChannelSelector.scss';
+import './RoomSelector.scss';
 
+import { twemojify } from '../../../util/twemojify';
 import colorMXID from '../../../util/colorMXID';
 
 import Text from '../../atoms/text/Text';
@@ -9,51 +10,63 @@ import Avatar from '../../atoms/avatar/Avatar';
 import NotificationBadge from '../../atoms/badge/NotificationBadge';
 import { blurOnBubbling } from '../../atoms/button/script';
 
-function ChannelSelectorWrapper({
+function RoomSelectorWrapper({
-  isSelected, onClick, content, options,
+  isSelected, isUnread, onClick, content, options,
 }) {
+  let myClass = isUnread ? ' room-selector--unread' : '';
+  myClass += isSelected ? ' room-selector--selected' : '';
   return (
-    <div className={`channel-selector${isSelected ? ' channel-selector--selected' : ''}`}>
+    <div className={`room-selector${myClass}`}>
       <button
-        className="channel-selector__content"
+        className="room-selector__content"
         type="button"
         onClick={onClick}
-        onMouseUp={(e) => blurOnBubbling(e, '.channel-selector')}
+        onMouseUp={(e) => blurOnBubbling(e, '.room-selector')}
       >
         {content}
       </button>
-      <div className="channel-selector__options">{options}</div>
+      <div className="room-selector__options">{options}</div>
     </div>
   );
 }
-ChannelSelectorWrapper.defaultProps = {
+RoomSelectorWrapper.defaultProps = {
   options: null,
 };
-ChannelSelectorWrapper.propTypes = {
+RoomSelectorWrapper.propTypes = {
   isSelected: PropTypes.bool.isRequired,
+  isUnread: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
   content: PropTypes.node.isRequired,
   options: PropTypes.node,
 };
 
-function ChannelSelector({
+function RoomSelector({
-  name, roomId, imageSrc, iconSrc,
+  name, parentName, roomId, imageSrc, iconSrc,
   isSelected, isUnread, notificationCount, isAlert,
   options, onClick,
 }) {
   return (
-    <ChannelSelectorWrapper
+    <RoomSelectorWrapper
       isSelected={isSelected}
+      isUnread={isUnread}
       content={(
         <>
           <Avatar
-            text={name.slice(0, 1)}
+            text={name}
             bgColor={colorMXID(roomId)}
             imageSrc={imageSrc}
             iconSrc={iconSrc}
             size="extra-small"
           />
-          <Text variant="b1">{name}</Text>
+          <Text variant="b1">
+            {twemojify(name)}
+            {parentName && (
+              <span className="text text-b3">
+                {' — '}
+                {twemojify(parentName)}
+              </span>
+            )}
+          </Text>
           { isUnread && (
             <NotificationBadge
               alert={isAlert}
@@ -67,22 +80,28 @@ function ChannelSelector({
     />
   );
 }
-ChannelSelector.defaultProps = {
+RoomSelector.defaultProps = {
+  parentName: null,
+  isSelected: false,
   imageSrc: null,
   iconSrc: null,
   options: null,
 };
-ChannelSelector.propTypes = {
+RoomSelector.propTypes = {
   name: PropTypes.string.isRequired,
+  parentName: PropTypes.string,
   roomId: PropTypes.string.isRequired,
   imageSrc: PropTypes.string,
   iconSrc: PropTypes.string,
-  isSelected: PropTypes.bool.isRequired,
+  isSelected: PropTypes.bool,
   isUnread: PropTypes.bool.isRequired,
-  notificationCount: PropTypes.number.isRequired,
+  notificationCount: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]).isRequired,
   isAlert: PropTypes.bool.isRequired,
   options: PropTypes.node,
   onClick: PropTypes.func.isRequired,
 };
 
-export default ChannelSelector;
+export default RoomSelector;

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

@@ -1,25 +1,32 @@
-.channel-selector-flex {
+.room-selector-flex {
   display: flex;
   align-items: center;
 }
-.channel-selector-flexItem {
+.room-selector-flexItem {
   flex: 1;
   min-width: 0;
   min-height: 0;
 }
 
-.channel-selector {
+.room-selector {
-  @extend .channel-selector-flex;
+  @extend .room-selector-flex;
 
   border: 1px solid transparent;
   border-radius: var(--bo-radius);
   cursor: pointer;
+
+  &--unread {
+    .room-selector__content > .text {
+      font-weight: 500;
+      color: var(--tc-surface-high);
+    }
+  }
   
   &--selected {
     background-color: var(--bg-surface);
     border-color: var(--bg-surface-border);
 
-    & .channel-selector__options {
+    & .room-selector__options {
       display: flex;
     }
   }
@@ -27,14 +34,16 @@
   @media (hover: hover) {
     &:hover {
       background-color: var(--bg-surface-hover);
-      & .channel-selector__options {
+      & .room-selector__options {
         display: flex;
       }
     }
   }
-  &:focus {
+  &:focus-within {
-    outline: none;
     background-color: var(--bg-surface-hover);
+    & button {
+      outline: none;
+    }
   }
   &:active {
     background-color: var(--bg-surface-active);
@@ -46,9 +55,9 @@
   }
 }
 
-.channel-selector__content {
+.room-selector__content {
-  @extend .channel-selector-flexItem;
+  @extend .room-selector-flexItem;
-  @extend .channel-selector-flex;
+  @extend .room-selector-flex;
   padding: 0 var(--sp-extra-tight);
   min-height: 40px;
   cursor: inherit;
@@ -58,17 +67,17 @@
   }
 
   & > .text {
-    @extend .channel-selector-flexItem;
+    @extend .room-selector-flexItem;
     margin: 0 var(--sp-extra-tight);
 
-    color: var(--tc-surface-normal);
+    color: var(--tc-surface-normal-low);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 }
-.channel-selector__options {
+.room-selector__options {
-  @extend .channel-selector-flex;
+  @extend .room-selector-flex;
   display: none;
   margin-right: var(--sp-ultra-tight);
 
@@ -81,7 +90,7 @@
     margin: 0 !important;
   }
 
-  & .ic-btn-surface {
+  & .ic-btn {
     padding: 6px;
     border-radius: calc(var(--bo-radius) / 2);
   }

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

@@ -1,32 +1,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import './ChannelTile.scss';
+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) {
+function RoomTile({
-  return <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify>;
-}
-
-function ChannelTile({
   avatarSrc, name, id,
   inviterName, memberCount, desc, options,
 }) {
   return (
-    <div className="channel-tile">
+    <div className="room-tile">
-      <div className="channel-tile__avatar">
+      <div className="room-tile__avatar">
         <Avatar
           imageSrc={avatarSrc}
           bgColor={colorMXID(id)}
-          text={name.slice(0, 1)}
+          text={name}
         />
       </div>
-      <div className="channel-tile__content">
+      <div className="room-tile__content">
-        <Text variant="s1">{name}</Text>
+        <Text variant="s1">{twemojify(name)}</Text>
         <Text variant="b3">
           {
             inviterName !== null
@@ -36,12 +34,12 @@ function ChannelTile({
         </Text>
         {
           desc !== null && (typeof desc === 'string')
-            ? <Text className="channel-tile__content__desc" variant="b2">{linkifyContent(desc)}</Text>
+            ? <Text className="room-tile__content__desc" variant="b2">{twemojify(desc, undefined, true)}</Text>
             : desc
         }
       </div>
       { options !== null && (
-        <div className="channel-tile__options">
+        <div className="room-tile__options">
           {options}
         </div>
       )}
@@ -49,14 +47,14 @@ function ChannelTile({
   );
 }
 
-ChannelTile.defaultProps = {
+RoomTile.defaultProps = {
   avatarSrc: null,
   inviterName: null,
   options: null,
   desc: null,
   memberCount: null,
 };
-ChannelTile.propTypes = {
+RoomTile.propTypes = {
   avatarSrc: PropTypes.string,
   name: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
@@ -69,4 +67,4 @@ ChannelTile.propTypes = {
   options: PropTypes.node,
 };
 
-export default ChannelTile;
+export default RoomTile;

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

@@ -1,4 +1,4 @@
-.channel-tile {
+.room-tile {
   display: flex;
 
   &__content {

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

@@ -2,29 +2,24 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './SidebarAvatar.scss';
 
-import Tippy from '@tippyjs/react';
+import { twemojify } from '../../../util/twemojify';
+
 import Avatar from '../../atoms/avatar/Avatar';
 import Text from '../../atoms/text/Text';
+import Tooltip from '../../atoms/tooltip/Tooltip';
 import NotificationBadge from '../../atoms/badge/NotificationBadge';
 import { blurOnBubbling } from '../../atoms/button/script';
 
 const SidebarAvatar = React.forwardRef(({
   tooltip, text, bgColor, imageSrc,
-  iconSrc, active, onClick, notifyCount,
+  iconSrc, active, onClick, isUnread, notificationCount, isAlert,
 }, ref) => {
   let activeClass = '';
   if (active) activeClass = ' sidebar-avatar--active';
   return (
-    <Tippy
+    <Tooltip
-      content={<Text variant="b1">{tooltip}</Text>}
+      content={<Text variant="b1">{twemojify(tooltip)}</Text>}
-      className="sidebar-avatar-tippy"
-      touch="hold"
-      arrow={false}
       placement="right"
-      maxWidth={200}
-      delay={[0, 0]}
-      duration={[100, 0]}
-      offset={[0, 0]}
     >
       <button
         ref={ref}
@@ -40,9 +35,14 @@ const SidebarAvatar = React.forwardRef(({
           iconSrc={iconSrc}
           size="normal"
         />
-        { notifyCount !== null && <NotificationBadge alert content={notifyCount} /> }
+        { isUnread && (
+          <NotificationBadge
+            alert={isAlert}
+            content={notificationCount !== 0 ? notificationCount : null}
+          />
+        )}
       </button>
-    </Tippy>
+    </Tooltip>
   );
 });
 SidebarAvatar.defaultProps = {
@@ -52,7 +52,9 @@ SidebarAvatar.defaultProps = {
   imageSrc: null,
   active: false,
   onClick: null,
-  notifyCount: null,
+  isUnread: false,
+  notificationCount: 0,
+  isAlert: false,
 };
 
 SidebarAvatar.propTypes = {
@@ -63,10 +65,12 @@ SidebarAvatar.propTypes = {
   iconSrc: PropTypes.string,
   active: PropTypes.bool,
   onClick: PropTypes.func,
-  notifyCount: PropTypes.oneOfType([
+  isUnread: PropTypes.bool,
+  notificationCount: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
   ]),
+  isAlert: PropTypes.bool,
 };
 
 export default SidebarAvatar;

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

@@ -1,28 +1,28 @@
-
-.sidebar-avatar-tippy {
-  padding: var(--sp-extra-tight) var(--sp-normal);
-  background-color: var(--bg-tooltip);
-  border-radius: var(--bo-radius);
-  box-shadow: var(--bs-popup);
-
-  .text {
-    color: var(--tc-tooltip);
-  }
-}
-
 .sidebar-avatar {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
   cursor: pointer;
   
   & .notification-badge {
     position: absolute;
-    right: var(--sp-extra-tight);
+    right: 0;
-    top: calc(-1 * var(--sp-ultra-tight));
+    top: 0;
     box-shadow: 0 0 0 2px var(--bg-surface-low);
+    transform: translate(20%, -20%);
+
+    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;
@@ -37,18 +37,19 @@
     content: "";
     display: block;
     position: absolute;
-    left: 0;
+    left: -11px;
     top: 50%;
     transform: translateY(-50%);
 
     width: 3px;
     height: 12px;
-    background-color: var(--ic-surface-normal);
+    background-color: var(--tc-surface-high);
     border-radius: 0 4px 4px 0;
     transition: height 200ms linear;
 
     [dir=rtl] & {
-      right: 0;
+      left: unset;
+      right: -11px;
       border-radius: 4px 0 0 4px;
     }
   }

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './SSOButtons.scss';
+
+import { createTemporaryClient, startSsoLogin } from '../../../client/action/auth';
+
+import Button from '../../atoms/button/Button';
+
+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>
+  );
+}
+
+SSOButtons.propTypes = {
+  identityProviders: PropTypes.arrayOf(
+    PropTypes.shape({}),
+  ).isRequired,
+  baseUrl: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(['sso', 'cas']).isRequired,
+};
+
+export default SSOButtons;

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

@@ -0,0 +1,25 @@
+.sso-buttons {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;  
+}
+
+.sso-btn {
+  margin: var(--sp-tight);
+  display: inline-flex;
+  justify-content: center;
+
+  cursor: pointer;
+
+  &__img {
+    height: var(--av-small);
+    width: var(--av-small);
+  }
+  &__text-only {
+    margin-top: var(--sp-normal);
+    flex-basis: 100%;
+    & .text {
+      color: var(--tc-link);
+    }
+  }
+}

src/app/organisms/channel/Channel.jsx

@@ -1,40 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import './Channel.scss';
-
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-
-import Welcome from '../welcome/Welcome';
-import ChannelView from './ChannelView';
-import PeopleDrawer from './PeopleDrawer';
-
-function Channel() {
-  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);
-    navigation.on(cons.events.navigation.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
-
-    return () => {
-      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
-      navigation.removeListener(cons.events.navigation.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
-    };
-  }, []);
-
-  if (selectedRoomId === null) return <Welcome />;
-
-  return (
-    <div className="channel-container">
-      <ChannelView roomId={selectedRoomId} />
-      { isDrawerVisible && <PeopleDrawer roomId={selectedRoomId} />}
-    </div>
-  );
-}
-
-export default Channel;

src/app/organisms/channel/ChannelView.jsx

@@ -1,150 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './ChannelView.scss';
-
-import EventEmitter from 'events';
-
-import RoomTimeline from '../../../client/state/RoomTimeline';
-
-import ScrollView from '../../atoms/scroll/ScrollView';
-
-import ChannelViewHeader from './ChannelViewHeader';
-import ChannelViewContent from './ChannelViewContent';
-import ChannelViewFloating from './ChannelViewFloating';
-import ChannelViewInput from './ChannelViewInput';
-import ChannelViewCmdBar from './ChannelViewCmdBar';
-
-import { scrollToBottom, isAtBottom, autoScrollToBottom } from './common';
-
-const viewEvent = new EventEmitter();
-
-let lastScrollTop = 0;
-let lastScrollHeight = 0;
-let isReachedBottom = true;
-let isReachedTop = false;
-function ChannelView({ 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="channel-view">
-      <ChannelViewHeader roomId={roomId} />
-      <div className="channel-view__content-wrapper">
-        <div className="channel-view__scrollable">
-          <ScrollView onScroll={onTimelineScroll} ref={timelineSVRef} autoHide>
-            {roomTimeline !== null && (
-              <ChannelViewContent
-                roomId={roomId}
-                roomTimeline={roomTimeline}
-                timelineScroll={timelineScroll}
-                viewEvent={viewEvent}
-              />
-            )}
-          </ScrollView>
-          {roomTimeline !== null && (
-            <ChannelViewFloating
-              roomId={roomId}
-              roomTimeline={roomTimeline}
-              timelineScroll={timelineScroll}
-              viewEvent={viewEvent}
-            />
-          )}
-        </div>
-        {roomTimeline !== null && (
-          <div className="channel-view__sticky">
-            <ChannelViewInput
-              roomId={roomId}
-              roomTimeline={roomTimeline}
-              timelineScroll={timelineScroll}
-              viewEvent={viewEvent}
-            />
-            <ChannelViewCmdBar
-              roomId={roomId}
-              roomTimeline={roomTimeline}
-              viewEvent={viewEvent}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-ChannelView.propTypes = {
-  roomId: PropTypes.string.isRequired,
-};
-
-export default ChannelView;

src/app/organisms/channel/ChannelViewCmdBar.jsx

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

src/app/organisms/channel/ChannelViewCmdBar.scss

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

src/app/organisms/channel/ChannelViewContent.jsx

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

src/app/organisms/channel/ChannelViewContent.scss

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

src/app/organisms/channel/ChannelViewFloating.jsx

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

src/app/organisms/channel/ChannelViewHeader.jsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import initMatrix from '../../../client/initMatrix';
-import { togglePeopleDrawer, openInviteUser } from '../../../client/action/navigation';
-import * as roomActions from '../../../client/action/room';
-import colorMXID from '../../../util/colorMXID';
-
-import Text from '../../atoms/text/Text';
-import IconButton from '../../atoms/button/IconButton';
-import Header, { TitleWrapper } from '../../atoms/header/Header';
-import Avatar from '../../atoms/avatar/Avatar';
-import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
-
-import UserIC from '../../../../public/res/ic/outlined/user.svg';
-import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
-import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
-import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
-
-function ChannelViewHeader({ roomId }) {
-  const mx = initMatrix.matrixClient;
-  const isDM = initMatrix.roomList.directs.has(roomId);
-  let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
-  avatarSrc = isDM ? mx.getRoom(roomId).getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc;
-  const roomName = mx.getRoom(roomId).name;
-  const roomTopic = mx.getRoom(roomId).currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;
-
-  return (
-    <Header>
-      <Avatar imageSrc={avatarSrc} text={roomName.slice(0, 1)} bgColor={colorMXID(roomId)} size="small" />
-      <TitleWrapper>
-        <Text variant="h2">{roomName}</Text>
-        { typeof roomTopic !== 'undefined' && <p title={roomTopic} className="text text-b3">{roomTopic}</p>}
-      </TitleWrapper>
-      <IconButton onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
-      <ContextMenu
-        placement="bottom"
-        content={(toogleMenu) => (
-          <>
-            <MenuHeader>Options</MenuHeader>
-            {/* <MenuBorder /> */}
-            <MenuItem
-              iconSrc={AddUserIC}
-              onClick={() => {
-                openInviteUser(roomId); toogleMenu();
-              }}
-            >
-              Invite
-            </MenuItem>
-            <MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={() => roomActions.leave(roomId)}>Leave</MenuItem>
-          </>
-        )}
-        render={(toggleMenu) => <IconButton onClick={toggleMenu} tooltip="Options" src={VerticalMenuIC} />}
-      />
-    </Header>
-  );
-}
-ChannelViewHeader.propTypes = {
-  roomId: PropTypes.string.isRequired,
-};
-
-export default ChannelViewHeader;

src/app/organisms/channel/PeopleDrawer.jsx

@@ -1,138 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './PeopleDrawer.scss';
-
-import initMatrix from '../../../client/initMatrix';
-import { getUsernameOfRoomMember } from '../../../util/matrixUtil';
-import colorMXID from '../../../util/colorMXID';
-import { openInviteUser } from '../../../client/action/navigation';
-
-import Text from '../../atoms/text/Text';
-import Header, { TitleWrapper } from '../../atoms/header/Header';
-import IconButton from '../../atoms/button/IconButton';
-import Button from '../../atoms/button/Button';
-import ScrollView from '../../atoms/scroll/ScrollView';
-import Input from '../../atoms/input/Input';
-import PeopleSelector from '../../molecules/people-selector/PeopleSelector';
-
-import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
-
-function getPowerLabel(powerLevel) {
-  switch (powerLevel) {
-    case 100:
-      return 'Admin';
-    case 50:
-      return 'Mod';
-    default:
-      return null;
-  }
-}
-function compare(m1, m2) {
-  let aName = m1.name;
-  let bName = m2.name;
-
-  // remove "#" from the room name
-  // To ignore it in sorting
-  aName = aName.replaceAll('#', '');
-  bName = bName.replaceAll('#', '');
-
-  if (aName.toLowerCase() < bName.toLowerCase()) {
-    return -1;
-  }
-  if (aName.toLowerCase() > bName.toLowerCase()) {
-    return 1;
-  }
-  return 0;
-}
-function sortByPowerLevel(m1, m2) {
-  let pl1 = String(m1.powerLevel);
-  let pl2 = String(m2.powerLevel);
-
-  if (pl1 === '100') pl1 = '90.9';
-  if (pl2 === '100') pl2 = '90.9';
-
-  if (pl1.toLowerCase() > pl2.toLowerCase()) {
-    return -1;
-  }
-  if (pl1.toLowerCase() < pl2.toLowerCase()) {
-    return 1;
-  }
-  return 0;
-}
-
-function PeopleDrawer({ roomId }) {
-  const PER_PAGE_MEMBER = 50;
-  const room = initMatrix.matrixClient.getRoom(roomId);
-  const totalMemberList = room.getJoinedMembers().sort(compare).sort(sortByPowerLevel);
-  const [memberList, updateMemberList] = useState([]);
-  let isRoomChanged = false;
-
-  function loadMorePeople() {
-    updateMemberList(totalMemberList.slice(0, memberList.length + PER_PAGE_MEMBER));
-  }
-
-  useEffect(() => {
-    updateMemberList(totalMemberList.slice(0, PER_PAGE_MEMBER));
-    room.loadMembersIfNeeded().then(() => {
-      if (isRoomChanged) return;
-      const newTotalMemberList = room.getJoinedMembers().sort(compare).sort(sortByPowerLevel);
-      updateMemberList(newTotalMemberList.slice(0, PER_PAGE_MEMBER));
-    });
-
-    return () => {
-      isRoomChanged = true;
-    };
-  }, [roomId]);
-
-  return (
-    <div className="people-drawer">
-      <Header>
-        <TitleWrapper>
-          <Text variant="s1">
-            People
-            <Text className="people-drawer__member-count" variant="b3">{`${room.getJoinedMemberCount()} members`}</Text>
-          </Text>
-        </TitleWrapper>
-        <IconButton onClick={() => openInviteUser(roomId)} tooltip="Invite" src={AddUserIC} />
-      </Header>
-      <div className="people-drawer__content-wrapper">
-        <div className="people-drawer__scrollable">
-          <ScrollView autoHide>
-            <div className="people-drawer__content">
-              {
-                memberList.map((member) => (
-                  <PeopleSelector
-                    key={member.userId}
-                    onClick={() => alert('Viewing profile is yet to be implemented')}
-                    avatarSrc={member.getAvatarUrl(initMatrix.matrixClient.baseUrl, 24, 24, 'crop')}
-                    name={getUsernameOfRoomMember(member)}
-                    color={colorMXID(member.userId)}
-                    peopleRole={getPowerLabel(member.powerLevel)}
-                  />
-                ))
-              }
-              <div className="people-drawer__load-more">
-                {
-                  memberList.length !== totalMemberList.length && (
-                    <Button onClick={loadMorePeople}>View more</Button>
-                  )
-                }
-              </div>
-            </div>
-          </ScrollView>
-        </div>
-        <div className="people-drawer__sticky">
-          <form onSubmit={(e) => e.preventDefault()} className="people-search">
-            <Input type="text" placeholder="Search" required />
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-PeopleDrawer.propTypes = {
-  roomId: PropTypes.string.isRequired,
-};
-
-export default PeopleDrawer;

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

@@ -1,10 +1,12 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import './CreateChannel.scss';
+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';
@@ -12,13 +14,14 @@ 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';
 
 import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
-function CreateChannel({ isOpen, onRequestClose }) {
+function CreateRoom({ isOpen, onRequestClose }) {
   const [isPublic, togglePublic] = useState(false);
   const [isEncrypted, toggleEncrypted] = useState(true);
   const [isValidAddress, updateIsValidAddress] = useState(null);
@@ -28,6 +31,7 @@ function CreateChannel({ 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);
@@ -45,8 +49,23 @@ function CreateChannel({ 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);
@@ -60,23 +79,22 @@ function CreateChannel({ isOpen, onRequestClose }) {
       if (roomAlias.trim() === '') roomAlias = undefined;
     }
 
+    const powerLevel = roleIndex === 1 ? 101 : undefined;
+
     try {
       await roomActions.create({
-        name, topic, isPublic, roomAlias, isEncrypted,
+        name, topic, isPublic, roomAlias, isEncrypted, powerLevel,
       });
-
-      resetForm();
-      onRequestClose();
     } catch (e) {
       if (e.message === 'M_UNKNOWN: Invalid characters in room alias') {
-        updateCreatingError('ERROR: Invalid characters in channel address');
+        updateCreatingError('ERROR: Invalid characters in room address');
         updateIsValidAddress(false);
       } else if (e.message === 'M_ROOM_IN_USE: Room alias already taken') {
-        updateCreatingError('ERROR: Channel address is already in use');
+        updateCreatingError('ERROR: Room address is already in use');
         updateIsValidAddress(false);
       } else updateCreatingError(e.message);
+      updateIsCreatingRoom(false);
     }
-    updateIsCreatingRoom(false);
   }
 
   function validateAddress(e) {
@@ -110,26 +128,26 @@ function CreateChannel({ isOpen, onRequestClose }) {
   return (
     <PopupWindow
       isOpen={isOpen}
-      title="Create channel"
+      title="Create room"
       contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
       onRequestClose={onRequestClose}
     >
-      <div className="create-channel">
+      <div className="create-room">
-        <form className="create-channel__form" onSubmit={(e) => { e.preventDefault(); createRoom(); }}>
+        <form className="create-room__form" onSubmit={(e) => { e.preventDefault(); createRoom(); }}>
           <SettingTile
-            title="Make channel public"
+            title="Make room public"
             options={<Toggle isActive={isPublic} onToggle={togglePublic} />}
-            content={<Text variant="b3">Public channel can be joined by anyone.</Text>}
+            content={<Text variant="b3">Public room can be joined by anyone.</Text>}
           />
           {isPublic && (
             <div>
-              <Text className="create-channel__address__label" variant="b2">Channel address</Text>
+              <Text className="create-room__address__label" variant="b2">Room address</Text>
-              <div className="create-channel__address">
+              <div className="create-room__address">
                 <Text variant="b1">#</Text>
                 <Input value={addressValue} onChange={validateAddress} state={(isValidAddress === false) ? 'error' : 'normal'} forwardRef={addressRef} placeholder="my_room" required />
                 <Text variant="b1">{hsString}</Text>
               </div>
-              {isValidAddress === false && <Text className="create-channel__address__tip" variant="b3"><span style={{ color: 'var(--bg-danger)' }}>{`#${addressValue}${hsString} is already in use`}</span></Text>}
+              {isValidAddress === false && <Text className="create-room__address__tip" variant="b3"><span style={{ color: 'var(--bg-danger)' }}>{`#${addressValue}${hsString} is already in use`}</span></Text>}
             </div>
           )}
           {!isPublic && (
@@ -139,27 +157,40 @@ function CreateChannel({ 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-channel__name-wrapper">
+          <div className="create-room__name-wrapper">
-            <Input value={titleValue} onChange={handleTitleChange} forwardRef={nameRef} label="Channel name" required />
+            <Input value={titleValue} onChange={handleTitleChange} forwardRef={nameRef} label="Room name" required />
             <Button disabled={isValidAddress === false || isCreatingRoom} iconSrc={HashPlusIC} type="submit" variant="primary">Create</Button>
           </div>
           {isCreatingRoom && (
-            <div className="create-channel__loading">
+            <div className="create-room__loading">
               <Spinner size="small" />
-              <Text>Creating channel...</Text>
+              <Text>Creating room...</Text>
             </div>
           )}
-          {typeof creatingError === 'string' && <Text className="create-channel__error" variant="b3">{creatingError}</Text>}
+          {typeof creatingError === 'string' && <Text className="create-room__error" variant="b3">{creatingError}</Text>}
         </form>
       </div>
     </PopupWindow>
   );
 }
 
-CreateChannel.propTypes = {
+CreateRoom.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   onRequestClose: PropTypes.func.isRequired,
 };
 
-export default CreateChannel;
+export default CreateRoom;

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

@@ -1,4 +1,4 @@
-.create-channel {
+.create-room {
   margin: 0 var(--sp-normal);
   margin-right: var(--sp-extra-tight);
 
@@ -9,6 +9,13 @@
     }
   }
 
+  & .segment-btn {
+    padding: var(--sp-ultra-tight) 0;
+    &__base {
+      padding: 0 var(--sp-tight);
+    }
+  }
+
   &__address {
     display: flex;
     &__label {

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

@@ -80,17 +80,17 @@ EmojiGroup.propTypes = {
 };
 
 const asyncSearch = new AsyncSearch();
-asyncSearch.setup(emojis, { keys: ['shortcode'], limit: 30 });
+asyncSearch.setup(emojis, { keys: ['shortcode'], isContain: true, limit: 40 });
 function SearchedEmoji() {
   const [searchedEmojis, setSearchedEmojis] = useState(null);
 
   function handleSearchEmoji(resultEmojis, term) {
     if (term === '' || resultEmojis.length === 0) {
       if (term === '') setSearchedEmojis(null);
-      else setSearchedEmojis([]);
+      else setSearchedEmojis({ emojis: [] });
       return;
     }
-    setSearchedEmojis(resultEmojis);
+    setSearchedEmojis({ emojis: resultEmojis });
   }
 
   useEffect(() => {
@@ -102,7 +102,7 @@ function SearchedEmoji() {
 
   if (searchedEmojis === null) return false;
 
-  return <EmojiGroup key="-1" name={searchedEmojis.length === 0 ? 'No search result found' : 'Search results'} groupEmojis={searchedEmojis} />;
+  return <EmojiGroup key="-1" name={searchedEmojis.emojis.length === 0 ? 'No search result found' : 'Search results'} groupEmojis={searchedEmojis.emojis} />;
 }
 
 function EmojiBoard({ onSelect }) {

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

@@ -5,13 +5,14 @@ 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';
 import IconButton from '../../atoms/button/IconButton';
 import Spinner from '../../atoms/spinner/Spinner';
 import PopupWindow from '../../molecules/popup-window/PopupWindow';
-import ChannelTile from '../../molecules/channel-tile/ChannelTile';
+import RoomTile from '../../molecules/room-tile/RoomTile';
 
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
@@ -29,13 +30,18 @@ function InviteList({ isOpen, onRequestClose }) {
     roomActions.leave(roomId, isDM);
   }
   function updateInviteList(roomId) {
-    if (procInvite.has(roomId)) {
+    if (procInvite.has(roomId)) procInvite.delete(roomId);
-      procInvite.delete(roomId);
+    changeProcInvite(new Set(Array.from(procInvite)));
-      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;
+    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();
+    }
     if (totalInvites === 0) onRequestClose();
   }
 
@@ -47,13 +53,13 @@ function InviteList({ isOpen, onRequestClose }) {
     };
   }, [procInvite]);
 
-  function renderChannelTile(roomId) {
+  function renderRoomTile(roomId) {
     const myRoom = initMatrix.matrixClient.getRoom(roomId);
     const roomName = myRoom.name;
     let roomAlias = myRoom.getCanonicalAlias();
     if (roomAlias === null) roomAlias = myRoom.roomId;
     return (
-      <ChannelTile
+      <RoomTile
         key={myRoom.roomId}
         name={roomName}
         avatarSrc={initMatrix.matrixClient.getRoom(roomId).getAvatarUrl(initMatrix.matrixClient.baseUrl, 42, 42, 'crop')}
@@ -91,7 +97,7 @@ function InviteList({ isOpen, onRequestClose }) {
             const myRoom = initMatrix.matrixClient.getRoom(roomId);
             const roomName = myRoom.name;
             return (
-              <ChannelTile
+              <RoomTile
                 key={myRoom.roomId}
                 name={roomName}
                 id={myRoom.getDMInviter()}
@@ -114,14 +120,14 @@ function InviteList({ isOpen, onRequestClose }) {
             <Text variant="b3">Spaces</Text>
           </div>
         )}
-        { Array.from(initMatrix.roomList.inviteSpaces).map(renderChannelTile) }
+        { Array.from(initMatrix.roomList.inviteSpaces).map(renderRoomTile) }
 
         { initMatrix.roomList.inviteRooms.size !== 0 && (
           <div className="invites-content__subheading">
-            <Text variant="b3">Channels</Text>
+            <Text variant="b3">Rooms</Text>
           </div>
         )}
-        { Array.from(initMatrix.roomList.inviteRooms).map(renderChannelTile) }
+        { Array.from(initMatrix.roomList.inviteRooms).map(renderRoomTile) }
       </div>
     </PopupWindow>
   );

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

@@ -14,7 +14,7 @@
     }
   }
 
-  & .channel-tile {
+  & .room-tile {
     margin-top: var(--sp-normal);
     &__options {
       align-self: flex-end;

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

@@ -13,7 +13,7 @@ import IconButton from '../../atoms/button/IconButton';
 import Spinner from '../../atoms/spinner/Spinner';
 import Input from '../../atoms/input/Input';
 import PopupWindow from '../../molecules/popup-window/PopupWindow';
-import ChannelTile from '../../molecules/channel-tile/ChannelTile';
+import RoomTile from '../../molecules/room-tile/RoomTile';
 
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
@@ -188,7 +188,7 @@ function InviteUser({
       const userId = user.user_id;
       const name = typeof user.display_name === 'string' ? user.display_name : userId;
       return (
-        <ChannelTile
+        <RoomTile
           key={userId}
           avatarSrc={typeof user.avatar_url === 'string' ? mx.mxcUrlToHttp(user.avatar_url, 42, 42, 'crop') : null}
           name={name}

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

@@ -39,7 +39,7 @@
     border-top: 1px solid var(--bg-surface-border);
   }
 
-  & .channel-tile {
+  & .room-tile {
     margin-top: var(--sp-normal);
     &__options {
       align-self: flex-end;

src/app/organisms/navigation/Directs.jsx

@@ -12,32 +12,33 @@ import { AtoZ } from './common';
 
 const drawerPostie = new Postie();
 function Directs() {
-  const { roomList } = initMatrix;
+  const { roomList, notifications } = initMatrix;
   const directIds = [...roomList.directs].sort(AtoZ);
 
   const [, forceUpdate] = useState({});
 
-  function selectorChanged(activeRoomID, prevActiveRoomId) {
+  function selectorChanged(selectedRoomId, prevSelectedRoomId) {
     if (!drawerPostie.hasTopic('selector-change')) return;
     const addresses = [];
-    if (drawerPostie.hasSubscriber('selector-change', activeRoomID)) addresses.push(activeRoomID);
+    if (drawerPostie.hasSubscriber('selector-change', selectedRoomId)) addresses.push(selectedRoomId);
-    if (drawerPostie.hasSubscriber('selector-change', prevActiveRoomId)) addresses.push(prevActiveRoomId);
+    if (drawerPostie.hasSubscriber('selector-change', prevSelectedRoomId)) addresses.push(prevSelectedRoomId);
     if (addresses.length === 0) return;
-    drawerPostie.post('selector-change', addresses, activeRoomID);
+    drawerPostie.post('selector-change', addresses, selectedRoomId);
   }
 
-  function unreadChanged(roomId) {
+  function notiChanged(roomId, total, prevTotal) {
-    if (!drawerPostie.hasTopic('unread-change')) return;
+    if (total === prevTotal) return;
-    if (!drawerPostie.hasSubscriber('unread-change', roomId)) return;
+    if (drawerPostie.hasTopicAndSubscriber('unread-change', roomId)) {
-    drawerPostie.post('unread-change', roomId);
+      drawerPostie.post('unread-change', roomId);
+    }
   }
 
   function roomListUpdated() {
     const { spaces, rooms, directs } = initMatrix.roomList;
     if (!(
-      spaces.has(navigation.getActiveRoomId())
+      spaces.has(navigation.selectedRoomId)
-      || rooms.has(navigation.getActiveRoomId())
+      || rooms.has(navigation.selectedRoomId)
-      || directs.has(navigation.getActiveRoomId()))
+      || directs.has(navigation.selectedRoomId))
     ) {
       selectRoom(null);
     }
@@ -47,13 +48,11 @@ function Directs() {
   useEffect(() => {
     roomList.on(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
     navigation.on(cons.events.navigation.ROOM_SELECTED, selectorChanged);
-    roomList.on(cons.events.roomList.MY_RECEIPT_ARRIVED, unreadChanged);
+    notifications.on(cons.events.notifications.NOTI_CHANGED, notiChanged);
-    roomList.on(cons.events.roomList.EVENT_ARRIVED, unreadChanged);
     return () => {
       roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
       navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged);
-      roomList.removeListener(cons.events.roomList.MY_RECEIPT_ARRIVED, unreadChanged);
+      notifications.removeListener(cons.events.notifications.NOTI_CHANGED, notiChanged);
-      roomList.removeListener(cons.events.roomList.EVENT_ARRIVED, unreadChanged);
     };
   }, []);
 
@@ -62,6 +61,7 @@ function Directs() {
       key={id}
       roomId={id}
       drawerPostie={drawerPostie}
+      onClick={() => selectRoom(id)}
     />
   ));
 }

src/app/organisms/navigation/Drawer.jsx

@@ -1,57 +1,83 @@
 import React, { useState, useEffect } from 'react';
 import './Drawer.scss';
 
+import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
+import { selectTab, selectSpace } from '../../../client/action/navigation';
 
+import Text from '../../atoms/text/Text';
 import ScrollView from '../../atoms/scroll/ScrollView';
 
 import DrawerHeader from './DrawerHeader';
+import DrawerBreadcrumb from './DrawerBreadcrumb';
 import Home from './Home';
 import Directs from './Directs';
 
-function DrawerBradcrumb() {
-  return (
-    <div className="breadcrumb__wrapper">
-      <ScrollView horizontal vertical={false}>
-        <div>
-          {/* TODO: bradcrumb space paths when spaces become a thing */}
-        </div>
-      </ScrollView>
-    </div>
-  );
-}
-
 function Drawer() {
-  const [activeTab, setActiveTab] = useState('home');
+  const [systemState, setSystemState] = useState(null);
+  const [selectedTab, setSelectedTab] = useState(navigation.selectedTab);
+  const [spaceId, setSpaceId] = useState(navigation.selectedSpaceId);
 
-  function onTabChanged(tabId) {
+  function onTabSelected(tabId) {
-    setActiveTab(tabId);
+    setSelectedTab(tabId);
+  }
+  function onSpaceSelected(roomId) {
+    setSpaceId(roomId);
+  }
+  function onRoomLeaved(roomId) {
+    const lRoomIndex = navigation.selectedSpacePath.indexOf(roomId);
+    if (lRoomIndex === -1) return;
+    if (lRoomIndex === 0) selectTab(cons.tabs.HOME);
+    else selectSpace(navigation.selectedSpacePath[lRoomIndex - 1]);
+  }
+
+  function handleSystemState(state) {
+    if (state === 'ERROR' || state === 'RECONNECTING' || state === 'STOPPED') {
+      setSystemState({ status: 'Connection lost!' });
+    }
+    if (systemState !== null) setSystemState(null);
   }
 
   useEffect(() => {
-    navigation.on(cons.events.navigation.TAB_CHANGED, onTabChanged);
+    navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
+    navigation.on(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
+    initMatrix.roomList.on(cons.events.roomList.ROOM_LEAVED, onRoomLeaved);
     return () => {
-      navigation.removeListener(cons.events.navigation.TAB_CHANGED, onTabChanged);
+      navigation.removeListener(cons.events.navigation.TAB_SELECTED, onTabSelected);
+      navigation.removeListener(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
+      initMatrix.roomList.removeListener(cons.events.roomList.ROOM_LEAVED, onRoomLeaved);
     };
   }, []);
+  useEffect(() => {
+    initMatrix.matrixClient.on('sync', handleSystemState);
+    return () => {
+      initMatrix.matrixClient.removeListener('sync', handleSystemState);
+    };
+  }, [systemState]);
+
   return (
     <div className="drawer">
-      <DrawerHeader activeTab={activeTab} />
+      <DrawerHeader selectedTab={selectedTab} spaceId={spaceId} />
       <div className="drawer__content-wrapper">
-        <DrawerBradcrumb />
+        {selectedTab !== cons.tabs.DIRECTS && <DrawerBreadcrumb spaceId={spaceId} />}
-        <div className="channels__wrapper">
+        <div className="rooms__wrapper">
           <ScrollView autoHide>
-            <div className="channels-container">
+            <div className="rooms-container">
               {
-                activeTab === 'home'
+                selectedTab !== cons.tabs.DIRECTS
-                  ? <Home />
+                  ? <Home spaceId={spaceId} />
                   : <Directs />
               }
             </div>
           </ScrollView>
         </div>
       </div>
+      { systemState !== null && (
+        <div className="drawer__state">
+          <Text>{systemState.status}</Text>
+        </div>
+      )}
     </div>
   );
 }

src/app/organisms/navigation/Drawer.scss

@@ -18,24 +18,49 @@
     border-left: 1px solid var(--bg-surface-border);
   }
 
+  & .header__title-wrapper .text {
+    font-weight: 500;
+  }
+
   &__content-wrapper {
     @extend .drawer-flexItem;
     @extend .drawer-flexBox;
   }
-}
 
-.breadcrumb__wrapper {
+  &__state {
-  display: none;
+    padding: var(--sp-extra-tight);
-  height: var(--header-height);
+    border-top: 1px solid var(--bg-surface-border);
+    display: flex;
+    justify-content: center;
+
+    & .text {
+      color: var(--tc-danger-high);
+    }
+  }
 }
-.channels__wrapper {
+.rooms__wrapper {
   @extend .drawer-flexItem;
+  position: relative;
 }
 
-.channels-container {
+.rooms-container {
   padding-bottom: var(--sp-extra-loose);
 
-  & > .channel-selector {
+  &::before {
+    position: absolute;
+    top: 0;
+    z-index: 99;
+    content: '';
+    display: inline-block;
+    width: 100%;
+    height: 8px;
+    background-image: linear-gradient(
+      to bottom,
+      var(--bg-surface-low),
+      var(--bg-surface-low-transparent));
+  }
+
+  & > .room-selector {
     width: calc(100% - var(--sp-extra-tight));
     margin-left: auto;
 
@@ -46,7 +71,7 @@
 
   }
 
-  & > .channel-selector:first-child {
+  & > .room-selector:first-child {
     margin-top: var(--sp-extra-tight);
   }
 

src/app/organisms/navigation/DrawerBreadcrumb.jsx

@@ -0,0 +1,133 @@
+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';
+import navigation from '../../../client/state/navigation';
+import { abbreviateNumber } from '../../../util/common';
+
+import Text from '../../atoms/text/Text';
+import RawIcon from '../../atoms/system-icons/RawIcon';
+import Button from '../../atoms/button/Button';
+import ScrollView from '../../atoms/scroll/ScrollView';
+import NotificationBadge from '../../atoms/badge/NotificationBadge';
+
+import ChevronRightIC from '../../../../public/res/ic/outlined/chevron-right.svg';
+
+function DrawerBreadcrumb({ spaceId }) {
+  const [, forceUpdate] = useState({});
+  const scrollRef = useRef(null);
+  const { roomList, notifications } = initMatrix;
+  const mx = initMatrix.matrixClient;
+  const spacePath = navigation.selectedSpacePath;
+
+  function onNotiChanged(roomId, total, prevTotal) {
+    if (total === prevTotal) return;
+    if (navigation.selectedSpacePath.includes(roomId)) {
+      forceUpdate({});
+    }
+    if (navigation.selectedSpacePath[0] === cons.tabs.HOME) {
+      if (!roomList.isOrphan(roomId)) return;
+      if (roomList.directs.has(roomId)) return;
+      forceUpdate({});
+    }
+  }
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      if (scrollRef?.current === null) return;
+      scrollRef.current.scrollLeft = scrollRef.current.scrollWidth;
+    });
+    notifications.on(cons.events.notifications.NOTI_CHANGED, onNotiChanged);
+    return () => {
+      notifications.removeListener(cons.events.notifications.NOTI_CHANGED, onNotiChanged);
+    };
+  }, [spaceId]);
+
+  if (spacePath.length === 1) return null;
+
+  function getHomeNotiExcept(childId) {
+    const orphans = roomList.getOrphans();
+    const childIndex = orphans.indexOf(childId);
+    if (childId !== -1) orphans.splice(childIndex, 1);
+
+    let noti = null;
+
+    orphans.forEach((roomId) => {
+      if (!notifications.hasNoti(roomId)) return;
+      if (noti === null) noti = { total: 0, highlight: 0 };
+      const childNoti = notifications.getNoti(roomId);
+      noti.total += childNoti.total;
+      noti.highlight += childNoti.highlight;
+    });
+
+    return noti;
+  }
+
+  function getNotiExcept(roomId, childId) {
+    if (!notifications.hasNoti(roomId)) return null;
+
+    const noti = notifications.getNoti(roomId);
+    if (!notifications.hasNoti(childId)) return noti;
+    if (noti.from === null) return noti;
+    if (noti.from.has(childId) && noti.from.size === 1) return null;
+
+    const childNoti = notifications.getNoti(childId);
+
+    return {
+      total: noti.total - childNoti.total,
+      highlight: noti.highlight - childNoti.highlight,
+    };
+  }
+
+  return (
+    <div className="breadcrumb__wrapper">
+      <ScrollView ref={scrollRef} horizontal vertical={false} invisible>
+        <div className="breadcrumb">
+          {
+            spacePath.map((id, index) => {
+              const noti = (id !== cons.tabs.HOME && index < spacePath.length)
+                ? getNotiExcept(id, (index === spacePath.length - 1) ? null : spacePath[index + 1])
+                : getHomeNotiExcept((index === spacePath.length - 1) ? null : spacePath[index + 1]);
+
+              return (
+                <React.Fragment
+                  key={id}
+                >
+                  { index !== 0 && <RawIcon size="extra-small" src={ChevronRightIC} />}
+                  <Button
+                    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>
+                    { noti !== null && (
+                      <NotificationBadge
+                        alert={noti.highlight !== 0}
+                        content={noti.total > 0 ? abbreviateNumber(noti.total) : null}
+                      />
+                    )}
+                  </Button>
+                </React.Fragment>
+              );
+            })
+          }
+          <div style={{ width: 'var(--sp-extra-tight)', height: '100%' }} />
+        </div>
+      </ScrollView>
+    </div>
+  );
+}
+
+DrawerBreadcrumb.defaultProps = {
+  spaceId: null,
+};
+
+DrawerBreadcrumb.propTypes = {
+  spaceId: PropTypes.string,
+};
+
+export default DrawerBreadcrumb;

src/app/organisms/navigation/DrawerBreadcrumb.scss

@@ -0,0 +1,68 @@
+.breadcrumb__wrapper {
+  height: var(--header-height);
+  position: relative;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  margin: 0 var(--sp-extra-tight);
+
+  &::before,
+  &::after {
+    flex-shrink: 0;
+    position: absolute;
+    right: 0;
+    z-index: 99;
+
+    content: '';
+    display: inline-block;
+    min-width: 8px;
+    width: 8px;
+    height: 100%;
+    background-image: linear-gradient(
+      to right,
+      var(--bg-surface-low-transparent),
+      var(--bg-surface-low)
+    );
+  }
+  &::before {
+    left: 0;
+    right: unset;
+    background-image: linear-gradient(
+      to left,
+      var(--bg-surface-low-transparent),
+      var(--bg-surface-low)
+    );
+  }
+
+  & > * {
+    flex-shrink: 0;
+  }
+
+  & > .btn-surface {
+    min-width: 0;
+    padding: var(--sp-extra-tight) 10px;
+    white-space: nowrap;
+    box-shadow: none;
+    & p {
+      max-width: 86px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    & .notification-badge {
+      margin-left: var(--sp-extra-tight);
+      [dir=rtl] & {
+        margin-left: 0;
+        margin-right: var(--sp-extra-tight);
+      }
+    }
+  }
+
+  &__btn--selected {
+    box-shadow: var(--bs-surface-border) !important;
+    background-color: var(--bg-surface);
+  }
+}

src/app/organisms/navigation/DrawerHeader.jsx

@@ -1,9 +1,14 @@
-import React from 'react';
+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 {
-  openPublicChannels, openCreateChannel, openInviteUser,
+  openPublicRooms, openCreateRoom, openInviteUser,
 } from '../../../client/action/navigation';
+import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room';
 
 import Text from '../../atoms/text/Text';
 import Header, { TitleWrapper } from '../../atoms/header/Header';
@@ -13,43 +18,71 @@ import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/Cont
 import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
 import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
 import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
+import PinIC from '../../../../public/res/ic/outlined/pin.svg';
+import PinFilledIC from '../../../../public/res/ic/filled/pin.svg';
+
+function DrawerHeader({ selectedTab, spaceId }) {
+  const [, forceUpdate] = useState({});
+  const mx = initMatrix.matrixClient;
+  const tabName = selectedTab !== cons.tabs.DIRECTS ? 'Home' : 'Direct messages';
+
+  const room = mx.getRoom(spaceId);
+  const spaceName = selectedTab === cons.tabs.DIRECTS ? null : (room?.name || null);
 
-function DrawerHeader({ activeTab }) {
   return (
     <Header>
       <TitleWrapper>
-        <Text variant="s1">{(activeTab === 'home' ? 'Home' : 'Direct messages')}</Text>
+        <Text variant="s1">{twemojify(spaceName) || tabName}</Text>
       </TitleWrapper>
-      {(activeTab === 'dms')
+      {spaceName && (
-        ? <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="normal" />
+        <IconButton
-        : (
+          size="extra-small"
+          variant="surface"
+          tooltip={initMatrix.roomList.spaceShortcut.has(spaceId) ? 'Unpin' : 'Pin to sidebar'}
+          src={initMatrix.roomList.spaceShortcut.has(spaceId) ? PinFilledIC : PinIC}
+          onClick={() => {
+            if (initMatrix.roomList.spaceShortcut.has(spaceId)) deleteSpaceShortcut(spaceId);
+            else createSpaceShortcut(spaceId);
+            forceUpdate({});
+          }}
+        />
+      )}
+      { selectedTab === cons.tabs.DIRECTS && <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="normal" /> }
+      { selectedTab !== cons.tabs.DIRECTS && !spaceName && (
+        <>
           <ContextMenu
             content={(hideMenu) => (
               <>
-                <MenuHeader>Add channel</MenuHeader>
+                <MenuHeader>Add room</MenuHeader>
                 <MenuItem
                   iconSrc={HashPlusIC}
-                  onClick={() => { hideMenu(); openCreateChannel(); }}
+                  onClick={() => { hideMenu(); openCreateRoom(); }}
                 >
-                  Create new channel
+                  Create new room
                 </MenuItem>
                 <MenuItem
                   iconSrc={HashSearchIC}
-                  onClick={() => { hideMenu(); openPublicChannels(); }}
+                  onClick={() => { hideMenu(); openPublicRooms(); }}
                 >
-                  Add Public channel
+                  Add public room
                 </MenuItem>
               </>
             )}
-            render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add channel" src={PlusIC} size="normal" />)}
+            render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add room" src={PlusIC} size="normal" />)}
           />
-        )}
+        </>
+      )}
       {/* <IconButton onClick={() => ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */}
     </Header>
   );
 }
+
+DrawerHeader.defaultProps = {
+  spaceId: null,
+};
 DrawerHeader.propTypes = {
-  activeTab: PropTypes.string.isRequired,
+  selectedTab: PropTypes.string.isRequired,
+  spaceId: PropTypes.string,
 };
 
 export default DrawerHeader;

src/app/organisms/navigation/Home.jsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
-import { selectRoom } from '../../../client/action/navigation';
+import { selectSpace, selectRoom } from '../../../client/action/navigation';
 import Postie from '../../../util/Postie';
 
 import Text from '../../atoms/text/Text';
@@ -12,33 +13,46 @@ import Selector from './Selector';
 import { AtoZ } from './common';
 
 const drawerPostie = new Postie();
-function Home() {
+function Home({ spaceId }) {
-  const { roomList } = initMatrix;
-  const spaceIds = [...roomList.spaces].sort(AtoZ);
-  const roomIds = [...roomList.rooms].sort(AtoZ);
-
   const [, forceUpdate] = useState({});
+  const { roomList, notifications } = initMatrix;
+  let spaceIds = [];
+  let roomIds = [];
+  let directIds = [];
 
-  function selectorChanged(activeRoomID, prevActiveRoomId) {
+  const spaceChildIds = roomList.getSpaceChildren(spaceId);
+  if (spaceChildIds) {
+    spaceIds = spaceChildIds.filter((roomId) => roomList.spaces.has(roomId)).sort(AtoZ);
+    roomIds = spaceChildIds.filter((roomId) => roomList.rooms.has(roomId)).sort(AtoZ);
+    directIds = spaceChildIds.filter((roomId) => roomList.directs.has(roomId)).sort(AtoZ);
+  } else {
+    spaceIds = [...roomList.spaces]
+      .filter((roomId) => !roomList.roomIdToParents.has(roomId)).sort(AtoZ);
+    roomIds = [...roomList.rooms]
+      .filter((roomId) => !roomList.roomIdToParents.has(roomId)).sort(AtoZ);
+  }
+
+  function selectorChanged(selectedRoomId, prevSelectedRoomId) {
     if (!drawerPostie.hasTopic('selector-change')) return;
     const addresses = [];
-    if (drawerPostie.hasSubscriber('selector-change', activeRoomID)) addresses.push(activeRoomID);
+    if (drawerPostie.hasSubscriber('selector-change', selectedRoomId)) addresses.push(selectedRoomId);
-    if (drawerPostie.hasSubscriber('selector-change', prevActiveRoomId)) addresses.push(prevActiveRoomId);
+    if (drawerPostie.hasSubscriber('selector-change', prevSelectedRoomId)) addresses.push(prevSelectedRoomId);
     if (addresses.length === 0) return;
-    drawerPostie.post('selector-change', addresses, activeRoomID);
+    drawerPostie.post('selector-change', addresses, selectedRoomId);
   }
-  function unreadChanged(roomId) {
+  function notiChanged(roomId, total, prevTotal) {
-    if (!drawerPostie.hasTopic('unread-change')) return;
+    if (total === prevTotal) return;
-    if (!drawerPostie.hasSubscriber('unread-change', roomId)) return;
+    if (drawerPostie.hasTopicAndSubscriber('unread-change', roomId)) {
-    drawerPostie.post('unread-change', roomId);
+      drawerPostie.post('unread-change', roomId);
+    }
   }
 
   function roomListUpdated() {
     const { spaces, rooms, directs } = initMatrix.roomList;
     if (!(
-      spaces.has(navigation.getActiveRoomId())
+      spaces.has(navigation.selectedRoomId)
-      || rooms.has(navigation.getActiveRoomId())
+      || rooms.has(navigation.selectedRoomId)
-      || directs.has(navigation.getActiveRoomId()))
+      || directs.has(navigation.selectedRoomId))
     ) {
       selectRoom(null);
     }
@@ -48,13 +62,11 @@ function Home() {
   useEffect(() => {
     roomList.on(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
     navigation.on(cons.events.navigation.ROOM_SELECTED, selectorChanged);
-    roomList.on(cons.events.roomList.MY_RECEIPT_ARRIVED, unreadChanged);
+    notifications.on(cons.events.notifications.NOTI_CHANGED, notiChanged);
-    roomList.on(cons.events.roomList.EVENT_ARRIVED, unreadChanged);
     return () => {
       roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
       navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged);
-      roomList.removeListener(cons.events.roomList.MY_RECEIPT_ARRIVED, unreadChanged);
+      notifications.removeListener(cons.events.notifications.NOTI_CHANGED, notiChanged);
-      roomList.removeListener(cons.events.roomList.EVENT_ARRIVED, unreadChanged);
     };
   }, []);
 
@@ -67,20 +79,38 @@ function Home() {
           roomId={id}
           isDM={false}
           drawerPostie={drawerPostie}
+          onClick={() => selectSpace(id)}
         />
       ))}
 
-      { roomIds.length !== 0 && <Text className="cat-header" variant="b3">Channels</Text> }
+      { roomIds.length !== 0 && <Text className="cat-header" variant="b3">Rooms</Text> }
       { roomIds.map((id) => (
         <Selector
           key={id}
           roomId={id}
           isDM={false}
           drawerPostie={drawerPostie}
+          onClick={() => selectRoom(id)}
         />
       )) }
+
+      { directIds.length !== 0 && <Text className="cat-header" variant="b3">People</Text> }
+      { directIds.map((id) => (
+        <Selector
+          key={id}
+          roomId={id}
+          drawerPostie={drawerPostie}
+          onClick={() => selectRoom(id)}
+        />
+      ))}
     </>
   );
 }
+Home.defaultProps = {
+  spaceId: null,
+};
+Home.propTypes = {
+  spaceId: PropTypes.string,
+};
 
 export default Home;

src/app/organisms/navigation/Selector.jsx

@@ -3,27 +3,36 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 import initMatrix from '../../../client/initMatrix';
-import { doesRoomHaveUnread } from '../../../util/matrixUtil';
-import { selectRoom } from '../../../client/action/navigation';
 import navigation from '../../../client/state/navigation';
+import { openRoomOptions } from '../../../client/action/navigation';
+import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room';
+import { getEventCords, abbreviateNumber } from '../../../util/common';
 
-import ChannelSelector from '../../molecules/channel-selector/ChannelSelector';
+import IconButton from '../../atoms/button/IconButton';
+import RoomSelector from '../../molecules/room-selector/RoomSelector';
 
 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 PinIC from '../../../../public/res/ic/outlined/pin.svg';
+import PinFilledIC from '../../../../public/res/ic/filled/pin.svg';
+import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
 
-function Selector({ roomId, isDM, drawerPostie }) {
+function Selector({
+  roomId, isDM, drawerPostie, onClick,
+}) {
   const mx = initMatrix.matrixClient;
+  const noti = initMatrix.notifications;
   const room = mx.getRoom(roomId);
-  const imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
+  let imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
+  if (imageSrc === null) imageSrc = room.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
 
-  const [isSelected, setIsSelected] = useState(navigation.getActiveRoomId() === roomId);
+  const [isSelected, setIsSelected] = useState(navigation.selectedRoomId === roomId);
   const [, forceUpdate] = useState({});
 
-  function selectorChanged(activeRoomId) {
+  function selectorChanged(selectedRoomId) {
-    setIsSelected(activeRoomId === roomId);
+    setIsSelected(selectedRoomId === roomId);
   }
   function changeNotificationBadge() {
     forceUpdate({});
@@ -38,27 +47,57 @@ function Selector({ roomId, isDM, drawerPostie }) {
     };
   }, []);
 
+  if (room.isSpaceRoom()) {
+    return (
+      <RoomSelector
+        key={roomId}
+        name={room.name}
+        roomId={roomId}
+        iconSrc={room.getJoinRule() === 'invite' ? SpaceLockIC : SpaceIC}
+        isUnread={noti.hasNoti(roomId)}
+        notificationCount={abbreviateNumber(noti.getTotalNoti(roomId))}
+        isAlert={noti.getHighlightNoti(roomId) !== 0}
+        onClick={onClick}
+        options={(
+          <IconButton
+            size="extra-small"
+            variant="surface"
+            tooltip={initMatrix.roomList.spaceShortcut.has(roomId) ? 'Unpin' : 'Pin to sidebar'}
+            tooltipPlacement="right"
+            src={initMatrix.roomList.spaceShortcut.has(roomId) ? PinFilledIC : PinIC}
+            onClick={() => {
+              if (initMatrix.roomList.spaceShortcut.has(roomId)) deleteSpaceShortcut(roomId);
+              else createSpaceShortcut(roomId);
+              forceUpdate({});
+            }}
+          />
+        )}
+      />
+    );
+  }
+
   return (
-    <ChannelSelector
+    <RoomSelector
       key={roomId}
       name={room.name}
       roomId={roomId}
       imageSrc={isDM ? imageSrc : null}
-      iconSrc={
+      // eslint-disable-next-line no-nested-ternary
-        isDM
+      iconSrc={isDM ? null : room.getJoinRule() === 'invite' ? HashLockIC : HashIC}
-          ? null
-          : (() => {
-            if (room.isSpaceRoom()) {
-              return (room.getJoinRule() === 'invite' ? SpaceLockIC : SpaceIC);
-            }
-            return (room.getJoinRule() === 'invite' ? HashLockIC : HashIC);
-          })()
-      }
       isSelected={isSelected}
-      isUnread={doesRoomHaveUnread(room)}
+      isUnread={noti.hasNoti(roomId)}
-      notificationCount={room.getUnreadNotificationCount('total') || 0}
+      notificationCount={abbreviateNumber(noti.getTotalNoti(roomId))}
-      isAlert={room.getUnreadNotificationCount('highlight') !== 0}
+      isAlert={noti.getHighlightNoti(roomId) !== 0}
-      onClick={() => selectRoom(roomId)}
+      onClick={onClick}
+      options={(
+        <IconButton
+          size="extra-small"
+          tooltip="Options"
+          tooltipPlacement="right"
+          src={VerticalMenuIC}
+          onClick={(e) => openRoomOptions(getEventCords(e), roomId)}
+        />
+      )}
     />
   );
 }
@@ -71,6 +110,7 @@ Selector.propTypes = {
   roomId: PropTypes.string.isRequired,
   isDM: PropTypes.bool,
   drawerPostie: PropTypes.shape({}).isRequired,
+  onClick: PropTypes.func.isRequired,
 };
 
 export default Selector;

src/app/organisms/navigation/SideBar.jsx

@@ -6,9 +6,10 @@ import cons from '../../../client/state/cons';
 import colorMXID from '../../../util/colorMXID';
 import logout from '../../../client/action/logout';
 import {
-  changeTab, openInviteList, openPublicChannels, openSettings,
+  selectTab, openInviteList, openSearch, openSettings,
 } from '../../../client/action/navigation';
 import navigation from '../../../client/state/navigation';
+import { abbreviateNumber } from '../../../util/common';
 
 import ScrollView from '../../atoms/scroll/ScrollView';
 import SidebarAvatar from '../../molecules/sidebar-avatar/SidebarAvatar';
@@ -16,13 +17,35 @@ 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 HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
+import SearchIC from '../../../../public/res/ic/outlined/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';
 
 function ProfileAvatarMenu() {
   const mx = initMatrix.matrixClient;
+  const [profile, setProfile] = useState({
+    avatarUrl: null,
+    displayName: mx.getUser(mx.getUserId()).displayName,
+  });
+
+  useEffect(() => {
+    const user = mx.getUser(mx.getUserId());
+    const setNewProfile = (avatarUrl, displayName) => setProfile({
+      avatarUrl: avatarUrl || null,
+      displayName: displayName || profile.displayName,
+    });
+    const onAvatarChange = (event, myUser) => {
+      setNewProfile(myUser.avatarUrl, myUser.displayName);
+    };
+    mx.getProfileInfo(mx.getUserId()).then((info) => {
+      setNewProfile(info.avatar_url, info.displayname);
+    });
+    user.on('User.avatarUrl', onAvatarChange);
+    return () => {
+      user.removeListener('User.avatarUrl', onAvatarChange);
+    };
+  }, []);
 
   return (
     <ContextMenu
@@ -44,10 +67,10 @@ function ProfileAvatarMenu() {
       render={(toggleMenu) => (
         <SidebarAvatar
           onClick={toggleMenu}
-          tooltip={mx.getUser(mx.getUserId()).displayName}
+          tooltip={profile.displayName}
-          imageSrc={mx.getUser(mx.getUserId()).avatarUrl !== null ? mx.mxcUrlToHttp(mx.getUser(mx.getUserId()).avatarUrl, 42, 42, 'crop') : null}
+          imageSrc={profile.avatarUrl !== null ? mx.mxcUrlToHttp(profile.avatarUrl, 42, 42, 'crop') : null}
           bgColor={colorMXID(mx.getUserId())}
-          text={mx.getUser(mx.getUserId()).displayName.slice(0, 1)}
+          text={profile.displayName}
         />
       )}
     />
@@ -55,57 +78,143 @@ function ProfileAvatarMenu() {
 }
 
 function SideBar() {
-  const totalInviteCount = () => initMatrix.roomList.inviteRooms.size
+  const { roomList, notifications } = initMatrix;
-    + initMatrix.roomList.inviteSpaces.size
+  const mx = initMatrix.matrixClient;
-    + initMatrix.roomList.inviteDirects.size;
+  const totalInviteCount = () => roomList.inviteRooms.size
+    + roomList.inviteSpaces.size
+    + roomList.inviteDirects.size;
 
   const [totalInvites, updateTotalInvites] = useState(totalInviteCount());
-  const [activeTab, setActiveTab] = useState('home');
+  const [selectedTab, setSelectedTab] = useState(navigation.selectedTab);
+  const [, forceUpdate] = useState({});
 
-  function onTabChanged(tabId) {
+  function onTabSelected(tabId) {
-    setActiveTab(tabId);
+    setSelectedTab(tabId);
   }
   function onInviteListChange() {
     updateTotalInvites(totalInviteCount());
   }
+  function onSpaceShortcutUpdated() {
+    forceUpdate({});
+  }
+  function onNotificationChanged(roomId, total, prevTotal) {
+    if (total === prevTotal) return;
+    forceUpdate({});
+  }
 
   useEffect(() => {
-    navigation.on(cons.events.navigation.TAB_CHANGED, onTabChanged);
+    navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
-    initMatrix.roomList.on(
+    roomList.on(cons.events.roomList.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
-      cons.events.roomList.INVITELIST_UPDATED,
+    roomList.on(cons.events.roomList.INVITELIST_UPDATED, onInviteListChange);
-      onInviteListChange,
+    notifications.on(cons.events.notifications.NOTI_CHANGED, onNotificationChanged);
-    );
 
     return () => {
-      navigation.removeListener(cons.events.navigation.TAB_CHANGED, onTabChanged);
+      navigation.removeListener(cons.events.navigation.TAB_SELECTED, onTabSelected);
-      initMatrix.roomList.removeListener(
+      roomList.removeListener(cons.events.roomList.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
-        cons.events.roomList.INVITELIST_UPDATED,
+      roomList.removeListener(cons.events.roomList.INVITELIST_UPDATED, onInviteListChange);
-        onInviteListChange,
+      notifications.removeListener(cons.events.notifications.NOTI_CHANGED, onNotificationChanged);
-      );
     };
   }, []);
 
+  function getHomeNoti() {
+    const orphans = roomList.getOrphans();
+    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);
+      noti.total += childNoti.total;
+      noti.highlight += childNoti.highlight;
+    });
+
+    return noti;
+  }
+  function getDMsNoti() {
+    if (roomList.directs.size === 0) return null;
+    let noti = null;
+
+    [...roomList.directs].forEach((roomId) => {
+      if (!notifications.hasNoti(roomId)) return;
+      if (noti === null) noti = { total: 0, highlight: 0 };
+      const childNoti = notifications.getNoti(roomId);
+      noti.total += childNoti.total;
+      noti.highlight += childNoti.highlight;
+    });
+
+    return noti;
+  }
+
+  // TODO: bellow operations are heavy.
+  // refactor this component into more smaller components.
+  const dmsNoti = getDMsNoti();
+  const homeNoti = getHomeNoti();
+
   return (
     <div className="sidebar">
       <div className="sidebar__scrollable">
         <ScrollView invisible>
           <div className="scrollable-content">
             <div className="featured-container">
-              <SidebarAvatar active={activeTab === 'home'} onClick={() => changeTab('home')} tooltip="Home" iconSrc={HomeIC} />
+              <SidebarAvatar
-              <SidebarAvatar active={activeTab === 'dms'} onClick={() => changeTab('dms')} tooltip="People" iconSrc={UserIC} />
+                active={selectedTab === cons.tabs.HOME}
-              <SidebarAvatar onClick={() => openPublicChannels()} tooltip="Public channels" iconSrc={HashSearchIC} />
+                onClick={() => selectTab(cons.tabs.HOME)}
+                tooltip="Home"
+                iconSrc={HomeIC}
+                isUnread={homeNoti !== null}
+                notificationCount={homeNoti !== null ? abbreviateNumber(homeNoti.total) : 0}
+                isAlert={homeNoti?.highlight > 0}
+              />
+              <SidebarAvatar
+                active={selectedTab === cons.tabs.DIRECTS}
+                onClick={() => selectTab(cons.tabs.DIRECTS)}
+                tooltip="People"
+                iconSrc={UserIC}
+                isUnread={dmsNoti !== null}
+                notificationCount={dmsNoti !== null ? abbreviateNumber(dmsNoti.total) : 0}
+                isAlert={dmsNoti?.highlight > 0}
+              />
             </div>
             <div className="sidebar-divider" />
-            <div className="space-container" />
+            <div className="space-container">
+              {
+                [...roomList.spaceShortcut].map((shortcut) => {
+                  const sRoomId = shortcut;
+                  const room = mx.getRoom(sRoomId);
+                  return (
+                    <SidebarAvatar
+                      active={selectedTab === sRoomId}
+                      key={sRoomId}
+                      tooltip={room.name}
+                      bgColor={colorMXID(room.roomId)}
+                      imageSrc={room.getAvatarUrl(initMatrix.matrixClient.baseUrl, 42, 42, 'crop') || null}
+                      text={room.name}
+                      isUnread={notifications.hasNoti(sRoomId)}
+                      notificationCount={abbreviateNumber(notifications.getTotalNoti(sRoomId))}
+                      isAlert={notifications.getHighlightNoti(sRoomId) !== 0}
+                      onClick={() => selectTab(shortcut)}
+                    />
+                  );
+                })
+              }
+            </div>
           </div>
         </ScrollView>
       </div>
       <div className="sidebar__sticky">
         <div className="sidebar-divider" />
         <div className="sticky-container">
+          <SidebarAvatar
+            onClick={() => openSearch()}
+            tooltip="Search"
+            iconSrc={SearchIC}
+          />
           { totalInvites !== 0 && (
             <SidebarAvatar
-              notifyCount={totalInvites}
+              isUnread
+              notificationCount={totalInvites}
+              isAlert
               onClick={() => openInviteList()}
               tooltip="Invites"
               iconSrc={InviteIC}