Release v2.2.2

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

.github/renovate.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base",
+    ":dependencyDashboardApproval"
+  ],
+  "labels": [ "Dependencies" ],
+  "packageRules": [
+    {
+    "matchUpdateTypes": [ "lockFileMaintenance" ]
+    }
+  ],
+  "lockFileMaintenance": { "enabled": true },
+  "dependencyDashboard": true
+}

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

@@ -6,6 +6,7 @@ on:
 
 jobs:
   build-pull-request:
+    name: 'Build pull request'
     runs-on: ubuntu-latest
     env:
       PR_NUMBER: ${{github.event.number}}
@@ -16,23 +17,22 @@ jobs:
         uses: actions/setup-node@v3.4.1
         with:
           node-version: 17.9.0
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
       - name: Build app
-        run: npm ci && npm run build
+        run: npm run build
       - name: Upload artifact
         uses: actions/upload-artifact@v3.1.0
         with:
-          name: previewbuild
+          name: preview
           path: dist
           retention-days: 1
-      - name: Get PR info
-        uses: actions/github-script@v6.1.0
-        with:
-          script: |
-            var fs = require('fs');
-            fs.writeFileSync('${{github.workspace}}/pr.json', JSON.stringify(context.payload.pull_request));
-      - name: Upload PR Info
+      - name: Save pr number
+        run: echo ${PR_NUMBER} > ./pr.txt
+      - name: Upload pr number
         uses: actions/upload-artifact@v3.1.0
         with:
-          name: pr.json
-          path: pr.json
-          retention-days: 1
+          name: pr
+          path: ./pr.txt
+          retention-days: 1

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

@@ -1,68 +1,40 @@
-name: Upload Preview Build to Netlify
+name: Deploy PR to Netlify
 on:
   workflow_run:
       workflows: ["Build pull request"]
-      types:
-        - completed
+      types: [completed]
 jobs:
-  get-build-and-deploy:
+  deploy-pull-request:
+    name: 'Deploy pull request'
+    runs-on: ubuntu-latest
     permissions:
       contents: read
       pull-requests: write
-    runs-on: ubuntu-latest
-    if: >
-      ${{ github.event.workflow_run.conclusion == 'success' }}
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
     steps:
-      # There's a 'download artifact' action but it hasn't been updated for the
-      # workflow_run action (https://github.com/actions/download-artifact/issues/60)
-      # so instead we get this mess:
+      - name: Download pr number
+        uses: dawidd6/action-download-artifact@7847792dd435a50521b8e3bd3576dae7459d1fa8
+        with:
+          workflow: ${{ github.event.workflow.id }}
+          run_id: ${{ github.event.workflow_run.id }}
+          name: pr
+      - name: Output pr number
+        id: pr
+        run: echo "::set-output name=id::$(<pr.txt)"
       - name: Download artifact
-        uses: actions/github-script@v6.1.0
+        uses: dawidd6/action-download-artifact@7847792dd435a50521b8e3bd3576dae7459d1fa8
         with:
-          script: |
-            var artifacts = await github.rest.actions.listWorkflowRunArtifacts({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              run_id: ${{github.event.workflow_run.id }},
-            });
-            var matchArtifact = artifacts.data.artifacts.filter((artifact) => {
-              return artifact.name == "previewbuild"
-            })[0];
-            var download = await github.rest.actions.downloadArtifact({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              artifact_id: matchArtifact.id,
-              archive_format: 'zip',
-            });
-            var fs = require('fs');
-            fs.writeFileSync('${{github.workspace}}/previewbuild.zip', Buffer.from(download.data));
-            var prInfoArtifact = artifacts.data.artifacts.filter((artifact) => {
-              return artifact.name == "pr.json"
-            })[0];
-            var download = await github.rest.actions.downloadArtifact({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              artifact_id: prInfoArtifact.id,
-              archive_format: 'zip',
-            });
-            var fs = require('fs');
-            fs.writeFileSync('${{github.workspace}}/pr.json.zip', Buffer.from(download.data));
-      - name: Extract Artifacts
-        run: unzip -d dist previewbuild.zip && rm previewbuild.zip && unzip pr.json.zip && rm pr.json.zip
-      - name: Read PR Info
-        id: readctx
-        uses: actions/github-script@v6.1.0
-        with:
-          script: |
-            var fs = require('fs');
-            var pr = JSON.parse(fs.readFileSync('${{github.workspace}}/pr.json'));
-            console.log(`::set-output name=prnumber::${pr.number}`);
+          workflow: ${{ github.event.workflow.id }}
+          run_id: ${{ github.event.workflow_run.id }}
+          name: preview
+          path: dist
       - name: Deploy to Netlify
         id: netlify
         uses: nwtgck/actions-netlify@b7c1504e00c6b8a249d1848cc1b522a4865eed99
         with:
           publish-dir: dist
-          deploy-message: "Deploy from GitHub Actions"
+          deploy-message: "Deploy PR ${{ steps.pr.outputs.id }}"
+          alias: ${{ steps.pr.outputs.id }}
           # These don't work because we're in workflow_run
           enable-pull-request-comment: false
           enable-commit-comment: false
@@ -75,7 +47,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          pull-request-number: ${{ steps.readctx.outputs.prnumber }}
+          pull-request-number: ${{ steps.pr.outputs.id }}
           description-message: |
               Preview: ${{ steps.netlify.outputs.deploy-url }}
-              ⚠️ Exercise caution. Use test accounts. ⚠️
+              ⚠️ Exercise caution. Use test accounts. ⚠️

.github/workflows/docker-pr.yml

@@ -9,8 +9,6 @@ on:
 jobs:
   docker-build:
     runs-on: ubuntu-latest
-    env:
-      PR_NUMBER: ${{github.event.number}}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2

.github/workflows/lockfile.yml

@@ -0,0 +1,26 @@
+name: NPM Lockfile Changes
+
+on:
+  pull_request:
+    paths:
+      - 'package-lock.json'
+
+jobs:
+  lockfile_changes:
+    runs-on: ubuntu-latest
+    # Permission overwrite is required for Dependabot PRs, see "Common issues" below.
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3.0.2
+      - name: NPM Lockfile Changes
+        uses: codepunkt/npm-lockfile-changes@b40543471c36394409466fdb277a73a0856d7891
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          # Optional inputs, can be deleted safely if you are happy with default values.
+          collapsibleThreshold: 25
+          failOnDowngrade: false
+          path: package-lock.json
+          updateComment: true

.github/workflows/netlify-dev.yml

@@ -7,10 +7,8 @@ on:
 
 jobs:
   deploy-to-netlify:
-    name: 'Deploy'
+    name: 'Deploy to Netlify'
     runs-on: ubuntu-latest
-    permissions:
-      contents: read
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2
@@ -18,12 +16,22 @@ jobs:
         uses: actions/setup-node@v3.4.1
         with:
           node-version: 17.9.0
-      - name: Build and deploy to Netlify
-        uses: jsmrcaga/action-netlify-deploy@53de32e559b0b3833615b9788c7a090cd2fddb03
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build app
+        run: npm run build
+      - name: Deploy to Netlify
+        uses: nwtgck/actions-netlify@b7c1504e00c6b8a249d1848cc1b522a4865eed99
         with:
-          install_command: "npm ci"
+          publish-dir: dist
+          deploy-message: "Dev deploy ${{ github.sha }}"
+          enable-commit-comment: false
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          production-deploy: true
+          github-deployment-environment: nightly
+          github-deployment-description: 'Nightly deployment on each commit to dev branch'
+        env:
           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
+        timeout-minutes: 1

.github/workflows/prod-deploy.yml

@@ -5,8 +5,8 @@ on:
     types: [published]
 
 jobs:
-  create-release-tar:
-    name: 'Create release tar'
+  deploy-and-tarball:
+    name: 'Netlify deploy and tarball'
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -15,10 +15,25 @@ jobs:
         uses: actions/setup-node@v3.4.1
         with:
           node-version: 17.9.0
-      - name: Build
-        run: |
-          npm ci
-          npm run build
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build app
+        run: npm run build
+      - name: Deploy to Netlify
+        uses: nwtgck/actions-netlify@b7c1504e00c6b8a249d1848cc1b522a4865eed99
+        with:
+          publish-dir: dist
+          deploy-message: "Prod deploy ${{ github.ref_name }}"
+          enable-commit-comment: false
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          production-deploy: true
+          github-deployment-environment: stable
+          github-deployment-description: 'Stable deployment on each release'
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+        timeout-minutes: 1
       - name: Get version from tag
         id: vars
         run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
@@ -41,33 +56,12 @@ jobs:
             cinny-${{ steps.vars.outputs.tag }}.tar.gz
             cinny-${{ steps.vars.outputs.tag }}.tar.gz.asc
 
-  deploy-to-netlify:
-    name: 'Deploy to Netlify'
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3.0.2
-      - name: Setup node
-        uses: actions/setup-node@v3.4.1
-        with:
-          node-version: 17.9.0
-      - name: Build and deploy to Netlify
-        uses: jsmrcaga/action-netlify-deploy@53de32e559b0b3833615b9788c7a090cd2fddb03
-        with:
-          install_command: "npm ci"
-          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
-
-  push-to-dockerhub:
-    name: Push Docker image to Docker Hub
+  publish-image:
+    name: Push Docker image to Docker Hub, ghcr
     runs-on: ubuntu-latest
     permissions:
       contents: read
+      packages: write
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2
@@ -80,11 +74,19 @@ jobs:
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Login to the Container registry
+        uses: docker/login-action@v2.0.0
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
       - name: Extract metadata (tags, labels) for Docker
         id: meta
         uses: docker/metadata-action@v4.0.1
         with:
-          images: ajbura/cinny
+          images: |
+            ${{ secrets.DOCKER_USERNAME }}/cinny
+            ghcr.io/${{ github.repository }}
       - name: Build and push Docker image
         uses: docker/build-push-action@v3.1.1
         with:

.npmrc

@@ -0,0 +1,3 @@
+legacy-peer-deps=true
+save-exact=true
+@matrix-org:registry=https://gitlab.matrix.org/api/v4/projects/27/packages/npm/

CONTRIBUTING.md

@@ -36,4 +36,9 @@ It is not always possible to phrase every change in such a manner, but it is des
 
 Also, we use [ESLint](https://eslint.org/) for clean and stylistically consistent code syntax, so make sure your pull request follow it.
 
-**For any query or design discussion, join our [Matrix room](https://matrix.to/#/#cinny:matrix.org).**
+**For any query or design discussion, join our [Matrix room](https://matrix.to/#/#cinny:matrix.org).**
+
+## Helpful links
+- [BEM methodology](http://getbem.com/introduction/)
+- [Atomic design](https://bradfrost.com/blog/post/atomic-web-design/)
+- [Matrix JavaScript SDK documentation](https://matrix-org.github.io/matrix-js-sdk/index.html)

Dockerfile

@@ -3,7 +3,7 @@ FROM node:17.9.0-alpine3.15 as builder
 
 WORKDIR /src
 
-COPY package.json package-lock.json /src/
+COPY .npmrc package.json package-lock.json /src/
 RUN npm ci
 COPY . /src/
 RUN npm run build

LICENSE

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

README.md

@@ -1,9 +1,5 @@
-<p align="center">
-    <img src="https://raw.githubusercontent.com/ajbura/cinny/dev/public/res/svg/cinny.svg?sanitize=true"
-        height="16">
-    <span><b>Cinny</b></span>
-</p>
-<p align="center">
+# Cinny
+<p>
     <a href="https://github.com/ajbura/cinny/releases">
         <img alt="GitHub release downloads" src="https://img.shields.io/github/downloads/ajbura/cinny/total?logo=github&style=social"></a>
     <a href="https://hub.docker.com/r/ajbura/cinny">
@@ -16,21 +12,30 @@
         <img alt="Sponsor Cinny" src="https://img.shields.io/opencollective/all/cinny?logo=opencollective&style=social"></a>
 </p>
 
-**Cinny** is a Matrix client focusing primarily on simple, elegant and secure interface. The main goal is to have a client that is easy on end user 
-and feels a modern chat application.
-
-- [Contributing](./CONTRIBUTING.md)
+A Matrix client focusing primarily on simple, elegant and secure interface. The main goal is to have an instant messaging application that is easy on people and has a modern touch.
 - [Roadmap](https://github.com/ajbura/cinny/projects/11)
+- [Contributing](./CONTRIBUTING.md)
 
-## Building and Running
+## Getting started
+Web app is available at https://app.cinny.in and gets updated on each new release. The `dev` branch is continuously deployed at https://dev.cinny.in but keep in mind that it could have things broken.
 
-### Running pre-compiled
+You can also download our desktop app from [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).
 
-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.
+To host Cinny on your own, download tarball of the app from [GitHub release](https://github.com/cinnyapp/cinny/releases/latest).
+You can serve the application with a webserver of your choice by simply copying `dist/` directory to the webroot. 
+To set default Homeserver on login and register page, place a customized [`config.json`](config.json) in webroot of your choice.
+
+Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by:
+```
+docker pull ajbura/cinny
+```
+or [ghcr image](https://github.com/cinnyapp/cinny/pkgs/container/cinny) by:
+```
+docker pull ghcr.io/cinnyapp/cinny:latest
+```
 
 <details>
-<summary>PGP Public Key to verify pre-compiled tarball</summary>
+<summary>PGP Public Key to verify tarball</summary>
 
 ```
 -----BEGIN PGP PUBLIC KEY BLOCK-----
@@ -77,48 +82,39 @@ UeGsouhyuITLwEhScounZDqop+Dx
 ```
 </details>
 
-### Building from source
+## Local development
 > We recommend using a version manager as versions change very quickly. You will likely need to switch 
 between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Also recommended nodejs version is 16.15.0 LTS.
 
-Execute the following commands to compile the app from its source code:
-
+Execute the following commands to start a development server:
 ```sh
 npm ci # Installs all dependencies
+npm start # Serve a development version
+```
+
+To build the app:
+```sh
 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 need to 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`.
+This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by navigating to `http://localhost:8080`.
 
-Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by `docker pull ajbura/cinny`.
-
-### Configuring default Homeserver
-
-To set default Homeserver on login and register page, place a customized [`config.json`](config.json) in webroot of your choice.
 
 ## License
 
-Copyright (c) 2021 Ajay Bura (ajbura)
+Copyright (c) 2021-present Ajay Bura (ajbura)
 
 Code licensed under the MIT License: <http://opensource.org/licenses/MIT>
 

package.json

@@ -1,11 +1,11 @@
 {
   "name": "cinny",
-  "version": "2.1.2",
+  "version": "2.2.2",
   "description": "Yet another matrix client",
   "main": "index.js",
   "engines": {
-    "npm": ">=6.14.8 <=8.5.5",
-    "node": ">=14.15.0 <=17.9.0"
+    "npm": ">=6.14.8",
+    "node": ">=14.15.0"
   },
   "scripts": {
     "start": "webpack serve --config ./webpack.dev.js --open",
@@ -15,76 +15,69 @@
   "author": "Ajay Bura",
   "license": "MIT",
   "dependencies": {
-    "@fontsource/inter": "^4.5.12",
-    "@fontsource/roboto": "^4.5.8",
-    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
-    "@tippyjs/react": "^4.2.6",
-    "babel-polyfill": "^6.26.0",
-    "blurhash": "^1.1.5",
-    "browser-encrypt-attachment": "^0.3.0",
-    "dateformat": "^5.0.3",
-    "emojibase-data": "^7.0.1",
-    "file-saver": "^2.0.5",
-    "flux": "^4.0.3",
-    "formik": "^2.2.9",
-    "html-react-parser": "^3.0.1",
-    "katex": "^0.16.0",
-    "linkify-html": "^4.0.0-beta.5",
-    "linkifyjs": "^4.0.0-beta.5",
-    "matrix-js-sdk": "^19.2.0",
-    "micromark": "^3.0.10",
-    "micromark-extension-gfm": "^2.0.1",
-    "micromark-extension-math": "^2.0.2",
-    "micromark-util-chunked": "^1.0.0",
-    "micromark-util-resolve-all": "^1.0.0",
-    "micromark-util-symbol": "^1.0.1",
-    "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-autosize-textarea": "^7.1.0",
-    "react-blurhash": "^0.1.3",
-    "react-dnd": "^15.1.2",
-    "react-dnd-html5-backend": "^15.1.3",
-    "react-dom": "^17.0.2",
-    "react-google-recaptcha": "^2.1.0",
-    "react-modal": "^3.15.1",
-    "sanitize-html": "^2.7.1",
-    "tippy.js": "^6.3.7",
-    "twemoji": "^14.0.2"
+    "@fontsource/inter": "4.5.12",
+    "@fontsource/roboto": "4.5.8",
+    "@khanacademy/simple-markdown": "0.8.4",
+    "@matrix-org/olm": "3.2.12",
+    "@tippyjs/react": "4.2.6",
+    "babel-polyfill": "6.26.0",
+    "blurhash": "2.0.0",
+    "browser-encrypt-attachment": "0.3.0",
+    "dateformat": "5.0.3",
+    "emojibase-data": "7.0.1",
+    "file-saver": "2.0.5",
+    "flux": "4.0.3",
+    "formik": "2.2.9",
+    "html-react-parser": "3.0.4",
+    "katex": "0.16.2",
+    "linkify-html": "4.0.0",
+    "linkifyjs": "4.0.0",
+    "matrix-js-sdk": "20.0.0",
+    "prop-types": "15.8.1",
+    "react": "17.0.2",
+    "react-autosize-textarea": "7.1.0",
+    "react-blurhash": "0.1.3",
+    "react-dnd": "15.1.2",
+    "react-dnd-html5-backend": "15.1.3",
+    "react-dom": "17.0.2",
+    "react-google-recaptcha": "2.1.0",
+    "react-modal": "3.15.1",
+    "sanitize-html": "2.7.2",
+    "tippy.js": "6.3.7",
+    "twemoji": "14.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.10",
-    "@babel/preset-env": "^7.18.10",
-    "@babel/preset-react": "^7.18.6",
-    "assert": "^2.0.0",
-    "babel-loader": "^8.2.5",
-    "browserify-fs": "^1.0.0",
-    "buffer": "^6.0.3",
-    "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^11.0.0",
-    "crypto-browserify": "^3.12.0",
-    "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^4.0.0",
-    "eslint": "^8.21.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.30.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "favicons": "^6.2.2",
-    "favicons-webpack-plugin": "^5.0.2",
-    "html-loader": "^4.1.0",
-    "html-webpack-plugin": "^5.3.1",
-    "mini-css-extract-plugin": "^2.6.1",
-    "path-browserify": "^1.0.1",
-    "sass": "^1.54.3",
-    "sass-loader": "^13.0.2",
-    "stream-browserify": "^3.0.0",
-    "style-loader": "^3.3.1",
-    "url": "^0.11.0",
-    "util": "^0.12.4",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.9.3",
-    "webpack-merge": "^5.7.3"
+    "@babel/core": "7.19.1",
+    "@babel/preset-env": "7.19.1",
+    "@babel/preset-react": "7.18.6",
+    "assert": "2.0.0",
+    "babel-loader": "8.2.5",
+    "browserify-fs": "1.0.0",
+    "buffer": "6.0.3",
+    "clean-webpack-plugin": "4.0.0",
+    "copy-webpack-plugin": "11.0.0",
+    "crypto-browserify": "3.12.0",
+    "css-loader": "6.7.1",
+    "css-minimizer-webpack-plugin": "4.1.0",
+    "eslint": "8.24.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jsx-a11y": "6.6.1",
+    "eslint-plugin-react": "7.31.8",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "html-loader": "4.2.0",
+    "html-webpack-plugin": "5.5.0",
+    "mini-css-extract-plugin": "2.6.1",
+    "path-browserify": "1.0.1",
+    "sass": "1.55.0",
+    "sass-loader": "13.0.2",
+    "stream-browserify": "3.0.0",
+    "style-loader": "3.3.1",
+    "url": "0.11.0",
+    "util": "0.12.4",
+    "webpack": "5.74.0",
+    "webpack-cli": "4.10.0",
+    "webpack-dev-server": "4.11.1",
+    "webpack-merge": "5.8.0"
   }
 }

public/index.html

@@ -15,6 +15,28 @@
     <meta property="og:image"       content="https://cinny.in/assets/favicon-48x48.png">
     <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">
+
+
+    <link id="favicon" rel="shortcut icon" href="./favicon.ico" />
+
+    <link rel="manifest" href="./manifest.json" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="application-name" content="Cinny" />
+    <meta name="apple-mobile-web-app-title" content="Cinny" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+
+    <link rel="apple-touch-icon" sizes="57x57" href="./res/apple/apple-touch-icon-57x57.png"/>
+    <link rel="apple-touch-icon" sizes="60x60" href="./res/apple/apple-touch-icon-60x60.png"/>
+    <link rel="apple-touch-icon" sizes="72x72" href="./res/apple/apple-touch-icon-72x72.png"/>
+    <link rel="apple-touch-icon" sizes="76x76" href="./res/apple/apple-touch-icon-76x76.png"/>
+    <link rel="apple-touch-icon" sizes="114x114" href="./res/apple/apple-touch-icon-114x114.png"/>
+    <link rel="apple-touch-icon" sizes="120x120" href="./res/apple/apple-touch-icon-120x120.png"/>
+    <link rel="apple-touch-icon" sizes="144x144" href="./res/apple/apple-touch-icon-144x144.png"/>
+    <link rel="apple-touch-icon" sizes="152x152" href="./res/apple/apple-touch-icon-152x152.png"/>
+    <link rel="apple-touch-icon" sizes="167x167" href="./res/apple/apple-touch-icon-167x167.png"/>
+    <link rel="apple-touch-icon" sizes="180x180" href="./res/apple/apple-touch-icon-180x180.png"/>
+
 </head>
 <body id="appBody">
     <div id="root"></div>

public/manifest.json

@@ -0,0 +1,59 @@
+{
+  "name": "Cinny",
+  "short_name": "Cinny",
+  "description": "Yet another matrix client",
+  "dir": "auto",
+  "lang": "en-US",
+  "display": "standalone",
+  "orientation": "portrait",
+  "start_url": "/",
+  "background_color": "#fff",
+  "theme_color": "#fff",
+  "icons": [
+    {
+      "src": "android-chrome-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

public/res/README.md

@@ -1,4 +1,4 @@
-Graphics (c) by Ajay Bura (ajbura)
+Copyright (c) 2021-present Ajay Bura (ajbura)
 
 Graphic content is licensed under a
 Creative Commons Attribution 4.0 International License.

public/res/ic/outlined/external.svg

@@ -1,12 +1,4 @@
-<?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="14,3 14,5 17.8,5 12.9,9.9 14.3,11.3 19,6.6 19,10.2 21,10.2 21,3 	"/>
-	<path d="M3,10.2h2V5h5V3H5C3.9,3,3,3.9,3,5V10.2z"/>
-	<path d="M5,14.2H3V19c0,1.1,0.9,2,2,2h5v-2H5V14.2z"/>
-	<path d="M19,19h-5v2h5c1.1,0,2-0.9,2-2v-4.8h-2V19z"/>
-</g>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 3V5H17.8L12.9 9.9L14.3 11.3L19 6.6V10.2H21V3H14Z" fill="black"/>
+<path d="M5 5H10V3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V14.2H19V19H5V5Z" fill="black"/>
 </svg>

public/res/svg/cinny-highlight.svg

@@ -0,0 +1,13 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2707_1961)">
+<path d="M10.5867 17.3522C10.0727 17.4492 9.54226 17.5 9 17.5C4.30558 17.5 0.5 13.6944 0.5 9C0.5 4.30558 4.30558 0.5 9 0.5C13.6944 0.5 17.5 4.30558 17.5 9C17.5 9.54226 17.4492 10.0727 17.3522 10.5867C16.6511 10.2123 15.8503 10 15 10C12.2386 10 10 12.2386 10 15C10 15.8503 10.2123 16.6511 10.5867 17.3522Z" fill="white"/>
+<path d="M10 6.39999C10 6.67614 9.77614 6.89999 9.5 6.89999C9.22386 6.89999 9 6.67614 9 6.39999C9 6.12385 9.22386 5.89999 9.5 5.89999C9.77614 5.89999 10 6.12385 10 6.39999Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C4 0 0 4 0 9C0 14 4 18 9 18C9.63967 18 10.263 17.9345 10.8636 17.8099C10.3186 17.0091 10 16.0417 10 15C10 12.2386 12.2386 10 15 10C16.0417 10 17.0091 10.3186 17.8099 10.8636C17.9345 10.263 18 9.63967 18 9C18 4 14 0 9 0ZM1.2 10.8L4.7 8.5V8.2C4.7 6.4 6 5 7.8 4.8H8.2C9.4 4.8 10.5 5.4 11.1 6.4C11.4 6.3 11.7 6.3 12 6.3C12.4 6.3 12.8 6.3 13.2 6.4C13.9 6.6 14.6 6.9 15.2 7.3C14.6 7.1 14 7 13.3 7C12.1 7 11.1 7.4 10.4 8.4C9.7 9.3 9.3 10.4 9.3 11.6C9.3 13.1 8.9 14.5 8 15.8C7.93744 15.8834 7.87923 15.9625 7.82356 16.0381C7.6123 16.325 7.43739 16.5626 7.2 16.8C4.2 16.1 1.9 13.8 1.2 10.8Z" fill="black"/>
+<path d="M18 15C18 16.6569 16.6569 18 15 18C13.3431 18 12 16.6569 12 15C12 13.3431 13.3431 12 15 12C16.6569 12 18 13.3431 18 15Z" fill="#45B83B"/>
+</g>
+<defs>
+<clipPath id="clip0_2707_1961">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/res/svg/cinny-unread.svg

@@ -0,0 +1,13 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2707_2015)">
+<path d="M10.5867 17.3522C10.0727 17.4492 9.54226 17.5 9 17.5C4.30558 17.5 0.5 13.6944 0.5 9C0.5 4.30558 4.30558 0.5 9 0.5C13.6944 0.5 17.5 4.30558 17.5 9C17.5 9.54226 17.4492 10.0727 17.3522 10.5867C16.6511 10.2123 15.8503 10 15 10C12.2386 10 10 12.2386 10 15C10 15.8503 10.2123 16.6511 10.5867 17.3522Z" fill="white"/>
+<path d="M10 6.39999C10 6.67614 9.77614 6.89999 9.5 6.89999C9.22386 6.89999 9 6.67614 9 6.39999C9 6.12385 9.22386 5.89999 9.5 5.89999C9.77614 5.89999 10 6.12385 10 6.39999Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C4 0 0 4 0 9C0 14 4 18 9 18C9.63967 18 10.263 17.9345 10.8636 17.8099C10.3186 17.0091 10 16.0417 10 15C10 12.2386 12.2386 10 15 10C16.0417 10 17.0091 10.3186 17.8099 10.8636C17.9345 10.263 18 9.63967 18 9C18 4 14 0 9 0ZM1.2 10.8L4.7 8.5V8.2C4.7 6.4 6 5 7.8 4.8H8.2C9.4 4.8 10.5 5.4 11.1 6.4C11.4 6.3 11.7 6.3 12 6.3C12.4 6.3 12.8 6.3 13.2 6.4C13.9 6.6 14.6 6.9 15.2 7.3C14.6 7.1 14 7 13.3 7C12.1 7 11.1 7.4 10.4 8.4C9.7 9.3 9.3 10.4 9.3 11.6C9.3 13.1 8.9 14.5 8 15.8C7.93744 15.8834 7.87923 15.9625 7.82356 16.0381C7.6123 16.325 7.43739 16.5626 7.2 16.8C4.2 16.1 1.9 13.8 1.2 10.8Z" fill="black"/>
+<path d="M18 15C18 16.6569 16.6569 18 15 18C13.3431 18 12 16.6569 12 15C12 13.3431 13.3431 12 15 12C16.6569 12 18 13.3431 18 15Z" fill="#989898"/>
+</g>
+<defs>
+<clipPath id="clip0_2707_2015">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/app/atoms/avatar/render.js

@@ -1,8 +1,4 @@
-import { avatarInitials } from '../../../util/common';
-
-function cssVar(name) {
-  return getComputedStyle(document.body).getPropertyValue(name);
-}
+import { avatarInitials, cssVar } from '../../../util/common';
 
 // renders the avatar and returns it as an URL
 export default async function renderAvatar({

src/app/atoms/math/Math.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
+import './Math.scss';
 
 import katex from 'katex';
 import 'katex/dist/katex.min.css';

src/app/atoms/math/Math.scss

@@ -0,0 +1,3 @@
+.katex-display {
+  margin: 0 !important;
+}

src/app/atoms/modal/RawModal.jsx

@@ -42,7 +42,6 @@ function RawModal({
       shouldCloseOnEsc={closeFromOutside}
       shouldCloseOnOverlayClick={closeFromOutside}
       shouldReturnFocusAfterClose={false}
-      closeTimeoutMS={300}
     >
       {children}
     </Modal>

src/app/atoms/modal/RawModal.scss

@@ -1,33 +1,9 @@
-.ReactModal__Overlay {
-  opacity: 0;
-  transition: opacity 200ms var(--fluid-slide-up);
-}
-.ReactModal__Overlay--after-open{
-  opacity: 1;
-}
-.ReactModal__Overlay--before-close{
-  opacity: 0;
-}
-
-.ReactModal__Content {
-  transform: translateY(100%);
-  transition: transform 200ms var(--fluid-slide-up);
-}
-
-.ReactModal__Content--after-open{
-  transform: translateY(0);
-}
-
-.ReactModal__Content--before-close{
-  transform: translateY(100%);
-}
-
 .raw-modal {
   --small-modal-width: 525px;
   --medium-modal-width: 712px;
   --large-modal-width: 1024px;
 
-
+  position: relative;
   width: 100%;
   max-height: 100%;
   border-radius: var(--bo-radius);
@@ -60,4 +36,31 @@
     height: 100%;
     background-color: var(--bg-overlay);
   }
-}
+}
+
+.ReactModal__Overlay {
+  animation: raw-modal--overlay 150ms;
+}
+
+.ReactModal__Content {
+  animation: raw-modal--content 150ms;
+}
+
+@keyframes raw-modal--content {
+  0% {
+    transform: translateY(100px);
+    opacity: .5;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes raw-modal--overlay {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

src/app/hooks/useAccountData.js

@@ -0,0 +1,22 @@
+/* eslint-disable import/prefer-default-export */
+import { useState, useEffect } from 'react';
+
+import initMatrix from '../../client/initMatrix';
+
+export function useAccountData(eventType) {
+  const mx = initMatrix.matrixClient;
+  const [event, setEvent] = useState(mx.getAccountData(eventType));
+
+  useEffect(() => {
+    const handleChange = (mEvent) => {
+      if (mEvent.getType() !== eventType) return;
+      setEvent(mEvent);
+    };
+    mx.on('accountData', handleChange);
+    return () => {
+      mx.removeListener('accountData', handleChange);
+    };
+  }, [eventType]);
+
+  return event;
+}

src/app/molecules/global-notification/GlobalNotification.jsx

@@ -0,0 +1,174 @@
+import React from 'react';
+
+import initMatrix from '../../../client/initMatrix';
+import { openReusableContextMenu } from '../../../client/action/navigation';
+import { getEventCords } from '../../../util/common';
+
+import Text from '../../atoms/text/Text';
+import Button from '../../atoms/button/Button';
+import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
+import SettingTile from '../setting-tile/SettingTile';
+
+import NotificationSelector from './NotificationSelector';
+
+import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+
+import { useAccountData } from '../../hooks/useAccountData';
+
+export const notifType = {
+  ON: 'on',
+  OFF: 'off',
+  NOISY: 'noisy',
+};
+export const typeToLabel = {
+  [notifType.ON]: 'On',
+  [notifType.OFF]: 'Off',
+  [notifType.NOISY]: 'Noisy',
+};
+Object.freeze(notifType);
+
+const DM = '.m.rule.room_one_to_one';
+const ENC_DM = '.m.rule.encrypted_room_one_to_one';
+const ROOM = '.m.rule.message';
+const ENC_ROOM = '.m.rule.encrypted';
+
+export function getActionType(rule) {
+  const { actions } = rule;
+  if (actions.find((action) => action?.set_tweak === 'sound')) return notifType.NOISY;
+  if (actions.find((action) => action?.set_tweak === 'highlight')) return notifType.ON;
+  if (actions.find((action) => action === 'dont_notify')) return notifType.OFF;
+  return notifType.OFF;
+}
+
+export function getTypeActions(type, highlightValue = false) {
+  if (type === notifType.OFF) return ['dont_notify'];
+
+  const highlight = { set_tweak: 'highlight' };
+  if (typeof highlightValue === 'boolean') highlight.value = highlightValue;
+  if (type === notifType.ON) return ['notify', highlight];
+
+  const sound = { set_tweak: 'sound', value: 'default' };
+  return ['notify', sound, highlight];
+}
+
+function useGlobalNotif() {
+  const mx = initMatrix.matrixClient;
+  const pushRules = useAccountData('m.push_rules')?.getContent();
+  const underride = pushRules?.global?.underride ?? [];
+  const rulesToType = {
+    [DM]: notifType.ON,
+    [ENC_DM]: notifType.ON,
+    [ROOM]: notifType.NOISY,
+    [ENC_ROOM]: notifType.NOISY,
+  };
+
+  const getRuleCondition = (rule) => {
+    const condition = [];
+    if (rule === DM || rule === ENC_DM) {
+      condition.push({ kind: 'room_member_count', is: '2' });
+    }
+    condition.push({
+      kind: 'event_match',
+      key: 'type',
+      pattern: [ENC_DM, ENC_ROOM].includes(rule) ? 'm.room.encrypted' : 'm.room.message',
+    });
+    return condition;
+  };
+
+  const setRule = (rule, type) => {
+    const content = pushRules ?? {};
+    if (!content.global) content.global = {};
+    if (!content.global.underride) content.global.underride = [];
+    const ur = content.global.underride;
+    let ruleContent = ur.find((action) => action?.rule_id === rule);
+    if (!ruleContent) {
+      ruleContent = {
+        conditions: getRuleCondition(type),
+        actions: [],
+        rule_id: rule,
+        default: true,
+        enabled: true,
+      };
+      ur.push(ruleContent);
+    }
+    ruleContent.actions = getTypeActions(type);
+
+    mx.setAccountData('m.push_rules', content);
+  };
+
+  const dmRule = underride.find((rule) => rule.rule_id === DM);
+  const encDmRule = underride.find((rule) => rule.rule_id === ENC_DM);
+  const roomRule = underride.find((rule) => rule.rule_id === ROOM);
+  const encRoomRule = underride.find((rule) => rule.rule_id === ENC_ROOM);
+
+  if (dmRule) rulesToType[DM] = getActionType(dmRule);
+  if (encDmRule) rulesToType[ENC_DM] = getActionType(encDmRule);
+  if (roomRule) rulesToType[ROOM] = getActionType(roomRule);
+  if (encRoomRule) rulesToType[ENC_ROOM] = getActionType(encRoomRule);
+
+  return [rulesToType, setRule];
+}
+
+function GlobalNotification() {
+  const [rulesToType, setRule] = useGlobalNotif();
+
+  const onSelect = (evt, rule) => {
+    openReusableContextMenu(
+      'bottom',
+      getEventCords(evt, '.btn-surface'),
+      (requestClose) => (
+        <NotificationSelector
+          value={rulesToType[rule]}
+          onSelect={(value) => {
+            if (rulesToType[rule] !== value) setRule(rule, value);
+            requestClose();
+          }}
+        />
+      ),
+    );
+  };
+
+  return (
+    <div className="global-notification">
+      <MenuHeader>Global Notifications</MenuHeader>
+      <SettingTile
+        title="Direct messages"
+        options={(
+          <Button onClick={(evt) => onSelect(evt, DM)} iconSrc={ChevronBottomIC}>
+            { typeToLabel[rulesToType[DM]] }
+          </Button>
+        )}
+        content={<Text variant="b3">Default notification settings for all direct message.</Text>}
+      />
+      <SettingTile
+        title="Encrypted direct messages"
+        options={(
+          <Button onClick={(evt) => onSelect(evt, ENC_DM)} iconSrc={ChevronBottomIC}>
+            {typeToLabel[rulesToType[ENC_DM]]}
+          </Button>
+        )}
+        content={<Text variant="b3">Default notification settings for all encrypted direct message.</Text>}
+      />
+      <SettingTile
+        title="Rooms messages"
+        options={(
+          <Button onClick={(evt) => onSelect(evt, ROOM)} iconSrc={ChevronBottomIC}>
+            {typeToLabel[rulesToType[ROOM]]}
+          </Button>
+        )}
+        content={<Text variant="b3">Default notification settings for all room message.</Text>}
+      />
+      <SettingTile
+        title="Encrypted rooms messages"
+        options={(
+          <Button onClick={(evt) => onSelect(evt, ENC_ROOM)} iconSrc={ChevronBottomIC}>
+            {typeToLabel[rulesToType[ENC_ROOM]]}
+          </Button>
+        )}
+        content={<Text variant="b3">Default notification settings for all encrypted room message.</Text>}
+      />
+    </div>
+  );
+}
+
+export default GlobalNotification;

src/app/molecules/global-notification/IgnoreUserList.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import './IgnoreUserList.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import * as roomActions from '../../../client/action/room';
+
+import Text from '../../atoms/text/Text';
+import Chip from '../../atoms/chip/Chip';
+import Input from '../../atoms/input/Input';
+import Button from '../../atoms/button/Button';
+import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
+import SettingTile from '../setting-tile/SettingTile';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+import { useAccountData } from '../../hooks/useAccountData';
+
+function IgnoreUserList() {
+  useAccountData('m.ignored_user_list');
+  const ignoredUsers = initMatrix.matrixClient.getIgnoredUsers();
+
+  const handleSubmit = (evt) => {
+    evt.preventDefault();
+    const { ignoreInput } = evt.target.elements;
+    const value = ignoreInput.value.trim();
+    const userIds = value.split(' ').filter((v) => v.match(/^@\S+:\S+$/));
+    if (userIds.length === 0) return;
+    ignoreInput.value = '';
+    roomActions.ignore(userIds);
+  };
+
+  return (
+    <div className="ignore-user-list">
+      <MenuHeader>Ignored users</MenuHeader>
+      <SettingTile
+        title="Ignore user"
+        content={(
+          <div className="ignore-user-list__users">
+            <Text variant="b3">Ignore userId if you do not want to receive their messages or invites.</Text>
+            <form onSubmit={handleSubmit}>
+              <Input name="ignoreInput" required />
+              <Button variant="primary" type="submit">Ignore</Button>
+            </form>
+            {ignoredUsers.length > 0 && (
+              <div>
+                {ignoredUsers.map((uId) => (
+                  <Chip
+                    iconSrc={CrossIC}
+                    key={uId}
+                    text={uId}
+                    iconColor={CrossIC}
+                    onClick={() => roomActions.unignore([uId])}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      />
+    </div>
+  );
+}
+
+export default IgnoreUserList;

src/app/molecules/global-notification/IgnoreUserList.scss

@@ -0,0 +1,17 @@
+.ignore-user-list {
+  &__users {
+    & form,
+    & > div:last-child {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--sp-tight);
+    }
+
+    & form {
+      margin: var(--sp-extra-tight) 0 var(--sp-normal);
+      .input-container {
+        flex-grow: 1;
+      }
+    }
+  }
+}

src/app/molecules/global-notification/KeywordNotification.jsx

@@ -0,0 +1,239 @@
+import React from 'react';
+import './KeywordNotification.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import { openReusableContextMenu } from '../../../client/action/navigation';
+import { getEventCords } from '../../../util/common';
+
+import Text from '../../atoms/text/Text';
+import Chip from '../../atoms/chip/Chip';
+import Input from '../../atoms/input/Input';
+import Button from '../../atoms/button/Button';
+import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
+import SettingTile from '../setting-tile/SettingTile';
+
+import NotificationSelector from './NotificationSelector';
+
+import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+import { useAccountData } from '../../hooks/useAccountData';
+import {
+  notifType, typeToLabel, getActionType, getTypeActions,
+} from './GlobalNotification';
+
+const DISPLAY_NAME = '.m.rule.contains_display_name';
+const ROOM_PING = '.m.rule.roomnotif';
+const USERNAME = '.m.rule.contains_user_name';
+const KEYWORD = 'keyword';
+
+function useKeywordNotif() {
+  const mx = initMatrix.matrixClient;
+  const pushRules = useAccountData('m.push_rules')?.getContent();
+  const override = pushRules?.global?.override ?? [];
+  const content = pushRules?.global?.content ?? [];
+
+  const rulesToType = {
+    [DISPLAY_NAME]: notifType.NOISY,
+    [ROOM_PING]: notifType.NOISY,
+    [USERNAME]: notifType.NOISY,
+  };
+
+  const setRule = (rule, type) => {
+    const evtContent = pushRules ?? {};
+    if (!evtContent.global) evtContent.global = {};
+    if (!evtContent.global.override) evtContent.global.override = [];
+    if (!evtContent.global.content) evtContent.global.content = [];
+    const or = evtContent.global.override;
+    const ct = evtContent.global.content;
+
+    if (rule === DISPLAY_NAME || rule === ROOM_PING) {
+      let orRule = or.find((r) => r?.rule_id === rule);
+      if (!orRule) {
+        orRule = {
+          conditions: [],
+          actions: [],
+          rule_id: rule,
+          default: true,
+          enabled: true,
+        };
+        or.push(orRule);
+      }
+      if (rule === DISPLAY_NAME) {
+        orRule.conditions = [{ kind: 'contains_display_name' }];
+        orRule.actions = getTypeActions(type, true);
+      } else {
+        orRule.conditions = [
+          { kind: 'event_match', key: 'content.body', pattern: '@room' },
+          { kind: 'sender_notification_permission', key: 'room' },
+        ];
+        orRule.actions = getTypeActions(type, true);
+      }
+    } else if (rule === USERNAME) {
+      let usernameRule = ct.find((r) => r?.rule_id === rule);
+      if (!usernameRule) {
+        const userId = mx.getUserId();
+        const username = userId.match(/^@?(\S+):(\S+)$/)?.[1] ?? userId;
+        usernameRule = {
+          actions: [],
+          default: true,
+          enabled: true,
+          pattern: username,
+          rule_id: rule,
+        };
+        ct.push(usernameRule);
+      }
+      usernameRule.actions = getTypeActions(type, true);
+    } else {
+      const keyRules = ct.filter((r) => r.rule_id !== USERNAME);
+      keyRules.forEach((r) => {
+        // eslint-disable-next-line no-param-reassign
+        r.actions = getTypeActions(type, true);
+      });
+    }
+
+    mx.setAccountData('m.push_rules', evtContent);
+  };
+
+  const addKeyword = (keyword) => {
+    if (content.find((r) => r.rule_id === keyword)) return;
+    content.push({
+      rule_id: keyword,
+      pattern: keyword,
+      enabled: true,
+      default: false,
+      actions: getTypeActions(rulesToType[KEYWORD] ?? notifType.NOISY, true),
+    });
+    mx.setAccountData('m.push_rules', pushRules);
+  };
+  const removeKeyword = (rule) => {
+    pushRules.global.content = content.filter((r) => r.rule_id !== rule.rule_id);
+    mx.setAccountData('m.push_rules', pushRules);
+  };
+
+  const dsRule = override.find((rule) => rule.rule_id === DISPLAY_NAME);
+  const roomRule = override.find((rule) => rule.rule_id === ROOM_PING);
+  const usernameRule = content.find((rule) => rule.rule_id === USERNAME);
+  const keywordRule = content.find((rule) => rule.rule_id !== USERNAME);
+
+  if (dsRule) rulesToType[DISPLAY_NAME] = getActionType(dsRule);
+  if (roomRule) rulesToType[ROOM_PING] = getActionType(roomRule);
+  if (usernameRule) rulesToType[USERNAME] = getActionType(usernameRule);
+  if (keywordRule) rulesToType[KEYWORD] = getActionType(keywordRule);
+
+  return {
+    rulesToType,
+    pushRules,
+    setRule,
+    addKeyword,
+    removeKeyword,
+  };
+}
+
+function GlobalNotification() {
+  const {
+    rulesToType,
+    pushRules,
+    setRule,
+    addKeyword,
+    removeKeyword,
+  } = useKeywordNotif();
+
+  const keywordRules = pushRules?.global?.content.filter((r) => r.rule_id !== USERNAME) ?? [];
+
+  const onSelect = (evt, rule) => {
+    openReusableContextMenu(
+      'bottom',
+      getEventCords(evt, '.btn-surface'),
+      (requestClose) => (
+        <NotificationSelector
+          value={rulesToType[rule]}
+          onSelect={(value) => {
+            if (rulesToType[rule] !== value) setRule(rule, value);
+            requestClose();
+          }}
+        />
+      ),
+    );
+  };
+
+  const handleSubmit = (evt) => {
+    evt.preventDefault();
+    const { keywordInput } = evt.target.elements;
+    const value = keywordInput.value.trim();
+    if (value === '') return;
+    addKeyword(value);
+    keywordInput.value = '';
+  };
+
+  return (
+    <div className="keyword-notification">
+      <MenuHeader>Mentions & keywords</MenuHeader>
+      <SettingTile
+        title="Message containing my display name"
+        options={(
+          <Button onClick={(evt) => onSelect(evt, DISPLAY_NAME)} iconSrc={ChevronBottomIC}>
+            { typeToLabel[rulesToType[DISPLAY_NAME]] }
+          </Button>
+        )}
+        content={<Text variant="b3">Default notification settings for all message containing your display name.</Text>}
+      />
+      <SettingTile
+        title="Message containing my username"
+        options={(
+          <Button onClick={(evt) => onSelect(evt, USERNAME)} iconSrc={ChevronBottomIC}>
+            { typeToLabel[rulesToType[USERNAME]] }
+          </Button>
+        )}
+        content={<Text variant="b3">Default notification settings for all message containing your username.</Text>}
+      />
+      <SettingTile
+        title="Message containing @room"
+        options={(
+          <Button onClick={(evt) => onSelect(evt, ROOM_PING)} iconSrc={ChevronBottomIC}>
+            {typeToLabel[rulesToType[ROOM_PING]]}
+          </Button>
+        )}
+        content={<Text variant="b3">Default notification settings for all messages containing @room.</Text>}
+      />
+      { rulesToType[KEYWORD] && (
+        <SettingTile
+          title="Message containing keywords"
+          options={(
+            <Button onClick={(evt) => onSelect(evt, KEYWORD)} iconSrc={ChevronBottomIC}>
+              {typeToLabel[rulesToType[KEYWORD]]}
+            </Button>
+          )}
+          content={<Text variant="b3">Default notification settings for all message containing keywords.</Text>}
+        />
+      )}
+      <SettingTile
+        title="Keywords"
+        content={(
+          <div className="keyword-notification__keyword">
+            <Text variant="b3">Get notification when a message contains keyword.</Text>
+            <form onSubmit={handleSubmit}>
+              <Input name="keywordInput" required />
+              <Button variant="primary" type="submit">Add</Button>
+            </form>
+            {keywordRules.length > 0 && (
+              <div>
+                {keywordRules.map((rule) => (
+                  <Chip
+                    iconSrc={CrossIC}
+                    key={rule.rule_id}
+                    text={rule.pattern}
+                    iconColor={CrossIC}
+                    onClick={() => removeKeyword(rule)}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      />
+    </div>
+  );
+}
+
+export default GlobalNotification;

src/app/molecules/global-notification/KeywordNotification.scss

@@ -0,0 +1,17 @@
+.keyword-notification {
+  &__keyword {
+    & form,
+    & > div:last-child {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--sp-tight);
+    }
+
+    & form {
+      margin: var(--sp-extra-tight) 0 var(--sp-normal);
+      .input-container {
+        flex-grow: 1;
+      }
+    }
+  }
+}

src/app/molecules/global-notification/NotificationSelector.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
+
+import CheckIC from '../../../../public/res/ic/outlined/check.svg';
+
+function NotificationSelector({
+  value, onSelect,
+}) {
+  return (
+    <div>
+      <MenuHeader>Notification</MenuHeader>
+      <MenuItem iconSrc={value === 'off' ? CheckIC : null} variant={value === 'off' ? 'positive' : 'surface'} onClick={() => onSelect('off')}>Off</MenuItem>
+      <MenuItem iconSrc={value === 'on' ? CheckIC : null} variant={value === 'on' ? 'positive' : 'surface'} onClick={() => onSelect('on')}>On</MenuItem>
+      <MenuItem iconSrc={value === 'noisy' ? CheckIC : null} variant={value === 'noisy' ? 'positive' : 'surface'} onClick={() => onSelect('noisy')}>Noisy</MenuItem>
+    </div>
+  );
+}
+
+NotificationSelector.propTypes = {
+  value: PropTypes.oneOf(['off', 'on', 'noisy']).isRequired,
+  onSelect: PropTypes.func.isRequired,
+};
+
+export default NotificationSelector;

src/app/molecules/image-lightbox/ImageLightbox.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ImageLightbox.scss';
+import FileSaver from 'file-saver';
+
+import Text from '../../atoms/text/Text';
+import RawModal from '../../atoms/modal/RawModal';
+import IconButton from '../../atoms/button/IconButton';
+
+import DownloadSVG from '../../../../public/res/ic/outlined/download.svg';
+import ExternalSVG from '../../../../public/res/ic/outlined/external.svg';
+
+function ImageLightbox({
+  url, alt, isOpen, onRequestClose,
+}) {
+  const handleDownload = () => {
+    FileSaver.saveAs(url, alt);
+  };
+
+  return (
+    <RawModal
+      className="image-lightbox__modal"
+      overlayClassName="image-lightbox__overlay"
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      size="large"
+    >
+      <div className="image-lightbox__header">
+        <Text variant="b2" weight="medium">{alt}</Text>
+        <IconButton onClick={() => window.open(url)} size="small" src={ExternalSVG} />
+        <IconButton onClick={handleDownload} size="small" src={DownloadSVG} />
+      </div>
+      <div className="image-lightbox__content">
+        <img src={url} alt={alt} />
+      </div>
+    </RawModal>
+  );
+}
+
+ImageLightbox.propTypes = {
+  url: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onRequestClose: PropTypes.func.isRequired,
+};
+
+export default ImageLightbox;

src/app/molecules/image-lightbox/ImageLightbox.scss

@@ -0,0 +1,50 @@
+@use '../../partials/flex';
+@use '../../partials/text';
+
+.image-lightbox__modal {
+  box-shadow: none;
+  width: unset;
+  gap: var(--sp-normal);
+
+  border-radius: 0;
+  pointer-events: none;
+
+  & .text {
+    color: white;
+  }
+  & .ic-raw {
+    background-color: white;
+  }
+}
+
+.image-lightbox__overlay {
+  background-color: var(--bg-overlay-low);
+}
+
+
+.image-lightbox__header > *,
+.image-lightbox__content > * {
+  pointer-events: all;
+}
+.image-lightbox__header {
+  display: flex;
+  align-items: center;
+
+  & > .text {
+    @extend .cp-fx__item-one;
+    @extend .cp-txt__ellipsis;
+  }
+}
+.image-lightbox__content {
+  display: flex;
+  justify-content: center;
+  max-height: 80vh;
+
+  & img {
+    background-color: var(--bg-surface-low);
+    object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: var(--bo-radius);
+  }
+}

src/app/molecules/media/Media.jsx

@@ -8,47 +8,13 @@ import { BlurhashCanvas } from 'react-blurhash';
 import Text from '../../atoms/text/Text';
 import IconButton from '../../atoms/button/IconButton';
 import Spinner from '../../atoms/spinner/Spinner';
+import ImageLightbox from '../image-lightbox/ImageLightbox';
 
 import DownloadSVG from '../../../../public/res/ic/outlined/download.svg';
 import ExternalSVG from '../../../../public/res/ic/outlined/external.svg';
 import PlaySVG from '../../../../public/res/ic/outlined/play.svg';
 
-// https://github.com/matrix-org/matrix-react-sdk/blob/cd15e08fc285da42134817cce50de8011809cd53/src/utils/blobs.ts#L73
-const ALLOWED_BLOB_MIMETYPES = [
-  'image/jpeg',
-  'image/gif',
-  'image/png',
-  'image/apng',
-  'image/webp',
-  'image/avif',
-
-  'video/mp4',
-  'video/webm',
-  'video/ogg',
-  'video/quicktime',
-
-  'audio/mp4',
-  'audio/webm',
-  'audio/aac',
-  'audio/mpeg',
-  'audio/ogg',
-  'audio/wave',
-  'audio/wav',
-  'audio/x-wav',
-  'audio/x-pn-wav',
-  'audio/flac',
-  'audio/x-flac',
-];
-function getBlobSafeMimeType(mimetype) {
-  if (!ALLOWED_BLOB_MIMETYPES.includes(mimetype)) {
-    return 'application/octet-stream';
-  }
-  // Required for Chromium browsers
-  if (mimetype === 'video/quicktime') {
-    return 'video/mp4';
-  }
-  return mimetype;
-}
+import { getBlobSafeMimeType } from '../../../util/mimetypes';
 
 async function getDecryptedBlob(response, type, decryptData) {
   const arrayBuffer = await response.arrayBuffer();
@@ -159,6 +125,7 @@ function Image({
 }) {
   const [url, setUrl] = useState(null);
   const [blur, setBlur] = useState(true);
+  const [lightbox, setLightbox] = useState(false);
 
   useEffect(() => {
     let unmounted = false;
@@ -173,14 +140,42 @@ function Image({
     };
   }, []);
 
+  const toggleLightbox = () => {
+    if (!url) return;
+    setLightbox(!lightbox);
+  };
+
   return (
-    <div className="file-container">
-      <FileHeader name={name} link={url || link} type={type} external />
-      <div style={{ height: width !== null ? getNativeHeight(width, height) : 'unset' }} className="image-container">
-        { blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
-        { url !== null && <img style={{ display: blur ? 'none' : 'unset' }} onLoad={() => setBlur(false)} src={url || link} alt={name} />}
+    <>
+      <div className="file-container">
+        <div
+          style={{ height: width !== null ? getNativeHeight(width, height) : 'unset' }}
+          className="image-container"
+          role="button"
+          tabIndex="0"
+          onClick={toggleLightbox}
+          onKeyDown={toggleLightbox}
+        >
+          { blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
+          { url !== null && (
+            <img
+              style={{ display: blur ? 'none' : 'unset' }}
+              onLoad={() => setBlur(false)}
+              src={url || link}
+              alt={name}
+            />
+          )}
+        </div>
       </div>
-    </div>
+      {url && (
+        <ImageLightbox
+          url={url}
+          alt={name}
+          isOpen={lightbox}
+          onRequestClose={toggleLightbox}
+        />
+      )}
+    </>
   );
 }
 Image.defaultProps = {

src/app/molecules/media/Media.scss

@@ -62,6 +62,13 @@
     margin: 0 !important;
   }
 }
+.image-container {
+  max-height: 460px;
+  img {
+    cursor: pointer;
+    object-fit: cover;
+  }
+}
 
 .video-container {
   position: relative;

src/app/molecules/message/Message.jsx

@@ -8,7 +8,9 @@ import './Message.scss';
 import { twemojify } from '../../../util/twemojify';
 
 import initMatrix from '../../../client/initMatrix';
-import { getUsername, getUsernameOfRoomMember, parseReply } from '../../../util/matrixUtil';
+import {
+  getUsername, getUsernameOfRoomMember, parseReply, trimHTMLReply,
+} from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
 import { getEventCords } from '../../../util/common';
 import { redactEvent, sendReaction } from '../../../client/action/roomTimeline';
@@ -37,6 +39,8 @@ import CmdIC from '../../../../public/res/ic/outlined/cmd.svg';
 import BinIC from '../../../../public/res/ic/outlined/bin.svg';
 
 import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
+import { getBlobSafeMimeType } from '../../../util/mimetypes';
+import { html, plain } from '../../../util/markdown';
 
 function PlaceholderMessage() {
   return (
@@ -247,7 +251,7 @@ const MessageBody = React.memo(({
   if (!isCustomHTML) {
     // If this is a plaintext message, wrap it in a <p> element (automatically applying
     // white-space: pre-wrap) in order to preserve newlines
-    content = (<p>{content}</p>);
+    content = (<p className="message__body-plain">{content}</p>);
   }
 
   return (
@@ -289,14 +293,19 @@ function MessageEdit({ body, onSave, onCancel }) {
   }, []);
 
   const handleKeyDown = (e) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      onCancel();
+    }
+
     if (e.key === 'Enter' && e.shiftKey === false) {
       e.preventDefault();
-      onSave(editInputRef.current.value);
+      onSave(editInputRef.current.value, body);
     }
   };
 
   return (
-    <form className="message__edit" onSubmit={(e) => { e.preventDefault(); onSave(editInputRef.current.value); }}>
+    <form className="message__edit" onSubmit={(e) => { e.preventDefault(); onSave(editInputRef.current.value, body); }}>
       <Input
         forwardRef={editInputRef}
         onKeyDown={handleKeyDown}
@@ -621,7 +630,12 @@ function genMediaContent(mE) {
   if (typeof mediaMXC === 'undefined' || mediaMXC === '') return <span style={{ color: 'var(--bg-danger)' }}>Malformed event</span>;
 
   let msgType = mE.getContent()?.msgtype;
-  if (mE.getType() === 'm.sticker') msgType = 'm.sticker';
+  const safeMimetype = getBlobSafeMimeType(mContent.info?.mimetype);
+  if (mE.getType() === 'm.sticker') {
+    msgType = 'm.sticker';
+  } else if (safeMimetype === 'application/octet-stream') {
+    msgType = 'm.file';
+  }
 
   const blurhash = mContent?.info?.['xyz.amorgan.blurhash'];
 
@@ -703,9 +717,9 @@ function getEditedBody(editedMEvent) {
 }
 
 function Message({
-  mEvent, isBodyOnly, roomTimeline, focus, fullTime,
+  mEvent, isBodyOnly, roomTimeline,
+  focus, fullTime, isEdit, setEdit, cancelEdit,
 }) {
-  const [isEditing, setIsEditing] = useState(false);
   const roomId = mEvent.getRoomId();
   const { editedTimeline, reactionTimeline } = roomTimeline ?? {};
 
@@ -718,36 +732,37 @@ function Message({
   let { body } = content;
   const username = mEvent.sender ? getUsernameOfRoomMember(mEvent.sender) : getUsername(senderId);
   const avatarSrc = mEvent.sender?.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop') ?? null;
+  let isCustomHTML = content.format === 'org.matrix.custom.html';
+  let customHTML = isCustomHTML ? content.formatted_body : null;
 
   const edit = useCallback(() => {
-    setIsEditing(true);
+    setEdit(eventId);
   }, []);
   const reply = useCallback(() => {
-    replyTo(senderId, mEvent.getId(), body);
-  }, [body]);
+    replyTo(senderId, mEvent.getId(), body, customHTML);
+  }, [body, customHTML]);
 
-  if (body === undefined) return null;
   if (msgType === 'm.emote') className.push('message--type-emote');
 
-  let isCustomHTML = content.format === 'org.matrix.custom.html';
   const isEdited = roomTimeline ? editedTimeline.has(eventId) : false;
   const haveReactions = roomTimeline
     ? reactionTimeline.has(eventId) || !!mEvent.getServerAggregatedRelation('m.annotation')
     : false;
   const isReply = !!mEvent.replyEventId;
-  let customHTML = isCustomHTML ? content.formatted_body : null;
 
   if (isEdited) {
     const editedList = editedTimeline.get(eventId);
     const editedMEvent = editedList[editedList.length - 1];
     [body, isCustomHTML, customHTML] = getEditedBody(editedMEvent);
-    if (typeof body !== 'string') return null;
   }
 
   if (isReply) {
     body = parseReply(body)?.body ?? body;
+    customHTML = trimHTMLReply(customHTML);
   }
 
+  if (typeof body !== 'string') body = '';
+
   return (
     <div className={className.join(' ')}>
       {
@@ -777,7 +792,7 @@ function Message({
             eventId={mEvent.replyEventId}
           />
         )}
-        {!isEditing && (
+        {!isEdit && (
           <MessageBody
             senderName={username}
             isCustomHTML={isCustomHTML}
@@ -786,22 +801,24 @@ function Message({
             isEdited={isEdited}
           />
         )}
-        {isEditing && (
+        {isEdit && (
           <MessageEdit
-            body={body}
-            onSave={(newBody) => {
-              if (newBody !== body) {
+            body={(customHTML
+              ? html(customHTML, { kind: 'edit', onlyPlain: true }).plain
+              : plain(body, { kind: 'edit', onlyPlain: true }).plain)}
+            onSave={(newBody, oldBody) => {
+              if (newBody !== oldBody) {
                 initMatrix.roomsInput.sendEditedMessage(roomId, mEvent, newBody);
               }
-              setIsEditing(false);
+              cancelEdit();
             }}
-            onCancel={() => setIsEditing(false)}
+            onCancel={cancelEdit}
           />
         )}
         {haveReactions && (
           <MessageReactionGroup roomTimeline={roomTimeline} mEvent={mEvent} />
         )}
-        {roomTimeline && !isEditing && (
+        {roomTimeline && !isEdit && (
           <MessageOptions
             roomTimeline={roomTimeline}
             mEvent={mEvent}
@@ -818,6 +835,9 @@ Message.defaultProps = {
   focus: false,
   roomTimeline: null,
   fullTime: false,
+  isEdit: false,
+  setEdit: null,
+  cancelEdit: null,
 };
 Message.propTypes = {
   mEvent: PropTypes.shape({}).isRequired,
@@ -825,6 +845,9 @@ Message.propTypes = {
   roomTimeline: PropTypes.shape({}),
   focus: PropTypes.bool,
   fullTime: PropTypes.bool,
+  isEdit: PropTypes.bool,
+  setEdit: PropTypes.func,
+  cancelEdit: PropTypes.func,
 };
 
 export { Message, MessageReply, PlaceholderMessage };

src/app/molecules/message/Message.scss

@@ -15,7 +15,7 @@
       display: flex;
     }
   }
-  
+
   &__avatar-container {
     padding-top: 6px;
     @include dir.side(margin, 0, var(--sp-tight));
@@ -101,7 +101,6 @@
   }
 }
 
-
 .message__header {
   display: flex;
   align-items: baseline;
@@ -115,10 +114,16 @@
       @extend .cp-txt__ellipsis;
       color: inherit;
     }
-    & > span:last-child { display: none; }
+    & > span:last-child {
+      display: none;
+    }
     &:hover {
-      & > span:first-child { display: none; }
-      & > span:last-child { display: block; }
+      & > span:first-child {
+        display: none;
+      }
+      & > span:last-child {
+        display: block;
+      }
     }
   }
 
@@ -158,7 +163,7 @@
 .message__body {
   word-break: break-word;
 
-  & > .text > * {
+  & > .text > .message__body-plain {
     white-space: pre-wrap;
   }
 
@@ -168,7 +173,11 @@
   & > .text > a {
     white-space: initial !important;
   }
-  
+
+  & > .text > p + p {
+    margin-top: var(--sp-normal);
+  }
+
   & span[data-mx-pill] {
     background-color: hsla(0, 0%, 64%, 0.15);
     padding: 0 2px;
@@ -191,7 +200,7 @@
   & span[data-mx-spoiler] {
     border-radius: 4px;
     background-color: rgba(124, 124, 124, 0.5);
-    color:transparent;
+    color: transparent;
     cursor: pointer;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -220,6 +229,8 @@
   padding: var(--sp-extra-tight) 0;
   &-btns button {
     margin: var(--sp-tight) 0 0 0;
+    padding: var(--sp-ultra-tight) var(--sp-tight);
+    min-width: 0;
     @include dir.side(margin, 0, var(--sp-tight));
   }
 }
@@ -255,9 +266,9 @@
   }
   &-count {
     margin: 0 var(--sp-ultra-tight);
-    color: var(--tc-surface-normal)
+    color: var(--tc-surface-normal);
   }
-  &-tooltip .react-emoji  {
+  &-tooltip .react-emoji {
     width: 16px;
     height: 16px;
     margin: 0 var(--sp-ultra-tight);
@@ -270,19 +281,19 @@
     }
   }
   &:active {
-    background-color: var(--bg-surface-active)
+    background-color: var(--bg-surface-active);
   }
 
   &--active {
     background-color: var(--bg-caution-active);
-    
+
     @media (hover: hover) {
       &:hover {
         background-color: var(--bg-caution-hover);
       }
     }
     &:active {
-      background-color: var(--bg-caution-active)
+      background-color: var(--bg-caution-active);
     }
   }
 }
@@ -303,7 +314,12 @@
 
 // markdown formating
 .message__body {
-  & h1, h2, h3, h4, h5, h6 {
+  & h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     margin: 0;
     margin-bottom: var(--sp-ultra-tight);
     font-weight: var(--fw-medium);
@@ -424,7 +440,8 @@
     @include scrollbar.scroll__h;
     @include scrollbar.scroll--auto-hide;
 
-    & td, & th {
+    & td,
+    & th {
       padding: var(--sp-extra-tight);
       border: 1px solid var(--bg-surface-border);
       border-width: 0 1px 1px 0;
@@ -432,11 +449,11 @@
       &:last-child {
         border-width: 0;
         border-bottom-width: 1px;
-        [dir=rtl] & {
+        [dir='rtl'] & {
           border-width: 0 1px 1px 0;
         }
       }
-      [dir=rtl] &:first-child {
+      [dir='rtl'] &:first-child {
         border-width: 0;
         border-bottom-width: 1px;
       }

src/app/molecules/space-options/SpaceOptions.jsx

@@ -38,10 +38,10 @@ function SpaceOptions({ roomId, afterOptionSelect }) {
 
   const handleMarkAsRead = () => {
     const spaceChildren = roomList.getCategorizedSpaces([roomId]);
-    spaceChildren?.forEach((childIds, spaceId) => {
+    spaceChildren?.forEach((childIds) => {
       childIds?.forEach((childId) => {
         markAsRead(childId);
-      })
+      });
     });
     afterOptionSelect();
   };

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

@@ -38,7 +38,7 @@
     @extend .cp-fx__column;
   }
   &__nav-twemoji {
-    background: inherit;
+    background-color: var(--bg-surface);
     position: sticky;
     bottom: -70%;
     z-index: 999;

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

@@ -177,7 +177,7 @@ function getUserImagePack(mx) {
   }
 
   const userImagePack = ImagePack.parsePack(mx.getUserId(), accountDataEmoji.event.content);
-  userImagePack.displayName ??= 'Personal Emoji';
+  if (userImagePack) userImagePack.displayName ??= 'Personal Emoji';
   return userImagePack;
 }
 

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

@@ -6,7 +6,7 @@ import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
 import { join } from '../../../client/action/room';
-import { selectRoom, selectSpace } from '../../../client/action/navigation';
+import { selectRoom, selectTab } from '../../../client/action/navigation';
 
 import Text from '../../atoms/text/Text';
 import IconButton from '../../atoms/button/IconButton';
@@ -32,7 +32,7 @@ function JoinAliasContent({ term, requestClose }) {
   const openRoom = (roomId) => {
     const room = mx.getRoom(roomId);
     if (!room) return;
-    if (room.isSpaceRoom()) selectSpace(roomId);
+    if (room.isSpaceRoom()) selectTab(roomId);
     else selectRoom(roomId);
     requestClose();
   };

src/app/organisms/navigation/Drawer.jsx

@@ -56,7 +56,9 @@ function Drawer() {
 
   useEffect(() => {
     requestAnimationFrame(() => {
-      scrollRef.current.scrollTop = 0;
+      if (scrollRef.current) {
+        scrollRef.current.scrollTop = 0;
+      }
     });
   }, [selectedTab]);
 

src/app/organisms/navigation/DrawerBreadcrumb.jsx

@@ -6,7 +6,7 @@ import { twemojify } from '../../../util/twemojify';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
-import { selectSpace } from '../../../client/action/navigation';
+import { selectTab, selectSpace } from '../../../client/action/navigation';
 import navigation from '../../../client/state/navigation';
 import { abbreviateNumber } from '../../../util/common';
 
@@ -21,7 +21,7 @@ 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 { roomList, notifications, accountData } = initMatrix;
   const mx = initMatrix.matrixClient;
   const spacePath = navigation.selectedSpacePath;
 
@@ -49,9 +49,9 @@ function DrawerBreadcrumb({ spaceId }) {
   }, [spaceId]);
 
   function getHomeNotiExcept(childId) {
-    const orphans = roomList.getOrphans();
-    const childIndex = orphans.indexOf(childId);
-    if (childId !== -1) orphans.splice(childIndex, 1);
+    const orphans = roomList.getOrphans()
+      .filter((id) => (id !== childId))
+      .filter((id) => !accountData.spaceShortcut.has(id));
 
     let noti = null;
 
@@ -107,7 +107,10 @@ function DrawerBreadcrumb({ spaceId }) {
                   { index !== 0 && <RawIcon size="extra-small" src={ChevronRightIC} />}
                   <Button
                     className={index === spacePath.length - 1 ? 'drawer-breadcrumb__btn--selected' : ''}
-                    onClick={() => selectSpace(id)}
+                    onClick={() => {
+                      if (id === cons.tabs.HOME) selectTab(id);
+                      else selectSpace(id);
+                    }}
                   >
                     <Text variant="b2">{id === cons.tabs.HOME ? 'Home' : twemojify(mx.getRoom(id).name)}</Text>
                     { noti !== null && (

src/app/organisms/navigation/DrawerHeader.jsx

@@ -57,7 +57,7 @@ export function HomeSpaceOptions({ spaceId, afterOptionSelect }) {
           iconSrc={HashGlobeIC}
           onClick={() => { afterOptionSelect(); openPublicRooms(); }}
         >
-          Join public room
+          Explore public rooms
         </MenuItem>
       )}
       { !spaceId && (

src/app/organisms/navigation/Home.jsx

@@ -25,12 +25,12 @@ function Home({ spaceId }) {
   let directIds = [];
 
   if (spaceId) {
-    const spaceChildIds = roomList.getSpaceChildren(spaceId);
+    const spaceChildIds = roomList.getSpaceChildren(spaceId) ?? [];
     spaceIds = spaceChildIds.filter((roomId) => spaces.has(roomId));
     roomIds = spaceChildIds.filter((roomId) => rooms.has(roomId));
     directIds = spaceChildIds.filter((roomId) => directs.has(roomId));
   } else {
-    spaceIds = roomList.getOrphanSpaces();
+    spaceIds = roomList.getOrphanSpaces().filter((id) => !accountData.spaceShortcut.has(id));
     roomIds = roomList.getOrphanRooms();
   }
 
@@ -80,10 +80,10 @@ function Home({ spaceId }) {
         <RoomsCategory name="People" roomIds={directIds.sort(roomIdByActivity)} drawerPostie={drawerPostie} />
       )}
 
-      { isCategorized && [...categories].map(([catId, childIds]) => {
+      { isCategorized && [...categories.keys()].sort(roomIdByAtoZ).map((catId) => {
         const rms = [];
         const dms = [];
-        childIds.forEach((id) => {
+        categories.get(catId).forEach((id) => {
           if (directs.has(id)) dms.push(id);
           else rms.push(id);
         });

src/app/organisms/profile-editor/ProfileEditor.jsx

@@ -16,7 +16,6 @@ import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
 
 import './ProfileEditor.scss';
 
-// TODO Fix bug that prevents 'Save' button from enabling up until second changed.
 function ProfileEditor({ userId }) {
   const [isEditing, setIsEditing] = useState(false);
   const mx = initMatrix.matrixClient;
@@ -96,7 +95,7 @@ function ProfileEditor({ userId }) {
   const renderInfo = () => (
     <div className="profile-editor__info" style={{ marginBottom: avatarSrc ? '24px' : '0' }}>
       <div>
-        <Text variant="h2" primary weight="medium">{twemojify(username)}</Text>
+        <Text variant="h2" primary weight="medium">{twemojify(username) ?? userId}</Text>
         <IconButton
           src={PencilIC}
           size="extra-small"
@@ -111,7 +110,7 @@ function ProfileEditor({ userId }) {
   return (
     <div className="profile-editor">
       <ImageUpload
-        text={username}
+        text={username ?? userId}
         bgColor={colorMXID(userId)}
         imageSrc={avatarSrc}
         onUpload={handleAvatarUpload}

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

@@ -11,7 +11,7 @@ import { selectRoom, openReusableContextMenu } from '../../../client/action/navi
 import * as roomActions from '../../../client/action/room';
 
 import {
-  getUsername, getUsernameOfRoomMember, getPowerLabel, hasDMWith, hasDevices
+  getUsername, getUsernameOfRoomMember, getPowerLabel, hasDMWith, hasDevices,
 } from '../../../util/matrixUtil';
 import { getEventCords } from '../../../util/common';
 import colorMXID from '../../../util/colorMXID';
@@ -209,19 +209,18 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
   };
 
   const toggleIgnore = async () => {
-    const ignoredUsers = mx.getIgnoredUsers();
-    const uIndex = ignoredUsers.indexOf(userId);
-    if (uIndex >= 0) {
-      if (uIndex === -1) return;
-      ignoredUsers.splice(uIndex, 1);
-    } else ignoredUsers.push(userId);
+    const isIgnored = mx.getIgnoredUsers().includes(userId);
 
     try {
       setIsIgnoring(true);
-      await mx.setIgnoredUsers(ignoredUsers);
+      if (isIgnored) {
+        await roomActions.unignore([userId]);
+      } else {
+        await roomActions.ignore([userId]);
+      }
 
       if (isMountedRef.current === false) return;
-      setIsUserIgnored(uIndex < 0);
+      setIsUserIgnored(!isIgnored);
       setIsIgnoring(false);
     } catch {
       setIsIgnoring(false);

src/app/organisms/room/RoomViewCmdBar.jsx

@@ -8,13 +8,6 @@ import twemoji from 'twemoji';
 import { twemojify } from '../../../util/twemojify';
 
 import initMatrix from '../../../client/initMatrix';
-import { toggleMarkdown } from '../../../client/action/settings';
-import * as roomActions from '../../../client/action/room';
-import {
-  openCreateRoom,
-  openPublicRooms,
-  openInviteUser,
-} from '../../../client/action/navigation';
 import { getEmojiForCompletion } from '../emoji-board/custom-emoji';
 import AsyncSearch from '../../../util/AsyncSearch';
 
@@ -22,37 +15,7 @@ import Text from '../../atoms/text/Text';
 import ScrollView from '../../atoms/scroll/ScrollView';
 import FollowingMembers from '../../molecules/following-members/FollowingMembers';
 import { addRecentEmoji, getRecentEmojis } from '../emoji-board/recent';
-
-const commands = [{
-  name: 'markdown',
-  description: 'Toggle markdown for messages.',
-  exe: () => toggleMarkdown(),
-}, {
-  name: 'startDM',
-  isOptions: true,
-  description: 'Start direct message with user. Example: /startDM/@johndoe.matrix.org',
-  exe: (roomId, searchTerm) => openInviteUser(undefined, searchTerm),
-}, {
-  name: 'createRoom',
-  description: 'Create new room',
-  exe: () => openCreateRoom(),
-}, {
-  name: 'join',
-  isOptions: true,
-  description: 'Join room with alias. Example: /join/#cinny:matrix.org',
-  exe: (roomId, searchTerm) => openPublicRooms(searchTerm),
-}, {
-  name: 'leave',
-  description: 'Leave current room',
-  exe: (roomId) => {
-    roomActions.leave(roomId);
-  },
-}, {
-  name: 'invite',
-  isOptions: true,
-  description: 'Invite user to room. Example: /invite/@johndoe:matrix.org',
-  exe: (roomId, searchTerm) => openInviteUser(roomId, searchTerm),
-}];
+import commands from './commands';
 
 function CmdItem({ onClick, children }) {
   return (
@@ -71,16 +34,16 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
     const cmdOptString = (typeof option === 'string') ? `/${option}` : '/?';
     return cmds.map((cmd) => (
       <CmdItem
-        key={cmd.name}
+        key={cmd}
         onClick={() => {
           fireCmd({
             prefix: cmdPrefix,
             option,
-            result: cmd,
+            result: commands[cmd],
           });
         }}
       >
-        <Text variant="b2">{`${cmd.name}${cmd.isOptions ? cmdOptString : ''}`}</Text>
+        <Text variant="b2">{`${cmd}${cmd.isOptions ? cmdOptString : ''}`}</Text>
       </CmdItem>
     ));
   }
@@ -209,8 +172,8 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
     const mx = initMatrix.matrixClient;
     const setupSearch = {
       '/': () => {
-        asyncSearch.setup(commands, { keys: ['name'], isContain: true });
-        setCmd({ prefix, suggestions: commands });
+        asyncSearch.setup(Object.keys(commands), { isContain: true });
+        setCmd({ prefix, suggestions: Object.keys(commands) });
       },
       ':': () => {
         const parentIds = initMatrix.roomList.getAllParentSpaces(roomId);
@@ -242,8 +205,9 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
   }
   function fireCmd(myCmd) {
     if (myCmd.prefix === '/') {
-      myCmd.result.exe(roomId, myCmd.option);
-      viewEvent.emit('cmd_fired');
+      viewEvent.emit('cmd_fired', {
+        replace: `/${myCmd.result.name}`,
+      });
     }
     if (myCmd.prefix === ':') {
       if (!myCmd.result.mxc) addRecentEmoji(myCmd.result.unicode);

src/app/organisms/room/RoomViewContent.jsx

@@ -118,7 +118,15 @@ function handleOnClickCapture(e) {
   }
 }
 
-function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) {
+function renderEvent(
+  roomTimeline,
+  mEvent,
+  prevMEvent,
+  isFocus,
+  isEdit,
+  setEdit,
+  cancelEdit,
+) {
   const isBodyOnly = (prevMEvent !== null
     && prevMEvent.getSender() === mEvent.getSender()
     && prevMEvent.getType() !== 'm.room.member'
@@ -147,6 +155,9 @@ function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) {
       roomTimeline={roomTimeline}
       focus={isFocus}
       fullTime={false}
+      isEdit={isEdit}
+      setEdit={setEdit}
+      cancelEdit={cancelEdit}
     />
   );
 }
@@ -386,6 +397,8 @@ function RoomViewContent({ eventId, roomTimeline }) {
   const timelineSVRef = useRef(null);
   const timelineScrollRef = useRef(null);
   const eventLimitRef = useRef(null);
+  const [editEventId, setEditEventId] = useState(null);
+  const cancelEdit = () => setEditEventId(null);
 
   const readUptoEvtStore = useStore(roomTimeline);
   const [onLimitUpdate, forceUpdateLimit] = useForceUpdate();
@@ -470,6 +483,42 @@ function RoomViewContent({ eventId, roomTimeline }) {
     }
   }, [newEvent]);
 
+  const listenKeyboard = useCallback((event) => {
+    if (event.ctrlKey || event.altKey || event.metaKey) return;
+    if (event.key !== 'ArrowUp') return;
+    if (navigation.isRawModalVisible) return;
+
+    if (document.activeElement.id !== 'message-textarea') return;
+    if (document.activeElement.value !== '') return;
+
+    const {
+      timeline: tl, activeTimeline, liveTimeline, matrixClient: mx,
+    } = roomTimeline;
+    const limit = eventLimitRef.current;
+    if (activeTimeline !== liveTimeline) return;
+    if (tl.length > limit.length) return;
+
+    const mTypes = ['m.text'];
+    for (let i = tl.length - 1; i >= 0; i -= 1) {
+      const mE = tl[i];
+      if (
+        mE.getSender() === mx.getUserId()
+        && mE.getType() === 'm.room.message'
+        && mTypes.includes(mE.getContent()?.msgtype)
+      ) {
+        setEditEventId(mE.getId());
+        return;
+      }
+    }
+  }, [roomTimeline]);
+
+  useEffect(() => {
+    document.body.addEventListener('keydown', listenKeyboard);
+    return () => {
+      document.body.removeEventListener('keydown', listenKeyboard);
+    };
+  }, [listenKeyboard]);
+
   const handleTimelineScroll = (event) => {
     const timelineScroll = timelineScrollRef.current;
     if (!event.target) return;
@@ -535,7 +584,15 @@ function RoomViewContent({ eventId, roomTimeline }) {
       const isFocus = focusId === mEvent.getId();
       if (isFocus) jumpToItemIndex = itemCountIndex;
 
-      tl.push(renderEvent(roomTimeline, mEvent, isNewEvent ? null : prevMEvent, isFocus));
+      tl.push(renderEvent(
+        roomTimeline,
+        mEvent,
+        isNewEvent ? null : prevMEvent,
+        isFocus,
+        editEventId === mEvent.getId(),
+        setEditEventId,
+        cancelEdit,
+      ));
       itemCountIndex += 1;
     }
     if (roomTimeline.canPaginateForward() || limit.length < timeline.length) {

src/app/organisms/room/RoomViewHeader.jsx

@@ -33,9 +33,10 @@ function RoomViewHeader({ roomId }) {
   const [, forceUpdate] = useForceUpdate();
   const mx = initMatrix.matrixClient;
   const isDM = initMatrix.roomList.directs.has(roomId);
-  let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
-  avatarSrc = isDM ? mx.getRoom(roomId).getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc;
-  const roomName = mx.getRoom(roomId).name;
+  const room = mx.getRoom(roomId);
+  let avatarSrc = room.getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
+  avatarSrc = isDM ? room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc;
+  const roomName = room.name;
 
   const roomHeaderBtnRef = useRef(null);
   useEffect(() => {
@@ -93,7 +94,7 @@ function RoomViewHeader({ roomId }) {
         </TitleWrapper>
         <RawIcon src={ChevronBottomIC} />
       </button>
-      <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} />
+      {mx.isRoomEncrypted(roomId) === false && <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} />}
       <IconButton className="room-header__drawer-btn" onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
       <IconButton className="room-header__members-btn" onClick={() => toggleRoomSettings(tabText.MEMBERS)} tooltip="Members" src={UserIC} />
       <IconButton

src/app/organisms/room/RoomViewInput.jsx

@@ -21,6 +21,7 @@ import ScrollView from '../../atoms/scroll/ScrollView';
 import { MessageReply } from '../../molecules/message/Message';
 
 import StickerBoard from '../sticker-board/StickerBoard';
+import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
 
 import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
 import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
@@ -29,10 +30,11 @@ import StickerIC from '../../../../public/res/ic/outlined/sticker.svg';
 import ShieldIC from '../../../../public/res/ic/outlined/shield.svg';
 import VLCIC from '../../../../public/res/ic/outlined/vlc.svg';
 import VolumeFullIC from '../../../../public/res/ic/outlined/volume-full.svg';
-import MarkdownIC from '../../../../public/res/ic/outlined/markdown.svg';
 import FileIC from '../../../../public/res/ic/outlined/file.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
+import commands from './commands';
+
 const CMD_REGEX = /(^\/|:|@)(\S*)$/;
 let isTyping = false;
 let isCmdActivated = false;
@@ -41,7 +43,6 @@ function RoomViewInput({
   roomId, roomTimeline, viewEvent,
 }) {
   const [attachment, setAttachment] = useState(null);
-  const [isMarkdown, setIsMarkdown] = useState(settings.isMarkdown);
   const [replyTo, setReplyTo] = useState(null);
 
   const textAreaRef = useRef(null);
@@ -60,11 +61,9 @@ function RoomViewInput({
   }
 
   useEffect(() => {
-    settings.on(cons.events.settings.MARKDOWN_TOGGLED, setIsMarkdown);
     roomsInput.on(cons.events.roomsInput.ATTACHMENT_SET, setAttachment);
     viewEvent.on('focus_msg_input', requestFocusInput);
     return () => {
-      settings.removeListener(cons.events.settings.MARKDOWN_TOGGLED, setIsMarkdown);
       roomsInput.removeListener(cons.events.roomsInput.ATTACHMENT_SET, setAttachment);
       viewEvent.removeListener('focus_msg_input', requestFocusInput);
     };
@@ -144,9 +143,11 @@ function RoomViewInput({
     textAreaRef.current.focus();
   }
 
-  function setUpReply(userId, eventId, body) {
+  function setUpReply(userId, eventId, body, formattedBody) {
     setReplyTo({ userId, eventId, body });
-    roomsInput.setReplyTo(roomId, { userId, eventId, body });
+    roomsInput.setReplyTo(roomId, {
+      userId, eventId, body, formattedBody,
+    });
     focusInput();
   }
 
@@ -182,30 +183,57 @@ function RoomViewInput({
     };
   }, [roomId]);
 
-  const sendMessage = async () => {
-    requestAnimationFrame(() => deactivateCmdAndEmit());
-    const msgBody = textAreaRef.current.value;
+  const sendBody = async (body, options) => {
+    const opt = options ?? {};
+    if (!opt.msgType) opt.msgType = 'm.text';
+    if (typeof opt.autoMarkdown !== 'boolean') opt.autoMarkdown = true;
     if (roomsInput.isSending(roomId)) return;
-    if (msgBody.trim() === '' && attachment === null) return;
     sendIsTyping(false);
 
-    roomsInput.setMessage(roomId, msgBody);
+    roomsInput.setMessage(roomId, body);
     if (attachment !== null) {
       roomsInput.setAttachment(roomId, attachment);
     }
     textAreaRef.current.disabled = true;
     textAreaRef.current.style.cursor = 'not-allowed';
-    await roomsInput.sendInput(roomId);
+    await roomsInput.sendInput(roomId, opt);
     textAreaRef.current.disabled = false;
     textAreaRef.current.style.cursor = 'unset';
     focusInput();
 
     textAreaRef.current.value = roomsInput.getMessage(roomId);
-    viewEvent.emit('message_sent');
     textAreaRef.current.style.height = 'unset';
     if (replyTo !== null) setReplyTo(null);
   };
 
+  const processCommand = (cmdBody) => {
+    const spaceIndex = cmdBody.indexOf(' ');
+    const cmdName = cmdBody.slice(1, spaceIndex > -1 ? spaceIndex : undefined);
+    const cmdData = spaceIndex > -1 ? cmdBody.slice(spaceIndex + 1) : '';
+    if (!commands[cmdName]) {
+      confirmDialog('Invalid Command', `"${cmdName}" is not a valid command.`, 'Alright');
+      return;
+    }
+    if (['me', 'shrug', 'plain'].includes(cmdName)) {
+      commands[cmdName].exe(roomId, cmdData, sendBody);
+      return;
+    }
+    commands[cmdName].exe(roomId, cmdData);
+  };
+
+  const sendMessage = async () => {
+    requestAnimationFrame(() => deactivateCmdAndEmit());
+    const msgBody = textAreaRef.current.value.trim();
+    if (msgBody.startsWith('/')) {
+      processCommand(msgBody.trim());
+      textAreaRef.current.value = '';
+      textAreaRef.current.style.height = 'unset';
+      return;
+    }
+    if (msgBody === '' && attachment === null) return;
+    sendBody(msgBody);
+  };
+
   const handleSendSticker = async (data) => {
     roomsInput.sendSticker(roomId, data);
   };
@@ -263,6 +291,11 @@ function RoomViewInput({
   };
 
   const handleKeyDown = (e) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      roomsInput.cancelReplyTo(roomId);
+      setReplyTo(null);
+    }
     if (e.key === 'Enter' && e.shiftKey === false) {
       e.preventDefault();
       sendMessage();
@@ -347,7 +380,6 @@ function RoomViewInput({
               />
             </Text>
           </ScrollView>
-          {isMarkdown && <RawIcon size="extra-small" src={MarkdownIC} />}
         </div>
         <div ref={rightOptionsRef} className="room-input__option-container">
           <IconButton
@@ -421,6 +453,7 @@ function RoomViewInput({
         />
         <MessageReply
           userId={replyTo.userId}
+          onKeyDown={handleKeyDown}
           name={getUsername(replyTo.userId)}
           color={colorMXID(replyTo.userId)}
           body={replyTo.body}

src/app/organisms/room/RoomViewInput.scss

@@ -70,6 +70,7 @@
   &__preview > img {
     max-height: 40px;
     border-radius: var(--bo-radius);
+    max-width: 150px;
   }
   &__icon {
     padding: var(--sp-extra-tight);

src/app/organisms/room/commands.jsx

@@ -0,0 +1,220 @@
+import React from 'react';
+import './commands.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import * as roomActions from '../../../client/action/room';
+import { hasDMWith, hasDevices } from '../../../util/matrixUtil';
+import { selectRoom, openReusableDialog } from '../../../client/action/navigation';
+
+import Text from '../../atoms/text/Text';
+import SettingTile from '../../molecules/setting-tile/SettingTile';
+
+const MXID_REG = /^@\S+:\S+$/;
+const ROOM_ID_ALIAS_REG = /^(#|!)\S+:\S+$/;
+const ROOM_ID_REG = /^!\S+:\S+$/;
+const MXC_REG = /^mxc:\/\/\S+$/;
+
+export function processMxidAndReason(data) {
+  let reason;
+  let idData = data;
+  const reasonMatch = data.match(/\s-r\s/);
+  if (reasonMatch) {
+    idData = data.slice(0, reasonMatch.index);
+    reason = data.slice(reasonMatch.index + reasonMatch[0].length);
+    if (reason.trim() === '') reason = undefined;
+  }
+  const rawIds = idData.split(' ');
+  const userIds = rawIds.filter((id) => id.match(MXID_REG));
+  return {
+    userIds,
+    reason,
+  };
+}
+
+const commands = {
+  me: {
+    name: 'me',
+    description: 'Display action',
+    exe: (roomId, data, onSuccess) => {
+      const body = data.trim();
+      if (body === '') return;
+      onSuccess(body, { msgType: 'm.emote' });
+    },
+  },
+  shrug: {
+    name: 'shrug',
+    description: 'Send ¯\\_(ツ)_/¯ as message',
+    exe: (roomId, data, onSuccess) => onSuccess(
+      `¯\\_(ツ)_/¯${data.trim() !== '' ? ` ${data}` : ''}`,
+      { msgType: 'm.text' },
+    ),
+  },
+  plain: {
+    name: 'plain',
+    description: 'Send plain text message',
+    exe: (roomId, data, onSuccess) => {
+      const body = data.trim();
+      if (body === '') return;
+      onSuccess(body, { msgType: 'm.text', autoMarkdown: false });
+    },
+  },
+  help: {
+    name: 'help',
+    description: 'View all commands',
+    // eslint-disable-next-line no-use-before-define
+    exe: () => openHelpDialog(),
+  },
+  startdm: {
+    name: 'startdm',
+    description: 'Start direct message with user. Example: /startdm userId1',
+    exe: async (roomId, data) => {
+      const mx = initMatrix.matrixClient;
+      const rawIds = data.split(' ');
+      const userIds = rawIds.filter((id) => id.match(MXID_REG) && id !== mx.getUserId());
+      if (userIds.length === 0) return;
+      if (userIds.length === 1) {
+        const dmRoomId = hasDMWith(userIds[0]);
+        if (dmRoomId) {
+          selectRoom(dmRoomId);
+          return;
+        }
+      }
+      const devices = await Promise.all(userIds.map(hasDevices));
+      const isEncrypt = devices.every((hasDevice) => hasDevice);
+      const result = await roomActions.createDM(userIds, isEncrypt);
+      selectRoom(result.room_id);
+    },
+  },
+  join: {
+    name: 'join',
+    description: 'Join room with address. Example: /join address1 address2',
+    exe: (roomId, data) => {
+      const rawIds = data.split(' ');
+      const roomIds = rawIds.filter((id) => id.match(ROOM_ID_ALIAS_REG));
+      roomIds.map((id) => roomActions.join(id));
+    },
+  },
+  leave: {
+    name: 'leave',
+    description: 'Leave current room.',
+    exe: (roomId, data) => {
+      if (data.trim() === '') {
+        roomActions.leave(roomId);
+        return;
+      }
+      const rawIds = data.split(' ');
+      const roomIds = rawIds.filter((id) => id.match(ROOM_ID_REG));
+      roomIds.map((id) => roomActions.leave(id));
+    },
+  },
+  invite: {
+    name: 'invite',
+    description: 'Invite user to room. Example: /invite userId1 userId2 [-r reason]',
+    exe: (roomId, data) => {
+      const { userIds, reason } = processMxidAndReason(data);
+      userIds.map((id) => roomActions.invite(roomId, id, reason));
+    },
+  },
+  disinvite: {
+    name: 'disinvite',
+    description: 'Disinvite user to room. Example: /disinvite userId1 userId2 [-r reason]',
+    exe: (roomId, data) => {
+      const { userIds, reason } = processMxidAndReason(data);
+      userIds.map((id) => roomActions.kick(roomId, id, reason));
+    },
+  },
+  kick: {
+    name: 'kick',
+    description: 'Kick user from room. Example: /kick userId1 userId2 [-r reason]',
+    exe: (roomId, data) => {
+      const { userIds, reason } = processMxidAndReason(data);
+      userIds.map((id) => roomActions.kick(roomId, id, reason));
+    },
+  },
+  ban: {
+    name: 'ban',
+    description: 'Ban user from room. Example: /ban userId1 userId2 [-r reason]',
+    exe: (roomId, data) => {
+      const { userIds, reason } = processMxidAndReason(data);
+      userIds.map((id) => roomActions.ban(roomId, id, reason));
+    },
+  },
+  unban: {
+    name: 'unban',
+    description: 'Unban user from room. Example: /unban userId1 userId2',
+    exe: (roomId, data) => {
+      const rawIds = data.split(' ');
+      const userIds = rawIds.filter((id) => id.match(MXID_REG));
+      userIds.map((id) => roomActions.unban(roomId, id));
+    },
+  },
+  ignore: {
+    name: 'ignore',
+    description: 'Ignore user. Example: /ignore userId1 userId2',
+    exe: (roomId, data) => {
+      const rawIds = data.split(' ');
+      const userIds = rawIds.filter((id) => id.match(MXID_REG));
+      if (userIds.length > 0) roomActions.ignore(userIds);
+    },
+  },
+  unignore: {
+    name: 'unignore',
+    description: 'Unignore user. Example: /unignore userId1 userId2',
+    exe: (roomId, data) => {
+      const rawIds = data.split(' ');
+      const userIds = rawIds.filter((id) => id.match(MXID_REG));
+      if (userIds.length > 0) roomActions.unignore(userIds);
+    },
+  },
+  myroomnick: {
+    name: 'myroomnick',
+    description: 'Change nick in current room.',
+    exe: (roomId, data) => {
+      const nick = data.trim();
+      if (nick === '') return;
+      roomActions.setMyRoomNick(roomId, nick);
+    },
+  },
+  myroomavatar: {
+    name: 'myroomavatar',
+    description: 'Change profile picture in current room. Example /myroomavatar mxc://xyzabc',
+    exe: (roomId, data) => {
+      if (data.match(MXC_REG)) {
+        roomActions.setMyRoomAvatar(roomId, data);
+      }
+    },
+  },
+  converttodm: {
+    name: 'converttodm',
+    description: 'Convert room to direct message',
+    exe: (roomId) => {
+      roomActions.convertToDm(roomId);
+    },
+  },
+  converttoroom: {
+    name: 'converttoroom',
+    description: 'Convert direct message to room',
+    exe: (roomId) => {
+      roomActions.convertToRoom(roomId);
+    },
+  },
+};
+
+function openHelpDialog() {
+  openReusableDialog(
+    <Text variant="s1" weight="medium">Commands</Text>,
+    () => (
+      <div className="commands-dialog">
+        {Object.keys(commands).map((cmdName) => (
+          <SettingTile
+            key={cmdName}
+            title={cmdName}
+            content={<Text variant="b3">{commands[cmdName].description}</Text>}
+          />
+        ))}
+      </div>
+    ),
+  );
+}
+
+export default commands;

src/app/organisms/room/commands.scss

@@ -0,0 +1,10 @@
+.commands-dialog {
+  & > * {
+    padding: var(--sp-tight) var(--sp-normal);
+    border-bottom: 1px solid var(--bg-surface-border);
+    &:last-child {
+      border-bottom: none;
+      margin-bottom: var(--sp-extra-loose);
+    }
+  }
+}

src/app/organisms/room/common.jsx

@@ -164,7 +164,7 @@ function getUsersActionJsx(roomId, userIds, actionStr) {
 
   const othersCount = userIds.length - MAX_VISIBLE_COUNT;
   // eslint-disable-next-line react/jsx-one-expression-per-line
-  return <>{u1Jsx}, {u2Jsx}, {u3Jsx} and {othersCount} other are {actionStr}</>;
+  return <>{u1Jsx}, {u2Jsx}, {u3Jsx} and {othersCount} others are {actionStr}</>;
 }
 
 function parseTimelineChange(mEvent) {

src/app/organisms/search/Search.jsx

@@ -168,7 +168,7 @@ function Search() {
     }
   };
 
-  const notifs = initMatrix.notifications;
+  const noti = initMatrix.notifications;
   const renderRoomSelector = (item) => {
     let imageSrc = null;
     let iconSrc = null;
@@ -178,9 +178,6 @@ function Search() {
       iconSrc = joinRuleToIconSrc(item.room.getJoinRule(), item.type === 'space');
     }
 
-    const isUnread = notifs.hasNoti(item.roomId);
-    const noti = notifs.getNoti(item.roomId);
-
     return (
       <RoomSelector
         key={item.roomId}
@@ -189,9 +186,9 @@ function Search() {
         roomId={item.roomId}
         imageSrc={imageSrc}
         iconSrc={iconSrc}
-        isUnread={isUnread}
-        notificationCount={noti.total}
-        isAlert={noti.highlight > 0}
+        isUnread={noti.hasNoti(item.roomId)}
+        notificationCount={noti.getTotalNoti(item.roomId)}
+        isAlert={noti.getHighlightNoti(item.roomId) > 0}
         onClick={() => openItem(item.roomId, item.type)}
       />
     );
@@ -207,7 +204,7 @@ function Search() {
       size="small"
     >
       <div className="search-dialog">
-        <form className="search-dialog__input" onSubmit={(e) => { e.preventDefault(); openFirstResult()}}>
+        <form className="search-dialog__input" onSubmit={(e) => { e.preventDefault(); openFirstResult(); }}>
           <RawIcon src={SearchIC} size="small" />
           <Input
             onChange={handleOnChange}

src/app/organisms/settings/DeviceManage.jsx

@@ -180,13 +180,15 @@ function DeviceManage() {
         }
         content={(
           <>
-            <Text variant="b3">
-              Last activity
-              <span style={{ color: 'var(--tc-surface-normal)' }}>
-                {dateFormat(new Date(lastTS), ' hh:MM TT, dd/mm/yyyy')}
-              </span>
-              {lastIP ? ` at ${lastIP}` : ''}
-            </Text>
+            {lastTS && (
+              <Text variant="b3">
+                Last activity
+                <span style={{ color: 'var(--tc-surface-normal)' }}>
+                  {dateFormat(new Date(lastTS), ' hh:MM TT, dd/mm/yyyy')}
+                </span>
+                {lastIP ? ` at ${lastIP}` : ''}
+              </Text>
+            )}
             {isCurrentDevice && (
               <Text style={{ marginTop: 'var(--sp-ultra-tight)' }} variant="b3">
                 {`Session Key: ${initMatrix.matrixClient.getDeviceEd25519Key().match(/.{1,4}/g).join(' ')}`}

src/app/organisms/settings/Settings.jsx

@@ -9,7 +9,6 @@ import {
   toggleSystemTheme, toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents,
   toggleNotifications, toggleNotificationSounds,
 } from '../../../client/action/settings';
-import logout from '../../../client/action/logout';
 import { usePermission } from '../../hooks/usePermission';
 
 import Text from '../../atoms/text/Text';
@@ -25,6 +24,9 @@ import SettingTile from '../../molecules/setting-tile/SettingTile';
 import ImportE2ERoomKeys from '../../molecules/import-export-e2e-room-keys/ImportE2ERoomKeys';
 import ExportE2ERoomKeys from '../../molecules/import-export-e2e-room-keys/ExportE2ERoomKeys';
 import { ImagePackUser, ImagePackGlobal } from '../../molecules/image-pack/ImagePack';
+import GlobalNotification from '../../molecules/global-notification/GlobalNotification';
+import KeywordNotification from '../../molecules/global-notification/KeywordNotification';
+import IgnoreUserList from '../../molecules/global-notification/IgnoreUserList';
 
 import ProfileEditor from '../profile-editor/ProfileEditor';
 import CrossSigning from './CrossSigning';
@@ -150,24 +152,29 @@ function NotificationsSection() {
   };
 
   return (
-    <div className="settings-notifications">
-      <MenuHeader>Notification & Sound</MenuHeader>
-      <SettingTile
-        title="Desktop notification"
-        options={renderOptions()}
-        content={<Text variant="b3">Show desktop notification when new messages arrive.</Text>}
-      />
-      <SettingTile
-        title="Notification Sound"
-        options={(
-          <Toggle
-            isActive={settings.isNotificationSounds}
-            onToggle={() => { toggleNotificationSounds(); updateState({}); }}
-          />
-          )}
-        content={<Text variant="b3">Play sound when new messages arrive.</Text>}
-      />
-    </div>
+    <>
+      <div className="settings-notifications">
+        <MenuHeader>Notification & Sound</MenuHeader>
+        <SettingTile
+          title="Desktop notification"
+          options={renderOptions()}
+          content={<Text variant="b3">Show desktop notification when new messages arrive.</Text>}
+        />
+        <SettingTile
+          title="Notification Sound"
+          options={(
+            <Toggle
+              isActive={settings.isNotificationSounds}
+              onToggle={() => { toggleNotificationSounds(); updateState({}); }}
+            />
+            )}
+          content={<Text variant="b3">Play sound when new messages arrive.</Text>}
+        />
+      </div>
+      <GlobalNotification />
+      <KeywordNotification />
+      <IgnoreUserList />
+    </>
   );
 }
 
@@ -231,6 +238,7 @@ function AboutSection() {
             <div className="settings-about__btns">
               <Button onClick={() => window.open('https://github.com/ajbura/cinny')}>Source code</Button>
               <Button onClick={() => window.open('https://cinny.in/#sponsor')}>Support</Button>
+              <Button onClick={() => initMatrix.clearCacheAndReload()} variant="danger">Clear cache & reload</Button>
             </div>
           </div>
         </div>
@@ -319,7 +327,7 @@ function Settings() {
   const handleTabChange = (tabItem) => setSelectedTab(tabItem);
   const handleLogout = async () => {
     if (await confirmDialog('Logout', 'Are you sure that you want to logout your session?', 'Logout', 'danger')) {
-      logout();
+      initMatrix.logout();
     }
   };
 

src/app/organisms/settings/Settings.scss

@@ -38,6 +38,9 @@
 }
 .settings-appearance__card,
 .settings-notifications,
+.global-notification,
+.keyword-notification,
+.ignore-user-list,
 .settings-security__card,
 .settings-security .device-manage,
 .settings-about__card,

src/app/organisms/view-source/ViewSource.scss

@@ -5,6 +5,8 @@
 
   & pre {
     padding: var(--sp-extra-tight);
+    white-space: pre-wrap;
+    word-break: break-all;
   }
 
   &__card {

src/app/templates/client/Client.jsx

@@ -7,18 +7,21 @@ import { initRoomListListener } from '../../../client/event/roomList';
 import Text from '../../atoms/text/Text';
 import Spinner from '../../atoms/spinner/Spinner';
 import Navigation from '../../organisms/navigation/Navigation';
+import ContextMenu, { MenuItem } from '../../atoms/context-menu/ContextMenu';
+import IconButton from '../../atoms/button/IconButton';
 import ReusableContextMenu from '../../atoms/context-menu/ReusableContextMenu';
 import Room from '../../organisms/room/Room';
 import Windows from '../../organisms/pw/Windows';
 import Dialogs from '../../organisms/pw/Dialogs';
 import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
-import logout from '../../../client/action/logout';
 
 import initMatrix from '../../../client/initMatrix';
 import navigation from '../../../client/state/navigation';
 import cons from '../../../client/state/cons';
 import DragDrop from '../../organisms/drag-drop/DragDrop';
 
+import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
+
 function Client() {
   const [isLoading, changeLoading] = useState(true);
   const [loadingMsg, setLoadingMsg] = useState('Heating up');
@@ -74,9 +77,20 @@ function Client() {
   if (isLoading) {
     return (
       <div className="loading-display">
-        <button className="loading__logout" onClick={logout} type="button">
-          <Text variant="b3">Logout</Text>
-        </button>
+        <div className="loading__menu">
+          <ContextMenu
+            placement="bottom"
+            content={(
+              <>
+                <MenuItem onClick={() => initMatrix.clearCacheAndReload()}>
+                  Clear cache & reload
+                </MenuItem>
+                <MenuItem onClick={() => initMatrix.logout()}>Logout</MenuItem>
+              </>
+            )}
+            render={(toggle) => <IconButton size="extra-small" onClick={toggle} src={VerticalMenuIC} />}
+          />
+        </div>
         <Spinner />
         <Text className="loading__message" variant="b2">{loadingMsg}</Text>
 

src/app/templates/client/Client.scss

@@ -45,12 +45,12 @@
   position: absolute;
   bottom: var(--sp-normal);
 }
-.loading__logout {
+.loading__menu {
   position: absolute;
-  bottom: var(--sp-extra-tight);
+  top: var(--sp-extra-tight);
   right: var(--sp-extra-tight);
   cursor: pointer;
-  .text {
-    color: var(--tc-link);
+  .context-menu__item .text {
+    margin: 0 !important;
   }
 }

src/client/action/logout.js

@@ -1,16 +0,0 @@
-import initMatrix from '../initMatrix';
-
-async function logout() {
-  const mx = initMatrix.matrixClient;
-  mx.stopClient();
-  try {
-    await mx.logout();
-  } catch {
-    // ignore if failed to logout
-  }
-  mx.clearStores();
-  window.localStorage.clear();
-  window.location.reload();
-}
-
-export default logout;

src/client/action/navigation.js

@@ -139,12 +139,13 @@ export function openViewSource(event) {
   });
 }
 
-export function replyTo(userId, eventId, body) {
+export function replyTo(userId, eventId, body, formattedBody) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.CLICK_REPLY_TO,
     userId,
     eventId,
     body,
+    formattedBody,
   });
 }
 

src/client/action/room.js

@@ -6,7 +6,7 @@ import { getIdServer } from '../../util/matrixUtil';
 /**
  * https://github.com/matrix-org/matrix-react-sdk/blob/1e6c6e9d800890c732d60429449bc280de01a647/src/Rooms.js#L73
  * @param {string} roomId Id of room to add
- * @param {string} userId User id to which dm
+ * @param {string} userId User id to which dm || undefined to remove
  * @returns {Promise} A promise
  */
 function addRoomToMDirect(roomId, userId) {
@@ -79,13 +79,23 @@ function guessDMRoomTargetId(room, myUserId) {
   return oldestMember.userId;
 }
 
+function convertToDm(roomId) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  return addRoomToMDirect(roomId, guessDMRoomTargetId(room, mx.getUserId()));
+}
+
+function convertToRoom(roomId) {
+  return addRoomToMDirect(roomId, undefined);
+}
+
 /**
  *
  * @param {string} roomId
  * @param {boolean} isDM
  * @param {string[]} via
  */
-async function join(roomIdOrAlias, isDM, via) {
+async function join(roomIdOrAlias, isDM = false, via = undefined) {
   const mx = initMatrix.matrixClient;
   const roomIdParts = roomIdOrAlias.split(':');
   const viaServers = via || [roomIdParts[1]];
@@ -150,10 +160,10 @@ async function create(options, isDM = false) {
   }
 }
 
-async function createDM(userId, isEncrypted = true) {
+async function createDM(userIdOrIds, isEncrypted = true) {
   const options = {
     is_direct: true,
-    invite: [userId],
+    invite: Array.isArray(userIdOrIds) ? userIdOrIds : [userIdOrIds],
     visibility: 'private',
     preset: 'trusted_private_chat',
     initial_state: [],
@@ -262,10 +272,10 @@ async function createRoom(opts) {
   return result;
 }
 
-async function invite(roomId, userId) {
+async function invite(roomId, userId, reason) {
   const mx = initMatrix.matrixClient;
 
-  const result = await mx.invite(roomId, userId);
+  const result = await mx.invite(roomId, userId, undefined, reason);
   return result;
 }
 
@@ -290,6 +300,21 @@ async function unban(roomId, userId) {
   return result;
 }
 
+async function ignore(userIds) {
+  const mx = initMatrix.matrixClient;
+
+  let ignoredUsers = mx.getIgnoredUsers().concat(userIds);
+  ignoredUsers = [...new Set(ignoredUsers)];
+  await mx.setIgnoredUsers(ignoredUsers);
+}
+
+async function unignore(userIds) {
+  const mx = initMatrix.matrixClient;
+
+  const ignoredUsers = mx.getIgnoredUsers();
+  await mx.setIgnoredUsers(ignoredUsers.filter((id) => !userIds.includes(id)));
+}
+
 async function setPowerLevel(roomId, userId, powerLevel) {
   const mx = initMatrix.matrixClient;
   const room = mx.getRoom(roomId);
@@ -300,9 +325,37 @@ async function setPowerLevel(roomId, userId, powerLevel) {
   return result;
 }
 
+async function setMyRoomNick(roomId, nick) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  const mEvent = room.currentState.getStateEvents('m.room.member', mx.getUserId());
+  const content = mEvent?.getContent();
+  if (!content) return;
+  await mx.sendStateEvent(roomId, 'm.room.member', {
+    ...content,
+    displayname: nick,
+  }, mx.getUserId());
+}
+
+async function setMyRoomAvatar(roomId, mxc) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  const mEvent = room.currentState.getStateEvents('m.room.member', mx.getUserId());
+  const content = mEvent?.getContent();
+  if (!content) return;
+  await mx.sendStateEvent(roomId, 'm.room.member', {
+    ...content,
+    avatar_url: mxc,
+  }, mx.getUserId());
+}
+
 export {
+  convertToDm,
+  convertToRoom,
   join, leave,
   createDM, createRoom,
   invite, kick, ban, unban,
+  ignore, unignore,
   setPowerLevel,
+  setMyRoomNick, setMyRoomAvatar,
 };

src/client/event/roomList.js

@@ -4,6 +4,17 @@ import { selectTab, selectSpace, selectRoom } from '../action/navigation';
 
 function initRoomListListener(roomList) {
   const listenRoomLeave = (roomId) => {
+    const parents = roomList.roomIdToParents.get(roomId);
+
+    if (parents) {
+      [...parents].forEach((pId) => {
+        const data = navigation.spaceToRoom.get(pId);
+        if (data?.roomId === roomId) {
+          navigation.spaceToRoom.delete(pId);
+        }
+      });
+    }
+
     if (navigation.selectedRoomId === roomId) {
       selectRoom(null);
     }
@@ -13,6 +24,8 @@ function initRoomListListener(roomList) {
       if (idIndex === 0) selectTab(cons.tabs.HOME);
       else selectSpace(navigation.selectedSpacePath[idIndex - 1]);
     }
+
+    navigation.removeRecentRoom(roomId);
   };
 
   roomList.on(cons.events.roomList.ROOM_LEAVED, listenRoomLeave);

src/client/initMatrix.js

@@ -8,12 +8,19 @@ import AccountData from './state/AccountData';
 import RoomsInput from './state/RoomsInput';
 import Notifications from './state/Notifications';
 import { cryptoCallbacks } from './state/secretStorageKeys';
+import navigation from './state/navigation';
 
 global.Olm = require('@matrix-org/olm');
 
 // logger.disableAll();
 
 class InitMatrix extends EventEmitter {
+  constructor() {
+    super();
+
+    navigation.initMatrix = this;
+  }
+
   async init() {
     await this.startClient();
     this.setupSync();
@@ -60,7 +67,7 @@ class InitMatrix extends EventEmitter {
       },
       PREPARED: (prevState) => {
         console.log('PREPARED state');
-        console.log('previous state: ', prevState);
+        console.log('Previous state: ', prevState);
         // TODO: remove global.initMatrix at end
         global.initMatrix = this;
         if (prevState === null) {
@@ -69,6 +76,9 @@ class InitMatrix extends EventEmitter {
           this.roomsInput = new RoomsInput(this.matrixClient, this.roomList);
           this.notifications = new Notifications(this.roomList);
           this.emit('init_loading_finished');
+          this.notifications._initNoti();
+        } else {
+          this.notifications._initNoti();
         }
       },
       RECONNECTING: () => {
@@ -88,13 +98,32 @@ class InitMatrix extends EventEmitter {
   }
 
   listenEvents() {
-    this.matrixClient.on('Session.logged_out', () => {
+    this.matrixClient.on('Session.logged_out', async () => {
       this.matrixClient.stopClient();
-      this.matrixClient.clearStores();
+      await this.matrixClient.clearStores();
       window.localStorage.clear();
       window.location.reload();
     });
   }
+
+  async logout() {
+    this.matrixClient.stopClient();
+    try {
+      await this.matrixClient.logout();
+    } catch {
+      // ignore if failed to logout
+    }
+    await this.matrixClient.clearStores();
+    window.localStorage.clear();
+    window.location.reload();
+  }
+
+  clearCacheAndReload() {
+    this.matrixClient.stopClient();
+    this.matrixClient.store.deleteAllData().then(() => {
+      window.location.reload();
+    });
+  }
 }
 
 const initMatrix = new InitMatrix();

src/client/state/Notifications.js

@@ -5,6 +5,12 @@ import { selectRoom } from '../action/navigation';
 import cons from './cons';
 import navigation from './navigation';
 import settings from './settings';
+import { setFavicon } from '../../util/common';
+
+import LogoSVG from '../../../public/res/svg/cinny.svg';
+import LogoUnreadSVG from '../../../public/res/svg/cinny-unread.svg';
+import LogoHighlightSVG from '../../../public/res/svg/cinny-highlight.svg';
+import { html, plain } from '../../util/markdown';
 
 function isNotifEvent(mEvent) {
   const eType = mEvent.getType();
@@ -32,22 +38,26 @@ class Notifications extends EventEmitter {
   constructor(roomList) {
     super();
 
+    this.initialized = false;
+    this.favicon = LogoSVG;
     this.matrixClient = roomList.matrixClient;
     this.roomList = roomList;
 
     this.roomIdToNoti = new Map();
+    this.roomIdToPopupNotis = new Map();
+    this.eventIdToPopupNoti = new Map();
 
-    this._initNoti();
+    // this._initNoti();
     this._listenEvents();
 
     // Ask for permission by default after loading
     window.Notification?.requestPermission();
-
-    // TODO:
-    window.notifications = this;
   }
 
-  _initNoti() {
+  async _initNoti() {
+    this.initialized = false;
+    this.roomIdToNoti = new Map();
+
     const addNoti = (roomId) => {
       const room = this.matrixClient.getRoom(roomId);
       if (this.getNotiType(room.roomId) === cons.notifs.MUTE) return;
@@ -59,6 +69,9 @@ class Notifications extends EventEmitter {
     };
     [...this.roomList.rooms].forEach(addNoti);
     [...this.roomList.directs].forEach(addNoti);
+
+    this.initialized = true;
+    this._updateFavicon();
   }
 
   doesRoomHaveUnread(room) {
@@ -129,6 +142,30 @@ class Notifications extends EventEmitter {
     }
   }
 
+  async _updateFavicon() {
+    if (!this.initialized) return;
+    let unread = false;
+    let highlight = false;
+    [...this.roomIdToNoti.values()].find((noti) => {
+      if (!unread) {
+        unread = noti.total > 0 || noti.highlight > 0;
+      }
+      highlight = noti.highlight > 0;
+      if (unread && highlight) return true;
+      return false;
+    });
+    let newFavicon = LogoSVG;
+    if (unread && !highlight) {
+      newFavicon = LogoUnreadSVG;
+    }
+    if (unread && highlight) {
+      newFavicon = LogoHighlightSVG;
+    }
+    if (newFavicon === this.favicon) return;
+    this.favicon = newFavicon;
+    setFavicon(this.favicon);
+  }
+
   _setNoti(roomId, total, highlight) {
     const addNoti = (id, t, h, fromId) => {
       const prevTotal = this.roomIdToNoti.get(id)?.total ?? null;
@@ -146,7 +183,7 @@ class Notifications extends EventEmitter {
     };
 
     const noti = this.getNoti(roomId);
-    const addT = total - noti.total;
+    const addT = (highlight > total ? highlight : total) - noti.total;
     const addH = highlight - noti.highlight;
     if (addT < 0 || addH < 0) return;
 
@@ -155,6 +192,7 @@ class Notifications extends EventEmitter {
     allParentSpaces.forEach((spaceId) => {
       addNoti(spaceId, addT, addH, roomId);
     });
+    this._updateFavicon();
   }
 
   _deleteNoti(roomId, total, highlight) {
@@ -187,6 +225,7 @@ class Notifications extends EventEmitter {
     allParentSpaces.forEach((spaceId) => {
       removeNoti(spaceId, total, highlight, roomId);
     });
+    this._updateFavicon();
   }
 
   async _displayPopupNoti(mEvent, room) {
@@ -219,20 +258,51 @@ class Notifications extends EventEmitter {
         scale: 8,
       });
 
+      const content = mEvent.getContent();
+
+      const state = { kind: 'notification', onlyPlain: true };
+      let body;
+      if (content.format === 'org.matrix.custom.html') {
+        body = html(content.formatted_body, state);
+      } else {
+        body = plain(content.body, state);
+      }
+
       const noti = new window.Notification(title, {
-        body: mEvent.getContent().body,
+        body: body.plain,
         icon,
+        tag: mEvent.getId(),
         silent: settings.isNotificationSounds,
       });
       if (settings.isNotificationSounds) {
         noti.onshow = () => this._playNotiSound();
       }
       noti.onclick = () => selectRoom(room.roomId, mEvent.getId());
+
+      this.eventIdToPopupNoti.set(mEvent.getId(), noti);
+      if (this.roomIdToPopupNotis.has(room.roomId)) {
+        this.roomIdToPopupNotis.get(room.roomId).push(noti);
+      } else {
+        this.roomIdToPopupNotis.set(room.roomId, [noti]);
+      }
     } else {
       this._playNotiSound();
     }
   }
 
+  _deletePopupNoti(eventId) {
+    this.eventIdToPopupNoti.get(eventId)?.close();
+    this.eventIdToPopupNoti.delete(eventId);
+  }
+
+  _deletePopupRoomNotis(roomId) {
+    this.roomIdToPopupNotis.get(roomId)?.forEach((n) => {
+      this.eventIdToPopupNoti.delete(n.tag);
+      n.close();
+    });
+    this.roomIdToPopupNotis.delete(roomId);
+  }
+
   _playNotiSound() {
     if (!this._notiAudio) {
       this._notiAudio = document.getElementById('notificationSound');
@@ -249,6 +319,8 @@ class Notifications extends EventEmitter {
 
   _listenEvents() {
     this.matrixClient.on('Room.timeline', (mEvent, room) => {
+      if (mEvent.isRedaction()) this._deletePopupNoti(mEvent.event.redacts);
+
       if (room.isSpaceRoom()) return;
       if (!isNotifEvent(mEvent)) return;
 
@@ -319,6 +391,8 @@ class Notifications extends EventEmitter {
         if (readerUserId !== this.matrixClient.getUserId()) return;
 
         this.deleteNoti(room.roomId);
+
+        this._deletePopupRoomNotis(room.roomId);
       }
     });
 

src/client/state/RoomList.js

@@ -89,7 +89,7 @@ class RoomList extends EventEmitter {
 
       child.forEach((childId) => {
         const room = this.matrixClient.getRoom(childId);
-        if (room === null) return;
+        if (room === null || room.getMyMembership() !== 'join') return;
         if (room.isSpaceRoom()) categorizeSpace(childId);
         else mappedChild.add(childId);
       });
@@ -257,10 +257,10 @@ class RoomList extends EventEmitter {
       const latestMDirects = this.getMDirects();
 
       latestMDirects.forEach((directId) => {
-        const myRoom = this.matrixClient.getRoom(directId);
         if (this.mDirects.has(directId)) return;
         this.mDirects.add(directId);
 
+        const myRoom = this.matrixClient.getRoom(directId);
         if (myRoom === null) return;
         if (myRoom.getMyMembership() === 'join') {
           this.directs.add(directId);
@@ -268,6 +268,19 @@ class RoomList extends EventEmitter {
           this.emit(cons.events.roomList.ROOMLIST_UPDATED);
         }
       });
+
+      [...this.directs].forEach((directId) => {
+        if (latestMDirects.has(directId)) return;
+        this.mDirects.delete(directId);
+
+        const myRoom = this.matrixClient.getRoom(directId);
+        if (myRoom === null) return;
+        if (myRoom.getMyMembership() === 'join') {
+          this.directs.delete(directId);
+          this.rooms.add(directId);
+          this.emit(cons.events.roomList.ROOMLIST_UPDATED);
+        }
+      });
     });
 
     this.matrixClient.on('Room.name', (room) => {

src/client/state/RoomsInput.js

@@ -1,18 +1,14 @@
 import EventEmitter from 'events';
-import { micromark } from 'micromark';
-import { gfm, gfmHtml } from 'micromark-extension-gfm';
 import encrypt from 'browser-encrypt-attachment';
-import { math } from 'micromark-extension-math';
 import { encode } from 'blurhash';
 import { getShortcodeToEmoji } from '../../app/organisms/emoji-board/custom-emoji';
-import { mathExtensionHtml, spoilerExtension, spoilerExtensionHtml } from '../../util/markdown';
+import { getBlobSafeMimeType } from '../../util/mimetypes';
 import { sanitizeText } from '../../util/sanitize';
 import cons from './cons';
 import settings from './settings';
+import { markdown, plain } from '../../util/markdown';
 
 const blurhashField = 'xyz.amorgan.blurhash';
-const MXID_REGEX = /\B@\S+:\S+\.\S+[^.,:;?!\s]/g;
-const SHORTCODE_REGEX = /\B:([\w-]+):\B/g;
 
 function encodeBlurhash(img) {
   const canvas = document.createElement('canvas');
@@ -102,94 +98,6 @@ function getVideoThumbnail(video, width, height, mimeType) {
   });
 }
 
-function getFormattedBody(markdown) {
-  const result = micromark(markdown, {
-    extensions: [gfm(), spoilerExtension(), math()],
-    htmlExtensions: [gfmHtml(), spoilerExtensionHtml, mathExtensionHtml],
-  });
-  const bodyParts = result.match(/^(<p>)(.*)(<\/p>)$/);
-  if (bodyParts === null) return result;
-  if (bodyParts[2].indexOf('</p>') >= 0) return result;
-  return bodyParts[2];
-}
-
-function getReplyFormattedBody(roomId, reply) {
-  const replyToLink = `<a href="https://matrix.to/#/${roomId}/${reply.eventId}">In reply to</a>`;
-  const userLink = `<a href="https://matrix.to/#/${reply.userId}">${reply.userId}</a>`;
-  const formattedReply = getFormattedBody(reply.body.replace(/\n/g, '\n> '));
-  return `<mx-reply><blockquote>${replyToLink}${userLink}<br />${formattedReply}</blockquote></mx-reply>`;
-}
-
-function bindReplyToContent(roomId, reply, content) {
-  const newContent = { ...content };
-  newContent.body = `> <${reply.userId}> ${reply.body.replace(/\n/g, '\n> ')}`;
-  newContent.body += `\n\n${content.body}`;
-  newContent.format = 'org.matrix.custom.html';
-  newContent['m.relates_to'] = content['m.relates_to'] || {};
-  newContent['m.relates_to']['m.in_reply_to'] = { event_id: reply.eventId };
-
-  const formattedReply = getReplyFormattedBody(roomId, reply);
-  newContent.formatted_body = formattedReply + (content.formatted_body || content.body);
-  return newContent;
-}
-
-function findAndReplace(text, regex, filter, replace) {
-  let copyText = text;
-  Array.from(copyText.matchAll(regex))
-    .filter(filter)
-    .reverse() /* to replace backward to forward */
-    .forEach((match) => {
-      const matchText = match[0];
-      const tag = replace(match);
-
-      copyText = copyText.substr(0, match.index)
-        + tag
-        + copyText.substr(match.index + matchText.length);
-    });
-  return copyText;
-}
-
-function formatUserPill(room, text) {
-  const { userIdsToDisplayNames } = room.currentState;
-  return findAndReplace(
-    text,
-    MXID_REGEX,
-    (match) => userIdsToDisplayNames[match[0]],
-    (match) => (
-      `<a href="https://matrix.to/#/${match[0]}">@${userIdsToDisplayNames[match[0]]}</a>`
-    ),
-  );
-}
-
-function formatEmoji(mx, room, roomList, text) {
-  const parentIds = roomList.getAllParentSpaces(room.roomId);
-  const parentRooms = [...parentIds].map((id) => mx.getRoom(id));
-  const allEmoji = getShortcodeToEmoji(mx, [room, ...parentRooms]);
-
-  return findAndReplace(
-    text,
-    SHORTCODE_REGEX,
-    (match) => allEmoji.has(match[1]),
-    (match) => {
-      const emoji = allEmoji.get(match[1]);
-
-      let tag;
-      if (emoji.mxc) {
-        tag = `<img data-mx-emoticon="" src="${
-          emoji.mxc
-        }" alt=":${
-          emoji.shortcode
-        }:" title=":${
-          emoji.shortcode
-        }:" height="32" />`;
-      } else {
-        tag = emoji.unicode;
-      }
-      return tag;
-    },
-  );
-}
-
 class RoomsInput extends EventEmitter {
   constructor(mx, roomList) {
     super();
@@ -279,8 +187,76 @@ class RoomsInput extends EventEmitter {
     return this.roomIdToInput.get(roomId)?.isSending || false;
   }
 
-  async sendInput(roomId) {
+  getContent(roomId, options, message, reply, edit) {
+    const msgType = options?.msgType || 'm.text';
+    const autoMarkdown = options?.autoMarkdown ?? true;
+
     const room = this.matrixClient.getRoom(roomId);
+
+    const userNames = room.currentState.userIdsToDisplayNames;
+    const parentIds = this.roomList.getAllParentSpaces(room.roomId);
+    const parentRooms = [...parentIds].map((id) => this.matrixClient.getRoom(id));
+    const emojis = getShortcodeToEmoji(this.matrixClient, [room, ...parentRooms]);
+
+    const output = settings.isMarkdown && autoMarkdown ? markdown : plain;
+    const body = output(message, { userNames, emojis });
+
+    const content = {
+      body: body.plain,
+      msgtype: msgType,
+    };
+
+    if (!body.onlyPlain || reply) {
+      content.format = 'org.matrix.custom.html';
+      content.formatted_body = body.html;
+    }
+
+    if (edit) {
+      content['m.new_content'] = { ...content };
+      content['m.relates_to'] = {
+        event_id: edit.getId(),
+        rel_type: 'm.replace',
+      };
+
+      const isReply = edit.getWireContent()['m.relates_to']?.['m.in_reply_to'];
+      if (isReply) {
+        content.format = 'org.matrix.custom.html';
+        content.formatted_body = body.html;
+      }
+
+      content.body = ` * ${content.body}`;
+      if (content.formatted_body) content.formatted_body = ` * ${content.formatted_body}`;
+
+      if (isReply) {
+        const eBody = edit.getContent().body;
+        const replyHead = eBody.substring(0, eBody.indexOf('\n\n'));
+        if (replyHead) content.body = `${replyHead}\n\n${content.body}`;
+
+        const eFBody = edit.getContent().formatted_body;
+        const fReplyHead = eFBody.substring(0, eFBody.indexOf('</mx-reply>'));
+        if (fReplyHead) content.formatted_body = `${fReplyHead}</mx-reply>${content.formatted_body}`;
+      }
+    }
+
+    if (reply) {
+      content['m.relates_to'] = {
+        'm.in_reply_to': {
+          event_id: reply.eventId,
+        },
+      };
+
+      content.body = `> <${reply.userId}> ${reply.body.replace(/\n/g, '\n> ')}\n\n${content.body}`;
+
+      const replyToLink = `<a href="https://matrix.to/#/${encodeURIComponent(roomId)}/${encodeURIComponent(reply.eventId)}">In reply to</a>`;
+      const userLink = `<a href="https://matrix.to/#/${encodeURIComponent(reply.userId)}">${sanitizeText(reply.userId)}</a>`;
+      const fallback = `<mx-reply><blockquote>${replyToLink}${userLink}<br />${reply.formattedBody || sanitizeText(reply.body)}</blockquote></mx-reply>`;
+      content.formatted_body = fallback + content.formatted_body;
+    }
+
+    return content;
+  }
+
+  async sendInput(roomId, options) {
     const input = this.getInput(roomId);
     input.isSending = true;
     this.roomIdToInput.set(roomId, input);
@@ -290,35 +266,7 @@ class RoomsInput extends EventEmitter {
     }
 
     if (this.getMessage(roomId).trim() !== '') {
-      const rawMessage = input.message;
-      let content = {
-        body: rawMessage,
-        msgtype: 'm.text',
-      };
-
-      // Apply formatting if relevant
-      let formattedBody = settings.isMarkdown
-        ? getFormattedBody(rawMessage)
-        : sanitizeText(rawMessage);
-
-      formattedBody = formatUserPill(room, formattedBody);
-      formattedBody = formatEmoji(this.matrixClient, room, this.roomList, formattedBody);
-
-      content.body = findAndReplace(
-        content.body,
-        MXID_REGEX,
-        (match) => room.currentState.userIdsToDisplayNames[match[0]],
-        (match) => `@${room.currentState.userIdsToDisplayNames[match[0]]}`,
-      );
-      if (formattedBody !== sanitizeText(rawMessage)) {
-        // Formatting was applied, and we need to switch to custom HTML
-        content.format = 'org.matrix.custom.html';
-        content.formatted_body = formattedBody;
-      }
-
-      if (typeof input.replyTo !== 'undefined') {
-        content = bindReplyToContent(roomId, input.replyTo, content);
-      }
+      const content = this.getContent(roomId, options, input.message, input.replyTo);
       this.matrixClient.sendMessage(roomId, content);
     }
 
@@ -355,7 +303,7 @@ class RoomsInput extends EventEmitter {
   }
 
   async sendFile(roomId, file) {
-    const fileType = file.type.slice(0, file.type.indexOf('/'));
+    const fileType = getBlobSafeMimeType(file.type).slice(0, file.type.indexOf('/'));
     const info = {
       mimetype: file.type,
       size: file.size,
@@ -461,53 +409,13 @@ class RoomsInput extends EventEmitter {
   }
 
   async sendEditedMessage(roomId, mEvent, editedBody) {
-    const room = this.matrixClient.getRoom(roomId);
-    const isReply = typeof mEvent.getWireContent()['m.relates_to']?.['m.in_reply_to'] !== 'undefined';
-
-    const content = {
-      body: ` * ${editedBody}`,
-      msgtype: 'm.text',
-      'm.new_content': {
-        body: editedBody,
-        msgtype: 'm.text',
-      },
-      'm.relates_to': {
-        event_id: mEvent.getId(),
-        rel_type: 'm.replace',
-      },
-    };
-
-    // Apply formatting if relevant
-    let formattedBody = settings.isMarkdown
-      ? getFormattedBody(editedBody)
-      : sanitizeText(editedBody);
-    formattedBody = formatUserPill(room, formattedBody);
-    formattedBody = formatEmoji(this.matrixClient, room, this.roomList, formattedBody);
-
-    content.body = findAndReplace(
-      content.body,
-      MXID_REGEX,
-      (match) => room.currentState.userIdsToDisplayNames[match[0]],
-      (match) => `@${room.currentState.userIdsToDisplayNames[match[0]]}`,
+    const content = this.getContent(
+      roomId,
+      { msgType: mEvent.getWireContent().msgtype },
+      editedBody,
+      null,
+      mEvent,
     );
-    if (formattedBody !== sanitizeText(editedBody)) {
-      content.formatted_body = ` * ${formattedBody}`;
-      content.format = 'org.matrix.custom.html';
-      content['m.new_content'].formatted_body = formattedBody;
-      content['m.new_content'].format = 'org.matrix.custom.html';
-    }
-    if (isReply) {
-      const evBody = mEvent.getContent().body;
-      const replyHead = evBody.slice(0, evBody.indexOf('\n\n'));
-      const evFBody = mEvent.getContent().formatted_body;
-      const fReplyHead = evFBody.slice(0, evFBody.indexOf('</mx-reply>'));
-
-      content.format = 'org.matrix.custom.html';
-      content.formatted_body = `${fReplyHead}</mx-reply>${(content.formatted_body || content.body)}`;
-
-      content.body = `${replyHead}\n\n${content.body}`;
-    }
-
     this.matrixClient.sendMessage(roomId, content);
   }
 }

src/client/state/cons.js

@@ -1,5 +1,5 @@
 const cons = {
-  version: '2.1.2',
+  version: '2.2.2',
   secretKey: {
     ACCESS_TOKEN: 'cinny_access_token',
     DEVICE_ID: 'cinny_device_id',

src/client/state/navigation.js

@@ -5,6 +5,8 @@ import cons from './cons';
 class Navigation extends EventEmitter {
   constructor() {
     super();
+    // this will attached by initMatrix
+    this.initMatrix = {};
 
     this.selectedTab = cons.tabs.HOME;
     this.selectedSpaceId = null;
@@ -14,14 +16,20 @@ class Navigation extends EventEmitter {
     this.isRoomSettings = false;
     this.recentRooms = [];
 
+    this.spaceToRoom = new Map();
+
     this.rawModelStack = [];
   }
 
-  _setSpacePath(roomId) {
-    if (roomId === null || roomId === cons.tabs.HOME) {
+  _addToSpacePath(roomId, asRoot) {
+    if (typeof roomId !== 'string') {
       this.selectedSpacePath = [cons.tabs.HOME];
       return;
     }
+    if (asRoot) {
+      this.selectedSpacePath = [roomId];
+      return;
+    }
     if (this.selectedSpacePath.includes(roomId)) {
       const spIndex = this.selectedSpacePath.indexOf(roomId);
       this.selectedSpacePath = this.selectedSpacePath.slice(0, spIndex + 1);
@@ -30,6 +38,223 @@ class Navigation extends EventEmitter {
     this.selectedSpacePath.push(roomId);
   }
 
+  _mapRoomToSpace(roomId) {
+    const { roomList, accountData } = this.initMatrix;
+    if (
+      this.selectedTab === cons.tabs.HOME
+      && roomList.rooms.has(roomId)
+      && !roomList.roomIdToParents.has(roomId)
+    ) {
+      this.spaceToRoom.set(cons.tabs.HOME, {
+        roomId,
+        timestamp: Date.now(),
+      });
+      return;
+    }
+    if (this.selectedTab === cons.tabs.DIRECTS && roomList.directs.has(roomId)) {
+      this.spaceToRoom.set(cons.tabs.DIRECTS, {
+        roomId,
+        timestamp: Date.now(),
+      });
+      return;
+    }
+
+    const parents = roomList.roomIdToParents.get(roomId);
+    if (!parents) return;
+    if (parents.has(this.selectedSpaceId)) {
+      this.spaceToRoom.set(this.selectedSpaceId, {
+        roomId,
+        timestamp: Date.now(),
+      });
+    } else if (accountData.categorizedSpaces.has(this.selectedSpaceId)) {
+      const categories = roomList.getCategorizedSpaces([this.selectedSpaceId]);
+      const parent = [...parents].find((pId) => categories.has(pId));
+      if (parent) {
+        this.spaceToRoom.set(parent, {
+          roomId,
+          timestamp: Date.now(),
+        });
+      }
+    }
+  }
+
+  _selectRoom(roomId, eventId) {
+    const prevSelectedRoomId = this.selectedRoomId;
+    this.selectedRoomId = roomId;
+    if (prevSelectedRoomId !== roomId) this._mapRoomToSpace(roomId);
+    this.removeRecentRoom(prevSelectedRoomId);
+    this.addRecentRoom(prevSelectedRoomId);
+    this.removeRecentRoom(this.selectedRoomId);
+    if (this.isRoomSettings && typeof this.selectedRoomId === 'string') {
+      this.isRoomSettings = !this.isRoomSettings;
+      this.emit(cons.events.navigation.ROOM_SETTINGS_TOGGLED, this.isRoomSettings);
+    }
+    this.emit(
+      cons.events.navigation.ROOM_SELECTED,
+      this.selectedRoomId,
+      prevSelectedRoomId,
+      eventId,
+    );
+  }
+
+  _selectTabWithRoom(roomId) {
+    const { roomList, accountData } = this.initMatrix;
+    const { categorizedSpaces } = accountData;
+
+    if (roomList.isOrphan(roomId)) {
+      if (roomList.directs.has(roomId)) {
+        this._selectSpace(null, true, false);
+        this._selectTab(cons.tabs.DIRECTS, false);
+        return;
+      }
+      this._selectSpace(null, true, false);
+      this._selectTab(cons.tabs.HOME, false);
+      return;
+    }
+
+    const parents = roomList.roomIdToParents.get(roomId);
+
+    if (parents.has(this.selectedSpaceId)) {
+      return;
+    }
+
+    if (categorizedSpaces.has(this.selectedSpaceId)) {
+      const categories = roomList.getCategorizedSpaces([this.selectedSpaceId]);
+      if ([...parents].find((pId) => categories.has(pId))) {
+        // No need to select tab
+        // As one of parent is child of selected categorized space.
+        return;
+      }
+    }
+
+    const spaceInPath = [...this.selectedSpacePath].reverse().find((sId) => parents.has(sId));
+    if (spaceInPath) {
+      this._selectSpace(spaceInPath, false, false);
+      return;
+    }
+
+    if (roomList.directs.has(roomId)) {
+      this._selectSpace(null, true, false);
+      this._selectTab(cons.tabs.DIRECTS, false);
+      return;
+    }
+
+    if (parents.size > 0) {
+      const sortedParents = [...parents].sort((p1, p2) => {
+        const t1 = this.spaceToRoom.get(p1)?.timestamp ?? 0;
+        const t2 = this.spaceToRoom.get(p2)?.timestamp ?? 0;
+        return t2 - t1;
+      });
+      this._selectSpace(sortedParents[0], true, false);
+      this._selectTab(sortedParents[0], false);
+    }
+  }
+
+  _getLatestActiveRoomId(roomIds) {
+    const mx = this.initMatrix.matrixClient;
+
+    let ts = 0;
+    let roomId = null;
+    roomIds.forEach((childId) => {
+      const room = mx.getRoom(childId);
+      if (!room) return;
+      const newTs = room.getLastActiveTimestamp();
+      if (newTs > ts) {
+        ts = newTs;
+        roomId = childId;
+      }
+    });
+    return roomId;
+  }
+
+  _getLatestSelectedRoomId(spaceIds) {
+    let ts = 0;
+    let roomId = null;
+
+    spaceIds.forEach((sId) => {
+      const data = this.spaceToRoom.get(sId);
+      if (!data) return;
+      const newTs = data.timestamp;
+      if (newTs > ts) {
+        ts = newTs;
+        roomId = data.roomId;
+      }
+    });
+    return roomId;
+  }
+
+  _selectTab(tabId, selectRoom = true) {
+    this.selectedTab = tabId;
+    if (selectRoom) this._selectRoomWithTab(this.selectedTab);
+    this.emit(cons.events.navigation.TAB_SELECTED, this.selectedTab);
+  }
+
+  _selectSpace(roomId, asRoot, selectRoom = true) {
+    this._addToSpacePath(roomId, asRoot);
+    this.selectedSpaceId = roomId;
+    if (!asRoot && selectRoom) this._selectRoomWithSpace(this.selectedSpaceId);
+    this.emit(cons.events.navigation.SPACE_SELECTED, this.selectedSpaceId);
+  }
+
+  _selectRoomWithSpace(spaceId) {
+    if (!spaceId) return;
+    const { roomList, accountData, matrixClient } = this.initMatrix;
+    const { categorizedSpaces } = accountData;
+
+    const data = this.spaceToRoom.get(spaceId);
+    if (data && !categorizedSpaces.has(spaceId)) {
+      this._selectRoom(data.roomId);
+      return;
+    }
+
+    const children = [];
+
+    if (categorizedSpaces.has(spaceId)) {
+      const categories = roomList.getCategorizedSpaces([spaceId]);
+
+      const latestSelectedRoom = this._getLatestSelectedRoomId([...categories.keys()]);
+
+      if (latestSelectedRoom) {
+        this._selectRoom(latestSelectedRoom);
+        return;
+      }
+
+      categories?.forEach((categoryId) => {
+        categoryId?.forEach((childId) => {
+          children.push(childId);
+        });
+      });
+    } else {
+      roomList.getSpaceChildren(spaceId).forEach((id) => {
+        if (matrixClient.getRoom(id)?.isSpaceRoom() === false) {
+          children.push(id);
+        }
+      });
+    }
+
+    if (!children) {
+      this._selectRoom(null);
+      return;
+    }
+
+    this._selectRoom(this._getLatestActiveRoomId(children));
+  }
+
+  _selectRoomWithTab(tabId) {
+    const { roomList } = this.initMatrix;
+    if (tabId === cons.tabs.HOME || tabId === cons.tabs.DIRECTS) {
+      const data = this.spaceToRoom.get(tabId);
+      if (data) {
+        this._selectRoom(data.roomId);
+        return;
+      }
+      const children = tabId === cons.tabs.HOME ? roomList.getOrphanRooms() : [...roomList.directs];
+      this._selectRoom(this._getLatestActiveRoomId(children));
+      return;
+    }
+    this._selectRoomWithSpace(tabId);
+  }
+
   removeRecentRoom(roomId) {
     if (typeof roomId !== 'string') return;
     const roomIdIndex = this.recentRooms.indexOf(roomId);
@@ -59,40 +284,19 @@ class Navigation extends EventEmitter {
   navigate(action) {
     const actions = {
       [cons.actions.navigation.SELECT_TAB]: () => {
-        this.selectedTab = action.tabId;
-        if (this.selectedTab !== cons.tabs.DIRECTS) {
-          if (this.selectedTab === cons.tabs.HOME) {
-            this.selectedSpacePath = [cons.tabs.HOME];
-            this.selectedSpaceId = null;
-          } else {
-            this.selectedSpacePath = [this.selectedTab];
-            this.selectedSpaceId = this.selectedTab;
-          }
-          this.emit(cons.events.navigation.SPACE_SELECTED, this.selectedSpaceId);
-        } else this.selectedSpaceId = null;
-        this.emit(cons.events.navigation.TAB_SELECTED, this.selectedTab);
+        const roomId = (
+          action.tabId !== cons.tabs.HOME && action.tabId !== cons.tabs.DIRECTS
+        ) ? action.tabId : null;
+
+        this._selectSpace(roomId, true);
+        this._selectTab(action.tabId);
       },
       [cons.actions.navigation.SELECT_SPACE]: () => {
-        this._setSpacePath(action.roomId);
-        this.selectedSpaceId = action.roomId === cons.tabs.HOME ? null : action.roomId;
-        this.emit(cons.events.navigation.SPACE_SELECTED, this.selectedSpaceId);
+        this._selectSpace(action.roomId, false);
       },
       [cons.actions.navigation.SELECT_ROOM]: () => {
-        const prevSelectedRoomId = this.selectedRoomId;
-        this.selectedRoomId = action.roomId;
-        this.removeRecentRoom(prevSelectedRoomId);
-        this.addRecentRoom(prevSelectedRoomId);
-        this.removeRecentRoom(this.selectedRoomId);
-        if (this.isRoomSettings && typeof this.selectedRoomId === 'string') {
-          this.isRoomSettings = !this.isRoomSettings;
-          this.emit(cons.events.navigation.ROOM_SETTINGS_TOGGLED, this.isRoomSettings);
-        }
-        this.emit(
-          cons.events.navigation.ROOM_SELECTED,
-          this.selectedRoomId,
-          prevSelectedRoomId,
-          action.eventId,
-        );
+        if (action.roomId) this._selectTabWithRoom(action.roomId);
+        this._selectRoom(action.roomId, action.eventId);
       },
       [cons.actions.navigation.OPEN_SPACE_SETTINGS]: () => {
         this.emit(cons.events.navigation.SPACE_SETTINGS_OPENED, action.roomId, action.tabText);
@@ -171,6 +375,7 @@ class Navigation extends EventEmitter {
           action.userId,
           action.eventId,
           action.body,
+          action.formattedBody,
         );
       },
       [cons.actions.navigation.OPEN_SEARCH]: () => {

src/index.scss

@@ -105,7 +105,7 @@
 
   /* shadow and overlay */
   --bg-overlay: rgba(0, 0, 0, 20%);
-  --bg-overlay-low: rgba(0, 0, 0, 85%);
+  --bg-overlay-low: rgba(0, 0, 0, 50%);
 
   --bs-popup: 0 0 16px rgba(0, 0, 0, 10%);
 
@@ -264,7 +264,8 @@
   }
   
   /* shadow and overlay */
-  --bg-overlay: rgba(0, 0, 0, 50%);
+  --bg-overlay: rgba(0, 0, 0, 60%);
+  --bg-overlay-low: rgba(0, 0, 0, 80%);
 
   --bs-popup: 0 0 16px rgba(0, 0, 0, 25%);
 

src/util/common.js

@@ -115,6 +115,16 @@ export function avatarInitials(text) {
   return [...text][0];
 }
 
+export function cssVar(name) {
+  return getComputedStyle(document.body).getPropertyValue(name);
+}
+
+export function setFavicon(url) {
+  const favicon = document.querySelector('#favicon');
+  if (!favicon) return;
+  favicon.setAttribute('href', url);
+}
+
 export function copyToClipboard(text) {
   if (navigator.clipboard) {
     navigator.clipboard.writeText(text);
@@ -194,3 +204,27 @@ export function scaleDownImage(imageFile, width, height) {
     img.src = imgURL;
   });
 }
+
+/**
+ * @param {sigil} string sigil to search for (for example '@', '#' or '$')
+ * @param {flags} string regex flags
+ * @param {prefix} string prefix appended at the beginning of the regex
+ * @returns {RegExp}
+ */
+export function idRegex(sigil, flags, prefix) {
+  const servername = '(?:[a-zA-Z0-9-.]*[a-zA-Z0-9]+|\\[\\S+?\\])(?::\\d+)?';
+  return new RegExp(`${prefix}(${sigil}\\S+:${servername})`, flags);
+}
+
+const matrixToRegex = /^https?:\/\/matrix.to\/#\/(\S+:\S+)/;
+/**
+ * Parses a matrix.to URL into an matrix id.
+ * This function can later be extended to support matrix: URIs
+ * @param {string} uri The URI to parse
+ * @returns {string|null} The id or null if the URI does not match
+ */
+export function parseIdUri(uri) {
+  const res = decodeURIComponent(uri).match(matrixToRegex);
+  if (!res) return null;
+  return res[1];
+}

src/util/markdown.js

@@ -1,198 +1,515 @@
 /* eslint-disable no-param-reassign */
-/* eslint-disable no-plusplus */
-/* eslint-disable no-continue */
+/* eslint-disable no-use-before-define */
+import SimpleMarkdown from '@khanacademy/simple-markdown';
+import { idRegex, parseIdUri } from './common';
 
-import { codes } from 'micromark-util-symbol/codes';
-import { types } from 'micromark-util-symbol/types';
-import { resolveAll } from 'micromark-util-resolve-all';
-import { splice } from 'micromark-util-chunked';
+const {
+  defaultRules, parserFor, outputFor, anyScopeRegex, blockRegex, inlineRegex,
+  sanitizeText, sanitizeUrl,
+} = SimpleMarkdown;
 
-function inlineExtension(marker, len, key) {
-  const keySeq = `${key}Sequence`;
-  const keySeqTmp = `${keySeq}Temporary`;
-
-  return () => {
-    function tokenize(effects, ok, nok) {
-      const { previous, events } = this;
-
-      let size = 0;
-
-      function more(code) {
-        // consume more markers if the maximum length hasn't been reached yet
-        if (code === marker && size < len) {
-          effects.consume(code);
-          size += 1;
-          return more;
-        }
-
-        // check for minimum length
-        if (size < len) return nok(code);
-
-        effects.exit(keySeqTmp);
-        return ok(code);
-      }
-
-      function start(code) {
-        // ignore code if it's not a marker
-        if (code !== marker) return nok(code);
-
-        if (previous === marker
-            && events[events.length - 1][1].type !== types.characterEscape) return nok(code);
-
-        effects.enter(keySeqTmp);
-        return more(code);
-      }
-
-      return start;
+function htmlTag(tagName, content, attributes, isClosed) {
+  let s = '';
+  Object.entries(attributes || {}).forEach(([k, v]) => {
+    if (v !== undefined) {
+      s += ` ${sanitizeText(k)}`;
+      if (v !== null) s += `="${sanitizeText(v)}"`;
     }
+  });
 
-    function resolve(events, context) {
-      let i = -1;
+  s = `<${tagName}${s}>`;
 
-      while (++i < events.length) {
-        if (events[i][0] !== 'enter' || events[i][1].type !== keySeqTmp) continue;
+  if (isClosed === false) {
+    return s;
+  }
+  return `${s}${content}</${tagName}>`;
+}
 
-        let open = i;
-        while (open--) {
-          if (events[open][0] !== 'exit' || events[open][1].type !== keySeqTmp) continue;
+function mathHtml(wrap, node) {
+  return htmlTag(wrap, htmlTag('code', sanitizeText(node.content)), { 'data-mx-maths': node.content });
+}
 
-          events[i][1].type = keySeq;
-          events[open][1].type = keySeq;
+const emojiRegex = /^:([\w-]+):/;
 
-          const border = {
-            type: key,
-            start: { ...events[open][1].start },
-            end: { ...events[i][1].end },
-          };
+const plainRules = {
+  Array: {
+    ...defaultRules.Array,
+    plain: defaultRules.Array.html,
+  },
+  userMention: {
+    order: defaultRules.em.order - 0.9,
+    match: inlineRegex(idRegex('@', undefined, '^')),
+    parse: (capture, _, state) => ({
+      type: 'mention',
+      content: state.userNames[capture[1]] ? `@${state.userNames[capture[1]]}` : capture[1],
+      id: capture[1],
+    }),
+  },
+  roomMention: {
+    order: defaultRules.em.order - 0.8,
+    match: inlineRegex(idRegex('#', undefined, '^')),
+    parse: (capture) => ({ type: 'mention', content: capture[1], id: capture[1] }),
+  },
+  mention: {
+    plain: (node, _, state) => (state.kind === 'edit' ? node.id : node.content),
+    html: (node) => htmlTag('a', sanitizeText(node.content), {
+      href: `https://matrix.to/#/${encodeURIComponent(node.id)}`,
+    }),
+  },
+  emoji: {
+    order: defaultRules.em.order - 0.1,
+    match: (source, state) => {
+      if (!state.inline) return null;
+      const capture = emojiRegex.exec(source);
+      if (!capture) return null;
+      const emoji = state.emojis.get(capture[1]);
+      if (emoji) return capture;
+      return null;
+    },
+    parse: (capture, _, state) => ({ content: capture[1], emoji: state.emojis.get(capture[1]) }),
+    plain: ({ emoji }) => (emoji.mxc
+      ? `:${emoji.shortcode}:`
+      : emoji.unicode),
+    html: ({ emoji }) => (emoji.mxc
+      ? htmlTag('img', null, {
+        'data-mx-emoticon': null,
+        src: emoji.mxc,
+        alt: `:${emoji.shortcode}:`,
+        title: `:${emoji.shortcode}:`,
+        height: 32,
+      }, false)
+      : emoji.unicode),
+  },
+  newline: {
+    ...defaultRules.newline,
+    plain: () => '\n',
+  },
+  paragraph: {
+    ...defaultRules.paragraph,
+    plain: (node, output, state) => `${output(node.content, state)}\n\n`,
+    html: (node, output, state) => htmlTag('p', output(node.content, state)),
+  },
+  escape: {
+    ...defaultRules.escape,
+    plain: (node, output, state) => `\\${output(node.content, state)}`,
+  },
+  br: {
+    ...defaultRules.br,
+    match: anyScopeRegex(/^ *\n/),
+    plain: () => '\n',
+  },
+  text: {
+    ...defaultRules.text,
+    match: anyScopeRegex(/^[\s\S]+?(?=[^0-9A-Za-z\s\u00c0-\uffff]| *\n|\w+:\S|$)/),
+    plain: (node, _, state) => (state.kind === 'edit'
+      ? node.content.replace(/(\*|_|!\[|\[|\|\||\$\$?)/g, '\\$1')
+      : node.content),
+  },
+};
 
-          const text = {
-            type: `${key}Text`,
-            start: { ...events[open][1].end },
-            end: { ...events[i][1].start },
-          };
+const markdownRules = {
+  ...defaultRules,
+  ...plainRules,
+  heading: {
+    ...defaultRules.heading,
+    match: blockRegex(/^ *(#{1,6})([^\n:]*?(?: [^\n]*?)?)#* *(?:\n *)*\n/),
+    plain: (node, output, state) => {
+      const out = output(node.content, state);
+      if (state.kind === 'edit' || state.kind === 'notification' || node.level > 2) {
+        return `${'#'.repeat(node.level)} ${out}\n\n`;
+      }
+      return `${out}\n${(node.level === 1 ? '=' : '-').repeat(out.length)}\n\n`;
+    },
+  },
+  hr: {
+    ...defaultRules.hr,
+    plain: () => '---\n\n',
+  },
+  codeBlock: {
+    ...defaultRules.codeBlock,
+    plain: (node) => `\`\`\`${node.lang || ''}\n${node.content}\n\`\`\`\n`,
+    html: (node) => htmlTag('pre', htmlTag('code', sanitizeText(node.content), {
+      class: node.lang ? `language-${node.lang}` : undefined,
+    })),
+  },
+  fence: {
+    ...defaultRules.fence,
+    match: blockRegex(/^ *(`{3,}|~{3,}) *(?:(\S+) *)?\n([\s\S]+?)\n?\1 *(?:\n *)*\n/),
+  },
+  blockQuote: {
+    ...defaultRules.blockQuote,
+    plain: (node, output, state) => `> ${output(node.content, state).trim().replace(/\n/g, '\n> ')}\n\n`,
+  },
+  list: {
+    ...defaultRules.list,
+    plain: (node, output, state) => {
+      const oldList = state._list;
+      state._list = true;
 
-          const nextEvents = [
-            ['enter', border, context],
-            ['enter', events[open][1], context],
-            ['exit', events[open][1], context],
-            ['enter', text, context],
-          ];
+      let items = node.items.map((item, i) => {
+        const prefix = node.ordered ? `${node.start + i}. ` : '* ';
+        return prefix + output(item, state).replace(/\n/g, `\n${' '.repeat(prefix.length)}`);
+      }).join('\n');
 
-          splice(
-            nextEvents,
-            nextEvents.length,
-            0,
-            resolveAll(
-              context.parser.constructs.insideSpan.null,
-              events.slice(open + 1, i),
-              context,
-            ),
-          );
+      state._list = oldList;
 
-          splice(nextEvents, nextEvents.length, 0, [
-            ['exit', text, context],
-            ['enter', events[i][1], context],
-            ['exit', events[i][1], context],
-            ['exit', border, context],
-          ]);
+      if (!state._list) {
+        items += '\n\n';
+      }
+      return items;
+    },
+  },
+  def: undefined,
+  table: {
+    ...defaultRules.table,
+    plain: (node, output, state) => {
+      const header = node.header.map((content) => output(content, state));
 
-          splice(events, open - 1, i - open + 3, nextEvents);
+      const colWidth = node.align.map((align) => {
+        switch (align) {
+          case 'left':
+          case 'right':
+            return 2;
+          case 'center':
+            return 3;
+          default:
+            return 1;
+        }
+      });
+      header.forEach((s, i) => {
+        if (s.length > colWidth[i])colWidth[i] = s.length;
+      });
 
-          i = open + nextEvents.length - 2;
-          break;
+      const cells = node.cells.map((row) => row.map((content, i) => {
+        const s = output(content, state);
+        if (colWidth[i] === undefined || s.length > colWidth[i]) {
+          colWidth[i] = s.length;
+        }
+        return s;
+      }));
+
+      function pad(s, i) {
+        switch (node.align[i]) {
+          case 'right':
+            return s.padStart(colWidth[i]);
+          case 'center':
+            return s
+              .padStart(s.length + Math.floor((colWidth[i] - s.length) / 2))
+              .padEnd(colWidth[i]);
+          default:
+            return s.padEnd(colWidth[i]);
         }
       }
 
-      events.forEach((event) => {
-        if (event[1].type === keySeqTmp) {
-          event[1].type = types.data;
+      const line = colWidth.map((len, i) => {
+        switch (node.align[i]) {
+          case 'left':
+            return `:${'-'.repeat(len - 1)}`;
+          case 'center':
+            return `:${'-'.repeat(len - 2)}:`;
+          case 'right':
+            return `${'-'.repeat(len - 1)}:`;
+          default:
+            return '-'.repeat(len);
         }
       });
 
-      return events;
+      const table = [
+        header.map(pad),
+        line,
+        ...cells.map((row) => row.map(pad))];
+
+      return table.map((row) => `| ${row.join(' | ')} |\n`).join('');
+    },
+  },
+  displayMath: {
+    order: defaultRules.table.order + 0.1,
+    match: blockRegex(/^ *\$\$ *\n?([\s\S]+?)\n?\$\$ *(?:\n *)*\n/),
+    parse: (capture) => ({ content: capture[1] }),
+    plain: (node) => (node.content.includes('\n')
+      ? `$$\n${node.content}\n$$\n`
+      : `$$${node.content}$$\n`),
+    html: (node) => mathHtml('div', node),
+  },
+  shrug: {
+    order: defaultRules.escape.order - 0.1,
+    match: inlineRegex(/^¯\\_\(ツ\)_\/¯/),
+    parse: (capture) => ({ type: 'text', content: capture[0] }),
+  },
+  tableSeparator: {
+    ...defaultRules.tableSeparator,
+    plain: () => ' | ',
+  },
+  link: {
+    ...defaultRules.link,
+    plain: (node, output, state) => {
+      const out = output(node.content, state);
+      const target = sanitizeUrl(node.target) || '';
+      if (out !== target || node.title) {
+        return `[${out}](${target}${node.title ? ` "${node.title}"` : ''})`;
+      }
+      return out;
+    },
+    html: (node, output, state) => {
+      const out = output(node.content, state);
+      const target = sanitizeUrl(node.target) || '';
+      if (out !== target || node.title) {
+        return htmlTag('a', out, {
+          href: target,
+          title: node.title,
+        });
+      }
+      return target;
+    },
+  },
+  image: {
+    ...defaultRules.image,
+    plain: (node) => `![${node.alt}](${sanitizeUrl(node.target) || ''}${node.title ? ` "${node.title}"` : ''})`,
+    html: (node) => htmlTag('img', '', {
+      src: sanitizeUrl(node.target) || '',
+      alt: node.alt,
+      title: node.title,
+    }, false),
+  },
+  reflink: undefined,
+  refimage: undefined,
+  em: {
+    ...defaultRules.em,
+    plain: (node, output, state) => `_${output(node.content, state)}_`,
+  },
+  strong: {
+    ...defaultRules.strong,
+    plain: (node, output, state) => `**${output(node.content, state)}**`,
+  },
+  u: {
+    ...defaultRules.u,
+    plain: (node, output, state) => `__${output(node.content, state)}__`,
+  },
+  del: {
+    ...defaultRules.del,
+    plain: (node, output, state) => `~~${output(node.content, state)}~~`,
+  },
+  inlineCode: {
+    ...defaultRules.inlineCode,
+    match: inlineRegex(/^(`+)([^\n]*?[^`\n])\1(?!`)/),
+    plain: (node) => `\`${node.content}\``,
+  },
+  spoiler: {
+    order: defaultRules.inlineCode.order + 0.1,
+    match: inlineRegex(/^\|\|([\s\S]+?)\|\|(?:\(([\s\S]+?)\))?/),
+    parse: (capture, parse, state) => ({
+      content: parse(capture[1], state),
+      reason: capture[2],
+    }),
+    plain: (node, output, state) => {
+      const warning = `spoiler${node.reason ? `: ${node.reason}` : ''}`;
+      switch (state.kind) {
+        case 'edit':
+          return `||${output(node.content, state)}||${node.reason ? `(${node.reason})` : ''}`;
+        case 'notification':
+          return `<${warning}>`;
+        default:
+          return `[${warning}](${output(node.content, state)})`;
+      }
+    },
+    html: (node, output, state) => htmlTag(
+      'span',
+      output(node.content, state),
+      { 'data-mx-spoiler': node.reason || null },
+    ),
+  },
+  inlineMath: {
+    order: defaultRules.del.order + 0.2,
+    match: inlineRegex(/^\$(\S[\s\S]+?\S|\S)\$(?!\d)/),
+    parse: (capture) => ({ content: capture[1] }),
+    plain: (node) => `$${node.content}$`,
+    html: (node) => mathHtml('span', node),
+  },
+};
+
+function mapElement(el) {
+  switch (el.tagName) {
+    case 'MX-REPLY':
+      return [];
+
+    case 'P':
+      return [{ type: 'paragraph', content: mapChildren(el) }];
+    case 'BR':
+      return [{ type: 'br' }];
+
+    case 'H1':
+    case 'H2':
+    case 'H3':
+    case 'H4':
+    case 'H5':
+    case 'H6':
+      return [{ type: 'heading', level: Number(el.tagName[1]), content: mapChildren(el) }];
+    case 'HR':
+      return [{ type: 'hr' }];
+    case 'PRE': {
+      let lang;
+      if (el.firstChild) {
+        Array.from(el.firstChild.classList).some((c) => {
+          const langPrefix = 'language-';
+          if (c.startsWith(langPrefix)) {
+            lang = c.slice(langPrefix.length);
+            return true;
+          }
+          return false;
+        });
+      }
+      return [{ type: 'codeBlock', lang, content: el.innerText }];
     }
+    case 'BLOCKQUOTE':
+      return [{ type: 'blockQuote', content: mapChildren(el) }];
+    case 'UL':
+      return [{ type: 'list', items: Array.from(el.childNodes).map(mapNode) }];
+    case 'OL':
+      return [{
+        type: 'list',
+        ordered: true,
+        start: Number(el.getAttribute('start')),
+        items: Array.from(el.childNodes).map(mapNode),
+      }];
+    case 'TABLE': {
+      const headerEl = Array.from(el.querySelector('thead > tr').childNodes);
+      const align = headerEl.map((childE) => childE.style['text-align']);
+      return [{
+        type: 'table',
+        header: headerEl.map(mapChildren),
+        align,
+        cells: Array.from(el.querySelectorAll('tbody > tr')).map((rowEl) => Array.from(rowEl.childNodes).map((childEl, i) => {
+          if (align[i] === undefined) align[i] = childEl.style['text-align'];
+          return mapChildren(childEl);
+        })),
+      }];
+    }
+    case 'A': {
+      const href = el.getAttribute('href');
 
-    const tokenizer = {
-      tokenize,
-      resolveAll: resolve,
-    };
+      const id = parseIdUri(href);
+      if (id) return [{ type: 'mention', content: el.innerText, id }];
 
-    return {
-      text: { [marker]: tokenizer },
-      insideSpan: { null: [tokenizer] },
-      attentionMarkers: { null: [marker] },
-    };
+      return [{
+        type: 'link',
+        target: el.getAttribute('href'),
+        title: el.getAttribute('title'),
+        content: mapChildren(el),
+      }];
+    }
+    case 'IMG': {
+      const src = el.getAttribute('src');
+      let title = el.getAttribute('title');
+      if (el.hasAttribute('data-mx-emoticon')) {
+        if (title.length > 2 && title.startsWith(':') && title.endsWith(':')) {
+          title = title.slice(1, -1);
+        }
+        return [{
+          type: 'emoji',
+          content: title,
+          emoji: {
+            mxc: src,
+            shortcode: title,
+          },
+        }];
+      }
+
+      return [{
+        type: 'image',
+        alt: el.getAttribute('alt'),
+        target: src,
+        title,
+      }];
+    }
+    case 'EM':
+    case 'I':
+      return [{ type: 'em', content: mapChildren(el) }];
+    case 'STRONG':
+    case 'B':
+      return [{ type: 'strong', content: mapChildren(el) }];
+    case 'U':
+      return [{ type: 'u', content: mapChildren(el) }];
+    case 'DEL':
+    case 'STRIKE':
+      return [{ type: 'del', content: mapChildren(el) }];
+    case 'CODE':
+      return [{ type: 'inlineCode', content: el.innerText }];
+
+    case 'DIV':
+      if (el.hasAttribute('data-mx-maths')) {
+        return [{ type: 'displayMath', content: el.getAttribute('data-mx-maths') }];
+      }
+      return mapChildren(el);
+    case 'SPAN':
+      if (el.hasAttribute('data-mx-spoiler')) {
+        return [{ type: 'spoiler', reason: el.getAttribute('data-mx-spoiler'), content: mapChildren(el) }];
+      }
+      if (el.hasAttribute('data-mx-maths')) {
+        return [{ type: 'inlineMath', content: el.getAttribute('data-mx-maths') }];
+      }
+      return mapChildren(el);
+    default:
+      return mapChildren(el);
+  }
+}
+
+function mapNode(n) {
+  switch (n.nodeType) {
+    case Node.TEXT_NODE:
+      return [{ type: 'text', content: n.textContent }];
+    case Node.ELEMENT_NODE:
+      return mapElement(n);
+    default:
+      return [];
+  }
+}
+
+function mapChildren(n) {
+  return Array.from(n.childNodes).reduce((ast, childN) => {
+    ast.push(...mapNode(childN));
+    return ast;
+  }, []);
+}
+
+function render(content, state, plainOut, htmlOut) {
+  let c = content;
+  if (content.length === 1 && content[0].type === 'paragraph') {
+    c = c[0].content;
+  }
+
+  const plainStr = plainOut(c, state).trim();
+  if (state.onlyPlain) return { plain: plainStr };
+
+  const htmlStr = htmlOut(c, state);
+
+  const plainHtml = htmlStr.replace(/<br>/g, '\n').replace(/<\/p><p>/g, '\n\n').replace(/<\/?p>/g, '');
+  const onlyPlain = sanitizeText(plainStr) === plainHtml;
+
+  return {
+    onlyPlain,
+    plain: plainStr,
+    html: htmlStr,
   };
 }
 
-const spoilerExtension = inlineExtension(codes.verticalBar, 2, 'spoiler');
+const plainParser = parserFor(plainRules);
+const plainPlainOut = outputFor(plainRules, 'plain');
+const plainHtmlOut = outputFor(plainRules, 'html');
 
-const spoilerExtensionHtml = {
-  enter: {
-    spoiler() {
-      this.tag('<span data-mx-spoiler>');
-    },
-  },
-  exit: {
-    spoiler() {
-      this.tag('</span>');
-    },
-  },
-};
+const mdParser = parserFor(markdownRules);
+const mdPlainOut = outputFor(markdownRules, 'plain');
+const mdHtmlOut = outputFor(markdownRules, 'html');
 
-const mathExtensionHtml = {
-  enter: {
-    mathFlow() {
-      this.lineEndingIfNeeded();
-    },
-    mathFlowFenceMeta() {
-      this.buffer();
-    },
-    mathText() {
-      this.buffer();
-    },
-  },
-  exit: {
-    mathFlow() {
-      const value = this.encode(this.resume().replace(/(?:\r?\n|\r)$/, ''));
-      this.tag('<div data-mx-maths="');
-      this.tag(value);
-      this.tag('"><code>');
-      this.raw(value);
-      this.tag('</code></div>');
-      this.setData('mathFlowOpen');
-      this.setData('slurpOneLineEnding');
-    },
-    mathFlowFence() {
-      // After the first fence.
-      if (!this.getData('mathFlowOpen')) {
-        this.setData('mathFlowOpen', true);
-        this.setData('slurpOneLineEnding', true);
-        this.buffer();
-      }
-    },
-    mathFlowFenceMeta() {
-      this.resume();
-    },
-    mathFlowValue(token) {
-      this.raw(this.sliceSerialize(token));
-    },
-    mathText() {
-      const value = this.encode(this.resume());
-      this.tag('<span data-mx-maths="');
-      this.tag(value);
-      this.tag('"><code>');
-      this.raw(value);
-      this.tag('</code></span>');
-    },
-    mathTextData(token) {
-      this.raw(this.sliceSerialize(token));
-    },
-  },
-};
+export function plain(source, state) {
+  return render(plainParser(source, state), state, plainPlainOut, plainHtmlOut);
+}
 
-export {
-  inlineExtension,
-  spoilerExtension, spoilerExtensionHtml,
-  mathExtensionHtml,
-};
+export function markdown(source, state) {
+  return render(mdParser(source, state), state, mdPlainOut, mdHtmlOut);
+}
+
+export function html(source, state) {
+  const el = document.createElement('template');
+  el.innerHTML = source;
+  return render(mapChildren(el.content), state, mdPlainOut, mdHtmlOut);
+}

src/util/matrixUtil.js

@@ -79,6 +79,16 @@ export function parseReply(rawBody) {
   };
 }
 
+export function trimHTMLReply(html) {
+  if (!html) return html;
+  const suffix = '</mx-reply>';
+  const i = html.indexOf(suffix);
+  if (i < 0) {
+    return html;
+  }
+  return html.slice(i + suffix.length);
+}
+
 export function hasDMWith(userId) {
   const mx = initMatrix.matrixClient;
   const directIds = [...initMatrix.roomList.directs];

src/util/mimetypes.js

@@ -0,0 +1,39 @@
+// https://github.com/matrix-org/matrix-react-sdk/blob/cd15e08fc285da42134817cce50de8011809cd53/src/utils/blobs.ts
+export const ALLOWED_BLOB_MIMETYPES = [
+  'image/jpeg',
+  'image/gif',
+  'image/png',
+  'image/apng',
+  'image/webp',
+  'image/avif',
+
+  'video/mp4',
+  'video/webm',
+  'video/ogg',
+  'video/quicktime',
+
+  'audio/mp4',
+  'audio/webm',
+  'audio/aac',
+  'audio/mpeg',
+  'audio/ogg',
+  'audio/wave',
+  'audio/wav',
+  'audio/x-wav',
+  'audio/x-pn-wav',
+  'audio/flac',
+  'audio/x-flac',
+];
+
+export function getBlobSafeMimeType(mimetype) {
+  if (typeof mimetype !== 'string') return 'application/octet-stream';
+  const [type] = mimetype.split(';');
+  if (!ALLOWED_BLOB_MIMETYPES.includes(type)) {
+    return 'application/octet-stream';
+  }
+  // Required for Chromium browsers
+  if (type === 'video/quicktime') {
+    return 'video/mp4';
+  }
+  return type;
+}

src/util/sanitize.js

@@ -19,7 +19,7 @@ const permittedTagToAttributes = {
   div: ['data-mx-maths'],
   a: ['name', 'target', 'href', 'rel'],
   img: ['width', 'height', 'alt', 'title', 'src', 'data-mx-emoticon'],
-  o: ['start'],
+  ol: ['start'],
   code: ['class'],
 };