v1.4.0: SSO login and profile viewer

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

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE/bug_report.md

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

.github/ISSUE_TEMPLATE/feature_request.md

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

.github/PULL_REQUEST_TEMPLATE.md

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

.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@master
+        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@master
+        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

.github/workflows/pull-request.yml

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

.gitignore

@@ -1,5 +1,6 @@
 experiment
-package-lock.json
 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/kfiven/donate)
+> - [Donate to us](https://liberapay.com/ajbura/donate)
 
 <!-- omit in toc -->
 ## Table of Contents

Dockerfile

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

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

@@ -8,4 +8,53 @@
 
 ## About <a name = "about"></a>
 
-Cinny is a [matrix](https://matrix.org) client focusing primarily on simple, elegant and secure interface.
+Cinny is a [Matrix](https://matrix.org) client focusing primarily on simple, elegant and secure interface.
+
+![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:
+
+```sh
+npm install # Installs all dependencies
+npm run build # Compiles the app into the dist/ directory
+```
+
+You can then copy the files to a webserver's webroot of your choice. 
+To serve a development version of the app locally for testing, you may also use the command `npm start`.
+
+### Running with Docker
+
+This repository includes a Dockerfile, which builds the application from source and serves it with Nginx on port 80. To
+use this locally, you can build the container like so:
+
+```
+docker build -t cinny:latest .
+```
+
+You can then run the container you've built with a command similar to this:
+
+```
+docker run -p 8080:80 cinny:latest
+```
+
+This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by
+navigating to `http://localhost:8080`.
+
+Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by `docker pull ajbura/cinny`.
+
+## License
+
+Copyright (c) 2021 Ajay Bura (ajbura) and other 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/>

_redirects

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

contrib/nginx/README.md

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

contrib/nginx/cinny.domain.tld.conf

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

package.json

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

public/index.html

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

public/res/ic/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/bin.svg

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

public/res/ic/outlined/cmd.svg

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

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

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

public/res/ic/outlined/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/info.svg

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

public/res/ic/outlined/markdown.svg

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

public/res/ic/outlined/pencil.svg

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

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

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

src/app/atoms/badge/NotificationBadge.jsx

@@ -4,25 +4,26 @@ import './NotificationBadge.scss';
 
 import Text from '../text/Text';
 
-function NotificationBadge({ alert, children }) {
+function NotificationBadge({ alert, content }) {
   const notificationClass = alert ? ' notification-badge--alert' : '';
   return (
     <div className={`notification-badge${notificationClass}`}>
-      <Text variant="b3">{children}</Text>
+      {content !== null && <Text variant="b3">{content}</Text>}
     </div>
   );
 }
 
 NotificationBadge.defaultProps = {
   alert: false,
+  content: null,
 };
 
 NotificationBadge.propTypes = {
   alert: PropTypes.bool,
-  children: PropTypes.oneOfType([
+  content: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
-  ]).isRequired,
+  ]),
 };
 
 export default NotificationBadge;

src/app/atoms/badge/NotificationBadge.scss

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

src/app/atoms/button/Button.jsx

@@ -7,26 +7,30 @@ import RawIcon from '../system-icons/RawIcon';
 import { blurOnBubbling } from './script';
 
 function Button({
-  id, variant, iconSrc, type, onClick, children, disabled,
+  id, className, variant, iconSrc,
+  type, onClick, children, disabled,
 }) {
   const iconClass = (iconSrc === null) ? '' : `btn-${variant}--icon`;
   return (
     <button
       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 +40,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

@@ -2,56 +2,52 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './IconButton.scss';
 
-import Tippy from '@tippyjs/react';
 import RawIcon from '../system-icons/RawIcon';
+import Tooltip from '../tooltip/Tooltip';
 import { blurOnBubbling } from './script';
 import Text from '../text/Text';
 
-// 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,
-}, ref) => (
+}, ref) => {
-  <Tippy
+  const btn = (
-    content={<Text variant="b2">{tooltip}</Text>}
-    className="ic-btn-tippy"
-    touch="hold"
-    arrow={false}
-    maxWidth={250}
-    placement={tooltipPlacement}
-    delay={[0, 0]}
-    duration={[100, 0]}
-  >
     <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}
     >
       <RawIcon size={size} src={src} />
     </button>
-  </Tippy>
+  );
-));
+  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,
 };
 
 IconButton.propTypes = {
-  variant: PropTypes.oneOf(['surface']),
+  variant: PropTypes.oneOf(['surface', '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,

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);
@@ -32,14 +29,21 @@
   @include focus(var(--bg-surface-hover));
   @include state.active(var(--bg-surface-active));
 }
-
+.ic-btn-positive {
-.ic-btn-tippy {
+  @include color(var(--ic-positive-normal));
-  padding: var(--sp-extra-tight) var(--sp-normal);
+  @include state.hover(var(--bg-positive-hover));
-  background-color: var(--bg-tooltip);
+  @include focus(var(--bg-positive-hover));
-  border-radius: var(--bo-radius);
+  @include state.active(var(--bg-positive-active));
-  box-shadow: var(--bs-popup);
+}
-
+.ic-btn-caution {
-  .text {
+  @include color(var(--ic-caution-normal));
-    color: var(--tc-tooltip);
+  @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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './ContextMenu.scss';
 
@@ -10,12 +10,16 @@ import Button from '../button/Button';
 import ScrollView from '../scroll/ScrollView';
 
 function ContextMenu({
-  content, placement, maxWidth, render,
+  content, placement, maxWidth, render, afterToggle,
 }) {
   const [isVisible, setVisibility] = useState(false);
   const showMenu = () => setVisibility(true);
   const hideMenu = () => setVisibility(false);
 
+  useEffect(() => {
+    if (afterToggle !== null) afterToggle(isVisible);
+  }, [isVisible]);
+
   return (
     <Tippy
       animation="scale-extreme"
@@ -27,6 +31,7 @@ function ContextMenu({
       interactive
       arrow={false}
       maxWidth={maxWidth}
+      duration={200}
     >
       {render(isVisible ? hideMenu : showMenu)}
     </Tippy>
@@ -36,6 +41,7 @@ function ContextMenu({
 ContextMenu.defaultProps = {
   maxWidth: 'unset',
   placement: 'right',
+  afterToggle: null,
 };
 
 ContextMenu.propTypes = {
@@ -49,6 +55,7 @@ ContextMenu.propTypes = {
     PropTypes.number,
   ]),
   render: PropTypes.func.isRequired,
+  afterToggle: PropTypes.func,
 };
 
 function MenuHeader({ children }) {
@@ -87,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) {
@@ -44,6 +47,7 @@
     justify-content: start;
     border-radius: 0;
     box-shadow: none;
+    white-space: nowrap;
 
     .text:first-child {
       margin: {

src/app/atoms/input/Input.jsx

@@ -8,6 +8,7 @@ function Input({
   id, label, value, placeholder,
   required, type, onChange, forwardRef,
   resizable, minHeight, onResize, state,
+  onKeyDown,
 }) {
   return (
     <div className="input-container">
@@ -26,6 +27,7 @@ function Input({
             autoComplete="off"
             onChange={onChange}
             onResize={onResize}
+            onKeyDown={onKeyDown}
           />
         ) : (
           <input
@@ -38,6 +40,7 @@ function Input({
             defaultValue={value}
             autoComplete="off"
             onChange={onChange}
+            onKeyDown={onKeyDown}
           />
         )}
     </div>
@@ -57,6 +60,7 @@ Input.defaultProps = {
   minHeight: 46,
   onResize: null,
   state: 'normal',
+  onKeyDown: null,
 };
 
 Input.propTypes = {
@@ -72,6 +76,7 @@ Input.propTypes = {
   minHeight: PropTypes.number,
   onResize: PropTypes.func,
   state: PropTypes.oneOf(['normal', 'success', 'error']),
+  onKeyDown: PropTypes.func,
 };
 
 export default Input;

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/tooltip/Tooltip.jsx

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

src/app/atoms/tooltip/Tooltip.scss

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

src/app/molecules/channel-selector/ChannelSelector.jsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './ChannelSelector.scss';
-
-import colorMXID from '../../../util/colorMXID';
-
-import Text from '../../atoms/text/Text';
-import Avatar from '../../atoms/avatar/Avatar';
-import NotificationBadge from '../../atoms/badge/NotificationBadge';
-import { blurOnBubbling } from '../../atoms/button/script';
-
-function ChannelSelector({
-  selected, unread, notificationCount, alert,
-  iconSrc, imageSrc, roomId, onClick, children,
-}) {
-  return (
-    <button
-      className={`channel-selector__button-wrapper${selected ? ' channel-selector--selected' : ''}`}
-      type="button"
-      onClick={onClick}
-      onMouseUp={(e) => blurOnBubbling(e, '.channel-selector__button-wrapper')}
-    >
-      <div className="channel-selector">
-        <div className="channel-selector__icon flex--center">
-          <Avatar
-            text={children.slice(0, 1)}
-            bgColor={colorMXID(roomId)}
-            imageSrc={imageSrc}
-            iconSrc={iconSrc}
-            size="extra-small"
-          />
-        </div>
-        <div className="channel-selector__text-container">
-          <Text variant="b1">{children}</Text>
-        </div>
-        <div className="channel-selector__badge-container">
-          {
-            notificationCount !== 0
-              ? unread && (
-                <NotificationBadge alert={alert}>
-                  {notificationCount}
-                </NotificationBadge>
-              )
-              : unread && <div className="channel-selector--unread" />
-          }
-        </div>
-      </div>
-    </button>
-  );
-}
-
-ChannelSelector.defaultProps = {
-  selected: false,
-  unread: false,
-  notificationCount: 0,
-  alert: false,
-  iconSrc: null,
-  imageSrc: null,
-};
-
-ChannelSelector.propTypes = {
-  selected: PropTypes.bool,
-  unread: PropTypes.bool,
-  notificationCount: PropTypes.number,
-  alert: PropTypes.bool,
-  iconSrc: PropTypes.string,
-  imageSrc: PropTypes.string,
-  roomId: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired,
-  children: PropTypes.string.isRequired,
-};
-
-export default ChannelSelector;

src/app/molecules/channel-selector/ChannelSelector.scss

@@ -1,66 +0,0 @@
-.channel-selector__button-wrapper {
-  display: block;
-  width: calc(100% - var(--sp-extra-tight));
-  margin-left: auto;
-  padding: var(--sp-extra-tight) var(--sp-extra-tight);
-  border: 1px solid transparent;
-  border-radius:  var(--bo-radius);
-  cursor: pointer;
-
-  [dir=rtl] & {
-    margin: {
-      left: 0;
-      right: auto;
-    }
-  }
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--bg-surface-hover);
-    }
-  }
-  &:focus {
-    outline: none;
-    background-color: var(--bg-surface-hover);
-  }
-  &:active {
-    background-color: var(--bg-surface-active);
-  }
-}
-.channel-selector {
-  display: flex;
-  align-items: center;
-
-  &__icon {
-    width: 24px;
-    height: 24px;
-    .avatar__border {
-      box-shadow: none;
-    }
-  }
-  &__text-container {
-    flex: 1;
-    min-width: 0;
-    margin: 0 var(--sp-extra-tight);
-
-    & .text {
-      color: var(--tc-surface-normal);
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-}
-
-.channel-selector--unread {
-  margin: 0 var(--sp-ultra-tight);
-  height: 8px;
-  width: 8px;
-  background-color: var(--tc-surface-low);
-  border-radius: 50%;
-  opacity: .4;
-}
-.channel-selector--selected {
-  background-color: var(--bg-surface);
-  border-color: var(--bg-surface-border);
-}

src/app/molecules/dialog/Dialog.jsx

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

src/app/molecules/dialog/Dialog.scss

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

src/app/molecules/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.slice(0, 1)}
+          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

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

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

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

src/app/molecules/media/Media.jsx

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

src/app/molecules/message/Message.jsx

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

src/app/molecules/message/Message.scss

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

src/app/molecules/message/TimelineChange.jsx

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

src/app/molecules/message/TimelineChange.scss

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

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import './ChannelIntro.scss';
+import './RoomIntro.scss';
 
 import Linkify from 'linkifyjs/react';
 import colorMXID from '../../../util/colorMXID';
@@ -12,27 +12,28 @@ function linkifyContent(content) {
   return <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify>;
 }
 
-function ChannelIntro({
+function RoomIntro({
-  avatarSrc, name, heading, desc, time,
+  roomId, avatarSrc, name, heading, desc, time,
 }) {
   return (
-    <div className="channel-intro">
+    <div className="room-intro">
-      <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={colorMXID(name)} size="large" />
+      <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={colorMXID(roomId)} size="large" />
-      <div className="channel-intro__content">
+      <div className="room-intro__content">
-        <Text className="channel-intro__name" variant="h1">{heading}</Text>
+        <Text className="room-intro__name" variant="h1">{heading}</Text>
-        <Text className="channel-intro__desc" variant="b1">{linkifyContent(desc)}</Text>
+        <Text className="room-intro__desc" variant="b1">{linkifyContent(desc)}</Text>
-        { time !== null && <Text className="channel-intro__time" variant="b3">{time}</Text>}
+        { time !== null && <Text className="room-intro__time" variant="b3">{time}</Text>}
       </div>
     </div>
   );
 }
 
-ChannelIntro.defaultProps = {
+RoomIntro.defaultProps = {
-  avatarSrc: false,
+  avatarSrc: null,
   time: null,
 };
 
-ChannelIntro.propTypes = {
+RoomIntro.propTypes = {
+  roomId: PropTypes.string.isRequired,
   avatarSrc: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.bool,
@@ -43,4 +44,4 @@ ChannelIntro.propTypes = {
   time: PropTypes.string,
 };
 
-export default ChannelIntro;
+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,7 +11,7 @@
     }
   }
 
-  .channel-intro__content {
+  .room-intro__content {
     margin-top: var(--sp-extra-loose);
     max-width: 640px;
   }

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

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

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

@@ -0,0 +1,97 @@
+.room-selector-flex {
+  display: flex;
+  align-items: center;
+}
+.room-selector-flexItem {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.room-selector {
+  @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);
+
+    & .room-selector__options {
+      display: flex;
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--bg-surface-hover);
+      & .room-selector__options {
+        display: flex;
+      }
+    }
+  }
+  &:focus-within {
+    background-color: var(--bg-surface-hover);
+    & button {
+      outline: none;
+    }
+  }
+  &:active {
+    background-color: var(--bg-surface-active);
+  }
+  &--selected:hover,
+  &--selected:focus,
+  &--selected:active {
+    background-color: var(--bg-surface);
+  }
+}
+
+.room-selector__content {
+  @extend .room-selector-flexItem;
+  @extend .room-selector-flex;
+  padding: 0 var(--sp-extra-tight);
+  min-height: 40px;
+  cursor: inherit;
+
+  & > .avatar-container .avatar__bordered {
+    box-shadow: none;
+  }
+
+  & > .text {
+    @extend .room-selector-flexItem;
+    margin: 0 var(--sp-extra-tight);
+
+    color: var(--tc-surface-normal-low);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+.room-selector__options {
+  @extend .room-selector-flex;
+  display: none;
+  margin-right: var(--sp-ultra-tight);
+
+  [dir=rtl] & {
+    margin-right: 0;
+    margin-left: var(--sp-ultra-tight);
+  }
+
+  &:empty {
+    margin: 0 !important;
+  }
+
+  & .ic-btn {
+    padding: 6px;
+    border-radius: calc(var(--bo-radius) / 2);
+  }
+}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import './ChannelTile.scss';
+import './RoomTile.scss';
 
 import Linkify from 'linkifyjs/react';
 import colorMXID from '../../../util/colorMXID';
@@ -12,20 +12,20 @@ function linkifyContent(content) {
   return <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify>;
 }
 
-function ChannelTile({
+function RoomTile({
   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)}
         />
       </div>
-      <div className="channel-tile__content">
+      <div className="room-tile__content">
         <Text variant="s1">{name}</Text>
         <Text variant="b3">
           {
@@ -36,12 +36,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">{linkifyContent(desc)}</Text>
             : desc
         }
       </div>
       { options !== null && (
-        <div className="channel-tile__options">
+        <div className="room-tile__options">
           {options}
         </div>
       )}
@@ -49,14 +49,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 +69,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,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './SidebarAvatar.scss';
 
-import Tippy from '@tippyjs/react';
 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>}
-      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 +33,14 @@ const SidebarAvatar = React.forwardRef(({
           iconSrc={iconSrc}
           size="normal"
         />
-        { notifyCount !== null && <NotificationBadge alert>{notifyCount}</NotificationBadge> }
+        { isUnread && (
+          <NotificationBadge
+            alert={isAlert}
+            content={notificationCount !== 0 ? notificationCount : null}
+          />
+        )}
       </button>
-    </Tippy>
+    </Tooltip>
   );
 });
 SidebarAvatar.defaultProps = {
@@ -52,7 +50,9 @@ SidebarAvatar.defaultProps = {
   imageSrc: null,
   active: false,
   onClick: null,
-  notifyCount: null,
+  isUnread: false,
+  notificationCount: 0,
+  isAlert: false,
 };
 
 SidebarAvatar.propTypes = {
@@ -63,10 +63,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,18 @@
-
-.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;
   }
   &:focus {
     outline: none;
@@ -37,7 +27,7 @@
     content: "";
     display: block;
     position: absolute;
-    left: 0;
+    left: -11px;
     top: 50%;
     transform: translateY(-50%);
 
@@ -48,7 +38,8 @@
     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,98 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import './SSOButtons.scss';
+
+import { createTemporaryClient, getLoginFlows, startSsoLogin } from '../../../client/action/auth';
+
+import Text from '../../atoms/text/Text';
+
+function SSOButtons({ homeserver }) {
+  const [identityProviders, setIdentityProviders] = useState([]);
+
+  useEffect(() => {
+    // If the homeserver passed in is not a fully-qualified domain name, do not update.
+    if (!homeserver.match('^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\\.[a-zA-Z]{2,})+$')) {
+      return;
+    }
+
+    // TODO Check that there is a Matrix server at homename before making requests.
+    // This will prevent the CORS errors that happen when a user changes their homeserver.
+    createTemporaryClient(homeserver).then((client) => {
+      const providers = [];
+      getLoginFlows(client).then((flows) => {
+        if (flows.flows !== undefined) {
+          const ssoFlows = flows.flows.filter((flow) => flow.type === 'm.login.sso' || flow.type === 'm.login.cas');
+          ssoFlows.forEach((flow) => {
+            if (flow.identity_providers !== undefined) {
+              const type = flow.type.substring(8);
+              flow.identity_providers.forEach((idp) => {
+                const imageSrc = client.mxcUrlToHttp(idp.icon);
+                providers.push({
+                  homeserver, id: idp.id, name: idp.name, type, imageSrc,
+                });
+              });
+            }
+          });
+        }
+        setIdentityProviders(providers);
+      }).catch(() => {});
+    }).catch(() => {
+      setIdentityProviders([]);
+    });
+  }, [homeserver]);
+
+  if (identityProviders.length === 0) return <></>;
+
+  return (
+    <div className="sso-buttons">
+      <div className="sso-buttons__divider">
+        <Text>OR</Text>
+      </div>
+      <div className="sso-buttons__container">
+        {identityProviders.sort((idp) => !!idp.imageSrc).map((idp) => (
+          <SSOButton
+            key={idp.id}
+            homeserver={idp.homeserver}
+            id={idp.id}
+            name={idp.name}
+            type={idp.type}
+            imageSrc={idp.imageSrc}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function SSOButton({
+  homeserver, id, name, type, imageSrc,
+}) {
+  const isImageAvail = !!imageSrc;
+  function handleClick() {
+    startSsoLogin(homeserver, type, id);
+  }
+  return (
+    <button
+      type="button"
+      className={`sso-btn${!isImageAvail ? ' sso-btn__text-only' : ''}`}
+      onClick={handleClick}
+    >
+      {isImageAvail && <img className="sso-btn__img" src={imageSrc} alt={name} />}
+      {!isImageAvail && <Text>{`Login with ${name}`}</Text>}
+    </button>
+  );
+}
+
+SSOButtons.propTypes = {
+  homeserver: PropTypes.string.isRequired,
+};
+
+SSOButton.propTypes = {
+  homeserver: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  imageSrc: PropTypes.string.isRequired,
+};
+
+export default SSOButtons;

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

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

src/app/organisms/channel/ChannelView.scss

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

src/app/organisms/channel/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 { getUsername } 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={getUsername(member.userId)}
-                    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,6 +1,6 @@
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import './CreateChannel.scss';
+import './CreateRoom.scss';
 
 import initMatrix from '../../../client/initMatrix';
 import { isRoomAliasAvailable } from '../../../util/matrixUtil';
@@ -18,7 +18,7 @@ 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);
@@ -69,10 +69,10 @@ function CreateChannel({ isOpen, onRequestClose }) {
       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);
     }
@@ -110,26 +110,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 && (
@@ -140,26 +140,26 @@ function CreateChannel({ isOpen, onRequestClose }) {
             />
           )}
           <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);
 

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

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

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

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

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

@@ -0,0 +1,74 @@
+import React, { useEffect, useRef } from 'react';
+
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+
+import ContextMenu from '../../atoms/context-menu/ContextMenu';
+import EmojiBoard from './EmojiBoard';
+
+let requestCallback = null;
+let isEmojiBoardVisible = false;
+function EmojiBoardOpener() {
+  const openerRef = useRef(null);
+
+  function openEmojiBoard(cords, requestEmojiCallback) {
+    if (requestCallback !== null || isEmojiBoardVisible) {
+      requestCallback = null;
+      if (cords.detail === 0) openerRef.current.click();
+      return;
+    }
+
+    openerRef.current.style.transform = `translate(${cords.x}px, ${cords.y}px)`;
+    requestCallback = requestEmojiCallback;
+    openerRef.current.click();
+  }
+
+  function afterEmojiBoardToggle(isVisible) {
+    isEmojiBoardVisible = isVisible;
+    if (!isVisible) {
+      setTimeout(() => {
+        if (!isEmojiBoardVisible) requestCallback = null;
+      }, 500);
+    }
+  }
+
+  function addEmoji(emoji) {
+    requestCallback(emoji);
+  }
+
+  useEffect(() => {
+    navigation.on(cons.events.navigation.EMOJIBOARD_OPENED, openEmojiBoard);
+    return () => {
+      navigation.removeListener(cons.events.navigation.EMOJIBOARD_OPENED, openEmojiBoard);
+    };
+  }, []);
+
+  return (
+    <ContextMenu
+      content={(
+        <EmojiBoard onSelect={addEmoji} />
+      )}
+      afterToggle={afterEmojiBoardToggle}
+      render={(toggleMenu) => (
+        <input
+          ref={openerRef}
+          onClick={toggleMenu}
+          type="button"
+          style={{
+            width: '32px',
+            height: '32px',
+            backgroundColor: 'transparent',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            padding: 0,
+            border: 'none',
+            visibility: 'hidden',
+          }}
+        />
+      )}
+    />
+  );
+}
+
+export default EmojiBoardOpener;

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

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

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

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

src/app/organisms/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

@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { selectRoom } from '../../../client/action/navigation';
+import Postie from '../../../util/Postie';
+
+import Selector from './Selector';
+
+import { AtoZ } from './common';
+
+const drawerPostie = new Postie();
+function Directs() {
+  const { roomList, notifications } = initMatrix;
+  const directIds = [...roomList.directs].sort(AtoZ);
+
+  const [, forceUpdate] = useState({});
+
+  function selectorChanged(selectedRoomId, prevSelectedRoomId) {
+    if (!drawerPostie.hasTopic('selector-change')) return;
+    const addresses = [];
+    if (drawerPostie.hasSubscriber('selector-change', selectedRoomId)) addresses.push(selectedRoomId);
+    if (drawerPostie.hasSubscriber('selector-change', prevSelectedRoomId)) addresses.push(prevSelectedRoomId);
+    if (addresses.length === 0) return;
+    drawerPostie.post('selector-change', addresses, selectedRoomId);
+  }
+
+  function notiChanged(roomId, total, prevTotal) {
+    if (total === prevTotal) return;
+    if (drawerPostie.hasTopicAndSubscriber('unread-change', roomId)) {
+      drawerPostie.post('unread-change', roomId);
+    }
+  }
+
+  function roomListUpdated() {
+    const { spaces, rooms, directs } = initMatrix.roomList;
+    if (!(
+      spaces.has(navigation.selectedRoomId)
+      || rooms.has(navigation.selectedRoomId)
+      || directs.has(navigation.selectedRoomId))
+    ) {
+      selectRoom(null);
+    }
+    forceUpdate({});
+  }
+
+  useEffect(() => {
+    roomList.on(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
+    navigation.on(cons.events.navigation.ROOM_SELECTED, selectorChanged);
+    notifications.on(cons.events.notifications.NOTI_CHANGED, notiChanged);
+    return () => {
+      roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
+      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged);
+      notifications.removeListener(cons.events.notifications.NOTI_CHANGED, notiChanged);
+    };
+  }, []);
+
+  return directIds.map((id) => (
+    <Selector
+      key={id}
+      roomId={id}
+      drawerPostie={drawerPostie}
+      onClick={() => selectRoom(id)}
+    />
+  ));
+}
+
+export default Directs;

src/app/organisms/navigation/Drawer.jsx

@@ -1,223 +1,85 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import './Drawer.scss';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
-import { doesRoomHaveUnread } from '../../../util/matrixUtil';
-import {
-  selectRoom, openPublicChannels, openCreateChannel, openInviteUser,
-} from '../../../client/action/navigation';
 import navigation from '../../../client/state/navigation';
+import { selectTab, selectSpace } from '../../../client/action/navigation';
 
-import Header, { TitleWrapper } from '../../atoms/header/Header';
 import Text from '../../atoms/text/Text';
-import IconButton from '../../atoms/button/IconButton';
 import ScrollView from '../../atoms/scroll/ScrollView';
-import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import ChannelSelector from '../../molecules/channel-selector/ChannelSelector';
 
-import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
+import DrawerHeader from './DrawerHeader';
-// import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
+import DrawerBreadcrumb from './DrawerBreadcrumb';
-import HashIC from '../../../../public/res/ic/outlined/hash.svg';
+import Home from './Home';
-import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
+import Directs from './Directs';
-import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
-import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
-import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
-import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
 
-function AtoZ(aId, bId) {
+function Drawer() {
-  let aName = initMatrix.matrixClient.getRoom(aId).name;
+  const [systemState, setSystemState] = useState(null);
-  let bName = initMatrix.matrixClient.getRoom(bId).name;
+  const [selectedTab, setSelectedTab] = useState(navigation.selectedTab);
+  const [spaceId, setSpaceId] = useState(navigation.selectedSpaceId);
 
-  // remove "#" from the room name
+  function onTabSelected(tabId) {
-  // To ignore it in sorting
+    setSelectedTab(tabId);
-  aName = aName.replaceAll('#', '');
-  bName = bName.replaceAll('#', '');
-
-  if (aName.toLowerCase() < bName.toLowerCase()) {
-    return -1;
   }
-  if (aName.toLowerCase() > bName.toLowerCase()) {
+  function onSpaceSelected(roomId) {
-    return 1;
+    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]);
   }
-  return 0;
-}
 
-function DrawerHeader({ tabId }) {
+  function handleSystemState(state) {
-  return (
+    if (state === 'ERROR' || state === 'RECONNECTING' || state === 'STOPPED') {
-    <Header>
+      setSystemState({ status: 'Connection lost!' });
-      <TitleWrapper>
-        <Text variant="s1">{(tabId === 'channels' ? 'Home' : 'Direct messages')}</Text>
-      </TitleWrapper>
-      {(tabId === 'dm')
-        ? <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="normal" />
-        : (
-          <ContextMenu
-            content={(hideMenu) => (
-              <>
-                <MenuHeader>Add channel</MenuHeader>
-                <MenuItem
-                  iconSrc={HashPlusIC}
-                  onClick={() => { hideMenu(); openCreateChannel(); }}
-                >
-                  Create new channel
-                </MenuItem>
-                <MenuItem
-                  iconSrc={HashSearchIC}
-                  onClick={() => { hideMenu(); openPublicChannels(); }}
-                >
-                  Add Public channel
-                </MenuItem>
-              </>
-            )}
-            render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add channel" src={PlusIC} size="normal" />)}
-          />
-        )}
-      {/* <IconButton onClick={() => ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */}
-    </Header>
-  );
-}
-DrawerHeader.propTypes = {
-  tabId: PropTypes.string.isRequired,
-};
-
-function DrawerBradcrumb() {
-  return (
-    <div className="breadcrumb__wrapper">
-      <ScrollView horizontal vertical={false}>
-        <div>
-          {/* TODO: bradcrumb space paths when spaces become a thing */}
-        </div>
-      </ScrollView>
-    </div>
-  );
-}
-
-function renderSelector(room, roomId, isSelected, isDM) {
-  const mx = initMatrix.matrixClient;
-  let imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop');
-  if (typeof imageSrc === 'undefined') imageSrc = null;
-
-  return (
-    <ChannelSelector
-      key={roomId}
-      iconSrc={
-        isDM
-          ? null
-          : (() => {
-            if (room.isSpaceRoom()) {
-              return (room.getJoinRule() === 'invite' ? SpaceLockIC : SpaceIC);
-            }
-            return (room.getJoinRule() === 'invite' ? HashLockIC : HashIC);
-          })()
-      }
-      imageSrc={isDM ? imageSrc : null}
-      roomId={roomId}
-      unread={doesRoomHaveUnread(room)}
-      onClick={() => selectRoom(roomId)}
-      notificationCount={room.getUnreadNotificationCount('total')}
-      alert={room.getUnreadNotificationCount('highlight') !== 0}
-      selected={isSelected}
-    >
-      {room.name}
-    </ChannelSelector>
-  );
-}
-
-function Directs({ selectedRoomId }) {
-  const mx = initMatrix.matrixClient;
-  const directIds = [...initMatrix.roomList.directs].sort(AtoZ);
-
-  return directIds.map((id) => renderSelector(mx.getRoom(id), id, selectedRoomId === id, true));
-}
-Directs.defaultProps = { selectedRoomId: null };
-Directs.propTypes = { selectedRoomId: PropTypes.string };
-
-function Home({ selectedRoomId }) {
-  const mx = initMatrix.matrixClient;
-  const spaceIds = [...initMatrix.roomList.spaces].sort(AtoZ);
-  const roomIds = [...initMatrix.roomList.rooms].sort(AtoZ);
-
-  return (
-    <>
-      { spaceIds.length !== 0 && <Text className="cat-header" variant="b3">Spaces</Text> }
-      { spaceIds.map((id) => renderSelector(mx.getRoom(id), id, selectedRoomId === id, false)) }
-      { roomIds.length !== 0 && <Text className="cat-header" variant="b3">Channels</Text> }
-      { roomIds.map((id) => renderSelector(mx.getRoom(id), id, selectedRoomId === id, false)) }
-    </>
-  );
-}
-Home.defaultProps = { selectedRoomId: null };
-Home.propTypes = { selectedRoomId: PropTypes.string };
-
-function Channels({ tabId }) {
-  const [selectedRoomId, changeSelectedRoomId] = useState(null);
-  const [, updateState] = useState();
-
-  const selectHandler = (roomId) => changeSelectedRoomId(roomId);
-  const handleDataChanges = () => updateState({});
-
-  const onRoomListChange = () => {
-    const { spaces, rooms, directs } = initMatrix.roomList;
-    if (!(
-      spaces.has(selectedRoomId)
-      || rooms.has(selectedRoomId)
-      || directs.has(selectedRoomId))
-    ) {
-      selectRoom(null);
     }
-  };
+    if (systemState !== null) setSystemState(null);
+  }
 
   useEffect(() => {
-    navigation.on(cons.events.navigation.ROOM_SELECTED, selectHandler);
+    navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
-    initMatrix.roomList.on(cons.events.roomList.ROOMLIST_UPDATED, handleDataChanges);
+    navigation.on(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
-
+    initMatrix.roomList.on(cons.events.roomList.ROOM_LEAVED, onRoomLeaved);
     return () => {
-      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectHandler);
+      navigation.removeListener(cons.events.navigation.TAB_SELECTED, onTabSelected);
-      initMatrix.roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, handleDataChanges);
+      navigation.removeListener(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
+      initMatrix.roomList.removeListener(cons.events.roomList.ROOM_LEAVED, onRoomLeaved);
     };
   }, []);
   useEffect(() => {
-    initMatrix.roomList.on(cons.events.roomList.ROOMLIST_UPDATED, onRoomListChange);
+    initMatrix.matrixClient.on('sync', handleSystemState);
-
     return () => {
-      initMatrix.roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, onRoomListChange);
+      initMatrix.matrixClient.removeListener('sync', handleSystemState);
     };
-  }, [selectedRoomId]);
+  }, [systemState]);
 
-  return (
-    <div className="channels-container">
-      {
-        tabId === 'channels'
-          ? <Home selectedRoomId={selectedRoomId} />
-          : <Directs selectedRoomId={selectedRoomId} />
-      }
-    </div>
-  );
-}
-Channels.propTypes = {
-  tabId: PropTypes.string.isRequired,
-};
-
-function Drawer({ tabId }) {
   return (
     <div className="drawer">
-      <DrawerHeader tabId={tabId} />
+      <DrawerHeader 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>
-            <Channels tabId={tabId} />
+            <div className="rooms-container">
+              {
+                selectedTab !== cons.tabs.DIRECTS
+                  ? <Home spaceId={spaceId} />
+                  : <Directs />
+              }
+            </div>
           </ScrollView>
         </div>
       </div>
+      { systemState !== null && (
+        <div className="drawer__state">
+          <Text>{systemState.status}</Text>
+        </div>
+      )}
     </div>
   );
 }
 
-Drawer.propTypes = {
-  tabId: PropTypes.string.isRequired,
-};
-
 export default Drawer;

src/app/organisms/navigation/Drawer.scss

@@ -18,24 +18,60 @@
     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__button-wrapper:first-child {
+  &::before {
+    position: absolute;
+    top: 0;
+    
+    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;
+
+    [dir=rtl] & {
+      margin-left: 0;
+      margin-right: auto;
+    }
+
+  }
+
+  & > .room-selector:first-child {
     margin-top: var(--sp-extra-tight);
   }
 

src/app/organisms/navigation/DrawerBreadcrumb.jsx

@@ -0,0 +1,131 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import './DrawerBreadcrumb.scss';
+
+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' : 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

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import {
+  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';
+import IconButton from '../../atoms/button/IconButton';
+import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
+
+import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
+import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
+import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
+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);
+
+  return (
+    <Header>
+      <TitleWrapper>
+        <Text variant="s1">{spaceName || tabName}</Text>
+      </TitleWrapper>
+      {spaceName && (
+        <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 room</MenuHeader>
+                <MenuItem
+                  iconSrc={HashPlusIC}
+                  onClick={() => { hideMenu(); openCreateRoom(); }}
+                >
+                  Create new room
+                </MenuItem>
+                <MenuItem
+                  iconSrc={HashSearchIC}
+                  onClick={() => { hideMenu(); openPublicRooms(); }}
+                >
+                  Add public room
+                </MenuItem>
+              </>
+            )}
+            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 = {
+  selectedTab: PropTypes.string.isRequired,
+  spaceId: PropTypes.string,
+};
+
+export default DrawerHeader;

src/app/organisms/navigation/Home.jsx

@@ -0,0 +1,116 @@
+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 { selectSpace, selectRoom } from '../../../client/action/navigation';
+import Postie from '../../../util/Postie';
+
+import Text from '../../atoms/text/Text';
+import Selector from './Selector';
+
+import { AtoZ } from './common';
+
+const drawerPostie = new Postie();
+function Home({ spaceId }) {
+  const [, forceUpdate] = useState({});
+  const { roomList, notifications } = initMatrix;
+  let spaceIds = [];
+  let roomIds = [];
+  let directIds = [];
+
+  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', selectedRoomId)) addresses.push(selectedRoomId);
+    if (drawerPostie.hasSubscriber('selector-change', prevSelectedRoomId)) addresses.push(prevSelectedRoomId);
+    if (addresses.length === 0) return;
+    drawerPostie.post('selector-change', addresses, selectedRoomId);
+  }
+  function notiChanged(roomId, total, prevTotal) {
+    if (total === prevTotal) return;
+    if (drawerPostie.hasTopicAndSubscriber('unread-change', roomId)) {
+      drawerPostie.post('unread-change', roomId);
+    }
+  }
+
+  function roomListUpdated() {
+    const { spaces, rooms, directs } = initMatrix.roomList;
+    if (!(
+      spaces.has(navigation.selectedRoomId)
+      || rooms.has(navigation.selectedRoomId)
+      || directs.has(navigation.selectedRoomId))
+    ) {
+      selectRoom(null);
+    }
+    forceUpdate({});
+  }
+
+  useEffect(() => {
+    roomList.on(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
+    navigation.on(cons.events.navigation.ROOM_SELECTED, selectorChanged);
+    notifications.on(cons.events.notifications.NOTI_CHANGED, notiChanged);
+    return () => {
+      roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
+      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged);
+      notifications.removeListener(cons.events.notifications.NOTI_CHANGED, notiChanged);
+    };
+  }, []);
+
+  return (
+    <>
+      { spaceIds.length !== 0 && <Text className="cat-header" variant="b3">Spaces</Text> }
+      { spaceIds.map((id) => (
+        <Selector
+          key={id}
+          roomId={id}
+          isDM={false}
+          drawerPostie={drawerPostie}
+          onClick={() => selectSpace(id)}
+        />
+      ))}
+
+      { 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/Navigation.jsx

@@ -1,34 +1,14 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import './Navigation.scss';
 
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import { handleTabChange } from '../../../client/action/navigation';
-
 import SideBar from './SideBar';
 import Drawer from './Drawer';
 
 function Navigation() {
-  const [activeTab, changeActiveTab] = useState(navigation.getActiveTab());
-
-  function changeTab(tabId) {
-    handleTabChange(tabId);
-  }
-
-  useEffect(() => {
-    const handleTab = () => {
-      changeActiveTab(navigation.getActiveTab());
-    };
-    navigation.on(cons.events.navigation.TAB_CHANGED, handleTab);
-
-    return () => {
-      navigation.removeListener(cons.events.navigation.TAB_CHANGED, handleTab);
-    };
-  }, []);
   return (
     <div className="navigation">
-      <SideBar tabId={activeTab} changeTab={changeTab} />
+      <SideBar />
-      <Drawer tabId={activeTab} />
+      <Drawer />
     </div>
   );
 }

src/app/organisms/navigation/Selector.jsx

@@ -0,0 +1,116 @@
+/* eslint-disable react/prop-types */
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import initMatrix from '../../../client/initMatrix';
+import navigation from '../../../client/state/navigation';
+import { openRoomOptions } from '../../../client/action/navigation';
+import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room';
+import { getEventCords, abbreviateNumber } from '../../../util/common';
+
+import IconButton from '../../atoms/button/IconButton';
+import RoomSelector from '../../molecules/room-selector/RoomSelector';
+
+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, onClick,
+}) {
+  const mx = initMatrix.matrixClient;
+  const noti = initMatrix.notifications;
+  const room = mx.getRoom(roomId);
+  let imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
+  if (imageSrc === null) imageSrc = room.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
+
+  const [isSelected, setIsSelected] = useState(navigation.selectedRoomId === roomId);
+  const [, forceUpdate] = useState({});
+
+  function selectorChanged(selectedRoomId) {
+    setIsSelected(selectedRoomId === roomId);
+  }
+  function changeNotificationBadge() {
+    forceUpdate({});
+  }
+
+  useEffect(() => {
+    drawerPostie.subscribe('selector-change', roomId, selectorChanged);
+    drawerPostie.subscribe('unread-change', roomId, changeNotificationBadge);
+    return () => {
+      drawerPostie.unsubscribe('selector-change', roomId);
+      drawerPostie.unsubscribe('unread-change', roomId);
+    };
+  }, []);
+
+  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 (
+    <RoomSelector
+      key={roomId}
+      name={room.name}
+      roomId={roomId}
+      imageSrc={isDM ? imageSrc : null}
+      // eslint-disable-next-line no-nested-ternary
+      iconSrc={isDM ? null : room.getJoinRule() === 'invite' ? HashLockIC : HashIC}
+      isSelected={isSelected}
+      isUnread={noti.hasNoti(roomId)}
+      notificationCount={abbreviateNumber(noti.getTotalNoti(roomId))}
+      isAlert={noti.getHighlightNoti(roomId) !== 0}
+      onClick={onClick}
+      options={(
+        <IconButton
+          size="extra-small"
+          tooltip="Options"
+          tooltipPlacement="right"
+          src={VerticalMenuIC}
+          onClick={(e) => openRoomOptions(getEventCords(e), roomId)}
+        />
+      )}
+    />
+  );
+}
+
+Selector.defaultProps = {
+  isDM: true,
+};
+
+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

@@ -1,12 +1,15 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import './SideBar.scss';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import colorMXID from '../../../util/colorMXID';
 import logout from '../../../client/action/logout';
-import { openInviteList, openPublicChannels, openSettings } from '../../../client/action/navigation';
+import {
+  selectTab, openInviteList, openPublicRooms, openSettings,
+} from '../../../client/action/navigation';
+import navigation from '../../../client/state/navigation';
+import { abbreviateNumber } from '../../../util/common';
 
 import ScrollView from '../../atoms/scroll/ScrollView';
 import SidebarAvatar from '../../molecules/sidebar-avatar/SidebarAvatar';
@@ -21,6 +24,28 @@ 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
@@ -42,53 +67,138 @@ 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.slice(0, 1)}
         />
       )}
     />
   );
 }
 
-function SideBar({ tabId, changeTab }) {
+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 [selectedTab, setSelectedTab] = useState(navigation.selectedTab);
+  const [, forceUpdate] = useState({});
 
+  function onTabSelected(tabId) {
+    setSelectedTab(tabId);
+  }
   function onInviteListChange() {
     updateTotalInvites(totalInviteCount());
   }
+  function onSpaceShortcutUpdated() {
+    forceUpdate({});
+  }
+  function onNotificationChanged(roomId, total, prevTotal) {
+    if (total === prevTotal) return;
+    forceUpdate({});
+  }
 
   useEffect(() => {
-    initMatrix.roomList.on(
+    navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
-      cons.events.roomList.INVITELIST_UPDATED,
+    roomList.on(cons.events.roomList.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
-      onInviteListChange,
+    roomList.on(cons.events.roomList.INVITELIST_UPDATED, onInviteListChange);
-    );
+    notifications.on(cons.events.notifications.NOTI_CHANGED, onNotificationChanged);
 
     return () => {
-      initMatrix.roomList.removeListener(
+      navigation.removeListener(cons.events.navigation.TAB_SELECTED, onTabSelected);
-        cons.events.roomList.INVITELIST_UPDATED,
+      roomList.removeListener(cons.events.roomList.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
-        onInviteListChange,
+      roomList.removeListener(cons.events.roomList.INVITELIST_UPDATED, onInviteListChange);
-      );
+      notifications.removeListener(cons.events.notifications.NOTI_CHANGED, onNotificationChanged);
     };
   }, []);
 
+  function getHomeNoti() {
+    const orphans = roomList.getOrphans();
+    let noti = null;
+
+    orphans.forEach((roomId) => {
+      if (!notifications.hasNoti(roomId)) return;
+      if (noti === null) noti = { total: 0, highlight: 0 };
+      const childNoti = notifications.getNoti(roomId);
+      noti.total += childNoti.total;
+      noti.highlight += childNoti.highlight;
+    });
+
+    return noti;
+  }
+  function getDMsNoti() {
+    if (roomList.directs.size === 0) return null;
+    let noti = null;
+
+    [...roomList.directs].forEach((roomId) => {
+      if (!notifications.hasNoti(roomId)) return;
+      if (noti === null) noti = { total: 0, highlight: 0 };
+      const childNoti = notifications.getNoti(roomId);
+      noti.total += childNoti.total;
+      noti.highlight += childNoti.highlight;
+    });
+
+    return noti;
+  }
+
+  // TODO: bellow operations are heavy.
+  // refactor this component into more smaller components.
+  const dmsNoti = getDMsNoti();
+  const homeNoti = getHomeNoti();
+
   return (
     <div className="sidebar">
       <div className="sidebar__scrollable">
         <ScrollView invisible>
           <div className="scrollable-content">
             <div className="featured-container">
-              <SidebarAvatar active={tabId === 'channels'} onClick={() => changeTab('channels')} tooltip="Home" iconSrc={HomeIC} />
+              <SidebarAvatar
-              <SidebarAvatar active={tabId === 'dm'} onClick={() => changeTab('dm')} 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}
+              />
+              <SidebarAvatar onClick={() => openPublicRooms()} tooltip="Public rooms" iconSrc={HashSearchIC} />
             </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.slice(0, 1)}
+                      isUnread={notifications.hasNoti(sRoomId)}
+                      notificationCount={abbreviateNumber(notifications.getTotalNoti(sRoomId))}
+                      isAlert={notifications.getHighlightNoti(sRoomId) !== 0}
+                      onClick={() => selectTab(shortcut)}
+                    />
+                  );
+                })
+              }
+            </div>
           </div>
         </ScrollView>
       </div>
@@ -97,7 +207,9 @@ function SideBar({ tabId, changeTab }) {
         <div className="sticky-container">
           { totalInvites !== 0 && (
             <SidebarAvatar
-              notifyCount={totalInvites}
+              isUnread
+              notificationCount={totalInvites}
+              isAlert
               onClick={() => openInviteList()}
               tooltip="Invites"
               iconSrc={InviteIC}
@@ -110,9 +222,4 @@ function SideBar({ tabId, changeTab }) {
   );
 }
 
-SideBar.propTypes = {
-  tabId: PropTypes.string.isRequired,
-  changeTab: PropTypes.func.isRequired,
-};
-
 export default SideBar;

src/app/organisms/navigation/SideBar.scss

@@ -39,13 +39,12 @@
     height: 8px;
 
     background: transparent;
-    // background-image: linear-gradient(to top,  var(--bg-surface-low), transparent);
+    background-image: linear-gradient(
-    // It produce bug in safari
+      to top,
-    // To fix it, we have to set the color as a fully transparent version of that exact color. like:
+      var(--bg-surface-low),
-    // background-image: linear-gradient(to top,  rgb(255, 255, 255), rgba(255, 255, 255, 0));
+      var(--bg-surface-low-transparent));
-    // TODO: fix this bug while implementing spaces
     position: sticky;
-    bottom: 0;
+    bottom: -1px;
     left: 0;
   }
 }

src/app/organisms/navigation/common.js

@@ -0,0 +1,21 @@
+import initMatrix from '../../../client/initMatrix';
+
+function AtoZ(aId, bId) {
+  let aName = initMatrix.matrixClient.getRoom(aId).name;
+  let bName = initMatrix.matrixClient.getRoom(bId).name;
+
+  // remove "#" from the room name
+  // To ignore it in sorting
+  aName = aName.replaceAll('#', '');
+  bName = bName.replaceAll('#', '');
+
+  if (aName.toLowerCase() < bName.toLowerCase()) {
+    return -1;
+  }
+  if (aName.toLowerCase() > bName.toLowerCase()) {
+    return 1;
+  }
+  return 0;
+}
+
+export { AtoZ };