Add desktop app link

update intro
Merge branch 'dev' into doc-update
2022-08-22 08:10:14 +05:30 · 2022-08-21 21:53:36 +05:30 · 2022-08-21 21:43:36 +05:30 · 2022-08-21 21:26:18 +05:30
102 changed files with 21206 additions and 3968 deletions
@@ -1,2 +1,5 @@
+webpack.common.js
+webpack.dev.js
+webpack.prod.js
 experiment
 node_modules
@@ -4,56 +4,25 @@ module.exports = {
    es2021: true,
  },
  extends: [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
+    'plugin:react/recommended',
    'airbnb',
-    'prettier',
  ],
-  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
-    ecmaVersion: 'latest',
+    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'react',
-    '@typescript-eslint'
  ],
  rules: {
    'linebreak-style': 0,
    'no-underscore-dangle': 0,
-
-    "import/prefer-default-export": "off",
-    "import/extensions": "off",
-    "import/no-unresolved": "off",
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        devDependencies: true,
-      },
-    ],
-
    'react/no-unstable-nested-components': [
      'error',
      { allowAsProps: true },
    ],
-    "react/jsx-filename-extension": [
-      "error",
-      {
-        extensions: [".tsx", ".jsx"],
-      },
-    ],
-
-    "react/require-default-props": "off",
-    "react/jsx-props-no-spreading": "off",
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "error",
-
-    "@typescript-eslint/no-unused-vars": "error",
  },
 };
@@ -1,15 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:base",
-    ":dependencyDashboardApproval"
-  ],
-  "labels": [ "Dependencies" ],
-  "packageRules": [
-    {
-    "matchUpdateTypes": [ "lockFileMaintenance" ]
-    }
-  ],
-  "lockFileMaintenance": { "enabled": true },
-  "dependencyDashboard": true
-}
@@ -1,4 +1,4 @@
-name: Build pull request
+name: 'Build pull request'

 on:
  pull_request:
@@ -6,33 +6,33 @@ on:

 jobs:
  build-pull-request:
-    name: Build pull request
    runs-on: ubuntu-latest
    env:
      PR_NUMBER: ${{github.event.number}}
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3.2.0
+        uses: actions/checkout@v3.0.2
      - name: Setup node
-        uses: actions/setup-node@v3.5.1
+        uses: actions/setup-node@v3.4.1
        with:
-          node-version: 18.12.1
-          cache: "npm"
-      - name: Install dependencies
-        run: npm ci
+          node-version: 17.9.0
      - name: Build app
-        run: npm run build
+        run: npm ci && npm run build
      - name: Upload artifact
-        uses: actions/upload-artifact@v3.1.1
+        uses: actions/upload-artifact@v3.1.0
        with:
-          name: preview
+          name: previewbuild
          path: dist
          retention-days: 1
-      - name: Save pr number
-        run: echo ${PR_NUMBER} > ./pr.txt
-      - name: Upload pr number
-        uses: actions/upload-artifact@v3.1.1
+      - name: Get PR info
+        uses: actions/github-script@v6.1.1
        with:
-          name: pr
-          path: ./pr.txt
+          script: |
+            var fs = require('fs');
+            fs.writeFileSync('${{github.workspace}}/pr.json', JSON.stringify(context.payload.pull_request));
+      - name: Upload PR Info
+        uses: actions/upload-artifact@v3.1.0
+        with:
+          name: pr.json
+          path: pr.json
          retention-days: 1
@@ -1,56 +1,81 @@
-name: Deploy PR to Netlify
-
+name: Upload Preview Build to Netlify
 on:
  workflow_run:
      workflows: ["Build pull request"]
-      types: [completed]
-
+      types:
+        - completed
 jobs:
-  deploy-pull-request:
-    name: Deploy pull request
-    runs-on: ubuntu-latest
+  get-build-and-deploy:
    permissions:
      contents: read
      pull-requests: write
-    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    runs-on: ubuntu-latest
+    if: >
+      ${{ github.event.workflow_run.conclusion == 'success' }}
    steps:
-      - name: Download pr number
-        uses: dawidd6/action-download-artifact@e6e25ac3a2b93187502a8be1ef9e9603afc34925
-        with:
-          workflow: ${{ github.event.workflow.id }}
-          run_id: ${{ github.event.workflow_run.id }}
-          name: pr
-      - name: Output pr number
-        id: pr
-        run: echo "id=$(<pr.txt)" >> $GITHUB_OUTPUT
+      # There's a 'download artifact' action but it hasn't been updated for the
+      # workflow_run action (https://github.com/actions/download-artifact/issues/60)
+      # so instead we get this mess:
      - name: Download artifact
-        uses: dawidd6/action-download-artifact@e6e25ac3a2b93187502a8be1ef9e9603afc34925
+        uses: actions/github-script@v6.1.1
        with:
-          workflow: ${{ github.event.workflow.id }}
-          run_id: ${{ github.event.workflow_run.id }}
-          name: preview
-          path: dist
+          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.1
+        with:
+          script: |
+            var fs = require('fs');
+            var pr = JSON.parse(fs.readFileSync('${{github.workspace}}/pr.json'));
+            console.log(`::set-output name=prnumber::${pr.number}`);
      - name: Deploy to Netlify
        id: netlify
-        uses: nwtgck/actions-netlify@5da65c9f74c7961c5501a3ba329b8d0912f39c03
+        uses: nwtgck/actions-netlify@b7c1504e00c6b8a249d1848cc1b522a4865eed99
        with:
          publish-dir: dist
-          deploy-message: "Deploy PR ${{ steps.pr.outputs.id }}"
-          alias: ${{ steps.pr.outputs.id }}
+          deploy-message: "Deploy from GitHub Actions"
          # These don't work because we're in workflow_run
          enable-pull-request-comment: false
          enable-commit-comment: false
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_PR_CINNY }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE3_ID }}
        timeout-minutes: 1
-      - name: Comment preview on PR
-        uses: thollander/actions-comment-pull-request@c22fb302208b7b170d252a61a505d2ea27245eff
+      - name: Edit PR Description
+        uses: Beakyn/gha-comment-pull-request@2167a7aee24f9e61ce76a23039f322e49a990409
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
-          pr_number: ${{ steps.pr.outputs.id }}
-          comment_tag: ${{ steps.pr.outputs.id }}
-          message: |
+          pull-request-number: ${{ steps.readctx.outputs.prnumber }}
+          description-message: |
              Preview: ${{ steps.netlify.outputs.deploy-url }}
-              ⚠️ Exercise caution. Use test accounts. ⚠️
+              ⚠️ Exercise caution. Use test accounts. ⚠️
@@ -9,11 +9,13 @@ on:
 jobs:
  docker-build:
    runs-on: ubuntu-latest
+    env:
+      PR_NUMBER: ${{github.event.number}}
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3.2.0
+        uses: actions/checkout@v3.0.2
      - name: Build Docker image
-        uses: docker/build-push-action@v3.2.0
+        uses: docker/build-push-action@v3.1.1
        with:
          context: .
          push: false
@@ -1,26 +0,0 @@
-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.2.0
-      - 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
@@ -1,4 +1,4 @@
-name: Deploy to Netlify (dev)
+name: 'Deploy to Netlify (dev)'

 on:
  push:
@@ -7,31 +7,23 @@ on:

 jobs:
  deploy-to-netlify:
-    name: Deploy to Netlify
+    name: 'Deploy'
    runs-on: ubuntu-latest
+    permissions:
+      contents: read
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3.2.0
+        uses: actions/checkout@v3.0.2
      - name: Setup node
-        uses: actions/setup-node@v3.5.1
+        uses: actions/setup-node@v3.4.1
        with:
-          node-version: 18.12.1
-          cache: "npm"
-      - name: Install dependencies
-        run: npm ci
-      - name: Build app
-        run: npm run build
-      - name: Deploy to Netlify
-        uses: nwtgck/actions-netlify@5da65c9f74c7961c5501a3ba329b8d0912f39c03
+          node-version: 17.9.0
+      - name: Build and deploy to Netlify
+        uses: jsmrcaga/action-netlify-deploy@53de32e559b0b3833615b9788c7a090cd2fddb03
        with:
-          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:
+          install_command: "npm ci"
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_DEV }}
-        timeout-minutes: 1
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE2_ID }}
+          BUILD_DIRECTORY: "dist"
+          NETLIFY_DEPLOY_MESSAGE: "Dev deploy v${{ github.ref }}"
+          NETLIFY_DEPLOY_TO_PROD: true
@@ -1,39 +1,24 @@
-name: Production deploy
+name: 'Production deploy'

 on:
  release:
    types: [published]

 jobs:
-  deploy-and-tarball:
-    name: Netlify deploy and tarball
+  create-release-tar:
+    name: 'Create release tar'
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3.2.0
+        uses: actions/checkout@v3.0.2
      - name: Setup node
-        uses: actions/setup-node@v3.5.1
+        uses: actions/setup-node@v3.4.1
        with:
-          node-version: 18.12.1
-          cache: "npm"
-      - name: Install dependencies
-        run: npm ci
-      - name: Build app
-        run: npm run build
-      - name: Deploy to Netlify
-        uses: nwtgck/actions-netlify@5da65c9f74c7961c5501a3ba329b8d0912f39c03
-        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_APP }}
-        timeout-minutes: 1
+          node-version: 17.9.0
+      - name: Build
+        run: |
+          npm ci
+          npm run build
      - name: Get version from tag
        id: vars
        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
@@ -50,13 +35,35 @@ jobs:
          gpg --export | xxd -p
          echo '${{ secrets.GNUPG_PASSPHRASE }}' | gpg --batch --yes --pinentry-mode loopback --passphrase-fd 0 --armor --detach-sign cinny-${{ steps.vars.outputs.tag }}.tar.gz
      - name: Upload tagged release
-        uses: softprops/action-gh-release@de2c0eb89ae2a093876385947365aca7b0e5f844
+        uses: softprops/action-gh-release@1e07f4398721186383de40550babbdf2b84acfc5
        with:
          files: |
            cinny-${{ steps.vars.outputs.tag }}.tar.gz
            cinny-${{ steps.vars.outputs.tag }}.tar.gz.asc

-  publish-image:
+  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, ghcr
    runs-on: ubuntu-latest
    permissions:
@@ -64,31 +71,31 @@ jobs:
      packages: write
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3.2.0
+        uses: actions/checkout@v3.0.2
      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2.1.0
+        uses: docker/setup-qemu-action@v2.0.0
      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.2.1
+        uses: docker/setup-buildx-action@v2.0.0
      - name: Login to Docker Hub
-        uses: docker/login-action@v2.1.0
+        uses: docker/login-action@v2.0.0
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
      - name: Login to the Container registry
-        uses: docker/login-action@v2.1.0
+        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.1.1
+        uses: docker/metadata-action@v4.0.1
        with:
          images: |
            ${{ secrets.DOCKER_USERNAME }}/cinny
            ghcr.io/${{ github.repository }}
      - name: Build and push Docker image
-        uses: docker/build-push-action@v3.2.0
+        uses: docker/build-push-action@v3.1.1
        with:
          context: .
          platforms: linux/amd64,linux/arm64
@@ -1,3 +0,0 @@
-legacy-peer-deps=true
-save-exact=true
-@matrix-org:registry=https://gitlab.matrix.org/api/v4/projects/27/packages/npm/
@@ -1,6 +0,0 @@
-dist
-node_modules
-package.json
-package-lock.json
-LICENSE
-README.md
@@ -1,4 +0,0 @@
-{
-  "printWidth": 100,
-  "singleQuote": true
-}
@@ -1,3 +0,0 @@
-{
-  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
-}
@@ -1,5 +0,0 @@
-{
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "typescript.tsdk": "node_modules/typescript/lib"
-}
@@ -41,4 +41,4 @@ Also, we use [ESLint](https://eslint.org/) for clean and stylistically consisten
 ## 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)
+- [Matrix JavaScript SDK documentation](https://matrix-org.github.io/matrix-js-sdk/19.2.0/index.html)
@@ -1,16 +1,16 @@
 ## Builder
-FROM node:18.12.1-alpine3.15 as builder
+FROM node:17.9.0-alpine3.15 as builder

 WORKDIR /src

-COPY .npmrc package.json package-lock.json /src/
+COPY package.json package-lock.json /src/
 RUN npm ci
 COPY . /src/
 RUN npm run build


 ## App
-FROM nginx:1.23.3-alpine
+FROM nginx:1.23.1-alpine

 COPY --from=builder /src/dist /app

@@ -84,7 +84,7 @@ UeGsouhyuITLwEhScounZDqop+Dx

 ## 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 Hydrogen LTS (v18).
+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 start a development server:
 ```sh
@@ -1,9 +1,9 @@
 {
  "defaultHomeserver": 3,
  "homeserverList": [
-    "converser.eu",
    "envs.net",
    "halogen.city",
+    "kde.org",
    "matrix.org",
    "mozilla.org"
  ],
@@ -1,101 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Cinny</title>
-    <meta name="name" content="Cinny" />
-    <meta name="author" content="Ajay Bura" />
-    <meta
-      name="description"
-      content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
-    />
-    <meta
-      name="keywords"
-      content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element"
-    />
-
-    <meta property="og:title" content="Cinny" />
-    <meta property="og:url" content="https://cinny.in" />
-    <meta property="og:image" content="https://cinny.in/assets/favicon-48x48.png" />
-    <meta
-      property="og:description"
-      content="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="./public/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="./public/res/apple/apple-touch-icon-57x57.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="60x60"
-      href="./public/res/apple/apple-touch-icon-60x60.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="72x72"
-      href="./public/res/apple/apple-touch-icon-72x72.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="76x76"
-      href="./public/res/apple/apple-touch-icon-76x76.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="114x114"
-      href="./public/res/apple/apple-touch-icon-114x114.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="120x120"
-      href="./public/res/apple/apple-touch-icon-120x120.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="144x144"
-      href="./public/res/apple/apple-touch-icon-144x144.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="152x152"
-      href="./public/res/apple/apple-touch-icon-152x152.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="167x167"
-      href="./public/res/apple/apple-touch-icon-167x167.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="./public/res/apple/apple-touch-icon-180x180.png"
-    />
-  </head>
-  <body id="appBody">
-    <script>
-      window.global ||= window;
-    </script>
-    <div id="root"></div>
-    <audio id="notificationSound">
-      <source src="./public/sound/notification.ogg" type="audio/ogg" />
-    </audio>
-    <audio id="inviteSound">
-      <source src="./public/sound/invite.ogg" type="audio/ogg" />
-    </audio>
-    <script type="module" src="./src/index.jsx"></script>
-  </body>
-</html>
@@ -1,74 +1,85 @@
 {
  "name": "cinny",
-  "version": "2.2.3",
+  "version": "2.1.2",
  "description": "Yet another matrix client",
  "main": "index.js",
  "engines": {
-    "node": ">=16.0.0"
+    "npm": ">=6.14.8 <=8.5.5",
+    "node": ">=14.15.0 <=17.9.0"
  },
  "scripts": {
-    "start": "vite",
-    "build": "vite build",
-    "lint": "yarn check:eslint && yarn check:prettier",
-    "check:eslint": "eslint src/*",
-    "check:prettier": "prettier --check .",
-    "fix:prettier": "prettier --write .",
-    "typecheck": "tsc --noEmit"
+    "start": "webpack serve --config ./webpack.dev.js --open",
+    "build": "webpack --config ./webpack.prod.js"
  },
  "keywords": [],
  "author": "Ajay Bura",
  "license": "MIT",
  "dependencies": {
-    "@fontsource/inter": "4.5.14",
-    "@fontsource/roboto": "4.5.8",
-    "@khanacademy/simple-markdown": "0.8.6",
-    "@matrix-org/olm": "3.2.14",
-    "@tippyjs/react": "4.2.6",
-    "blurhash": "2.0.4",
-    "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.4",
-    "linkify-html": "4.0.2",
-    "linkifyjs": "4.0.2",
-    "matrix-js-sdk": "22.0.0",
-    "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-autosize-textarea": "7.1.0",
-    "react-blurhash": "0.2.0",
-    "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.16.1",
-    "sanitize-html": "2.8.0",
-    "tippy.js": "6.3.7",
-    "twemoji": "14.0.2"
+    "@fontsource/inter": "^4.5.12",
+    "@fontsource/roboto": "^4.5.8",
+    "@khanacademy/simple-markdown": "^0.8.3",
+    "@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",
+    "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"
  },
  "devDependencies": {
-    "@rollup/plugin-wasm": "6.1.1",
-    "@types/node": "18.11.18",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.9",
-    "@typescript-eslint/eslint-plugin": "5.46.1",
-    "@typescript-eslint/parser": "5.46.1",
-    "@vitejs/plugin-react": "3.0.0",
-    "eslint": "8.29.0",
-    "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsx-a11y": "6.6.1",
-    "eslint-plugin-react": "7.31.11",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "mini-svg-data-uri": "1.4.4",
-    "prettier": "2.8.1",
-    "sass": "1.56.2",
-    "typescript": "4.9.4",
-    "vite": "4.0.1",
-    "vite-plugin-static-copy": "0.13.0"
+    "@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.22.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.4",
+    "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.10.0",
+    "webpack-merge": "^5.7.3"
  }
 }
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cinny</title>
+    <meta name="name"        content="Cinny">
+    <meta name="author"      content="Ajay Bura">
+    <meta name="description" content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source.">
+    <meta name="keywords"    content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element">
+  
+    <meta property="og:title"       content="Cinny">
+    <meta property="og:url"         content="https://cinny.in">
+    <meta property="og:image"       content="https://cinny.in/assets/favicon-48x48.png">
+    <meta property="og:description" content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source.">
+    <meta name="theme-color" content="#000000">
+</head>
+<body id="appBody">
+    <div id="root"></div>
+    <audio id="notificationSound">
+        <source src="./sound/notification.ogg" type="audio/ogg" />
+    </audio>
+    <audio id="inviteSound">
+        <source src="./sound/invite.ogg" type="audio/ogg" />
+    </audio>
+</body>
+</html>
@@ -1,59 +0,0 @@
-{
-  "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": "/public/android/android-chrome-36x36.png",
-      "sizes": "36x36",
-      "type": "image/png"
-    },
-    {
-      "src": "/public/android/android-chrome-48x48.png",
-      "sizes": "48x48",
-      "type": "image/png"
-    },
-    {
-      "src": "/public/android/android-chrome-72x72.png",
-      "sizes": "72x72",
-      "type": "image/png"
-    },
-    {
-      "src": "/public/android/android-chrome-96x96.png",
-      "sizes": "96x96",
-      "type": "image/png"
-    },
-    {
-      "src": "/public/android/android-chrome-144x144.png",
-      "sizes": "144x144",
-      "type": "image/png"
-    },
-    {
-      "src": "/public/android/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/public/android/android-chrome-256x256.png",
-      "sizes": "256x256",
-      "type": "image/png"
-    },
-    {
-      "src": "/public/android/android-chrome-384x384.png",
-      "sizes": "384x384",
-      "type": "image/png"
-    },
-    {
-      "src": "/public/android/android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ]
-}
@@ -1,13 +0,0 @@
-<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>
@@ -1,13 +0,0 @@
-<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>
@@ -1,4 +1,8 @@
-import { avatarInitials, cssVar } from '../../../util/common';
+import { avatarInitials } from '../../../util/common';
+
+function cssVar(name) {
+  return getComputedStyle(document.body).getPropertyValue(name);
+}

 // renders the avatar and returns it as an URL
 export default async function renderAvatar({
@@ -1,6 +1,5 @@
 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import './Math.scss';

 import katex from 'katex';
 import 'katex/dist/katex.min.css';
@@ -1,3 +0,0 @@
-.katex-display {
-  margin: 0 !important;
-}
@@ -2,18 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './RawIcon.scss';

-function RawIcon({ color, size, src, isImage }) {
+function RawIcon({
+  color, size, src, isImage,
+}) {
  const style = {};
  if (color !== null) style.backgroundColor = color;
  if (isImage) {
    style.backgroundColor = 'transparent';
-    style.backgroundImage = `url("${src}")`;
+    style.backgroundImage = `url(${src})`;
  } else {
-    style.WebkitMaskImage = `url("${src}")`;
-    style.maskImage = `url("${src}")`;
+    style.WebkitMaskImage = `url(${src})`;
+    style.maskImage = `url(${src})`;
  }

-  return <span className={`ic-raw ic-raw-${size}`} style={style} />;
+  return <span className={`ic-raw ic-raw-${size}`} style={style}> </span>;
 }

 RawIcon.defaultProps = {
@@ -1,22 +0,0 @@
-/* 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;
-}
@@ -1,174 +0,0 @@
-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;
@@ -1,64 +0,0 @@
-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;
@@ -1,17 +0,0 @@
-.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;
-      }
-    }
-  }
-}
@@ -1,239 +0,0 @@
-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;
@@ -1,17 +0,0 @@
-.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;
-      }
-    }
-  }
-}
@@ -1,26 +0,0 @@
-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;
@@ -27,7 +27,9 @@ function ImagePackUpload({ onUpload }) {

    setProgress(true);
    const image = await scaleDownImage(imgFile, 512, 512);
-    const { content_uri: url } = await mx.uploadContent(image);
+    const url = await mx.uploadContent(image, {
+      onlyContentUri: true,
+    });

    onUpload(shortcode, url);
    setProgress(false);
@@ -22,7 +22,7 @@ function ImageUpload({
    const file = e.target.files.item(0);
    if (file === null) return;
    try {
-      const uPromise = initMatrix.matrixClient.uploadContent(file);
+      const uPromise = initMatrix.matrixClient.uploadContent(file, { onlyContentUri: false });
      setUploadPromise(uPromise);

      const res = await uPromise;
@@ -74,7 +74,7 @@ function ImageUpload({
          <Text variant="b3">{uploadPromise ? 'Cancel' : 'Remove'}</Text>
        </button>
      )}
-      <input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" accept="image/*" />
+      <input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" />
    </div>
  );
 }
@@ -8,9 +8,7 @@ import './Message.scss';
 import { twemojify } from '../../../util/twemojify';

 import initMatrix from '../../../client/initMatrix';
-import {
-  getUsername, getUsernameOfRoomMember, parseReply, trimHTMLReply,
-} from '../../../util/matrixUtil';
+import { getUsername, getUsernameOfRoomMember, parseReply } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
 import { getEventCords } from '../../../util/common';
 import { redactEvent, sendReaction } from '../../../client/action/roomTimeline';
@@ -40,7 +38,6 @@ 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 (
@@ -251,7 +248,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 className="message__body-plain">{content}</p>);
+    content = (<p>{content}</p>);
  }

  return (
@@ -300,12 +297,12 @@ function MessageEdit({ body, onSave, onCancel }) {

    if (e.key === 'Enter' && e.shiftKey === false) {
      e.preventDefault();
-      onSave(editInputRef.current.value, body);
+      onSave(editInputRef.current.value);
    }
  };

  return (
-    <form className="message__edit" onSubmit={(e) => { e.preventDefault(); onSave(editInputRef.current.value, body); }}>
+    <form className="message__edit" onSubmit={(e) => { e.preventDefault(); onSave(editInputRef.current.value); }}>
      <Input
        forwardRef={editInputRef}
        onKeyDown={handleKeyDown}
@@ -732,37 +729,36 @@ 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(() => {
    setEdit(eventId);
  }, []);
  const reply = useCallback(() => {
-    replyTo(senderId, mEvent.getId(), body, customHTML);
-  }, [body, customHTML]);
+    replyTo(senderId, mEvent.getId(), body);
+  }, [body]);

+  if (body === undefined) return null;
  if (msgType === 'm.emote') className.push('message--type-emote');

+  let isCustomHTML = content.format === 'org.matrix.custom.html';
  const isEdited = 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(' ')}>
      {
@@ -803,11 +799,9 @@ function Message({
        )}
        {isEdit && (
          <MessageEdit
-            body={(customHTML
-              ? html(customHTML, { kind: 'edit', onlyPlain: true }).plain
-              : plain(body, { kind: 'edit', onlyPlain: true }).plain)}
-            onSave={(newBody, oldBody) => {
-              if (newBody !== oldBody) {
+            body={body}
+            onSave={(newBody) => {
+              if (newBody !== body) {
                initMatrix.roomsInput.sendEditedMessage(roomId, mEvent, newBody);
              }
              cancelEdit();
@@ -163,7 +163,7 @@
 .message__body {
  word-break: break-word;

-  & > .text > .message__body-plain {
+  & > .text > * {
    white-space: pre-wrap;
  }

@@ -174,8 +174,8 @@
    white-space: initial !important;
  }

-  & > .text > p + p {
-    margin-top: var(--sp-normal);
+  & p:not(:last-child) {
+    margin-bottom: var(--sp-normal);
  }

  & span[data-mx-pill] {
@@ -13,7 +13,6 @@ import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
 import AsyncSearch from '../../../util/AsyncSearch';
 import { addRecentEmoji, getRecentEmojis } from './recent';
-import { TWEMOJI_BASE_URL } from '../../../util/twemojify';

 import Text from '../../atoms/text/Text';
 import RawIcon from '../../atoms/system-icons/RawIcon';
@@ -47,49 +46,45 @@ const EmojiGroup = React.memo(({ name, groupEmojis }) => {
        const emoji = groupEmojis[emojiIndex];
        emojiRow.push(
          <span key={emojiIndex}>
-            {emoji.hexcode ? (
-              // This is a unicode emoji, and should be rendered with twemoji
-              parse(
-                twemoji.parse(emoji.unicode, {
-                  attributes: () => ({
-                    unicode: emoji.unicode,
-                    shortcodes: emoji.shortcodes?.toString(),
-                    hexcode: emoji.hexcode,
-                    loading: 'lazy',
-                  }),
-                  base: TWEMOJI_BASE_URL,
-                })
-              )
-            ) : (
-              // This is a custom emoji, and should be render as an mxc
-              <img
-                className="emoji"
-                draggable="false"
-                loading="lazy"
-                alt={emoji.shortcode}
-                unicode={`:${emoji.shortcode}:`}
-                shortcodes={emoji.shortcode}
-                src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc)}
-                data-mx-emoticon={emoji.mxc}
-              />
-            )}
-          </span>
+            {
+              emoji.hexcode
+                // This is a unicode emoji, and should be rendered with twemoji
+                ? parse(twemoji.parse(
+                  emoji.unicode,
+                  {
+                    attributes: () => ({
+                      unicode: emoji.unicode,
+                      shortcodes: emoji.shortcodes?.toString(),
+                      hexcode: emoji.hexcode,
+                      loading: 'lazy',
+                    }),
+                  },
+                ))
+                // This is a custom emoji, and should be render as an mxc
+                : (
+                  <img
+                    className="emoji"
+                    draggable="false"
+                    loading="lazy"
+                    alt={emoji.shortcode}
+                    unicode={`:${emoji.shortcode}:`}
+                    shortcodes={emoji.shortcode}
+                    src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc)}
+                    data-mx-emoticon={emoji.mxc}
+                  />
+                )
+            }
+          </span>,
        );
      }
-      emojiBoard.push(
-        <div key={r} className="emoji-row">
-          {emojiRow}
-        </div>
-      );
+      emojiBoard.push(<div key={r} className="emoji-row">{emojiRow}</div>);
    }
    return emojiBoard;
  }

  return (
    <div className="emoji-group">
-      <Text className="emoji-group__header" variant="b2" weight="bold">
-        {name}
-      </Text>
+      <Text className="emoji-group__header" variant="b2" weight="bold">{name}</Text>
      {groupEmojis.length !== 0 && <div className="emoji-set noselect">{getEmojiBoard()}</div>}
    </div>
  );
@@ -97,16 +92,17 @@ const EmojiGroup = React.memo(({ name, groupEmojis }) => {

 EmojiGroup.propTypes = {
  name: PropTypes.string.isRequired,
-  groupEmojis: PropTypes.arrayOf(
-    PropTypes.shape({
-      length: PropTypes.number,
-      unicode: PropTypes.string,
-      hexcode: PropTypes.string,
-      mxc: PropTypes.string,
-      shortcode: PropTypes.string,
-      shortcodes: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    })
-  ).isRequired,
+  groupEmojis: PropTypes.arrayOf(PropTypes.shape({
+    length: PropTypes.number,
+    unicode: PropTypes.string,
+    hexcode: PropTypes.string,
+    mxc: PropTypes.string,
+    shortcode: PropTypes.string,
+    shortcodes: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string),
+    ]),
+  })).isRequired,
 };

 const asyncSearch = new AsyncSearch();
@@ -132,13 +128,7 @@ function SearchedEmoji() {

  if (searchedEmojis === null) return false;

-  return (
-    <EmojiGroup
-      key="-1"
-      name={searchedEmojis.emojis.length === 0 ? 'No search result found' : 'Search results'}
-      groupEmojis={searchedEmojis.emojis}
-    />
-  );
+  return <EmojiGroup key="-1" name={searchedEmojis.emojis.length === 0 ? 'No search result found' : 'Search results'} groupEmojis={searchedEmojis.emojis} />;
 }

 function EmojiBoard({ onSelect, searchRef }) {
@@ -156,10 +146,7 @@ function EmojiBoard({ onSelect, searchRef }) {
    if (typeof shortcodes === 'undefined') shortcodes = undefined;
    else shortcodes = shortcodes.split(',');
    return {
-      unicode,
-      hexcode,
-      shortcodes,
-      mxc,
+      unicode, hexcode, shortcodes, mxc,
    };
  }

@@ -224,9 +211,10 @@ function EmojiBoard({ onSelect, searchRef }) {
      const parentIds = initMatrix.roomList.getAllParentSpaces(room.roomId);
      const parentRooms = [...parentIds].map((id) => mx.getRoom(id));
      if (room) {
-        const packs = getRelevantPacks(room.client, [room, ...parentRooms]).filter(
-          (pack) => pack.getEmojis().length !== 0
-        );
+        const packs = getRelevantPacks(
+          room.client,
+          [room, ...parentRooms],
+        ).filter((pack) => pack.getEmojis().length !== 0);

        // Set an index for each pack so that we know where to jump when the user uses the nav
        for (let i = 0; i < packs.length; i += 1) {
@@ -275,41 +263,44 @@ function EmojiBoard({ onSelect, searchRef }) {
            />
          )}
          <div className="emoji-board__nav-custom">
-            {availableEmojis.map((pack) => {
-              const src = initMatrix.matrixClient.mxcUrlToHttp(
-                pack.avatarUrl ?? pack.getEmojis()[0].mxc
-              );
-              return (
-                <IconButton
-                  onClick={() => openGroup(recentOffset + pack.packIndex)}
-                  src={src}
-                  key={pack.packIndex}
-                  tooltip={pack.displayName ?? 'Unknown'}
-                  tooltipPlacement="left"
-                  isImage
-                />
-              );
-            })}
+            {
+              availableEmojis.map((pack) => {
+                const src = initMatrix.matrixClient
+                  .mxcUrlToHttp(pack.avatarUrl ?? pack.getEmojis()[0].mxc);
+                return (
+                  <IconButton
+                    onClick={() => openGroup(recentOffset + pack.packIndex)}
+                    src={src}
+                    key={pack.packIndex}
+                    tooltip={pack.displayName ?? 'Unknown'}
+                    tooltipPlacement="left"
+                    isImage
+                  />
+                );
+              })
+            }
          </div>
          <div className="emoji-board__nav-twemoji">
-            {[
-              [0, EmojiIC, 'Smilies'],
-              [1, DogIC, 'Animals'],
-              [2, CupIC, 'Food'],
-              [3, BallIC, 'Activities'],
-              [4, PhotoIC, 'Travel'],
-              [5, BulbIC, 'Objects'],
-              [6, PeaceIC, 'Symbols'],
-              [7, FlagIC, 'Flags'],
-            ].map(([indx, ico, name]) => (
-              <IconButton
-                onClick={() => openGroup(recentOffset + availableEmojis.length + indx)}
-                key={indx}
-                src={ico}
-                tooltip={name}
-                tooltipPlacement="left"
-              />
-            ))}
+            {
+              [
+                [0, EmojiIC, 'Smilies'],
+                [1, DogIC, 'Animals'],
+                [2, CupIC, 'Food'],
+                [3, BallIC, 'Activities'],
+                [4, PhotoIC, 'Travel'],
+                [5, BulbIC, 'Objects'],
+                [6, PeaceIC, 'Symbols'],
+                [7, FlagIC, 'Flags'],
+              ].map(([indx, ico, name]) => (
+                <IconButton
+                  onClick={() => openGroup(recentOffset + availableEmojis.length + indx)}
+                  key={indx}
+                  src={ico}
+                  tooltip={name}
+                  tooltipPlacement="left"
+                />
+              ))
+            }
          </div>
        </div>
      </ScrollView>
@@ -322,25 +313,27 @@ function EmojiBoard({ onSelect, searchRef }) {
          <ScrollView ref={scrollEmojisRef} autoHide>
            <div onMouseMove={hoverEmoji} onClick={selectEmoji}>
              <SearchedEmoji />
-              {recentEmojis.length > 0 && (
-                <EmojiGroup name="Recently used" groupEmojis={recentEmojis} />
-              )}
-              {availableEmojis.map((pack) => (
-                <EmojiGroup
-                  name={pack.displayName ?? 'Unknown'}
-                  key={pack.packIndex}
-                  groupEmojis={pack.getEmojis()}
-                  className="custom-emoji-group"
-                />
-              ))}
-              {emojiGroups.map((group) => (
-                <EmojiGroup key={group.name} name={group.name} groupEmojis={group.emojis} />
-              ))}
+              {recentEmojis.length > 0 && <EmojiGroup name="Recently used" groupEmojis={recentEmojis} />}
+              {
+                availableEmojis.map((pack) => (
+                  <EmojiGroup
+                    name={pack.displayName ?? 'Unknown'}
+                    key={pack.packIndex}
+                    groupEmojis={pack.getEmojis()}
+                    className="custom-emoji-group"
+                  />
+                ))
+              }
+              {
+                emojiGroups.map((group) => (
+                  <EmojiGroup key={group.name} name={group.name} groupEmojis={group.emojis} />
+                ))
+              }
            </div>
          </ScrollView>
        </div>
        <div ref={emojiInfo} className="emoji-board__content__info">
-          <div>{parse(twemoji.parse('🙂', { base: TWEMOJI_BASE_URL }))}</div>
+          <div>{ parse(twemoji.parse('🙂')) }</div>
          <Text>:slight_smile:</Text>
        </div>
      </div>
@@ -38,7 +38,7 @@
    @extend .cp-fx__column;
  }
  &__nav-twemoji {
-    background-color: var(--bg-surface);
+    background: inherit;
    position: sticky;
    bottom: -70%;
    z-index: 999;
@@ -56,9 +56,7 @@ function Drawer() {

  useEffect(() => {
    requestAnimationFrame(() => {
-      if (scrollRef.current) {
-        scrollRef.current.scrollTop = 0;
-      }
+      scrollRef.current.scrollTop = 0;
    });
  }, [selectedTab]);

@@ -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, accountData } = initMatrix;
+  const { roomList, notifications } = initMatrix;
  const mx = initMatrix.matrixClient;
  const spacePath = navigation.selectedSpacePath;

@@ -49,9 +49,9 @@ function DrawerBreadcrumb({ spaceId }) {
  }, [spaceId]);

  function getHomeNotiExcept(childId) {
-    const orphans = roomList.getOrphans()
-      .filter((id) => (id !== childId))
-      .filter((id) => !accountData.spaceShortcut.has(id));
+    const orphans = roomList.getOrphans();
+    const childIndex = orphans.indexOf(childId);
+    if (childId !== -1) orphans.splice(childIndex, 1);

    let noti = null;

@@ -57,7 +57,7 @@ export function HomeSpaceOptions({ spaceId, afterOptionSelect }) {
          iconSrc={HashGlobeIC}
          onClick={() => { afterOptionSelect(); openPublicRooms(); }}
        >
-          Explore public rooms
+          Join public room
        </MenuItem>
      )}
      { !spaceId && (
@@ -25,7 +25,7 @@ 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));
@@ -16,6 +16,7 @@ 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;
@@ -95,7 +96,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) ?? userId}</Text>
+        <Text variant="h2" primary weight="medium">{twemojify(username)}</Text>
        <IconButton
          src={PencilIC}
          size="extra-small"
@@ -110,7 +111,7 @@ function ProfileEditor({ userId }) {
  return (
    <div className="profile-editor">
      <ImageUpload
-        text={username ?? userId}
+        text={username}
        bgColor={colorMXID(userId)}
        imageSrc={avatarSrc}
        onUpload={handleAvatarUpload}
@@ -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,18 +209,19 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
  };

  const toggleIgnore = async () => {
-    const isIgnored = mx.getIgnoredUsers().includes(userId);
+    const ignoredUsers = mx.getIgnoredUsers();
+    const uIndex = ignoredUsers.indexOf(userId);
+    if (uIndex >= 0) {
+      if (uIndex === -1) return;
+      ignoredUsers.splice(uIndex, 1);
+    } else ignoredUsers.push(userId);

    try {
      setIsIgnoring(true);
-      if (isIgnored) {
-        await roomActions.unignore([userId]);
-      } else {
-        await roomActions.ignore([userId]);
-      }
+      await mx.setIgnoredUsers(ignoredUsers);

      if (isMountedRef.current === false) return;
-      setIsUserIgnored(!isIgnored);
+      setIsUserIgnored(uIndex < 0);
      setIsIgnoring(false);
    } catch {
      setIsIgnoring(false);
@@ -5,9 +5,16 @@ import './RoomViewCmdBar.scss';
 import parse from 'html-react-parser';
 import twemoji from 'twemoji';

-import { twemojify, TWEMOJI_BASE_URL } from '../../../util/twemojify';
+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';

@@ -15,7 +22,37 @@ 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';
-import commands from './commands';
+
+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),
+}];

 function CmdItem({ onClick, children }) {
  return (
@@ -31,19 +68,19 @@ CmdItem.propTypes = {

 function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
  function renderCmdSuggestions(cmdPrefix, cmds) {
-    const cmdOptString = typeof option === 'string' ? `/${option}` : '/?';
+    const cmdOptString = (typeof option === 'string') ? `/${option}` : '/?';
    return cmds.map((cmd) => (
      <CmdItem
-        key={cmd}
+        key={cmd.name}
        onClick={() => {
          fireCmd({
            prefix: cmdPrefix,
            option,
-            result: commands[cmd],
+            result: cmd,
          });
        }}
      >
-        <Text variant="b2">{`${cmd}${cmd.isOptions ? cmdOptString : ''}`}</Text>
+        <Text variant="b2">{`${cmd.name}${cmd.isOptions ? cmdOptString : ''}`}</Text>
      </CmdItem>
    ));
  }
@@ -53,15 +90,15 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {

    // Renders a small Twemoji
    function renderTwemoji(emoji) {
-      return parse(
-        twemoji.parse(emoji.unicode, {
+      return parse(twemoji.parse(
+        emoji.unicode,
+        {
          attributes: () => ({
            unicode: emoji.unicode,
            shortcodes: emoji.shortcodes?.toString(),
          }),
-          base: TWEMOJI_BASE_URL,
-        })
-      );
+        },
+      ));
    }

    // Render a custom emoji
@@ -87,12 +124,10 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
    return emos.map((emoji) => (
      <CmdItem
        key={emoji.shortcode}
-        onClick={() =>
-          fireCmd({
-            prefix: emPrefix,
-            result: emoji,
-          })
-        }
+        onClick={() => fireCmd({
+          prefix: emPrefix,
+          result: emoji,
+        })}
      >
        <Text variant="b1">{renderEmoji(emoji)}</Text>
        <Text variant="b2">{`:${emoji.shortcode}:`}</Text>
@@ -174,8 +209,8 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
    const mx = initMatrix.matrixClient;
    const setupSearch = {
      '/': () => {
-        asyncSearch.setup(Object.keys(commands), { isContain: true });
-        setCmd({ prefix, suggestions: Object.keys(commands) });
+        asyncSearch.setup(commands, { keys: ['name'], isContain: true });
+        setCmd({ prefix, suggestions: commands });
      },
      ':': () => {
        const parentIds = initMatrix.roomList.getAllParentSpaces(roomId);
@@ -189,13 +224,10 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
        });
      },
      '@': () => {
-        const members = mx
-          .getRoom(roomId)
-          .getJoinedMembers()
-          .map((member) => ({
-            name: member.name,
-            userId: member.userId.slice(1),
-          }));
+        const members = mx.getRoom(roomId).getJoinedMembers().map((member) => ({
+          name: member.name,
+          userId: member.userId.slice(1),
+        }));
        asyncSearch.setup(members, { keys: ['name', 'userId'], limit: 20 });
        const endIndex = members.length > 20 ? 20 : members.length;
        setCmd({ prefix, suggestions: members.slice(0, endIndex) });
@@ -210,9 +242,8 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
  }
  function fireCmd(myCmd) {
    if (myCmd.prefix === '/') {
-      viewEvent.emit('cmd_fired', {
-        replace: `/${myCmd.result.name}`,
-      });
+      myCmd.result.exe(roomId, myCmd.option);
+      viewEvent.emit('cmd_fired');
    }
    if (myCmd.prefix === ':') {
      if (!myCmd.result.mxc) addRecentEmoji(myCmd.result.unicode);
@@ -282,7 +313,9 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
      </div>
      <div className="cmd-bar__content">
        <ScrollView horizontal vertical={false} invisible>
-          <div className="cmd-bar__content-suggestions">{renderSuggestions(cmd, fireCmd)}</div>
+          <div className="cmd-bar__content-suggestions">
+            { renderSuggestions(cmd, fireCmd) }
+          </div>
        </ScrollView>
      </div>
    </div>
@@ -33,10 +33,9 @@ function RoomViewHeader({ roomId }) {
  const [, forceUpdate] = useForceUpdate();
  const mx = initMatrix.matrixClient;
  const isDM = initMatrix.roomList.directs.has(roomId);
-  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;
+  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 roomHeaderBtnRef = useRef(null);
  useEffect(() => {
@@ -94,7 +93,7 @@ function RoomViewHeader({ roomId }) {
        </TitleWrapper>
        <RawIcon src={ChevronBottomIC} />
      </button>
-      {mx.isRoomEncrypted(roomId) === false && <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} />}
+      <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
@@ -21,7 +21,6 @@ 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';
@@ -30,11 +29,10 @@ 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;
@@ -43,6 +41,7 @@ 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);
@@ -61,9 +60,11 @@ 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);
    };
@@ -143,11 +144,9 @@ function RoomViewInput({
    textAreaRef.current.focus();
  }

-  function setUpReply(userId, eventId, body, formattedBody) {
+  function setUpReply(userId, eventId, body) {
    setReplyTo({ userId, eventId, body });
-    roomsInput.setReplyTo(roomId, {
-      userId, eventId, body, formattedBody,
-    });
+    roomsInput.setReplyTo(roomId, { userId, eventId, body });
    focusInput();
  }

@@ -183,57 +182,30 @@ function RoomViewInput({
    };
  }, [roomId]);

-  const sendBody = async (body, options) => {
-    const opt = options ?? {};
-    if (!opt.msgType) opt.msgType = 'm.text';
-    if (typeof opt.autoMarkdown !== 'boolean') opt.autoMarkdown = true;
+  const sendMessage = async () => {
+    requestAnimationFrame(() => deactivateCmdAndEmit());
+    const msgBody = textAreaRef.current.value;
    if (roomsInput.isSending(roomId)) return;
+    if (msgBody.trim() === '' && attachment === null) return;
    sendIsTyping(false);

-    roomsInput.setMessage(roomId, body);
+    roomsInput.setMessage(roomId, msgBody);
    if (attachment !== null) {
      roomsInput.setAttachment(roomId, attachment);
    }
    textAreaRef.current.disabled = true;
    textAreaRef.current.style.cursor = 'not-allowed';
-    await roomsInput.sendInput(roomId, opt);
+    await roomsInput.sendInput(roomId);
    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);
  };
@@ -291,11 +263,6 @@ 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();
@@ -380,6 +347,7 @@ function RoomViewInput({
              />
            </Text>
          </ScrollView>
+          {isMarkdown && <RawIcon size="extra-small" src={MarkdownIC} />}
        </div>
        <div ref={rightOptionsRef} className="room-input__option-container">
          <IconButton
@@ -453,7 +421,6 @@ function RoomViewInput({
        />
        <MessageReply
          userId={replyTo.userId}
-          onKeyDown={handleKeyDown}
          name={getUsername(replyTo.userId)}
          color={colorMXID(replyTo.userId)}
          body={replyTo.body}
@@ -1,220 +0,0 @@
-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;
@@ -1,10 +0,0 @@
-.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);
-    }
-  }
-}
@@ -168,7 +168,7 @@ function Search() {
    }
  };

-  const noti = initMatrix.notifications;
+  const notifs = initMatrix.notifications;
  const renderRoomSelector = (item) => {
    let imageSrc = null;
    let iconSrc = null;
@@ -178,6 +178,9 @@ 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}
@@ -186,9 +189,9 @@ function Search() {
        roomId={item.roomId}
        imageSrc={imageSrc}
        iconSrc={iconSrc}
-        isUnread={noti.hasNoti(item.roomId)}
-        notificationCount={noti.getTotalNoti(item.roomId)}
-        isAlert={noti.getHighlightNoti(item.roomId) > 0}
+        isUnread={isUnread}
+        notificationCount={noti.total}
+        isAlert={noti.highlight > 0}
        onClick={() => openItem(item.roomId, item.type)}
      />
    );
@@ -204,7 +207,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}
@@ -180,15 +180,13 @@ function DeviceManage() {
        }
        content={(
          <>
-            {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>
-            )}
+            <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(' ')}`}
@@ -9,6 +9,7 @@ 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';
@@ -24,9 +25,6 @@ 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';
@@ -152,29 +150,24 @@ 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>
-      <GlobalNotification />
-      <KeywordNotification />
-      <IgnoreUserList />
-    </>
+    <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>
  );
 }

@@ -238,7 +231,6 @@ 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>
@@ -327,7 +319,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')) {
-      initMatrix.logout();
+      logout();
    }
  };

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

  & pre {
    padding: var(--sp-extra-tight);
-    white-space: pre-wrap;
-    word-break: break-all;
  }

  &__card {
@@ -7,21 +7,18 @@ 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');
@@ -77,20 +74,9 @@ function Client() {
  if (isLoading) {
    return (
      <div className="loading-display">
-        <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>
+        <button className="loading__logout" onClick={logout} type="button">
+          <Text variant="b3">Logout</Text>
+        </button>
        <Spinner />
        <Text className="loading__message" variant="b2">{loadingMsg}</Text>

@@ -45,12 +45,12 @@
  position: absolute;
  bottom: var(--sp-normal);
 }
-.loading__menu {
+.loading__logout {
  position: absolute;
-  top: var(--sp-extra-tight);
+  bottom: var(--sp-extra-tight);
  right: var(--sp-extra-tight);
  cursor: pointer;
-  .context-menu__item .text {
-    margin: 0 !important;
+  .text {
+    color: var(--tc-link);
  }
 }
@@ -0,0 +1,16 @@
+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;
@@ -139,13 +139,12 @@ export function openViewSource(event) {
  });
 }

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

@@ -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 || undefined to remove
+ * @param {string} userId User id to which dm
 * @returns {Promise} A promise
 */
 function addRoomToMDirect(roomId, userId) {
@@ -79,23 +79,13 @@ 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 = false, via = undefined) {
+async function join(roomIdOrAlias, isDM, via) {
  const mx = initMatrix.matrixClient;
  const roomIdParts = roomIdOrAlias.split(':');
  const viaServers = via || [roomIdParts[1]];
@@ -160,10 +150,10 @@ async function create(options, isDM = false) {
  }
 }

-async function createDM(userIdOrIds, isEncrypted = true) {
+async function createDM(userId, isEncrypted = true) {
  const options = {
    is_direct: true,
-    invite: Array.isArray(userIdOrIds) ? userIdOrIds : [userIdOrIds],
+    invite: [userId],
    visibility: 'private',
    preset: 'trusted_private_chat',
    initial_state: [],
@@ -236,12 +226,16 @@ async function createRoom(opts) {
    });
  }
  if (parentId && joinRule === 'restricted') {
-    const caps = await mx.getCapabilities();
-    if (caps['m.room_versions'].available?.['9'] !== 'stable') {
-      throw new Error("ERROR: The server doesn't support restricted rooms");
-    }
-    if (Number(caps['m.room_versions'].default) < 9) {
-      options.room_version = '9';
+    try {
+      const caps = await mx.getCapabilities();
+      options.room_version = caps
+        ?.['m.room_versions']
+        ?.['org.matrix.msc3244.room_capabilities']
+        ?.restricted
+        ?.preferred
+        || undefined;
+    } catch {
+      console.error('Can\'t find room version for restricted.');
    }
    options.initial_state.push({
      type: 'm.room.join_rules',
@@ -268,10 +262,10 @@ async function createRoom(opts) {
  return result;
 }

-async function invite(roomId, userId, reason) {
+async function invite(roomId, userId) {
  const mx = initMatrix.matrixClient;

-  const result = await mx.invite(roomId, userId, undefined, reason);
+  const result = await mx.invite(roomId, userId);
  return result;
 }

@@ -296,21 +290,6 @@ 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);
@@ -321,37 +300,9 @@ 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,
 };
@@ -1,6 +1,5 @@
 import EventEmitter from 'events';
 import * as sdk from 'matrix-js-sdk';
-import Olm from '@matrix-org/olm';
 // import { logger } from 'matrix-js-sdk/lib/logger';

 import { secret } from './state/auth';
@@ -11,7 +10,7 @@ import Notifications from './state/Notifications';
 import { cryptoCallbacks } from './state/secretStorageKeys';
 import navigation from './state/navigation';

-global.Olm = Olm;
+global.Olm = require('@matrix-org/olm');

 // logger.disableAll();

@@ -68,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) {
@@ -77,9 +76,6 @@ 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: () => {
@@ -99,32 +95,13 @@ class InitMatrix extends EventEmitter {
  }

  listenEvents() {
-    this.matrixClient.on('Session.logged_out', async () => {
+    this.matrixClient.on('Session.logged_out', () => {
      this.matrixClient.stopClient();
-      await this.matrixClient.clearStores();
+      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();
@@ -5,12 +5,6 @@ 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();
@@ -38,26 +32,22 @@ 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;
  }

-  async _initNoti() {
-    this.initialized = false;
-    this.roomIdToNoti = new Map();
-
+  _initNoti() {
    const addNoti = (roomId) => {
      const room = this.matrixClient.getRoom(roomId);
      if (this.getNotiType(room.roomId) === cons.notifs.MUTE) return;
@@ -69,9 +59,6 @@ class Notifications extends EventEmitter {
    };
    [...this.roomList.rooms].forEach(addNoti);
    [...this.roomList.directs].forEach(addNoti);
-
-    this.initialized = true;
-    this._updateFavicon();
  }

  doesRoomHaveUnread(room) {
@@ -142,30 +129,6 @@ 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;
@@ -183,7 +146,7 @@ class Notifications extends EventEmitter {
    };

    const noti = this.getNoti(roomId);
-    const addT = (highlight > total ? highlight : total) - noti.total;
+    const addT = total - noti.total;
    const addH = highlight - noti.highlight;
    if (addT < 0 || addH < 0) return;

@@ -192,7 +155,6 @@ class Notifications extends EventEmitter {
    allParentSpaces.forEach((spaceId) => {
      addNoti(spaceId, addT, addH, roomId);
    });
-    this._updateFavicon();
  }

  _deleteNoti(roomId, total, highlight) {
@@ -225,7 +187,6 @@ class Notifications extends EventEmitter {
    allParentSpaces.forEach((spaceId) => {
      removeNoti(spaceId, total, highlight, roomId);
    });
-    this._updateFavicon();
  }

  async _displayPopupNoti(mEvent, room) {
@@ -258,51 +219,20 @@ 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: body.plain,
+        body: mEvent.getContent().body,
        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');
@@ -319,8 +249,6 @@ 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;

@@ -391,8 +319,6 @@ class Notifications extends EventEmitter {
        if (readerUserId !== this.matrixClient.getUserId()) return;

        this.deleteNoti(room.roomId);
-
-        this._deletePopupRoomNotis(room.roomId);
      }
    });

@@ -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,19 +268,6 @@ 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) => {
@@ -6,9 +6,11 @@ import { getBlobSafeMimeType } from '../../util/mimetypes';
 import { sanitizeText } from '../../util/sanitize';
 import cons from './cons';
 import settings from './settings';
-import { markdown, plain } from '../../util/markdown';
+import { htmlOutput, parser } 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');
@@ -98,6 +100,91 @@ function getVideoThumbnail(video, width, height, mimeType) {
  });
 }

+function getFormattedBody(markdown) {
+  let content = parser(markdown);
+  if (content.length === 1 && content[0].type === 'paragraph') {
+    content = content[0].content;
+  }
+  return htmlOutput(content);
+}
+
+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();
@@ -187,76 +274,8 @@ class RoomsInput extends EventEmitter {
    return this.roomIdToInput.get(roomId)?.isSending || false;
  }

-  getContent(roomId, options, message, reply, edit) {
-    const msgType = options?.msgType || 'm.text';
-    const autoMarkdown = options?.autoMarkdown ?? true;
-
+  async sendInput(roomId) {
    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);
@@ -266,7 +285,35 @@ class RoomsInput extends EventEmitter {
    }

    if (this.getMessage(roomId).trim() !== '') {
-      const content = this.getContent(roomId, options, input.message, input.replyTo);
+      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);
+      }
      this.matrixClient.sendMessage(roomId, content);
    }

@@ -395,7 +442,7 @@ class RoomsInput extends EventEmitter {
    input.attachment.uploadingPromise = uploadingPromise;
    this.roomIdToInput.set(roomId, input);

-    const { content_uri: url } = await uploadingPromise;
+    const url = await uploadingPromise;

    delete input.attachment.uploadingPromise;
    this.roomIdToInput.set(roomId, input);
@@ -409,13 +456,53 @@ class RoomsInput extends EventEmitter {
  }

  async sendEditedMessage(roomId, mEvent, editedBody) {
-    const content = this.getContent(
-      roomId,
-      { msgType: mEvent.getWireContent().msgtype },
-      editedBody,
-      null,
-      mEvent,
+    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]]}`,
    );
+    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);
  }
 }
@@ -1,5 +1,5 @@
 const cons = {
-  version: '2.2.3',
+  version: '2.1.2',
  secretKey: {
    ACCESS_TOKEN: 'cinny_access_token',
    DEVICE_ID: 'cinny_device_id',
@@ -12,13 +12,7 @@ const cons = {
    HOME: 'home',
    DIRECTS: 'dm',
  },
-  supportEventTypes: [
-    'm.room.create',
-    'm.room.message',
-    'm.room.encrypted',
-    'm.room.member',
-    'm.sticker',
-  ],
+  supportEventTypes: ['m.room.create', 'm.room.message', 'm.room.encrypted', 'm.room.member', 'm.sticker'],
  notifs: {
    DEFAULT: 'default',
    ALL_MESSAGES: 'all_messages',
@@ -375,7 +375,6 @@ class Navigation extends EventEmitter {
          action.userId,
          action.eventId,
          action.body,
-          action.formattedBody,
        );
      },
      [cons.actions.navigation.OPEN_SEARCH]: () => {
@@ -9,4 +9,7 @@ import App from './app/pages/App';

 settings.applyTheme();

-ReactDom.render(<App />, document.getElementById('root'));
+ReactDom.render(
+  <App />,
+  document.getElementById('root'),
+);
@@ -115,16 +115,6 @@ 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);
@@ -204,27 +194,3 @@ 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];
-}
@@ -1,84 +1,25 @@
-/* eslint-disable no-param-reassign */
-/* eslint-disable no-use-before-define */
 import SimpleMarkdown from '@khanacademy/simple-markdown';
-import { idRegex, parseIdUri } from './common';

 const {
-  defaultRules, parserFor, outputFor, anyScopeRegex, blockRegex, inlineRegex,
-  sanitizeText, sanitizeUrl,
+  defaultRules, parserFor, outputFor, anyScopeRegex, blockRegex, inlineRegex, htmlTag, sanitizeText,
 } = SimpleMarkdown;

-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)}"`;
-    }
-  });
-
-  s = `<${tagName}${s}>`;
-
-  if (isClosed === false) {
-    return s;
-  }
-  return `${s}${content}</${tagName}>`;
-}
-
 function mathHtml(wrap, node) {
  return htmlTag(wrap, htmlTag('code', sanitizeText(node.content)), { 'data-mx-maths': node.content });
 }

-const emojiRegex = /^:([\w-]+):/;
-
-const plainRules = {
+const rules = {
+  ...defaultRules,
  Array: {
    ...defaultRules.Array,
-    plain: defaultRules.Array.html,
+    plain: (arr, output, state) => arr.map((node) => output(node, state)).join(''),
  },
-  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),
+  displayMath: {
+    order: defaultRules.list.order + 0.5,
+    match: blockRegex(/^\$\$\n*([\s\S]+?)\n*\$\$/),
+    parse: (capture) => ({ content: capture[1] }),
+    plain: (node) => `$$\n${node.content}\n$$`,
+    html: (node) => mathHtml('div', node),
  },
  newline: {
    ...defaultRules.newline,
@@ -93,186 +34,6 @@ const plainRules = {
    ...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 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;
-
-      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');
-
-      state._list = oldList;
-
-      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));
-
-      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;
-      });
-
-      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]);
-        }
-      }
-
-      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);
-        }
-      });
-
-      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)}_`,
@@ -289,227 +50,40 @@ const markdownRules = {
    ...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,
+    order: defaultRules.em.order - 0.5,
    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 },
-    ),
+    plain: (node) => `[spoiler${node.reason ? `: ${node.reason}` : ''}](mxc://somewhere)`,
+    html: (node, output, state) => `<span data-mx-spoiler${node.reason ? `="${sanitizeText(node.reason)}"` : ''}>${output(node.content, state)}</span>`,
  },
  inlineMath: {
-    order: defaultRules.del.order + 0.2,
+    order: defaultRules.del.order + 0.5,
    match: inlineRegex(/^\$(\S[\s\S]+?\S|\S)\$(?!\d)/),
    parse: (capture) => ({ content: capture[1] }),
    plain: (node) => `$${node.content}$`,
    html: (node) => mathHtml('span', node),
  },
+  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) => node.content,
+  },
 };

-function mapElement(el) {
-  switch (el.tagName) {
-    case 'MX-REPLY':
-      return [];
+const parser = parserFor(rules);

-    case 'P':
-      return [{ type: 'paragraph', content: mapChildren(el) }];
-    case 'BR':
-      return [{ type: 'br' }];
+const plainOutput = outputFor(rules, 'plain');
+const htmlOutput = outputFor(rules, 'html');

-    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 id = parseIdUri(href);
-      if (id) return [{ type: 'mention', content: el.innerText, id }];
-
-      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 plainParser = parserFor(plainRules);
-const plainPlainOut = outputFor(plainRules, 'plain');
-const plainHtmlOut = outputFor(plainRules, 'html');
-
-const mdParser = parserFor(markdownRules);
-const mdPlainOut = outputFor(markdownRules, 'plain');
-const mdHtmlOut = outputFor(markdownRules, 'html');
-
-export function plain(source, state) {
-  return render(plainParser(source, state), state, plainPlainOut, plainHtmlOut);
-}
-
-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);
-}
+export {
+  parser, plainOutput, htmlOutput,
+};
@@ -79,16 +79,6 @@ 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];
@@ -26,14 +26,12 @@ export const ALLOWED_BLOB_MIMETYPES = [
 ];

 export function getBlobSafeMimeType(mimetype) {
-  if (typeof mimetype !== 'string') return 'application/octet-stream';
-  const [type] = mimetype.split(';');
-  if (!ALLOWED_BLOB_MIMETYPES.includes(type)) {
+  if (!ALLOWED_BLOB_MIMETYPES.includes(mimetype)) {
    return 'application/octet-stream';
  }
  // Required for Chromium browsers
-  if (type === 'video/quicktime') {
+  if (mimetype === 'video/quicktime') {
    return 'video/mp4';
  }
-  return type;
+  return mimetype;
 }
@@ -6,8 +6,6 @@ import parse from 'html-react-parser';
 import twemoji from 'twemoji';
 import { sanitizeText } from './sanitize';

-export const TWEMOJI_BASE_URL = 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/';
-
 const Math = lazy(() => import('../app/atoms/math/Math'));

 const mathOptions = {
@@ -40,16 +38,11 @@ const mathOptions = {
 export function twemojify(text, opts, linkify = false, sanitize = true, maths = false) {
  if (typeof text !== 'string') return text;
  let content = text;
-  const options = opts ?? { base: TWEMOJI_BASE_URL };
-  if (!options.base) {
-    options.base = TWEMOJI_BASE_URL;
-  }

  if (sanitize) {
    content = sanitizeText(content);
  }
-
-  content = twemoji.parse(content, options);
+  content = twemoji.parse(content, opts);
  if (linkify) {
    content = linkifyHtml(content, {
      target: '_blank',
@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "sourceMap": true,
-    "jsx": "react",
-    "target": "ES6",
-    "allowJs": true,
-    "esModuleInterop": true,
-    "moduleResolution": "Node",
-    "outDir": "dist",
-    "skipLibCheck": true
-  },
-  "exclude": ["node_modules", "dist"],
-  "include": ["src"]
-}
@@ -1,47 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import { wasm } from '@rollup/plugin-wasm';
-import { viteStaticCopy } from 'vite-plugin-static-copy';
-import { svgLoader } from './viteSvgLoader';
-
-const copyFiles = {
-  targets: [
-    {
-      src: 'node_modules/@matrix-org/olm/olm.wasm',
-      dest: '',
-    },
-    {
-      src: '_redirects',
-      dest: '',
-    },
-    {
-      src: 'config.json',
-      dest: '',
-    },
-    {
-      src: 'public/res/android',
-      dest: 'public/',
-    }
-  ],
-}
-
-export default defineConfig({
-  appType: 'spa',
-  publicDir: false,
-  base: "",
-  server: {
-    port: 8080,
-    host: true,
-  },
-  plugins: [
-    viteStaticCopy(copyFiles),
-    svgLoader(),
-    wasm(),
-    react(),
-  ],
-  build: {
-    outDir: 'dist',
-    sourcemap: true,
-    copyPublicDir: false,
-  },
-});
@@ -1,16 +0,0 @@
-import svgToMiniDataURI from 'mini-svg-data-uri';
-import type { Plugin } from 'rollup';
-import fs from 'fs';
-
-// TODO: remove this once https://github.com/vitejs/vite/pull/2909 gets merged
-export const svgLoader = (): Plugin => ({
-  name: 'vite-svg-patch-plugin',
-  transform: (code, id) => {
-    if (id.endsWith('.svg')) {
-      const extractedSvg = fs.readFileSync(id, 'utf8');
-      const datauri = svgToMiniDataURI.toSrcset(extractedSvg);
-      return `export default "${datauri}"`;
-    }
-    return code;
-  },
-});
@@ -0,0 +1,82 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
+const CopyPlugin = require("copy-webpack-plugin");
+const webpack = require('webpack');
+
+module.exports = {
+  entry: {
+    polyfill: 'babel-polyfill',
+    main: './src/index.jsx'
+  },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+    fallback: {
+      'crypto': require.resolve('crypto-browserify'),
+      'path': require.resolve('path-browserify'),
+      'fs': require.resolve('browserify-fs'),
+      'stream': require.resolve('stream-browserify'),
+      'util': require.resolve('util/'),
+      'assert': require.resolve('assert/'),
+      'url': require.resolve('url/'),
+      'buffer': require.resolve('buffer'),
+    }
+  },
+  node: {
+    global: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react'],
+          },
+        },
+      },
+      {
+        test: /\.html$/,
+        use: ['html-loader'],
+      },
+      {
+        test: /\.(png|jpe?g|gif|otf|ttf|woff|woff2|ogg)$/,
+        type: 'asset/resource',
+      },
+      {
+        test: /\.svg$/,
+        type: 'asset/inline',
+      }
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({ template: './public/index.html' }),
+    new FaviconsWebpackPlugin({
+      logo: './public/res/svg/cinny.svg',
+      mode: 'webapp',
+      devMode: 'light',
+      favicons: {
+        appName: 'Cinny',
+        appDescription: 'Yet another matrix client',
+        developerName: 'Ajay Bura',
+        developerURL: 'https://github.com/ajbura',
+        icons: {
+          coast: false,
+          yandex: false,
+          appleStartup: false,
+        }
+      }
+    }),
+    new CopyPlugin({
+      patterns: [
+        { from: 'olm.wasm' },
+        { from: '_redirects' },
+        { from: 'config.json' },
+      ],
+    }),
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+    }),
+  ],
+};
Author	SHA1	Message	Date
Krishan	92727b60f4	Add desktop app link	2022-08-22 08:10:14 +05:30
Krishan	e23ae8fec1	update intro	2022-08-21 21:53:36 +05:30
Krishan	93117be8cf	Merge branch 'dev' into doc-update	2022-08-21 21:43:36 +05:30
Krishan	947c46ad83	Simplyfy readme and add various helpful links	2022-08-21 21:26:18 +05:30