Updated matrix-js-sdk to v12.4.1 (Security fix)

refectored Drawer component and added Postie
created Postie
2021-09-13 17:32:32 +05:30 · 2021-08-30 21:12:24 +05:30 · 2021-08-30 21:03:59 +05:30 · 2021-08-30 11:17:08 +05:30 · 2021-08-30 08:31:13 +05:30 · 2021-08-29 13:57:55 +05:30
62 changed files with 2708 additions and 1021 deletions
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,12 +1,12 @@
 <!-- Please read https://github.com/ajbura/cinny/CONTRIBUTING.md before submitting your pull request -->

-# Description
+### Description

 Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

 Fixes # (issue)

-## Type of change
+#### Type of change

 Please delete options that are not relevant.

@@ -15,10 +15,10 @@ Please delete options that are not relevant.
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
 - [ ] This change requires a documentation update

-# Checklist:
+### Checklist:

 - [ ] My code follows the style guidelines of this project
 - [ ] I have performed a self-review of my own code
 - [ ] I have commented my code, particularly in hard-to-understand areas
 - [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
+- [ ] My changes generate no new warnings
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -10,7 +10,7 @@ All types of contributions are encouraged and valued. See the [Table of Contents
 > - Tweet about it (tag @cinnyapp)
 > - Refer this project in your project's readme
 > - Mention the project at local meetups and tell your friends/colleagues
-> - [Donate to us](https://liberapay.com/kfiven/donate)
+> - [Donate to us](https://liberapay.com/ajbura/donate)

 <!-- omit in toc -->
 ## Table of Contents
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
  "name": "cinny",
-  "version": "1.0.0",
+  "version": "1.2.1",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -1596,6 +1596,14 @@
      "integrity": "sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==",
      "dev": true
    },
+    "@types/debug": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz",
+      "integrity": "sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==",
+      "requires": {
+        "@types/ms": "*"
+      }
+    },
    "@types/eslint": {
      "version": "7.2.7",
      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.7.tgz",
@@ -1681,6 +1689,11 @@
      "integrity": "sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA==",
      "dev": true
    },
+    "@types/ms": {
+      "version": "0.7.31",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz",
+      "integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA=="
+    },
    "@types/node": {
      "version": "14.14.37",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.37.tgz",
@@ -2134,12 +2147,6 @@
      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=",
      "dev": true
    },
-    "array-filter": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-1.0.0.tgz",
-      "integrity": "sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=",
-      "dev": true
-    },
    "array-flatten": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
@@ -2242,6 +2249,18 @@
        }
      }
    },
+    "assert": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/assert/-/assert-2.0.0.tgz",
+      "integrity": "sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==",
+      "dev": true,
+      "requires": {
+        "es6-object-assign": "^1.1.0",
+        "is-nan": "^1.2.1",
+        "object-is": "^1.0.1",
+        "util": "^0.12.0"
+      }
+    },
    "assert-plus": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
@@ -2309,13 +2328,10 @@
      "integrity": "sha512-jnSyH2d+qdfPGpWlcuhGiHmqBJ6g3X+8T+iRwFrHPLVcdoGJE/x6Qicm6aDHfTsbgZKxyV8UU/YB2p4cjKDRRA=="
    },
    "available-typed-arrays": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz",
-      "integrity": "sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==",
-      "dev": true,
-      "requires": {
-        "array-filter": "^1.0.0"
-      }
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.4.tgz",
+      "integrity": "sha512-SA5mXJWrId1TaQjfxUYghbqQ/hYioKmLJvPJyDuYRtXXenFNMjj4hSSt1Cf1xsuXSXrtxrVC5Ot4eU6cOtBDdA==",
+      "dev": true
    },
    "aws-sign2": {
      "version": "0.7.0",
@@ -3359,24 +3375,6 @@
      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
      "dev": true
    },
-    "commonmark": {
-      "version": "0.30.0",
-      "resolved": "https://registry.npmjs.org/commonmark/-/commonmark-0.30.0.tgz",
-      "integrity": "sha512-j1yoUo4gxPND1JWV9xj5ELih0yMv1iCWDG6eEQIPLSWLxzCXiFoyS7kvB+WwU+tZMf4snwJMMtaubV0laFpiBA==",
-      "requires": {
-        "entities": "~2.0",
-        "mdurl": "~1.0.1",
-        "minimist": ">=1.2.2",
-        "string.prototype.repeat": "^0.2.0"
-      },
-      "dependencies": {
-        "entities": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
-          "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ=="
-        }
-      }
-    },
    "component-emitter": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
@@ -4705,6 +4703,12 @@
        "is-symbol": "^1.0.2"
      }
    },
+    "es6-object-assign": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+      "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw=",
+      "dev": true
+    },
    "es6-promise": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
@@ -5972,11 +5976,6 @@
      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
      "dev": true
    },
-    "fuse.js": {
-      "version": "6.4.6",
-      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.4.6.tgz",
-      "integrity": "sha512-/gYxR/0VpXmWSfZOIPS3rWwU8SHgsRTwWuXhyb2O6s7aRuVtHtxCkR33bNYu3wyLyNx/Wpv0vU7FZy8Vj53VNw=="
-    },
    "fwd-stream": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/fwd-stream/-/fwd-stream-1.0.4.tgz",
@@ -6245,6 +6244,15 @@
      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
    },
+    "has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
    "has-unicode": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
@@ -7049,10 +7057,13 @@
      "dev": true
    },
    "is-generator-function": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.8.tgz",
-      "integrity": "sha512-2Omr/twNtufVZFr1GhxjOMFPAj2sjc/dKaIqBhvo4qciXfJmITGH6ZGd8eZYNHza8t1y0e01AuqRhJwfWp26WQ==",
-      "dev": true
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
+      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
    },
    "is-glob": {
      "version": "4.0.1",
@@ -7068,6 +7079,16 @@
      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw=="
    },
+    "is-nan": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
+      "integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3"
+      }
+    },
    "is-negative-zero": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz",
@@ -7197,16 +7218,68 @@
      }
    },
    "is-typed-array": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.5.tgz",
-      "integrity": "sha512-S+GRDgJlR3PyEbsX/Fobd9cqpZBuvUS+8asRqYDMLCb2qMzt1oz5m5oxQCxOgUDxiWsOVNi4yaF+/uvdlHlYug==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.7.tgz",
+      "integrity": "sha512-VxlpTBGknhQ3o7YiVjIhdLU6+oD8dPz/79vvvH4F+S/c8608UCVa9fgDpa1kZgFoUST2DCgacc70UszKgzKuvA==",
      "dev": true,
      "requires": {
-        "available-typed-arrays": "^1.0.2",
+        "available-typed-arrays": "^1.0.4",
        "call-bind": "^1.0.2",
-        "es-abstract": "^1.18.0-next.2",
+        "es-abstract": "^1.18.5",
        "foreach": "^2.0.5",
-        "has-symbols": "^1.0.1"
+        "has-tostringtag": "^1.0.0"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.18.5",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.5.tgz",
+          "integrity": "sha512-DDggyJLoS91CkJjgauM5c0yZMjiD1uK3KcaCeAmffGwZ+ODWzOkPN4QwRbsK5DOFf06fywmyLci3ZD8jLGhVYA==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "get-intrinsic": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.2",
+            "internal-slot": "^1.0.3",
+            "is-callable": "^1.2.3",
+            "is-negative-zero": "^2.0.1",
+            "is-regex": "^1.1.3",
+            "is-string": "^1.0.6",
+            "object-inspect": "^1.11.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.2",
+            "string.prototype.trimend": "^1.0.4",
+            "string.prototype.trimstart": "^1.0.4",
+            "unbox-primitive": "^1.0.1"
+          }
+        },
+        "is-regex": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+          "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "has-tostringtag": "^1.0.0"
+          }
+        },
+        "is-string": {
+          "version": "1.0.7",
+          "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+          "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+          "dev": true,
+          "requires": {
+            "has-tostringtag": "^1.0.0"
+          }
+        },
+        "object-inspect": {
+          "version": "1.11.0",
+          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz",
+          "integrity": "sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==",
+          "dev": true
+        }
      }
    },
    "is-typedarray": {
@@ -7878,9 +7951,9 @@
      }
    },
    "matrix-js-sdk": {
-      "version": "12.2.0",
-      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-12.2.0.tgz",
-      "integrity": "sha512-foSs3uKRc6uvFNhgY35eErBvLWVDd5RNIxxsdFKlmU3B+70YUf3BP3petyBNW34ORyOqNdX36IiApfLo3npNEw==",
+      "version": "12.4.1",
+      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-12.4.1.tgz",
+      "integrity": "sha512-C9aSGX9e4GoCm0Rli+iGBXmcnRxnwETw7MvgNcSBfPaLHOMZi/wz4YOV7HEZK8R+OXuDrDYyglncWSJkkoDpAQ==",
      "requires": {
        "@babel/runtime": "^7.12.5",
        "another-json": "^0.2.0",
@@ -7956,6 +8029,17 @@
        "micromark": "~2.11.0",
        "parse-entities": "^2.0.0",
        "unist-util-stringify-position": "^2.0.0"
+      },
+      "dependencies": {
+        "micromark": {
+          "version": "2.11.4",
+          "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz",
+          "integrity": "sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==",
+          "requires": {
+            "debug": "^4.0.0",
+            "parse-entities": "^2.0.0"
+          }
+        }
      }
    },
    "mdast-util-gfm": {
@@ -7978,6 +8062,17 @@
        "ccount": "^1.0.0",
        "mdast-util-find-and-replace": "^1.1.0",
        "micromark": "^2.11.3"
+      },
+      "dependencies": {
+        "micromark": {
+          "version": "2.11.4",
+          "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz",
+          "integrity": "sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==",
+          "requires": {
+            "debug": "^4.0.0",
+            "parse-entities": "^2.0.0"
+          }
+        }
      }
    },
    "mdast-util-gfm-strikethrough": {
@@ -8090,64 +8185,376 @@
      "dev": true
    },
    "micromark": {
-      "version": "2.11.4",
-      "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz",
-      "integrity": "sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-3.0.3.tgz",
+      "integrity": "sha512-fWuHx+JKV4zA8WfCFor2DWP9XmsZkIiyWRGofr7P7IGfpRIlb7/C5wwusGsNyr1D8HI5arghZDG1Ikc0FBwS5Q==",
      "requires": {
+        "@types/debug": "^4.0.0",
        "debug": "^4.0.0",
-        "parse-entities": "^2.0.0"
+        "micromark-core-commonmark": "^1.0.0",
+        "micromark-factory-space": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-chunked": "^1.0.0",
+        "micromark-util-combine-extensions": "^1.0.0",
+        "micromark-util-decode-numeric-character-reference": "^1.0.0",
+        "micromark-util-encode": "^1.0.0",
+        "micromark-util-normalize-identifier": "^1.0.0",
+        "micromark-util-resolve-all": "^1.0.0",
+        "micromark-util-sanitize-uri": "^1.0.0",
+        "micromark-util-subtokenize": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0",
+        "parse-entities": "^3.0.0"
+      },
+      "dependencies": {
+        "character-entities": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.0.tgz",
+          "integrity": "sha512-oHqMj3eAuJ77/P5PaIRcqk+C3hdfNwyCD2DAUcD5gyXkegAuF2USC40CEqPscDk4I8FRGMTojGJQkXDsN5QlJA=="
+        },
+        "character-entities-legacy": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-2.0.0.tgz",
+          "integrity": "sha512-YwaEtEvWLpFa6Wh3uVLrvirA/ahr9fki/NUd/Bd4OR6EdJ8D22hovYQEOUCBfQfcqnC4IAMGMsHXY1eXgL4ZZA=="
+        },
+        "character-reference-invalid": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.0.tgz",
+          "integrity": "sha512-pE3Z15lLRxDzWJy7bBHBopRwfI20sbrMVLQTC7xsPglCHf4Wv1e167OgYAFP78co2XlhojDyAqA+IAJse27//g=="
+        },
+        "is-alphabetical": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.0.tgz",
+          "integrity": "sha512-5OV8Toyq3oh4eq6sbWTYzlGdnMT/DPI5I0zxUBxjiigQsZycpkKF3kskkao3JyYGuYDHvhgJF+DrjMQp9SX86w=="
+        },
+        "is-alphanumerical": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.0.tgz",
+          "integrity": "sha512-t+2GlJ+hO9yagJ+jU3+HSh80VKvz/3cG2cxbGGm4S0hjKuhWQXgPVUVOZz3tqZzMjhmphZ+1TIJTlRZRoe6GCQ==",
+          "requires": {
+            "is-alphabetical": "^2.0.0",
+            "is-decimal": "^2.0.0"
+          }
+        },
+        "is-decimal": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.0.tgz",
+          "integrity": "sha512-QfrfjQV0LjoWQ1K1XSoEZkTAzSa14RKVMa5zg3SdAfzEmQzRM4+tbSFWb78creCeA9rNBzaZal92opi1TwPWZw=="
+        },
+        "is-hexadecimal": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.0.tgz",
+          "integrity": "sha512-vGOtYkiaxwIiR0+Ng/zNId+ZZehGfINwTzdrDqc6iubbnQWhnPuYymOzOKUDqa2cSl59yHnEh2h6MvRLQsyNug=="
+        },
+        "parse-entities": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-3.0.0.tgz",
+          "integrity": "sha512-AJlcIFDNPEP33KyJLguv0xJc83BNvjxwpuUIcetyXUsLpVXAUCePJ5kIoYtEN2R1ac0cYaRu/vk9dVFkewHQhQ==",
+          "requires": {
+            "character-entities": "^2.0.0",
+            "character-entities-legacy": "^2.0.0",
+            "character-reference-invalid": "^2.0.0",
+            "is-alphanumerical": "^2.0.0",
+            "is-decimal": "^2.0.0",
+            "is-hexadecimal": "^2.0.0"
+          }
+        }
+      }
+    },
+    "micromark-core-commonmark": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-1.0.0.tgz",
+      "integrity": "sha512-y9g7zymcKRBHM/aNBekstvs/Grpf+y4OEBULUTYvGZcusnp+JeOxmilJY4GMpo2/xY7iHQL9fjz5pD9pSAud9A==",
+      "requires": {
+        "micromark-factory-destination": "^1.0.0",
+        "micromark-factory-label": "^1.0.0",
+        "micromark-factory-space": "^1.0.0",
+        "micromark-factory-title": "^1.0.0",
+        "micromark-factory-whitespace": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-chunked": "^1.0.0",
+        "micromark-util-classify-character": "^1.0.0",
+        "micromark-util-html-tag-name": "^1.0.0",
+        "micromark-util-normalize-identifier": "^1.0.0",
+        "micromark-util-resolve-all": "^1.0.0",
+        "micromark-util-subtokenize": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0",
+        "parse-entities": "^3.0.0"
+      },
+      "dependencies": {
+        "character-entities": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.0.tgz",
+          "integrity": "sha512-oHqMj3eAuJ77/P5PaIRcqk+C3hdfNwyCD2DAUcD5gyXkegAuF2USC40CEqPscDk4I8FRGMTojGJQkXDsN5QlJA=="
+        },
+        "character-entities-legacy": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-2.0.0.tgz",
+          "integrity": "sha512-YwaEtEvWLpFa6Wh3uVLrvirA/ahr9fki/NUd/Bd4OR6EdJ8D22hovYQEOUCBfQfcqnC4IAMGMsHXY1eXgL4ZZA=="
+        },
+        "character-reference-invalid": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.0.tgz",
+          "integrity": "sha512-pE3Z15lLRxDzWJy7bBHBopRwfI20sbrMVLQTC7xsPglCHf4Wv1e167OgYAFP78co2XlhojDyAqA+IAJse27//g=="
+        },
+        "is-alphabetical": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.0.tgz",
+          "integrity": "sha512-5OV8Toyq3oh4eq6sbWTYzlGdnMT/DPI5I0zxUBxjiigQsZycpkKF3kskkao3JyYGuYDHvhgJF+DrjMQp9SX86w=="
+        },
+        "is-alphanumerical": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.0.tgz",
+          "integrity": "sha512-t+2GlJ+hO9yagJ+jU3+HSh80VKvz/3cG2cxbGGm4S0hjKuhWQXgPVUVOZz3tqZzMjhmphZ+1TIJTlRZRoe6GCQ==",
+          "requires": {
+            "is-alphabetical": "^2.0.0",
+            "is-decimal": "^2.0.0"
+          }
+        },
+        "is-decimal": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.0.tgz",
+          "integrity": "sha512-QfrfjQV0LjoWQ1K1XSoEZkTAzSa14RKVMa5zg3SdAfzEmQzRM4+tbSFWb78creCeA9rNBzaZal92opi1TwPWZw=="
+        },
+        "is-hexadecimal": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.0.tgz",
+          "integrity": "sha512-vGOtYkiaxwIiR0+Ng/zNId+ZZehGfINwTzdrDqc6iubbnQWhnPuYymOzOKUDqa2cSl59yHnEh2h6MvRLQsyNug=="
+        },
+        "parse-entities": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-3.0.0.tgz",
+          "integrity": "sha512-AJlcIFDNPEP33KyJLguv0xJc83BNvjxwpuUIcetyXUsLpVXAUCePJ5kIoYtEN2R1ac0cYaRu/vk9dVFkewHQhQ==",
+          "requires": {
+            "character-entities": "^2.0.0",
+            "character-entities-legacy": "^2.0.0",
+            "character-reference-invalid": "^2.0.0",
+            "is-alphanumerical": "^2.0.0",
+            "is-decimal": "^2.0.0",
+            "is-hexadecimal": "^2.0.0"
+          }
+        }
      }
    },
    "micromark-extension-gfm": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-0.3.3.tgz",
-      "integrity": "sha512-oVN4zv5/tAIA+l3GbMi7lWeYpJ14oQyJ3uEim20ktYFAcfX1x3LNlFGGlmrZHt7u9YlKExmyJdDGaTt6cMSR/A==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-1.0.0.tgz",
+      "integrity": "sha512-OjqbQPL1Vec/4l5hnC8WnMNmWwgrT9JvzR2udqIGrGKecZsdwY9GAWZ5482CuD12SXuHNj8aS8epni6ip0Pwog==",
      "requires": {
-        "micromark": "~2.11.0",
-        "micromark-extension-gfm-autolink-literal": "~0.5.0",
-        "micromark-extension-gfm-strikethrough": "~0.6.5",
-        "micromark-extension-gfm-table": "~0.4.0",
-        "micromark-extension-gfm-tagfilter": "~0.3.0",
-        "micromark-extension-gfm-task-list-item": "~0.3.0"
+        "micromark-extension-gfm-autolink-literal": "^1.0.0",
+        "micromark-extension-gfm-strikethrough": "^1.0.0",
+        "micromark-extension-gfm-table": "^1.0.0",
+        "micromark-extension-gfm-tagfilter": "^1.0.0",
+        "micromark-extension-gfm-task-list-item": "^1.0.0",
+        "micromark-util-combine-extensions": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
      }
    },
    "micromark-extension-gfm-autolink-literal": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-0.5.7.tgz",
-      "integrity": "sha512-ePiDGH0/lhcngCe8FtH4ARFoxKTUelMp4L7Gg2pujYD5CSMb9PbblnyL+AAMud/SNMyusbS2XDSiPIRcQoNFAw==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-1.0.0.tgz",
+      "integrity": "sha512-t+K0aPK32mXypVTEKV+WRfoT/Rb7MERDgHZVRr56NXpyQQhgMk72QnK4NljYUlrgbuesH+MxiPQwThzqRDIwvA==",
      "requires": {
-        "micromark": "~2.11.3"
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-sanitize-uri": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
      }
    },
    "micromark-extension-gfm-strikethrough": {
-      "version": "0.6.5",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-0.6.5.tgz",
-      "integrity": "sha512-PpOKlgokpQRwUesRwWEp+fHjGGkZEejj83k9gU5iXCbDG+XBA92BqnRKYJdfqfkrRcZRgGuPuXb7DaK/DmxOhw==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-1.0.0.tgz",
+      "integrity": "sha512-5PhVJVK8zRsrc+A715NBPMY5iOQwtkMfL/8XURAPeU5fPC0S5dm4qjpoA6fGy4B9MHm+6WNs3xZDxF1ZGTtGDw==",
      "requires": {
-        "micromark": "~2.11.0"
+        "micromark-util-chunked": "^1.0.0",
+        "micromark-util-classify-character": "^1.0.0",
+        "micromark-util-resolve-all": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
      }
    },
    "micromark-extension-gfm-table": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-0.4.3.tgz",
-      "integrity": "sha512-hVGvESPq0fk6ALWtomcwmgLvH8ZSVpcPjzi0AjPclB9FsVRgMtGZkUcpE0zgjOCFAznKepF4z3hX8z6e3HODdA==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-1.0.0.tgz",
+      "integrity": "sha512-OATRuHDgEAT/aaJJRSdU12V+s01kNSnJ0jumdfLq5mPy0F5DkR3zbTSFLH4tjVYM0/kEG6umxIhHY62mFe4z5Q==",
      "requires": {
-        "micromark": "~2.11.0"
+        "micromark-factory-space": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
      }
    },
    "micromark-extension-gfm-tagfilter": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-0.3.0.tgz",
-      "integrity": "sha512-9GU0xBatryXifL//FJH+tAZ6i240xQuFrSL7mYi8f4oZSbc+NvXjkrHemeYP0+L4ZUT+Ptz3b95zhUZnMtoi/Q=="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-1.0.0.tgz",
+      "integrity": "sha512-GGUZhzQrOdHR8RHU2ru6K+4LMlj+pBdNuXRtw5prOflDOk2hHqDB0xEgej1AHJ2VETeycX7tzQh2EmaTUOmSKg==",
+      "requires": {
+        "micromark-util-types": "^1.0.0"
+      }
    },
    "micromark-extension-gfm-task-list-item": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-0.3.3.tgz",
-      "integrity": "sha512-0zvM5iSLKrc/NQl84pZSjGo66aTGd57C1idmlWmE87lkMcXrTxg1uXa/nXomxJytoje9trP0NDLvw4bZ/Z/XCQ==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-1.0.0.tgz",
+      "integrity": "sha512-3tkHCq1NNwijtwpjYba9+rl1yvQ4xYg8iQpUAfTJRyq8MtIEsBUF/vW6B9Gh8Qwy1hE2FmpyHhP4jnFAt61zLg==",
      "requires": {
-        "micromark": "~2.11.0"
+        "micromark-factory-space": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
      }
    },
+    "micromark-factory-destination": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-1.0.0.tgz",
+      "integrity": "sha512-eUBA7Rs1/xtTVun9TmV3gjfPz2wEwgK5R5xcbIM5ZYAtvGF6JkyaDsj0agx8urXnO31tEO6Ug83iVH3tdedLnw==",
+      "requires": {
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "micromark-factory-label": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-1.0.0.tgz",
+      "integrity": "sha512-XWEucVZb+qBCe2jmlOnWr6sWSY6NHx+wtpgYFsm4G+dufOf6tTQRRo0bdO7XSlGPu5fyjpJenth6Ksnc5Mwfww==",
+      "requires": {
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "micromark-factory-space": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-1.0.0.tgz",
+      "integrity": "sha512-qUmqs4kj9a5yBnk3JMLyjtWYN6Mzfcx8uJfi5XAveBniDevmZasdGBba5b4QsvRcAkmvGo5ACmSUmyGiKTLZew==",
+      "requires": {
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "micromark-factory-title": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-1.0.0.tgz",
+      "integrity": "sha512-flvC7Gx0dWVWorXuBl09Cr3wB5FTuYec8pMGVySIp2ZlqTcIjN/lFohZcP0EG//krTptm34kozHk7aK/CleCfA==",
+      "requires": {
+        "micromark-factory-space": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "micromark-factory-whitespace": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-1.0.0.tgz",
+      "integrity": "sha512-Qx7uEyahU1lt1RnsECBiuEbfr9INjQTGa6Err+gF3g0Tx4YEviPbqqGKNv/NrBaE7dVHdn1bVZKM/n5I/Bak7A==",
+      "requires": {
+        "micromark-factory-space": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "micromark-util-character": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-1.1.0.tgz",
+      "integrity": "sha512-agJ5B3unGNJ9rJvADMJ5ZiYjBRyDpzKAOk01Kpi1TKhlT1APx3XZk6eN7RtSz1erbWHC2L8T3xLZ81wdtGRZzg==",
+      "requires": {
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "micromark-util-chunked": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-1.0.0.tgz",
+      "integrity": "sha512-5e8xTis5tEZKgesfbQMKRCyzvffRRUX+lK/y+DvsMFdabAicPkkZV6gO+FEWi9RfuKKoxxPwNL+dFF0SMImc1g==",
+      "requires": {
+        "micromark-util-symbol": "^1.0.0"
+      }
+    },
+    "micromark-util-classify-character": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-1.0.0.tgz",
+      "integrity": "sha512-F8oW2KKrQRb3vS5ud5HIqBVkCqQi224Nm55o5wYLzY/9PwHGXC01tr3d7+TqHHz6zrKQ72Okwtvm/xQm6OVNZA==",
+      "requires": {
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "micromark-util-combine-extensions": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-1.0.0.tgz",
+      "integrity": "sha512-J8H058vFBdo/6+AsjHp2NF7AJ02SZtWaVUjsayNFeAiydTxUwViQPxN0Hf8dp4FmCQi0UUFovFsEyRSUmFH3MA==",
+      "requires": {
+        "micromark-util-chunked": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "micromark-util-decode-numeric-character-reference": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-1.0.0.tgz",
+      "integrity": "sha512-OzO9AI5VUtrTD7KSdagf4MWgHMtET17Ua1fIpXTpuhclCqD8egFWo85GxSGvxgkGS74bEahvtM0WP0HjvV0e4w==",
+      "requires": {
+        "micromark-util-symbol": "^1.0.0"
+      }
+    },
+    "micromark-util-encode": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-1.0.0.tgz",
+      "integrity": "sha512-cJpFVM768h6zkd8qJ1LNRrITfY4gwFt+tziPcIf71Ui8yFzY9wG3snZQqiWVq93PG4Sw6YOtcNiKJfVIs9qfGg=="
+    },
+    "micromark-util-html-tag-name": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.0.0.tgz",
+      "integrity": "sha512-NenEKIshW2ZI/ERv9HtFNsrn3llSPZtY337LID/24WeLqMzeZhBEE6BQ0vS2ZBjshm5n40chKtJ3qjAbVV8S0g=="
+    },
+    "micromark-util-normalize-identifier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-1.0.0.tgz",
+      "integrity": "sha512-yg+zrL14bBTFrQ7n35CmByWUTFsgst5JhA4gJYoty4Dqzj4Z4Fr/DHekSS5aLfH9bdlfnSvKAWsAgJhIbogyBg==",
+      "requires": {
+        "micromark-util-symbol": "^1.0.0"
+      }
+    },
+    "micromark-util-resolve-all": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-1.0.0.tgz",
+      "integrity": "sha512-CB/AGk98u50k42kvgaMM94wzBqozSzDDaonKU7P7jwQIuH2RU0TeBqGYJz2WY1UdihhjweivStrJ2JdkdEmcfw==",
+      "requires": {
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "micromark-util-sanitize-uri": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.0.0.tgz",
+      "integrity": "sha512-cCxvBKlmac4rxCGx6ejlIviRaMKZc0fWm5HdCHEeDWRSkn44l6NdYVRyU+0nT1XC72EQJMZV8IPHF+jTr56lAg==",
+      "requires": {
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-encode": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0"
+      }
+    },
+    "micromark-util-subtokenize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-1.0.0.tgz",
+      "integrity": "sha512-EsnG2qscmcN5XhkqQBZni/4oQbLFjz9yk3ZM/P8a3YUjwV6+6On2wehr1ALx0MxK3+XXXLTzuBKHDFeDFYRdgQ==",
+      "requires": {
+        "micromark-util-chunked": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "micromark-util-symbol": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-1.0.0.tgz",
+      "integrity": "sha512-NZA01jHRNCt4KlOROn8/bGi6vvpEmlXld7EHcRH+aYWUfL3Wc8JLUNNlqUMKa0hhz6GrpUWsHtzPmKof57v0gQ=="
+    },
+    "micromark-util-types": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-1.0.0.tgz",
+      "integrity": "sha512-psf1WAaP1B77WpW4mBGDkTr+3RsPuDAgsvlP47GJzbH1jmjH8xjOx7Z6kp84L8oqHmy5pYO3Ev46odosZV+3AA=="
+    },
    "micromatch": {
      "version": "3.1.10",
      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
@@ -8294,7 +8701,8 @@
    "minimist": {
      "version": "1.2.5",
      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "dev": true
    },
    "minipass": {
      "version": "3.1.3",
@@ -11129,6 +11537,67 @@
      "requires": {
        "mdast-util-gfm": "^0.1.0",
        "micromark-extension-gfm": "^0.3.0"
+      },
+      "dependencies": {
+        "micromark": {
+          "version": "2.11.4",
+          "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz",
+          "integrity": "sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==",
+          "requires": {
+            "debug": "^4.0.0",
+            "parse-entities": "^2.0.0"
+          }
+        },
+        "micromark-extension-gfm": {
+          "version": "0.3.3",
+          "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-0.3.3.tgz",
+          "integrity": "sha512-oVN4zv5/tAIA+l3GbMi7lWeYpJ14oQyJ3uEim20ktYFAcfX1x3LNlFGGlmrZHt7u9YlKExmyJdDGaTt6cMSR/A==",
+          "requires": {
+            "micromark": "~2.11.0",
+            "micromark-extension-gfm-autolink-literal": "~0.5.0",
+            "micromark-extension-gfm-strikethrough": "~0.6.5",
+            "micromark-extension-gfm-table": "~0.4.0",
+            "micromark-extension-gfm-tagfilter": "~0.3.0",
+            "micromark-extension-gfm-task-list-item": "~0.3.0"
+          }
+        },
+        "micromark-extension-gfm-autolink-literal": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-0.5.7.tgz",
+          "integrity": "sha512-ePiDGH0/lhcngCe8FtH4ARFoxKTUelMp4L7Gg2pujYD5CSMb9PbblnyL+AAMud/SNMyusbS2XDSiPIRcQoNFAw==",
+          "requires": {
+            "micromark": "~2.11.3"
+          }
+        },
+        "micromark-extension-gfm-strikethrough": {
+          "version": "0.6.5",
+          "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-0.6.5.tgz",
+          "integrity": "sha512-PpOKlgokpQRwUesRwWEp+fHjGGkZEejj83k9gU5iXCbDG+XBA92BqnRKYJdfqfkrRcZRgGuPuXb7DaK/DmxOhw==",
+          "requires": {
+            "micromark": "~2.11.0"
+          }
+        },
+        "micromark-extension-gfm-table": {
+          "version": "0.4.3",
+          "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-0.4.3.tgz",
+          "integrity": "sha512-hVGvESPq0fk6ALWtomcwmgLvH8ZSVpcPjzi0AjPclB9FsVRgMtGZkUcpE0zgjOCFAznKepF4z3hX8z6e3HODdA==",
+          "requires": {
+            "micromark": "~2.11.0"
+          }
+        },
+        "micromark-extension-gfm-tagfilter": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-0.3.0.tgz",
+          "integrity": "sha512-9GU0xBatryXifL//FJH+tAZ6i240xQuFrSL7mYi8f4oZSbc+NvXjkrHemeYP0+L4ZUT+Ptz3b95zhUZnMtoi/Q=="
+        },
+        "micromark-extension-gfm-task-list-item": {
+          "version": "0.3.3",
+          "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-0.3.3.tgz",
+          "integrity": "sha512-0zvM5iSLKrc/NQl84pZSjGo66aTGd57C1idmlWmE87lkMcXrTxg1uXa/nXomxJytoje9trP0NDLvw4bZ/Z/XCQ==",
+          "requires": {
+            "micromark": "~2.11.0"
+          }
+        }
      }
    },
    "remark-parse": {
@@ -12307,11 +12776,6 @@
        "side-channel": "^1.0.4"
      }
    },
-    "string.prototype.repeat": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-0.2.0.tgz",
-      "integrity": "sha1-q6Nt4I3O5qWjN9SbLqHaGyj8Ds8="
-    },
    "string.prototype.trimend": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
@@ -13261,9 +13725,9 @@
      }
    },
    "util": {
-      "version": "0.12.3",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.12.3.tgz",
-      "integrity": "sha512-I8XkoQwE+fPQEhy9v012V+TSdH2kp9ts29i20TaaDUXsg7x/onePbhFJUExBfv/2ay1ZOp/Vsm3nDlmnFGSAog==",
+      "version": "0.12.4",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.4.tgz",
+      "integrity": "sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==",
      "dev": true,
      "requires": {
        "inherits": "^2.0.3",
@@ -13746,18 +14210,69 @@
      "dev": true
    },
    "which-typed-array": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.4.tgz",
-      "integrity": "sha512-49E0SpUe90cjpoc7BOJwyPHRqSAd12c10Qm2amdEZrJPCY2NDxaW01zHITrem+rnETY3dwrbH3UUrUwagfCYDA==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.6.tgz",
+      "integrity": "sha512-DdY984dGD5sQ7Tf+x1CkXzdg85b9uEel6nr4UkFg1LoE9OXv3uRuZhe5CoWdawhGACeFpEZXH8fFLQnDhbpm/Q==",
      "dev": true,
      "requires": {
-        "available-typed-arrays": "^1.0.2",
-        "call-bind": "^1.0.0",
-        "es-abstract": "^1.18.0-next.1",
+        "available-typed-arrays": "^1.0.4",
+        "call-bind": "^1.0.2",
+        "es-abstract": "^1.18.5",
        "foreach": "^2.0.5",
-        "function-bind": "^1.1.1",
-        "has-symbols": "^1.0.1",
-        "is-typed-array": "^1.1.3"
+        "has-tostringtag": "^1.0.0",
+        "is-typed-array": "^1.1.6"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.18.5",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.5.tgz",
+          "integrity": "sha512-DDggyJLoS91CkJjgauM5c0yZMjiD1uK3KcaCeAmffGwZ+ODWzOkPN4QwRbsK5DOFf06fywmyLci3ZD8jLGhVYA==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "get-intrinsic": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.2",
+            "internal-slot": "^1.0.3",
+            "is-callable": "^1.2.3",
+            "is-negative-zero": "^2.0.1",
+            "is-regex": "^1.1.3",
+            "is-string": "^1.0.6",
+            "object-inspect": "^1.11.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.2",
+            "string.prototype.trimend": "^1.0.4",
+            "string.prototype.trimstart": "^1.0.4",
+            "unbox-primitive": "^1.0.1"
+          }
+        },
+        "is-regex": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+          "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "has-tostringtag": "^1.0.0"
+          }
+        },
+        "is-string": {
+          "version": "1.0.7",
+          "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+          "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+          "dev": true,
+          "requires": {
+            "has-tostringtag": "^1.0.0"
+          }
+        },
+        "object-inspect": {
+          "version": "1.11.0",
+          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz",
+          "integrity": "sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==",
+          "dev": true
+        }
      }
    },
    "wide-align": {
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "cinny",
-  "version": "1.1.0",
+  "version": "1.2.0",
  "description": "Yet another matrix client",
  "main": "index.js",
  "engines": {
@@ -19,14 +19,14 @@
    "@tippyjs/react": "^4.2.5",
    "babel-polyfill": "^6.26.0",
    "browser-encrypt-attachment": "^0.3.0",
-    "commonmark": "^0.30.0",
    "dateformat": "^4.5.1",
    "emojibase-data": "^6.2.0",
    "flux": "^4.0.1",
-    "fuse.js": "^6.4.6",
    "html-react-parser": "^1.2.7",
    "linkifyjs": "^3.0.0-beta.3",
-    "matrix-js-sdk": "^12.2.0",
+    "matrix-js-sdk": "^12.4.1",
+    "micromark": "^3.0.3",
+    "micromark-extension-gfm": "^1.0.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-autosize-textarea": "^7.1.0",
@@ -44,6 +44,7 @@
    "@babel/core": "^7.13.13",
    "@babel/preset-env": "^7.13.12",
    "@babel/preset-react": "^7.13.13",
+    "assert": "^2.0.0",
    "babel-loader": "^8.2.2",
    "browserify-fs": "^1.0.0",
    "buffer": "^6.0.3",
@@ -69,7 +70,7 @@
    "sass-loader": "^11.0.1",
    "stream-browserify": "^3.0.0",
    "style-loader": "^2.0.0",
-    "util": "^0.12.3",
+    "util": "^0.12.4",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2",
--- a/public/res/ic/outlined/pencil.svg
+++ b/public/res/ic/outlined/pencil.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M20.6,5.6l-2.2-2.2C18,3,17.5,2.8,17,2.8S16,3,15.6,3.4L3,16v5h5L20.6,8.4C21.4,7.6,21.4,6.4,20.6,5.6z M7.2,19H5v-2.2
+	l9.2-9.2l2.2,2.2L7.2,19z M15.6,6.2L17,4.8c0,0,0,0,0,0L19.2,7l-1.4,1.4L15.6,6.2z"/>
+</svg>
--- a/src/app/atoms/badge/NotificationBadge.jsx
+++ b/src/app/atoms/badge/NotificationBadge.jsx
@@ -4,25 +4,26 @@ import './NotificationBadge.scss';

 import Text from '../text/Text';

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

 NotificationBadge.defaultProps = {
  alert: false,
+  content: null,
 };

 NotificationBadge.propTypes = {
  alert: PropTypes.bool,
-  children: PropTypes.oneOfType([
+  content: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
-  ]).isRequired,
+  ]),
 };

 export default NotificationBadge;
--- a/src/app/atoms/badge/NotificationBadge.scss
+++ b/src/app/atoms/badge/NotificationBadge.scss
@@ -1,19 +1,22 @@
 .notification-badge {
-  min-width: 18px;
-  padding: 1px var(--sp-ultra-tight);
+  min-width: 16px;
+  min-height: 8px;
+  padding: 0 var(--sp-ultra-tight);
  background-color: var(--tc-surface-low);
-  border-radius: 9px;
+  border-radius: var(--bo-radius);

  .text {
-    color: var(--bg-surface-low);
+    color: white;
    text-align: center;
    font-weight: 700;
  }

  &--alert {
-    background-color: var(--bg-positive);
-    .text {
-      color: white;
-    }
+    background-color: var(--bg-danger);
+  }
+
+  &:empty {
+    min-width: 8px;
+    margin: 0 var(--sp-ultra-tight);
  }
 }
--- a/src/app/atoms/context-menu/ContextMenu.jsx
+++ b/src/app/atoms/context-menu/ContextMenu.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './ContextMenu.scss';

@@ -10,12 +10,16 @@ import Button from '../button/Button';
 import ScrollView from '../scroll/ScrollView';

 function ContextMenu({
-  content, placement, maxWidth, render,
+  content, placement, maxWidth, render, afterToggle,
 }) {
  const [isVisible, setVisibility] = useState(false);
  const showMenu = () => setVisibility(true);
  const hideMenu = () => setVisibility(false);

+  useEffect(() => {
+    if (afterToggle !== null) afterToggle(isVisible);
+  }, [isVisible]);
+
  return (
    <Tippy
      animation="scale-extreme"
@@ -36,6 +40,7 @@ function ContextMenu({
 ContextMenu.defaultProps = {
  maxWidth: 'unset',
  placement: 'right',
+  afterToggle: null,
 };

 ContextMenu.propTypes = {
@@ -49,6 +54,7 @@ ContextMenu.propTypes = {
    PropTypes.number,
  ]),
  render: PropTypes.func.isRequired,
+  afterToggle: PropTypes.func,
 };

 function MenuHeader({ children }) {
--- a/src/app/atoms/context-menu/ContextMenu.scss
+++ b/src/app/atoms/context-menu/ContextMenu.scss
@@ -44,6 +44,7 @@
    justify-content: start;
    border-radius: 0;
    box-shadow: none;
+    white-space: nowrap;

    .text:first-child {
      margin: {
--- a/src/app/molecules/channel-intro/ChannelIntro.jsx
+++ b/src/app/molecules/channel-intro/ChannelIntro.jsx
@@ -13,11 +13,11 @@ function linkifyContent(content) {
 }

 function ChannelIntro({
-  avatarSrc, name, heading, desc, time,
+  roomId, avatarSrc, name, heading, desc, time,
 }) {
  return (
    <div className="channel-intro">
-      <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={colorMXID(name)} size="large" />
+      <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={colorMXID(roomId)} size="large" />
      <div className="channel-intro__content">
        <Text className="channel-intro__name" variant="h1">{heading}</Text>
        <Text className="channel-intro__desc" variant="b1">{linkifyContent(desc)}</Text>
@@ -33,6 +33,7 @@ ChannelIntro.defaultProps = {
 };

 ChannelIntro.propTypes = {
+  roomId: PropTypes.string.isRequired,
  avatarSrc: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.bool,
--- a/src/app/molecules/channel-selector/ChannelSelector.jsx
+++ b/src/app/molecules/channel-selector/ChannelSelector.jsx
@@ -9,65 +9,80 @@ import Avatar from '../../atoms/avatar/Avatar';
 import NotificationBadge from '../../atoms/badge/NotificationBadge';
 import { blurOnBubbling } from '../../atoms/button/script';

-function ChannelSelector({
-  selected, unread, notificationCount, alert,
-  iconSrc, imageSrc, roomId, onClick, children,
+function ChannelSelectorWrapper({
+  isSelected, onClick, content, options,
 }) {
  return (
-    <button
-      className={`channel-selector__button-wrapper${selected ? ' channel-selector--selected' : ''}`}
-      type="button"
-      onClick={onClick}
-      onMouseUp={(e) => blurOnBubbling(e, '.channel-selector__button-wrapper')}
-    >
-      <div className="channel-selector">
-        <div className="channel-selector__icon flex--center">
+    <div className={`channel-selector${isSelected ? ' channel-selector--selected' : ''}`}>
+      <button
+        className="channel-selector__content"
+        type="button"
+        onClick={onClick}
+        onMouseUp={(e) => blurOnBubbling(e, '.channel-selector')}
+      >
+        {content}
+      </button>
+      <div className="channel-selector__options">{options}</div>
+    </div>
+  );
+}
+ChannelSelectorWrapper.defaultProps = {
+  options: null,
+};
+ChannelSelectorWrapper.propTypes = {
+  isSelected: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+  content: PropTypes.node.isRequired,
+  options: PropTypes.node,
+};
+
+function ChannelSelector({
+  name, roomId, imageSrc, iconSrc,
+  isSelected, isUnread, notificationCount, isAlert,
+  options, onClick,
+}) {
+  return (
+    <ChannelSelectorWrapper
+      isSelected={isSelected}
+      content={(
+        <>
          <Avatar
-            text={children.slice(0, 1)}
+            text={name.slice(0, 1)}
            bgColor={colorMXID(roomId)}
            imageSrc={imageSrc}
            iconSrc={iconSrc}
            size="extra-small"
          />
-        </div>
-        <div className="channel-selector__text-container">
-          <Text variant="b1">{children}</Text>
-        </div>
-        <div className="channel-selector__badge-container">
-          {
-            notificationCount !== 0
-              ? unread && (
-                <NotificationBadge alert={alert}>
-                  {notificationCount}
-                </NotificationBadge>
-              )
-              : unread && <div className="channel-selector--unread" />
-          }
-        </div>
-      </div>
-    </button>
+          <Text variant="b1">{name}</Text>
+          { isUnread && (
+            <NotificationBadge
+              alert={isAlert}
+              content={notificationCount !== 0 ? notificationCount : null}
+            />
+          )}
+        </>
+      )}
+      options={options}
+      onClick={onClick}
+    />
  );
 }
-
 ChannelSelector.defaultProps = {
-  selected: false,
-  unread: false,
-  notificationCount: 0,
-  alert: false,
-  iconSrc: null,
  imageSrc: null,
+  iconSrc: null,
+  options: null,
 };
-
 ChannelSelector.propTypes = {
-  selected: PropTypes.bool,
-  unread: PropTypes.bool,
-  notificationCount: PropTypes.number,
-  alert: PropTypes.bool,
-  iconSrc: PropTypes.string,
-  imageSrc: PropTypes.string,
+  name: PropTypes.string.isRequired,
  roomId: PropTypes.string.isRequired,
+  imageSrc: PropTypes.string,
+  iconSrc: PropTypes.string,
+  isSelected: PropTypes.bool.isRequired,
+  isUnread: PropTypes.bool.isRequired,
+  notificationCount: PropTypes.number.isRequired,
+  isAlert: PropTypes.bool.isRequired,
+  options: PropTypes.node,
  onClick: PropTypes.func.isRequired,
-  children: PropTypes.string.isRequired,
 };

 export default ChannelSelector;
--- a/src/app/molecules/channel-selector/ChannelSelector.scss
+++ b/src/app/molecules/channel-selector/ChannelSelector.scss
@@ -1,24 +1,35 @@
-.channel-selector__button-wrapper {
-  display: block;
-  width: calc(100% - var(--sp-extra-tight));
-  margin-left: auto;
-  padding: var(--sp-extra-tight) var(--sp-extra-tight);
-  
-  border: 1px solid transparent;
-  border-radius:  var(--bo-radius);
-  cursor: pointer;
+.channel-selector-flex {
+  display: flex;
+  align-items: center;
+}
+.channel-selector-flexItem {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}

-  [dir=rtl] & {
-    
-    margin: {
-      left: 0;
-      right: auto;
+.channel-selector {
+  @extend .channel-selector-flex;
+
+  border: 1px solid transparent;
+  border-radius: var(--bo-radius);
+  cursor: pointer;
+  
+  &--selected {
+    background-color: var(--bg-surface);
+    border-color: var(--bg-surface-border);
+
+    & .channel-selector__options {
+      display: flex;
    }
  }

  @media (hover: hover) {
    &:hover {
      background-color: var(--bg-surface-hover);
+      & .channel-selector__options {
+        display: flex;
+      }
    }
  }
  &:focus {
@@ -28,41 +39,50 @@
  &:active {
    background-color: var(--bg-surface-active);
  }
-}
-.channel-selector {
-  display: flex;
-  align-items: center;
-
-  &__icon {
-    width: 24px;
-    height: 24px;
-    .avatar__border {
-      box-shadow: none;
-    }
+  &--selected:hover,
+  &--selected:focus,
+  &--selected:active {
+    background-color: var(--bg-surface);
  }
-  &__text-container {
-    flex: 1;
-    min-width: 0;
+}
+
+.channel-selector__content {
+  @extend .channel-selector-flexItem;
+  @extend .channel-selector-flex;
+  padding: 0 var(--sp-extra-tight);
+  min-height: 40px;
+  cursor: inherit;
+
+  & > .avatar-container .avatar__bordered {
+    box-shadow: none;
+  }
+
+  & > .text {
+    @extend .channel-selector-flexItem;
    margin: 0 var(--sp-extra-tight);

-    & .text {
-      color: var(--tc-surface-normal);
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
+    color: var(--tc-surface-normal);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
  }
 }
+.channel-selector__options {
+  @extend .channel-selector-flex;
+  display: none;
+  margin-right: var(--sp-ultra-tight);

-.channel-selector--unread {
-  margin: 0 var(--sp-ultra-tight);
-  height: 8px;
-  width: 8px;
-  background-color: var(--tc-surface-normal);
-  border-radius: 50%;
-  opacity: .4;
-}
-.channel-selector--selected {
-  background-color: var(--bg-surface);
-  border-color: var(--bg-surface-border);
+  [dir=rtl] & {
+    margin-right: 0;
+    margin-left: var(--sp-ultra-tight);
+  }
+
+  &:empty {
+    margin: 0 !important;
+  }
+
+  & .ic-btn-surface {
+    padding: 6px;
+    border-radius: calc(var(--bo-radius) / 2);
+  }
 }
--- a/src/app/molecules/dialog/Dialog.jsx
+++ b/src/app/molecules/dialog/Dialog.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Dialog.scss';
+
+import Text from '../../atoms/text/Text';
+import Header, { TitleWrapper } from '../../atoms/header/Header';
+import ScrollView from '../../atoms/scroll/ScrollView';
+import RawModal from '../../atoms/modal/RawModal';
+
+function Dialog({
+  className, isOpen, title,
+  contentOptions, onRequestClose, children,
+}) {
+  return (
+    <RawModal
+      className={`${className === null ? '' : `${className} `}dialog-model`}
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      size="small"
+    >
+      <div className="dialog">
+        <div className="dialog__content">
+          <Header>
+            <TitleWrapper>
+              <Text variant="h2">{title}</Text>
+            </TitleWrapper>
+            {contentOptions}
+          </Header>
+          <div className="dialog__content__wrapper">
+            <ScrollView autoHide>
+              <div className="dialog__content-container">
+                {children}
+              </div>
+            </ScrollView>
+          </div>
+        </div>
+      </div>
+    </RawModal>
+  );
+}
+
+Dialog.defaultProps = {
+  className: null,
+  contentOptions: null,
+  onRequestClose: null,
+};
+
+Dialog.propTypes = {
+  className: PropTypes.string,
+  isOpen: PropTypes.bool.isRequired,
+  title: PropTypes.string.isRequired,
+  contentOptions: PropTypes.node,
+  onRequestClose: PropTypes.func,
+  children: PropTypes.node.isRequired,
+};
+
+export default Dialog;
--- a/src/app/molecules/dialog/Dialog.scss
+++ b/src/app/molecules/dialog/Dialog.scss
@@ -0,0 +1,28 @@
+.dialog-model {
+  --modal-height: 656px;
+  max-height: var(--modal-height) !important;
+}
+
+.dialog {
+  width: 100%;
+  max-height: inherit;
+  background-color: var(--bg-surface);
+  display: flex;
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+
+.dialog__content-container {
+  padding-top: var(--sp-extra-tight);
+  padding-bottom: var(--sp-extra-loose);
+}
+.dialog__content__wrapper {
+  flex: 1;
+  min-height: 0;
+}
--- a/src/app/molecules/media/Media.jsx
+++ b/src/app/molecules/media/Media.jsx
@@ -137,11 +137,12 @@ function File({
 }
 File.defaultProps = {
  file: null,
+  type: '',
 };
 File.propTypes = {
  name: PropTypes.string.isRequired,
  link: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
+  type: PropTypes.string,
  file: PropTypes.shape({}),
 };

@@ -176,6 +177,7 @@ Image.defaultProps = {
  file: null,
  width: null,
  height: null,
+  type: '',
 };
 Image.propTypes = {
  name: PropTypes.string.isRequired,
@@ -183,7 +185,7 @@ Image.propTypes = {
  height: PropTypes.number,
  link: PropTypes.string.isRequired,
  file: PropTypes.shape({}),
-  type: PropTypes.string.isRequired,
+  type: PropTypes.string,
 };

 function Audio({
@@ -220,11 +222,12 @@ function Audio({
 }
 Audio.defaultProps = {
  file: null,
+  type: '',
 };
 Audio.propTypes = {
  name: PropTypes.string.isRequired,
  link: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
+  type: PropTypes.string,
  file: PropTypes.shape({}),
 };

@@ -287,6 +290,7 @@ Video.defaultProps = {
  height: null,
  file: null,
  thumbnail: null,
+  type: '',
  thumbnailType: null,
  thumbnailFile: null,
 };
@@ -297,7 +301,7 @@ Video.propTypes = {
  width: PropTypes.number,
  height: PropTypes.number,
  file: PropTypes.shape({}),
-  type: PropTypes.string.isRequired,
+  type: PropTypes.string,
  thumbnailFile: PropTypes.shape({}),
  thumbnailType: PropTypes.string,
 };
--- a/src/app/molecules/message/Message.jsx
+++ b/src/app/molecules/message/Message.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import './Message.scss';

@@ -13,8 +13,9 @@ import { getUsername } from '../../../util/matrixUtil';

 import Text from '../../atoms/text/Text';
 import RawIcon from '../../atoms/system-icons/RawIcon';
-import Avatar from '../../atoms/avatar/Avatar';
+import Button from '../../atoms/button/Button';
 import Tooltip from '../../atoms/tooltip/Tooltip';
+import Input from '../../atoms/input/Input';

 import ReplyArrowIC from '../../../../public/res/ic/outlined/reply-arrow.svg';

@@ -87,9 +88,7 @@ MessageHeader.propTypes = {
  time: PropTypes.string.isRequired,
 };

-function MessageReply({
-  userId, name, color, content,
-}) {
+function MessageReply({ name, color, content }) {
  return (
    <div className="message__reply">
      <Text variant="b2">
@@ -102,7 +101,6 @@ function MessageReply({
 }

 MessageReply.propTypes = {
-  userId: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  color: PropTypes.string.isRequired,
  content: PropTypes.string.isRequired,
@@ -128,6 +126,30 @@ MessageContent.propTypes = {
  isEdited: PropTypes.bool,
 };

+function MessageEdit({ content, onSave, onCancel }) {
+  const editInputRef = useRef(null);
+  return (
+    <form className="message__edit" onSubmit={(e) => { e.preventDefault(); onSave(editInputRef.current.value); }}>
+      <Input
+        forwardRef={editInputRef}
+        value={content}
+        placeholder="Edit message"
+        required
+        resizable
+      />
+      <div className="message__edit-btns">
+        <Button type="submit" variant="primary">Save</Button>
+        <Button onClick={onCancel}>Cancel</Button>
+      </div>
+    </form>
+  );
+}
+MessageEdit.propTypes = {
+  content: PropTypes.string.isRequired,
+  onSave: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+};
+
 function MessageReactionGroup({ children }) {
  return (
    <div className="message__reactions text text-b3 noselect">
@@ -196,7 +218,7 @@ MessageOptions.propTypes = {
 };

 function Message({
-  avatar, header, reply, content, reactions, options,
+  avatar, header, reply, content, editContent, reactions, options,
 }) {
  const msgClass = header === null ? ' message--content-only' : ' message--full';
  return (
@@ -207,7 +229,8 @@ function Message({
      <div className="message__main-container">
        {header !== null && header}
        {reply !== null && reply}
-        {content}
+        {content !== null && content}
+        {editContent !== null && editContent}
        {reactions !== null && reactions}
        {options !== null && options}
      </div>
@@ -218,6 +241,8 @@ Message.defaultProps = {
  avatar: null,
  header: null,
  reply: null,
+  content: null,
+  editContent: null,
  reactions: null,
  options: null,
 };
@@ -225,7 +250,8 @@ Message.propTypes = {
  avatar: PropTypes.node,
  header: PropTypes.node,
  reply: PropTypes.node,
-  content: PropTypes.node.isRequired,
+  content: PropTypes.node,
+  editContent: PropTypes.node,
  reactions: PropTypes.node,
  options: PropTypes.node,
 };
@@ -235,6 +261,7 @@ export {
  MessageHeader,
  MessageReply,
  MessageContent,
+  MessageEdit,
  MessageReactionGroup,
  MessageReaction,
  MessageOptions,
--- a/src/app/molecules/message/Message.scss
+++ b/src/app/molecules/message/Message.scss
@@ -94,8 +94,10 @@

 .message__reply,
 .message__content,
+.message__edit,
 .message__reactions {
  max-width: 640px;
+  min-width: 0;
 }


@@ -163,8 +165,27 @@
    color: var(--tc-surface-low);
  }
 }
+.message__edit {
+  padding: var(--sp-extra-tight) 0;
+  &-btns button {
+    margin: var(--sp-tight) var(--sp-tight) 0 0;
+    [dir=rtl] & {
+      margin: var(--sp-tight) 0 0 var(--sp-tight);
+    }
+  }
+}
 .message__reactions {
  display: flex;
+  flex-wrap: wrap;
+
+  & .ic-btn-surface {
+    display: none;
+    padding: var(--sp-ultra-tight);
+    margin-top: var(--sp-extra-tight);
+  }
+  &:hover .ic-btn-surface {
+    display: block;
+  }
 }
 .msg__reaction {
  margin: var(--sp-extra-tight) var(--sp-extra-tight) 0 0;
@@ -227,6 +248,7 @@
  position: absolute;
  top: 0;
  right: 60px;
+  z-index: 999;
  transform: translateY(-50%);

  border-radius: var(--bo-radius);
@@ -343,4 +365,37 @@
      }
    }
  }
+  & ul.contains-task-list {
+    padding: 0;
+    list-style: none;
+  }
+  & table {
+    background-color: var(--bg-surface-hover);
+    border-radius: calc(var(--bo-radius) / 2);
+    border-spacing: 0;
+    border: 1px solid var(--bg-surface-border);
+
+    & td, & th {
+      padding: var(--sp-extra-tight);
+      border: 1px solid var(--bg-surface-border);
+      border-width: 0 1px 1px 0;
+      &:last-child {
+        border-width: 0;
+        border-bottom-width: 1px;
+        [dir=rtl] & {
+          border-width: 0 1px 1px 0;
+        }
+      }
+      [dir=rtl] &:first-child {
+        border-width: 0;
+        border-bottom-width: 1px;
+      }
+    }
+    & tbody tr:nth-child(2n + 1) {
+      background-color: var(--bg-surface-hover);
+    }
+    & tr:last-child td {
+      border-bottom-width: 0px !important;
+    }
+  }
 }
--- a/src/app/molecules/message/TimelineChange.jsx
+++ b/src/app/molecules/message/TimelineChange.jsx
@@ -14,7 +14,7 @@ import InviteCancelArraowIC from '../../../../public/res/ic/outlined/invite-canc
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';

-function TimelineChange({ variant, content, time }) {
+function TimelineChange({ variant, content, time, onClick }) {
  let iconSrc;

  switch (variant) {
@@ -42,7 +42,7 @@ function TimelineChange({ variant, content, time }) {
  }

  return (
-    <div className="timeline-change">
+    <button style={{ cursor: onClick === null ? 'default' : 'pointer' }} onClick={onClick} type="button" className="timeline-change">
      <div className="timeline-change__avatar-container">
        <RawIcon src={iconSrc} size="extra-small" />
      </div>
@@ -55,12 +55,13 @@ function TimelineChange({ variant, content, time }) {
      <div className="timeline-change__time">
        <Text variant="b3">{time}</Text>
      </div>
-    </div>
+    </button>
  );
 }

 TimelineChange.defaultProps = {
  variant: 'other',
+  onClick: null,
 };

 TimelineChange.propTypes = {
@@ -74,6 +75,7 @@ TimelineChange.propTypes = {
    PropTypes.node,
  ]).isRequired,
  time: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
 };

 export default TimelineChange;
--- a/src/app/molecules/message/TimelineChange.scss
+++ b/src/app/molecules/message/TimelineChange.scss
@@ -3,6 +3,7 @@
  padding-right: var(--sp-extra-tight);
  display: flex;
  align-items: center;
+  width: 100%;

  &:hover {
    background-color: var(--bg-surface-hover);
--- a/src/app/molecules/sidebar-avatar/SidebarAvatar.jsx
+++ b/src/app/molecules/sidebar-avatar/SidebarAvatar.jsx
@@ -40,7 +40,7 @@ const SidebarAvatar = React.forwardRef(({
          iconSrc={iconSrc}
          size="normal"
        />
-        { notifyCount !== null && <NotificationBadge alert>{notifyCount}</NotificationBadge> }
+        { notifyCount !== null && <NotificationBadge alert content={notifyCount} /> }
      </button>
    </Tippy>
  );
--- a/src/app/organisms/channel/ChannelViewCmdBar.jsx
+++ b/src/app/organisms/channel/ChannelViewCmdBar.jsx
@@ -2,7 +2,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './ChannelViewCmdBar.scss';
-import Fuse from 'fuse.js';
 import parse from 'html-react-parser';
 import twemoji from 'twemoji';

@@ -15,8 +14,10 @@ import {
  openCreateChannel,
  openPublicChannels,
  openInviteUser,
+  openReadReceipts,
 } from '../../../client/action/navigation';
-import { searchEmoji } from '../emoji-board/emoji';
+import { emojis } from '../emoji-board/emoji';
+import AsyncSearch from '../../../util/AsyncSearch';

 import Text from '../../atoms/text/Text';
 import Button from '../../atoms/button/Button';
@@ -73,6 +74,7 @@ function CmdHelp() {
          <Text variant="b2">{'>@people_name'}</Text>
          <MenuHeader>Autofill command</MenuHeader>
          <Text variant="b2">:emoji_name:</Text>
+          <Text variant="b2">@name</Text>
        </>
      )}
      render={(toggleMenu) => (
@@ -143,11 +145,13 @@ function FollowingMembers({ roomId, roomTimeline, viewEvent }) {
    };
  }, [roomTimeline]);

+  const lastMEvent = roomTimeline.timeline[roomTimeline.timeline.length - 1];
  return followingMembers.length !== 0 && (
    <TimelineChange
      variant="follow"
-      content={getUsersActionJsx(followingMembers, 'following the conversation.')}
+      content={getUsersActionJsx(roomId, followingMembers, 'following the conversation.')}
      time=""
+      onClick={() => openReadReceipts(roomId, lastMEvent.getId())}
    />
  );
 }
@@ -173,6 +177,7 @@ function getCmdActivationMessage(prefix) {
    '>#': () => genMessage('Go-to command mode activated. ', 'Type channel name for suggestions.'),
    '>@': () => genMessage('Go-to command mode activated. ', 'Type people name for suggestions.'),
    ':': () => genMessage('Emoji autofill command mode activated. ', 'Type emoji shortcut for suggestions.'),
+    '@': () => genMessage('Name autofill command mode activated. ', 'Type name for suggestions.'),
  };
  return cmd[prefix]?.();
 }
@@ -189,163 +194,166 @@ CmdItem.propTypes = {
  children: PropTypes.node.isRequired,
 };

-function searchInRoomIds(roomIds, term) {
-  const rooms = roomIds.map((rId) => {
-    const room = initMatrix.matrixClient.getRoom(rId);
-    return {
-      name: room.name,
-      roomId: room.roomId,
-    };
-  });
-  const fuse = new Fuse(rooms, {
-    includeScore: true,
-    keys: ['name'],
-    threshold: '0.3',
-  });
-  return fuse.search(term);
-}
-
-function searchCommands(term) {
-  const fuse = new Fuse(commands, {
-    includeScore: true,
-    keys: ['name'],
-    threshold: '0.3',
-  });
-  return fuse.search(term);
-}
-
-let perfectMatchCmd = null;
-function getCmdSuggestions({ prefix, slug }, fireCmd, viewEvent) {
-  function getRoomsSuggestion(cmdPrefix, rooms, roomSlug) {
-    const result = searchInRoomIds(rooms, roomSlug);
-    if (result.length === 0) viewEvent.emit('cmd_error');
-    perfectMatchCmd = {
-      prefix: cmdPrefix,
-      slug: roomSlug,
-      result: result[0]?.item || null,
-    };
-    return result.map((finding) => (
+function getCmdSuggestions({ prefix, option, suggestions }, fireCmd) {
+  function getGenCmdSuggestions(cmdPrefix, cmds) {
+    const cmdOptString = (typeof option === 'string') ? `/${option}` : '/?';
+    return cmds.map((cmd) => (
      <CmdItem
-        key={finding.item.roomId}
+        key={cmd.name}
        onClick={() => {
          fireCmd({
            prefix: cmdPrefix,
-            slug: roomSlug,
-            result: finding.item,
+            option,
+            result: cmd,
          });
        }}
      >
-        <Text variant="b2">{finding.item.name}</Text>
+        <Text variant="b2">{`${cmd.name}${cmd.isOptions ? cmdOptString : ''}`}</Text>
      </CmdItem>
    ));
  }

-  function getGenCmdSuggestions(cmdPrefix, cmdSlug) {
-    const cmdSlugParts = cmdSlug.split('/');
-    const cmdSlugOption = cmdSlugParts[1];
-    const result = searchCommands(cmdSlugParts[0]);
-    if (result.length === 0) viewEvent.emit('cmd_error');
-    perfectMatchCmd = {
-      prefix: cmdPrefix,
-      slug: cmdSlug,
-      option: cmdSlugOption,
-      result: result[0]?.item || null,
-    };
-    return result.map((finding) => {
-      let option = '';
-      if (finding.item.isOptions) {
-        if (typeof cmdSlugOption === 'string') option = `/${cmdSlugOption}`;
-        else option = '/?';
-      }
-      return (
-        <CmdItem
-          key={finding.item.name}
-          onClick={() => {
-            fireCmd({
-              prefix: cmdPrefix,
-              slug: cmdSlug,
-              option: cmdSlugOption,
-              result: finding.item,
-            });
-          }}
-        >
-          <Text variant="b2">{`${finding.item.name}${option}`}</Text>
-        </CmdItem>
-      );
-    });
+  function getRoomsSuggestion(cmdPrefix, rooms) {
+    return rooms.map((room) => (
+      <CmdItem
+        key={room.roomId}
+        onClick={() => {
+          fireCmd({
+            prefix: cmdPrefix,
+            result: room,
+          });
+        }}
+      >
+        <Text variant="b2">{room.name}</Text>
+      </CmdItem>
+    ));
  }

-  function getEmojiSuggestion(emPrefix, shortcutSlug) {
-    let searchTerm = shortcutSlug;
-    if (searchTerm.length <= 3) {
-      if (searchTerm.match(/^[-]?(\))/)) searchTerm = 'smile';
-      else if (searchTerm.match(/^[-]?(s|S)/)) searchTerm = 'confused';
-      else if (searchTerm.match(/^[-]?(o|O|0)/)) searchTerm = 'astonished';
-      else if (searchTerm.match(/^[-]?(\|)/)) searchTerm = 'neutral_face';
-      else if (searchTerm.match(/^[-]?(d|D)/)) searchTerm = 'grin';
-      else if (searchTerm.match(/^[-]?(\/)/)) searchTerm = 'frown';
-      else if (searchTerm.match(/^[-]?(p|P)/)) searchTerm = 'stick_out_tongue';
-      else if (searchTerm.match(/^'[-]?(\()/)) searchTerm = 'cry';
-      else if (searchTerm.match(/^[-]?(x|X)/)) searchTerm = 'dizzy_face';
-      else if (searchTerm.match(/^[-]?(\()/)) searchTerm = 'pleading_face';
-      else if (searchTerm.match(/^[-]?(\$)/)) searchTerm = 'money';
-      else if (searchTerm.match(/^(<3)/)) searchTerm = 'heart';
-    }
-    const result = searchEmoji(searchTerm);
-    if (result.length === 0) viewEvent.emit('cmd_error');
-    perfectMatchCmd = {
-      prefix: emPrefix,
-      slug: shortcutSlug,
-      result: result[0]?.item || null,
-    };
-    return result.map((finding) => (
+  function getEmojiSuggestion(emPrefix, emos) {
+    return emos.map((emoji) => (
      <CmdItem
-        key={finding.item.hexcode}
+        key={emoji.hexcode}
        onClick={() => fireCmd({
          prefix: emPrefix,
-          slug: shortcutSlug,
-          result: finding.item,
+          result: emoji,
        })}
      >
        {
          parse(twemoji.parse(
-            finding.item.unicode,
+            emoji.unicode,
            {
              attributes: () => ({
-                unicode: finding.item.unicode,
-                shortcodes: finding.item.shortcodes?.toString(),
+                unicode: emoji.unicode,
+                shortcodes: emoji.shortcodes?.toString(),
              }),
            },
          ))
        }
+        <Text variant="b2">{`:${emoji.shortcode}:`}</Text>
+      </CmdItem>
+    ));
+  }
+
+  function getNameSuggestion(namePrefix, members) {
+    return members.map((member) => (
+      <CmdItem
+        key={member.userId}
+        onClick={() => {
+          fireCmd({
+            prefix: namePrefix,
+            result: member,
+          });
+        }}
+      >
+        <Text variant="b2">{member.name}</Text>
      </CmdItem>
    ));
  }

-  const { roomList } = initMatrix;
  const cmd = {
-    '/': (command) => getGenCmdSuggestions(prefix, command),
-    '>*': (space) => getRoomsSuggestion(prefix, [...roomList.spaces], space),
-    '>#': (channel) => getRoomsSuggestion(prefix, [...roomList.rooms], channel),
-    '>@': (people) => getRoomsSuggestion(prefix, [...roomList.directs], people),
-    ':': (emojiShortcut) => getEmojiSuggestion(prefix, emojiShortcut),
+    '/': (cmds) => getGenCmdSuggestions(prefix, cmds),
+    '>*': (spaces) => getRoomsSuggestion(prefix, spaces),
+    '>#': (channels) => getRoomsSuggestion(prefix, channels),
+    '>@': (peoples) => getRoomsSuggestion(prefix, peoples),
+    ':': (emos) => getEmojiSuggestion(prefix, emos),
+    '@': (members) => getNameSuggestion(prefix, members),
  };
-  return cmd[prefix]?.(slug);
+  return cmd[prefix]?.(suggestions);
 }

+const asyncSearch = new AsyncSearch();
+let cmdPrefix;
+let cmdOption;
 function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) {
  const [cmd, setCmd] = useState(null);

+  function displaySuggestions(suggestions) {
+    if (suggestions.length === 0) {
+      setCmd({ prefix: cmd?.prefix || cmdPrefix, error: 'No suggestion found.' });
+      viewEvent.emit('cmd_error');
+      return;
+    }
+    setCmd({ prefix: cmd?.prefix || cmdPrefix, suggestions, option: cmdOption });
+  }
+
  function processCmd(prefix, slug) {
-    setCmd({ prefix, slug });
+    let searchTerm = slug;
+    cmdOption = undefined;
+    cmdPrefix = prefix;
+    if (prefix === '/') {
+      const cmdSlugParts = slug.split('/');
+      [searchTerm, cmdOption] = cmdSlugParts;
+    }
+    if (prefix === ':') {
+      if (searchTerm.length <= 3) {
+        if (searchTerm.match(/^[-]?(\))$/)) searchTerm = 'smile';
+        else if (searchTerm.match(/^[-]?(s|S)$/)) searchTerm = 'confused';
+        else if (searchTerm.match(/^[-]?(o|O|0)$/)) searchTerm = 'astonished';
+        else if (searchTerm.match(/^[-]?(\|)$/)) searchTerm = 'neutral_face';
+        else if (searchTerm.match(/^[-]?(d|D)$/)) searchTerm = 'grin';
+        else if (searchTerm.match(/^[-]?(\/)$/)) searchTerm = 'frown';
+        else if (searchTerm.match(/^[-]?(p|P)$/)) searchTerm = 'stuck_out_tongue';
+        else if (searchTerm.match(/^'[-]?(\()$/)) searchTerm = 'cry';
+        else if (searchTerm.match(/^[-]?(x|X)$/)) searchTerm = 'dizzy_face';
+        else if (searchTerm.match(/^[-]?(\()$/)) searchTerm = 'pleading_face';
+        else if (searchTerm.match(/^[-]?(\$)$/)) searchTerm = 'money';
+        else if (searchTerm.match(/^(<3)$/)) searchTerm = 'heart';
+      }
+    }
+
+    asyncSearch.search(searchTerm);
  }
  function activateCmd(prefix) {
    setCmd({ prefix });
-    perfectMatchCmd = null;
+    cmdPrefix = prefix;
+
+    const { roomList, matrixClient } = initMatrix;
+    function getRooms(roomIds) {
+      return roomIds.map((rId) => {
+        const room = matrixClient.getRoom(rId);
+        return {
+          name: room.name,
+          roomId: room.roomId,
+        };
+      });
+    }
+    const setupSearch = {
+      '/': () => asyncSearch.setup(commands, { keys: ['name'], isContain: true }),
+      '>*': () => asyncSearch.setup(getRooms([...roomList.spaces]), { keys: ['name'], limit: 20 }),
+      '>#': () => asyncSearch.setup(getRooms([...roomList.rooms]), { keys: ['name'], limit: 20 }),
+      '>@': () => asyncSearch.setup(getRooms([...roomList.directs]), { keys: ['name'], limit: 20 }),
+      ':': () => asyncSearch.setup(emojis, { keys: ['shortcode'], limit: 20 }),
+      '@': () => asyncSearch.setup(matrixClient.getRoom(roomId).getJoinedMembers().map((member) => ({
+        name: member.name,
+        userId: member.userId.slice(1),
+      })), { keys: ['name', 'userId'], limit: 20 }),
+    };
+    setupSearch[prefix]?.();
  }
  function deactivateCmd() {
    setCmd(null);
-    perfectMatchCmd = null;
+    cmdOption = undefined;
+    cmdPrefix = undefined;
  }
  function fireCmd(myCmd) {
    if (myCmd.prefix.match(/^>[*#@]$/)) {
@@ -361,34 +369,63 @@ function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) {
        replace: myCmd.result.unicode,
      });
    }
+    if (myCmd.prefix === '@') {
+      viewEvent.emit('cmd_fired', {
+        replace: myCmd.result.name,
+      });
+    }
    deactivateCmd();
  }
  function executeCmd() {
-    if (perfectMatchCmd === null) return;
-    if (perfectMatchCmd.result === null) return;
-    fireCmd(perfectMatchCmd);
+    if (cmd.suggestions.length === 0) return;
+    fireCmd({
+      prefix: cmd.prefix,
+      option: cmd.option,
+      result: cmd.suggestions[0],
+    });
  }
-  function errorCmd() {
-    setCmd({ error: 'No suggestion found.' });
+
+  function listenKeyboard(event) {
+    const { activeElement } = document;
+    const lastCmdItem = document.activeElement.parentNode.lastElementChild;
+    if (event.keyCode === 27) {
+      if (activeElement.className !== 'cmd-item') return;
+      viewEvent.emit('focus_msg_input');
+    }
+    if (event.keyCode === 9) {
+      if (lastCmdItem.className !== 'cmd-item') return;
+      if (lastCmdItem !== activeElement) return;
+      if (event.shiftKey) return;
+      viewEvent.emit('focus_msg_input');
+      event.preventDefault();
+    }
  }

  useEffect(() => {
    viewEvent.on('cmd_activate', activateCmd);
-    viewEvent.on('cmd_process', processCmd);
    viewEvent.on('cmd_deactivate', deactivateCmd);
-    viewEvent.on('cmd_exe', executeCmd);
-    viewEvent.on('cmd_error', errorCmd);
    return () => {
      deactivateCmd();
      viewEvent.removeListener('cmd_activate', activateCmd);
-      viewEvent.removeListener('cmd_process', processCmd);
      viewEvent.removeListener('cmd_deactivate', deactivateCmd);
-      viewEvent.removeListener('cmd_exe', executeCmd);
-      viewEvent.removeListener('cmd_error', errorCmd);
    };
  }, [roomId]);

-  if (cmd !== null && typeof cmd.error !== 'undefined') {
+  useEffect(() => {
+    if (cmd !== null) document.body.addEventListener('keydown', listenKeyboard);
+    viewEvent.on('cmd_process', processCmd);
+    viewEvent.on('cmd_exe', executeCmd);
+    asyncSearch.on(asyncSearch.RESULT_SENT, displaySuggestions);
+    return () => {
+      if (cmd !== null) document.body.removeEventListener('keydown', listenKeyboard);
+
+      viewEvent.removeListener('cmd_process', processCmd);
+      viewEvent.removeListener('cmd_exe', executeCmd);
+      asyncSearch.removeListener(asyncSearch.RESULT_SENT, displaySuggestions);
+    };
+  }, [cmd]);
+
+  if (typeof cmd?.error === 'string') {
    return (
      <div className="cmd-bar">
        <div className="cmd-bar__info">
@@ -405,8 +442,8 @@ function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) {
    <div className="cmd-bar">
      <div className="cmd-bar__info">
        {cmd === null && <CmdHelp />}
-        {cmd !== null && typeof cmd.slug === 'undefined' && <div className="cmd-bar__info-indicator" /> }
-        {cmd !== null && typeof cmd.slug === 'string' && <Text variant="b3">TAB</Text>}
+        {cmd !== null && typeof cmd.suggestions === 'undefined' && <div className="cmd-bar__info-indicator" /> }
+        {cmd !== null && typeof cmd.suggestions !== 'undefined' && <Text variant="b3">TAB</Text>}
      </div>
      <div className="cmd-bar__content">
        {cmd === null && (
@@ -416,10 +453,10 @@ function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) {
            viewEvent={viewEvent}
          />
        )}
-        {cmd !== null && typeof cmd.slug === 'undefined' && <Text className="cmd-bar__content-help" variant="b2">{getCmdActivationMessage(cmd.prefix)}</Text>}
-        {cmd !== null && typeof cmd.slug === 'string' && (
+        {cmd !== null && typeof cmd.suggestions === 'undefined' && <Text className="cmd-bar__content-help" variant="b2">{getCmdActivationMessage(cmd.prefix)}</Text>}
+        {cmd !== null && typeof cmd.suggestions !== 'undefined' && (
          <ScrollView horizontal vertical={false} invisible>
-            <div className="cmd-bar__content__suggestions">{getCmdSuggestions(cmd, fireCmd, viewEvent)}</div>
+            <div className="cmd-bar__content__suggestions">{getCmdSuggestions(cmd, fireCmd)}</div>
          </ScrollView>
        )}
      </div>
--- a/src/app/organisms/channel/ChannelViewCmdBar.scss
+++ b/src/app/organisms/channel/ChannelViewCmdBar.scss
@@ -117,14 +117,10 @@
  border-radius: var(--bo-radius) var(--bo-radius) 0 0;
  cursor: pointer;

-  [dir=rtl] & {
-    margin-right: 0;
-    margin-left: var(--sp-extra-tight);
-  }
-
  & .emoji {
    width: 20px;
    height: 20px;
+    margin-right: var(--sp-ultra-tight);
  }

  &:hover {
@@ -136,4 +132,13 @@
    border-bottom: 2px solid transparent;
    outline: none;
  }
+  
+  [dir=rtl] & {
+    margin-right: 0;
+    margin-left: var(--sp-extra-tight);
+    & .emoji {
+      margin-right: 0;
+      margin-left: var(--sp-ultra-tight);
+    }
+  }
 }
--- a/src/app/organisms/channel/ChannelViewContent.jsx
+++ b/src/app/organisms/channel/ChannelViewContent.jsx
@@ -7,19 +7,22 @@ import dateFormat from 'dateformat';

 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
-import { redact } from '../../../client/action/room';
-import { getUsername, doesRoomHaveUnread } from '../../../util/matrixUtil';
+import { redactEvent, sendReaction } from '../../../client/action/roomTimeline';
+import { getUsername, getUsernameOfRoomMember, doesRoomHaveUnread } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
 import { diffMinutes, isNotInSameDay } from '../../../util/common';
+import { openEmojiBoard, openReadReceipts } from '../../../client/action/navigation';

 import Divider from '../../atoms/divider/Divider';
 import Avatar from '../../atoms/avatar/Avatar';
 import IconButton from '../../atoms/button/IconButton';
+import ContextMenu, { MenuHeader, MenuItem, MenuBorder } from '../../atoms/context-menu/ContextMenu';
 import {
  Message,
  MessageHeader,
  MessageReply,
  MessageContent,
+  MessageEdit,
  MessageReactionGroup,
  MessageReaction,
  MessageOptions,
@@ -30,12 +33,160 @@ import ChannelIntro from '../../molecules/channel-intro/ChannelIntro';
 import TimelineChange from '../../molecules/message/TimelineChange';

 import ReplyArrowIC from '../../../../public/res/ic/outlined/reply-arrow.svg';
+import EmojiAddIC from '../../../../public/res/ic/outlined/emoji-add.svg';
+import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
+import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
+import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
 import BinIC from '../../../../public/res/ic/outlined/bin.svg';

 import { parseReply, parseTimelineChange } from './common';

 const MAX_MSG_DIFF_MINUTES = 5;

+function genPlaceholders() {
+  return (
+    <>
+      <PlaceholderMessage key="placeholder-1" />
+      <PlaceholderMessage key="placeholder-2" />
+      <PlaceholderMessage key="placeholder-3" />
+    </>
+  );
+}
+
+function isMedia(mE) {
+  return (
+    mE.getContent()?.msgtype === 'm.file'
+    || mE.getContent()?.msgtype === 'm.image'
+    || mE.getContent()?.msgtype === 'm.audio'
+    || mE.getContent()?.msgtype === 'm.video'
+    || mE.getType() === 'm.sticker'
+  );
+}
+
+function genMediaContent(mE) {
+  const mx = initMatrix.matrixClient;
+  const mContent = mE.getContent();
+  if (!mContent || !mContent.body) return <span style={{ color: 'var(--bg-danger)' }}>Malformed event</span>;
+
+  let mediaMXC = mContent?.url;
+  const isEncryptedFile = typeof mediaMXC === 'undefined';
+  if (isEncryptedFile) mediaMXC = mContent?.file?.url;
+
+  let thumbnailMXC = mContent?.info?.thumbnail_url;
+
+  if (typeof mediaMXC === 'undefined' || mediaMXC === '') return <span style={{ color: 'var(--bg-danger)' }}>Malformed event</span>;
+
+  let msgType = mE.getContent()?.msgtype;
+  if (mE.getType() === 'm.sticker') msgType = 'm.image';
+
+  switch (msgType) {
+    case 'm.file':
+      return (
+        <Media.File
+          name={mContent.body}
+          link={mx.mxcUrlToHttp(mediaMXC)}
+          type={mContent.info?.mimetype}
+          file={mContent.file || null}
+        />
+      );
+    case 'm.image':
+      return (
+        <Media.Image
+          name={mContent.body}
+          width={typeof mContent.info?.w === 'number' ? mContent.info?.w : null}
+          height={typeof mContent.info?.h === 'number' ? mContent.info?.h : null}
+          link={mx.mxcUrlToHttp(mediaMXC)}
+          file={isEncryptedFile ? mContent.file : null}
+          type={mContent.info?.mimetype}
+        />
+      );
+    case 'm.audio':
+      return (
+        <Media.Audio
+          name={mContent.body}
+          link={mx.mxcUrlToHttp(mediaMXC)}
+          type={mContent.info?.mimetype}
+          file={mContent.file || null}
+        />
+      );
+    case 'm.video':
+      if (typeof thumbnailMXC === 'undefined') {
+        thumbnailMXC = mContent.info?.thumbnail_file?.url || null;
+      }
+      return (
+        <Media.Video
+          name={mContent.body}
+          link={mx.mxcUrlToHttp(mediaMXC)}
+          thumbnail={thumbnailMXC === null ? null : mx.mxcUrlToHttp(thumbnailMXC)}
+          thumbnailFile={isEncryptedFile ? mContent.info?.thumbnail_file : null}
+          thumbnailType={mContent.info?.thumbnail_info?.mimetype || null}
+          width={typeof mContent.info?.w === 'number' ? mContent.info?.w : null}
+          height={typeof mContent.info?.h === 'number' ? mContent.info?.h : null}
+          file={isEncryptedFile ? mContent.file : null}
+          type={mContent.info?.mimetype}
+        />
+      );
+    default:
+      return <span style={{ color: 'var(--bg-danger)' }}>Malformed event</span>;
+  }
+}
+
+function genChannelIntro(mEvent, roomTimeline) {
+  const mx = initMatrix.matrixClient;
+  const roomTopic = roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;
+  const isDM = initMatrix.roomList.directs.has(roomTimeline.roomId);
+  let avatarSrc = roomTimeline.room.getAvatarUrl(mx.baseUrl, 80, 80, 'crop');
+  avatarSrc = isDM ? roomTimeline.room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 80, 80, 'crop') : avatarSrc;
+  return (
+    <ChannelIntro
+      key={mEvent ? mEvent.getId() : 'channel-intro'}
+      roomId={roomTimeline.roomId}
+      avatarSrc={avatarSrc}
+      name={roomTimeline.room.name}
+      heading={`Welcome to ${roomTimeline.room.name}`}
+      desc={`This is the beginning of ${roomTimeline.room.name} channel.${typeof roomTopic !== 'undefined' ? (` Topic: ${roomTopic}`) : ''}`}
+      time={mEvent ? `Created at ${dateFormat(mEvent.getDate(), 'dd mmmm yyyy, hh:MM TT')}` : null}
+    />
+  );
+}
+
+function getMyEmojiEventId(emojiKey, eventId, roomTimeline) {
+  const mx = initMatrix.matrixClient;
+  const rEvents = roomTimeline.reactionTimeline.get(eventId);
+  let rEventId = null;
+  rEvents?.find((rE) => {
+    if (rE.getRelation() === null) return false;
+    if (rE.getRelation().key === emojiKey && rE.getSender() === mx.getUserId()) {
+      rEventId = rE.getId();
+      return true;
+    }
+    return false;
+  });
+  return rEventId;
+}
+
+function toggleEmoji(roomId, eventId, emojiKey, roomTimeline) {
+  const myAlreadyReactEventId = getMyEmojiEventId(emojiKey, eventId, roomTimeline);
+  if (typeof myAlreadyReactEventId === 'string') {
+    if (myAlreadyReactEventId.indexOf('~') === 0) return;
+    redactEvent(roomId, myAlreadyReactEventId);
+    return;
+  }
+  sendReaction(roomId, eventId, emojiKey);
+}
+
+function pickEmoji(e, roomId, eventId, roomTimeline) {
+  const boxInfo = e.target.getBoundingClientRect();
+  openEmojiBoard({
+    x: boxInfo.x,
+    y: boxInfo.y,
+    detail: e.detail,
+  }, (emoji) => {
+    toggleEmoji(roomId, eventId, emoji.unicode, roomTimeline);
+    e.target.click();
+  });
+}
+
 let wasAtBottom = true;
 function ChannelViewContent({
  roomId, roomTimeline, timelineScroll, viewEvent,
@@ -43,6 +194,7 @@ function ChannelViewContent({
  const [isReachedTimelineEnd, setIsReachedTimelineEnd] = useState(false);
  const [onStateUpdate, updateState] = useState(null);
  const [onPagination, setOnPagination] = useState(null);
+  const [editEvent, setEditEvent] = useState(null);
  const mx = initMatrix.matrixClient;

  function autoLoadTimeline() {
@@ -120,91 +272,257 @@ function ChannelViewContent({
  }, [onStateUpdate]);

  let prevMEvent = null;
-  function renderMessage(mEvent) {
-    function isMedia(mE) {
-      return (
-        mE.getContent()?.msgtype === 'm.file'
-        || mE.getContent()?.msgtype === 'm.image'
-        || mE.getContent()?.msgtype === 'm.audio'
-        || mE.getContent()?.msgtype === 'm.video'
-      );
-    }
-    function genMediaContent(mE) {
-      const mContent = mE.getContent();
-      let mediaMXC = mContent.url;
-      let thumbnailMXC = mContent?.info?.thumbnail_url;
-      const isEncryptedFile = typeof mediaMXC === 'undefined';
-      if (isEncryptedFile) mediaMXC = mContent.file.url;
+  function genMessage(mEvent) {
+    const myPowerlevel = roomTimeline.room.getMember(mx.getUserId()).powerLevel;
+    const canIRedact = roomTimeline.room.currentState.hasSufficientPowerLevelFor('redact', myPowerlevel);

-      switch (mE.getContent()?.msgtype) {
-        case 'm.file':
-          return (
-            <Media.File
-              name={mContent.body}
-              link={mx.mxcUrlToHttp(mediaMXC)}
-              file={mContent.file}
-              type={mContent.info.mimetype}
-            />
-          );
-        case 'm.image':
-          return (
-            <Media.Image
-              name={mContent.body}
-              width={mContent.info.w || null}
-              height={mContent.info.h || null}
-              link={mx.mxcUrlToHttp(mediaMXC)}
-              file={isEncryptedFile ? mContent.file : null}
-              type={mContent.info.mimetype}
-            />
-          );
-        case 'm.audio':
-          return (
-            <Media.Audio
-              name={mContent.body}
-              link={mx.mxcUrlToHttp(mediaMXC)}
-              type={mContent.info.mimetype}
-              file={mContent.file}
-            />
-          );
-        case 'm.video':
-          if (typeof thumbnailMXC === 'undefined') {
-            thumbnailMXC = mContent.info?.thumbnail_file?.url || null;
-          }
-          return (
-            <Media.Video
-              name={mContent.body}
-              link={mx.mxcUrlToHttp(mediaMXC)}
-              thumbnail={thumbnailMXC === null ? null : mx.mxcUrlToHttp(thumbnailMXC)}
-              thumbnailFile={isEncryptedFile ? mContent.info.thumbnail_file : null}
-              thumbnailType={mContent.info.thumbnail_info?.mimetype || null}
-              width={mContent.info.w || null}
-              height={mContent.info.h || null}
-              file={isEncryptedFile ? mContent.file : null}
-              type={mContent.info.mimetype}
-            />
-          );
-        default:
-          return 'Unable to attach media file!';
+    const isContentOnly = (
+      prevMEvent !== null
+      && prevMEvent.getType() !== 'm.room.member'
+      && diffMinutes(mEvent.getDate(), prevMEvent.getDate()) <= MAX_MSG_DIFF_MINUTES
+      && prevMEvent.getSender() === mEvent.getSender()
+    );
+
+    let content = mEvent.getContent().body;
+    if (typeof content === 'undefined') return null;
+    let reply = null;
+    let reactions = null;
+    let isMarkdown = mEvent.getContent().format === 'org.matrix.custom.html';
+    const isReply = typeof mEvent.getWireContent()['m.relates_to']?.['m.in_reply_to'] !== 'undefined';
+    const isEdited = roomTimeline.editedTimeline.has(mEvent.getId());
+    const haveReactions = roomTimeline.reactionTimeline.has(mEvent.getId());
+
+    if (isReply) {
+      const parsedContent = parseReply(content);
+      if (parsedContent !== null) {
+        const c = roomTimeline.room.currentState;
+        const displayNameToUserIds = c.getUserIdsWithDisplayName(parsedContent.displayName);
+        const ID = parsedContent.userId || displayNameToUserIds[0];
+        reply = {
+          color: colorMXID(ID || parsedContent.displayName),
+          to: parsedContent.displayName || getUsername(parsedContent.userId),
+          content: parsedContent.replyContent,
+        };
+        content = parsedContent.content;
      }
    }

-    if (mEvent.getType() === 'm.room.create') {
-      const roomTopic = roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;
-      return (
-        <ChannelIntro
-          key={mEvent.getId()}
-          avatarSrc={roomTimeline.room.getAvatarUrl(initMatrix.matrixClient.baseUrl, 80, 80, 'crop')}
-          name={roomTimeline.room.name}
-          heading={`Welcome to ${roomTimeline.room.name}`}
-          desc={`This is the beginning of ${roomTimeline.room.name} channel.${typeof roomTopic !== 'undefined' ? (` Topic: ${roomTopic}`) : ''}`}
-          time={`Created at ${dateFormat(mEvent.getDate(), 'dd mmmm yyyy, hh:MM TT')}`}
-        />
-      );
+    if (isEdited) {
+      const editedList = roomTimeline.editedTimeline.get(mEvent.getId());
+      const latestEdited = editedList[editedList.length - 1];
+      if (typeof latestEdited.getContent()['m.new_content'] === 'undefined') return null;
+      const latestEditBody = latestEdited.getContent()['m.new_content'].body;
+      const parsedEditedContent = parseReply(latestEditBody);
+      isMarkdown = latestEdited.getContent()['m.new_content'].format === 'org.matrix.custom.html';
+      if (parsedEditedContent === null) {
+        content = latestEditBody;
+      } else {
+        content = parsedEditedContent.content;
+      }
    }
+
+    if (haveReactions) {
+      reactions = [];
+      roomTimeline.reactionTimeline.get(mEvent.getId()).forEach((rEvent) => {
+        if (rEvent.getRelation() === null) return;
+        function alreadyHaveThisReaction(rE) {
+          for (let i = 0; i < reactions.length; i += 1) {
+            if (reactions[i].key === rE.getRelation().key) return true;
+          }
+          return false;
+        }
+        if (alreadyHaveThisReaction(rEvent)) {
+          for (let i = 0; i < reactions.length; i += 1) {
+            if (reactions[i].key === rEvent.getRelation().key) {
+              reactions[i].users.push(rEvent.getSender());
+              if (reactions[i].isActive !== true) {
+                const myUserId = initMatrix.matrixClient.getUserId();
+                reactions[i].isActive = rEvent.getSender() === myUserId;
+                if (reactions[i].isActive) reactions[i].id = rEvent.getId();
+              }
+              break;
+            }
+          }
+        } else {
+          reactions.push({
+            id: rEvent.getId(),
+            key: rEvent.getRelation().key,
+            users: [rEvent.getSender()],
+            isActive: (rEvent.getSender() === initMatrix.matrixClient.getUserId()),
+          });
+        }
+      });
+    }
+
+    const senderMXIDColor = colorMXID(mEvent.sender.userId);
+    const userAvatar = isContentOnly ? null : (
+      <Avatar
+        imageSrc={mEvent.sender.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop')}
+        text={getUsernameOfRoomMember(mEvent.sender).slice(0, 1)}
+        bgColor={senderMXIDColor}
+        size="small"
+      />
+    );
+    const userHeader = isContentOnly ? null : (
+      <MessageHeader
+        userId={mEvent.sender.userId}
+        name={getUsernameOfRoomMember(mEvent.sender)}
+        color={senderMXIDColor}
+        time={`${dateFormat(mEvent.getDate(), 'hh:MM TT')}`}
+      />
+    );
+    const userReply = reply === null ? null : (
+      <MessageReply
+        name={reply.to}
+        color={reply.color}
+        content={reply.content}
+      />
+    );
+    const userContent = (
+      <MessageContent
+        isMarkdown={isMarkdown}
+        content={isMedia(mEvent) ? genMediaContent(mEvent) : content}
+        isEdited={isEdited}
+      />
+    );
+    const userReactions = reactions === null ? null : (
+      <MessageReactionGroup>
+        {
+          reactions.map((reaction) => (
+            <MessageReaction
+              key={reaction.id}
+              reaction={reaction.key}
+              users={reaction.users}
+              isActive={reaction.isActive}
+              onClick={() => {
+                toggleEmoji(roomId, mEvent.getId(), reaction.key, roomTimeline);
+              }}
+            />
+          ))
+        }
+        <IconButton
+          onClick={(e) => pickEmoji(e, roomId, mEvent.getId(), roomTimeline)}
+          src={EmojiAddIC}
+          size="extra-small"
+          tooltip="Add reaction"
+        />
+      </MessageReactionGroup>
+    );
+    const userOptions = (
+      <MessageOptions>
+        <IconButton
+          onClick={(e) => pickEmoji(e, roomId, mEvent.getId(), roomTimeline)}
+          src={EmojiAddIC}
+          size="extra-small"
+          tooltip="Add reaction"
+        />
+        <IconButton
+          onClick={() => {
+            viewEvent.emit('reply_to', mEvent.getSender(), mEvent.getId(), isMedia(mEvent) ? mEvent.getContent().body : content);
+          }}
+          src={ReplyArrowIC}
+          size="extra-small"
+          tooltip="Reply"
+        />
+        {(mEvent.getSender() === mx.getUserId() && !isMedia(mEvent)) && (
+          <IconButton
+            onClick={() => setEditEvent(mEvent)}
+            src={PencilIC}
+            size="extra-small"
+            tooltip="Edit"
+          />
+        )}
+        <ContextMenu
+          content={() => (
+            <>
+              <MenuHeader>Options</MenuHeader>
+              <MenuItem
+                iconSrc={EmojiAddIC}
+                onClick={(e) => pickEmoji(e, roomId, mEvent.getId(), roomTimeline)}
+              >
+                Add reaction
+              </MenuItem>
+              <MenuItem
+                iconSrc={ReplyArrowIC}
+                onClick={() => {
+                  viewEvent.emit('reply_to', mEvent.getSender(), mEvent.getId(), isMedia(mEvent) ? mEvent.getContent().body : content);
+                }}
+              >
+                Reply
+              </MenuItem>
+              {(mEvent.getSender() === mx.getUserId() && !isMedia(mEvent)) && (
+                <MenuItem iconSrc={PencilIC} onClick={() => setEditEvent(mEvent)}>Edit</MenuItem>
+              )}
+              <MenuItem
+                iconSrc={TickMarkIC}
+                onClick={() => openReadReceipts(roomId, mEvent.getId())}
+              >
+                Read receipts
+              </MenuItem>
+              {(canIRedact || mEvent.getSender() === mx.getUserId()) && (
+                <>
+                  <MenuBorder />
+                  <MenuItem
+                    variant="danger"
+                    iconSrc={BinIC}
+                    onClick={() => {
+                      if (window.confirm('Are you sure you want to delete this event')) {
+                        redactEvent(roomId, mEvent.getId());
+                      }
+                    }}
+                  >
+                    Delete
+                  </MenuItem>
+                </>
+              )}
+            </>
+          )}
+          render={(toggleMenu) => (
+            <IconButton
+              onClick={toggleMenu}
+              src={VerticalMenuIC}
+              size="extra-small"
+              tooltip="Options"
+            />
+          )}
+        />
+      </MessageOptions>
+    );
+
+    const isEditingEvent = editEvent?.getId() === mEvent.getId();
+    const myMessageEl = (
+      <Message
+        key={mEvent.getId()}
+        avatar={userAvatar}
+        header={userHeader}
+        reply={userReply}
+        content={editEvent !== null && isEditingEvent ? null : userContent}
+        editContent={editEvent !== null && isEditingEvent ? (
+          <MessageEdit
+            content={content}
+            onSave={(newBody) => {
+              if (newBody !== content) {
+                initMatrix.roomsInput.sendEditedMessage(roomId, mEvent, newBody);
+              }
+              setEditEvent(null);
+            }}
+            onCancel={() => setEditEvent(null)}
+          />
+        ) : null}
+        reactions={userReactions}
+        options={editEvent !== null && isEditingEvent ? null : userOptions}
+      />
+    );
+    return myMessageEl;
+  }
+
+  function renderMessage(mEvent) {
+    if (mEvent.getType() === 'm.room.create') return genChannelIntro(mEvent, roomTimeline);
    if (
      mEvent.getType() !== 'm.room.message'
      && mEvent.getType() !== 'm.room.encrypted'
      && mEvent.getType() !== 'm.room.member'
+      && mEvent.getType() !== 'm.sticker'
    ) return false;
    if (mEvent.getRelation()?.rel_type === 'm.replace') return false;

@@ -217,173 +535,16 @@ function ChannelViewContent({
    }

    if (mEvent.getType() !== 'm.room.member') {
-      const isContentOnly = (
-        prevMEvent !== null
-        && prevMEvent.getType() !== 'm.room.member'
-        && diffMinutes(mEvent.getDate(), prevMEvent.getDate()) <= MAX_MSG_DIFF_MINUTES
-        && prevMEvent.getSender() === mEvent.getSender()
-      );
-
-      const myPowerlevel = roomTimeline.room.getMember(mx.getUserId()).powerLevel;
-      const canIRedact = roomTimeline.room.currentState.hasSufficientPowerLevelFor('redact', myPowerlevel);
-
-      let content = mEvent.getContent().body;
-      if (typeof content === 'undefined') return null;
-      let reply = null;
-      let reactions = null;
-      let isMarkdown = mEvent.getContent().format === 'org.matrix.custom.html';
-      const isReply = typeof mEvent.getWireContent()['m.relates_to']?.['m.in_reply_to'] !== 'undefined';
-      const isEdited = roomTimeline.editedTimeline.has(mEvent.getId());
-      const haveReactions = roomTimeline.reactionTimeline.has(mEvent.getId());
-
-      if (isReply) {
-        const parsedContent = parseReply(content);
-
-        if (parsedContent !== null) {
-          const username = getUsername(parsedContent.userId);
-          reply = {
-            userId: parsedContent.userId,
-            color: colorMXID(parsedContent.userId),
-            to: username,
-            content: parsedContent.replyContent,
-          };
-          content = parsedContent.content;
-        }
-      }
-
-      if (isEdited) {
-        const editedList = roomTimeline.editedTimeline.get(mEvent.getId());
-        const latestEdited = editedList[editedList.length - 1];
-        if (typeof latestEdited.getContent()['m.new_content'] === 'undefined') return null;
-        const latestEditBody = latestEdited.getContent()['m.new_content'].body;
-        const parsedEditedContent = parseReply(latestEditBody);
-        isMarkdown = latestEdited.getContent()['m.new_content'].format === 'org.matrix.custom.html';
-        if (parsedEditedContent === null) {
-          content = latestEditBody;
-        } else {
-          content = parsedEditedContent.content;
-        }
-      }
-
-      if (haveReactions) {
-        reactions = [];
-        roomTimeline.reactionTimeline.get(mEvent.getId()).forEach((rEvent) => {
-          if (rEvent.getRelation() === null) return;
-          function alreadyHaveThisReaction(rE) {
-            for (let i = 0; i < reactions.length; i += 1) {
-              if (reactions[i].key === rE.getRelation().key) return true;
-            }
-            return false;
-          }
-          if (alreadyHaveThisReaction(rEvent)) {
-            for (let i = 0; i < reactions.length; i += 1) {
-              if (reactions[i].key === rEvent.getRelation().key) {
-                reactions[i].users.push(rEvent.getSender());
-                if (reactions[i].isActive !== true) {
-                  const myUserId = initMatrix.matrixClient.getUserId();
-                  reactions[i].isActive = rEvent.getSender() === myUserId;
-                }
-                break;
-              }
-            }
-          } else {
-            reactions.push({
-              id: rEvent.getId(),
-              key: rEvent.getRelation().key,
-              users: [rEvent.getSender()],
-              isActive: (rEvent.getSender() === initMatrix.matrixClient.getUserId()),
-            });
-          }
-        });
-      }
-
-      const senderMXIDColor = colorMXID(mEvent.sender.userId);
-      const userAvatar = isContentOnly ? null : (
-        <Avatar
-          imageSrc={mEvent.sender.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop')}
-          text={getUsername(mEvent.sender.userId).slice(0, 1)}
-          bgColor={senderMXIDColor}
-          size="small"
-        />
-      );
-      const userHeader = isContentOnly ? null : (
-        <MessageHeader
-          userId={mEvent.sender.userId}
-          name={getUsername(mEvent.sender.userId)}
-          color={senderMXIDColor}
-          time={`${dateFormat(mEvent.getDate(), 'hh:MM TT')}`}
-        />
-      );
-      const userReply = reply === null ? null : (
-        <MessageReply
-          userId={reply.userId}
-          name={reply.to}
-          color={reply.color}
-          content={reply.content}
-        />
-      );
-      const userContent = (
-        <MessageContent
-          isMarkdown={isMarkdown}
-          content={isMedia(mEvent) ? genMediaContent(mEvent) : content}
-          isEdited={isEdited}
-        />
-      );
-      const userReactions = reactions === null ? null : (
-        <MessageReactionGroup>
-          {
-            reactions.map((reaction) => (
-              <MessageReaction
-                key={reaction.id}
-                reaction={reaction.key}
-                users={reaction.users}
-                isActive={reaction.isActive}
-                onClick={() => alert('Sending reactions is yet to be implemented.')}
-              />
-            ))
-          }
-        </MessageReactionGroup>
-      );
-      const userOptions = (
-        <MessageOptions>
-          <IconButton
-            onClick={() => {
-              viewEvent.emit('reply_to', mEvent.getSender(), mEvent.getId(), isMedia(mEvent) ? mEvent.getContent().body : content);
-            }}
-            src={ReplyArrowIC}
-            size="extra-small"
-            tooltip="Reply"
-          />
-          {(canIRedact || mEvent.getSender() === mx.getUserId()) && (
-            <IconButton
-              onClick={() => {
-                if (window.confirm('Are you sure you want to delete this event')) {
-                  redact(roomId, mEvent.getId());
-                }
-              }}
-              src={BinIC}
-              size="extra-small"
-              tooltip="Delete"
-            />
-          )}
-        </MessageOptions>
-      );
-
-      const myMessageEl = (
-        <Message
-          key={mEvent.getId()}
-          avatar={userAvatar}
-          header={userHeader}
-          reply={userReply}
-          content={userContent}
-          reactions={userReactions}
-          options={userOptions}
-        />
-      );
-
+      const messageComp = genMessage(mEvent);
      prevMEvent = mEvent;
-      return myMessageEl;
+      return (
+        <React.Fragment key={`box-${mEvent.getId()}`}>
+          {divider}
+          {messageComp}
+        </React.Fragment>
+      );
    }
+
    prevMEvent = mEvent;
    const timelineChange = parseTimelineChange(mEvent);
    if (timelineChange === null) return null;
@@ -400,30 +561,11 @@ function ChannelViewContent({
    );
  }

-  const roomTopic = roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;
  return (
    <div className="channel-view__content">
      <div className="timeline__wrapper">
-        {
-          roomTimeline.timeline[0].getType() !== 'm.room.create' && !isReachedTimelineEnd && (
-            <>
-              <PlaceholderMessage key={Math.random().toString(20).substr(2, 6)} />
-              <PlaceholderMessage key={Math.random().toString(20).substr(2, 6)} />
-              <PlaceholderMessage key={Math.random().toString(20).substr(2, 6)} />
-            </>
-          )
-        }
-        {
-          roomTimeline.timeline[0].getType() !== 'm.room.create' && isReachedTimelineEnd && (
-            <ChannelIntro
-              key={Math.random().toString(20).substr(2, 6)}
-              avatarSrc={roomTimeline.room.getAvatarUrl(initMatrix.matrixClient.baseUrl, 80, 80, 'crop')}
-              name={roomTimeline.room.name}
-              heading={`Welcome to ${roomTimeline.room.name}`}
-              desc={`This is the beginning of ${roomTimeline.room.name} channel.${typeof roomTopic !== 'undefined' ? (` Topic: ${roomTopic}`) : ''}`}
-            />
-          )
-        }
+        { roomTimeline.timeline[0].getType() !== 'm.room.create' && !isReachedTimelineEnd && genPlaceholders() }
+        { roomTimeline.timeline[0].getType() !== 'm.room.create' && isReachedTimelineEnd && genChannelIntro(undefined, roomTimeline)}
        { roomTimeline.timeline.map(renderMessage) }
      </div>
    </div>
@@ -432,14 +574,7 @@ function ChannelViewContent({
 ChannelViewContent.propTypes = {
  roomId: PropTypes.string.isRequired,
  roomTimeline: PropTypes.shape({}).isRequired,
-  timelineScroll: PropTypes.shape({
-    reachBottom: PropTypes.func,
-    autoReachBottom: PropTypes.func,
-    tryRestoringScroll: PropTypes.func,
-    enableSmoothScroll: PropTypes.func,
-    disableSmoothScroll: PropTypes.func,
-    isScrollable: PropTypes.func,
-  }).isRequired,
+  timelineScroll: PropTypes.shape({}).isRequired,
  viewEvent: PropTypes.shape({}).isRequired,
 };

--- a/src/app/organisms/channel/ChannelViewFloating.jsx
+++ b/src/app/organisms/channel/ChannelViewFloating.jsx
@@ -30,7 +30,7 @@ function ChannelViewFloating({
  function getTypingMessage(members) {
    const userIds = members;
    userIds.delete(mx.getUserId());
-    return getUsersActionJsx([...userIds], 'typing...');
+    return getUsersActionJsx(roomId, [...userIds], 'typing...');
  }

  function updateTyping(members) {
--- a/src/app/organisms/channel/ChannelViewHeader.jsx
+++ b/src/app/organisms/channel/ChannelViewHeader.jsx
@@ -19,13 +19,15 @@ import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';

 function ChannelViewHeader({ roomId }) {
  const mx = initMatrix.matrixClient;
-  const avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
+  const isDM = initMatrix.roomList.directs.has(roomId);
+  let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
+  avatarSrc = isDM ? mx.getRoom(roomId).getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc;
  const roomName = mx.getRoom(roomId).name;
  const roomTopic = mx.getRoom(roomId).currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;

  return (
    <Header>
-      <Avatar imageSrc={avatarSrc} text={roomName.slice(0, 1)} bgColor={colorMXID(roomName)} size="small" />
+      <Avatar imageSrc={avatarSrc} text={roomName.slice(0, 1)} bgColor={colorMXID(roomId)} size="small" />
      <TitleWrapper>
        <Text variant="h2">{roomName}</Text>
        { typeof roomTopic !== 'undefined' && <p title={roomTopic} className="text text-b3">{roomTopic}</p>}
--- a/src/app/organisms/channel/ChannelViewInput.jsx
+++ b/src/app/organisms/channel/ChannelViewInput.jsx
@@ -8,6 +8,7 @@ import TextareaAutosize from 'react-autosize-textarea';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import settings from '../../../client/state/settings';
+import { openEmojiBoard } from '../../../client/action/navigation';
 import { bytesToSize } from '../../../util/common';
 import { getUsername } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
@@ -15,10 +16,8 @@ import colorMXID from '../../../util/colorMXID';
 import Text from '../../atoms/text/Text';
 import RawIcon from '../../atoms/system-icons/RawIcon';
 import IconButton from '../../atoms/button/IconButton';
-import ContextMenu from '../../atoms/context-menu/ContextMenu';
 import ScrollView from '../../atoms/scroll/ScrollView';
 import { MessageReply } from '../../molecules/message/Message';
-import EmojiBoard from '../emoji-board/EmojiBoard';

 import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
 import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
@@ -30,7 +29,7 @@ import MarkdownIC from '../../../../public/res/ic/outlined/markdown.svg';
 import FileIC from '../../../../public/res/ic/outlined/file.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';

-const CMD_REGEX = /(\/|>[#*@]|:)(\S*)$/;
+const CMD_REGEX = /(\/|>[#*@]|:|@)(\S*)$/;
 let isTyping = false;
 let isCmdActivated = false;
 let cmdCursorPos = null;
@@ -46,15 +45,23 @@ function ChannelViewInput({
  const uploadInputRef = useRef(null);
  const uploadProgressRef = useRef(null);
  const rightOptionsRef = useRef(null);
+  const escBtnRef = useRef(null);

  const TYPING_TIMEOUT = 5000;
  const mx = initMatrix.matrixClient;
  const { roomsInput } = initMatrix;

+  function requestFocusInput() {
+    if (textAreaRef === null) return;
+    textAreaRef.current.focus();
+  }
+
  useEffect(() => {
    settings.on(cons.events.settings.MARKDOWN_TOGGLED, setIsMarkdown);
+    viewEvent.on('focus_msg_input', requestFocusInput);
    return () => {
      settings.removeListener(cons.events.settings.MARKDOWN_TOGGLED, setIsMarkdown);
+      viewEvent.removeListener('focus_msg_input', requestFocusInput);
    };
  }, []);

@@ -91,20 +98,32 @@ function ChannelViewInput({

  function activateCmd(prefix) {
    isCmdActivated = true;
-    inputBaseRef.current.style.boxShadow = '0 0 0 1px var(--bg-positive)';
+    requestAnimationFrame(() => {
+      inputBaseRef.current.style.boxShadow = '0 0 0 1px var(--bg-positive)';
+      escBtnRef.current.style.display = 'block';
+    });
    rightOptionsA11Y(false);
    viewEvent.emit('cmd_activate', prefix);
  }
  function deactivateCmd() {
    if (inputBaseRef.current !== null) {
-      inputBaseRef.current.style.boxShadow = 'var(--bs-surface-border)';
+      requestAnimationFrame(() => {
+        inputBaseRef.current.style.boxShadow = 'var(--bs-surface-border)';
+        escBtnRef.current.style.display = 'none';
+      });
      rightOptionsA11Y(true);
    }
    isCmdActivated = false;
    cmdCursorPos = null;
  }
+  function deactivateCmdAndEmit() {
+    deactivateCmd();
+    viewEvent.emit('cmd_deactivate');
+  }
  function errorCmd() {
-    inputBaseRef.current.style.boxShadow = '0 0 0 1px var(--bg-danger)';
+    requestAnimationFrame(() => {
+      inputBaseRef.current.style.boxShadow = '0 0 0 1px var(--bg-danger)';
+    });
  }
  function setCursorPosition(pos) {
    setTimeout(() => {
@@ -128,9 +147,15 @@ function ChannelViewInput({
    deactivateCmd();
  }

+  function focusInput() {
+    if (settings.isTouchScreenDevice) return;
+    textAreaRef.current.focus();
+  }
+
  function setUpReply(userId, eventId, content) {
    setReplyTo({ userId, eventId, content });
    roomsInput.setReplyTo(roomId, { userId, eventId, content });
+    focusInput();
  }

  useEffect(() => {
@@ -142,7 +167,7 @@ function ChannelViewInput({
    viewEvent.on('reply_to', setUpReply);
    if (textAreaRef?.current !== null) {
      isTyping = false;
-      textAreaRef.current.focus();
+      focusInput();
      textAreaRef.current.value = roomsInput.getMessage(roomId);
      setAttachment(roomsInput.getAttachment(roomId));
      setReplyTo(roomsInput.getReplyTo(roomId));
@@ -168,11 +193,6 @@ function ChannelViewInput({
  }, [roomId]);

  async function sendMessage() {
-    if (isCmdActivated) {
-      viewEvent.emit('cmd_exe');
-      return;
-    }
-
    const msgBody = textAreaRef.current.value;
    if (roomsInput.isSending(roomId)) return;
    if (msgBody.trim() === '' && attachment === null) return;
@@ -187,7 +207,7 @@ function ChannelViewInput({
    await roomsInput.sendInput(roomId);
    textAreaRef.current.disabled = false;
    textAreaRef.current.style.cursor = 'unset';
-    textAreaRef.current.focus();
+    focusInput();

    textAreaRef.current.value = roomsInput.getMessage(roomId);
    timelineScroll.reachBottom();
@@ -218,10 +238,7 @@ function ChannelViewInput({

    const cmdParts = targetInput.match(CMD_REGEX);
    if (cmdParts === null) {
-      if (isCmdActivated) {
-        deactivateCmd();
-        viewEvent.emit('cmd_deactivate');
-      }
+      if (isCmdActivated) deactivateCmdAndEmit();
      return;
    }
    const cmdPrefix = cmdParts[1];
@@ -231,8 +248,7 @@ function ChannelViewInput({
      // skip emoji autofill command if link is suspected.
      const checkForLink = targetInput.slice(0, cmdParts.index);
      if (checkForLink.match(/(http|https|mailto|matrix|ircs|irc)$/)) {
-        deactivateCmd();
-        viewEvent.emit('cmd_deactivate');
+        deactivateCmdAndEmit();
        return;
      }
    }
@@ -243,7 +259,9 @@ function ChannelViewInput({
      return;
    }
    if (!isCmdActivated) activateCmd(cmdPrefix);
-    inputBaseRef.current.style.boxShadow = '0 0 0 1px var(--bg-caution)';
+    requestAnimationFrame(() => {
+      inputBaseRef.current.style.boxShadow = '0 0 0 1px var(--bg-caution)';
+    });
    viewEvent.emit('cmd_process', cmdPrefix, cmdSlug);
  }

@@ -256,7 +274,14 @@ function ChannelViewInput({
  function handleKeyDown(e) {
    if (e.keyCode === 13 && e.shiftKey === false) {
      e.preventDefault();
-      sendMessage();
+
+      if (isCmdActivated) {
+        viewEvent.emit('cmd_exe');
+      } else sendMessage();
+    }
+    if (e.keyCode === 27 && isCmdActivated) {
+      deactivateCmdAndEmit();
+      e.preventDefault();
    }
  }

@@ -297,14 +322,20 @@ function ChannelViewInput({
            </Text>
          </ScrollView>
          {isMarkdown && <RawIcon size="extra-small" src={MarkdownIC} />}
+          <button ref={escBtnRef} tabIndex="-1" onClick={deactivateCmdAndEmit} className="btn-cmd-esc" type="button"><Text variant="b3">ESC</Text></button>
        </div>
        <div ref={rightOptionsRef} className="channel-input__option-container">
-          <ContextMenu
-            placement="top"
-            content={(
-              <EmojiBoard onSelect={addEmoji} />
-            )}
-            render={(toggleMenu) => <IconButton onClick={toggleMenu} tooltip="Emoji" src={EmojiIC} />}
+          <IconButton
+            onClick={(e) => {
+              const boxInfo = e.target.getBoundingClientRect();
+              openEmojiBoard({
+                x: boxInfo.x + (document.dir === 'rtl' ? -80 : 80),
+                y: boxInfo.y - 250,
+                detail: e.detail,
+              }, addEmoji);
+            }}
+            tooltip="Emoji"
+            src={EmojiIC}
          />
          <IconButton onClick={sendMessage} tooltip="Send" src={SendIC} />
        </div>
--- a/src/app/organisms/channel/ChannelViewInput.scss
+++ b/src/app/organisms/channel/ChannelViewInput.scss
@@ -25,6 +25,18 @@
      transform: scale(0.8);
      margin: 0 var(--sp-extra-tight);
    }
+
+    & .btn-cmd-esc {
+      display: none;
+      margin: 0 var(--sp-extra-tight);
+      padding: var(--sp-ultra-tight) var(--sp-extra-tight);
+      background-color: var(--bg-surface);
+      border-radius: calc(var(--bo-radius) / 2);
+      box-shadow: var(--bs-surface-border);
+      cursor: pointer;
+      & .text { color: var(--tc-surface-normal); }
+    }
+ 
    & .scrollbar {
      max-height: 50vh;
      flex: 1;
--- a/src/app/organisms/channel/PeopleDrawer.jsx
+++ b/src/app/organisms/channel/PeopleDrawer.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import './PeopleDrawer.scss';

 import initMatrix from '../../../client/initMatrix';
-import { getUsername } from '../../../util/matrixUtil';
+import { getUsernameOfRoomMember } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
 import { openInviteUser } from '../../../client/action/navigation';

@@ -105,7 +105,7 @@ function PeopleDrawer({ roomId }) {
                    key={member.userId}
                    onClick={() => alert('Viewing profile is yet to be implemented')}
                    avatarSrc={member.getAvatarUrl(initMatrix.matrixClient.baseUrl, 24, 24, 'crop')}
-                    name={getUsername(member.userId)}
+                    name={getUsernameOfRoomMember(member)}
                    color={colorMXID(member.userId)}
                    peopleRole={getPowerLabel(member.powerLevel)}
                  />
--- a/src/app/organisms/channel/common.jsx
+++ b/src/app/organisms/channel/common.jsx
@@ -1,6 +1,7 @@
 import React from 'react';

-import { getUsername } from '../../../util/matrixUtil';
+import initMatrix from '../../../client/initMatrix';
+import { getUsername, getUsernameOfRoomMember } from '../../../util/matrixUtil';

 function getTimelineJSXMessages() {
  return {
@@ -12,11 +13,13 @@ function getTimelineJSXMessages() {
        </>
      );
    },
-    leave(user) {
+    leave(user, reason) {
+      const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : '';
      return (
        <>
          <b>{user}</b>
          {' left the channel'}
+          {reasonMsg}
        </>
      );
    },
@@ -48,7 +51,7 @@ function getTimelineJSXMessages() {
      );
    },
    kick(actor, user, reason) {
-      const reasonMsg = (typeof reason === 'string') ? ` for ${reason}` : '';
+      const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : '';
      return (
        <>
          <b>{actor}</b>
@@ -59,7 +62,7 @@ function getTimelineJSXMessages() {
      );
    },
    ban(actor, user, reason) {
-      const reasonMsg = (typeof reason === 'string') ? ` for ${reason}` : '';
+      const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : '';
      return (
        <>
          <b>{actor}</b>
@@ -132,8 +135,13 @@ function getTimelineJSXMessages() {
  };
 }

-function getUsersActionJsx(userIds, actionStr) {
-  const getUserJSX = (username) => <b>{getUsername(username)}</b>;
+function getUsersActionJsx(roomId, userIds, actionStr) {
+  const room = initMatrix.matrixClient.getRoom(roomId);
+  const getUserDisplayName = (userId) => {
+    if (room?.getMember(userId)) return getUsernameOfRoomMember(room.getMember(userId));
+    return getUsername(userId);
+  };
+  const getUserJSX = (userId) => <b>{getUserDisplayName(userId)}</b>;
  if (!Array.isArray(userIds)) return 'Idle';
  if (userIds.length === 0) return 'Idle';
  const MAX_VISIBLE_COUNT = 3;
@@ -159,17 +167,20 @@ function getUsersActionJsx(userIds, actionStr) {

 function parseReply(rawContent) {
  if (rawContent.indexOf('>') !== 0) return null;
-  let content = rawContent.slice(rawContent.indexOf('@'));
-  const userId = content.slice(0, content.indexOf('>'));
+  let content = rawContent.slice(rawContent.indexOf('<') + 1);
+  const user = content.slice(0, content.indexOf('>'));

  content = content.slice(content.indexOf('>') + 2);
  const replyContent = content.slice(0, content.indexOf('\n\n'));
  content = content.slice(content.indexOf('\n\n') + 2);

-  if (userId === '') return null;
+  if (user === '') return null;
+
+  const isUserId = user.match(/^@.+:.+/);

  return {
-    userId,
+    userId: isUserId ? user : null,
+    displayName: isUserId ? null : user,
    replyContent,
    content,
  };
@@ -209,7 +220,7 @@ function parseTimelineChange(mEvent) {
      if (sender === mEvent.getStateKey()) {
        switch (prevContent.membership) {
          case 'invite': return makeReturnObj('invite-cancel', tJSXMsgs.rejectInvite(senderName));
-          default: return makeReturnObj('leave', tJSXMsgs.leave(senderName));
+          default: return makeReturnObj('leave', tJSXMsgs.leave(senderName, content.reason));
        }
      }
      switch (prevContent.membership) {
--- a/src/app/organisms/emoji-board/EmojiBoard.jsx
+++ b/src/app/organisms/emoji-board/EmojiBoard.jsx
@@ -4,11 +4,10 @@ import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './EmojiBoard.scss';

-import EventEmitter from 'events';
-
 import parse from 'html-react-parser';
 import twemoji from 'twemoji';
-import { emojiGroups, searchEmoji } from './emoji';
+import { emojiGroups, emojis } from './emoji';
+import AsyncSearch from '../../../util/AsyncSearch';

 import Text from '../../atoms/text/Text';
 import RawIcon from '../../atoms/system-icons/RawIcon';
@@ -26,20 +25,18 @@ import BulbIC from '../../../../public/res/ic/outlined/bulb.svg';
 import PeaceIC from '../../../../public/res/ic/outlined/peace.svg';
 import FlagIC from '../../../../public/res/ic/outlined/flag.svg';

-const viewEvent = new EventEmitter();
-
-function EmojiGroup({ name, emojis }) {
+function EmojiGroup({ name, groupEmojis }) {
  function getEmojiBoard() {
+    const emojiBoard = [];
    const ROW_EMOJIS_COUNT = 7;
-    const emojiRows = [];
-    const totalEmojis = emojis.length;
+    const totalEmojis = groupEmojis.length;

    for (let r = 0; r < totalEmojis; r += ROW_EMOJIS_COUNT) {
      const emojiRow = [];
      for (let c = r; c < r + ROW_EMOJIS_COUNT; c += 1) {
-        const emojiIndex = r + c;
+        const emojiIndex = c;
        if (emojiIndex >= totalEmojis) break;
-        const emoji = emojis[emojiIndex];
+        const emoji = groupEmojis[emojiIndex];
        emojiRow.push(
          <span key={emojiIndex}>
            {
@@ -49,6 +46,7 @@ function EmojiGroup({ name, emojis }) {
                  attributes: () => ({
                    unicode: emoji.unicode,
                    shortcodes: emoji.shortcodes?.toString(),
+                    hexcode: emoji.hexcode,
                  }),
                },
              ))
@@ -56,23 +54,24 @@ function EmojiGroup({ name, emojis }) {
          </span>,
        );
      }
-      emojiRows.push(<div key={r} className="emoji-row">{emojiRow}</div>);
+      emojiBoard.push(<div key={r} className="emoji-row">{emojiRow}</div>);
    }
-    return emojiRows;
+    return emojiBoard;
  }

  return (
    <div className="emoji-group">
      <Text className="emoji-group__header" variant="b2">{name}</Text>
-      <div className="emoji-set">{getEmojiBoard()}</div>
+      {groupEmojis.length !== 0 && <div className="emoji-set">{getEmojiBoard()}</div>}
    </div>
  );
 }
 EmojiGroup.propTypes = {
  name: PropTypes.string.isRequired,
-  emojis: PropTypes.arrayOf(PropTypes.shape({
+  groupEmojis: PropTypes.arrayOf(PropTypes.shape({
    length: PropTypes.number,
    unicode: PropTypes.string,
+    hexcode: PropTypes.string,
    shortcodes: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.arrayOf(PropTypes.string),
@@ -80,40 +79,47 @@ EmojiGroup.propTypes = {
  })).isRequired,
 };

+const asyncSearch = new AsyncSearch();
+asyncSearch.setup(emojis, { keys: ['shortcode'], limit: 30 });
 function SearchedEmoji() {
-  const [searchedEmojis, setSearchedEmojis] = useState([]);
+  const [searchedEmojis, setSearchedEmojis] = useState(null);

-  function handleSearchEmoji(term) {
-    if (term.trim() === '') {
-      setSearchedEmojis([]);
+  function handleSearchEmoji(resultEmojis, term) {
+    if (term === '' || resultEmojis.length === 0) {
+      if (term === '') setSearchedEmojis(null);
+      else setSearchedEmojis([]);
      return;
    }
-    setSearchedEmojis(searchEmoji(term).map((finding) => finding.item));
+    setSearchedEmojis(resultEmojis);
  }

  useEffect(() => {
-    viewEvent.on('search-emoji', handleSearchEmoji);
+    asyncSearch.on(asyncSearch.RESULT_SENT, handleSearchEmoji);
    return () => {
-      viewEvent.removeListener('search-emoji', handleSearchEmoji);
+      asyncSearch.removeListener(asyncSearch.RESULT_SENT, handleSearchEmoji);
    };
  }, []);

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

 function EmojiBoard({ onSelect }) {
  const searchRef = useRef(null);
  const scrollEmojisRef = useRef(null);
+  const emojiInfo = useRef(null);

  function isTargetNotEmoji(target) {
    return target.classList.contains('emoji') === false;
  }
  function getEmojiDataFromTarget(target) {
    const unicode = target.getAttribute('unicode');
+    const hexcode = target.getAttribute('hexcode');
    let shortcodes = target.getAttribute('shortcodes');
    if (typeof shortcodes === 'undefined') shortcodes = undefined;
    else shortcodes = shortcodes.split(',');
-    return { unicode, shortcodes };
+    return { unicode, hexcode, shortcodes };
  }

  function selectEmoji(e) {
@@ -123,27 +129,35 @@ function EmojiBoard({ onSelect }) {
    onSelect(getEmojiDataFromTarget(emoji));
  }

+  function setEmojiInfo(emoji) {
+    const infoEmoji = emojiInfo.current.firstElementChild.firstElementChild;
+    const infoShortcode = emojiInfo.current.lastElementChild;
+
+    const emojiSrc = infoEmoji.src;
+    infoEmoji.src = `${emojiSrc.slice(0, emojiSrc.lastIndexOf('/') + 1)}${emoji.hexcode.toLowerCase()}.png`;
+    infoShortcode.textContent = `:${emoji.shortcode}:`;
+  }
+
  function hoverEmoji(e) {
    if (isTargetNotEmoji(e.target)) return;

    const emoji = e.target;
-    const { shortcodes } = getEmojiDataFromTarget(emoji);
+    const { shortcodes, hexcode } = getEmojiDataFromTarget(emoji);

    if (typeof shortcodes === 'undefined') {
      searchRef.current.placeholder = 'Search';
+      setEmojiInfo({ hexcode: '1f643', shortcode: 'slight_smile' });
      return;
    }
    if (searchRef.current.placeholder === shortcodes[0]) return;
-    searchRef.current.setAttribute('placeholder', `:${shortcodes[0]}:`);
+    searchRef.current.setAttribute('placeholder', shortcodes[0]);
+    setEmojiInfo({ hexcode, shortcode: shortcodes[0] });
  }

  function handleSearchChange(e) {
    const term = e.target.value;
-    setTimeout(() => {
-      if (e.target.value !== term) return;
-      viewEvent.emit('search-emoji', term);
-      scrollEmojisRef.current.scrollTop = 0;
-    }, 500);
+    asyncSearch.search(term);
+    scrollEmojisRef.current.scrollTop = 0;
  }

  function openGroup(groupOrder) {
@@ -157,21 +171,25 @@ function EmojiBoard({ onSelect }) {
  return (
    <div id="emoji-board" className="emoji-board">
      <div className="emoji-board__content">
-        <div className="emoji-board__emojis">
+        <div className="emoji-board__content__search">
+          <RawIcon size="small" src={SearchIC} />
+          <Input onChange={handleSearchChange} forwardRef={searchRef} placeholder="Search" />
+        </div>
+        <div className="emoji-board__content__emojis">
          <ScrollView ref={scrollEmojisRef} autoHide>
            <div onMouseMove={hoverEmoji} onClick={selectEmoji}>
              <SearchedEmoji />
              {
                emojiGroups.map((group) => (
-                  <EmojiGroup key={group.name} name={group.name} emojis={group.emojis} />
+                  <EmojiGroup key={group.name} name={group.name} groupEmojis={group.emojis} />
                ))
              }
            </div>
          </ScrollView>
        </div>
-        <div className="emoji-board__search">
-          <RawIcon size="small" src={SearchIC} />
-          <Input onChange={handleSearchChange} forwardRef={searchRef} placeholder="Search" />
+        <div ref={emojiInfo} className="emoji-board__content__info">
+          <div>{ parse(twemoji.parse('🙂')) }</div>
+          <Text>:slight_smile:</Text>
        </div>
      </div>
      <div className="emoji-board__nav">
--- a/src/app/organisms/emoji-board/EmojiBoard.scss
+++ b/src/app/organisms/emoji-board/EmojiBoard.scss
@@ -10,14 +10,15 @@

 .emoji-board {
  display: flex;
-
  &__content {
    @extend .emoji-board-flexItem;
    @extend .emoji-board-flexBoxV;
-    height: 360px;
+    height: 400px;
+    width: 286px;
  }
  &__nav {
    @extend .emoji-board-flexBoxV;
+    justify-content: center;

    padding: 4px 6px;
    background-color: var(--bg-surface-low);
@@ -29,30 +30,62 @@

    & > .ic-btn-surface {
      margin: calc(var(--sp-ultra-tight) / 2) 0;
+      opacity: 0.8;
    }
  }
 }

-
-.emoji-board__emojis {
-  @extend .emoji-board-flexItem;
-}
-.emoji-board__search {
-  display: flex;
-  align-items: center;
-  padding: calc(var(--sp-ultra-tight) / 2) var(--sp-normal);
+.emoji-board__content__search {
+  padding: var(--sp-extra-tight);
+  position: relative;
  
+  & .ic-raw {
+    position: absolute;
+    left: var(--sp-normal);
+    top: var(--sp-normal);
+    transform: translateY(1px);
+    [dir=rtl] & {
+      left: unset;
+      right: var(--sp-normal);
+    }
+  }
+
  & .input-container {
-    @extend .emoji-board-flexItem;
    & .input {
      min-width: 100%;
      width: 0;
-      background-color: transparent;
-      border: none !important;
-      box-shadow: none !important;
+      padding: var(--sp-extra-tight) 36px;
+      border-radius: calc(var(--bo-radius) / 2);
    }
  }
 }
+.emoji-board__content__emojis {
+  @extend .emoji-board-flexItem;
+  @extend .emoji-board-flexBoxV;
+}
+.emoji-board__content__info {
+  margin: 0 var(--sp-extra-tight);
+  padding: var(--sp-tight) var(--sp-extra-tight);
+  border-top: 1px solid var(--bg-surface-border);
+
+  display: flex;
+  align-items: center;
+
+  & > div:first-child {
+    line-height: 0;
+    .emoji {
+      width: 32px;
+      height: 32px;
+    }
+  }
+  & > p:last-child {
+    @extend .emoji-board-flexItem;
+    margin: 0 var(--sp-tight);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}

 .emoji-group {
  --emoji-padding: 6px;
@@ -65,12 +98,19 @@
    z-index: 99;
    background-color: var(--bg-surface);

-    padding: var(--sp-tight) var(--sp-normal);
+    margin-left: var(--sp-extra-tight);
+    padding: var(--sp-extra-tight) var(--sp-ultra-tight);
    text-transform: uppercase;
    font-weight: 600;
+    box-shadow: 0 -4px 0 0 var(--bg-surface);
+    border-bottom: 1px solid var(--bg-surface-border);
+    [dir=rtl] & {
+      margin-left: 0;
+      margin-right: var(--sp-extra-tight);
+    }
  }
  & .emoji-set {
-    margin: 0 calc(var(--sp-normal) - var(--emoji-padding));
+    margin: var(--sp-extra-tight) calc(var(--sp-normal) - var(--emoji-padding));
    margin-right: calc(var(--sp-extra-tight) - var(--emoji-padding));
    [dir=rtl] & {
      margin-right: calc(var(--sp-normal) - var(--emoji-padding));
@@ -79,6 +119,7 @@
  }
  & .emoji {
    width: 38px;
+    height: 38px;
    padding: var(--emoji-padding);
    cursor: pointer;
    &:hover {
--- a/src/app/organisms/emoji-board/EmojiBoardOpener.jsx
+++ b/src/app/organisms/emoji-board/EmojiBoardOpener.jsx
@@ -0,0 +1,74 @@
+import React, { useEffect, useRef } from 'react';
+
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+
+import ContextMenu from '../../atoms/context-menu/ContextMenu';
+import EmojiBoard from './EmojiBoard';
+
+let requestCallback = null;
+let isEmojiBoardVisible = false;
+function EmojiBoardOpener() {
+  const openerRef = useRef(null);
+
+  function openEmojiBoard(cords, requestEmojiCallback) {
+    if (requestCallback !== null || isEmojiBoardVisible) {
+      requestCallback = null;
+      if (cords.detail === 0) openerRef.current.click();
+      return;
+    }
+
+    openerRef.current.style.transform = `translate(${cords.x}px, ${cords.y}px)`;
+    requestCallback = requestEmojiCallback;
+    openerRef.current.click();
+  }
+
+  function afterEmojiBoardToggle(isVisible) {
+    isEmojiBoardVisible = isVisible;
+    if (!isVisible) {
+      setTimeout(() => {
+        if (!isEmojiBoardVisible) requestCallback = null;
+      }, 500);
+    }
+  }
+
+  function addEmoji(emoji) {
+    requestCallback(emoji);
+  }
+
+  useEffect(() => {
+    navigation.on(cons.events.navigation.EMOJIBOARD_OPENED, openEmojiBoard);
+    return () => {
+      navigation.removeListener(cons.events.navigation.EMOJIBOARD_OPENED, openEmojiBoard);
+    };
+  }, []);
+
+  return (
+    <ContextMenu
+      content={(
+        <EmojiBoard onSelect={addEmoji} />
+      )}
+      afterToggle={afterEmojiBoardToggle}
+      render={(toggleMenu) => (
+        <input
+          ref={openerRef}
+          onClick={toggleMenu}
+          type="button"
+          style={{
+            width: '32px',
+            height: '32px',
+            backgroundColor: 'transparent',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            padding: 0,
+            border: 'none',
+            visibility: 'hidden',
+          }}
+        />
+      )}
+    />
+  );
+}
+
+export default EmojiBoardOpener;
--- a/src/app/organisms/emoji-board/emoji.js
+++ b/src/app/organisms/emoji-board/emoji.js
@@ -1,6 +1,5 @@
 import emojisData from 'emojibase-data/en/compact.json';
 import shortcodes from 'emojibase-data/en/shortcodes/joypixels.json';
-import Fuse from 'fuse.js';

 const emojiGroups = [{
  name: 'Smileys & people',
@@ -47,30 +46,22 @@ function addToGroup(emoji) {
  else if (emoji.group === 6) addEmoji(emoji, 3);
  else if (emoji.group === 5) addEmoji(emoji, 4);
  else if (emoji.group === 7) addEmoji(emoji, 5);
-  else if (emoji.group === 8) addEmoji(emoji, 6);
+  else if (emoji.group === 8 || typeof emoji.group === 'undefined') addEmoji(emoji, 6);
  else if (emoji.group === 9) addEmoji(emoji, 7);
 }

 const emojis = [];
 emojisData.forEach((emoji) => {
-  const em = { ...emoji, shortcodes: shortcodes[emoji.hexcode] };
+  const myShortCodes = shortcodes[emoji.hexcode];
+  const em = {
+    ...emoji,
+    shortcode: Array.isArray(myShortCodes) ? myShortCodes[0] : myShortCodes,
+    shortcodes: myShortCodes,
+  };
  addToGroup(em);
  emojis.push(em);
 });

-function searchEmoji(term) {
-  const options = {
-    includeScore: true,
-    keys: ['shortcodes', 'annotation', 'tags'],
-    threshold: '0.3',
-  };
-  const fuse = new Fuse(emojis, options);
-
-  let result = fuse.search(term);
-  if (result.length > 20) result = result.slice(0, 20);
-  return result;
-}
-
 export {
-  emojis, emojiGroups, searchEmoji,
+  emojis, emojiGroups,
 };
--- a/src/app/organisms/invite-user/InviteUser.jsx
+++ b/src/app/organisms/invite-user/InviteUser.jsx
@@ -230,7 +230,7 @@ function InviteUser({
    >
      <div className="invite-user">
        <form className="invite-user__form" onSubmit={(e) => { e.preventDefault(); searchUser(usernameRef.current.value); }}>
-          <Input value={searchTerm} forwardRef={usernameRef} label="Username or userId" />
+          <Input value={searchTerm} forwardRef={usernameRef} label="Name or userId" />
          <Button disabled={isSearching} iconSrc={UserIC} variant="primary" type="submit">Search</Button>
        </form>
        <div className="invite-user__search-status">
--- a/src/app/organisms/navigation/Directs.jsx
+++ b/src/app/organisms/navigation/Directs.jsx
@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { selectRoom } from '../../../client/action/navigation';
+import Postie from '../../../util/Postie';
+
+import Selector from './Selector';
+
+import { AtoZ } from './common';
+
+const drawerPostie = new Postie();
+function Directs() {
+  const { roomList } = initMatrix;
+  const directIds = [...roomList.directs].sort(AtoZ);
+
+  const [, forceUpdate] = useState({});
+
+  function selectorChanged(activeRoomID, prevActiveRoomId) {
+    if (!drawerPostie.hasTopic('selector-change')) return;
+    const addresses = [];
+    if (drawerPostie.hasSubscriber('selector-change', activeRoomID)) addresses.push(activeRoomID);
+    if (drawerPostie.hasSubscriber('selector-change', prevActiveRoomId)) addresses.push(prevActiveRoomId);
+    if (addresses.length === 0) return;
+    drawerPostie.post('selector-change', addresses, activeRoomID);
+  }
+
+  function unreadChanged(roomId) {
+    if (!drawerPostie.hasTopic('unread-change')) return;
+    if (!drawerPostie.hasSubscriber('unread-change', roomId)) return;
+    drawerPostie.post('unread-change', roomId);
+  }
+
+  function roomListUpdated() {
+    const { spaces, rooms, directs } = initMatrix.roomList;
+    if (!(
+      spaces.has(navigation.getActiveRoomId())
+      || rooms.has(navigation.getActiveRoomId())
+      || directs.has(navigation.getActiveRoomId()))
+    ) {
+      selectRoom(null);
+    }
+    forceUpdate({});
+  }
+
+  useEffect(() => {
+    roomList.on(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
+    navigation.on(cons.events.navigation.ROOM_SELECTED, selectorChanged);
+    roomList.on(cons.events.roomList.MY_RECEIPT_ARRIVED, unreadChanged);
+    roomList.on(cons.events.roomList.EVENT_ARRIVED, unreadChanged);
+    return () => {
+      roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
+      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged);
+      roomList.removeListener(cons.events.roomList.MY_RECEIPT_ARRIVED, unreadChanged);
+      roomList.removeListener(cons.events.roomList.EVENT_ARRIVED, unreadChanged);
+    };
+  }, []);
+
+  return directIds.map((id) => (
+    <Selector
+      key={id}
+      roomId={id}
+      drawerPostie={drawerPostie}
+    />
+  ));
+}
+
+export default Directs;
--- a/src/app/organisms/navigation/Drawer.jsx
+++ b/src/app/organisms/navigation/Drawer.jsx
@@ -1,86 +1,14 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import './Drawer.scss';

-import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
-import { doesRoomHaveUnread } from '../../../util/matrixUtil';
-import {
-  selectRoom, openPublicChannels, openCreateChannel, openInviteUser,
-} from '../../../client/action/navigation';
 import navigation from '../../../client/state/navigation';

-import Header, { TitleWrapper } from '../../atoms/header/Header';
-import Text from '../../atoms/text/Text';
-import IconButton from '../../atoms/button/IconButton';
 import ScrollView from '../../atoms/scroll/ScrollView';
-import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import ChannelSelector from '../../molecules/channel-selector/ChannelSelector';

-import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
-// import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
-import HashIC from '../../../../public/res/ic/outlined/hash.svg';
-import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
-import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
-import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
-import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
-import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
-
-function AtoZ(aId, bId) {
-  let aName = initMatrix.matrixClient.getRoom(aId).name;
-  let bName = initMatrix.matrixClient.getRoom(bId).name;
-
-  // remove "#" from the room name
-  // To ignore it in sorting
-  aName = aName.replaceAll('#', '');
-  bName = bName.replaceAll('#', '');
-
-  if (aName.toLowerCase() < bName.toLowerCase()) {
-    return -1;
-  }
-  if (aName.toLowerCase() > bName.toLowerCase()) {
-    return 1;
-  }
-  return 0;
-}
-
-function DrawerHeader({ tabId }) {
-  return (
-    <Header>
-      <TitleWrapper>
-        <Text variant="s1">{(tabId === 'channels' ? 'Home' : 'Direct messages')}</Text>
-      </TitleWrapper>
-      {(tabId === 'dm')
-        ? <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="normal" />
-        : (
-          <ContextMenu
-            content={(hideMenu) => (
-              <>
-                <MenuHeader>Add channel</MenuHeader>
-                <MenuItem
-                  iconSrc={HashPlusIC}
-                  onClick={() => { hideMenu(); openCreateChannel(); }}
-                >
-                  Create new channel
-                </MenuItem>
-                <MenuItem
-                  iconSrc={HashSearchIC}
-                  onClick={() => { hideMenu(); openPublicChannels(); }}
-                >
-                  Add Public channel
-                </MenuItem>
-              </>
-            )}
-            render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add channel" src={PlusIC} size="normal" />)}
-          />
-        )}
-      {/* <IconButton onClick={() => ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */}
-    </Header>
-  );
-}
-DrawerHeader.propTypes = {
-  tabId: PropTypes.string.isRequired,
-};
+import DrawerHeader from './DrawerHeader';
+import Home from './Home';
+import Directs from './Directs';

 function DrawerBradcrumb() {
  return (
@@ -94,121 +22,33 @@ function DrawerBradcrumb() {
  );
 }

-function renderSelector(room, roomId, isSelected, isDM) {
-  const mx = initMatrix.matrixClient;
-  let imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop');
-  if (typeof imageSrc === 'undefined') imageSrc = null;
+function Drawer() {
+  const [activeTab, setActiveTab] = useState('home');

-  return (
-    <ChannelSelector
-      key={roomId}
-      iconSrc={
-        isDM
-          ? null
-          : (() => {
-            if (room.isSpaceRoom()) {
-              return (room.getJoinRule() === 'invite' ? SpaceLockIC : SpaceIC);
-            }
-            return (room.getJoinRule() === 'invite' ? HashLockIC : HashIC);
-          })()
-      }
-      imageSrc={isDM ? imageSrc : null}
-      roomId={roomId}
-      unread={doesRoomHaveUnread(room)}
-      onClick={() => selectRoom(roomId)}
-      notificationCount={room.getUnreadNotificationCount('total')}
-      alert={room.getUnreadNotificationCount('highlight') !== 0}
-      selected={isSelected}
-    >
-      {room.name}
-    </ChannelSelector>
-  );
-}
-
-function Directs({ selectedRoomId }) {
-  const mx = initMatrix.matrixClient;
-  const directIds = [...initMatrix.roomList.directs].sort(AtoZ);
-
-  return directIds.map((id) => renderSelector(mx.getRoom(id), id, selectedRoomId === id, true));
-}
-Directs.defaultProps = { selectedRoomId: null };
-Directs.propTypes = { selectedRoomId: PropTypes.string };
-
-function Home({ selectedRoomId }) {
-  const mx = initMatrix.matrixClient;
-  const spaceIds = [...initMatrix.roomList.spaces].sort(AtoZ);
-  const roomIds = [...initMatrix.roomList.rooms].sort(AtoZ);
-
-  return (
-    <>
-      { spaceIds.length !== 0 && <Text className="cat-header" variant="b3">Spaces</Text> }
-      { spaceIds.map((id) => renderSelector(mx.getRoom(id), id, selectedRoomId === id, false)) }
-      { roomIds.length !== 0 && <Text className="cat-header" variant="b3">Channels</Text> }
-      { roomIds.map((id) => renderSelector(mx.getRoom(id), id, selectedRoomId === id, false)) }
-    </>
-  );
-}
-Home.defaultProps = { selectedRoomId: null };
-Home.propTypes = { selectedRoomId: PropTypes.string };
-
-function Channels({ tabId }) {
-  const [selectedRoomId, changeSelectedRoomId] = useState(null);
-  const [, updateState] = useState();
-
-  const selectHandler = (roomId) => changeSelectedRoomId(roomId);
-  const handleDataChanges = () => updateState({});
-
-  const onRoomListChange = () => {
-    const { spaces, rooms, directs } = initMatrix.roomList;
-    if (!(
-      spaces.has(selectedRoomId)
-      || rooms.has(selectedRoomId)
-      || directs.has(selectedRoomId))
-    ) {
-      selectRoom(null);
-    }
-  };
+  function onTabChanged(tabId) {
+    setActiveTab(tabId);
+  }

  useEffect(() => {
-    navigation.on(cons.events.navigation.ROOM_SELECTED, selectHandler);
-    initMatrix.roomList.on(cons.events.roomList.ROOMLIST_UPDATED, handleDataChanges);
-
+    navigation.on(cons.events.navigation.TAB_CHANGED, onTabChanged);
    return () => {
-      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectHandler);
-      initMatrix.roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, handleDataChanges);
+      navigation.removeListener(cons.events.navigation.TAB_CHANGED, onTabChanged);
    };
  }, []);
-  useEffect(() => {
-    initMatrix.roomList.on(cons.events.roomList.ROOMLIST_UPDATED, onRoomListChange);
-
-    return () => {
-      initMatrix.roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, onRoomListChange);
-    };
-  }, [selectedRoomId]);
-
-  return (
-    <div className="channels-container">
-      {
-        tabId === 'channels'
-          ? <Home selectedRoomId={selectedRoomId} />
-          : <Directs selectedRoomId={selectedRoomId} />
-      }
-    </div>
-  );
-}
-Channels.propTypes = {
-  tabId: PropTypes.string.isRequired,
-};
-
-function Drawer({ tabId }) {
  return (
    <div className="drawer">
-      <DrawerHeader tabId={tabId} />
+      <DrawerHeader activeTab={activeTab} />
      <div className="drawer__content-wrapper">
        <DrawerBradcrumb />
        <div className="channels__wrapper">
          <ScrollView autoHide>
-            <Channels tabId={tabId} />
+            <div className="channels-container">
+              {
+                activeTab === 'home'
+                  ? <Home />
+                  : <Directs />
+              }
+            </div>
          </ScrollView>
        </div>
      </div>
@@ -216,8 +56,4 @@ function Drawer({ tabId }) {
  );
 }

-Drawer.propTypes = {
-  tabId: PropTypes.string.isRequired,
-};
-
 export default Drawer;
--- a/src/app/organisms/navigation/Drawer.scss
+++ b/src/app/organisms/navigation/Drawer.scss
@@ -35,7 +35,18 @@
 .channels-container {
  padding-bottom: var(--sp-extra-loose);

-  & > .channel-selector__button-wrapper:first-child {
+  & > .channel-selector {
+    width: calc(100% - var(--sp-extra-tight));
+    margin-left: auto;
+
+    [dir=rtl] & {
+      margin-left: 0;
+      margin-right: auto;
+    }
+
+  }
+
+  & > .channel-selector:first-child {
    margin-top: var(--sp-extra-tight);
  }

--- a/src/app/organisms/navigation/DrawerHeader.jsx
+++ b/src/app/organisms/navigation/DrawerHeader.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  openPublicChannels, openCreateChannel, openInviteUser,
+} from '../../../client/action/navigation';
+
+import Text from '../../atoms/text/Text';
+import Header, { TitleWrapper } from '../../atoms/header/Header';
+import IconButton from '../../atoms/button/IconButton';
+import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
+
+import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
+import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
+import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
+
+function DrawerHeader({ activeTab }) {
+  return (
+    <Header>
+      <TitleWrapper>
+        <Text variant="s1">{(activeTab === 'home' ? 'Home' : 'Direct messages')}</Text>
+      </TitleWrapper>
+      {(activeTab === 'dms')
+        ? <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="normal" />
+        : (
+          <ContextMenu
+            content={(hideMenu) => (
+              <>
+                <MenuHeader>Add channel</MenuHeader>
+                <MenuItem
+                  iconSrc={HashPlusIC}
+                  onClick={() => { hideMenu(); openCreateChannel(); }}
+                >
+                  Create new channel
+                </MenuItem>
+                <MenuItem
+                  iconSrc={HashSearchIC}
+                  onClick={() => { hideMenu(); openPublicChannels(); }}
+                >
+                  Add Public channel
+                </MenuItem>
+              </>
+            )}
+            render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add channel" src={PlusIC} size="normal" />)}
+          />
+        )}
+      {/* <IconButton onClick={() => ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */}
+    </Header>
+  );
+}
+DrawerHeader.propTypes = {
+  activeTab: PropTypes.string.isRequired,
+};
+
+export default DrawerHeader;
--- a/src/app/organisms/navigation/Home.jsx
+++ b/src/app/organisms/navigation/Home.jsx
@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from 'react';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { selectRoom } from '../../../client/action/navigation';
+import Postie from '../../../util/Postie';
+
+import Text from '../../atoms/text/Text';
+import Selector from './Selector';
+
+import { AtoZ } from './common';
+
+const drawerPostie = new Postie();
+function Home() {
+  const { roomList } = initMatrix;
+  const spaceIds = [...roomList.spaces].sort(AtoZ);
+  const roomIds = [...roomList.rooms].sort(AtoZ);
+
+  const [, forceUpdate] = useState({});
+
+  function selectorChanged(activeRoomID, prevActiveRoomId) {
+    if (!drawerPostie.hasTopic('selector-change')) return;
+    const addresses = [];
+    if (drawerPostie.hasSubscriber('selector-change', activeRoomID)) addresses.push(activeRoomID);
+    if (drawerPostie.hasSubscriber('selector-change', prevActiveRoomId)) addresses.push(prevActiveRoomId);
+    if (addresses.length === 0) return;
+    drawerPostie.post('selector-change', addresses, activeRoomID);
+  }
+  function unreadChanged(roomId) {
+    if (!drawerPostie.hasTopic('unread-change')) return;
+    if (!drawerPostie.hasSubscriber('unread-change', roomId)) return;
+    drawerPostie.post('unread-change', roomId);
+  }
+
+  function roomListUpdated() {
+    const { spaces, rooms, directs } = initMatrix.roomList;
+    if (!(
+      spaces.has(navigation.getActiveRoomId())
+      || rooms.has(navigation.getActiveRoomId())
+      || directs.has(navigation.getActiveRoomId()))
+    ) {
+      selectRoom(null);
+    }
+    forceUpdate({});
+  }
+
+  useEffect(() => {
+    roomList.on(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
+    navigation.on(cons.events.navigation.ROOM_SELECTED, selectorChanged);
+    roomList.on(cons.events.roomList.MY_RECEIPT_ARRIVED, unreadChanged);
+    roomList.on(cons.events.roomList.EVENT_ARRIVED, unreadChanged);
+    return () => {
+      roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
+      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged);
+      roomList.removeListener(cons.events.roomList.MY_RECEIPT_ARRIVED, unreadChanged);
+      roomList.removeListener(cons.events.roomList.EVENT_ARRIVED, unreadChanged);
+    };
+  }, []);
+
+  return (
+    <>
+      { spaceIds.length !== 0 && <Text className="cat-header" variant="b3">Spaces</Text> }
+      { spaceIds.map((id) => (
+        <Selector
+          key={id}
+          roomId={id}
+          isDM={false}
+          drawerPostie={drawerPostie}
+        />
+      ))}
+
+      { roomIds.length !== 0 && <Text className="cat-header" variant="b3">Channels</Text> }
+      { roomIds.map((id) => (
+        <Selector
+          key={id}
+          roomId={id}
+          isDM={false}
+          drawerPostie={drawerPostie}
+        />
+      )) }
+    </>
+  );
+}
+
+export default Home;
--- a/src/app/organisms/navigation/Navigation.jsx
+++ b/src/app/organisms/navigation/Navigation.jsx
@@ -1,34 +1,14 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import './Navigation.scss';

-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import { handleTabChange } from '../../../client/action/navigation';
-
 import SideBar from './SideBar';
 import Drawer from './Drawer';

 function Navigation() {
-  const [activeTab, changeActiveTab] = useState(navigation.getActiveTab());
-
-  function changeTab(tabId) {
-    handleTabChange(tabId);
-  }
-
-  useEffect(() => {
-    const handleTab = () => {
-      changeActiveTab(navigation.getActiveTab());
-    };
-    navigation.on(cons.events.navigation.TAB_CHANGED, handleTab);
-
-    return () => {
-      navigation.removeListener(cons.events.navigation.TAB_CHANGED, handleTab);
-    };
-  }, []);
  return (
    <div className="navigation">
-      <SideBar tabId={activeTab} changeTab={changeTab} />
-      <Drawer tabId={activeTab} />
+      <SideBar />
+      <Drawer />
    </div>
  );
 }
--- a/src/app/organisms/navigation/Selector.jsx
+++ b/src/app/organisms/navigation/Selector.jsx
@@ -0,0 +1,76 @@
+/* eslint-disable react/prop-types */
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import initMatrix from '../../../client/initMatrix';
+import { doesRoomHaveUnread } from '../../../util/matrixUtil';
+import { selectRoom } from '../../../client/action/navigation';
+import navigation from '../../../client/state/navigation';
+
+import ChannelSelector from '../../molecules/channel-selector/ChannelSelector';
+
+import HashIC from '../../../../public/res/ic/outlined/hash.svg';
+import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
+import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
+import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
+
+function Selector({ roomId, isDM, drawerPostie }) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  const imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
+
+  const [isSelected, setIsSelected] = useState(navigation.getActiveRoomId() === roomId);
+  const [, forceUpdate] = useState({});
+
+  function selectorChanged(activeRoomId) {
+    setIsSelected(activeRoomId === roomId);
+  }
+  function changeNotificationBadge() {
+    forceUpdate({});
+  }
+
+  useEffect(() => {
+    drawerPostie.subscribe('selector-change', roomId, selectorChanged);
+    drawerPostie.subscribe('unread-change', roomId, changeNotificationBadge);
+    return () => {
+      drawerPostie.unsubscribe('selector-change', roomId);
+      drawerPostie.unsubscribe('unread-change', roomId);
+    };
+  }, []);
+
+  return (
+    <ChannelSelector
+      key={roomId}
+      name={room.name}
+      roomId={roomId}
+      imageSrc={isDM ? imageSrc : null}
+      iconSrc={
+        isDM
+          ? null
+          : (() => {
+            if (room.isSpaceRoom()) {
+              return (room.getJoinRule() === 'invite' ? SpaceLockIC : SpaceIC);
+            }
+            return (room.getJoinRule() === 'invite' ? HashLockIC : HashIC);
+          })()
+      }
+      isSelected={isSelected}
+      isUnread={doesRoomHaveUnread(room)}
+      notificationCount={room.getUnreadNotificationCount('total') || 0}
+      isAlert={room.getUnreadNotificationCount('highlight') !== 0}
+      onClick={() => selectRoom(roomId)}
+    />
+  );
+}
+
+Selector.defaultProps = {
+  isDM: true,
+};
+
+Selector.propTypes = {
+  roomId: PropTypes.string.isRequired,
+  isDM: PropTypes.bool,
+  drawerPostie: PropTypes.shape({}).isRequired,
+};
+
+export default Selector;
--- a/src/app/organisms/navigation/SideBar.jsx
+++ b/src/app/organisms/navigation/SideBar.jsx
@@ -1,12 +1,14 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import './SideBar.scss';

 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import colorMXID from '../../../util/colorMXID';
 import logout from '../../../client/action/logout';
-import { openInviteList, openPublicChannels, openSettings } from '../../../client/action/navigation';
+import {
+  changeTab, openInviteList, openPublicChannels, openSettings,
+} from '../../../client/action/navigation';
+import navigation from '../../../client/state/navigation';

 import ScrollView from '../../atoms/scroll/ScrollView';
 import SidebarAvatar from '../../molecules/sidebar-avatar/SidebarAvatar';
@@ -52,24 +54,30 @@ function ProfileAvatarMenu() {
  );
 }

-function SideBar({ tabId, changeTab }) {
+function SideBar() {
  const totalInviteCount = () => initMatrix.roomList.inviteRooms.size
    + initMatrix.roomList.inviteSpaces.size
    + initMatrix.roomList.inviteDirects.size;

  const [totalInvites, updateTotalInvites] = useState(totalInviteCount());
+  const [activeTab, setActiveTab] = useState('home');

+  function onTabChanged(tabId) {
+    setActiveTab(tabId);
+  }
  function onInviteListChange() {
    updateTotalInvites(totalInviteCount());
  }

  useEffect(() => {
+    navigation.on(cons.events.navigation.TAB_CHANGED, onTabChanged);
    initMatrix.roomList.on(
      cons.events.roomList.INVITELIST_UPDATED,
      onInviteListChange,
    );

    return () => {
+      navigation.removeListener(cons.events.navigation.TAB_CHANGED, onTabChanged);
      initMatrix.roomList.removeListener(
        cons.events.roomList.INVITELIST_UPDATED,
        onInviteListChange,
@@ -83,8 +91,8 @@ function SideBar({ tabId, changeTab }) {
        <ScrollView invisible>
          <div className="scrollable-content">
            <div className="featured-container">
-              <SidebarAvatar active={tabId === 'channels'} onClick={() => changeTab('channels')} tooltip="Home" iconSrc={HomeIC} />
-              <SidebarAvatar active={tabId === 'dm'} onClick={() => changeTab('dm')} tooltip="People" iconSrc={UserIC} />
+              <SidebarAvatar active={activeTab === 'home'} onClick={() => changeTab('home')} tooltip="Home" iconSrc={HomeIC} />
+              <SidebarAvatar active={activeTab === 'dms'} onClick={() => changeTab('dms')} tooltip="People" iconSrc={UserIC} />
              <SidebarAvatar onClick={() => openPublicChannels()} tooltip="Public channels" iconSrc={HashSearchIC} />
            </div>
            <div className="sidebar-divider" />
@@ -110,9 +118,4 @@ function SideBar({ tabId, changeTab }) {
  );
 }

-SideBar.propTypes = {
-  tabId: PropTypes.string.isRequired,
-  changeTab: PropTypes.func.isRequired,
-};
-
 export default SideBar;
--- a/src/app/organisms/navigation/common.js
+++ b/src/app/organisms/navigation/common.js
@@ -0,0 +1,21 @@
+import initMatrix from '../../../client/initMatrix';
+
+function AtoZ(aId, bId) {
+  let aName = initMatrix.matrixClient.getRoom(aId).name;
+  let bName = initMatrix.matrixClient.getRoom(bId).name;
+
+  // remove "#" from the room name
+  // To ignore it in sorting
+  aName = aName.replaceAll('#', '');
+  bName = bName.replaceAll('#', '');
+
+  if (aName.toLowerCase() < bName.toLowerCase()) {
+    return -1;
+  }
+  if (aName.toLowerCase() > bName.toLowerCase()) {
+    return 1;
+  }
+  return 0;
+}
+
+export { AtoZ };
--- a/src/app/organisms/public-channels/PublicChannels.jsx
+++ b/src/app/organisms/public-channels/PublicChannels.jsx
@@ -177,10 +177,10 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
    onRequestClose();
  }

-  function joinChannel(roomId) {
-    joiningChannels.add(roomId);
+  function joinChannel(roomIdOrAlias) {
+    joiningChannels.add(roomIdOrAlias);
    updateJoiningChannels(new Set(Array.from(joiningChannels)));
-    roomActions.join(roomId, false);
+    roomActions.join(roomIdOrAlias, false);
  }

  function renderChannelList(channels) {
@@ -199,7 +199,7 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
          options={(
            <>
              {isJoined && <Button onClick={() => handleViewChannel(channel.room_id)}>Open</Button>}
-              {!isJoined && (joiningChannels.has(channel.room_id) ? <Spinner size="small" /> : <Button onClick={() => joinChannel(channel.room_id)} variant="primary">Join</Button>)}
+              {!isJoined && (joiningChannels.has(channel.room_id) ? <Spinner size="small" /> : <Button onClick={() => joinChannel(channel.aliases?.[0] || channel.room_id)} variant="primary">Join</Button>)}
            </>
          )}
        />
--- a/src/app/organisms/pw/Dialogs.jsx
+++ b/src/app/organisms/pw/Dialogs.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import ReadReceipts from '../read-receipts/ReadReceipts';
+
+function Dialogs() {
+  return (
+    <>
+      <ReadReceipts />
+    </>
+  );
+}
+
+export default Dialogs;
--- a/src/app/organisms/read-receipts/ReadReceipts.jsx
+++ b/src/app/organisms/read-receipts/ReadReceipts.jsx
@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from 'react';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { getUsername, getUsernameOfRoomMember } from '../../../util/matrixUtil';
+import colorMXID from '../../../util/colorMXID';
+
+import IconButton from '../../atoms/button/IconButton';
+import PeopleSelector from '../../molecules/people-selector/PeopleSelector';
+import Dialog from '../../molecules/dialog/Dialog';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+function ReadReceipts() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [roomId, setRoomId] = useState(null);
+  const [readReceipts, setReadReceipts] = useState([]);
+
+  function loadReadReceipts(myRoomId, eventId) {
+    const mx = initMatrix.matrixClient;
+    const room = mx.getRoom(myRoomId);
+    const { timeline } = room;
+    const myReadReceipts = [];
+
+    const myEventIndex = timeline.findIndex((mEvent) => mEvent.getId() === eventId);
+
+    for (let eventIndex = myEventIndex; eventIndex < timeline.length; eventIndex += 1) {
+      myReadReceipts.push(...room.getReceiptsForEvent(timeline[eventIndex]));
+    }
+
+    setReadReceipts(myReadReceipts);
+    setRoomId(myRoomId);
+    setIsOpen(true);
+  }
+
+  useEffect(() => {
+    navigation.on(cons.events.navigation.READRECEIPTS_OPENED, loadReadReceipts);
+    return () => {
+      navigation.removeListener(cons.events.navigation.READRECEIPTS_OPENED, loadReadReceipts);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isOpen === false) {
+      setRoomId(null);
+      setReadReceipts([]);
+    }
+  }, [isOpen]);
+
+  function renderPeople(receipt) {
+    const room = initMatrix.matrixClient.getRoom(roomId);
+    const member = room.getMember(receipt.userId);
+    const getUserDisplayName = (userId) => {
+      if (room?.getMember(userId)) return getUsernameOfRoomMember(room.getMember(userId));
+      return getUsername(userId);
+    };
+    return (
+      <PeopleSelector
+        key={receipt.userId}
+        onClick={() => alert('Viewing profile is yet to be implemented')}
+        avatarSrc={member?.getAvatarUrl(initMatrix.matrixClient.baseUrl, 24, 24, 'crop')}
+        name={getUserDisplayName(receipt.userId)}
+        color={colorMXID(receipt.userId)}
+      />
+    );
+  }
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      title="Seen by"
+      onRequestClose={() => setIsOpen(false)}
+      contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />}
+    >
+      {
+        readReceipts.map(renderPeople)
+      }
+    </Dialog>
+  );
+}
+
+export default ReadReceipts;
--- a/src/app/organisms/settings/Settings.jsx
+++ b/src/app/organisms/settings/Settings.jsx
@@ -62,7 +62,10 @@ function SecuritySection() {
    <div className="set-security settings-content">
      <SettingTile
        title={`Device ID: ${initMatrix.matrixClient.getDeviceId()}`}
-        content={<Text variant="b3">Use this device ID to verify or manage this session from Element client.</Text>}
+      />
+      <SettingTile
+        title={`Device key: ${initMatrix.matrixClient.getDeviceEd25519Key().match(/.{1,4}/g).join(' ')}`}
+        content={<Text variant="b3">Use this device ID-key combo to verify or manage this session from Element client.</Text>}
      />
      <SettingTile
        title="Import E2E room keys"
@@ -85,7 +88,7 @@ function AboutSection() {
        <div>
          <Text variant="h2">
            Cinny
-            <span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>v1.1.0</span>
+            <span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>v1.2.1</span>
          </Text>
          <Text>Yet another matrix client</Text>

--- a/src/app/templates/auth/Auth.jsx
+++ b/src/app/templates/auth/Auth.jsx
@@ -15,7 +15,7 @@ import CinnySvg from '../../../../public/res/svg/cinny.svg';

 // This regex validates historical usernames, which don't satisy today's username requirements.
 // See https://matrix.org/docs/spec/appendices#id13 for more info.
-const LOCALPART_LOGIN_REGEX = /^[!-9|;-~]+$/;
+const LOCALPART_LOGIN_REGEX = /.*/;
 const LOCALPART_SIGNUP_REGEX = /^[a-z0-9_\-.=/]+$/;
 const BAD_LOCALPART_ERROR = 'Username must contain only a-z, 0-9, ., _, =, -, and /.';
 const USER_ID_TOO_LONG_ERROR = 'Your user ID, including the hostname, can\'t be more than 255 characters long.';
@@ -120,11 +120,6 @@ function Auth({ type }) {
    /** @type {string} */
    const normalizedUsername = normalizeUsername(rawUsername);

-    if (!isValidInput(normalizedUsername, LOCALPART_LOGIN_REGEX)) {
-      showBadInputError(usernameRef.current, BAD_LOCALPART_ERROR);
-      return;
-    }
-
    auth.login(normalizedUsername, homeserverRef.current.value, passwordRef.current.value)
      .then(() => {
        document.getElementById('auth_submit-btn').disabled = false;
--- a/src/app/templates/client/Client.jsx
+++ b/src/app/templates/client/Client.jsx
@@ -6,6 +6,8 @@ import Spinner from '../../atoms/spinner/Spinner';
 import Navigation from '../../organisms/navigation/Navigation';
 import Channel from '../../organisms/channel/Channel';
 import Windows from '../../organisms/pw/Windows';
+import Dialogs from '../../organisms/pw/Dialogs';
+import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';

 import initMatrix from '../../../client/initMatrix';

@@ -40,6 +42,8 @@ function Client() {
        <Channel />
      </div>
      <Windows />
+      <Dialogs />
+      <EmojiBoardOpener />
    </div>
  );
 }
--- a/src/client/action/navigation.js
+++ b/src/client/action/navigation.js
@@ -1,7 +1,7 @@
 import appDispatcher from '../dispatcher';
 import cons from '../state/cons';

-function handleTabChange(tabId) {
+function changeTab(tabId) {
  appDispatcher.dispatch({
    type: cons.actions.navigation.CHANGE_TAB,
    tabId,
@@ -54,8 +54,24 @@ function openSettings() {
  });
 }

+function openEmojiBoard(cords, requestEmojiCallback) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_EMOJIBOARD,
+    cords,
+    requestEmojiCallback,
+  });
+}
+
+function openReadReceipts(roomId, eventId) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_READRECEIPTS,
+    roomId,
+    eventId,
+  });
+}
+
 export {
-  handleTabChange,
+  changeTab,
  selectRoom,
  togglePeopleDrawer,
  openInviteList,
@@ -63,4 +79,6 @@ export {
  openCreateChannel,
  openInviteUser,
  openSettings,
+  openEmojiBoard,
+  openReadReceipts,
 };
--- a/src/client/action/room.js
+++ b/src/client/action/room.js
@@ -85,8 +85,9 @@ function guessDMRoomTargetId(room, myUserId) {
 */
 async function join(roomIdOrAlias, isDM) {
  const mx = initMatrix.matrixClient;
+  const roomIdParts = roomIdOrAlias.split(':');
  try {
-    const resultRoom = await mx.joinRoom(roomIdOrAlias);
+    const resultRoom = await mx.joinRoom(roomIdOrAlias, { viaServers: [roomIdParts[1]] });

    if (isDM) {
      const targetUserId = guessDMRoomTargetId(mx.getRoom(resultRoom.roomId), mx.getUserId());
@@ -189,19 +190,7 @@ async function invite(roomId, userId) {
  }
 }

-async function redact(roomId, eventId, reason) {
-  const mx = initMatrix.matrixClient;
-
-  try {
-    await mx.redactEvent(roomId, eventId, undefined, typeof reason === 'undefined' ? undefined : { reason });
-    return true;
-  } catch (e) {
-    throw new Error(e);
-  }
-}
-
 export {
  join, leave,
  create, invite,
-  redact,
 };
--- a/src/client/action/roomTimeline.js
+++ b/src/client/action/roomTimeline.js
@@ -0,0 +1,33 @@
+import initMatrix from '../initMatrix';
+
+async function redactEvent(roomId, eventId, reason) {
+  const mx = initMatrix.matrixClient;
+
+  try {
+    await mx.redactEvent(roomId, eventId, undefined, typeof reason === 'undefined' ? undefined : { reason });
+    return true;
+  } catch (e) {
+    throw new Error(e);
+  }
+}
+
+async function sendReaction(roomId, toEventId, reaction) {
+  const mx = initMatrix.matrixClient;
+
+  try {
+    await mx.sendEvent(roomId, 'm.reaction', {
+      'm.relates_to': {
+        event_id: toEventId,
+        key: reaction,
+        rel_type: 'm.annotation',
+      },
+    });
+  } catch (e) {
+    throw new Error(e);
+  }
+}
+
+export {
+  redactEvent,
+  sendReaction,
+};
--- a/src/client/state/RoomList.js
+++ b/src/client/state/RoomList.js
@@ -155,12 +155,13 @@ class RoomList extends EventEmitter {
    this.matrixClient.on('Room.name', () => {
      this.emit(cons.events.roomList.ROOMLIST_UPDATED);
    });
-    this.matrixClient.on('Room.receipt', (event) => {
+    this.matrixClient.on('Room.receipt', (event, room) => {
      if (event.getType() === 'm.receipt') {
-        const evContent = event.getContent();
-        const userId = Object.keys(evContent[Object.keys(evContent)[0]]['m.read'])[0];
-        if (userId !== this.matrixClient.getUserId()) return;
-        this.emit(cons.events.roomList.ROOMLIST_UPDATED);
+        const content = event.getContent();
+        const userReadEventId = Object.keys(content)[0];
+        const eventReaderUserId = Object.keys(content[userReadEventId]['m.read'])[0];
+        if (eventReaderUserId !== this.matrixClient.getUserId()) return;
+        this.emit(cons.events.roomList.MY_RECEIPT_ARRIVED, room.roomId);
      }
    });

@@ -280,8 +281,13 @@ class RoomList extends EventEmitter {
      this.emit(cons.events.roomList.ROOMLIST_UPDATED);
    });

-    this.matrixClient.on('Room.timeline', () => {
-      this.emit(cons.events.roomList.ROOMLIST_UPDATED);
+    this.matrixClient.on('Room.timeline', (event, room) => {
+      const supportEvents = ['m.room.message', 'm.room.encrypted', 'm.sticker'];
+      if (!supportEvents.includes(event.getType())) return;
+
+      const lastTimelineEvent = room.timeline[room.timeline.length - 1];
+      if (lastTimelineEvent.getId() !== event.getId()) return;
+      this.emit(cons.events.roomList.EVENT_ARRIVED, room.roomId);
    });
  }
 }
--- a/src/client/state/RoomTimeline.js
+++ b/src/client/state/RoomTimeline.js
@@ -32,6 +32,7 @@ class RoomTimeline extends EventEmitter {
      }

      if (this.ongoingDecryptionCount !== 0) return;
+      if (this.isOngoingPagination) return;
      this.emit(cons.events.roomTimeline.EVENT);
    };

--- a/src/client/state/RoomsInput.js
+++ b/src/client/state/RoomsInput.js
@@ -1,5 +1,6 @@
 import EventEmitter from 'events';
-import { Parser, HtmlRenderer } from 'commonmark';
+import { micromark } from 'micromark';
+import { gfm, gfmHtml } from 'micromark-extension-gfm';
 import encrypt from 'browser-encrypt-attachment';
 import cons from './cons';
 import settings from './settings';
@@ -81,21 +82,26 @@ function getVideoThumbnail(video, width, height, mimeType) {
 }

 function getFormattedBody(markdown) {
-  const reader = new Parser();
-  const writer = new HtmlRenderer();
-  const parsed = reader.parse(markdown);
-  return writer.render(parsed);
+  const result = micromark(markdown, {
+    extensions: [gfm()],
+    htmlExtensions: [gfmHtml],
+  });
+  const bodyParts = result.match(/^(<p>)(.*)(<\/p>)$/);
+  if (bodyParts === null) return result;
+  if (bodyParts[2].indexOf('</p>') >= 0) return result;
+  return bodyParts[2];
 }

 function getReplyFormattedBody(roomId, reply) {
  const replyToLink = `<a href="https://matrix.to/#/${roomId}/${reply.eventId}">In reply to</a>`;
  const userLink = `<a href="https://matrix.to/#/${reply.userId}">${reply.userId}</a>`;
-  return `<mx-reply><blockquote>${replyToLink}${userLink}<br />${reply.content}</blockquote></mx-reply>`;
+  const formattedReply = getFormattedBody(reply.content.replaceAll('\n', '\n> '));
+  return `<mx-reply><blockquote>${replyToLink}${userLink}<br />${formattedReply}</blockquote></mx-reply>`;
 }

 function bindReplyToContent(roomId, reply, content) {
  const newContent = { ...content };
-  newContent.body = `> <${reply.userId}> ${reply.content}`;
+  newContent.body = `> <${reply.userId}> ${reply.content.replaceAll('\n', '\n> ')}`;
  newContent.body += `\n\n${content.body}`;
  newContent.format = 'org.matrix.custom.html';
  newContent['m.relates_to'] = content['m.relates_to'] || {};
@@ -200,6 +206,7 @@ class RoomsInput extends EventEmitter {
    this.roomIdToInput.set(roomId, input);
    if (input.attachment) {
      await this.sendFile(roomId, input.attachment.file);
+      if (!this.isSending(roomId)) return;
    }

    if (this.getMessage(roomId).trim() !== '') {
@@ -208,8 +215,11 @@ class RoomsInput extends EventEmitter {
        msgtype: 'm.text',
      };
      if (settings.isMarkdown) {
-        content.format = 'org.matrix.custom.html';
-        content.formatted_body = getFormattedBody(input.message);
+        const formattedBody = getFormattedBody(input.message);
+        if (formattedBody !== input.message) {
+          content.format = 'org.matrix.custom.html';
+          content.formatted_body = formattedBody;
+        }
      }
      if (typeof input.replyTo !== 'undefined') {
        content = bindReplyToContent(roomId, input.replyTo, content);
@@ -322,6 +332,45 @@ class RoomsInput extends EventEmitter {
    }
    return { url };
  }
+
+  async sendEditedMessage(roomId, mEvent, editedBody) {
+    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',
+      },
+    };
+    if (settings.isMarkdown) {
+      const formattedBody = getFormattedBody(editedBody);
+      if (formattedBody !== 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);
+  }
 }

 export default RoomsInput;
--- a/src/client/state/cons.js
+++ b/src/client/state/cons.js
@@ -16,6 +16,8 @@ const cons = {
      OPEN_CREATE_CHANNEL: 'OPEN_CREATE_CHANNEL',
      OPEN_INVITE_USER: 'OPEN_INVITE_USER',
      OPEN_SETTINGS: 'OPEN_SETTINGS',
+      OPEN_EMOJIBOARD: 'OPEN_EMOJIBOARD',
+      OPEN_READRECEIPTS: 'OPEN_READRECEIPTS',
    },
    room: {
      JOIN: 'JOIN',
@@ -39,6 +41,8 @@ const cons = {
      CREATE_CHANNEL_OPENED: 'CREATE_CHANNEL_OPENED',
      INVITE_USER_OPENED: 'INVITE_USER_OPENED',
      SETTINGS_OPENED: 'SETTINGS_OPENED',
+      EMOJIBOARD_OPENED: 'EMOJIBOARD_OPENED',
+      READRECEIPTS_OPENED: 'READRECEIPTS_OPENED',
    },
    roomList: {
      ROOMLIST_UPDATED: 'ROOMLIST_UPDATED',
@@ -46,6 +50,8 @@ const cons = {
      ROOM_JOINED: 'ROOM_JOINED',
      ROOM_LEAVED: 'ROOM_LEAVED',
      ROOM_CREATED: 'ROOM_CREATED',
+      MY_RECEIPT_ARRIVED: 'MY_RECEIPT_ARRIVED',
+      EVENT_ARRIVED: 'EVENT_ARRIVED',
    },
    roomTimeline: {
      EVENT: 'EVENT',
--- a/src/client/state/navigation.js
+++ b/src/client/state/navigation.js
@@ -6,8 +6,8 @@ class Navigation extends EventEmitter {
  constructor() {
    super();

-    this.activeTab = 'channels';
-    this.selectedRoom = null;
+    this.activeTab = 'home';
+    this.activeRoomId = null;
    this.isPeopleDrawerVisible = true;
  }

@@ -15,8 +15,8 @@ class Navigation extends EventEmitter {
    return this.activeTab;
  }

-  getActiveRoom() {
-    return this.selectedRoom;
+  getActiveRoomId() {
+    return this.activeRoomId;
  }

  navigate(action) {
@@ -26,8 +26,9 @@ class Navigation extends EventEmitter {
        this.emit(cons.events.navigation.TAB_CHANGED, this.activeTab);
      },
      [cons.actions.navigation.SELECT_ROOM]: () => {
-        this.selectedRoom = action.roomId;
-        this.emit(cons.events.navigation.ROOM_SELECTED, this.selectedRoom);
+        const prevActiveRoomId = this.activeRoomId;
+        this.activeRoomId = action.roomId;
+        this.emit(cons.events.navigation.ROOM_SELECTED, this.activeRoomId, prevActiveRoomId);
      },
      [cons.actions.navigation.TOGGLE_PEOPLE_DRAWER]: () => {
        this.isPeopleDrawerVisible = !this.isPeopleDrawerVisible;
@@ -48,6 +49,19 @@ class Navigation extends EventEmitter {
      [cons.actions.navigation.OPEN_SETTINGS]: () => {
        this.emit(cons.events.navigation.SETTINGS_OPENED);
      },
+      [cons.actions.navigation.OPEN_EMOJIBOARD]: () => {
+        this.emit(
+          cons.events.navigation.EMOJIBOARD_OPENED,
+          action.cords, action.requestEmojiCallback,
+        );
+      },
+      [cons.actions.navigation.OPEN_READRECEIPTS]: () => {
+        this.emit(
+          cons.events.navigation.READRECEIPTS_OPENED,
+          action.roomId,
+          action.eventId,
+        );
+      },
    };
    actions[action.type]?.();
  }
--- a/src/client/state/settings.js
+++ b/src/client/state/settings.js
@@ -24,6 +24,8 @@ class Settings extends EventEmitter {
    this.themeIndex = this.getThemeIndex();

    this.isMarkdown = this.getIsMarkdown();
+
+    this.isTouchScreenDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
  }

  getThemeIndex() {
--- a/src/util/AsyncSearch.js
+++ b/src/util/AsyncSearch.js
@@ -0,0 +1,128 @@
+import EventEmitter from 'events';
+
+class AsyncSearch extends EventEmitter {
+  constructor() {
+    super();
+
+    this._reset();
+
+    this.RESULT_SENT = 'RESULT_SENT';
+  }
+
+  _reset() {
+    this.dataList = null;
+    this.term = null;
+    this.searchKeys = null;
+    this.isContain = false;
+    this.isCaseSensitive = false;
+    this.ignoreWhitespace = true;
+    this.limit = null;
+    this.findingList = [];
+
+    this.searchUptoIndex = 0;
+    this.sessionStartTimestamp = 0;
+  }
+
+  _softReset() {
+    this.term = null;
+    this.findingList = [];
+    this.searchUptoIndex = 0;
+    this.sessionStartTimestamp = 0;
+  }
+
+  /**
+   * Setup the search.
+   * opts.keys are required when dataList items are object.
+   *
+   * @param {[string | object]} dataList - A list to search in
+   * @param {object} opts - Options
+   * @param {string | [string]} [opts.keys=null]
+   * @param {boolean} [opts.isContain=false] - Add finding to result if it contain search term
+   * @param {boolean} [opts.isCaseSensitive=false]
+   * @param {boolean} [opts.ignoreWhitespace=true]
+   * @param {number} [opts.limit=null] - Stop search after limit
+   */
+  setup(dataList, opts) {
+    this._reset();
+    this.dataList = dataList;
+    this.searchKeys = opts?.keys || null;
+    this.isContain = opts?.isContain || false;
+    this.isCaseSensitive = opts?.isCaseSensitive || false;
+    this.ignoreWhitespace = opts?.ignoreWhitespace || true;
+    this.limit = opts?.limit || null;
+  }
+
+  search(term) {
+    this._softReset();
+
+    this.term = (this.isCaseSensitive) ? term : term.toLocaleLowerCase();
+    if (this.ignoreWhitespace) this.term = this.term.replace(' ', '');
+    if (this.term === '') {
+      this._sendFindings();
+      return;
+    }
+
+    this._find(this.sessionStartTimestamp, 0);
+  }
+
+  _find(sessionTimestamp, lastFindingCount) {
+    if (sessionTimestamp !== this.sessionStartTimestamp) return;
+    this.sessionStartTimestamp = window.performance.now();
+
+    for (
+      let searchIndex = this.searchUptoIndex;
+      searchIndex < this.dataList.length;
+      searchIndex += 1
+    ) {
+      if (this._match(this.dataList[searchIndex])) {
+        this.findingList.push(this.dataList[searchIndex]);
+        if (typeof this.limit === 'number' && this.findingList.length >= this.limit) break;
+      }
+
+      const calcFinishTime = window.performance.now();
+      if (calcFinishTime - this.sessionStartTimestamp > 8) {
+        const thisFindingCount = this.findingList.length;
+        const thisSessionTimestamp = this.sessionStartTimestamp;
+        if (lastFindingCount !== thisFindingCount) this._sendFindings();
+
+        this.searchUptoIndex = searchIndex + 1;
+        setTimeout(() => this._find(thisSessionTimestamp, thisFindingCount));
+        return;
+      }
+    }
+
+    if (lastFindingCount !== this.findingList.length
+      || lastFindingCount === 0) this._sendFindings();
+    this._softReset();
+  }
+
+  _match(item) {
+    if (typeof item === 'string') {
+      return this._compare(item);
+    }
+    if (typeof item === 'object') {
+      if (Array.isArray(this.searchKeys)) {
+        return !!this.searchKeys.find((key) => this._compare(item[key]));
+      }
+      if (typeof this.searchKeys === 'string') {
+        return this._compare(item[this.searchKeys]);
+      }
+    }
+    return false;
+  }
+
+  _compare(item) {
+    if (typeof item !== 'string') return false;
+    let myItem = (this.isCaseSensitive) ? item : item.toLocaleLowerCase();
+    if (this.ignoreWhitespace) myItem = myItem.replace(' ', '');
+
+    if (this.isContain) return myItem.indexOf(this.term) !== -1;
+    return myItem.startsWith(this.term);
+  }
+
+  _sendFindings() {
+    this.emit(this.RESULT_SENT, this.findingList, this.term);
+  }
+}
+
+export default AsyncSearch;
--- a/src/util/Postie.js
+++ b/src/util/Postie.js
@@ -0,0 +1,91 @@
+class Postie {
+  constructor() {
+    this._topics = new Map();
+  }
+
+  _getSubscribers(topic) {
+    const subscribers = this._topics.get(topic);
+    if (typeof subscribers === 'undefined') {
+      throw new Error(`Topic:"${topic}" doesn't exist.`);
+    }
+    return subscribers;
+  }
+
+  _getSubscriber(topic, address) {
+    const subscribers = this._getSubscribers(topic);
+    const subscriber = subscribers.get(address);
+    if (typeof subscriber === 'undefined') {
+      throw new Error(`Subscriber on topic:"${topic}" at address:"${address}" doesn't exist.`);
+    }
+    return subscriber;
+  }
+
+  hasTopic(topic) {
+    return typeof this._topics.get(topic) !== 'undefined';
+  }
+
+  hasSubscriber(topic, address) {
+    const subscribers = this._getSubscribers(topic);
+    return typeof subscribers.get(address) !== 'undefined';
+  }
+
+  hasTopicAndSubscriber(topic, address) {
+    return (this.isTopicExist(topic))
+      ? this.isSubscriberExist(topic, address)
+      : false;
+  }
+
+  /**
+   * @param {string} topic - Subscription topic
+   * @param {string} address - Address of subscriber
+   * @param {function} inbox - The inbox function to receive post data
+   */
+  subscribe(topic, address, inbox) {
+    if (typeof inbox !== 'function') {
+      throw new TypeError('Inbox  must be a function.');
+    }
+
+    if (typeof this._topics.get(topic) === 'undefined') {
+      this._topics.set(topic, new Map());
+    }
+    const subscribers = this._topics.get(topic);
+    if (subscribers.get(address)) {
+      throw new Error(`Subscription on topic:"${topic}" at address:"${address}" already exist.`);
+    }
+    subscribers.set(address, inbox);
+  }
+
+  unsubscribe(topic, address) {
+    const subscribers = this._getSubscribers(topic);
+    if (subscribers.has(address)) {
+      subscribers.delete(address);
+    } else throw new Error(`Unable to unsubscribe. Subscriber on topic:"${topic}" at address:"${address}" doesn't exist`);
+    if (subscribers.size === 0) {
+      this._topics.delete(topic);
+    }
+  }
+
+  /**
+   * @param {string} topic - Subscription topic
+   * @param {string|string[]} address - Address of subscriber
+   * @param {*} data - Data to deliver to subscriber
+   */
+  post(topic, address, data) {
+    const sendPost = (subscriber, addr) => {
+      if (typeof subscriber === 'undefined') {
+        throw new Error(`Unable to post on topic:"${topic}" at address:"${addr}". Subscriber doesn't exist.`);
+      }
+      subscriber(data);
+    };
+    if (Array.isArray(address)) {
+      const subscribers = this._getSubscribers(topic);
+      address.forEach((addr) => {
+        sendPost(subscribers.get(addr), addr);
+      });
+      return;
+    }
+    sendPost(this._getSubscriber(topic, address), address);
+  }
+}
+
+export default Postie;
--- a/src/util/matrixUtil.js
+++ b/src/util/matrixUtil.js
@@ -25,6 +25,10 @@ function getUsername(userId) {
  return username;
 }

+function getUsernameOfRoomMember(roomMember) {
+  return roomMember.name || roomMember.userId;
+}
+
 async function isRoomAliasAvailable(alias) {
  try {
    const myUserId = initMatrix.matrixClient.getUserId();
@@ -44,6 +48,7 @@ async function isRoomAliasAvailable(alias) {
 function doesRoomHaveUnread(room) {
  const userId = initMatrix.matrixClient.getUserId();
  const readUpToId = room.getEventReadUpTo(userId);
+  const supportEvents = ['m.room.message', 'm.room.encrypted', 'm.sticker'];

  if (room.timeline.length
    && room.timeline[room.timeline.length - 1].sender
@@ -56,12 +61,15 @@ function doesRoomHaveUnread(room) {
    const event = room.timeline[i];

    if (event.getId() === readUpToId) return false;
-    return true;
+
+    if (supportEvents.includes(event.getType())) {
+      return true;
+    }
  }
  return true;
 }

 export {
-  getBaseUrl, getUsername,
+  getBaseUrl, getUsername, getUsernameOfRoomMember,
  isRoomAliasAvailable, doesRoomHaveUnread,
 };
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -1,5 +1,6 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
+const webpack = require('webpack');

 module.exports = {
  entry: {
@@ -14,6 +15,7 @@ module.exports = {
      'fs': require.resolve('browserify-fs'),
      'stream': require.resolve('stream-browserify'),
      'util': require.resolve('util/'),
+      'assert': require.resolve('assert/'),
    }
  },
  node: {
@@ -64,6 +66,9 @@ module.exports = {
          appleStartup: false,
        }
      }
-    })
+    }),
+    new webpack.DefinePlugin({
+      'process.env': JSON.stringify(process.env),
+    }),
  ],
 };
Author	SHA1	Message	Date
Ajay Bura	8939927543	Updated matrix-js-sdk to v12.4.1 (Security fix)	2021-09-13 17:32:32 +05:30
unknown	b5dfc337ec	refectored Drawer component and added Postie	2021-08-30 21:12:24 +05:30
unknown	8996b562bc	created Postie	2021-08-30 21:03:59 +05:30
unknown	1ae6186647	Updated link	2021-08-30 11:17:08 +05:30
unknown	2848417cf5	refectored navigation	2021-08-30 08:31:13 +05:30
unknown	d3506acd94	refactored ChannelSelector component	2021-08-29 13:57:55 +05:30
unknown	9e9ea41bdd	updated NotificationBadge component	2021-08-28 18:16:20 +05:30
unknown	7b0aa7b770	input esc btn color changed	2021-08-27 20:06:06 +05:30
unknown	3a25d108fe	v1.2.0	2021-08-26 18:30:31 +05:30
unknown	d98e213b92	fixed inconsistent disply name	2021-08-26 18:28:33 +05:30
unknown	4d44562ada	fixed #75 : added esc btn to disable cmd mode	2021-08-26 15:45:31 +05:30
unknown	b733b3c59f	fixed #56 : tab (after last cmd suggestion) and esc will focus back to input	2021-08-26 14:43:14 +05:30
unknown	7b54988514	close #72 : Hide unread badge when there aren't any messages	2021-08-26 10:36:41 +05:30
unknown	ec4da47af6	fusejs uninstalled	2021-08-25 15:16:07 +05:30
unknown	633d59c13b	replaced fusejs in Emojiboard	2021-08-25 15:00:40 +05:30
unknown	c06a92e0ae	fixed #76	2021-08-25 14:06:13 +05:30
unknown	18bd9d62cb	fixed #71 : input autofocus on touch devices	2021-08-25 13:40:38 +05:30
unknown	0bce6c6a46	added focus input on reply click	2021-08-25 13:02:18 +05:30
Ajay Bura	0465442803	changed heading lvl in PR template	2021-08-24 19:02:10 +05:30
unknown	eb667bc436	close #2 : added autocomplete for display name & replace fusejs	2021-08-24 15:31:20 +05:30
unknown	c81628a66e	added async search capability	2021-08-23 21:26:23 +05:30
unknown	50d3631bc4	fixed emojiboard opening	2021-08-22 18:15:20 +05:30
unknown	e971069595	chat scrollback performance improved	2021-08-21 18:39:21 +05:30
unknown	ac4c0ec1f6	added support for msg editing [#40 ]	2021-08-20 19:12:57 +05:30
unknown	fe3d2e0af4	added msg edit component [#40 ]	2021-08-20 19:12:07 +05:30
unknown	a4b762e1b1	added device key in settings	2021-08-19 22:24:09 +05:30
unknown	daa0015fbd	fixed bridge reply formatting	2021-08-18 15:51:57 +05:30
unknown	804248d6ad	added sticker viewing support	2021-08-18 14:56:23 +05:30
unknown	78c4c67a6c	implemented #63 : non kick leave msgs	2021-08-18 14:05:10 +05:30
unknown	c23be53bfd	fixed crashes on bad media data	2021-08-18 13:55:44 +05:30
unknown	d7e3e70430	Fixed #59 : Consistant channel avatar bg	2021-08-17 17:04:21 +05:30
unknown	e95a859ee9	Fixed #59 : Updated channel intro	2021-08-17 16:51:22 +05:30
unknown	1a3704e700	Fixed #59 : DM room avatar	2021-08-17 16:37:31 +05:30
unknown	f49048c6e1	replaced commonmark with micromark and gfm support	2021-08-17 15:10:44 +05:30
unknown	59226365c5	reworded to seen by	2021-08-16 17:58:46 +05:30
unknown	683ce431db	added read receipt support	2021-08-16 17:51:23 +05:30
unknown	8d4e796f42	added ReadReceipts component	2021-08-16 17:37:29 +05:30
unknown	3da1fbf6ca	added dialog component	2021-08-16 17:34:19 +05:30
unknown	419e25df23	No known servers on channel join bug fixed	2021-08-15 22:25:07 +05:30
unknown	7fddf80c09	bug fixed attachment related	2021-08-15 18:57:05 +05:30
unknown	fa85e61d6f	added support for sending reaction	2021-08-15 13:59:09 +05:30
unknown	ebac0db0df	EmojiBoard bug fixed	2021-08-14 10:29:28 +05:30
unknown	0404f30c87	made EmojiBoard reusable	2021-08-14 10:19:29 +05:30
unknown	769fd7b524	improved EmojiBoard	2021-08-13 16:31:22 +05:30
unknown	4b5553abef	removed username regex from login	2021-08-12 16:18:01 +05:30
unknown	e730eb3a32	fixed reply formatting	2021-08-12 14:37:00 +05:30
unknown	2933b6e732	reply overflow fixed	2021-08-12 12:12:59 +05:30