Merge branch 'dev' into sidebar-update

Add cancel edit-message on Escape Key press (#765 )
Order category by AtoZ (#769 )
2022-08-20 20:46:43 +05:30 · 2022-08-20 18:56:37 +05:30 · 2022-08-20 16:29:07 +05:30 · 2022-08-20 16:21:22 +05:30 · 2022-08-20 13:58:24 +05:30 · 2022-08-20 13:27:03 +05:30
62 changed files with 2681 additions and 515 deletions
@@ -15,7 +15,7 @@ jobs:
      - name: Checkout repository
        uses: actions/checkout@v3.0.2
      - name: Build Docker image
-        uses: docker/build-push-action@v3.1.0
+        uses: docker/build-push-action@v3.1.1
        with:
          context: .
          push: false
@@ -86,7 +86,7 @@ jobs:
        with:
          images: ajbura/cinny
      - name: Build and push Docker image
-        uses: docker/build-push-action@v3.1.0
+        uses: docker/build-push-action@v3.1.1
        with:
          context: .
          platforms: linux/amd64,linux/arm64
@@ -1,19 +1,20 @@
 {
  "name": "cinny",
-  "version": "2.0.4",
+  "version": "2.1.2",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "cinny",
-      "version": "2.0.4",
+      "version": "2.1.2",
      "license": "MIT",
      "dependencies": {
-        "@fontsource/inter": "^4.5.11",
-        "@fontsource/roboto": "^4.5.7",
-        "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
+        "@fontsource/inter": "^4.5.12",
+        "@fontsource/roboto": "^4.5.8",
+        "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
        "@tippyjs/react": "^4.2.6",
        "babel-polyfill": "^6.26.0",
+        "blurhash": "^1.1.5",
        "browser-encrypt-attachment": "^0.3.0",
        "dateformat": "^5.0.3",
        "emojibase-data": "^7.0.1",
@@ -24,7 +25,7 @@
        "katex": "^0.16.0",
        "linkify-html": "^4.0.0-beta.5",
        "linkifyjs": "^4.0.0-beta.5",
-        "matrix-js-sdk": "^18.1.0",
+        "matrix-js-sdk": "^19.2.0",
        "micromark": "^3.0.10",
        "micromark-extension-gfm": "^2.0.1",
        "micromark-extension-math": "^2.0.2",
@@ -34,6 +35,7 @@
        "prop-types": "^15.8.1",
        "react": "^17.0.2",
        "react-autosize-textarea": "^7.1.0",
+        "react-blurhash": "^0.1.3",
        "react-dnd": "^15.1.2",
        "react-dnd-html5-backend": "^15.1.3",
        "react-dom": "^17.0.2",
@@ -68,7 +70,7 @@
        "html-webpack-plugin": "^5.3.1",
        "mini-css-extract-plugin": "^2.6.1",
        "path-browserify": "^1.0.1",
-        "sass": "^1.54.1",
+        "sass": "^1.54.3",
        "sass-loader": "^13.0.2",
        "stream-browserify": "^3.0.0",
        "style-loader": "^3.3.1",
@@ -1835,14 +1837,14 @@
      }
    },
    "node_modules/@fontsource/inter": {
-      "version": "4.5.11",
-      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.11.tgz",
-      "integrity": "sha512-toizzQkfXL8YJcG/f8j3EYXYGQe4OxiDEItThSigvHU+cYNDw8HPp3wLYQX745hddsnHqOGCM4exitFSBOU8+w=="
+      "version": "4.5.12",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.12.tgz",
+      "integrity": "sha512-bGKk4/8tube/nCk8hav0ZDBVbzJzc7m0Vt4xF5p15IN4YImwGdtKG38Oq5bU8xHNS+VfvbFFCepgQNj7Pr/Lvg=="
    },
    "node_modules/@fontsource/roboto": {
-      "version": "4.5.7",
-      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-4.5.7.tgz",
-      "integrity": "sha512-m57UMER23Mk6Drg9OjtHW1Y+0KPGyZfE5XJoPTOsLARLar6013kJj4X2HICt+iFLJqIgTahA/QAvSn9lwF1EEw=="
+      "version": "4.5.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-4.5.8.tgz",
+      "integrity": "sha512-CnD7zLItIzt86q4Sj3kZUiLcBk1dSk81qcqgMGaZe7SQ1P8hFNxhMl5AZthK1zrDM5m74VVhaOpuMGIL4gagaA=="
    },
    "node_modules/@humanwhocodes/config-array": {
      "version": "0.10.4",
@@ -2423,9 +2425,9 @@
      "dev": true
    },
    "node_modules/@matrix-org/olm": {
-      "version": "3.2.8",
-      "resolved": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
-      "integrity": "sha512-yCJzEYY2aG1z+7nxKYZC4DFYwQO/5iG019qgotJhauYJRhEG9gLrKTvXO6lRHS8TjnZzsZFZyO/hQUlI4Dryig==",
+      "version": "3.2.12",
+      "resolved": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
+      "integrity": "sha512-muHkYUAXyRDg88YVFlmFY35vgLPovK2YPkuEtBfgnmBcxJvLpV9UMcMMxNkf8opjMV1k/NJ4niFQMzwd4UQOiA==",
      "license": "Apache-2.0"
    },
    "node_modules/@nodelib/fs.scandir": {
@@ -3463,12 +3465,9 @@
      "dev": true
    },
    "node_modules/base-x": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
-      "integrity": "sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==",
-      "dependencies": {
-        "safe-buffer": "^5.0.1"
-      }
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/base-x/-/base-x-4.0.0.tgz",
+      "integrity": "sha512-FuwxlW4H5kh37X/oW59pwTzzTKRzfrrQwhmyspRM7swOEZcHtDZSCt45U6oKgtuFE+WYPblePMVIPR4RZrh/hw=="
    },
    "node_modules/base64-js": {
      "version": "1.5.1",
@@ -3558,6 +3557,11 @@
      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
      "dev": true
    },
+    "node_modules/blurhash": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/blurhash/-/blurhash-1.1.5.tgz",
+      "integrity": "sha512-a+LO3A2DfxTaTztsmkbLYmUzUeApi0LZuKalwbNmqAHR6HhJGMt1qSV/R3wc+w4DL28holjqO3Bg74aUGavGjg=="
+    },
    "node_modules/bmp-js": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/bmp-js/-/bmp-js-0.1.0.tgz",
@@ -3810,11 +3814,11 @@
      }
    },
    "node_modules/bs58": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/bs58/-/bs58-4.0.1.tgz",
-      "integrity": "sha1-vhYedsNU9veIrkBx9j806MTwpCo=",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/bs58/-/bs58-5.0.0.tgz",
+      "integrity": "sha512-r+ihvQJvahgYT50JD05dyJNKlmmSlMoOGwn1lCcEzanPglg7TxYjioQUYehQ9mAR/+hOSd2jRc/Z2y5UxBymvQ==",
      "dependencies": {
-        "base-x": "^3.0.2"
+        "base-x": "^4.0.0"
      }
    },
    "node_modules/buffer": {
@@ -9100,18 +9104,18 @@
      "integrity": "sha512-9jl4wtWanUFSy2sr2lCjErN/oC8KTAtaeaozJtrgot1JiQcEI4Rda9OLgQ7nLKaqb4Z/QUx/fR3XpDzm5Jy1JA=="
    },
    "node_modules/matrix-js-sdk": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-18.1.0.tgz",
-      "integrity": "sha512-O5D36paIsY7a2M2mOo7KKU7v1Mb3PVkmYKupXYcXd9gB/Ki1K4mds+vSDEhgkKyKwk6MK1AV/vgvp0xJCsttvg==",
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-19.2.0.tgz",
+      "integrity": "sha512-alvTasCTCo/XXSIkKEj8xKe1NMsyiVDDVIQdU9ZHI1aePq+DrAcx8CqB7L/dgjk842v+63Eke1f/jZuFWvjn4w==",
      "dependencies": {
        "@babel/runtime": "^7.12.5",
        "another-json": "^0.2.0",
        "browser-request": "^0.3.3",
-        "bs58": "^4.0.1",
+        "bs58": "^5.0.0",
        "content-type": "^1.0.4",
        "loglevel": "^1.7.1",
        "matrix-events-sdk": "^0.0.1-beta.7",
-        "p-retry": "^4.5.0",
+        "p-retry": "4",
        "qs": "^6.9.6",
        "request": "^2.88.2",
        "unhomoglyph": "^1.0.6"
@@ -11540,6 +11544,15 @@
        "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0"
      }
    },
+    "node_modules/react-blurhash": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/react-blurhash/-/react-blurhash-0.1.3.tgz",
+      "integrity": "sha512-Q9lqbXg92NU6/2DoIl/cBM8YWL+Z4X66OiG4aT9ozOgjBwx104LHFCH5stf6aF+s0Q9Wf310Ul+dG+VXJltmPg==",
+      "peerDependencies": {
+        "blurhash": "^1.1.1",
+        "react": ">=15"
+      }
+    },
    "node_modules/react-dnd": {
      "version": "15.1.2",
      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-15.1.2.tgz",
@@ -12168,9 +12181,9 @@
      }
    },
    "node_modules/sass": {
-      "version": "1.54.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.1.tgz",
-      "integrity": "sha512-GHJJr31Me32RjjUBagyzx8tzjKBUcDwo5239XANIRBq0adDu5iIG0aFO0i/TBb/4I9oyxkEv44nq/kL1DxdDhA==",
+      "version": "1.54.3",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.3.tgz",
+      "integrity": "sha512-fLodey5Qd41Pxp/Tk7Al97sViYwF/TazRc5t6E65O7JOk4XF8pzwIW7CvCxYVOfJFFI/1x5+elDyBIixrp+zrw==",
      "dev": true,
      "dependencies": {
        "chokidar": ">=3.0.0 <4.0.0",
@@ -15513,14 +15526,14 @@
      }
    },
    "@fontsource/inter": {
-      "version": "4.5.11",
-      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.11.tgz",
-      "integrity": "sha512-toizzQkfXL8YJcG/f8j3EYXYGQe4OxiDEItThSigvHU+cYNDw8HPp3wLYQX745hddsnHqOGCM4exitFSBOU8+w=="
+      "version": "4.5.12",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.12.tgz",
+      "integrity": "sha512-bGKk4/8tube/nCk8hav0ZDBVbzJzc7m0Vt4xF5p15IN4YImwGdtKG38Oq5bU8xHNS+VfvbFFCepgQNj7Pr/Lvg=="
    },
    "@fontsource/roboto": {
-      "version": "4.5.7",
-      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-4.5.7.tgz",
-      "integrity": "sha512-m57UMER23Mk6Drg9OjtHW1Y+0KPGyZfE5XJoPTOsLARLar6013kJj4X2HICt+iFLJqIgTahA/QAvSn9lwF1EEw=="
+      "version": "4.5.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-4.5.8.tgz",
+      "integrity": "sha512-CnD7zLItIzt86q4Sj3kZUiLcBk1dSk81qcqgMGaZe7SQ1P8hFNxhMl5AZthK1zrDM5m74VVhaOpuMGIL4gagaA=="
    },
    "@humanwhocodes/config-array": {
      "version": "0.10.4",
@@ -15972,8 +15985,8 @@
      "dev": true
    },
    "@matrix-org/olm": {
-      "version": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
-      "integrity": "sha512-yCJzEYY2aG1z+7nxKYZC4DFYwQO/5iG019qgotJhauYJRhEG9gLrKTvXO6lRHS8TjnZzsZFZyO/hQUlI4Dryig=="
+      "version": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
+      "integrity": "sha512-muHkYUAXyRDg88YVFlmFY35vgLPovK2YPkuEtBfgnmBcxJvLpV9UMcMMxNkf8opjMV1k/NJ4niFQMzwd4UQOiA=="
    },
    "@nodelib/fs.scandir": {
      "version": "2.1.5",
@@ -16876,12 +16889,9 @@
      "dev": true
    },
    "base-x": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
-      "integrity": "sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==",
-      "requires": {
-        "safe-buffer": "^5.0.1"
-      }
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/base-x/-/base-x-4.0.0.tgz",
+      "integrity": "sha512-FuwxlW4H5kh37X/oW59pwTzzTKRzfrrQwhmyspRM7swOEZcHtDZSCt45U6oKgtuFE+WYPblePMVIPR4RZrh/hw=="
    },
    "base64-js": {
      "version": "1.5.1",
@@ -16950,6 +16960,11 @@
        }
      }
    },
+    "blurhash": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/blurhash/-/blurhash-1.1.5.tgz",
+      "integrity": "sha512-a+LO3A2DfxTaTztsmkbLYmUzUeApi0LZuKalwbNmqAHR6HhJGMt1qSV/R3wc+w4DL28holjqO3Bg74aUGavGjg=="
+    },
    "bmp-js": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/bmp-js/-/bmp-js-0.1.0.tgz",
@@ -17158,11 +17173,11 @@
      }
    },
    "bs58": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/bs58/-/bs58-4.0.1.tgz",
-      "integrity": "sha1-vhYedsNU9veIrkBx9j806MTwpCo=",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/bs58/-/bs58-5.0.0.tgz",
+      "integrity": "sha512-r+ihvQJvahgYT50JD05dyJNKlmmSlMoOGwn1lCcEzanPglg7TxYjioQUYehQ9mAR/+hOSd2jRc/Z2y5UxBymvQ==",
      "requires": {
-        "base-x": "^3.0.2"
+        "base-x": "^4.0.0"
      }
    },
    "buffer": {
@@ -21233,18 +21248,18 @@
      "integrity": "sha512-9jl4wtWanUFSy2sr2lCjErN/oC8KTAtaeaozJtrgot1JiQcEI4Rda9OLgQ7nLKaqb4Z/QUx/fR3XpDzm5Jy1JA=="
    },
    "matrix-js-sdk": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-18.1.0.tgz",
-      "integrity": "sha512-O5D36paIsY7a2M2mOo7KKU7v1Mb3PVkmYKupXYcXd9gB/Ki1K4mds+vSDEhgkKyKwk6MK1AV/vgvp0xJCsttvg==",
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-19.2.0.tgz",
+      "integrity": "sha512-alvTasCTCo/XXSIkKEj8xKe1NMsyiVDDVIQdU9ZHI1aePq+DrAcx8CqB7L/dgjk842v+63Eke1f/jZuFWvjn4w==",
      "requires": {
        "@babel/runtime": "^7.12.5",
        "another-json": "^0.2.0",
        "browser-request": "^0.3.3",
-        "bs58": "^4.0.1",
+        "bs58": "^5.0.0",
        "content-type": "^1.0.4",
        "loglevel": "^1.7.1",
        "matrix-events-sdk": "^0.0.1-beta.7",
-        "p-retry": "^4.5.0",
+        "p-retry": "4",
        "qs": "^6.9.6",
        "request": "^2.88.2",
        "unhomoglyph": "^1.0.6"
@@ -22933,6 +22948,12 @@
        "prop-types": "^15.5.6"
      }
    },
+    "react-blurhash": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/react-blurhash/-/react-blurhash-0.1.3.tgz",
+      "integrity": "sha512-Q9lqbXg92NU6/2DoIl/cBM8YWL+Z4X66OiG4aT9ozOgjBwx104LHFCH5stf6aF+s0Q9Wf310Ul+dG+VXJltmPg==",
+      "requires": {}
+    },
    "react-dnd": {
      "version": "15.1.2",
      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-15.1.2.tgz",
@@ -23421,9 +23442,9 @@
      }
    },
    "sass": {
-      "version": "1.54.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.1.tgz",
-      "integrity": "sha512-GHJJr31Me32RjjUBagyzx8tzjKBUcDwo5239XANIRBq0adDu5iIG0aFO0i/TBb/4I9oyxkEv44nq/kL1DxdDhA==",
+      "version": "1.54.3",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.3.tgz",
+      "integrity": "sha512-fLodey5Qd41Pxp/Tk7Al97sViYwF/TazRc5t6E65O7JOk4XF8pzwIW7CvCxYVOfJFFI/1x5+elDyBIixrp+zrw==",
      "dev": true,
      "requires": {
        "chokidar": ">=3.0.0 <4.0.0",
@@ -1,6 +1,6 @@
 {
  "name": "cinny",
-  "version": "2.0.4",
+  "version": "2.1.2",
  "description": "Yet another matrix client",
  "main": "index.js",
  "engines": {
@@ -15,11 +15,12 @@
  "author": "Ajay Bura",
  "license": "MIT",
  "dependencies": {
-    "@fontsource/inter": "^4.5.11",
-    "@fontsource/roboto": "^4.5.7",
-    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
+    "@fontsource/inter": "^4.5.12",
+    "@fontsource/roboto": "^4.5.8",
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
    "@tippyjs/react": "^4.2.6",
    "babel-polyfill": "^6.26.0",
+    "blurhash": "^1.1.5",
    "browser-encrypt-attachment": "^0.3.0",
    "dateformat": "^5.0.3",
    "emojibase-data": "^7.0.1",
@@ -30,7 +31,7 @@
    "katex": "^0.16.0",
    "linkify-html": "^4.0.0-beta.5",
    "linkifyjs": "^4.0.0-beta.5",
-    "matrix-js-sdk": "^18.1.0",
+    "matrix-js-sdk": "^19.2.0",
    "micromark": "^3.0.10",
    "micromark-extension-gfm": "^2.0.1",
    "micromark-extension-math": "^2.0.2",
@@ -40,6 +41,7 @@
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-autosize-textarea": "^7.1.0",
+    "react-blurhash": "^0.1.3",
    "react-dnd": "^15.1.2",
    "react-dnd-html5-backend": "^15.1.3",
    "react-dom": "^17.0.2",
@@ -74,7 +76,7 @@
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^2.6.1",
    "path-browserify": "^1.0.1",
-    "sass": "^1.54.1",
+    "sass": "^1.54.3",
    "sass-loader": "^13.0.2",
    "stream-browserify": "^3.0.0",
    "style-loader": "^3.3.1",
@@ -1,12 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g>
-	<polygon points="14,3 14,5 17.8,5 12.9,9.9 14.3,11.3 19,6.6 19,10.2 21,10.2 21,3 	"/>
-	<path d="M3,10.2h2V5h5V3H5C3.9,3,3,3.9,3,5V10.2z"/>
-	<path d="M5,14.2H3V19c0,1.1,0.9,2,2,2h5v-2H5V14.2z"/>
-	<path d="M19,19h-5v2h5c1.1,0,2-0.9,2-2v-4.8h-2V19z"/>
-</g>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 3V5H17.8L12.9 9.9L14.3 11.3L19 6.6V10.2H21V3H14Z" fill="black"/>
+<path d="M5 5H10V3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V14.2H19V19H5V5Z" fill="black"/>
 </svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 3L21 8V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H16ZM19 9H17C15.8954 9 15 8.10457 15 7V5H5V19H19V9Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12H17C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12H9Z" fill="black"/>
+</svg>
@@ -26,10 +26,10 @@
  &--icon {
    @include dir.side(padding, var(--sp-tight), var(--sp-loose));

-    .ic-raw {
-      @include dir.side(margin, 0, var(--sp-extra-tight));
-      flex-shrink: 0;
-    }
+  }
+  .ic-raw {
+    @include dir.side(margin, 0, var(--sp-extra-tight));
+    flex-shrink: 0;
  }
 }

@@ -16,6 +16,7 @@ function Input({
      { resizable
        ? (
          <TextareaAutosize
+            dir="auto"
            style={{ minHeight: `${minHeight}px` }}
            name={name}
            id={id}
@@ -34,6 +35,7 @@ function Input({
          />
        ) : (
          <input
+            dir="auto"
            ref={forwardRef}
            id={id}
            name={name}
@@ -42,7 +42,6 @@ function RawModal({
      shouldCloseOnEsc={closeFromOutside}
      shouldCloseOnOverlayClick={closeFromOutside}
      shouldReturnFocusAfterClose={false}
-      closeTimeoutMS={300}
    >
      {children}
    </Modal>
@@ -1,33 +1,9 @@
-.ReactModal__Overlay {
-  opacity: 0;
-  transition: opacity 200ms var(--fluid-slide-up);
-}
-.ReactModal__Overlay--after-open{
-  opacity: 1;
-}
-.ReactModal__Overlay--before-close{
-  opacity: 0;
-}
-
-.ReactModal__Content {
-  transform: translateY(100%);
-  transition: transform 200ms var(--fluid-slide-up);
-}
-
-.ReactModal__Content--after-open{
-  transform: translateY(0);
-}
-
-.ReactModal__Content--before-close{
-  transform: translateY(100%);
-}
-
 .raw-modal {
  --small-modal-width: 525px;
  --medium-modal-width: 712px;
  --large-modal-width: 1024px;

-
+  position: relative;
  width: 100%;
  max-height: 100%;
  border-radius: var(--bo-radius);
@@ -60,4 +36,31 @@
    height: 100%;
    background-color: var(--bg-overlay);
  }
-}
+}
+
+.ReactModal__Overlay {
+  animation: raw-modal--overlay 150ms;
+}
+
+.ReactModal__Content {
+  animation: raw-modal--content 150ms;
+}
+
+@keyframes raw-modal--content {
+  0% {
+    transform: translateY(100px);
+    opacity: .5;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes raw-modal--overlay {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import dateFormat from 'dateformat';
+import { isInSameDay } from '../../../util/common';
+
+function Time({ timestamp, fullTime }) {
+  const date = new Date(timestamp);
+
+  const formattedFullTime = dateFormat(date, 'dd mmmm yyyy, hh:MM TT');
+  let formattedDate = formattedFullTime;
+
+  if (!fullTime) {
+    const compareDate = new Date();
+    const isToday = isInSameDay(date, compareDate);
+    compareDate.setDate(compareDate.getDate() - 1);
+    const isYesterday = isInSameDay(date, compareDate);
+
+    formattedDate = dateFormat(date, isToday || isYesterday ? 'hh:MM TT' : 'dd/mm/yyyy');
+    if (isYesterday) {
+      formattedDate = `Yesterday, ${formattedDate}`;
+    }
+  }
+
+  return (
+    <time
+      dateTime={date.toISOString()}
+      title={formattedFullTime}
+    >
+      {formattedDate}
+    </time>
+  );
+}
+
+Time.defaultProps = {
+  fullTime: false,
+};
+
+Time.propTypes = {
+  timestamp: PropTypes.number.isRequired,
+  fullTime: PropTypes.bool,
+};
+
+export default Time;
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ImageLightbox.scss';
+import FileSaver from 'file-saver';
+
+import Text from '../../atoms/text/Text';
+import RawModal from '../../atoms/modal/RawModal';
+import IconButton from '../../atoms/button/IconButton';
+
+import DownloadSVG from '../../../../public/res/ic/outlined/download.svg';
+import ExternalSVG from '../../../../public/res/ic/outlined/external.svg';
+
+function ImageLightbox({
+  url, alt, isOpen, onRequestClose,
+}) {
+  const handleDownload = () => {
+    FileSaver.saveAs(url, alt);
+  };
+
+  return (
+    <RawModal
+      className="image-lightbox__modal"
+      overlayClassName="image-lightbox__overlay"
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      size="large"
+    >
+      <div className="image-lightbox__header">
+        <Text variant="b2" weight="medium">{alt}</Text>
+        <IconButton onClick={() => window.open(url)} size="small" src={ExternalSVG} />
+        <IconButton onClick={handleDownload} size="small" src={DownloadSVG} />
+      </div>
+      <div className="image-lightbox__content">
+        <img src={url} alt={alt} />
+      </div>
+    </RawModal>
+  );
+}
+
+ImageLightbox.propTypes = {
+  url: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onRequestClose: PropTypes.func.isRequired,
+};
+
+export default ImageLightbox;
@@ -0,0 +1,50 @@
+@use '../../partials/flex';
+@use '../../partials/text';
+
+.image-lightbox__modal {
+  box-shadow: none;
+  width: unset;
+  gap: var(--sp-normal);
+
+  border-radius: 0;
+  pointer-events: none;
+
+  & .text {
+    color: white;
+  }
+  & .ic-raw {
+    background-color: white;
+  }
+}
+
+.image-lightbox__overlay {
+  background-color: var(--bg-overlay-low);
+}
+
+
+.image-lightbox__header > *,
+.image-lightbox__content > * {
+  pointer-events: all;
+}
+.image-lightbox__header {
+  display: flex;
+  align-items: center;
+
+  & > .text {
+    @extend .cp-fx__item-one;
+    @extend .cp-txt__ellipsis;
+  }
+}
+.image-lightbox__content {
+  display: flex;
+  justify-content: center;
+  max-height: 90vh;
+
+  & img {
+    background-color: var(--bg-surface-low);
+    object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: var(--bo-radius);
+  }
+}
@@ -0,0 +1,469 @@
+import React, {
+  useState, useMemo, useReducer, useEffect,
+} from 'react';
+import PropTypes from 'prop-types';
+import './ImagePack.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import { openReusableDialog } from '../../../client/action/navigation';
+import { suffixRename } from '../../../util/common';
+
+import Button from '../../atoms/button/Button';
+import Text from '../../atoms/text/Text';
+import Input from '../../atoms/input/Input';
+import Checkbox from '../../atoms/button/Checkbox';
+import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
+
+import { ImagePack as ImagePackBuilder } from '../../organisms/emoji-board/custom-emoji';
+import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
+import ImagePackProfile from './ImagePackProfile';
+import ImagePackItem from './ImagePackItem';
+import ImagePackUpload from './ImagePackUpload';
+
+const renameImagePackItem = (shortcode) => new Promise((resolve) => {
+  let isCompleted = false;
+
+  openReusableDialog(
+    <Text variant="s1" weight="medium">Rename</Text>,
+    (requestClose) => (
+      <div style={{ padding: 'var(--sp-normal)' }}>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            const sc = e.target.shortcode.value;
+            if (sc.trim() === '') return;
+            isCompleted = true;
+            resolve(sc.trim());
+            requestClose();
+          }}
+        >
+          <Input
+            value={shortcode}
+            name="shortcode"
+            label="Shortcode"
+            autoFocus
+            required
+          />
+          <div style={{ height: 'var(--sp-normal)' }} />
+          <Button variant="primary" type="submit">Rename</Button>
+        </form>
+      </div>
+    ),
+    () => {
+      if (!isCompleted) resolve(null);
+    },
+  );
+});
+
+function getUsage(usage) {
+  if (usage.includes('emoticon') && usage.includes('sticker')) return 'both';
+  if (usage.includes('emoticon')) return 'emoticon';
+  if (usage.includes('sticker')) return 'sticker';
+
+  return 'both';
+}
+
+function isGlobalPack(roomId, stateKey) {
+  const mx = initMatrix.matrixClient;
+  const globalContent = mx.getAccountData('im.ponies.emote_rooms')?.getContent();
+  if (typeof globalContent !== 'object') return false;
+
+  const { rooms } = globalContent;
+  if (typeof rooms !== 'object') return false;
+
+  return rooms[roomId]?.[stateKey] !== undefined;
+}
+
+function useRoomImagePack(roomId, stateKey) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+
+  const packEvent = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
+  const pack = useMemo(() => (
+    ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent())
+  ), [room, stateKey]);
+
+  const sendPackContent = (content) => {
+    mx.sendStateEvent(roomId, 'im.ponies.room_emotes', content, stateKey);
+  };
+
+  return {
+    pack,
+    sendPackContent,
+  };
+}
+
+function useUserImagePack() {
+  const mx = initMatrix.matrixClient;
+  const packEvent = mx.getAccountData('im.ponies.user_emotes');
+  const pack = useMemo(() => (
+    ImagePackBuilder.parsePack(mx.getUserId(), packEvent?.getContent() ?? {
+      pack: { display_name: 'Personal' },
+      images: {},
+    })
+  ), []);
+
+  const sendPackContent = (content) => {
+    mx.setAccountData('im.ponies.user_emotes', content);
+  };
+
+  return {
+    pack,
+    sendPackContent,
+  };
+}
+
+function useImagePackHandles(pack, sendPackContent) {
+  const [, forceUpdate] = useReducer((count) => count + 1, 0);
+
+  const getNewKey = (key) => {
+    if (typeof key !== 'string') return undefined;
+    let newKey = key?.replace(/\s/g, '_');
+    if (pack.getImages().get(newKey)) {
+      newKey = suffixRename(
+        newKey,
+        (suffixedKey) => pack.getImages().get(suffixedKey),
+      );
+    }
+    return newKey;
+  };
+
+  const handleAvatarChange = (url) => {
+    pack.setAvatarUrl(url);
+    sendPackContent(pack.getContent());
+    forceUpdate();
+  };
+  const handleEditProfile = (name, attribution) => {
+    pack.setDisplayName(name);
+    pack.setAttribution(attribution);
+    sendPackContent(pack.getContent());
+    forceUpdate();
+  };
+  const handleUsageChange = (newUsage) => {
+    const usage = [];
+    if (newUsage === 'emoticon' || newUsage === 'both') usage.push('emoticon');
+    if (newUsage === 'sticker' || newUsage === 'both') usage.push('sticker');
+    pack.setUsage(usage);
+    pack.getImages().forEach((img) => pack.setImageUsage(img.shortcode, undefined));
+
+    sendPackContent(pack.getContent());
+    forceUpdate();
+  };
+
+  const handleRenameItem = async (key) => {
+    const newKey = getNewKey(await renameImagePackItem(key));
+
+    if (!newKey || newKey === key) return;
+    pack.updateImageKey(key, newKey);
+
+    sendPackContent(pack.getContent());
+    forceUpdate();
+  };
+  const handleDeleteItem = async (key) => {
+    const isConfirmed = await confirmDialog(
+      'Delete',
+      `Are you sure that you want to delete "${key}"?`,
+      'Delete',
+      'danger',
+    );
+    if (!isConfirmed) return;
+    pack.removeImage(key);
+
+    sendPackContent(pack.getContent());
+    forceUpdate();
+  };
+  const handleUsageItem = (key, newUsage) => {
+    const usage = [];
+    if (newUsage === 'emoticon' || newUsage === 'both') usage.push('emoticon');
+    if (newUsage === 'sticker' || newUsage === 'both') usage.push('sticker');
+    pack.setImageUsage(key, usage);
+
+    sendPackContent(pack.getContent());
+    forceUpdate();
+  };
+  const handleAddItem = (key, url) => {
+    const newKey = getNewKey(key);
+    if (!newKey || !url) return;
+
+    pack.addImage(newKey, {
+      url,
+    });
+
+    sendPackContent(pack.getContent());
+    forceUpdate();
+  };
+
+  return {
+    handleAvatarChange,
+    handleEditProfile,
+    handleUsageChange,
+    handleRenameItem,
+    handleDeleteItem,
+    handleUsageItem,
+    handleAddItem,
+  };
+}
+
+function addGlobalImagePack(mx, roomId, stateKey) {
+  const content = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? {};
+  if (!content.rooms) content.rooms = {};
+  if (!content.rooms[roomId]) content.rooms[roomId] = {};
+  content.rooms[roomId][stateKey] = {};
+  return mx.setAccountData('im.ponies.emote_rooms', content);
+}
+function removeGlobalImagePack(mx, roomId, stateKey) {
+  const content = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? {};
+  if (!content.rooms) return Promise.resolve();
+  if (!content.rooms[roomId]) return Promise.resolve();
+  delete content.rooms[roomId][stateKey];
+  if (Object.keys(content.rooms[roomId]).length === 0) {
+    delete content.rooms[roomId];
+  }
+  return mx.setAccountData('im.ponies.emote_rooms', content);
+}
+
+function ImagePack({ roomId, stateKey, handlePackDelete }) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  const [viewMore, setViewMore] = useState(false);
+  const [isGlobal, setIsGlobal] = useState(isGlobalPack(roomId, stateKey));
+
+  const { pack, sendPackContent } = useRoomImagePack(roomId, stateKey);
+
+  const {
+    handleAvatarChange,
+    handleEditProfile,
+    handleUsageChange,
+    handleRenameItem,
+    handleDeleteItem,
+    handleUsageItem,
+    handleAddItem,
+  } = useImagePackHandles(pack, sendPackContent);
+
+  const handleGlobalChange = (isG) => {
+    setIsGlobal(isG);
+    if (isG) addGlobalImagePack(mx, roomId, stateKey);
+    else removeGlobalImagePack(mx, roomId, stateKey);
+  };
+
+  const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
+  const canChange = room.currentState.hasSufficientPowerLevelFor('state_default', myPowerlevel);
+
+  const handleDeletePack = async () => {
+    const isConfirmed = await confirmDialog(
+      'Delete Pack',
+      `Are you sure that you want to delete "${pack.displayName}"?`,
+      'Delete',
+      'danger',
+    );
+    if (!isConfirmed) return;
+    handlePackDelete(stateKey);
+  };
+
+  const images = [...pack.images].slice(0, viewMore ? pack.images.size : 2);
+
+  return (
+    <div className="image-pack">
+      <ImagePackProfile
+        avatarUrl={pack.avatarUrl ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, 'crop') : null}
+        displayName={pack.displayName ?? 'Unknown'}
+        attribution={pack.attribution}
+        usage={getUsage(pack.usage)}
+        onUsageChange={canChange ? handleUsageChange : null}
+        onAvatarChange={canChange ? handleAvatarChange : null}
+        onEditProfile={canChange ? handleEditProfile : null}
+      />
+      { canChange && (
+        <ImagePackUpload onUpload={handleAddItem} />
+      )}
+      { images.length === 0 ? null : (
+        <div>
+          <div className="image-pack__header">
+            <Text variant="b3">Image</Text>
+            <Text variant="b3">Shortcode</Text>
+            <Text variant="b3">Usage</Text>
+          </div>
+          {images.map(([shortcode, image]) => (
+            <ImagePackItem
+              key={shortcode}
+              url={mx.mxcUrlToHttp(image.mxc)}
+              shortcode={shortcode}
+              usage={getUsage(image.usage)}
+              onUsageChange={canChange ? handleUsageItem : undefined}
+              onDelete={canChange ? handleDeleteItem : undefined}
+              onRename={canChange ? handleRenameItem : undefined}
+            />
+          ))}
+        </div>
+      )}
+      {(pack.images.size > 2 || handlePackDelete) && (
+        <div className="image-pack__footer">
+          {pack.images.size > 2 && (
+            <Button onClick={() => setViewMore(!viewMore)}>
+              {
+                viewMore
+                  ? 'View less'
+                  : `View ${pack.images.size - 2} more`
+              }
+            </Button>
+          )}
+          { handlePackDelete && <Button variant="danger" onClick={handleDeletePack}>Delete Pack</Button>}
+        </div>
+      )}
+      <div className="image-pack__global">
+        <Checkbox variant="positive" onToggle={handleGlobalChange} isActive={isGlobal} />
+        <div>
+          <Text variant="b2">Use globally</Text>
+          <Text variant="b3">Add this pack to your account to use in all rooms.</Text>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+ImagePack.defaultProps = {
+  handlePackDelete: null,
+};
+ImagePack.propTypes = {
+  roomId: PropTypes.string.isRequired,
+  stateKey: PropTypes.string.isRequired,
+  handlePackDelete: PropTypes.func,
+};
+
+function ImagePackUser() {
+  const mx = initMatrix.matrixClient;
+  const [viewMore, setViewMore] = useState(false);
+
+  const { pack, sendPackContent } = useUserImagePack();
+
+  const {
+    handleAvatarChange,
+    handleEditProfile,
+    handleUsageChange,
+    handleRenameItem,
+    handleDeleteItem,
+    handleUsageItem,
+    handleAddItem,
+  } = useImagePackHandles(pack, sendPackContent);
+
+  const images = [...pack.images].slice(0, viewMore ? pack.images.size : 2);
+
+  return (
+    <div className="image-pack">
+      <ImagePackProfile
+        avatarUrl={pack.avatarUrl ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, 'crop') : null}
+        displayName={pack.displayName ?? 'Personal'}
+        attribution={pack.attribution}
+        usage={getUsage(pack.usage)}
+        onUsageChange={handleUsageChange}
+        onAvatarChange={handleAvatarChange}
+        onEditProfile={handleEditProfile}
+      />
+      <ImagePackUpload onUpload={handleAddItem} />
+      { images.length === 0 ? null : (
+        <div>
+          <div className="image-pack__header">
+            <Text variant="b3">Image</Text>
+            <Text variant="b3">Shortcode</Text>
+            <Text variant="b3">Usage</Text>
+          </div>
+          {images.map(([shortcode, image]) => (
+            <ImagePackItem
+              key={shortcode}
+              url={mx.mxcUrlToHttp(image.mxc)}
+              shortcode={shortcode}
+              usage={getUsage(image.usage)}
+              onUsageChange={handleUsageItem}
+              onDelete={handleDeleteItem}
+              onRename={handleRenameItem}
+            />
+          ))}
+        </div>
+      )}
+      {(pack.images.size > 2) && (
+        <div className="image-pack__footer">
+          <Button onClick={() => setViewMore(!viewMore)}>
+            {
+              viewMore
+                ? 'View less'
+                : `View ${pack.images.size - 2} more`
+            }
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function useGlobalImagePack() {
+  const [, forceUpdate] = useReducer((count) => count + 1, 0);
+  const mx = initMatrix.matrixClient;
+
+  const roomIdToStateKeys = new Map();
+  const globalContent = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? { rooms: {} };
+  const { rooms } = globalContent;
+
+  Object.keys(rooms).forEach((roomId) => {
+    if (typeof rooms[roomId] !== 'object') return;
+    const room = mx.getRoom(roomId);
+    const stateKeys = Object.keys(rooms[roomId]);
+    if (!room || stateKeys.length === 0) return;
+    roomIdToStateKeys.set(roomId, stateKeys);
+  });
+
+  useEffect(() => {
+    const handleEvent = (event) => {
+      if (event.getType() === 'im.ponies.emote_rooms') forceUpdate();
+    };
+    mx.addListener('accountData', handleEvent);
+    return () => {
+      mx.removeListener('accountData', handleEvent);
+    };
+  }, []);
+
+  return roomIdToStateKeys;
+}
+
+function ImagePackGlobal() {
+  const mx = initMatrix.matrixClient;
+  const roomIdToStateKeys = useGlobalImagePack();
+
+  const handleChange = (roomId, stateKey) => {
+    removeGlobalImagePack(mx, roomId, stateKey);
+  };
+
+  return (
+    <div className="image-pack-global">
+      <MenuHeader>Global packs</MenuHeader>
+      <div>
+        {
+          roomIdToStateKeys.size > 0
+            ? [...roomIdToStateKeys].map(([roomId, stateKeys]) => {
+              const room = mx.getRoom(roomId);
+              return (
+                stateKeys.map((stateKey) => {
+                  const data = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
+                  const pack = ImagePackBuilder.parsePack(data?.getId(), data?.getContent());
+                  if (!pack) return null;
+                  return (
+                    <div className="image-pack__global" key={pack.id}>
+                      <Checkbox variant="positive" onToggle={() => handleChange(roomId, stateKey)} isActive />
+                      <div>
+                        <Text variant="b2">{pack.displayName ?? 'Unknown'}</Text>
+                        <Text variant="b3">{room.name}</Text>
+                      </div>
+                    </div>
+                  );
+                })
+              );
+            })
+            : <div className="image-pack-global__empty"><Text>No global packs</Text></div>
+        }
+      </div>
+    </div>
+  );
+}
+
+export default ImagePack;
+
+export { ImagePackUser, ImagePackGlobal };
@@ -0,0 +1,47 @@
+@use '../../partials/flex';
+
+.image-pack {
+  &-item {
+    border-top: 1px solid var(--bg-surface-border);
+  }
+
+  &__header {
+    padding: var(--sp-extra-tight) var(--sp-normal);
+    display: flex;
+    align-items: center;
+    gap: var(--sp-normal);
+
+    & > *:nth-child(2) {
+      @extend .cp-fx__item-one;
+    }
+  }
+
+  &__footer {
+    padding: var(--sp-normal);
+    display: flex;
+    justify-content: space-between;
+    gap: var(--sp-tight);
+  }
+
+  &__global {
+    padding: var(--sp-normal);
+    padding-top: var(--sp-tight);
+    display: flex;
+    align-items: center;
+    gap: var(--sp-normal);
+  }
+}
+
+.image-pack-global {
+  &__empty {
+    text-align: center;
+    padding: var(--sp-extra-loose) var(--sp-normal);
+  }
+  & .image-pack__global {
+    padding: 0 var(--sp-normal);
+    padding-bottom: var(--sp-normal);
+    &:first-child {
+      padding-top: var(--sp-normal);
+    }
+  }
+}
@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ImagePackItem.scss';
+
+import { openReusableContextMenu } from '../../../client/action/navigation';
+import { getEventCords } from '../../../util/common';
+
+import Avatar from '../../atoms/avatar/Avatar';
+import Text from '../../atoms/text/Text';
+import Button from '../../atoms/button/Button';
+import RawIcon from '../../atoms/system-icons/RawIcon';
+import IconButton from '../../atoms/button/IconButton';
+import ImagePackUsageSelector from './ImagePackUsageSelector';
+
+import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
+import BinIC from '../../../../public/res/ic/outlined/bin.svg';
+
+function ImagePackItem({
+  url, shortcode, usage, onUsageChange, onDelete, onRename,
+}) {
+  const handleUsageSelect = (event) => {
+    openReusableContextMenu(
+      'bottom',
+      getEventCords(event, '.btn-surface'),
+      (closeMenu) => (
+        <ImagePackUsageSelector
+          usage={usage}
+          onSelect={(newUsage) => {
+            onUsageChange(shortcode, newUsage);
+            closeMenu();
+          }}
+        />
+      ),
+    );
+  };
+
+  return (
+    <div className="image-pack-item">
+      <Avatar imageSrc={url} size="extra-small" text={shortcode} bgColor="black" />
+      <div className="image-pack-item__content">
+        <Text>{shortcode}</Text>
+      </div>
+      <div className="image-pack-item__usage">
+        <div className="image-pack-item__btn">
+          {onRename && <IconButton tooltip="Rename" size="extra-small" src={PencilIC} onClick={() => onRename(shortcode)} />}
+          {onDelete && <IconButton tooltip="Delete" size="extra-small" src={BinIC} onClick={() => onDelete(shortcode)} />}
+        </div>
+        <Button onClick={onUsageChange ? handleUsageSelect : undefined}>
+          {onUsageChange && <RawIcon src={ChevronBottomIC} size="extra-small" />}
+          <Text variant="b2">
+            {usage === 'emoticon' && 'Emoji'}
+            {usage === 'sticker' && 'Sticker'}
+            {usage === 'both' && 'Both'}
+          </Text>
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+ImagePackItem.defaultProps = {
+  onUsageChange: null,
+  onDelete: null,
+  onRename: null,
+};
+ImagePackItem.propTypes = {
+  url: PropTypes.string.isRequired,
+  shortcode: PropTypes.string.isRequired,
+  usage: PropTypes.oneOf(['emoticon', 'sticker', 'both']).isRequired,
+  onUsageChange: PropTypes.func,
+  onDelete: PropTypes.func,
+  onRename: PropTypes.func,
+};
+
+export default ImagePackItem;
@@ -0,0 +1,43 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
+.image-pack-item {
+  margin: 0 var(--sp-normal);
+  padding: var(--sp-tight) 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-normal);
+
+  & .avatar-container img {
+    object-fit: contain;
+    border-radius: 0;
+  }
+
+  &__content {
+    @extend .cp-fx__item-one;
+  }
+
+  &__usage {
+    display: flex;
+    gap: var(--sp-ultra-tight);
+    & button {
+      padding: 6px;
+    }
+    & > button.btn-surface {
+      padding: 6px var(--sp-tight);
+      min-width: 0;
+      @include dir.side(margin, var(--sp-ultra-tight), 0);
+    }
+  }
+
+  &__btn {
+    display: none;
+  }
+  &:hover,
+  &:focus-within {
+    .image-pack-item__btn {
+      display: flex;
+      gap: var(--sp-ultra-tight);
+    }
+  }
+}
@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import './ImagePackProfile.scss';
+
+import { openReusableContextMenu } from '../../../client/action/navigation';
+import { getEventCords } from '../../../util/common';
+
+import Text from '../../atoms/text/Text';
+import Avatar from '../../atoms/avatar/Avatar';
+import Button from '../../atoms/button/Button';
+import IconButton from '../../atoms/button/IconButton';
+import Input from '../../atoms/input/Input';
+import ImageUpload from '../image-upload/ImageUpload';
+import ImagePackUsageSelector from './ImagePackUsageSelector';
+
+import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
+
+function ImagePackProfile({
+  avatarUrl, displayName, attribution, usage,
+  onUsageChange, onAvatarChange, onEditProfile,
+}) {
+  const [isEdit, setIsEdit] = useState(false);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    const { nameInput, attributionInput } = e.target;
+    const name = nameInput.value.trim() || undefined;
+    const att = attributionInput.value.trim() || undefined;
+
+    onEditProfile(name, att);
+    setIsEdit(false);
+  };
+
+  const handleUsageSelect = (event) => {
+    openReusableContextMenu(
+      'bottom',
+      getEventCords(event, '.btn-surface'),
+      (closeMenu) => (
+        <ImagePackUsageSelector
+          usage={usage}
+          onSelect={(newUsage) => {
+            onUsageChange(newUsage);
+            closeMenu();
+          }}
+        />
+      ),
+    );
+  };
+
+  return (
+    <div className="image-pack-profile">
+      {
+        onAvatarChange
+          ? (
+            <ImageUpload
+              bgColor="#555"
+              text={displayName}
+              imageSrc={avatarUrl}
+              size="normal"
+              onUpload={onAvatarChange}
+              onRequestRemove={() => onAvatarChange(undefined)}
+            />
+          )
+          : <Avatar bgColor="#555" text={displayName} imageSrc={avatarUrl} size="normal" />
+      }
+      <div className="image-pack-profile__content">
+        {
+          isEdit
+            ? (
+              <form onSubmit={handleSubmit}>
+                <Input name="nameInput" label="Name" value={displayName} required />
+                <Input name="attributionInput" label="Attribution" value={attribution} resizable />
+                <div>
+                  <Button variant="primary" type="submit">Save</Button>
+                  <Button onClick={() => setIsEdit(false)}>Cancel</Button>
+                </div>
+              </form>
+            ) : (
+              <>
+                <div>
+                  <Text>{displayName}</Text>
+                  {onEditProfile && <IconButton size="extra-small" onClick={() => setIsEdit(true)} src={PencilIC} tooltip="Edit" />}
+                </div>
+                {attribution && <Text variant="b3">{attribution}</Text>}
+              </>
+            )
+        }
+      </div>
+      <div className="image-pack-profile__usage">
+        <Text variant="b3">Pack usage</Text>
+        <Button
+          onClick={onUsageChange ? handleUsageSelect : undefined}
+          iconSrc={onUsageChange ? ChevronBottomIC : null}
+        >
+          <Text>
+            {usage === 'emoticon' && 'Emoji'}
+            {usage === 'sticker' && 'Sticker'}
+            {usage === 'both' && 'Both'}
+          </Text>
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+ImagePackProfile.defaultProps = {
+  avatarUrl: null,
+  attribution: null,
+  onUsageChange: null,
+  onAvatarChange: null,
+  onEditProfile: null,
+};
+ImagePackProfile.propTypes = {
+  avatarUrl: PropTypes.string,
+  displayName: PropTypes.string.isRequired,
+  attribution: PropTypes.string,
+  usage: PropTypes.oneOf(['emoticon', 'sticker', 'both']).isRequired,
+  onUsageChange: PropTypes.func,
+  onAvatarChange: PropTypes.func,
+  onEditProfile: PropTypes.func,
+};
+
+export default ImagePackProfile;
@@ -0,0 +1,37 @@
+@use '../../partials/flex';
+
+.image-pack-profile {
+  padding: var(--sp-normal);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sp-tight);
+
+  &__content {
+    @extend .cp-fx__item-one;
+
+    & > div:first-child {
+      display: flex;
+      align-items: center;
+      gap: var(--sp-extra-tight);
+
+      & .ic-btn {
+        padding: var(--sp-ultra-tight);
+      }
+    }
+    & > form {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sp-extra-tight);
+      & > div:last-child {
+        margin: var(--sp-extra-tight) 0;
+        display: flex;
+        gap: var(--sp-tight);
+      }
+    }
+  }
+  &__usage {
+    & > *:first-child {
+      margin-bottom: var(--sp-ultra-tight);
+    }
+  }
+}
@@ -0,0 +1,75 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import './ImagePackUpload.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import { scaleDownImage } from '../../../util/common';
+
+import Text from '../../atoms/text/Text';
+import Button from '../../atoms/button/Button';
+import Input from '../../atoms/input/Input';
+import IconButton from '../../atoms/button/IconButton';
+import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
+
+function ImagePackUpload({ onUpload }) {
+  const mx = initMatrix.matrixClient;
+  const inputRef = useRef(null);
+  const shortcodeRef = useRef(null);
+  const [imgFile, setImgFile] = useState(null);
+  const [progress, setProgress] = useState(false);
+
+  const handleSubmit = async (evt) => {
+    evt.preventDefault();
+    if (!imgFile) return;
+    const { shortcodeInput } = evt.target;
+    const shortcode = shortcodeInput.value.trim();
+    if (shortcode === '') return;
+
+    setProgress(true);
+    const image = await scaleDownImage(imgFile, 512, 512);
+    const url = await mx.uploadContent(image, {
+      onlyContentUri: true,
+    });
+
+    onUpload(shortcode, url);
+    setProgress(false);
+    setImgFile(null);
+    shortcodeRef.current.value = '';
+  };
+
+  const handleFileChange = (evt) => {
+    const img = evt.target.files[0];
+    if (!img) return;
+    setImgFile(img);
+    shortcodeRef.current.value = img.name.slice(0, img.name.indexOf('.'));
+    shortcodeRef.current.focus();
+  };
+  const handleRemove = () => {
+    setImgFile(null);
+    inputRef.current.value = null;
+    shortcodeRef.current.value = '';
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="image-pack-upload">
+      <input ref={inputRef} onChange={handleFileChange} style={{ display: 'none' }} type="file" accept=".png, .gif, .webp" required />
+      {
+        imgFile
+          ? (
+            <div className="image-pack-upload__file">
+              <IconButton onClick={handleRemove} src={CirclePlusIC} tooltip="Remove file" />
+              <Text>{imgFile.name}</Text>
+            </div>
+          )
+          : <Button onClick={() => inputRef.current.click()}>Import image</Button>
+      }
+      <Input forwardRef={shortcodeRef} name="shortcodeInput" placeholder="shortcode" required />
+      <Button disabled={progress} variant="primary" type="submit">{progress ? 'Uploading...' : 'Upload'}</Button>
+    </form>
+  );
+}
+ImagePackUpload.propTypes = {
+  onUpload: PropTypes.func.isRequired,
+};
+
+export default ImagePackUpload;
@@ -0,0 +1,43 @@
+@use '../../partials/dir';
+@use '../../partials/text';
+
+.image-pack-upload {
+  padding: var(--sp-normal);
+  padding-top: 0;
+  display: flex;
+  gap: var(--sp-tight);
+
+  & > .input-container {
+    flex-grow: 1;
+    input {
+      padding: 9px var(--sp-normal);
+    }
+  }
+  &__file {
+    display: inline-flex;
+    align-items: center;
+    background: var(--bg-surface-low);
+    border-radius: var(--bo-radius);
+    box-shadow: var(--bs-surface-border);
+  
+    & button {
+      --parent-height: 40px;
+      width: var(--parent-height);
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  
+    & .ic-raw {
+      background-color: var(--bg-caution);
+      transform: rotate(45deg);
+    }
+    
+    & .text {
+      @extend .cp-txt__ellipsis;
+      @include dir.side(margin, var(--sp-ultra-tight), var(--sp-normal));
+      max-width: 86px;
+    }
+  }
+}
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
+import CheckIC from '../../../../public/res/ic/outlined/check.svg';
+
+function ImagePackUsageSelector({ usage, onSelect }) {
+  return (
+    <div>
+      <MenuHeader>Usage</MenuHeader>
+      <MenuItem
+        iconSrc={usage === 'emoticon' ? CheckIC : undefined}
+        variant={usage === 'emoticon' ? 'positive' : 'surface'}
+        onClick={() => onSelect('emoticon')}
+      >
+        Emoji
+      </MenuItem>
+      <MenuItem
+        iconSrc={usage === 'sticker' ? CheckIC : undefined}
+        variant={usage === 'sticker' ? 'positive' : 'surface'}
+        onClick={() => onSelect('sticker')}
+      >
+        Sticker
+      </MenuItem>
+      <MenuItem
+        iconSrc={usage === 'both' ? CheckIC : undefined}
+        variant={usage === 'both' ? 'positive' : 'surface'}
+        onClick={() => onSelect('both')}
+      >
+        Both
+      </MenuItem>
+    </div>
+  );
+}
+
+ImagePackUsageSelector.propTypes = {
+  usage: PropTypes.oneOf(['emoticon', 'sticker', 'both']).isRequired,
+  onSelect: PropTypes.func.isRequired,
+};
+
+export default ImagePackUsageSelector;
@@ -7,9 +7,13 @@ import initMatrix from '../../../client/initMatrix';
 import Text from '../../atoms/text/Text';
 import Avatar from '../../atoms/avatar/Avatar';
 import Spinner from '../../atoms/spinner/Spinner';
+import RawIcon from '../../atoms/system-icons/RawIcon';
+
+import PlusIC from '../../../../public/res/ic/outlined/plus.svg';

 function ImageUpload({
  text, bgColor, imageSrc, onUpload, onRequestRemove,
+  size,
 }) {
  const [uploadPromise, setUploadPromise] = useState(null);
  const uploadImageRef = useRef(null);
@@ -50,10 +54,14 @@ function ImageUpload({
          imageSrc={imageSrc}
          text={text}
          bgColor={bgColor}
-          size="large"
+          size={size}
        />
        <div className={`img-upload__process ${uploadPromise === null ? ' img-upload__process--stopped' : ''}`}>
-          {uploadPromise === null && <Text variant="b3" weight="bold">Upload</Text>}
+          {uploadPromise === null && (
+            size === 'large'
+              ? <Text variant="b3" weight="bold">Upload</Text>
+              : <RawIcon src={PlusIC} color="white" />
+          )}
          {uploadPromise !== null && <Spinner size="small" />}
        </div>
      </button>
@@ -75,6 +83,7 @@ ImageUpload.defaultProps = {
  text: null,
  bgColor: 'transparent',
  imageSrc: null,
+  size: 'large',
 };

 ImageUpload.propTypes = {
@@ -83,6 +92,7 @@ ImageUpload.propTypes = {
  imageSrc: PropTypes.string,
  onUpload: PropTypes.func.isRequired,
  onRequestRemove: PropTypes.func.isRequired,
+  size: PropTypes.oneOf(['large', 'normal']),
 };

 export default ImageUpload;
@@ -4,50 +4,17 @@ import './Media.scss';

 import encrypt from 'browser-encrypt-attachment';

+import { BlurhashCanvas } from 'react-blurhash';
 import Text from '../../atoms/text/Text';
 import IconButton from '../../atoms/button/IconButton';
 import Spinner from '../../atoms/spinner/Spinner';
+import ImageLightbox from '../image-lightbox/ImageLightbox';

 import DownloadSVG from '../../../../public/res/ic/outlined/download.svg';
 import ExternalSVG from '../../../../public/res/ic/outlined/external.svg';
 import PlaySVG from '../../../../public/res/ic/outlined/play.svg';

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

 async function getDecryptedBlob(response, type, decryptData) {
  const arrayBuffer = await response.arrayBuffer();
@@ -69,9 +36,8 @@ async function getUrl(link, type, decryptData) {
  }
 }

-function getNativeHeight(width, height) {
-  const MEDIA_MAX_WIDTH = 296;
-  const scale = MEDIA_MAX_WIDTH / width;
+function getNativeHeight(width, height, maxWidth = 296) {
+  const scale = maxWidth / width;
  return scale * height;
 }

@@ -155,7 +121,82 @@ File.propTypes = {
 };

 function Image({
-  name, width, height, link, file, type,
+  name, width, height, link, file, type, blurhash,
+}) {
+  const [url, setUrl] = useState(null);
+  const [blur, setBlur] = useState(true);
+  const [lightbox, setLightbox] = useState(false);
+
+  useEffect(() => {
+    let unmounted = false;
+    async function fetchUrl() {
+      const myUrl = await getUrl(link, type, file);
+      if (unmounted) return;
+      setUrl(myUrl);
+    }
+    fetchUrl();
+    return () => {
+      unmounted = true;
+    };
+  }, []);
+
+  const toggleLightbox = () => {
+    if (!url) return;
+    setLightbox(!lightbox);
+  };
+
+  return (
+    <>
+      <div className="file-container">
+        <div
+          style={{ height: width !== null ? getNativeHeight(width, height) : 'unset' }}
+          className="image-container"
+          role="button"
+          tabIndex="0"
+          onClick={toggleLightbox}
+          onKeyDown={toggleLightbox}
+        >
+          { blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
+          { url !== null && (
+            <img
+              style={{ display: blur ? 'none' : 'unset' }}
+              onLoad={() => setBlur(false)}
+              src={url || link}
+              alt={name}
+            />
+          )}
+        </div>
+      </div>
+      {url && (
+        <ImageLightbox
+          url={url}
+          alt={name}
+          isOpen={lightbox}
+          onRequestClose={toggleLightbox}
+        />
+      )}
+    </>
+  );
+}
+Image.defaultProps = {
+  file: null,
+  width: null,
+  height: null,
+  type: '',
+  blurhash: '',
+};
+Image.propTypes = {
+  name: PropTypes.string.isRequired,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  link: PropTypes.string.isRequired,
+  file: PropTypes.shape({}),
+  type: PropTypes.string,
+  blurhash: PropTypes.string,
+};
+
+function Sticker({
+  name, height, width, link, file, type,
 }) {
  const [url, setUrl] = useState(null);

@@ -173,21 +214,18 @@ function Image({
  }, []);

  return (
-    <div className="file-container">
-      <FileHeader name={name} link={url || link} type={type} external />
-      <div style={{ height: width !== null ? getNativeHeight(width, height) : 'unset' }} className="image-container">
-        { url !== null && <img src={url || link} alt={name} />}
-      </div>
+    <div className="sticker-container" style={{ height: width !== null ? getNativeHeight(width, height, 128) : 'unset' }}>
+      { url !== null && <img src={url || link} title={name} alt={name} />}
    </div>
  );
 }
-Image.defaultProps = {
+Sticker.defaultProps = {
  file: null,
+  type: '',
  width: null,
  height: null,
-  type: '',
 };
-Image.propTypes = {
+Sticker.propTypes = {
  name: PropTypes.string.isRequired,
  width: PropTypes.number,
  height: PropTypes.number,
@@ -240,12 +278,13 @@ Audio.propTypes = {
 };

 function Video({
-  name, link, thumbnail,
-  width, height, file, type, thumbnailFile, thumbnailType,
+  name, link, thumbnail, thumbnailFile, thumbnailType,
+  width, height, file, type, blurhash,
 }) {
  const [isLoading, setIsLoading] = useState(false);
  const [url, setUrl] = useState(null);
  const [thumbUrl, setThumbUrl] = useState(null);
+  const [blur, setBlur] = useState(true);

  useEffect(() => {
    let unmounted = false;
@@ -260,16 +299,16 @@ function Video({
    };
  }, []);

-  async function loadVideo() {
+  const loadVideo = async () => {
    const myUrl = await getUrl(link, type, file);
    setUrl(myUrl);
    setIsLoading(false);
-  }
+  };

-  function handlePlayVideo() {
+  const handlePlayVideo = () => {
    setIsLoading(true);
    loadVideo();
-  }
+  };

  return (
    <div className="file-container">
@@ -277,14 +316,20 @@ function Video({
      <div
        style={{
          height: width !== null ? getNativeHeight(width, height) : 'unset',
-          backgroundImage: thumbUrl === null ? 'none' : `url(${thumbUrl}`,
        }}
        className="video-container"
      >
-        { url === null && isLoading && <Spinner size="small" /> }
-        { url === null && !isLoading && <IconButton onClick={handlePlayVideo} tooltip="Play video" src={PlaySVG} />}
-        { url !== null && (
-        /* eslint-disable-next-line jsx-a11y/media-has-caption */
+        { url === null ? (
+          <>
+            { blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
+            { thumbUrl !== null && (
+              <img style={{ display: blur ? 'none' : 'unset' }} src={thumbUrl} onLoad={() => setBlur(false)} alt={name} />
+            )}
+            {isLoading && <Spinner size="small" />}
+            {!isLoading && <IconButton onClick={handlePlayVideo} tooltip="Play video" src={PlaySVG} />}
+          </>
+        ) : (
+          /* eslint-disable-next-line jsx-a11y/media-has-caption */
          <video autoPlay controls poster={thumbUrl}>
            <source src={url} type={getBlobSafeMimeType(type)} />
          </video>
@@ -298,22 +343,24 @@ Video.defaultProps = {
  height: null,
  file: null,
  thumbnail: null,
-  type: '',
  thumbnailType: null,
  thumbnailFile: null,
+  type: '',
+  blurhash: null,
 };
 Video.propTypes = {
  name: PropTypes.string.isRequired,
  link: PropTypes.string.isRequired,
  thumbnail: PropTypes.string,
+  thumbnailFile: PropTypes.shape({}),
+  thumbnailType: PropTypes.string,
  width: PropTypes.number,
  height: PropTypes.number,
  file: PropTypes.shape({}),
  type: PropTypes.string,
-  thumbnailFile: PropTypes.shape({}),
-  thumbnailType: PropTypes.string,
+  blurhash: PropTypes.string,
 };

 export {
-  File, Image, Audio, Video,
+  File, Image, Sticker, Audio, Video,
 };
@@ -27,6 +27,15 @@
  white-space: initial;
 }

+.sticker-container {
+  display: inline-flex;
+  max-width: 128px;
+  width: 100%;
+  & img {
+    width: 100% !important;
+  }
+}
+
 .image-container,
 .video-container,
 .audio-container {
@@ -42,25 +51,40 @@
  background-size: cover;
 }

-.image-container {
-  & img {
+.image-container,
+.video-container {
+  & img,
+  & canvas {
    max-width: unset !important;
    width: 100% !important;
+    height: 100%;
    border-radius: 0 !important;
    margin: 0 !important;
  }
 }
+.image-container {
+  max-height: 460px;
+  img {
+    cursor: pointer;
+    object-fit: cover;
+  }
+}

 .video-container {
+  position: relative;
  & .ic-btn-surface {
    background-color: var(--bg-surface-low);
  }
+  & .ic-btn-surface,
+  & .donut-spinner {
+    position: absolute;
+  }
  video {
-    width: 100%
+    width: 100%;
  }
 }
 .audio-container {
  audio {
-    width: 100%
+    width: 100%;
  }
-}
+}
@@ -5,7 +5,6 @@ import React, {
 import PropTypes from 'prop-types';
 import './Message.scss';

-import { getShortcodeToCustomEmoji } from '../../organisms/emoji-board/custom-emoji';
 import { twemojify } from '../../../util/twemojify';

 import initMatrix from '../../../client/initMatrix';
@@ -25,6 +24,7 @@ import Tooltip from '../../atoms/tooltip/Tooltip';
 import Input from '../../atoms/input/Input';
 import Avatar from '../../atoms/avatar/Avatar';
 import IconButton from '../../atoms/button/IconButton';
+import Time from '../../atoms/time/Time';
 import ContextMenu, { MenuHeader, MenuItem, MenuBorder } from '../../atoms/context-menu/ContextMenu';
 import * as Media from '../media/Media';

@@ -37,6 +37,7 @@ import CmdIC from '../../../../public/res/ic/outlined/cmd.svg';
 import BinIC from '../../../../public/res/ic/outlined/bin.svg';

 import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
+import { getBlobSafeMimeType } from '../../../util/mimetypes';

 function PlaceholderMessage() {
  return (
@@ -68,7 +69,7 @@ const MessageAvatar = React.memo(({
 ));

 const MessageHeader = React.memo(({
-  userId, username, time,
+  userId, username, timestamp, fullTime,
 }) => (
  <div className="message__header">
    <Text
@@ -82,14 +83,20 @@ const MessageHeader = React.memo(({
      <span>{twemojify(userId)}</span>
    </Text>
    <div className="message__time">
-      <Text variant="b3">{time}</Text>
+      <Text variant="b3">
+        <Time timestamp={timestamp} fullTime={fullTime} />
+      </Text>
    </div>
  </div>
 ));
+MessageHeader.defaultProps = {
+  fullTime: false,
+};
 MessageHeader.propTypes = {
  userId: PropTypes.string.isRequired,
  username: PropTypes.string.isRequired,
-  time: PropTypes.string.isRequired,
+  timestamp: PropTypes.number.isRequired,
+  fullTime: PropTypes.bool,
 };

 function MessageReply({ name, color, body }) {
@@ -200,7 +207,13 @@ const MessageBody = React.memo(({
  let content = null;
  if (isCustomHTML) {
    try {
-      content = twemojify(sanitizeCustomHtml(body), undefined, true, false, true);
+      content = twemojify(
+        sanitizeCustomHtml(initMatrix.matrixClient, body),
+        undefined,
+        true,
+        false,
+        true,
+      );
    } catch {
      console.error('Malformed custom html: ', body);
      content = twemojify(body, undefined);
@@ -240,7 +253,7 @@ const MessageBody = React.memo(({

  return (
    <div className="message__body">
-      <div className={`text ${emojiOnly ? 'text-h1' : 'text-b1'}`}>
+      <div dir="auto" className={`text ${emojiOnly ? 'text-h1' : 'text-b1'}`}>
        { msgType === 'm.emote' && (
          <>
            {'* '}
@@ -277,6 +290,11 @@ function MessageEdit({ body, onSave, onCancel }) {
  }, []);

  const handleKeyDown = (e) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      onCancel();
+    }
+
    if (e.key === 'Enter' && e.shiftKey === false) {
      e.preventDefault();
      onSave(editInputRef.current.value);
@@ -322,7 +340,7 @@ function getMyEmojiEvent(emojiKey, eventId, roomTimeline) {
  return rEvent;
 }

-function toggleEmoji(roomId, eventId, emojiKey, roomTimeline) {
+function toggleEmoji(roomId, eventId, emojiKey, shortcode, roomTimeline) {
  const myAlreadyReactEvent = getMyEmojiEvent(emojiKey, eventId, roomTimeline);
  if (myAlreadyReactEvent) {
    const rId = myAlreadyReactEvent.getId();
@@ -330,17 +348,17 @@ function toggleEmoji(roomId, eventId, emojiKey, roomTimeline) {
    redactEvent(roomId, rId);
    return;
  }
-  sendReaction(roomId, eventId, emojiKey);
+  sendReaction(roomId, eventId, emojiKey, shortcode);
 }

 function pickEmoji(e, roomId, eventId, roomTimeline) {
  openEmojiBoard(getEventCords(e), (emoji) => {
-    toggleEmoji(roomId, eventId, emoji.unicode, roomTimeline);
+    toggleEmoji(roomId, eventId, emoji.mxc ?? emoji.unicode, emoji.shortcodes[0], roomTimeline);
    e.target.click();
  });
 }

-function genReactionMsg(userIds, reaction) {
+function genReactionMsg(userIds, reaction, shortcode) {
  return (
    <>
      {userIds.map((userId, index) => (
@@ -354,24 +372,22 @@ function genReactionMsg(userIds, reaction) {
        </React.Fragment>
      ))}
      <span style={{ opacity: '.6' }}>{' reacted with '}</span>
-      {twemojify(reaction, { className: 'react-emoji' })}
+      {twemojify(shortcode ? `:${shortcode}:` : reaction, { className: 'react-emoji' })}
    </>
  );
 }

 function MessageReaction({
-  shortcodeToEmoji, reaction, count, users, isActive, onClick,
+  reaction, shortcode, count, users, isActive, onClick,
 }) {
-  const customEmojiMatch = reaction.match(/^:(\S+):$/);
  let customEmojiUrl = null;
-  if (customEmojiMatch) {
-    const customEmoji = shortcodeToEmoji.get(customEmojiMatch[1]);
-    customEmojiUrl = initMatrix.matrixClient.mxcUrlToHttp(customEmoji?.mxc);
+  if (reaction.match(/^mxc:\/\/\S+$/)) {
+    customEmojiUrl = initMatrix.matrixClient.mxcUrlToHttp(reaction);
  }
  return (
    <Tooltip
      className="msg__reaction-tooltip"
-      content={<Text variant="b2">{users.length > 0 ? genReactionMsg(users, reaction) : 'Unable to load who has reacted'}</Text>}
+      content={<Text variant="b2">{users.length > 0 ? genReactionMsg(users, reaction, shortcode) : 'Unable to load who has reacted'}</Text>}
    >
      <button
        onClick={onClick}
@@ -380,7 +396,7 @@ function MessageReaction({
      >
        {
          customEmojiUrl
-            ? <img className="react-emoji" draggable="false" alt={reaction} src={customEmojiUrl} />
+            ? <img className="react-emoji" draggable="false" alt={shortcode ?? reaction} src={customEmojiUrl} />
            : twemojify(reaction, { className: 'react-emoji' })
        }
        <Text variant="b3" className="msg__reaction-count">{count}</Text>
@@ -388,9 +404,12 @@ function MessageReaction({
    </Tooltip>
  );
 }
+MessageReaction.defaultProps = {
+  shortcode: undefined,
+};
 MessageReaction.propTypes = {
-  shortcodeToEmoji: PropTypes.shape({}).isRequired,
  reaction: PropTypes.node.isRequired,
+  shortcode: PropTypes.string,
  count: PropTypes.number.isRequired,
  users: PropTypes.arrayOf(PropTypes.string).isRequired,
  isActive: PropTypes.bool.isRequired,
@@ -401,11 +420,10 @@ function MessageReactionGroup({ roomTimeline, mEvent }) {
  const { roomId, room, reactionTimeline } = roomTimeline;
  const mx = initMatrix.matrixClient;
  const reactions = {};
-  const shortcodeToEmoji = getShortcodeToCustomEmoji(room);
  const canSendReaction = room.currentState.maySendEvent('m.reaction', mx.getUserId());

  const eventReactions = reactionTimeline.get(mEvent.getId());
-  const addReaction = (key, count, senderId, isActive) => {
+  const addReaction = (key, shortcode, count, senderId, isActive) => {
    let reaction = reactions[key];
    if (reaction === undefined) {
      reaction = {
@@ -414,6 +432,7 @@ function MessageReactionGroup({ roomTimeline, mEvent }) {
        isActive: false,
      };
    }
+    if (shortcode) reaction.shortcode = shortcode;
    if (count) {
      reaction.count = count;
    } else {
@@ -429,9 +448,10 @@ function MessageReactionGroup({ roomTimeline, mEvent }) {
      if (rEvent.getRelation() === null) return;
      const reaction = rEvent.getRelation();
      const senderId = rEvent.getSender();
+      const { shortcode } = rEvent.getContent();
      const isActive = senderId === mx.getUserId();

-      addReaction(reaction.key, undefined, senderId, isActive);
+      addReaction(reaction.key, shortcode, undefined, senderId, isActive);
    });
  } else {
    // Use aggregated reactions
@@ -439,7 +459,7 @@ function MessageReactionGroup({ roomTimeline, mEvent }) {
    if (!aggregatedReaction) return null;
    aggregatedReaction.forEach((reaction) => {
      if (reaction.type !== 'm.reaction') return;
-      addReaction(reaction.key, reaction.count, undefined, false);
+      addReaction(reaction.key, undefined, reaction.count, undefined, false);
    });
  }

@@ -449,13 +469,13 @@ function MessageReactionGroup({ roomTimeline, mEvent }) {
        Object.keys(reactions).map((key) => (
          <MessageReaction
            key={key}
-            shortcodeToEmoji={shortcodeToEmoji}
            reaction={key}
+            shortcode={reactions[key].shortcode}
            count={reactions[key].count}
            users={reactions[key].users}
            isActive={reactions[key].isActive}
            onClick={() => {
-              toggleEmoji(roomId, mEvent.getId(), key, roomTimeline);
+              toggleEmoji(roomId, mEvent.getId(), key, reactions[key].shortcode, roomTimeline);
            }}
          />
        ))
@@ -607,7 +627,14 @@ function genMediaContent(mE) {
  if (typeof mediaMXC === 'undefined' || mediaMXC === '') return <span style={{ color: 'var(--bg-danger)' }}>Malformed event</span>;

  let msgType = mE.getContent()?.msgtype;
-  if (mE.getType() === 'm.sticker') msgType = 'm.image';
+  const safeMimetype = getBlobSafeMimeType(mContent.info?.mimetype);
+  if (mE.getType() === 'm.sticker') {
+    msgType = 'm.sticker';
+  } else if (safeMimetype === 'application/octet-stream') {
+    msgType = 'm.file';
+  }
+
+  const blurhash = mContent?.info?.['xyz.amorgan.blurhash'];

  switch (msgType) {
    case 'm.file':
@@ -628,6 +655,18 @@ function genMediaContent(mE) {
          link={mx.mxcUrlToHttp(mediaMXC)}
          file={isEncryptedFile ? mContent.file : null}
          type={mContent.info?.mimetype}
+          blurhash={blurhash}
+        />
+      );
+    case 'm.sticker':
+      return (
+        <Media.Sticker
+          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':
@@ -654,6 +693,7 @@ function genMediaContent(mE) {
          height={typeof mContent.info?.h === 'number' ? mContent.info?.h : null}
          file={isEncryptedFile ? mContent.file : null}
          type={mContent.info?.mimetype}
+          blurhash={blurhash}
        />
      );
    default:
@@ -674,7 +714,7 @@ function getEditedBody(editedMEvent) {
 }

 function Message({
-  mEvent, isBodyOnly, roomTimeline, focus, time,
+  mEvent, isBodyOnly, roomTimeline, focus, fullTime,
 }) {
  const [isEditing, setIsEditing] = useState(false);
  const roomId = mEvent.getRoomId();
@@ -735,7 +775,12 @@ function Message({
      }
      <div className="message__main-container">
        {!isBodyOnly && (
-          <MessageHeader userId={senderId} username={username} time={time} />
+          <MessageHeader
+            userId={senderId}
+            username={username}
+            timestamp={mEvent.getTs()}
+            fullTime={fullTime}
+          />
        )}
        {roomTimeline && isReply && (
          <MessageReplyWrapper
@@ -783,13 +828,14 @@ Message.defaultProps = {
  isBodyOnly: false,
  focus: false,
  roomTimeline: null,
+  fullTime: false,
 };
 Message.propTypes = {
  mEvent: PropTypes.shape({}).isRequired,
  isBodyOnly: PropTypes.bool,
  roomTimeline: PropTypes.shape({}),
  focus: PropTypes.bool,
-  time: PropTypes.string.isRequired,
+  fullTime: PropTypes.bool,
 };

 export { Message, MessageReply, PlaceholderMessage };
@@ -250,7 +250,6 @@
  cursor: pointer;

  & .react-emoji {
-    width: 16px;
    height: 16px;
    margin: 2px;
  }
@@ -4,6 +4,7 @@ import './TimelineChange.scss';

 import Text from '../../atoms/text/Text';
 import RawIcon from '../../atoms/system-icons/RawIcon';
+import Time from '../../atoms/time/Time';

 import JoinArraowIC from '../../../../public/res/ic/outlined/join-arrow.svg';
 import LeaveArraowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
@@ -12,7 +13,7 @@ import InviteCancelArraowIC from '../../../../public/res/ic/outlined/invite-canc
 import UserIC from '../../../../public/res/ic/outlined/user.svg';

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

@@ -48,7 +49,9 @@ function TimelineChange({
        </Text>
      </div>
      <div className="timeline-change__time">
-        <Text variant="b3">{time}</Text>
+        <Text variant="b3">
+          <Time timestamp={timestamp} />
+        </Text>
      </div>
    </button>
  );
@@ -68,7 +71,7 @@ TimelineChange.propTypes = {
    PropTypes.string,
    PropTypes.node,
  ]).isRequired,
-  time: PropTypes.string.isRequired,
+  timestamp: PropTypes.number.isRequired,
  onClick: PropTypes.func,
 };

@@ -0,0 +1,130 @@
+import React, { useReducer, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import './RoomEmojis.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import { suffixRename } from '../../../util/common';
+
+import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
+import Text from '../../atoms/text/Text';
+import Input from '../../atoms/input/Input';
+import Button from '../../atoms/button/Button';
+import ImagePack from '../image-pack/ImagePack';
+
+function useRoomPacks(room) {
+  const mx = initMatrix.matrixClient;
+  const [, forceUpdate] = useReducer((count) => count + 1, 0);
+
+  const packEvents = room.currentState.getStateEvents('im.ponies.room_emotes');
+  const unUsablePacks = [];
+  const usablePacks = packEvents.filter((mEvent) => {
+    if (typeof mEvent.getContent()?.images !== 'object') {
+      unUsablePacks.push(mEvent);
+      return false;
+    }
+    return true;
+  });
+
+  useEffect(() => {
+    const handleEvent = (event, state, prevEvent) => {
+      if (event.getRoomId() !== room.roomId) return;
+      if (event.getType() !== 'im.ponies.room_emotes') return;
+      if (!prevEvent?.getContent()?.images || !event.getContent().images) {
+        forceUpdate();
+      }
+    };
+
+    mx.on('RoomState.events', handleEvent);
+    return () => {
+      mx.removeListener('RoomState.events', handleEvent);
+    };
+  }, [room, mx]);
+
+  const isStateKeyAvailable = (key) => !room.currentState.getStateEvents('im.ponies.room_emotes', key);
+
+  const createPack = async (name) => {
+    const packContent = {
+      pack: { display_name: name },
+      images: {},
+    };
+    let stateKey = '';
+    if (unUsablePacks.length > 0) {
+      const mEvent = unUsablePacks[0];
+      stateKey = mEvent.getStateKey();
+    } else {
+      stateKey = packContent.pack.display_name.replace(/\s/g, '-');
+      if (!isStateKeyAvailable(stateKey)) {
+        stateKey = suffixRename(
+          stateKey,
+          isStateKeyAvailable,
+        );
+      }
+    }
+    await mx.sendStateEvent(room.roomId, 'im.ponies.room_emotes', packContent, stateKey);
+  };
+
+  const deletePack = async (stateKey) => {
+    await mx.sendStateEvent(room.roomId, 'im.ponies.room_emotes', {}, stateKey);
+  };
+
+  return {
+    usablePacks,
+    createPack,
+    deletePack,
+  };
+}
+
+function RoomEmojis({ roomId }) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+
+  const { usablePacks, createPack, deletePack } = useRoomPacks(room);
+
+  const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
+  const canChange = room.currentState.hasSufficientPowerLevelFor('state_default', myPowerlevel);
+
+  const handlePackCreate = (e) => {
+    e.preventDefault();
+    const { nameInput } = e.target;
+    const name = nameInput.value.trim();
+    if (name === '') return;
+    nameInput.value = '';
+
+    createPack(name);
+  };
+
+  return (
+    <div className="room-emojis">
+      { canChange && (
+        <div className="room-emojis__add-pack">
+          <MenuHeader>Create Pack</MenuHeader>
+          <form onSubmit={handlePackCreate}>
+            <Input name="nameInput" placeholder="Pack Name" required />
+            <Button variant="primary" type="submit">Create pack</Button>
+          </form>
+        </div>
+      )}
+      {
+        usablePacks.length > 0
+          ? usablePacks.reverse().map((mEvent) => (
+            <ImagePack
+              key={mEvent.getId()}
+              roomId={roomId}
+              stateKey={mEvent.getStateKey()}
+              handlePackDelete={canChange ? deletePack : undefined}
+            />
+          )) : (
+            <div className="room-emojis__empty">
+              <Text>No emoji or sticker pack.</Text>
+            </div>
+          )
+      }
+    </div>
+  );
+}
+
+RoomEmojis.propTypes = {
+  roomId: PropTypes.string.isRequired,
+};
+
+export default RoomEmojis;
@@ -0,0 +1,29 @@
+.room-emojis {
+  .image-pack,
+  .room-emojis__add-pack,
+  .room-emojis__empty {
+    margin: var(--sp-normal) 0;
+    background-color: var(--bg-surface);
+    border-radius: var(--bo-radius);
+    box-shadow: var(--bs-surface-border);
+    overflow: hidden;
+  
+    & > .context-menu__header:first-child {
+      margin-top: 2px;
+    }
+  }
+  &__add-pack {
+    & form {
+      margin: var(--sp-normal);
+      display: flex;
+      gap: var(--sp-normal);
+      & .input-container {
+        flex-grow: 1;
+      }
+    }
+  }
+  &__empty {
+    padding: var(--sp-extra-loose) var(--sp-normal);
+    text-align: center;
+  }
+}
@@ -2,8 +2,6 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './RoomSearch.scss';

-import dateFormat from 'dateformat';
-
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import { selectRoom } from '../../../client/action/navigation';
@@ -120,14 +118,13 @@ function RoomSearch({ roomId }) {
  const renderTimeline = (timeline) => (
    <div className="room-search__result-item" key={timeline[0].getId()}>
      { timeline.map((mEvent) => {
-        const time = dateFormat(mEvent.getDate(), 'dd/mm/yyyy - hh:MM TT');
        const id = mEvent.getId();
        return (
          <React.Fragment key={id}>
            <Message
              mEvent={mEvent}
              isBodyOnly={false}
-              time={time}
+              fullTime
            />
            <Button onClick={() => selectRoom(roomId, id)}>View</Button>
          </React.Fragment>
@@ -38,10 +38,10 @@ function SpaceOptions({ roomId, afterOptionSelect }) {

  const handleMarkAsRead = () => {
    const spaceChildren = roomList.getCategorizedSpaces([roomId]);
-    spaceChildren?.forEach((childIds, spaceId) => {
+    spaceChildren?.forEach((childIds) => {
      childIds?.forEach((childId) => {
        markAsRead(childId);
-      })
+      });
    });
    afterOptionSelect();
  };
@@ -70,7 +70,7 @@ const EmojiGroup = React.memo(({ name, groupEmojis }) => {
                    unicode={`:${emoji.shortcode}:`}
                    shortcodes={emoji.shortcode}
                    src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc)}
-                    data-mx-emoticon
+                    data-mx-emoticon={emoji.mxc}
                  />
                )
            }
@@ -141,10 +141,13 @@ function EmojiBoard({ onSelect, searchRef }) {
  function getEmojiDataFromTarget(target) {
    const unicode = target.getAttribute('unicode');
    const hexcode = target.getAttribute('hexcode');
+    const mxc = target.getAttribute('data-mx-emoticon');
    let shortcodes = target.getAttribute('shortcodes');
    if (typeof shortcodes === 'undefined') shortcodes = undefined;
    else shortcodes = shortcodes.split(',');
-    return { unicode, hexcode, shortcodes };
+    return {
+      unicode, hexcode, shortcodes, mxc,
+    };
  }

  function selectEmoji(e) {
@@ -202,21 +205,23 @@ function EmojiBoard({ onSelect, searchRef }) {
        setAvailableEmojis([]);
        return;
      }
-      // Retrieve the packs for the new room
-      // Remove packs that aren't marked as emoji packs
-      // Remove packs without emojis
-      const packs = getRelevantPacks(
-        initMatrix.matrixClient.getRoom(selectedRoomId),
-      )
-        .filter((pack) => pack.usage.indexOf('emoticon') !== -1)
-        .filter((pack) => pack.getEmojis().length !== 0);

-      // Set an index for each pack so that we know where to jump when the user uses the nav
-      for (let i = 0; i < packs.length; i += 1) {
-        packs[i].packIndex = i;
+      const mx = initMatrix.matrixClient;
+      const room = mx.getRoom(selectedRoomId);
+      const parentIds = initMatrix.roomList.getAllParentSpaces(room.roomId);
+      const parentRooms = [...parentIds].map((id) => mx.getRoom(id));
+      if (room) {
+        const packs = getRelevantPacks(
+          room.client,
+          [room, ...parentRooms],
+        ).filter((pack) => pack.getEmojis().length !== 0);
+
+        // Set an index for each pack so that we know where to jump when the user uses the nav
+        for (let i = 0; i < packs.length; i += 1) {
+          packs[i].packIndex = i;
+        }
+        setAvailableEmojis(packs);
      }
-
-      setAvailableEmojis(packs);
    };

    const onOpen = () => {
@@ -247,39 +252,6 @@ function EmojiBoard({ onSelect, searchRef }) {

  return (
    <div id="emoji-board" className="emoji-board">
-      <div className="emoji-board__content">
-        <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 />
-              {recentEmojis.length > 0 && <EmojiGroup name="Recently used" groupEmojis={recentEmojis} />}
-              {
-                availableEmojis.map((pack) => (
-                  <EmojiGroup
-                    name={pack.displayName}
-                    key={pack.packIndex}
-                    groupEmojis={pack.getEmojis()}
-                    className="custom-emoji-group"
-                  />
-                ))
-              }
-              {
-                emojiGroups.map((group) => (
-                  <EmojiGroup key={group.name} name={group.name} groupEmojis={group.emojis} />
-                ))
-              }
-            </div>
-          </ScrollView>
-        </div>
-        <div ref={emojiInfo} className="emoji-board__content__info">
-          <div>{ parse(twemoji.parse('🙂')) }</div>
-          <Text>:slight_smile:</Text>
-        </div>
-      </div>
      <ScrollView invisible>
        <div className="emoji-board__nav">
          {recentEmojis.length > 0 && (
@@ -287,20 +259,21 @@ function EmojiBoard({ onSelect, searchRef }) {
              onClick={() => openGroup(0)}
              src={RecentClockIC}
              tooltip="Recent"
-              tooltipPlacement="right"
+              tooltipPlacement="left"
            />
          )}
          <div className="emoji-board__nav-custom">
            {
              availableEmojis.map((pack) => {
-                const src = initMatrix.matrixClient.mxcUrlToHttp(pack.avatar ?? pack.images[0].mxc);
+                const src = initMatrix.matrixClient
+                  .mxcUrlToHttp(pack.avatarUrl ?? pack.getEmojis()[0].mxc);
                return (
                  <IconButton
                    onClick={() => openGroup(recentOffset + pack.packIndex)}
                    src={src}
                    key={pack.packIndex}
-                    tooltip={pack.displayName}
-                    tooltipPlacement="right"
+                    tooltip={pack.displayName ?? 'Unknown'}
+                    tooltipPlacement="left"
                    isImage
                  />
                );
@@ -324,13 +297,46 @@ function EmojiBoard({ onSelect, searchRef }) {
                  key={indx}
                  src={ico}
                  tooltip={name}
-                  tooltipPlacement="right"
+                  tooltipPlacement="left"
                />
              ))
            }
          </div>
        </div>
      </ScrollView>
+      <div className="emoji-board__content">
+        <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 />
+              {recentEmojis.length > 0 && <EmojiGroup name="Recently used" groupEmojis={recentEmojis} />}
+              {
+                availableEmojis.map((pack) => (
+                  <EmojiGroup
+                    name={pack.displayName ?? 'Unknown'}
+                    key={pack.packIndex}
+                    groupEmojis={pack.getEmojis()}
+                    className="custom-emoji-group"
+                  />
+                ))
+              }
+              {
+                emojiGroups.map((group) => (
+                  <EmojiGroup key={group.name} name={group.name} groupEmojis={group.emojis} />
+                ))
+              }
+            </div>
+          </ScrollView>
+        </div>
+        <div ref={emojiInfo} className="emoji-board__content__info">
+          <div>{ parse(twemoji.parse('🙂')) }</div>
+          <Text>:slight_smile:</Text>
+        </div>
+      </div>
    </div>
  );
 }
@@ -25,8 +25,7 @@

    min-height: 100%;
    padding: 4px 6px;
-    background-color: var(--bg-surface-low);
-    @include dir.side(border, 1px solid var(--bg-surface-border), none);
+    @include dir.side(border, none, 1px solid var(--bg-surface-border));

    position: relative;
    
@@ -84,6 +83,7 @@
    .emoji {
      width: 32px;
      height: 32px;
+      object-fit: contain;
    }
  }
  & > p:last-child {
@@ -121,8 +121,12 @@
    @include dir.side(margin, var(--left-margin), var(--right-margin));
  }
  & .emoji {
-    width: 38px;
-    height: 38px;
+    max-width: 38px;
+    max-height: 38px;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    object-fit: contain;
    padding: var(--emoji-padding);
    cursor: pointer;
    &:hover {
@@ -1,135 +1,224 @@
 import { emojis } from './emoji';

-// Custom emoji are stored in one of three places:
-// - User emojis, which are stored in account data
-// - Room emojis, which are stored in state events in a room
-// - Emoji packs, which are rooms of emojis referenced in the account data or in a room's
-//   cannonical space
-//
-// Emojis and packs referenced from within a user's account data should be available
-// globally, while emojis and packs in rooms and spaces should only be available within
-// those spaces and rooms
+// https://github.com/Sorunome/matrix-doc/blob/soru/emotes/proposals/2545-emotes.md

 class ImagePack {
-  // Convert a raw image pack into a more maliable format
-  //
-  // Takes an image pack as per MSC 2545 (e.g. as in the Matrix spec), and converts it to a
-  // format used here, while filling in defaults.
-  //
-  // The room argument is the room the pack exists in, which is used as a fallback for
-  // missing properties
-  //
-  // Returns `null` if the rawPack is not a properly formatted image pack, although there
-  // is still a fair amount of tolerance for malformed packs.
-  static parsePack(rawPack, room) {
-    if (typeof rawPack.images === 'undefined') {
+  static parsePack(eventId, packContent) {
+    if (!eventId || typeof packContent?.images !== 'object') {
      return null;
    }

-    const pack = rawPack.pack ?? {};
+    return new ImagePack(eventId, packContent);
+  }

-    const displayName = pack.display_name ?? (room ? room.name : undefined);
-    const avatar = pack.avatar_url ?? (room ? room.getMxcAvatarUrl() : undefined);
-    const usage = pack.usage ?? ['emoticon', 'sticker'];
-    const { attribution } = pack;
-    const images = Object.entries(rawPack.images).flatMap((e) => {
-      const data = e[1];
-      const shortcode = e[0];
+  constructor(eventId, content) {
+    this.id = eventId;
+    this.content = JSON.parse(JSON.stringify(content));
+
+    this.applyPack(content);
+    this.applyImages(content);
+  }
+
+  applyPack(content) {
+    const pack = content.pack ?? {};
+
+    this.displayName = pack.display_name;
+    this.avatarUrl = pack.avatar_url;
+    this.usage = pack.usage ?? ['emoticon', 'sticker'];
+    this.attribution = pack.attribution;
+  }
+
+  applyImages(content) {
+    this.images = new Map();
+    this.emoticons = [];
+    this.stickers = [];
+
+    Object.entries(content.images).forEach(([shortcode, data]) => {
      const mxc = data.url;
      const body = data.body ?? shortcode;
+      const usage = data.usage ?? this.usage;
      const { info } = data;
-      const usage_ = data.usage ?? usage;

-      if (mxc) {
-        return [{
-          shortcode, mxc, body, info, usage: usage_,
-        }];
+      if (!mxc) return;
+      const image = {
+        shortcode, mxc, body, usage, info,
+      };
+
+      this.images.set(shortcode, image);
+      if (usage.includes('emoticon')) {
+        this.emoticons.push(image);
+      }
+      if (usage.includes('sticker')) {
+        this.stickers.push(image);
      }
-      return [];
    });
-
-    return new ImagePack(displayName, avatar, usage, attribution, images);
  }

-  constructor(displayName, avatar, usage, attribution, images) {
-    this.displayName = displayName;
-    this.avatar = avatar;
-    this.usage = usage;
-    this.attribution = attribution;
-    this.images = images;
+  getImages() {
+    return this.images;
  }

-  // Produce a list of emoji in this image pack
  getEmojis() {
-    return this.images.filter((i) => i.usage.indexOf('emoticon') !== -1);
+    return this.emoticons;
  }

-  // Produce a list of stickers in this image pack
  getStickers() {
-    return this.images.filter((i) => i.usage.indexOf('sticker') !== -1);
+    return this.stickers;
+  }
+
+  getContent() {
+    return this.content;
+  }
+
+  _updatePackProperty(property, value) {
+    if (this.content.pack === undefined) {
+      this.content.pack = {};
+    }
+    this.content.pack[property] = value;
+    this.applyPack(this.content);
+  }
+
+  setAvatarUrl(avatarUrl) {
+    this._updatePackProperty('avatar_url', avatarUrl);
+  }
+
+  setDisplayName(displayName) {
+    this._updatePackProperty('display_name', displayName);
+  }
+
+  setAttribution(attribution) {
+    this._updatePackProperty('attribution', attribution);
+  }
+
+  setUsage(usage) {
+    this._updatePackProperty('usage', usage);
+  }
+
+  addImage(key, imgContent) {
+    this.content.images = {
+      [key]: imgContent,
+      ...this.content.images,
+    };
+    this.applyImages(this.content);
+  }
+
+  removeImage(key) {
+    if (this.content.images[key] === undefined) return;
+    delete this.content.images[key];
+    this.applyImages(this.content);
+  }
+
+  updateImageKey(key, newKey) {
+    if (this.content.images[key] === undefined) return;
+    const copyImages = {};
+    Object.keys(this.content.images).forEach((imgKey) => {
+      copyImages[imgKey === key ? newKey : imgKey] = this.content.images[imgKey];
+    });
+    this.content.images = copyImages;
+    this.applyImages(this.content);
+  }
+
+  _updateImageProperty(key, property, value) {
+    if (this.content.images[key] === undefined) return;
+    this.content.images[key][property] = value;
+    this.applyImages(this.content);
+  }
+
+  setImageUrl(key, url) {
+    this._updateImageProperty(key, 'url', url);
+  }
+
+  setImageBody(key, body) {
+    this._updateImageProperty(key, 'body', body);
+  }
+
+  setImageInfo(key, info) {
+    this._updateImageProperty(key, 'info', info);
+  }
+
+  setImageUsage(key, usage) {
+    this._updateImageProperty(key, 'usage', usage);
  }
 }

-// Retrieve a list of user emojis
-//
-// Result is an ImagePack, or null if the user hasn't set up or has deleted their personal
-// image pack.
-//
-// Accepts a reference to a matrix client as the only argument
+function getGlobalImagePacks(mx) {
+  const globalContent = mx.getAccountData('im.ponies.emote_rooms')?.getContent();
+  if (typeof globalContent !== 'object') return [];
+
+  const { rooms } = globalContent;
+  if (typeof rooms !== 'object') return [];
+
+  const roomIds = Object.keys(rooms);
+
+  const packs = roomIds.flatMap((roomId) => {
+    if (typeof rooms[roomId] !== 'object') return [];
+    const room = mx.getRoom(roomId);
+    if (!room) return [];
+    const stateKeys = Object.keys(rooms[roomId]);
+
+    return stateKeys.map((stateKey) => {
+      const data = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
+      const pack = ImagePack.parsePack(data?.getId(), data?.getContent());
+      if (pack) {
+        pack.displayName ??= room.name;
+        pack.avatarUrl ??= room.getMxcAvatarUrl();
+      }
+      return pack;
+    }).filter((pack) => pack !== null);
+  });
+
+  return packs;
+}
+
 function getUserImagePack(mx) {
  const accountDataEmoji = mx.getAccountData('im.ponies.user_emotes');
  if (!accountDataEmoji) {
    return null;
  }

-  const userImagePack = ImagePack.parsePack(accountDataEmoji.event.content);
-  if (userImagePack) userImagePack.displayName ??= 'Your Emoji';
+  const userImagePack = ImagePack.parsePack(mx.getUserId(), accountDataEmoji.event.content);
+  userImagePack.displayName ??= 'Personal Emoji';
  return userImagePack;
 }

-// Produces a list of all of the emoji packs in a room
-//
-// Returns a list of `ImagePack`s.  This does not include packs in spaces that contain
-// this room.
-function getPacksInRoom(room) {
-  const packs = room.currentState.getStateEvents('im.ponies.room_emotes');
+function getRoomImagePacks(room) {
+  const dataEvents = room.currentState.getStateEvents('im.ponies.room_emotes');

-  return packs
-    .map((p) => ImagePack.parsePack(p.event.content, room))
-    .filter((p) => p !== null);
+  return dataEvents
+    .map((data) => {
+      const pack = ImagePack.parsePack(data?.getId(), data?.getContent());
+      if (pack) {
+        pack.displayName ??= room.name;
+        pack.avatarUrl ??= room.getMxcAvatarUrl();
+      }
+      return pack;
+    })
+    .filter((pack) => pack !== null);
 }

-// Produce a list of all image packs which should be shown for a given room
-//
-// This includes packs in that room, the user's personal images, and will eventually
-// include the user's enabled global image packs and space-level packs.
-//
-// This differs from getPacksInRoom, as the former only returns packs that are directly in
-// a room, whereas this function returns all packs which should be shown to the user while
-// they are in this room.
-//
-// Packs will be returned in the order that shortcode conflicts should be resolved, with
-// higher priority packs coming first.
-function getRelevantPacks(room) {
+/**
+ * @param {MatrixClient} mx Provide if you want to include user personal/global pack
+ * @param {Room[]} rooms Provide rooms if you want to include rooms pack
+ * @returns {ImagePack[]} packs
+ */
+function getRelevantPacks(mx, rooms) {
+  const userPack = mx ? getUserImagePack(mx) : [];
+  const globalPacks = mx ? getGlobalImagePacks(mx) : [];
+  const globalPackIds = new Set(globalPacks.map((pack) => pack.id));
+  const roomsPack = rooms?.flatMap(getRoomImagePacks) ?? [];
+
  return [].concat(
-    getUserImagePack(room.client) ?? [],
-    getPacksInRoom(room),
+    userPack ?? [],
+    globalPacks,
+    roomsPack.filter((pack) => !globalPackIds.has(pack.id)),
  );
 }

-// Returns all user+room emojis and all standard unicode emojis
-//
-// Accepts a reference to a matrix client as the only argument
-//
-// Result is a map from shortcode to the corresponding emoji.  If two emoji share a
-// shortcode, only one will be presented, with priority given to custom emoji.
-//
-// Will eventually be expanded to include all emojis revelant to a room and the user
-function getShortcodeToEmoji(room) {
+function getShortcodeToEmoji(mx, rooms) {
  const allEmoji = new Map();

  emojis.forEach((emoji) => {
-    if (emoji.shortcodes.constructor.name === 'Array') {
+    if (Array.isArray(emoji.shortcodes)) {
      emoji.shortcodes.forEach((shortcode) => {
        allEmoji.set(shortcode, emoji);
      });
@@ -138,7 +227,7 @@ function getShortcodeToEmoji(room) {
    }
  });

-  getRelevantPacks(room).reverse()
+  getRelevantPacks(mx, rooms)
    .flatMap((pack) => pack.getEmojis())
    .forEach((emoji) => {
      allEmoji.set(emoji.shortcode, emoji);
@@ -150,7 +239,7 @@ function getShortcodeToEmoji(room) {
 function getShortcodeToCustomEmoji(room) {
  const allEmoji = new Map();

-  getRelevantPacks(room).reverse()
+  getRelevantPacks(room.client, [room])
    .flatMap((pack) => pack.getEmojis())
    .forEach((emoji) => {
      allEmoji.set(emoji.shortcode, emoji);
@@ -159,27 +248,20 @@ function getShortcodeToCustomEmoji(room) {
  return allEmoji;
 }

-// Produces a special list of emoji specifically for auto-completion
-//
-// This list contains each emoji once, with all emoji being deduplicated by shortcode.
-// However, the order of the standard emoji will have been preserved, and alternate
-// shortcodes for the standard emoji will not be considered.
-//
-// Standard emoji are guaranteed to be earlier in the list than custom emoji
-function getEmojiForCompletion(room) {
+function getEmojiForCompletion(mx, rooms) {
  const allEmoji = new Map();
-  getRelevantPacks(room).reverse()
+  getRelevantPacks(mx, rooms)
    .flatMap((pack) => pack.getEmojis())
    .forEach((emoji) => {
      allEmoji.set(emoji.shortcode, emoji);
    });

-  return emojis.filter((e) => !allEmoji.has(e.shortcode))
-    .concat(Array.from(allEmoji.values()));
+  return Array.from(allEmoji.values()).concat(emojis.filter((e) => !allEmoji.has(e.shortcode)));
 }

 export {
-  getUserImagePack,
+  ImagePack,
+  getUserImagePack, getGlobalImagePacks, getRoomImagePacks,
  getShortcodeToEmoji, getShortcodeToCustomEmoji,
  getRelevantPacks, getEmojiForCompletion,
 };
@@ -6,7 +6,7 @@ import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
 import { join } from '../../../client/action/room';
-import { selectRoom, selectSpace } from '../../../client/action/navigation';
+import { selectRoom, selectTab } from '../../../client/action/navigation';

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

 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
-import { selectSpace } from '../../../client/action/navigation';
+import { selectTab, selectSpace } from '../../../client/action/navigation';
 import navigation from '../../../client/state/navigation';
 import { abbreviateNumber } from '../../../util/common';

@@ -107,7 +107,10 @@ function DrawerBreadcrumb({ spaceId }) {
                  { index !== 0 && <RawIcon size="extra-small" src={ChevronRightIC} />}
                  <Button
                    className={index === spacePath.length - 1 ? 'drawer-breadcrumb__btn--selected' : ''}
-                    onClick={() => selectSpace(id)}
+                    onClick={() => {
+                      if (id === cons.tabs.HOME) selectTab(id);
+                      else selectSpace(id);
+                    }}
                  >
                    <Text variant="b2">{id === cons.tabs.HOME ? 'Home' : twemojify(mx.getRoom(id).name)}</Text>
                    { noti !== null && (
@@ -30,7 +30,7 @@ function Home({ spaceId }) {
    roomIds = spaceChildIds.filter((roomId) => rooms.has(roomId));
    directIds = spaceChildIds.filter((roomId) => directs.has(roomId));
  } else {
-    spaceIds = roomList.getOrphanSpaces();
+    spaceIds = roomList.getOrphanSpaces().filter((id) => !accountData.spaceShortcut.has(id));
    roomIds = roomList.getOrphanRooms();
  }

@@ -80,10 +80,10 @@ function Home({ spaceId }) {
        <RoomsCategory name="People" roomIds={directIds.sort(roomIdByActivity)} drawerPostie={drawerPostie} />
      )}

-      { isCategorized && [...categories].map(([catId, childIds]) => {
+      { isCategorized && [...categories.keys()].sort(roomIdByAtoZ).map((catId) => {
        const rms = [];
        const dms = [];
-        childIds.forEach((id) => {
+        categories.get(catId).forEach((id) => {
          if (directs.has(id)) dms.push(id);
          else rms.push(id);
        });
@@ -25,9 +25,11 @@ import RoomHistoryVisibility from '../../molecules/room-history-visibility/RoomH
 import RoomEncryption from '../../molecules/room-encryption/RoomEncryption';
 import RoomPermissions from '../../molecules/room-permissions/RoomPermissions';
 import RoomMembers from '../../molecules/room-members/RoomMembers';
+import RoomEmojis from '../../molecules/room-emojis/RoomEmojis';

 import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
+import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
 import SearchIC from '../../../../public/res/ic/outlined/search.svg';
 import ShieldUserIC from '../../../../public/res/ic/outlined/shield-user.svg';
 import LockIC from '../../../../public/res/ic/outlined/lock.svg';
@@ -42,6 +44,7 @@ const tabText = {
  GENERAL: 'General',
  SEARCH: 'Search',
  MEMBERS: 'Members',
+  EMOJIS: 'Emojis',
  PERMISSIONS: 'Permissions',
  SECURITY: 'Security',
 };
@@ -58,6 +61,10 @@ const tabItems = [{
  iconSrc: UserIC,
  text: tabText.MEMBERS,
  disabled: false,
+}, {
+  iconSrc: EmojiIC,
+  text: tabText.EMOJIS,
+  disabled: false,
 }, {
  iconSrc: ShieldUserIC,
  text: tabText.PERMISSIONS,
@@ -197,6 +204,7 @@ function RoomSettings({ roomId }) {
            {selectedTab.text === tabText.GENERAL && <GeneralSettings roomId={roomId} />}
            {selectedTab.text === tabText.SEARCH && <RoomSearch roomId={roomId} />}
            {selectedTab.text === tabText.MEMBERS && <RoomMembers roomId={roomId} />}
+            {selectedTab.text === tabText.EMOJIS && <RoomEmojis roomId={roomId} />}
            {selectedTab.text === tabText.PERMISSIONS && <RoomPermissions roomId={roomId} />}
            {selectedTab.text === tabText.SECURITY && <SecuritySettings roomId={roomId} />}
          </div>
@@ -210,7 +218,5 @@ RoomSettings.propTypes = {
  roomId: PropTypes.string.isRequired,
 };

-export {
-  RoomSettings as default,
-  tabText,
-};
+export default RoomSettings;
+export { tabText };
@@ -21,7 +21,7 @@ import AsyncSearch from '../../../util/AsyncSearch';
 import Text from '../../atoms/text/Text';
 import ScrollView from '../../atoms/scroll/ScrollView';
 import FollowingMembers from '../../molecules/following-members/FollowingMembers';
-import { addRecentEmoji } from '../emoji-board/recent';
+import { addRecentEmoji, getRecentEmojis } from '../emoji-board/recent';

 const commands = [{
  name: 'markdown',
@@ -213,9 +213,15 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
        setCmd({ prefix, suggestions: commands });
      },
      ':': () => {
-        const emojis = getEmojiForCompletion(mx.getRoom(roomId));
+        const parentIds = initMatrix.roomList.getAllParentSpaces(roomId);
+        const parentRooms = [...parentIds].map((id) => mx.getRoom(id));
+        const emojis = getEmojiForCompletion(mx, [mx.getRoom(roomId), ...parentRooms]);
+        const recentEmoji = getRecentEmojis(20);
        asyncSearch.setup(emojis, { keys: ['shortcode'], isContain: true, limit: 20 });
-        setCmd({ prefix, suggestions: emojis.slice(26, 46) });
+        setCmd({
+          prefix,
+          suggestions: recentEmoji.length > 0 ? recentEmoji : emojis.slice(26, 46),
+        });
      },
      '@': () => {
        const members = mx.getRoom(roomId).getJoinedMembers().map((member) => ({
@@ -247,7 +253,7 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
    }
    if (myCmd.prefix === '@') {
      viewEvent.emit('cmd_fired', {
-        replace: myCmd.result.name,
+        replace: `@${myCmd.result.userId}`,
      });
    }
    deactivateCmd();
@@ -125,10 +125,7 @@ function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) {
    && prevMEvent.getType() !== 'm.room.create'
    && diffMinutes(mEvent.getDate(), prevMEvent.getDate()) <= MAX_MSG_DIFF_MINUTES
  );
-  const mDate = mEvent.getDate();
-  const isToday = isInSameDay(mDate, new Date());
-
-  const time = dateFormat(mDate, isToday ? 'hh:MM TT' : 'dd/mm/yyyy');
+  const timestamp = mEvent.getTs();

  if (mEvent.getType() === 'm.room.member') {
    const timelineChange = parseTimelineChange(mEvent);
@@ -138,7 +135,7 @@ function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) {
        key={mEvent.getId()}
        variant={timelineChange.variant}
        content={timelineChange.content}
-        time={time}
+        timestamp={timestamp}
      />
    );
  }
@@ -149,7 +146,7 @@ function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) {
      isBodyOnly={isBodyOnly}
      roomTimeline={roomTimeline}
      focus={isFocus}
-      time={time}
+      fullTime={false}
    />
  );
 }
@@ -8,7 +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 { openEmojiBoard, openReusableContextMenu } from '../../../client/action/navigation';
 import navigation from '../../../client/state/navigation';
 import { bytesToSize, getEventCords } from '../../../util/common';
 import { getUsername } from '../../../util/matrixUtil';
@@ -20,9 +20,12 @@ import IconButton from '../../atoms/button/IconButton';
 import ScrollView from '../../atoms/scroll/ScrollView';
 import { MessageReply } from '../../molecules/message/Message';

+import StickerBoard from '../sticker-board/StickerBoard';
+
 import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
 import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
 import SendIC from '../../../../public/res/ic/outlined/send.svg';
+import StickerIC from '../../../../public/res/ic/outlined/sticker.svg';
 import ShieldIC from '../../../../public/res/ic/outlined/shield.svg';
 import VLCIC from '../../../../public/res/ic/outlined/vlc.svg';
 import VolumeFullIC from '../../../../public/res/ic/outlined/volume-full.svg';
@@ -128,7 +131,11 @@ function RoomViewInput({
  }
  function firedCmd(cmdData) {
    const msg = textAreaRef.current.value;
-    textAreaRef.current.value = replaceCmdWith(msg, cmdCursorPos, typeof cmdData?.replace !== 'undefined' ? cmdData.replace : '');
+    textAreaRef.current.value = replaceCmdWith(
+      msg,
+      cmdCursorPos,
+      typeof cmdData?.replace !== 'undefined' ? cmdData.replace : '',
+    );
    deactivateCmd();
  }

@@ -199,6 +206,10 @@ function RoomViewInput({
    if (replyTo !== null) setReplyTo(null);
  };

+  const handleSendSticker = async (data) => {
+    roomsInput.sendSticker(roomId, data);
+  };
+
  function processTyping(msg) {
    const isEmptyMsg = msg === '';

@@ -326,6 +337,7 @@ function RoomViewInput({
          <ScrollView autoHide>
            <Text className="room-input__textarea-wrapper">
              <TextareaAutosize
+                dir="auto"
                id="message-textarea"
                ref={textAreaRef}
                onChange={handleMsgTyping}
@@ -338,6 +350,29 @@ function RoomViewInput({
          {isMarkdown && <RawIcon size="extra-small" src={MarkdownIC} />}
        </div>
        <div ref={rightOptionsRef} className="room-input__option-container">
+          <IconButton
+            onClick={(e) => {
+              openReusableContextMenu(
+                'top',
+                (() => {
+                  const cords = getEventCords(e);
+                  cords.y -= 20;
+                  return cords;
+                })(),
+                (closeMenu) => (
+                  <StickerBoard
+                    roomId={roomId}
+                    onSelect={(data) => {
+                      handleSendSticker(data);
+                      closeMenu();
+                    }}
+                  />
+                ),
+              );
+            }}
+            tooltip="Sticker"
+            src={StickerIC}
+          />
          <IconButton
            onClick={(e) => {
              const cords = getEventCords(e);
@@ -70,6 +70,7 @@
  &__preview > img {
    max-height: 40px;
    border-radius: var(--bo-radius);
+    max-width: 150px;
  }
  &__icon {
    padding: var(--sp-extra-tight);
@@ -164,7 +164,7 @@ function getUsersActionJsx(roomId, userIds, actionStr) {

  const othersCount = userIds.length - MAX_VISIBLE_COUNT;
  // eslint-disable-next-line react/jsx-one-expression-per-line
-  return <>{u1Jsx}, {u2Jsx}, {u3Jsx} and {othersCount} other are {actionStr}</>;
+  return <>{u1Jsx}, {u2Jsx}, {u3Jsx} and {othersCount} others are {actionStr}</>;
 }

 function parseTimelineChange(mEvent) {
@@ -24,6 +24,7 @@ import PopupWindow from '../../molecules/popup-window/PopupWindow';
 import SettingTile from '../../molecules/setting-tile/SettingTile';
 import ImportE2ERoomKeys from '../../molecules/import-export-e2e-room-keys/ImportE2ERoomKeys';
 import ExportE2ERoomKeys from '../../molecules/import-export-e2e-room-keys/ExportE2ERoomKeys';
+import { ImagePackUser, ImagePackGlobal } from '../../molecules/image-pack/ImagePack';

 import ProfileEditor from '../profile-editor/ProfileEditor';
 import CrossSigning from './CrossSigning';
@@ -31,6 +32,7 @@ import KeyBackup from './KeyBackup';
 import DeviceManage from './DeviceManage';

 import SunIC from '../../../../public/res/ic/outlined/sun.svg';
+import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
 import LockIC from '../../../../public/res/ic/outlined/lock.svg';
 import BellIC from '../../../../public/res/ic/outlined/bell.svg';
 import InfoIC from '../../../../public/res/ic/outlined/info.svg';
@@ -169,6 +171,15 @@ function NotificationsSection() {
  );
 }

+function EmojiSection() {
+  return (
+    <>
+      <div className="settings-emoji__card"><ImagePackUser /></div>
+      <div className="settings-emoji__card"><ImagePackGlobal /></div>
+    </>
+  );
+}
+
 function SecuritySection() {
  return (
    <div className="settings-security">
@@ -250,6 +261,7 @@ function AboutSection() {
 export const tabText = {
  APPEARANCE: 'Appearance',
  NOTIFICATIONS: 'Notifications',
+  EMOJI: 'Emoji',
  SECURITY: 'Security',
  ABOUT: 'About',
 };
@@ -263,6 +275,11 @@ const tabItems = [{
  iconSrc: BellIC,
  disabled: false,
  render: () => <NotificationsSection />,
+}, {
+  text: tabText.EMOJI,
+  iconSrc: EmojiIC,
+  disabled: false,
+  render: () => <EmojiSection />,
 }, {
  text: tabText.SECURITY,
  iconSrc: LockIC,
@@ -40,7 +40,8 @@
 .settings-notifications,
 .settings-security__card,
 .settings-security .device-manage,
-.settings-about__card {
+.settings-about__card,
+.settings-emoji__card {
  @extend .settings-window__card;
 }

@@ -25,6 +25,7 @@ import RoomVisibility from '../../molecules/room-visibility/RoomVisibility';
 import RoomAliases from '../../molecules/room-aliases/RoomAliases';
 import RoomPermissions from '../../molecules/room-permissions/RoomPermissions';
 import RoomMembers from '../../molecules/room-members/RoomMembers';
+import RoomEmojis from '../../molecules/room-emojis/RoomEmojis';

 import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
@@ -35,6 +36,7 @@ import PinIC from '../../../../public/res/ic/outlined/pin.svg';
 import PinFilledIC from '../../../../public/res/ic/filled/pin.svg';
 import CategoryIC from '../../../../public/res/ic/outlined/category.svg';
 import CategoryFilledIC from '../../../../public/res/ic/filled/category.svg';
+import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';

 import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
 import { useForceUpdate } from '../../hooks/useForceUpdate';
@@ -42,6 +44,7 @@ import { useForceUpdate } from '../../hooks/useForceUpdate';
 const tabText = {
  GENERAL: 'General',
  MEMBERS: 'Members',
+  EMOJIS: 'Emojis',
  PERMISSIONS: 'Permissions',
 };

@@ -53,6 +56,10 @@ const tabItems = [{
  iconSrc: UserIC,
  text: tabText.MEMBERS,
  disabled: false,
+}, {
+  iconSrc: EmojiIC,
+  text: tabText.EMOJIS,
+  disabled: false,
 }, {
  iconSrc: ShieldUserIC,
  text: tabText.PERMISSIONS,
@@ -178,6 +185,7 @@ function SpaceSettings() {
          <div className="space-settings__cards-wrapper">
            {selectedTab.text === tabText.GENERAL && <GeneralSettings roomId={roomId} />}
            {selectedTab.text === tabText.MEMBERS && <RoomMembers roomId={roomId} />}
+            {selectedTab.text === tabText.EMOJIS && <RoomEmojis roomId={roomId} />}
            {selectedTab.text === tabText.PERMISSIONS && <RoomPermissions roomId={roomId} />}
          </div>
        </div>
@@ -0,0 +1,115 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import './StickerBoard.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import { getRelevantPacks } from '../emoji-board/custom-emoji';
+
+import Text from '../../atoms/text/Text';
+import ScrollView from '../../atoms/scroll/ScrollView';
+import IconButton from '../../atoms/button/IconButton';
+
+function StickerBoard({ roomId, onSelect }) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  const scrollRef = useRef(null);
+
+  const parentIds = initMatrix.roomList.getAllParentSpaces(room.roomId);
+  const parentRooms = [...parentIds].map((id) => mx.getRoom(id));
+
+  const packs = getRelevantPacks(
+    mx,
+    [room, ...parentRooms],
+  ).filter((pack) => pack.getStickers().length !== 0);
+
+  function isTargetNotSticker(target) {
+    return target.classList.contains('sticker-board__sticker') === false;
+  }
+  function getStickerData(target) {
+    const mxc = target.getAttribute('data-mx-sticker');
+    const body = target.getAttribute('title');
+    const httpUrl = target.getAttribute('src');
+    return { mxc, body, httpUrl };
+  }
+  const handleOnSelect = (e) => {
+    if (isTargetNotSticker(e.target)) return;
+
+    const stickerData = getStickerData(e.target);
+    onSelect(stickerData);
+  };
+
+  const openGroup = (groupIndex) => {
+    const scrollContent = scrollRef.current.firstElementChild;
+    scrollContent.children[groupIndex].scrollIntoView();
+  };
+
+  const renderPack = (pack) => (
+    <div className="sticker-board__pack" key={pack.id}>
+      <Text className="sticker-board__pack-header" variant="b2" weight="bold">{pack.displayName ?? 'Unknown'}</Text>
+      <div className="sticker-board__pack-items">
+        {pack.getStickers().map((sticker) => (
+          <img
+            key={sticker.shortcode}
+            className="sticker-board__sticker"
+            src={mx.mxcUrlToHttp(sticker.mxc)}
+            alt={sticker.shortcode}
+            title={sticker.body ?? sticker.shortcode}
+            data-mx-sticker={sticker.mxc}
+            loading="lazy"
+          />
+        ))}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="sticker-board">
+      {packs.length > 0 && (
+        <ScrollView invisible>
+          <div className="sticker-board__sidebar">
+            {packs.map((pack, index) => {
+              const src = mx.mxcUrlToHttp(pack.avatarUrl ?? pack.getStickers()[0].mxc);
+              return (
+                <IconButton
+                  key={pack.id}
+                  onClick={() => openGroup(index)}
+                  src={src}
+                  tooltip={pack.displayName || 'Unknown'}
+                  tooltipPlacement="left"
+                  isImage
+                />
+              );
+            })}
+          </div>
+        </ScrollView>
+      )}
+      <div className="sticker-board__container">
+        <ScrollView autoHide ref={scrollRef}>
+          <div
+            onClick={handleOnSelect}
+            className="sticker-board__content"
+          >
+            {
+              packs.length > 0
+                ? packs.map(renderPack)
+                : (
+                  <div className="sticker-board__empty">
+                    <Text>There is no sticker pack.</Text>
+                  </div>
+                )
+            }
+          </div>
+        </ScrollView>
+      </div>
+      <div />
+    </div>
+  );
+}
+StickerBoard.propTypes = {
+  roomId: PropTypes.string.isRequired,
+  onSelect: PropTypes.func.isRequired,
+};
+
+export default StickerBoard;
@@ -0,0 +1,74 @@
+@use '../../partials/dir';
+
+.sticker-board {
+  --sticker-board-height: 390px;
+  --sticker-board-width: 286px;
+  display: flex;
+  height: var(--sticker-board-height);
+  display: flex;
+
+  & > .scrollbar {
+    width: initial;    
+    height: var(--sticker-board-height);
+  }
+
+  &__sidebar {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    padding: 4px 6px;
+    @include dir.side(border, none, 1px solid var(--bg-surface-border));
+  }
+
+  &__container {
+    flex-grow: 1;
+    min-width: 0;
+    width: var(--sticker-board-width);
+    display: flex;
+  }
+
+  &__content {
+    min-height: 100%;
+  }
+
+  &__pack {
+    margin-bottom: var(--sp-normal);
+    position: relative;
+
+    &-header {
+      position: sticky;
+      top: 0;
+      z-index: 99;
+      background-color: var(--bg-surface);
+  
+      @include dir.side(margin, var(--sp-extra-tight), 0);
+      padding: var(--sp-extra-tight) var(--sp-ultra-tight);
+      text-transform: uppercase;
+      box-shadow: 0 -4px 0 0 var(--bg-surface);
+      border-bottom: 1px solid var(--bg-surface-border);
+    }
+    &-items {
+      margin: var(--sp-tight);
+      @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--sp-normal) var(--sp-tight);
+
+      img {
+        width: 76px;  
+        height: 76px;
+        object-fit: contain;
+        cursor: pointer;
+      }
+    }
+  }
+
+  &__empty {
+    width: 100%;
+    height: var(--sticker-board-height);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+}
@@ -1,13 +1,16 @@
 import initMatrix from '../initMatrix';

-function logout() {
+async function logout() {
  const mx = initMatrix.matrixClient;
  mx.stopClient();
-  mx.logout().then(() => {
-    mx.clearStores();
-    window.localStorage.clear();
-    window.location.reload();
-  });
+  try {
+    await mx.logout();
+  } catch {
+    // ignore if failed to logout
+  }
+  mx.clearStores();
+  window.localStorage.clear();
+  window.location.reload();
 }

 export default logout;
@@ -11,17 +11,18 @@ async function redactEvent(roomId, eventId, reason) {
  }
 }

-async function sendReaction(roomId, toEventId, reaction) {
+async function sendReaction(roomId, toEventId, reaction, shortcode) {
  const mx = initMatrix.matrixClient;
-
+  const content = {
+    'm.relates_to': {
+      event_id: toEventId,
+      key: reaction,
+      rel_type: 'm.annotation',
+    },
+  };
+  if (typeof shortcode === 'string') content.shortcode = shortcode;
  try {
-    await mx.sendEvent(roomId, 'm.reaction', {
-      'm.relates_to': {
-        event_id: toEventId,
-        key: reaction,
-        rel_type: 'm.annotation',
-      },
-    });
+    await mx.sendEvent(roomId, 'm.reaction', content);
  } catch (e) {
    throw new Error(e);
  }
@@ -4,6 +4,17 @@ import { selectTab, selectSpace, selectRoom } from '../action/navigation';

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

  roomList.on(cons.events.roomList.ROOM_LEAVED, listenRoomLeave);
@@ -8,12 +8,19 @@ import AccountData from './state/AccountData';
 import RoomsInput from './state/RoomsInput';
 import Notifications from './state/Notifications';
 import { cryptoCallbacks } from './state/secretStorageKeys';
+import navigation from './state/navigation';

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

 // logger.disableAll();

 class InitMatrix extends EventEmitter {
+  constructor() {
+    super();
+
+    navigation.initMatrix = this;
+  }
+
  async init() {
    await this.startClient();
    this.setupSync();
@@ -33,7 +40,6 @@ class InitMatrix extends EventEmitter {
      accessToken: secret.accessToken,
      userId: secret.userId,
      store: indexedDBStore,
-      sessionStore: new sdk.WebStorageSessionStore(global.localStorage),
      cryptoStore: new sdk.IndexedDBCryptoStore(global.indexedDB, 'crypto-store'),
      deviceId: secret.deviceId,
      timelineSupport: true,
@@ -67,7 +73,7 @@ class InitMatrix extends EventEmitter {
        if (prevState === null) {
          this.roomList = new RoomList(this.matrixClient);
          this.accountData = new AccountData(this.roomList);
-          this.roomsInput = new RoomsInput(this.matrixClient);
+          this.roomsInput = new RoomsInput(this.matrixClient, this.roomList);
          this.notifications = new Notifications(this.roomList);
          this.emit('init_loading_finished');
        }
@@ -89,7 +89,7 @@ class RoomList extends EventEmitter {

      child.forEach((childId) => {
        const room = this.matrixClient.getRoom(childId);
-        if (room === null) return;
+        if (room === null || room.getMyMembership() !== 'join') return;
        if (room.isSpaceRoom()) categorizeSpace(childId);
        else mappedChild.add(childId);
      });
@@ -3,23 +3,37 @@ import { micromark } from 'micromark';
 import { gfm, gfmHtml } from 'micromark-extension-gfm';
 import encrypt from 'browser-encrypt-attachment';
 import { math } from 'micromark-extension-math';
+import { encode } from 'blurhash';
 import { getShortcodeToEmoji } from '../../app/organisms/emoji-board/custom-emoji';
 import { mathExtensionHtml, spoilerExtension, spoilerExtensionHtml } from '../../util/markdown';
+import { getBlobSafeMimeType } from '../../util/mimetypes';
+import { sanitizeText } from '../../util/sanitize';
 import cons from './cons';
 import settings from './settings';

-function getImageDimension(file) {
-  return new Promise((resolve) => {
+const blurhashField = 'xyz.amorgan.blurhash';
+const MXID_REGEX = /\B@\S+:\S+\.\S+[^.,:;?!\s]/g;
+const SHORTCODE_REGEX = /\B:([\w-]+):\B/g;
+
+function encodeBlurhash(img) {
+  const canvas = document.createElement('canvas');
+  canvas.width = 100;
+  canvas.height = 100;
+  const context = canvas.getContext('2d');
+  context.drawImage(img, 0, 0, canvas.width, canvas.height);
+  const data = context.getImageData(0, 0, canvas.width, canvas.height);
+  return encode(data.data, data.width, data.height, 4, 4);
+}
+
+function loadImage(url) {
+  return new Promise((resolve, reject) => {
    const img = new Image();
-    img.onload = async () => {
-      resolve({
-        w: img.width,
-        h: img.height,
-      });
-    };
-    img.src = URL.createObjectURL(file);
+    img.onload = () => resolve(img);
+    img.onerror = (err) => reject(err);
+    img.src = url;
  });
 }
+
 function loadVideo(videoFile) {
  return new Promise((resolve, reject) => {
    const video = document.createElement('video');
@@ -120,32 +134,46 @@ function bindReplyToContent(roomId, reply, content) {
  return newContent;
 }

-// Apply formatting to a plain text message
-//
-// This includes inserting any custom emoji that might be relevant, and (only if the
-// user has enabled it in their settings) formatting the message using markdown.
-function formatAndEmojifyText(room, text) {
-  const allEmoji = getShortcodeToEmoji(room);
+function findAndReplace(text, regex, filter, replace) {
+  let copyText = text;
+  Array.from(copyText.matchAll(regex))
+    .filter(filter)
+    .reverse() /* to replace backward to forward */
+    .forEach((match) => {
+      const matchText = match[0];
+      const tag = replace(match);

-  // Start by applying markdown formatting (if relevant)
-  let formattedText;
-  if (settings.isMarkdown) {
-    formattedText = getFormattedBody(text);
-  } else {
-    formattedText = text;
-  }
+      copyText = copyText.substr(0, match.index)
+        + tag
+        + copyText.substr(match.index + matchText.length);
+    });
+  return copyText;
+}

-  // Check to see if there are any :shortcode-style-tags: in the message
-  Array.from(formattedText.matchAll(/\B:([\w-]+):\B/g))
-    // Then filter to only the ones corresponding to a valid emoji
-    .filter((match) => allEmoji.has(match[1]))
-    // Reversing the array ensures that indices are preserved as we start replacing
-    .reverse()
-    // Replace each :shortcode: with an <img/> tag
-    .forEach((shortcodeMatch) => {
-      const emoji = allEmoji.get(shortcodeMatch[1]);
+function formatUserPill(room, text) {
+  const { userIdsToDisplayNames } = room.currentState;
+  return findAndReplace(
+    text,
+    MXID_REGEX,
+    (match) => userIdsToDisplayNames[match[0]],
+    (match) => (
+      `<a href="https://matrix.to/#/${match[0]}">@${userIdsToDisplayNames[match[0]]}</a>`
+    ),
+  );
+}
+
+function formatEmoji(mx, room, roomList, text) {
+  const parentIds = roomList.getAllParentSpaces(room.roomId);
+  const parentRooms = [...parentIds].map((id) => mx.getRoom(id));
+  const allEmoji = getShortcodeToEmoji(mx, [room, ...parentRooms]);
+
+  return findAndReplace(
+    text,
+    SHORTCODE_REGEX,
+    (match) => allEmoji.has(match[1]),
+    (match) => {
+      const emoji = allEmoji.get(match[1]);

-      // Render the tag that will replace the shortcode
      let tag;
      if (emoji.mxc) {
        tag = `<img data-mx-emoticon="" src="${
@@ -158,21 +186,17 @@ function formatAndEmojifyText(room, text) {
      } else {
        tag = emoji.unicode;
      }
-
-      // Splice the tag into the text
-      formattedText = formattedText.substr(0, shortcodeMatch.index)
-        + tag
-        + formattedText.substr(shortcodeMatch.index + shortcodeMatch[0].length);
-    });
-
-  return formattedText;
+      return tag;
+    },
+  );
 }

 class RoomsInput extends EventEmitter {
-  constructor(mx) {
+  constructor(mx, roomList) {
    super();

    this.matrixClient = mx;
+    this.roomList = roomList;
    this.roomIdToInput = new Map();
  }

@@ -257,6 +281,7 @@ class RoomsInput extends EventEmitter {
  }

  async sendInput(roomId) {
+    const room = this.matrixClient.getRoom(roomId);
    const input = this.getInput(roomId);
    input.isSending = true;
    this.roomIdToInput.set(roomId, input);
@@ -266,17 +291,27 @@ class RoomsInput extends EventEmitter {
    }

    if (this.getMessage(roomId).trim() !== '') {
+      const rawMessage = input.message;
      let content = {
-        body: input.message,
+        body: rawMessage,
        msgtype: 'm.text',
      };

      // Apply formatting if relevant
-      const formattedBody = formatAndEmojifyText(
-        this.matrixClient.getRoom(roomId),
-        input.message,
+      let formattedBody = settings.isMarkdown
+        ? getFormattedBody(rawMessage)
+        : sanitizeText(rawMessage);
+
+      formattedBody = formatUserPill(room, formattedBody);
+      formattedBody = formatEmoji(this.matrixClient, room, this.roomList, formattedBody);
+
+      content.body = findAndReplace(
+        content.body,
+        MXID_REGEX,
+        (match) => room.currentState.userIdsToDisplayNames[match[0]],
+        (match) => `@${room.currentState.userIdsToDisplayNames[match[0]]}`,
      );
-      if (formattedBody !== input.message) {
+      if (formattedBody !== sanitizeText(rawMessage)) {
        // Formatting was applied, and we need to switch to custom HTML
        content.format = 'org.matrix.custom.html';
        content.formatted_body = formattedBody;
@@ -292,8 +327,36 @@ class RoomsInput extends EventEmitter {
    this.emit(cons.events.roomsInput.MESSAGE_SENT, roomId);
  }

+  async sendSticker(roomId, data) {
+    const { mxc: url, body, httpUrl } = data;
+    const info = {};
+
+    const img = new Image();
+    img.src = httpUrl;
+
+    try {
+      const res = await fetch(httpUrl);
+      const blob = await res.blob();
+      info.w = img.width;
+      info.h = img.height;
+      info.mimetype = blob.type;
+      info.size = blob.size;
+      info.thumbnail_info = { ...info };
+      info.thumbnail_url = url;
+    } catch {
+      // send sticker without info
+    }
+
+    this.matrixClient.sendEvent(roomId, 'm.sticker', {
+      body,
+      url,
+      info,
+    });
+    this.emit(cons.events.roomsInput.MESSAGE_SENT, roomId);
+  }
+
  async sendFile(roomId, file) {
-    const fileType = file.type.slice(0, file.type.indexOf('/'));
+    const fileType = getBlobSafeMimeType(file.type).slice(0, file.type.indexOf('/'));
    const info = {
      mimetype: file.type,
      size: file.size,
@@ -302,10 +365,11 @@ class RoomsInput extends EventEmitter {
    let uploadData = null;

    if (fileType === 'image') {
-      const imgDimension = await getImageDimension(file);
+      const img = await loadImage(URL.createObjectURL(file));

-      info.w = imgDimension.w;
-      info.h = imgDimension.h;
+      info.w = img.width;
+      info.h = img.height;
+      info[blurhashField] = encodeBlurhash(img);

      content.msgtype = 'm.image';
      content.body = file.name || 'Image';
@@ -315,8 +379,11 @@ class RoomsInput extends EventEmitter {

      try {
        const video = await loadVideo(file);
+
        info.w = video.videoWidth;
        info.h = video.videoHeight;
+        info[blurhashField] = encodeBlurhash(video);
+
        const thumbnailData = await getVideoThumbnail(video, video.videoWidth, video.videoHeight, 'image/jpeg');
        const thumbnailUploadData = await this.uploadFile(roomId, thumbnailData.thumbnail);
        info.thumbnail_info = thumbnailData.info;
@@ -395,6 +462,7 @@ class RoomsInput extends EventEmitter {
  }

  async sendEditedMessage(roomId, mEvent, editedBody) {
+    const room = this.matrixClient.getRoom(roomId);
    const isReply = typeof mEvent.getWireContent()['m.relates_to']?.['m.in_reply_to'] !== 'undefined';

    const content = {
@@ -411,11 +479,19 @@ class RoomsInput extends EventEmitter {
    };

    // Apply formatting if relevant
-    const formattedBody = formatAndEmojifyText(
-      this.matrixClient.getRoom(roomId),
-      editedBody,
+    let formattedBody = settings.isMarkdown
+      ? getFormattedBody(editedBody)
+      : sanitizeText(editedBody);
+    formattedBody = formatUserPill(room, formattedBody);
+    formattedBody = formatEmoji(this.matrixClient, room, this.roomList, formattedBody);
+
+    content.body = findAndReplace(
+      content.body,
+      MXID_REGEX,
+      (match) => room.currentState.userIdsToDisplayNames[match[0]],
+      (match) => `@${room.currentState.userIdsToDisplayNames[match[0]]}`,
    );
-    if (formattedBody !== editedBody) {
+    if (formattedBody !== sanitizeText(editedBody)) {
      content.formatted_body = ` * ${formattedBody}`;
      content.format = 'org.matrix.custom.html';
      content['m.new_content'].formatted_body = formattedBody;
@@ -1,5 +1,5 @@
 const cons = {
-  version: '2.0.4',
+  version: '2.1.2',
  secretKey: {
    ACCESS_TOKEN: 'cinny_access_token',
    DEVICE_ID: 'cinny_device_id',
@@ -5,6 +5,8 @@ import cons from './cons';
 class Navigation extends EventEmitter {
  constructor() {
    super();
+    // this will attached by initMatrix
+    this.initMatrix = {};

    this.selectedTab = cons.tabs.HOME;
    this.selectedSpaceId = null;
@@ -14,14 +16,20 @@ class Navigation extends EventEmitter {
    this.isRoomSettings = false;
    this.recentRooms = [];

+    this.spaceToRoom = new Map();
+
    this.rawModelStack = [];
  }

-  _setSpacePath(roomId) {
-    if (roomId === null || roomId === cons.tabs.HOME) {
+  _addToSpacePath(roomId, asRoot) {
+    if (typeof roomId !== 'string') {
      this.selectedSpacePath = [cons.tabs.HOME];
      return;
    }
+    if (asRoot) {
+      this.selectedSpacePath = [roomId];
+      return;
+    }
    if (this.selectedSpacePath.includes(roomId)) {
      const spIndex = this.selectedSpacePath.indexOf(roomId);
      this.selectedSpacePath = this.selectedSpacePath.slice(0, spIndex + 1);
@@ -30,6 +38,215 @@ class Navigation extends EventEmitter {
    this.selectedSpacePath.push(roomId);
  }

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

  /* shadow and overlay */
  --bg-overlay: rgba(0, 0, 0, 20%);
-  --bg-overlay-low: rgba(0, 0, 0, 85%);
+  --bg-overlay-low: rgba(0, 0, 0, 50%);

  --bs-popup: 0 0 16px rgba(0, 0, 0, 10%);

@@ -264,7 +264,8 @@
  }
  
  /* shadow and overlay */
-  --bg-overlay: rgba(0, 0, 0, 50%);
+  --bg-overlay: rgba(0, 0, 0, 60%);
+  --bg-overlay-low: rgba(0, 0, 0, 80%);

  --bs-popup: 0 0 16px rgba(0, 0, 0, 25%);

@@ -132,3 +132,65 @@ export function copyToClipboard(text) {
    copyInput.remove();
  }
 }
+
+export function suffixRename(name, validator) {
+  let suffix = 2;
+  let newName = name;
+  do {
+    newName = name + suffix;
+    suffix += 1;
+  } while (validator(newName));
+
+  return newName;
+}
+
+export function getImageDimension(file) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = async () => {
+      resolve({
+        w: img.width,
+        h: img.height,
+      });
+      URL.revokeObjectURL(img.src);
+    };
+    img.src = URL.createObjectURL(file);
+  });
+}
+
+export function scaleDownImage(imageFile, width, height) {
+  return new Promise((resolve) => {
+    const imgURL = URL.createObjectURL(imageFile);
+    const img = new Image();
+
+    img.onload = () => {
+      let newWidth = img.width;
+      let newHeight = img.height;
+      if (newHeight <= height && newWidth <= width) {
+        resolve(imageFile);
+      }
+
+      if (newHeight > height) {
+        newWidth = Math.floor(newWidth * (height / newHeight));
+        newHeight = height;
+      }
+      if (newWidth > width) {
+        newHeight = Math.floor(newHeight * (width / newWidth));
+        newWidth = width;
+      }
+
+      const canvas = document.createElement('canvas');
+      canvas.width = newWidth;
+      canvas.height = newHeight;
+      const ctx = canvas.getContext('2d');
+      ctx.drawImage(img, 0, 0, newWidth, newHeight);
+
+      canvas.toBlob((thumbnail) => {
+        URL.revokeObjectURL(imgURL);
+        resolve(thumbnail);
+      }, imageFile.type);
+    };
+
+    img.src = imgURL;
+  });
+}
@@ -0,0 +1,37 @@
+// https://github.com/matrix-org/matrix-react-sdk/blob/cd15e08fc285da42134817cce50de8011809cd53/src/utils/blobs.ts
+export const ALLOWED_BLOB_MIMETYPES = [
+  'image/jpeg',
+  'image/gif',
+  'image/png',
+  'image/apng',
+  'image/webp',
+  'image/avif',
+
+  'video/mp4',
+  'video/webm',
+  'video/ogg',
+  'video/quicktime',
+
+  'audio/mp4',
+  'audio/webm',
+  'audio/aac',
+  'audio/mpeg',
+  'audio/ogg',
+  'audio/wave',
+  'audio/wav',
+  'audio/x-wav',
+  'audio/x-pn-wav',
+  'audio/flac',
+  'audio/x-flac',
+];
+
+export function getBlobSafeMimeType(mimetype) {
+  if (!ALLOWED_BLOB_MIMETYPES.includes(mimetype)) {
+    return 'application/octet-stream';
+  }
+  // Required for Chromium browsers
+  if (mimetype === 'video/quicktime') {
+    return 'video/mp4';
+  }
+  return mimetype;
+}
@@ -1,7 +1,7 @@
 import sanitizeHtml from 'sanitize-html';
-import initMatrix from '../client/initMatrix';

 const MAX_TAG_NESTING = 100;
+let mx = null;

 const permittedHtmlTags = [
  'font', 'del', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
@@ -54,7 +54,7 @@ function transformATag(tagName, attribs) {
        'data-mx-pill': userId,
      },
    };
-    if (userId === initMatrix.matrixClient.getUserId()) {
+    if (userId === mx?.getUserId()) {
      pill.attribs['data-mx-ping'] = undefined;
    }
    return pill;
@@ -76,17 +76,28 @@ function transformATag(tagName, attribs) {

 function transformImgTag(tagName, attribs) {
  const { src } = attribs;
-  const mx = initMatrix.matrixClient;
+  if (src.startsWith('mxc://') === false) {
+    return {
+      tagName: 'a',
+      attribs: {
+        href: src,
+        rel: 'noopener',
+        target: '_blank',
+      },
+      text: attribs.alt || src,
+    };
+  }
  return {
    tagName,
    attribs: {
      ...attribs,
-      src: src.startsWith('mxc://') ? mx.mxcUrlToHttp(src) : src,
+      src: mx?.mxcUrlToHttp(src),
    },
  };
 }

-export function sanitizeCustomHtml(body) {
+export function sanitizeCustomHtml(matrixClient, body) {
+  mx = matrixClient;
  return sanitizeHtml(body, {
    allowedTags: permittedHtmlTags,
    allowedAttributes: permittedTagToAttributes,
Author	SHA1	Message	Date
Krishan	923d2a2167	Merge branch 'dev' into sidebar-update	2022-08-20 20:46:43 +05:30
jameskitt616	1deef51df0	Add cancel edit-message on Escape Key press (#765 )	2022-08-20 18:56:37 +05:30
Ajay Bura	ddacdbf25f	Order category by AtoZ (#769 )	2022-08-20 16:29:07 +05:30
Ajay Bura	7c3a32641c	Fix selecting dm always open dm tab	2022-08-20 16:21:22 +05:30
Ajay Bura	1ec7322830	Hide pin spaces from home	2022-08-20 13:58:24 +05:30
Ajay Bura	30972b8e87	Remove globally exposed vars	2022-08-20 13:27:03 +05:30
Ajay Bura	e801aa538d	Fix leaved room appear in category & search	2022-08-20 13:26:12 +05:30
Ajay Bura	a5878e9de6	Fix room remain selected on leave	2022-08-20 13:12:29 +05:30
Ajay Bura	8b52c3cfff	Fix auto select room in categorized space	2022-08-20 12:52:56 +05:30
Ajay Bura	0fc128150b	Fix wrong space gets selected with some rooms	2022-08-20 11:01:42 +05:30
Ajay Bura	db7f1746f6	Merge branch 'sidebar-update' of https://github.com/ajbura/cinny into sidebar-update	2022-08-19 19:36:32 +05:30
Ajay Bura	c73c8d7ffa	Update sidbar on room select from search (#374 )	2022-08-19 19:33:27 +05:30
Ajay Bura	ba37b3047e	Select last room on space/tab change (#353 )	2022-08-19 19:33:27 +05:30
Ajay Bura	010e3cca82	Update sidbar on room select from search (#374 )	2022-08-19 19:30:29 +05:30
Ajay Bura	74ffd6280f	Select last room on space/tab change (#353 )	2022-08-19 18:35:38 +05:30
Ajay Bura	6f7934badc	Fix more css bugs	2022-08-19 15:19:12 +05:30
Ajay Bura	2f2680be3c	Fix minor css bugs	2022-08-19 13:57:24 +05:30
Ajay Bura	4cd8f4a94c	Open image in lightbox (#767 ) * Add lightbox * Fix vertical media height (#467) * Update dialog animation * Fix overlay opacity * Fix dialog animation * Update open in new tab icon	2022-08-19 12:15:22 +05:30
James	a417980a81	Improve MIME type handling on File Upload and in Message Component (#688 ) * move allowed MIME types to own util file * add check for safe MIME type before choosing how to upload * check for allowed blob type to decide what component to load * re-add check for safe mimetype * fix bracket positioning	2022-08-14 16:31:17 +05:30
Andrew Morgan	af69955801	Fix grammar of read receipt text (#744 ) 'other' should be plural in this context.	2022-08-12 16:03:56 +05:30
Ajay Bura	214d49f1d9	Release v2.1.2	2022-08-11 19:10:12 +05:30
dependabot[bot]	c4e36a1f97	Bump @fontsource/inter from 4.5.11 to 4.5.12 (#726 ) Bumps [@fontsource/inter](https://github.com/fontsource/fontsource/tree/HEAD/fonts/google/inter) from 4.5.11 to 4.5.12. - [Release notes](https://github.com/fontsource/fontsource/releases) - [Changelog](https://github.com/fontsource/fontsource/blob/main/CHANGELOG.md) - [Commits](https://github.com/fontsource/fontsource/commits/HEAD/fonts/google/inter) --- updated-dependencies: - dependency-name: "@fontsource/inter" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-08-11 18:46:19 +05:30
dependabot[bot]	5de6a1bea6	Bump @fontsource/roboto from 4.5.7 to 4.5.8 (#727 ) Bumps [@fontsource/roboto](https://github.com/fontsource/fontsource/tree/HEAD/fonts/google/roboto) from 4.5.7 to 4.5.8. - [Release notes](https://github.com/fontsource/fontsource/releases) - [Changelog](https://github.com/fontsource/fontsource/blob/main/CHANGELOG.md) - [Commits](https://github.com/fontsource/fontsource/commits/HEAD/fonts/google/roboto) --- updated-dependencies: - dependency-name: "@fontsource/roboto" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-08-11 18:44:00 +05:30
dependabot[bot]	74a20a0e14	Bump sass from 1.54.1 to 1.54.3 (#728 ) Bumps [sass](https://github.com/sass/dart-sass) from 1.54.1 to 1.54.3. - [Release notes](https://github.com/sass/dart-sass/releases) - [Changelog](https://github.com/sass/dart-sass/blob/main/CHANGELOG.md) - [Commits](https://github.com/sass/dart-sass/compare/1.54.1...1.54.3) --- updated-dependencies: - dependency-name: sass dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-08-11 18:43:31 +05:30
Ajay Bura	820d08017a	Fix image not loading without h/w data (#738 )	2022-08-11 18:41:09 +05:30
Ajay Bura	258afec391	Only render mxc images in markdown	2022-08-11 17:20:55 +05:30
Ajay Bura	0cf5aac591	Fix emoji board style	2022-08-11 16:31:02 +05:30
Ajay Bura	59fd34a4b4	Replace space by underscore in emoji shortcodes	2022-08-11 16:24:22 +05:30
Ajay Bura	1da3d252e8	Add navigation bar to sticker board	2022-08-11 16:13:53 +05:30
Ajay Bura	3c1cc59d59	Escape html with markdown off (#732 )	2022-08-11 14:28:39 +05:30
Ajay Bura	1692098d5d	Fix logout not working when server offline	2022-08-11 13:41:07 +05:30
Ajay Bura	fbab53af22	Merge branch 'dev' of https://github.com/ajbura/cinny into dev	2022-08-11 13:33:59 +05:30
Ajay Bura	ce1e263d57	Only scale image bigger than 512px (#731 )	2022-08-11 13:33:54 +05:30
dependabot[bot]	9f99320fda	Bump docker/build-push-action from 3.1.0 to 3.1.1 (#725 ) Bumps [docker/build-push-action](https://github.com/docker/build-push-action) from 3.1.0 to 3.1.1. - [Release notes](https://github.com/docker/build-push-action/releases) - [Commits](https://github.com/docker/build-push-action/compare/v3.1.0...v3.1.1) --- updated-dependencies: - dependency-name: docker/build-push-action dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-08-09 09:30:34 +05:30
Ajay Bura	20e1df43d0	Release v2.1.1	2022-08-07 20:21:16 +05:30
Ajay Bura	728c5434bb	Fix blurhash visible under transparent img (#721 )	2022-08-07 20:14:47 +05:30
Ajay Bura	542ac4f4e1	Update olm	2022-08-07 20:01:31 +05:30
Ajay Bura	d23fc228d7	Release v2.1.0	2022-08-07 19:04:38 +05:30
dependabot[bot]andAjay Bura	4ff3e47d54	Bump matrix-js-sdk from 18.1.0 to 19.2.0 (#711 ) * Bump matrix-js-sdk from 18.1.0 to 19.2.0 Bumps [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk) from 18.1.0 to 19.2.0. - [Release notes](https://github.com/matrix-org/matrix-js-sdk/releases) - [Changelog](https://github.com/matrix-org/matrix-js-sdk/blob/develop/CHANGELOG.md) - [Commits](https://github.com/matrix-org/matrix-js-sdk/compare/v18.1.0...v19.2.0) --- updated-dependencies: - dependency-name: matrix-js-sdk dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * Remove session store Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>	2022-08-07 14:51:56 +05:30
anyone00andKrishan	96b22eb557	Support RTL text in the input fields (#720 ) * Support RTL text in the room input field set the correct direction for text according to the language written in * Make all input RTLable Co-authored-by: Krishan <33421343+kfiven@users.noreply.github.com>	2022-08-07 14:41:56 +05:30
Ajay Bura	9187107751	Stop sending mxid in body for pills	2022-08-07 14:28:49 +05:30
Ajay Bura	c6812b5b11	Reset read receipt on sending sticker	2022-08-06 12:50:23 +05:30
Ajay Bura	adb584623e	Support RTL text in messages (#717 )	2022-08-06 12:40:24 +05:30
Ajay Bura	120e8de9d1	Remove unused import	2022-08-06 12:21:20 +05:30
ginnyTheCat	21726b63f8	Show full timestamp on hover (#714 ) * Show full timestamp on hover * Not always display time * Always show full timestamp in search	2022-08-06 09:35:56 +05:30
ginnyTheCatandAjay Bura	04f910ee03	Blurhash support (#701 ) * Generate blurhash client side * Make blurhash generation faster * Simple blurhash display support * Make image display simpler * Support non square images * Don't attach video blurhash to thumbnail * Add video display support * Ignore alt tag missing warning Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>	2022-08-06 09:26:26 +05:30
Ajay Bura	edace32213	Custom emoji & Sticker support (#686 ) * Remove comments * Show custom emoji first in suggestions * Show global image packs in emoji picker * Display emoji and sticker in room settings * Fix some pack not visible in emojiboard * WIP * Add/delete/rename images to exisitng packs * Change pack avatar, name & attribution * Add checkbox to make pack global * Bug fix * Create or delete pack * Add personal emoji in settings * Show global pack selector in settings * Show space emoji in emojiboard * Send custom emoji reaction as mxc * Render stickers as stickers * Fix sticker jump bug * Fix reaction width * Fix stretched custom emoji * Fix sending space emoji in message * Remove unnessesary comments * Send user pills * Fix pill generating regex * Add support for sending stickers	2022-08-06 09:04:23 +05:30