add captain definition file

Convert to typescript and fix fullTime
cryptE2ERoomKeys -> ts
2023-04-04 19:35:41 -05:00 · 2023-03-31 19:00:52 -05:00 · 2023-03-31 18:56:05 -05:00 · 2023-03-31 18:26:17 -05:00 · 2023-03-31 18:22:34 -05:00 · 2023-03-31 17:26:43 -05:00
293 changed files with 10276 additions and 7018 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -9,24 +9,21 @@ module.exports = {
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
-    'airbnb',
-    'prettier',
+    "airbnb",
+    "prettier",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
-    ecmaVersion: 'latest',
-    sourceType: 'module',
+    ecmaVersion: "latest",
+    sourceType: "module",
  },
-  plugins: [
-    'react',
-    '@typescript-eslint'
-  ],
+  plugins: ["react", "@typescript-eslint"],
  rules: {
-    'linebreak-style': 0,
-    'no-underscore-dangle': 0,
+    "linebreak-style": 0,
+    "no-underscore-dangle": 0,

    "import/prefer-default-export": "off",
    "import/extensions": "off",
@ -38,10 +35,7 @@ module.exports = {
      },
    ],

-    'react/no-unstable-nested-components': [
-      'error',
-      { allowAsProps: true },
-    ],
+    "react/no-unstable-nested-components": ["error", { allowAsProps: true }],
    "react/jsx-filename-extension": [
      "error",
      {
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@ -42,10 +42,10 @@ body:
      label: Platform and versions
      description: "Provide OS, browser and Cinny version with your Homeserver."
      placeholder: |
-       1. OS: [e.g. Windows 10, MacOS]
-       2. Browser: [e.g. chrome 99.5, firefox 97.2]
-       3. Cinny version: [e.g. 1.8.1 (app.cinny.in)]
-       4. Matrix homeserver: [e.g. matrix.org]
+        1. OS: [e.g. Windows 10, MacOS]
+        2. Browser: [e.g. chrome 99.5, firefox 97.2]
+        3. Cinny version: [e.g. 1.8.1 (app.cinny.in)]
+        4. Matrix homeserver: [e.g. matrix.org]
      render: shell
    validations:
      required: true
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -1,8 +1,8 @@
 <!-- Please read https://github.com/ajbura/cinny/blob/dev/CONTRIBUTING.md before submitting your pull request -->

 ### Description
-<!-- Please include a summary of the change. Please also include relevant motivation and context. List any dependencies that are required for this change. -->

+<!-- Please include a summary of the change. Please also include relevant motivation and context. List any dependencies that are required for this change. -->

 Fixes #

--- a/.github/renovate.json
+++ b/.github/renovate.json
@ -1,13 +1,10 @@
 {
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:base",
-    ":dependencyDashboardApproval"
-  ],
-  "labels": [ "Dependencies" ],
+  "extends": ["config:base", ":dependencyDashboardApproval"],
+  "labels": ["Dependencies"],
  "packageRules": [
    {
-    "matchUpdateTypes": [ "lockFileMaintenance" ]
+      "matchUpdateTypes": ["lockFileMaintenance"]
    }
  ],
  "lockFileMaintenance": { "enabled": true },
--- a/.github/workflows/build-pull-request.yml
+++ b/.github/workflows/build-pull-request.yml
@ -2,7 +2,7 @@ name: Build pull request

 on:
  pull_request:
-    types: ['opened', 'synchronize']
+    types: ["opened", "synchronize"]

 jobs:
  build-pull-request:
@ -21,6 +21,8 @@ jobs:
      - name: Install dependencies
        run: npm ci
      - name: Build app
+        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
        run: npm run build
      - name: Upload artifact
        uses: actions/upload-artifact@v3.1.1
--- a/.github/workflows/cla.yml
+++ b/.github/workflows/cla.yml
@ -1,4 +1,4 @@
-name: 'CLA Assistant'
+name: "CLA Assistant"
 on:
  issue_comment:
    types: [created]
@ -9,7 +9,7 @@ jobs:
  CLAssistant:
    runs-on: ubuntu-latest
    steps:
-      - name: 'CLA Assistant'
+      - name: "CLA Assistant"
        if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
        # Beta Release
        uses: cla-assistant/github-action@v2.2.1
@ -18,10 +18,10 @@ jobs:
          # the below token should have repo scope and must be manually added by you in the repository's secret
          PERSONAL_ACCESS_TOKEN: ${{ secrets.CLA_PAT }}
        with:
-          path-to-signatures: 'signatures.json'
-          path-to-document: 'https://github.com/cinnyapp/cla/blob/main/cla.md' # e.g. a CLA or a DCO document
+          path-to-signatures: "signatures.json"
+          path-to-document: "https://github.com/cinnyapp/cla/blob/main/cla.md" # e.g. a CLA or a DCO document
          # branch should not be protected
-          branch: 'main'
+          branch: "main"
          allowlist: ajbura,bot*

          #below are the optional inputs - If the optional inputs are not given, then default values will be taken
--- a/.github/workflows/deploy-pull-request.yml
+++ b/.github/workflows/deploy-pull-request.yml
@ -2,8 +2,8 @@ name: Deploy PR to Netlify

 on:
  workflow_run:
-      workflows: ["Build pull request"]
-      types: [completed]
+    workflows: ["Build pull request"]
+    types: [completed]

 jobs:
  deploy-pull-request:
@ -52,5 +52,5 @@ jobs:
          pr_number: ${{ steps.pr.outputs.id }}
          comment_tag: ${{ steps.pr.outputs.id }}
          message: |
-              Preview: ${{ steps.netlify.outputs.deploy-url }}
-              ⚠️ Exercise caution. Use test accounts. ⚠️
+            Preview: ${{ steps.netlify.outputs.deploy-url }}
+            ⚠️ Exercise caution. Use test accounts. ⚠️
--- a/.github/workflows/docker-pr.yml
+++ b/.github/workflows/docker-pr.yml
@ -1,10 +1,10 @@
-name: 'Docker check'
+name: "Docker check"

 on:
  pull_request:
    paths:
-      - 'Dockerfile'
-      - '.github/workflows/docker-pr.yml'
+      - "Dockerfile"
+      - ".github/workflows/docker-pr.yml"

 jobs:
  docker-build:
--- a/.github/workflows/lockfile.yml
+++ b/.github/workflows/lockfile.yml
@ -3,7 +3,7 @@ name: NPM Lockfile Changes
 on:
  pull_request:
    paths:
-      - 'package-lock.json'
+      - "package-lock.json"

 jobs:
  lockfile_changes:
--- a/.github/workflows/netlify-dev.yml
+++ b/.github/workflows/netlify-dev.yml
@ -3,7 +3,7 @@ name: Deploy to Netlify (dev)
 on:
  push:
    branches:
-       - dev
+      - dev

 jobs:
  deploy-to-netlify:
@ -20,6 +20,8 @@ jobs:
      - name: Install dependencies
        run: npm ci
      - name: Build app
+        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
        run: npm run build
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@5da65c9f74c7961c5501a3ba329b8d0912f39c03
@ -30,7 +32,7 @@ jobs:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          production-deploy: true
          github-deployment-environment: nightly
-          github-deployment-description: 'Nightly deployment on each commit to dev branch'
+          github-deployment-description: "Nightly deployment on each commit to dev branch"
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_DEV }}
--- a/.github/workflows/prod-deploy.yml
+++ b/.github/workflows/prod-deploy.yml
@ -19,6 +19,8 @@ jobs:
      - name: Install dependencies
        run: npm ci
      - name: Build app
+        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
        run: npm run build
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@5da65c9f74c7961c5501a3ba329b8d0912f39c03
@ -29,7 +31,7 @@ jobs:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          production-deploy: true
          github-deployment-environment: stable
-          github-deployment-description: 'Stable deployment on each release'
+          github-deployment-description: "Stable deployment on each release"
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_APP }}
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -1,4 +1,8 @@
 {
-  "printWidth": 100,
-  "singleQuote": true
+  "tabWidth": 2,
+  "semi": true,
+  "useTabs": false,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "printWidth": 80
 }
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -5,6 +5,7 @@ First off, thanks for taking the time to contribute! ❤️
 All types of contributions are encouraged and valued. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉

 > And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about:
+>
 > - Star the project
 > - Tweet about it (tag @cinnyapp)
 > - Refer this project in your project's readme
@ -18,6 +19,7 @@ Bug reports and feature suggestions must use descriptive and concise titles and
 ## Pull requests

 > ### Legal Notice
+>
 > When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license.

 **NOTE: If you want to add new features, please discuss with maintainers before coding or opening a pull request.** This is to ensure that we are on same track and following our roadmap.
@ -26,9 +28,9 @@ Bug reports and feature suggestions must use descriptive and concise titles and

 Example:

-|Not ideal|Better|
-|---|----|
-|Fixed markAllAsRead in RoomTimeline|Fix read marker when paginating room timeline|
+| Not ideal                           | Better                                        |
+| ----------------------------------- | --------------------------------------------- |
+| Fixed markAllAsRead in RoomTimeline | Fix read marker when paginating room timeline |

 It is not always possible to phrase every change in such a manner, but it is desired.

@ -39,6 +41,7 @@ Also, we use [ESLint](https://eslint.org/) for clean and stylistically consisten
 **For any query or design discussion, join our [Matrix room](https://matrix.to/#/#cinny:matrix.org).**

 ## Helpful links
+
 - [BEM methodology](http://getbem.com/introduction/)
 - [Atomic design](https://bradfrost.com/blog/post/atomic-web-design/)
 - [Matrix JavaScript SDK documentation](https://matrix-org.github.io/matrix-js-sdk/index.html)
--- a/1
+++ b/1
@ -6,6 +6,7 @@ WORKDIR /src
 COPY .npmrc package.json package-lock.json /src/
 RUN npm ci
 COPY . /src/
+ENV NODE_OPTIONS=--max_old_space_size=4096
 RUN npm run build


--- a/4
+++ b/4
@ -0,0 +1,4 @@
+{
+  "schemaVersion": 2,
+  "dockerfilePath": "./Dockerfile"
+}
--- a/index.html
+++ b/index.html
@ -18,7 +18,10 @@

    <meta property="og:title" content="Cinny" />
    <meta property="og:url" content="https://cinny.in" />
-    <meta property="og:image" content="https://cinny.in/assets/favicon-48x48.png" />
+    <meta
+      property="og:image"
+      content="https://cinny.in/assets/favicon-48x48.png"
+    />
    <meta
      property="og:description"
      content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
@ -32,7 +35,10 @@
    <meta name="application-name" content="Cinny" />
    <meta name="apple-mobile-web-app-title" content="Cinny" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent"
+    />

    <link
      rel="apple-touch-icon"
@ -96,6 +102,6 @@
    <audio id="inviteSound">
      <source src="./public/sound/invite.ogg" type="audio/ogg" />
    </audio>
-    <script type="module" src="./src/index.jsx"></script>
+    <script type="module" src="./src/index.tsx"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "cinny",
-  "version": "2.2.4",
+  "version": "2.2.6",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "cinny",
-      "version": "2.2.4",
+      "version": "2.2.6",
      "license": "AGPL-3.0-only",
      "dependencies": {
        "@fontsource/inter": "4.5.14",
@ -14,6 +14,7 @@
        "@khanacademy/simple-markdown": "0.8.6",
        "@matrix-org/olm": "3.2.14",
        "@tippyjs/react": "4.2.6",
+        "@types/flux": "3.1.11",
        "blurhash": "2.0.4",
        "browser-encrypt-attachment": "0.3.0",
        "dateformat": "5.0.3",
@ -21,11 +22,11 @@
        "file-saver": "2.0.5",
        "flux": "4.0.3",
        "formik": "2.2.9",
-        "html-react-parser": "3.0.15",
+        "html-react-parser": "3.0.4",
        "katex": "0.16.4",
        "linkify-html": "4.0.2",
        "linkifyjs": "4.0.2",
-        "matrix-js-sdk": "22.0.0",
+        "matrix-js-sdk": "24.0.0",
        "prop-types": "15.8.1",
        "react": "17.0.2",
        "react-autosize-textarea": "7.1.0",
@ -43,6 +44,7 @@
        "@esbuild-plugins/node-globals-polyfill": "0.2.3",
        "@rollup/plugin-inject": "5.0.3",
        "@rollup/plugin-wasm": "6.1.1",
+        "@types/dateformat": "5.0.0",
        "@types/node": "18.11.18",
        "@types/react": "18.0.26",
        "@types/react-dom": "18.0.9",
@ -958,6 +960,14 @@
        "react-dom": "16.14.0"
      }
    },
+    "node_modules/@matrix-org/matrix-sdk-crypto-js": {
+      "version": "0.1.0-alpha.5",
+      "resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-js/-/matrix-sdk-crypto-js-0.1.0-alpha.5.tgz",
+      "integrity": "sha512-2KjAgWNGfuGLNjJwsrs6gGX157vmcTfNrA4u249utgnMPbJl7QwuUqh1bGxQ0PpK06yvZjgPlkna0lTbuwtuQw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
    "node_modules/@matrix-org/olm": {
      "version": "3.2.14",
      "resolved": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz",
@ -1107,6 +1117,12 @@
        "react-dom": ">=16.8"
      }
    },
+    "node_modules/@types/dateformat": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/dateformat/-/dateformat-5.0.0.tgz",
+      "integrity": "sha512-SZg4JdHIWHQGEokbYGZSDvo5wA4TLYPXaqhigs/wH+REDOejcJzgH+qyY+HtEUtWOZxEUkbhbdYPqQDiEgrXeA==",
+      "dev": true
+    },
    "node_modules/@types/estree": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
@ -1118,6 +1134,20 @@
      "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
      "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g=="
    },
+    "node_modules/@types/fbemitter": {
+      "version": "2.0.32",
+      "resolved": "https://registry.npmjs.org/@types/fbemitter/-/fbemitter-2.0.32.tgz",
+      "integrity": "sha512-Hwq28bBlbmfCgLnNJvjl5ssTrbZCTSblI4vqPpqZrbbEL8vn5l2UivxhlMYfUY7a4SR8UB6RKoLjOZfljqAa6g=="
+    },
+    "node_modules/@types/flux": {
+      "version": "3.1.11",
+      "resolved": "https://registry.npmjs.org/@types/flux/-/flux-3.1.11.tgz",
+      "integrity": "sha512-Aq4UB1ZqAKcPbhB0GpgMw2sntvOh71he9tjz53TLKrI7rw3Y3LxCW5pTYY9IV455hQapm4pmxFjpqlWOs308Yg==",
+      "dependencies": {
+        "@types/fbemitter": "*",
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/json-schema": {
      "version": "7.0.11",
      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@ -1170,11 +1200,6 @@
      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
    },
-    "node_modules/@types/sdp-transform": {
-      "version": "2.4.5",
-      "resolved": "https://registry.npmjs.org/@types/sdp-transform/-/sdp-transform-2.4.5.tgz",
-      "integrity": "sha512-GVO0gnmbyO3Oxm2HdPsYUNcyihZE3GyCY8ysMYHuQGfLhGZq89Nm4lSzULWTzZoyHtg+VO/IdrnxZHPnPSGnAg=="
-    },
    "node_modules/@types/semver": {
      "version": "7.3.13",
      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz",
@ -1793,6 +1818,7 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
      "dependencies": {
        "function-bind": "^1.1.1",
        "get-intrinsic": "^1.0.2"
@ -3025,7 +3051,8 @@
    "node_modules/function-bind": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
    },
    "node_modules/function.prototype.name": {
      "version": "1.1.5",
@ -3067,6 +3094,7 @@
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
      "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
+      "dev": true,
      "dependencies": {
        "function-bind": "^1.1.1",
        "has": "^1.0.3",
@ -3180,6 +3208,7 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
      "dependencies": {
        "function-bind": "^1.1.1"
      },
@ -3221,6 +3250,7 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true,
      "engines": {
        "node": ">= 0.4"
      },
@ -3252,32 +3282,32 @@
      }
    },
    "node_modules/html-dom-parser": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-3.1.7.tgz",
-      "integrity": "sha512-cDgNF4YgF6J3H+d9mcldGL19p0GzVdS3iGuDNzYWQpU47q3+IRM85X3Xo07E+nntF4ek4s78A9V24EwxlPTjig==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-3.1.2.tgz",
+      "integrity": "sha512-mLTtl3pVn3HnqZSZzW3xVs/mJAKrG1yIw3wlp+9bdoZHHLaBRvELdpfShiPVLyjPypq1Fugv2KMDoGHW4lVXnw==",
      "dependencies": {
        "domhandler": "5.0.3",
-        "htmlparser2": "8.0.2"
+        "htmlparser2": "8.0.1"
      }
    },
    "node_modules/html-react-parser": {
-      "version": "3.0.15",
-      "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-3.0.15.tgz",
-      "integrity": "sha512-iM2KUVhNoeIsezbpO6xwOHlFqWH+EYaCGwWWeX7R+jvrgc+mbnuouWaCU8GZRRbPKDD0eJXPZwLoeGVft84QXw==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-3.0.4.tgz",
+      "integrity": "sha512-va68PSmC7uA6PbOEc9yuw5Mu3OHPXmFKUpkLGvUPdTuNrZ0CJZk1s/8X/FaHjswK/6uZghu2U02tJjussT8+uw==",
      "dependencies": {
        "domhandler": "5.0.3",
-        "html-dom-parser": "3.1.7",
+        "html-dom-parser": "3.1.2",
        "react-property": "2.0.0",
-        "style-to-js": "1.1.3"
+        "style-to-js": "1.1.1"
      },
      "peerDependencies": {
        "react": "0.14 || 15 || 16 || 17 || 18"
      }
    },
    "node_modules/htmlparser2": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
-      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.1.tgz",
+      "integrity": "sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==",
      "funding": [
        "https://github.com/fb55/htmlparser2?sponsor=1",
        {
@ -3287,9 +3317,9 @@
      ],
      "dependencies": {
        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3",
+        "domhandler": "^5.0.2",
        "domutils": "^3.0.1",
-        "entities": "^4.4.0"
+        "entities": "^4.3.0"
      }
    },
    "node_modules/ieee754": {
@ -3862,12 +3892,12 @@
      "integrity": "sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA=="
    },
    "node_modules/matrix-js-sdk": {
-      "version": "22.0.0",
-      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-22.0.0.tgz",
-      "integrity": "sha512-mpKqeD3nCobjGiUiATUyEoP44n+AzDW5cSeBTIBY5fPhj0AkzLJhblHt40vzSOJazj8tT0PhsSzhEIR9hGzYGA==",
+      "version": "24.0.0",
+      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-24.0.0.tgz",
+      "integrity": "sha512-AOhO036ziDf6lwYoauj5DES/RJ6RDTq+vrK2yO/GW/8n+bAXhkjWc9AA/WcTK/9SkNHS46ZanmolkhS1n8WniQ==",
      "dependencies": {
        "@babel/runtime": "^7.12.5",
-        "@types/sdp-transform": "^2.4.5",
+        "@matrix-org/matrix-sdk-crypto-js": "^0.1.0-alpha.3",
        "another-json": "^0.2.0",
        "bs58": "^5.0.0",
        "content-type": "^1.0.4",
@ -3875,9 +3905,9 @@
        "matrix-events-sdk": "0.0.1",
        "matrix-widget-api": "^1.0.0",
        "p-retry": "4",
-        "qs": "^6.9.6",
        "sdp-transform": "^2.14.1",
-        "unhomoglyph": "^1.0.6"
+        "unhomoglyph": "^1.0.6",
+        "uuid": "9"
      },
      "engines": {
        "node": ">=16.0.0"
@ -4019,6 +4049,7 @@
      "version": "1.12.2",
      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+      "dev": true,
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
      }
@ -4329,20 +4360,6 @@
        "node": ">=6"
      }
    },
-    "node_modules/qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
-      "dependencies": {
-        "side-channel": "^1.0.4"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/queue-microtask": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@ -4770,6 +4787,7 @@
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.0",
        "get-intrinsic": "^1.0.2",
@ -4877,17 +4895,17 @@
      }
    },
    "node_modules/style-to-js": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.3.tgz",
-      "integrity": "sha512-zKI5gN/zb7LS/Vm0eUwjmjrXWw8IMtyA8aPBJZdYiQTXj4+wQ3IucOLIOnF7zCHxvW8UhIGh/uZh/t9zEHXNTQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.1.tgz",
+      "integrity": "sha512-RJ18Z9t2B02sYhZtfWKQq5uplVctgvjTfLWT7+Eb1zjUjIrWzX5SdlkwLGQozrqarTmEzJJ/YmdNJCUNI47elg==",
      "dependencies": {
-        "style-to-object": "0.4.1"
+        "style-to-object": "0.3.0"
      }
    },
    "node_modules/style-to-object": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.1.tgz",
-      "integrity": "sha512-HFpbb5gr2ypci7Qw+IOhnP2zOU7e77b+rzM+wTzXzfi1PrtBCX0E7Pk4wL4iTLnhzZ+JgEGAhX81ebTg/aYjQw==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
+      "integrity": "sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==",
      "dependencies": {
        "inline-style-parser": "0.1.1"
      }
@ -5139,6 +5157,14 @@
        "punycode": "^2.1.0"
      }
    },
+    "node_modules/uuid": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
    "node_modules/vite": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/vite/-/vite-4.0.1.tgz",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "cinny",
-  "version": "2.2.4",
+  "version": "2.2.6",
  "description": "Yet another matrix client",
  "main": "index.js",
  "engines": {
@ -9,7 +9,7 @@
  "scripts": {
    "start": "vite",
    "build": "vite build",
-    "lint": "yarn check:eslint && yarn check:prettier",
+    "lint": "npm run check:eslint && npm run check:prettier",
    "check:eslint": "eslint src/*",
    "check:prettier": "prettier --check .",
    "fix:prettier": "prettier --write .",
@ -24,6 +24,7 @@
    "@khanacademy/simple-markdown": "0.8.6",
    "@matrix-org/olm": "3.2.14",
    "@tippyjs/react": "4.2.6",
+    "@types/flux": "3.1.11",
    "blurhash": "2.0.4",
    "browser-encrypt-attachment": "0.3.0",
    "dateformat": "5.0.3",
@ -31,11 +32,11 @@
    "file-saver": "2.0.5",
    "flux": "4.0.3",
    "formik": "2.2.9",
-    "html-react-parser": "3.0.15",
+    "html-react-parser": "3.0.4",
    "katex": "0.16.4",
    "linkify-html": "4.0.2",
    "linkifyjs": "4.0.2",
-    "matrix-js-sdk": "22.0.0",
+    "matrix-js-sdk": "24.0.0",
    "prop-types": "15.8.1",
    "react": "17.0.2",
    "react-autosize-textarea": "7.1.0",
@ -53,6 +54,7 @@
    "@esbuild-plugins/node-globals-polyfill": "0.2.3",
    "@rollup/plugin-inject": "5.0.3",
    "@rollup/plugin-wasm": "6.1.1",
+    "@types/dateformat": "5.0.0",
    "@types/node": "18.11.18",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.9",
--- a/src/app/atoms/avatar/Avatar.jsx
+++ b/src/app/atoms/avatar/Avatar.jsx
@ -1,64 +1,69 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Avatar.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Avatar.scss";

-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";

-import Text from '../text/Text';
-import RawIcon from '../system-icons/RawIcon';
+import Text from "../text/Text";
+import RawIcon from "../system-icons/RawIcon";

-import ImageBrokenSVG from '../../../../public/res/svg/image-broken.svg';
-import { avatarInitials } from '../../../util/common';
+import ImageBrokenSVG from "../../../../public/res/svg/image-broken.svg";
+import { avatarInitials } from "../../../util/common";

-const Avatar = React.forwardRef(({
-  text, bgColor, iconSrc, iconColor, imageSrc, size,
-}, ref) => {
-  let textSize = 's1';
-  if (size === 'large') textSize = 'h1';
-  if (size === 'small') textSize = 'b1';
-  if (size === 'extra-small') textSize = 'b3';
+const Avatar = React.forwardRef(
+  ({ text, bgColor, iconSrc, iconColor, imageSrc, size }, ref) => {
+    let textSize = "s1";
+    if (size === "large") textSize = "h1";
+    if (size === "small") textSize = "b1";
+    if (size === "extra-small") textSize = "b3";

-  return (
-    <div ref={ref} className={`avatar-container avatar-container__${size} noselect`}>
-      {
-        imageSrc !== null
-          ? (
-            <img
-              draggable="false"
-              src={imageSrc}
-              onLoad={(e) => { e.target.style.backgroundColor = 'transparent'; }}
-              onError={(e) => { e.target.src = ImageBrokenSVG; }}
-              alt=""
-            />
-          )
-          : (
-            <span
-              style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
-              className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
-            >
-              {
-                iconSrc !== null
-                  ? <RawIcon size={size} src={iconSrc} color={iconColor} />
-                  : text !== null && (
-                    <Text variant={textSize} primary>
-                      {twemojify(avatarInitials(text))}
-                    </Text>
-                  )
-              }
-            </span>
-          )
-      }
-    </div>
-  );
-});
+    return (
+      <div
+        ref={ref}
+        className={`avatar-container avatar-container__${size} noselect`}
+      >
+        {imageSrc !== null ? (
+          <img
+            draggable="false"
+            src={imageSrc}
+            onLoad={(e) => {
+              e.target.style.backgroundColor = "transparent";
+            }}
+            onError={(e) => {
+              e.target.src = ImageBrokenSVG;
+            }}
+            alt=""
+          />
+        ) : (
+          <span
+            style={{
+              backgroundColor: iconSrc === null ? bgColor : "transparent",
+            }}
+            className={`avatar__border${iconSrc !== null ? "--active" : ""}`}
+          >
+            {iconSrc !== null ? (
+              <RawIcon size={size} src={iconSrc} color={iconColor} />
+            ) : (
+              text !== null && (
+                <Text variant={textSize} primary>
+                  {twemojify(avatarInitials(text))}
+                </Text>
+              )
+            )}
+          </span>
+        )}
+      </div>
+    );
+  }
+);

 Avatar.defaultProps = {
  text: null,
-  bgColor: 'transparent',
+  bgColor: "transparent",
  iconSrc: null,
  iconColor: null,
  imageSrc: null,
-  size: 'normal',
+  size: "normal",
 };

 Avatar.propTypes = {
@ -67,7 +72,7 @@ Avatar.propTypes = {
  iconSrc: PropTypes.string,
  iconColor: PropTypes.string,
  imageSrc: PropTypes.string,
-  size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']),
+  size: PropTypes.oneOf(["large", "normal", "small", "extra-small"]),
 };

 export default Avatar;
--- a/src/app/atoms/avatar/Avatar.scss
+++ b/src/app/atoms/avatar/Avatar.scss
@ -1,4 +1,4 @@
-@use '../../partials/flex';
+@use "../../partials/flex";

 .avatar-container {
  display: inline-flex;
--- a/src/app/atoms/avatar/render.js
+++ b/src/app/atoms/avatar/render.js
@ -1,15 +1,20 @@
-import { avatarInitials, cssVar } from '../../../util/common';
+import { avatarInitials, cssVar } from "../../../util/common";

 // renders the avatar and returns it as an URL
 export default async function renderAvatar({
-  text, bgColor, imageSrc, size, borderRadius, scale,
+  text,
+  bgColor,
+  imageSrc,
+  size,
+  borderRadius,
+  scale,
 }) {
  try {
-    const canvas = document.createElement('canvas');
+    const canvas = document.createElement("canvas");
    canvas.width = size * scale;
    canvas.height = size * scale;

-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");

    ctx.scale(scale, scale);

@ -27,7 +32,7 @@ export default async function renderAvatar({
      ctx.clip();

      const img = new Image();
-      img.crossOrigin = 'anonymous';
+      img.crossOrigin = "anonymous";
      const promise = new Promise((resolve, reject) => {
        img.onerror = reject;
        img.onload = resolve;
@ -42,10 +47,10 @@ export default async function renderAvatar({
      ctx.fill();

      // centered letter
-      ctx.fillStyle = '#fff';
-      ctx.font = `${cssVar('--fs-s1')} ${cssVar('--font-primary')}`;
-      ctx.textBaseline = 'middle';
-      ctx.textAlign = 'center';
+      ctx.fillStyle = "#fff";
+      ctx.font = `${cssVar("--fs-s1")} ${cssVar("--font-primary")}`;
+      ctx.textBaseline = "middle";
+      ctx.textAlign = "center";
      ctx.fillText(avatarInitials(text), size / 2, size / 2);
    }

--- a/src/app/atoms/badge/NotificationBadge.jsx
+++ b/src/app/atoms/badge/NotificationBadge.jsx
@ -1,14 +1,18 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './NotificationBadge.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./NotificationBadge.scss";

-import Text from '../text/Text';
+import Text from "../text/Text";

 function NotificationBadge({ alert, content }) {
-  const notificationClass = alert ? ' notification-badge--alert' : '';
+  const notificationClass = alert ? " notification-badge--alert" : "";
  return (
    <div className={`notification-badge${notificationClass}`}>
-      {content !== null && <Text variant="b3" weight="bold">{content}</Text>}
+      {content !== null && (
+        <Text variant="b3" weight="bold">
+          {content}
+        </Text>
+      )}
    </div>
  );
 }
@ -20,10 +24,7 @@ NotificationBadge.defaultProps = {

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

 export default NotificationBadge;
--- a/src/app/atoms/button/Button.jsx
+++ b/src/app/atoms/button/Button.jsx
@ -1,40 +1,44 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Button.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Button.scss";

-import Text from '../text/Text';
-import RawIcon from '../system-icons/RawIcon';
-import { blurOnBubbling } from './script';
+import Text from "../text/Text";
+import RawIcon from "../system-icons/RawIcon";
+import { blurOnBubbling } from "./script";

-const Button = React.forwardRef(({
-  id, className, variant, iconSrc,
-  type, onClick, children, disabled,
-}, ref) => {
-  const iconClass = (iconSrc === null) ? '' : `btn-${variant}--icon`;
-  return (
-    <button
-      ref={ref}
-      id={id === '' ? undefined : id}
-      className={`${className ? `${className} ` : ''}btn-${variant} ${iconClass} noselect`}
-      onMouseUp={(e) => blurOnBubbling(e, `.btn-${variant}`)}
-      onClick={onClick}
-      // eslint-disable-next-line react/button-has-type
-      type={type}
-      disabled={disabled}
-    >
-      {iconSrc !== null && <RawIcon size="small" src={iconSrc} />}
-      {typeof children === 'string' && <Text variant="b1">{ children }</Text>}
-      {typeof children !== 'string' && children }
-    </button>
-  );
-});
+const Button = React.forwardRef(
+  (
+    { id, className, variant, iconSrc, type, onClick, children, disabled },
+    ref
+  ) => {
+    const iconClass = iconSrc === null ? "" : `btn-${variant}--icon`;
+    return (
+      <button
+        ref={ref}
+        id={id === "" ? undefined : id}
+        className={`${
+          className ? `${className} ` : ""
+        }btn-${variant} ${iconClass} noselect`}
+        onMouseUp={(e) => blurOnBubbling(e, `.btn-${variant}`)}
+        onClick={onClick}
+        // eslint-disable-next-line react/button-has-type
+        type={type}
+        disabled={disabled}
+      >
+        {iconSrc !== null && <RawIcon size="small" src={iconSrc} />}
+        {typeof children === "string" && <Text variant="b1">{children}</Text>}
+        {typeof children !== "string" && children}
+      </button>
+    );
+  }
+);

 Button.defaultProps = {
-  id: '',
+  id: "",
  className: null,
-  variant: 'surface',
+  variant: "surface",
  iconSrc: null,
-  type: 'button',
+  type: "button",
  onClick: null,
  disabled: false,
 };
@ -42,9 +46,15 @@ Button.defaultProps = {
 Button.propTypes = {
  id: PropTypes.string,
  className: PropTypes.string,
-  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
+  variant: PropTypes.oneOf([
+    "surface",
+    "primary",
+    "positive",
+    "caution",
+    "danger",
+  ]),
  iconSrc: PropTypes.string,
-  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  type: PropTypes.oneOf(["button", "submit", "reset"]),
  onClick: PropTypes.func,
  children: PropTypes.node.isRequired,
  disabled: PropTypes.bool,
--- a/src/app/atoms/button/Button.scss
+++ b/src/app/atoms/button/Button.scss
@ -1,6 +1,6 @@
-@use 'state';
-@use '../../partials/dir';
-@use '../../partials/text';
+@use "state";
+@use "../../partials/dir";
+@use "../../partials/text";

 .btn-surface,
 .btn-primary,
@ -25,7 +25,6 @@

  &--icon {
    @include dir.side(padding, var(--sp-tight), var(--sp-loose));
-
  }
  .ic-raw {
    @include dir.side(margin, 0, var(--sp-extra-tight));
@ -42,7 +41,6 @@
  }
 }

-
 .btn-surface {
  box-shadow: var(--bs-surface-border);
  @include color(var(--tc-surface-high), var(--ic-surface-normal));
--- a/src/app/atoms/button/Checkbox.jsx
+++ b/src/app/atoms/button/Checkbox.jsx
@ -1,12 +1,11 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Checkbox.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Checkbox.scss";

-function Checkbox({
-  variant, isActive, onToggle,
-  disabled, tabIndex,
-}) {
-  const className = `checkbox checkbox-${variant}${isActive ? ' checkbox--active' : ''}`;
+function Checkbox({ variant, isActive, onToggle, disabled, tabIndex }) {
+  const className = `checkbox checkbox-${variant}${
+    isActive ? " checkbox--active" : ""
+  }`;
  if (onToggle === null) return <span className={className} />;
  return (
    // eslint-disable-next-line jsx-a11y/control-has-associated-label
@ -21,7 +20,7 @@ function Checkbox({
 }

 Checkbox.defaultProps = {
-  variant: 'primary',
+  variant: "primary",
  isActive: false,
  onToggle: null,
  disabled: false,
@ -29,7 +28,7 @@ Checkbox.defaultProps = {
 };

 Checkbox.propTypes = {
-  variant: PropTypes.oneOf(['primary', 'positive', 'caution', 'danger']),
+  variant: PropTypes.oneOf(["primary", "positive", "caution", "danger"]),
  isActive: PropTypes.bool,
  onToggle: PropTypes.func,
  disabled: PropTypes.bool,
--- a/src/app/atoms/button/Checkbox.scss
+++ b/src/app/atoms/button/Checkbox.scss
@ -1,5 +1,5 @@
-@use '../../partials/flex';
-@use './state';
+@use "../../partials/flex";
+@use "./state";

 .checkbox {
  width: 20px;
--- a/src/app/atoms/button/IconButton.jsx
+++ b/src/app/atoms/button/IconButton.jsx
@ -1,62 +1,80 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './IconButton.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./IconButton.scss";

-import RawIcon from '../system-icons/RawIcon';
-import Tooltip from '../tooltip/Tooltip';
-import { blurOnBubbling } from './script';
-import Text from '../text/Text';
+import RawIcon from "../system-icons/RawIcon";
+import Tooltip from "../tooltip/Tooltip";
+import { blurOnBubbling } from "./script";
+import Text from "../text/Text";

-const IconButton = React.forwardRef(({
-  variant, size, type,
-  tooltip, tooltipPlacement, src,
-  onClick, tabIndex, disabled, isImage,
-  className,
-}, ref) => {
-  const btn = (
-    <button
-      ref={ref}
-      className={`ic-btn ic-btn-${variant} ${className}`}
-      onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)}
-      onClick={onClick}
-      // eslint-disable-next-line react/button-has-type
-      type={type}
-      tabIndex={tabIndex}
-      disabled={disabled}
-    >
-      <RawIcon size={size} src={src} isImage={isImage} />
-    </button>
-  );
-  if (tooltip === null) return btn;
-  return (
-    <Tooltip
-      placement={tooltipPlacement}
-      content={<Text variant="b2">{tooltip}</Text>}
-    >
-      {btn}
-    </Tooltip>
-  );
-});
+const IconButton = React.forwardRef(
+  (
+    {
+      variant,
+      size,
+      type,
+      tooltip,
+      tooltipPlacement,
+      src,
+      onClick,
+      tabIndex,
+      disabled,
+      isImage,
+      className,
+    },
+    ref
+  ) => {
+    const btn = (
+      <button
+        ref={ref}
+        className={`ic-btn ic-btn-${variant} ${className}`}
+        onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)}
+        onClick={onClick}
+        // eslint-disable-next-line react/button-has-type
+        type={type}
+        tabIndex={tabIndex}
+        disabled={disabled}
+      >
+        <RawIcon size={size} src={src} isImage={isImage} />
+      </button>
+    );
+    if (tooltip === null) return btn;
+    return (
+      <Tooltip
+        placement={tooltipPlacement}
+        content={<Text variant="b2">{tooltip}</Text>}
+      >
+        {btn}
+      </Tooltip>
+    );
+  }
+);

 IconButton.defaultProps = {
-  variant: 'surface',
-  size: 'normal',
-  type: 'button',
+  variant: "surface",
+  size: "normal",
+  type: "button",
  tooltip: null,
-  tooltipPlacement: 'top',
+  tooltipPlacement: "top",
  onClick: null,
  tabIndex: 0,
  disabled: false,
  isImage: false,
-  className: '',
+  className: "",
 };

 IconButton.propTypes = {
-  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
-  size: PropTypes.oneOf(['normal', 'small', 'extra-small']),
-  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  variant: PropTypes.oneOf([
+    "surface",
+    "primary",
+    "positive",
+    "caution",
+    "danger",
+  ]),
+  size: PropTypes.oneOf(["normal", "small", "extra-small"]),
+  type: PropTypes.oneOf(["button", "submit", "reset"]),
  tooltip: PropTypes.string,
-  tooltipPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  tooltipPlacement: PropTypes.oneOf(["top", "right", "bottom", "left"]),
  src: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  tabIndex: PropTypes.number,
--- a/src/app/atoms/button/IconButton.scss
+++ b/src/app/atoms/button/IconButton.scss
@ -1,4 +1,4 @@
-@use 'state';
+@use "state";

 .ic-btn {
  padding: var(--sp-extra-tight);
--- a/src/app/atoms/button/RadioButton.jsx
+++ b/src/app/atoms/button/RadioButton.jsx
@ -1,14 +1,17 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './RadioButton.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./RadioButton.scss";

 function RadioButton({ isActive, onToggle, disabled }) {
-  if (onToggle === null) return <span className={`radio-btn${isActive ? ' radio-btn--active' : ''}`} />;
+  if (onToggle === null)
+    return (
+      <span className={`radio-btn${isActive ? " radio-btn--active" : ""}`} />
+    );
  return (
    // eslint-disable-next-line jsx-a11y/control-has-associated-label
    <button
      onClick={() => onToggle(!isActive)}
-      className={`radio-btn${isActive ? ' radio-btn--active' : ''}`}
+      className={`radio-btn${isActive ? " radio-btn--active" : ""}`}
      type="button"
      disabled={disabled}
    />
--- a/src/app/atoms/button/RadioButton.scss
+++ b/src/app/atoms/button/RadioButton.scss
@ -1,5 +1,5 @@
-@use '../../partials/flex';
-@use './state';
+@use "../../partials/flex";
+@use "./state";

 .radio-btn {
  @extend .cp-fx__row--c-c;
@ -12,7 +12,7 @@
  @include state.disabled;

  &::before {
-    content: '';
+    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
--- a/src/app/atoms/button/Toggle.jsx
+++ b/src/app/atoms/button/Toggle.jsx
@ -1,9 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Toggle.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Toggle.scss";

 function Toggle({ isActive, onToggle, disabled }) {
-  const className = `toggle${isActive ? ' toggle--active' : ''}`;
+  const className = `toggle${isActive ? " toggle--active" : ""}`;
  if (onToggle === null) return <span className={className} />;
  return (
    // eslint-disable-next-line jsx-a11y/control-has-associated-label
--- a/src/app/atoms/button/Toggle.scss
+++ b/src/app/atoms/button/Toggle.scss
@ -1,5 +1,5 @@
-@use '../../partials/dir';
-@use './state';
+@use "../../partials/dir";
+@use "./state";

 .toggle {
  width: 44px;
@ -16,14 +16,13 @@
  transition: background 200ms ease-in-out;

  &::before {
-    content: '';
+    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: var(--tc-surface-low);
    border-radius: calc(var(--bo-radius) / 2);
-    transition: transform 200ms ease-in-out,
-      opacity 200ms ease-in-out;
+    transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
    opacity: 0.6;
  }

--- a/src/app/atoms/button/_state.scss
+++ b/src/app/atoms/button/_state.scss
@ -1,4 +1,3 @@
-
@mixin hover($color) {
  @media (hover: hover) {
    &:hover {
--- a/src/app/atoms/button/script.js
+++ b/src/app/atoms/button/script.js
@ -10,7 +10,10 @@ function blurOnBubbling(e, selector) {

  for (let elIndex = 0; elIndex < bubblingPath.length; elIndex += 1) {
    if (bubblingPath[elIndex] === document) {
-      console.warn(blurOnBubbling, 'blurOnBubbling: not found selector in bubbling path');
+      console.warn(
+        blurOnBubbling,
+        "blurOnBubbling: not found selector in bubbling path"
+      );
      break;
    }
    if (bubblingPath[elIndex].matches(selector)) {
--- a/src/app/atoms/card/InfoCard.jsx
+++ b/src/app/atoms/card/InfoCard.jsx
@ -1,24 +1,28 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './InfoCard.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./InfoCard.scss";

-import Text from '../text/Text';
-import RawIcon from '../system-icons/RawIcon';
-import IconButton from '../button/IconButton';
+import Text from "../text/Text";
+import RawIcon from "../system-icons/RawIcon";
+import IconButton from "../button/IconButton";

-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";

 function InfoCard({
-  className, style,
-  variant, iconSrc,
-  title, content,
-  rounded, requestClose,
+  className,
+  style,
+  variant,
+  iconSrc,
+  title,
+  content,
+  rounded,
+  requestClose,
 }) {
  const classes = [`info-card info-card--${variant}`];
-  if (rounded) classes.push('info-card--rounded');
+  if (rounded) classes.push("info-card--rounded");
  if (className) classes.push(className);
  return (
-    <div className={classes.join(' ')} style={style}>
+    <div className={classes.join(" ")} style={style}>
      {iconSrc && (
        <div className="info-card__icon">
          <RawIcon color={`var(--ic-${variant}-high)`} src={iconSrc} />
@ -38,7 +42,7 @@ function InfoCard({
 InfoCard.defaultProps = {
  className: null,
  style: null,
-  variant: 'surface',
+  variant: "surface",
  iconSrc: null,
  content: null,
  rounded: false,
@ -48,7 +52,13 @@ InfoCard.defaultProps = {
 InfoCard.propTypes = {
  className: PropTypes.string,
  style: PropTypes.shape({}),
-  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
+  variant: PropTypes.oneOf([
+    "surface",
+    "primary",
+    "positive",
+    "caution",
+    "danger",
+  ]),
  iconSrc: PropTypes.string,
  title: PropTypes.string.isRequired,
  content: PropTypes.node,
--- a/src/app/atoms/card/InfoCard.scss
+++ b/src/app/atoms/card/InfoCard.scss
@ -1,5 +1,5 @@
-@use '.././../partials/flex';
-@use '.././../partials/dir';
+@use ".././../partials/flex";
+@use ".././../partials/dir";

 .info-card {
  display: flex;
@ -34,7 +34,6 @@
  &--surface {
    border-color: var(--bg-surface-border);
    background-color: var(--bg-surface-hover);
-
  }
  &--primary {
    border-color: var(--bg-primary);
--- a/src/app/atoms/chip/Chip.jsx
+++ b/src/app/atoms/chip/Chip.jsx
@ -1,18 +1,17 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Chip.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Chip.scss";

-import Text from '../text/Text';
-import RawIcon from '../system-icons/RawIcon';
+import Text from "../text/Text";
+import RawIcon from "../system-icons/RawIcon";

-function Chip({
-  iconSrc, iconColor, text, children,
-  onClick,
-}) {
+function Chip({ iconSrc, iconColor, text, children, onClick }) {
  return (
    <button className="chip" type="button" onClick={onClick}>
-      {iconSrc != null && <RawIcon src={iconSrc} color={iconColor} size="extra-small" />}
-      {(text != null && text !== '') && <Text variant="b3">{text}</Text>}
+      {iconSrc != null && (
+        <RawIcon src={iconSrc} color={iconColor} size="extra-small" />
+      )}
+      {text != null && text !== "" && <Text variant="b3">{text}</Text>}
      {children}
    </button>
  );
--- a/src/app/atoms/chip/Chip.scss
+++ b/src/app/atoms/chip/Chip.scss
@ -1,4 +1,4 @@
-@use '../../partials/dir';
+@use "../../partials/dir";

 .chip {
  padding: var(--sp-ultra-tight) var(--sp-extra-tight);
--- a/src/app/atoms/context-menu/ContextMenu.jsx
+++ b/src/app/atoms/context-menu/ContextMenu.jsx
@ -1,17 +1,15 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './ContextMenu.scss';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./ContextMenu.scss";

-import Tippy from '@tippyjs/react';
-import 'tippy.js/animations/scale-extreme.css';
+import Tippy from "@tippyjs/react";
+import "tippy.js/animations/scale-extreme.css";

-import Text from '../text/Text';
-import Button from '../button/Button';
-import ScrollView from '../scroll/ScrollView';
+import Text from "../text/Text";
+import Button from "../button/Button";
+import ScrollView from "../scroll/ScrollView";

-function ContextMenu({
-  content, placement, maxWidth, render, afterToggle,
-}) {
+function ContextMenu({ content, placement, maxWidth, render, afterToggle }) {
  const [isVisible, setVisibility] = useState(false);
  const showMenu = () => setVisibility(true);
  const hideMenu = () => setVisibility(false);
@ -26,7 +24,11 @@ function ContextMenu({
      className="context-menu"
      visible={isVisible}
      onClickOutside={hideMenu}
-      content={<ScrollView invisible>{typeof content === 'function' ? content(hideMenu) : content}</ScrollView>}
+      content={
+        <ScrollView invisible>
+          {typeof content === "function" ? content(hideMenu) : content}
+        </ScrollView>
+      }
      placement={placement}
      interactive
      arrow={false}
@ -39,21 +41,15 @@ function ContextMenu({
 }

 ContextMenu.defaultProps = {
-  maxWidth: 'unset',
-  placement: 'right',
+  maxWidth: "unset",
+  placement: "right",
  afterToggle: null,
 };

 ContextMenu.propTypes = {
-  content: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.func,
-  ]).isRequired,
-  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  maxWidth: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
+  content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  placement: PropTypes.oneOf(["top", "right", "bottom", "left"]),
+  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  render: PropTypes.func.isRequired,
  afterToggle: PropTypes.func,
 };
@ -61,7 +57,7 @@ ContextMenu.propTypes = {
 function MenuHeader({ children }) {
  return (
    <div className="context-menu__header">
-      <Text variant="b3">{ children }</Text>
+      <Text variant="b3">{children}</Text>
    </div>
  );
 }
@ -70,10 +66,7 @@ MenuHeader.propTypes = {
  children: PropTypes.node.isRequired,
 };

-function MenuItem({
-  variant, iconSrc, type,
-  onClick, children, disabled,
-}) {
+function MenuItem({ variant, iconSrc, type, onClick, children, disabled }) {
  return (
    <div className="context-menu__item">
      <Button
@ -83,33 +76,33 @@ function MenuItem({
        onClick={onClick}
        disabled={disabled}
      >
-        { children }
+        {children}
      </Button>
    </div>
  );
 }

 MenuItem.defaultProps = {
-  variant: 'surface',
+  variant: "surface",
  iconSrc: null,
-  type: 'button',
+  type: "button",
  disabled: false,
  onClick: null,
 };

 MenuItem.propTypes = {
-  variant: PropTypes.oneOf(['surface', 'positive', 'caution', 'danger']),
+  variant: PropTypes.oneOf(["surface", "positive", "caution", "danger"]),
  iconSrc: PropTypes.string,
-  type: PropTypes.oneOf(['button', 'submit']),
+  type: PropTypes.oneOf(["button", "submit"]),
  onClick: PropTypes.func,
  children: PropTypes.node.isRequired,
  disabled: PropTypes.bool,
 };

 function MenuBorder() {
-  return <div style={{ borderBottom: '1px solid var(--bg-surface-border)' }}> </div>;
+  return (
+    <div style={{ borderBottom: "1px solid var(--bg-surface-border)" }}> </div>
+  );
 }

-export {
-  ContextMenu as default, MenuHeader, MenuItem, MenuBorder,
-};
+export { ContextMenu as default, MenuHeader, MenuItem, MenuBorder };
--- a/src/app/atoms/context-menu/ContextMenu.scss
+++ b/src/app/atoms/context-menu/ContextMenu.scss
@ -1,6 +1,6 @@
-@use '../../partials/flex';
-@use '../../partials/text';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/text";
+@use "../../partials/dir";

 .context-menu {
  background-color: var(--bg-surface);
@ -59,11 +59,7 @@

    // if item doesn't have icon
    .text:first-child {
-      @include dir.side(
-        margin,
-        calc(var(--ic-small) + var(--sp-tight)),
-        0
-      );
+      @include dir.side(margin, calc(var(--ic-small) + var(--sp-tight)), 0);
    }
  }
  .btn-surface:focus {
--- a/src/app/atoms/context-menu/ReusableContextMenu.jsx
+++ b/src/app/atoms/context-menu/ReusableContextMenu.jsx
@ -1,9 +1,9 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from "react";

-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
+import cons from "../../../client/state/cons";
+import navigation from "../../../client/state/navigation";

-import ContextMenu from './ContextMenu';
+import ContextMenu from "./ContextMenu";

 let key = null;
 function ReusableContextMenu() {
@ -29,14 +29,20 @@ function ReusableContextMenu() {
        return;
      }
      setData({
-        placement, cords, render, afterClose,
+        placement,
+        cords,
+        render,
+        afterClose,
      });
    };
-    navigation.on(cons.events.navigation.REUSABLE_CONTEXT_MENU_OPENED, handleContextMenuOpen);
+    navigation.on(
+      cons.events.navigation.REUSABLE_CONTEXT_MENU_OPENED,
+      handleContextMenuOpen
+    );
    return () => {
      navigation.removeListener(
        cons.events.navigation.REUSABLE_CONTEXT_MENU_OPENED,
-        handleContextMenuOpen,
+        handleContextMenuOpen
      );
    };
  }, [data]);
@ -59,24 +65,24 @@ function ReusableContextMenu() {
  return (
    <ContextMenu
      afterToggle={handleAfterToggle}
-      placement={data?.placement || 'right'}
-      content={data?.render(closeMenu) ?? ''}
+      placement={data?.placement || "right"}
+      content={data?.render(closeMenu) ?? ""}
      render={(toggleMenu) => (
        <input
          ref={openerRef}
          onClick={toggleMenu}
          type="button"
          style={{
-            width: '32px',
-            height: '32px',
-            backgroundColor: 'transparent',
-            position: 'fixed',
+            width: "32px",
+            height: "32px",
+            backgroundColor: "transparent",
+            position: "fixed",
            top: 0,
            left: 0,
            padding: 0,
-            border: 'none',
-            visibility: 'hidden',
-            appearance: 'none',
+            border: "none",
+            visibility: "hidden",
+            appearance: "none",
          }}
        />
      )}
--- a/src/app/atoms/divider/Divider.jsx
+++ b/src/app/atoms/divider/Divider.jsx
@ -1,28 +1,38 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Divider.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Divider.scss";

-import Text from '../text/Text';
+import Text from "../text/Text";

 function Divider({ text, variant, align }) {
  const dividerClass = ` divider--${variant} divider--${align}`;
  return (
    <div className={`divider${dividerClass}`}>
-      {text !== null && <Text className="divider__text" variant="b3" weight="bold">{text}</Text>}
+      {text !== null && (
+        <Text className="divider__text" variant="b3" weight="bold">
+          {text}
+        </Text>
+      )}
    </div>
  );
 }

 Divider.defaultProps = {
  text: null,
-  variant: 'surface',
-  align: 'center',
+  variant: "surface",
+  align: "center",
 };

 Divider.propTypes = {
  text: PropTypes.string,
-  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
-  align: PropTypes.oneOf(['left', 'center', 'right']),
+  variant: PropTypes.oneOf([
+    "surface",
+    "primary",
+    "positive",
+    "caution",
+    "danger",
+  ]),
+  align: PropTypes.oneOf(["left", "center", "right"]),
 };

 export default Divider;
--- a/src/app/atoms/divider/Divider.scss
+++ b/src/app/atoms/divider/Divider.scss
@ -1,5 +1,5 @@
 .divider-line {
-  content: '';
+  content: "";
  display: inline-block;
  flex: 1;
  border-bottom: 1px solid var(--local-divider-color);
@ -36,7 +36,7 @@
 }
 .divider--primary {
  --local-divider-color: var(--bg-primary);
-  --local-divider-opacity: .8;
+  --local-divider-opacity: 0.8;
  .divider__text {
    color: var(--tc-primary-high);
    background-color: var(--bg-primary);
@ -44,7 +44,7 @@
 }
 .divider--positive {
  --local-divider-color: var(--bg-positive);
-  --local-divider-opacity: .8;
+  --local-divider-opacity: 0.8;
  .divider__text {
    color: var(--bg-surface);
    background-color: var(--bg-positive);
@ -52,7 +52,7 @@
 }
 .divider--danger {
  --local-divider-color: var(--bg-danger);
-  --local-divider-opacity: .8;
+  --local-divider-opacity: 0.8;
  .divider__text {
    color: var(--bg-surface);
    background-color: var(--bg-danger);
@ -60,7 +60,7 @@
 }
 .divider--caution {
  --local-divider-color: var(--bg-caution);
-  --local-divider-opacity: .8;
+  --local-divider-opacity: 0.8;
  .divider__text {
    color: var(--bg-surface);
    background-color: var(--bg-caution);
--- a/src/app/atoms/header/Header.jsx
+++ b/src/app/atoms/header/Header.jsx
@ -1,13 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Header.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Header.scss";

 function Header({ children }) {
-  return (
-    <div className="header">
-      {children}
-    </div>
-  );
+  return <div className="header">{children}</div>;
 }

 Header.propTypes = {
@ -15,11 +11,7 @@ Header.propTypes = {
 };

 function TitleWrapper({ children }) {
-  return (
-    <div className="header__title-wrapper">
-      {children}
-    </div>
-  );
+  return <div className="header__title-wrapper">{children}</div>;
 }

 TitleWrapper.propTypes = {
--- a/src/app/atoms/header/Header.scss
+++ b/src/app/atoms/header/Header.scss
@ -1,5 +1,5 @@
-@use '../../partials/text';
-@use '../../partials/dir';
+@use "../../partials/text";
+@use "../../partials/dir";

 .header {
  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
@ -24,7 +24,7 @@
      @extend .cp-txt__ellipsis;
      min-width: 0;
    }
-    & > .text-b3{
+    & > .text-b3 {
      flex: 1;
      min-width: 0;

--- a/src/app/atoms/input/Input.jsx
+++ b/src/app/atoms/input/Input.jsx
@ -1,75 +1,92 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Input.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Input.scss";

-import TextareaAutosize from 'react-autosize-textarea';
+import TextareaAutosize from "react-autosize-textarea";

 function Input({
-  id, label, name, value, placeholder,
-  required, type, onChange, forwardRef,
-  resizable, minHeight, onResize, state,
-  onKeyDown, disabled, autoFocus,
+  id,
+  label,
+  name,
+  value,
+  placeholder,
+  required,
+  type,
+  onChange,
+  forwardRef,
+  resizable,
+  minHeight,
+  onResize,
+  state,
+  onKeyDown,
+  disabled,
+  autoFocus,
 }) {
  return (
    <div className="input-container">
-      { label !== '' && <label className="input__label text-b2" htmlFor={id}>{label}</label> }
-      { resizable
-        ? (
-          <TextareaAutosize
-            dir="auto"
-            style={{ minHeight: `${minHeight}px` }}
-            name={name}
-            id={id}
-            className={`input input--resizable${state !== 'normal' ? ` input--${state}` : ''}`}
-            ref={forwardRef}
-            type={type}
-            placeholder={placeholder}
-            required={required}
-            defaultValue={value}
-            autoComplete="off"
-            onChange={onChange}
-            onResize={onResize}
-            onKeyDown={onKeyDown}
-            disabled={disabled}
-            autoFocus={autoFocus}
-          />
-        ) : (
-          <input
-            dir="auto"
-            ref={forwardRef}
-            id={id}
-            name={name}
-            className={`input ${state !== 'normal' ? ` input--${state}` : ''}`}
-            type={type}
-            placeholder={placeholder}
-            required={required}
-            defaultValue={value}
-            autoComplete="off"
-            onChange={onChange}
-            onKeyDown={onKeyDown}
-            disabled={disabled}
-            // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus={autoFocus}
-          />
-        )}
+      {label !== "" && (
+        <label className="input__label text-b2" htmlFor={id}>
+          {label}
+        </label>
+      )}
+      {resizable ? (
+        <TextareaAutosize
+          dir="auto"
+          style={{ minHeight: `${minHeight}px` }}
+          name={name}
+          id={id}
+          className={`input input--resizable${
+            state !== "normal" ? ` input--${state}` : ""
+          }`}
+          ref={forwardRef}
+          type={type}
+          placeholder={placeholder}
+          required={required}
+          defaultValue={value}
+          autoComplete="off"
+          onChange={onChange}
+          onResize={onResize}
+          onKeyDown={onKeyDown}
+          disabled={disabled}
+          autoFocus={autoFocus}
+        />
+      ) : (
+        <input
+          dir="auto"
+          ref={forwardRef}
+          id={id}
+          name={name}
+          className={`input ${state !== "normal" ? ` input--${state}` : ""}`}
+          type={type}
+          placeholder={placeholder}
+          required={required}
+          defaultValue={value}
+          autoComplete="off"
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+          disabled={disabled}
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus={autoFocus}
+        />
+      )}
    </div>
  );
 }

 Input.defaultProps = {
  id: null,
-  name: '',
-  label: '',
-  value: '',
-  placeholder: '',
-  type: 'text',
+  name: "",
+  label: "",
+  value: "",
+  placeholder: "",
+  type: "text",
  required: false,
  onChange: null,
  forwardRef: null,
  resizable: false,
  minHeight: 46,
  onResize: null,
-  state: 'normal',
+  state: "normal",
  onKeyDown: null,
  disabled: false,
  autoFocus: false,
@ -88,7 +105,7 @@ Input.propTypes = {
  resizable: PropTypes.bool,
  minHeight: PropTypes.number,
  onResize: PropTypes.func,
-  state: PropTypes.oneOf(['normal', 'success', 'error']),
+  state: PropTypes.oneOf(["normal", "success", "error"]),
  onKeyDown: PropTypes.func,
  disabled: PropTypes.bool,
  autoFocus: PropTypes.bool,
--- a/src/app/atoms/input/Input.scss
+++ b/src/app/atoms/input/Input.scss
@ -1,4 +1,4 @@
-@use '../../atoms/scroll/scrollbar';
+@use "../../atoms/scroll/scrollbar";

 .input {
  display: block;
@ -47,6 +47,6 @@
    box-shadow: var(--bs-primary-border);
  }
  &::placeholder {
-    color: var(--tc-surface-low)
+    color: var(--tc-surface-low);
  }
 }
--- a/src/app/atoms/math/Math.jsx
+++ b/src/app/atoms/math/Math.jsx
@ -1,23 +1,27 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './Math.scss';
+import React, { useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import "./Math.scss";

-import katex from 'katex';
-import 'katex/dist/katex.min.css';
+import katex from "katex";
+import "katex/dist/katex.min.css";

-import 'katex/dist/contrib/copy-tex';
+import "katex/dist/contrib/copy-tex";

-const Math = React.memo(({
-  content, throwOnError, errorColor, displayMode,
-}) => {
-  const ref = useRef(null);
+const Math = React.memo(
+  ({ content, throwOnError, errorColor, displayMode }) => {
+    const ref = useRef(null);

-  useEffect(() => {
-    katex.render(content, ref.current, { throwOnError, errorColor, displayMode });
-  }, [content, throwOnError, errorColor, displayMode]);
+    useEffect(() => {
+      katex.render(content, ref.current, {
+        throwOnError,
+        errorColor,
+        displayMode,
+      });
+    }, [content, throwOnError, errorColor, displayMode]);

-  return <span ref={ref} />;
-});
+    return <span ref={ref} />;
+  }
+);
 Math.defaultProps = {
  throwOnError: null,
  errorColor: null,
--- a/src/app/atoms/modal/RawModal.jsx
+++ b/src/app/atoms/modal/RawModal.jsx
@ -1,36 +1,43 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './RawModal.scss';
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import "./RawModal.scss";

-import Modal from 'react-modal';
+import Modal from "react-modal";

-import navigation from '../../../client/state/navigation';
+import navigation from "../../../client/state/navigation";

-Modal.setAppElement('#root');
+Modal.setAppElement("#root");

 function RawModal({
-  className, overlayClassName,
-  isOpen, size, onAfterOpen, onAfterClose,
-  onRequestClose, closeFromOutside, children,
+  className,
+  overlayClassName,
+  isOpen,
+  size,
+  onAfterOpen,
+  onAfterClose,
+  onRequestClose,
+  closeFromOutside,
+  children,
 }) {
-  let modalClass = (className !== null) ? `${className} ` : '';
+  let modalClass = className !== null ? `${className} ` : "";
  switch (size) {
-    case 'large':
-      modalClass += 'raw-modal__large ';
+    case "large":
+      modalClass += "raw-modal__large ";
      break;
-    case 'medium':
-      modalClass += 'raw-modal__medium ';
+    case "medium":
+      modalClass += "raw-modal__medium ";
      break;
-    case 'small':
+    case "small":
    default:
-      modalClass += 'raw-modal__small ';
+      modalClass += "raw-modal__small ";
  }

  useEffect(() => {
    navigation.setIsRawModalVisible(isOpen);
  }, [isOpen]);

-  const modalOverlayClass = (overlayClassName !== null) ? `${overlayClassName} ` : '';
+  const modalOverlayClass =
+    overlayClassName !== null ? `${overlayClassName} ` : "";
  return (
    <Modal
      className={`${modalClass}raw-modal`}
@ -51,7 +58,7 @@ function RawModal({
 RawModal.defaultProps = {
  className: null,
  overlayClassName: null,
-  size: 'small',
+  size: "small",
  onAfterOpen: null,
  onAfterClose: null,
  onRequestClose: null,
@ -62,7 +69,7 @@ RawModal.propTypes = {
  className: PropTypes.string,
  overlayClassName: PropTypes.string,
  isOpen: PropTypes.bool.isRequired,
-  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  size: PropTypes.oneOf(["large", "medium", "small"]),
  onAfterOpen: PropTypes.func,
  onAfterClose: PropTypes.func,
  onRequestClose: PropTypes.func,
--- a/src/app/atoms/modal/RawModal.scss
+++ b/src/app/atoms/modal/RawModal.scss
@ -49,7 +49,7 @@
@keyframes raw-modal--content {
  0% {
    transform: translateY(100px);
-    opacity: .5;
+    opacity: 0.5;
  }
  100% {
    transform: translateY(0);
--- a/src/app/atoms/scroll/ScrollView.jsx
+++ b/src/app/atoms/scroll/ScrollView.jsx
@ -1,21 +1,25 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './ScrollView.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./ScrollView.scss";

-const ScrollView = React.forwardRef(({
-  horizontal, vertical, autoHide, invisible, onScroll, children,
-}, ref) => {
-  let scrollbarClasses = '';
-  if (horizontal) scrollbarClasses += ' scrollbar__h';
-  if (vertical) scrollbarClasses += ' scrollbar__v';
-  if (autoHide) scrollbarClasses += ' scrollbar--auto-hide';
-  if (invisible) scrollbarClasses += ' scrollbar--invisible';
-  return (
-    <div onScroll={onScroll} ref={ref} className={`scrollbar${scrollbarClasses}`}>
-      {children}
-    </div>
-  );
-});
+const ScrollView = React.forwardRef(
+  ({ horizontal, vertical, autoHide, invisible, onScroll, children }, ref) => {
+    let scrollbarClasses = "";
+    if (horizontal) scrollbarClasses += " scrollbar__h";
+    if (vertical) scrollbarClasses += " scrollbar__v";
+    if (autoHide) scrollbarClasses += " scrollbar--auto-hide";
+    if (invisible) scrollbarClasses += " scrollbar--invisible";
+    return (
+      <div
+        onScroll={onScroll}
+        ref={ref}
+        className={`scrollbar${scrollbarClasses}`}
+      >
+        {children}
+      </div>
+    );
+  }
+);

 ScrollView.defaultProps = {
  horizontal: false,
--- a/src/app/atoms/scroll/ScrollView.scss
+++ b/src/app/atoms/scroll/ScrollView.scss
@ -1,8 +1,8 @@
-@use '../../partials/dir';
-@use '_scrollbar';
+@use "../../partials/dir";
+@use "_scrollbar";

@mixin paddingForSafari($padding) {
-	@media not all and (min-resolution:.001dpcm) {
+  @media not all and (min-resolution: 0.001dpcm) {
    @include dir.side(padding, 0, $padding);
  }
 }
--- a/src/app/atoms/segmented-controls/SegmentedControls.jsx
+++ b/src/app/atoms/segmented-controls/SegmentedControls.jsx
@ -1,15 +1,13 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './SegmentedControls.scss';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./SegmentedControls.scss";

-import { blurOnBubbling } from '../button/script';
+import { blurOnBubbling } from "../button/script";

-import Text from '../text/Text';
-import RawIcon from '../system-icons/RawIcon';
+import Text from "../text/Text";
+import RawIcon from "../system-icons/RawIcon";

-function SegmentedControls({
-  selected, segments, onSelect,
-}) {
+function SegmentedControls({ selected, segments, onSelect }) {
  const [select, setSelect] = useState(selected);

  function selectSegment(segmentIndex) {
@ -23,32 +21,34 @@ function SegmentedControls({

  return (
    <div className="segmented-controls">
-      {
-        segments.map((segment, index) => (
-          <button
-            key={Math.random().toString(20).substr(2, 6)}
-            className={`segment-btn${select === index ? ' segment-btn--active' : ''}`}
-            type="button"
-            onClick={() => selectSegment(index)}
-            onMouseUp={(e) => blurOnBubbling(e, '.segment-btn')}
-          >
-            <div className="segment-btn__base">
-              {segment.iconSrc && <RawIcon size="small" src={segment.iconSrc} />}
-              {segment.text && <Text variant="b2">{segment.text}</Text>}
-            </div>
-          </button>
-        ))
-      }
+      {segments.map((segment, index) => (
+        <button
+          key={Math.random().toString(20).substr(2, 6)}
+          className={`segment-btn${
+            select === index ? " segment-btn--active" : ""
+          }`}
+          type="button"
+          onClick={() => selectSegment(index)}
+          onMouseUp={(e) => blurOnBubbling(e, ".segment-btn")}
+        >
+          <div className="segment-btn__base">
+            {segment.iconSrc && <RawIcon size="small" src={segment.iconSrc} />}
+            {segment.text && <Text variant="b2">{segment.text}</Text>}
+          </div>
+        </button>
+      ))}
    </div>
  );
 }

 SegmentedControls.propTypes = {
  selected: PropTypes.number.isRequired,
-  segments: PropTypes.arrayOf(PropTypes.shape({
-    iconSrc: PropTypes.string,
-    text: PropTypes.string,
-  })).isRequired,
+  segments: PropTypes.arrayOf(
+    PropTypes.shape({
+      iconSrc: PropTypes.string,
+      text: PropTypes.string,
+    })
+  ).isRequired,
  onSelect: PropTypes.func.isRequired,
 };

--- a/src/app/atoms/segmented-controls/SegmentedControls.scss
+++ b/src/app/atoms/segmented-controls/SegmentedControls.scss
@ -1,5 +1,5 @@
-@use '../button/state';
-@use '../../partials/dir';
+@use "../button/state";
+@use "../../partials/dir";

 .segmented-controls {
  background-color: var(--bg-surface-low);
@ -40,18 +40,22 @@
    & + .segment-btn .segment-btn__base {
      border: none;
    }
-    &:first-child{
+    &:first-child {
      border-left: none;
    }
    &:last-child {
      border-right: none;
    }
-    [dir=rtl] & {
+    [dir="rtl"] & {
      border-left: 1px solid var(--bg-surface-border);
      border-right: 1px solid var(--bg-surface-border);

-      &:first-child { border-right: none;}
-      &:last-child { border-left: none;}
+      &:first-child {
+        border-right: none;
+      }
+      &:last-child {
+        border-left: none;
+      }
    }
  }
 }
--- a/src/app/atoms/spinner/Spinner.jsx
+++ b/src/app/atoms/spinner/Spinner.jsx
@ -1,19 +1,17 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Spinner.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Spinner.scss";

 function Spinner({ size }) {
-  return (
-    <div className={`donut-spinner donut-spinner--${size}`}> </div>
-  );
+  return <div className={`donut-spinner donut-spinner--${size}`}> </div>;
 }

 Spinner.defaultProps = {
-  size: 'normal',
+  size: "normal",
 };

 Spinner.propTypes = {
-  size: PropTypes.oneOf(['normal', 'small']),
+  size: PropTypes.oneOf(["normal", "small"]),
 };

 export default Spinner;
--- a/src/app/atoms/system-icons/RawIcon.jsx
+++ b/src/app/atoms/system-icons/RawIcon.jsx
@ -1,12 +1,12 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './RawIcon.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./RawIcon.scss";

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

 RawIcon.defaultProps = {
  color: null,
-  size: 'normal',
+  size: "normal",
  isImage: false,
 };

 RawIcon.propTypes = {
  color: PropTypes.string,
-  size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']),
+  size: PropTypes.oneOf(["large", "normal", "small", "extra-small"]),
  src: PropTypes.string.isRequired,
  isImage: PropTypes.bool,
 };
--- a/src/app/atoms/tabs/Tabs.jsx
+++ b/src/app/atoms/tabs/Tabs.jsx
@ -1,15 +1,12 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import './Tabs.scss';
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import "./Tabs.scss";

-import Button from '../button/Button';
-import ScrollView from '../scroll/ScrollView';
+import Button from "../button/Button";
+import ScrollView from "../scroll/ScrollView";

-function TabItem({
-  selected, iconSrc,
-  onClick, children, disabled,
-}) {
-  const isSelected = selected ? 'tab-item--selected' : '';
+function TabItem({ selected, iconSrc, onClick, children, disabled }) {
+  const isSelected = selected ? "tab-item--selected" : "";

  return (
    <Button
@ -78,7 +75,7 @@ Tabs.propTypes = {
      iconSrc: PropTypes.string,
      text: PropTypes.string,
      disabled: PropTypes.bool,
-    }),
+    })
  ).isRequired,
  defaultSelected: PropTypes.number,
  onSelect: PropTypes.func.isRequired,
--- a/src/app/atoms/tabs/Tabs.scss
+++ b/src/app/atoms/tabs/Tabs.scss
@ -1,4 +1,4 @@
-@use '../../partials/dir';
+@use "../../partials/dir";

 .tabs {
  height: var(--header-height);
@ -18,7 +18,7 @@
  border-radius: 0;
  height: 100%;
  box-shadow: none;
-  border-radius: var(--bo-radius) var(--bo-radius)   0 0;
+  border-radius: var(--bo-radius) var(--bo-radius) 0 0;

  &:focus,
  &:active {
--- a/src/app/atoms/text/Text.jsx
+++ b/src/app/atoms/text/Text.jsx
@ -1,30 +1,51 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Text.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Text.scss";

-function Text({
-  className, style, variant, weight,
-  primary, span, children,
-}) {
+function Text({ className, style, variant, weight, primary, span, children }) {
  const classes = [];
  if (className) classes.push(className);

  classes.push(`text text-${variant} text-${weight}`);
-  if (primary) classes.push('font-primary');
+  if (primary) classes.push("font-primary");

-  const textClass = classes.join(' ');
-  if (span) return <span className={textClass} style={style}>{ children }</span>;
-  if (variant === 'h1') return <h1 className={textClass} style={style}>{ children }</h1>;
-  if (variant === 'h2') return <h2 className={textClass} style={style}>{ children }</h2>;
-  if (variant === 's1') return <h4 className={textClass} style={style}>{ children }</h4>;
-  return <p className={textClass} style={style}>{ children }</p>;
+  const textClass = classes.join(" ");
+  if (span)
+    return (
+      <span className={textClass} style={style}>
+        {children}
+      </span>
+    );
+  if (variant === "h1")
+    return (
+      <h1 className={textClass} style={style}>
+        {children}
+      </h1>
+    );
+  if (variant === "h2")
+    return (
+      <h2 className={textClass} style={style}>
+        {children}
+      </h2>
+    );
+  if (variant === "s1")
+    return (
+      <h4 className={textClass} style={style}>
+        {children}
+      </h4>
+    );
+  return (
+    <p className={textClass} style={style}>
+      {children}
+    </p>
+  );
 }

 Text.defaultProps = {
  className: null,
  style: null,
-  variant: 'b1',
-  weight: 'normal',
+  variant: "b1",
+  weight: "normal",
  primary: false,
  span: false,
 };
@ -32,8 +53,8 @@ Text.defaultProps = {
 Text.propTypes = {
  className: PropTypes.string,
  style: PropTypes.shape({}),
-  variant: PropTypes.oneOf(['h1', 'h2', 's1', 'b1', 'b2', 'b3']),
-  weight: PropTypes.oneOf(['light', 'normal', 'medium', 'bold']),
+  variant: PropTypes.oneOf(["h1", "h2", "s1", "b1", "b2", "b3"]),
+  weight: PropTypes.oneOf(["light", "normal", "medium", "bold"]),
  primary: PropTypes.bool,
  span: PropTypes.bool,
  children: PropTypes.node.isRequired,
--- a/src/app/atoms/text/Text.scss
+++ b/src/app/atoms/text/Text.scss
@ -5,7 +5,7 @@

  & img.emoji,
  & img[data-mx-emoticon] {
-    height: calc(var(--lh-#{$type}) - .25rem);
+    height: calc(var(--lh-#{$type}) - 0.25rem);
  }
 }

@ -20,7 +20,7 @@
    margin-right: 2px !important;
    padding: 0 !important;
    position: relative;
-    top: -.1rem;
+    top: -0.1rem;
    vertical-align: middle;
  }
 }
--- a/src/app/atoms/time/Time.jsx
+++ b/src/app/atoms/time/Time.jsx
@ -1,44 +0,0 @@
-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;
--- a/src/app/atoms/time/Time.tsx
+++ b/src/app/atoms/time/Time.tsx
@ -0,0 +1,46 @@
+import React from "react";
+
+import dateFormat from "dateformat";
+import { isInSameDay } from "../../../util/common";
+
+export interface TimeProps {
+  timestamp: number;
+  fullTime?: boolean;
+}
+
+function Time({ timestamp, fullTime }: TimeProps) {
+  const date = new Date(timestamp);
+
+  const formattedFullTime = dateFormat(date, "dd mmmm yyyy, hh:MM TT");
+  let formattedDateTime = formattedFullTime;
+
+  if (!fullTime) {
+    const compareDate = new Date();
+    const isToday = isInSameDay(date, compareDate);
+    compareDate.setDate(compareDate.getDate() - 1);
+    const isYesterday = isInSameDay(date, compareDate);
+
+    const dtf = new Intl.DateTimeFormat();
+    const formattedDate = dtf.format(date);
+
+    formattedDateTime = dateFormat(
+      date,
+      isToday || isYesterday ? "hh:MM TT" : formattedDate
+    );
+    if (isYesterday) {
+      formattedDateTime = `Yesterday, ${formattedDateTime}`;
+    }
+  }
+
+  return (
+    <time dateTime={date.toISOString()} title={formattedFullTime}>
+      {formattedDateTime}
+    </time>
+  );
+}
+
+Time.defaultProps = {
+  fullTime: false,
+};
+
+export default Time;
--- a/src/app/atoms/tooltip/Tooltip.jsx
+++ b/src/app/atoms/tooltip/Tooltip.jsx
@ -1,11 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Tooltip.scss';
-import Tippy from '@tippyjs/react';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Tooltip.scss";
+import Tippy from "@tippyjs/react";

-function Tooltip({
-  className, placement, content, delay, children,
-}) {
+function Tooltip({ className, placement, content, delay, children }) {
  return (
    <Tippy
      content={content}
@ -23,8 +21,8 @@ function Tooltip({
 }

 Tooltip.defaultProps = {
-  placement: 'top',
-  className: '',
+  placement: "top",
+  className: "",
  delay: [200, 0],
 };

--- a/src/app/hooks/useAccountData.js
+++ b/src/app/hooks/useAccountData.js
@ -1,7 +1,7 @@
 /* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";

-import initMatrix from '../../client/initMatrix';
+import initMatrix from "../../client/initMatrix";

 export function useAccountData(eventType) {
  const mx = initMatrix.matrixClient;
@ -12,9 +12,9 @@ export function useAccountData(eventType) {
      if (mEvent.getType() !== eventType) return;
      setEvent(mEvent);
    };
-    mx.on('accountData', handleChange);
+    mx.on("accountData", handleChange);
    return () => {
-      mx.removeListener('accountData', handleChange);
+      mx.removeListener("accountData", handleChange);
    };
  }, [eventType]);

--- a/src/app/hooks/useCategorizedSpaces.js
+++ b/src/app/hooks/useCategorizedSpaces.js
@ -1,22 +1,27 @@
 /* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";

-import initMatrix from '../../client/initMatrix';
-import cons from '../../client/state/cons';
+import initMatrix from "../../client/initMatrix";
+import cons from "../../client/state/cons";

 export function useCategorizedSpaces() {
  const { accountData } = initMatrix;
-  const [categorizedSpaces, setCategorizedSpaces] = useState([...accountData.categorizedSpaces]);
+  const [categorizedSpaces, setCategorizedSpaces] = useState([
+    ...accountData.categorizedSpaces,
+  ]);

  useEffect(() => {
    const handleCategorizedSpaces = () => {
      setCategorizedSpaces([...accountData.categorizedSpaces]);
    };
-    accountData.on(cons.events.accountData.CATEGORIZE_SPACE_UPDATED, handleCategorizedSpaces);
+    accountData.on(
+      cons.events.accountData.CATEGORIZE_SPACE_UPDATED,
+      handleCategorizedSpaces
+    );
    return () => {
      accountData.removeListener(
        cons.events.accountData.CATEGORIZE_SPACE_UPDATED,
-        handleCategorizedSpaces,
+        handleCategorizedSpaces
      );
    };
  }, []);
--- a/src/app/hooks/useCrossSigningStatus.js
+++ b/src/app/hooks/useCrossSigningStatus.js
@ -1,8 +1,8 @@
 /* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";

-import initMatrix from '../../client/initMatrix';
-import { hasCrossSigningAccountData } from '../../util/matrixUtil';
+import initMatrix from "../../client/initMatrix";
+import { hasCrossSigningAccountData } from "../../util/matrixUtil";

 export function useCrossSigningStatus() {
  const mx = initMatrix.matrixClient;
@ -11,14 +11,14 @@ export function useCrossSigningStatus() {
  useEffect(() => {
    if (isCSEnabled) return null;
    const handleAccountData = (event) => {
-      if (event.getType() === 'm.cross_signing.master') {
+      if (event.getType() === "m.cross_signing.master") {
        setIsCSEnabled(true);
      }
    };

-    mx.on('accountData', handleAccountData);
+    mx.on("accountData", handleAccountData);
    return () => {
-      mx.removeListener('accountData', handleAccountData);
+      mx.removeListener("accountData", handleAccountData);
    };
  }, [isCSEnabled === false]);
  return isCSEnabled;
--- a/src/app/hooks/useDeviceList.js
+++ b/src/app/hooks/useDeviceList.js
@ -1,7 +1,7 @@
 /* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";

-import initMatrix from '../../client/initMatrix';
+import initMatrix from "../../client/initMatrix";

 export function useDeviceList() {
  const mx = initMatrix.matrixClient;
@ -10,10 +10,11 @@ export function useDeviceList() {
  useEffect(() => {
    let isMounted = true;

-    const updateDevices = () => mx.getDevices().then((data) => {
-      if (!isMounted) return;
-      setDeviceList(data.devices || []);
-    });
+    const updateDevices = () =>
+      mx.getDevices().then((data) => {
+        if (!isMounted) return;
+        setDeviceList(data.devices || []);
+      });
    updateDevices();

    const handleDevicesUpdate = (users) => {
@ -22,9 +23,9 @@ export function useDeviceList() {
      }
    };

-    mx.on('crypto.devicesUpdated', handleDevicesUpdate);
+    mx.on("crypto.devicesUpdated", handleDevicesUpdate);
    return () => {
-      mx.removeListener('crypto.devicesUpdated', handleDevicesUpdate);
+      mx.removeListener("crypto.devicesUpdated", handleDevicesUpdate);
      isMounted = false;
    };
  }, []);
--- a/src/app/hooks/useForceUpdate.js
+++ b/src/app/hooks/useForceUpdate.js
@ -1,10 +1,13 @@
 /* eslint-disable import/prefer-default-export */
-import { useState } from 'react';
+import { useState } from "react";

 export function useForceUpdate() {
  const [data, setData] = useState(null);

-  return [data, function forceUpdateHook() {
-    setData({});
-  }];
+  return [
+    data,
+    function forceUpdateHook() {
+      setData({});
+    },
+  ];
 }
--- a/src/app/hooks/usePermission.js
+++ b/src/app/hooks/usePermission.js
@ -1,6 +1,6 @@
 /* eslint-disable import/prefer-default-export */

-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";

 export function usePermission(name, initial) {
  const [state, setState] = useState(initial);
@ -15,12 +15,12 @@ export function usePermission(name, initial) {
        descriptor = _descriptor;

        update();
-        descriptor.addEventListener('change', update);
+        descriptor.addEventListener("change", update);
      });
    }

    return () => {
-      if (descriptor) descriptor.removeEventListener('change', update);
+      if (descriptor) descriptor.removeEventListener("change", update);
    };
  }, []);

--- a/src/app/hooks/useSelectedSpace.js
+++ b/src/app/hooks/useSelectedSpace.js
@ -1,8 +1,8 @@
 /* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";

-import cons from '../../client/state/cons';
-import navigation from '../../client/state/navigation';
+import cons from "../../client/state/cons";
+import navigation from "../../client/state/navigation";

 export function useSelectedSpace() {
  const [spaceId, setSpaceId] = useState(navigation.selectedSpaceId);
@ -13,7 +13,10 @@ export function useSelectedSpace() {
    };
    navigation.on(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
    return () => {
-      navigation.removeListener(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
+      navigation.removeListener(
+        cons.events.navigation.SPACE_SELECTED,
+        onSpaceSelected
+      );
    };
  }, []);

--- a/src/app/hooks/useSelectedTab.js
+++ b/src/app/hooks/useSelectedTab.js
@ -1,8 +1,8 @@
 /* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";

-import cons from '../../client/state/cons';
-import navigation from '../../client/state/navigation';
+import cons from "../../client/state/cons";
+import navigation from "../../client/state/navigation";

 export function useSelectedTab() {
  const [selectedTab, setSelectedTab] = useState(navigation.selectedTab);
@ -13,7 +13,10 @@ export function useSelectedTab() {
    };
    navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
    return () => {
-      navigation.removeListener(cons.events.navigation.TAB_SELECTED, onTabSelected);
+      navigation.removeListener(
+        cons.events.navigation.TAB_SELECTED,
+        onTabSelected
+      );
    };
  }, []);

--- a/src/app/hooks/useSpaceShortcut.js
+++ b/src/app/hooks/useSpaceShortcut.js
@ -1,22 +1,27 @@
 /* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";

-import initMatrix from '../../client/initMatrix';
-import cons from '../../client/state/cons';
+import initMatrix from "../../client/initMatrix";
+import cons from "../../client/state/cons";

 export function useSpaceShortcut() {
  const { accountData } = initMatrix;
-  const [spaceShortcut, setSpaceShortcut] = useState([...accountData.spaceShortcut]);
+  const [spaceShortcut, setSpaceShortcut] = useState([
+    ...accountData.spaceShortcut,
+  ]);

  useEffect(() => {
    const onSpaceShortcutUpdated = () => {
      setSpaceShortcut([...accountData.spaceShortcut]);
    };
-    accountData.on(cons.events.accountData.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
+    accountData.on(
+      cons.events.accountData.SPACE_SHORTCUT_UPDATED,
+      onSpaceShortcutUpdated
+    );
    return () => {
      accountData.removeListener(
        cons.events.accountData.SPACE_SHORTCUT_UPDATED,
-        onSpaceShortcutUpdated,
+        onSpaceShortcutUpdated
      );
    };
  }, []);
--- a/src/app/hooks/useStore.js
+++ b/src/app/hooks/useStore.js
@ -1,5 +1,5 @@
 /* eslint-disable import/prefer-default-export */
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef } from "react";

 export function useStore(...args) {
  const itemRef = useRef(null);
--- a/src/app/molecules/confirm-dialog/ConfirmDialog.jsx
+++ b/src/app/molecules/confirm-dialog/ConfirmDialog.jsx
@ -1,20 +1,20 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './ConfirmDialog.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./ConfirmDialog.scss";

-import { openReusableDialog } from '../../../client/action/navigation';
+import { openReusableDialog } from "../../../client/action/navigation";

-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
+import Text from "../../atoms/text/Text";
+import Button from "../../atoms/button/Button";

-function ConfirmDialog({
-  desc, actionTitle, actionType, onComplete,
-}) {
+function ConfirmDialog({ desc, actionTitle, actionType, onComplete }) {
  return (
    <div className="confirm-dialog">
      <Text>{desc}</Text>
      <div className="confirm-dialog__btn">
-        <Button variant={actionType} onClick={() => onComplete(true)}>{actionTitle}</Button>
+        <Button variant={actionType} onClick={() => onComplete(true)}>
+          {actionTitle}
+        </Button>
        <Button onClick={() => onComplete(false)}>Cancel</Button>
      </div>
    </div>
@ -23,7 +23,8 @@ function ConfirmDialog({
 ConfirmDialog.propTypes = {
  desc: PropTypes.string.isRequired,
  actionTitle: PropTypes.string.isRequired,
-  actionType: PropTypes.oneOf(['primary', 'positive', 'danger', 'caution']).isRequired,
+  actionType: PropTypes.oneOf(["primary", "positive", "danger", "caution"])
+    .isRequired,
  onComplete: PropTypes.func.isRequired,
 };

@ -35,24 +36,32 @@ ConfirmDialog.propTypes = {
 * @return {Promise<boolean>} does it get's confirmed or not
 */
 // eslint-disable-next-line import/prefer-default-export
-export const confirmDialog = (title, desc, actionTitle, actionType = 'primary') => new Promise((resolve) => {
-  let isCompleted = false;
-  openReusableDialog(
-    <Text variant="s1" weight="medium">{title}</Text>,
-    (requestClose) => (
-      <ConfirmDialog
-        desc={desc}
-        actionTitle={actionTitle}
-        actionType={actionType}
-        onComplete={(isConfirmed) => {
-          isCompleted = true;
-          resolve(isConfirmed);
-          requestClose();
-        }}
-      />
-    ),
-    () => {
-      if (!isCompleted) resolve(false);
-    },
-  );
-});
+export const confirmDialog = (
+  title,
+  desc,
+  actionTitle,
+  actionType = "primary"
+) =>
+  new Promise((resolve) => {
+    let isCompleted = false;
+    openReusableDialog(
+      <Text variant="s1" weight="medium">
+        {title}
+      </Text>,
+      (requestClose) => (
+        <ConfirmDialog
+          desc={desc}
+          actionTitle={actionTitle}
+          actionType={actionType}
+          onComplete={(isConfirmed) => {
+            isCompleted = true;
+            resolve(isConfirmed);
+            requestClose();
+          }}
+        />
+      ),
+      () => {
+        if (!isCompleted) resolve(false);
+      }
+    );
+  });
--- a/src/app/molecules/dialog/Dialog.jsx
+++ b/src/app/molecules/dialog/Dialog.jsx
@ -1,22 +1,29 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Dialog.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Dialog.scss";

-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";

-import Text from '../../atoms/text/Text';
-import Header, { TitleWrapper } from '../../atoms/header/Header';
-import ScrollView from '../../atoms/scroll/ScrollView';
-import RawModal from '../../atoms/modal/RawModal';
+import Text from "../../atoms/text/Text";
+import Header, { TitleWrapper } from "../../atoms/header/Header";
+import ScrollView from "../../atoms/scroll/ScrollView";
+import RawModal from "../../atoms/modal/RawModal";

 function Dialog({
-  className, isOpen, title, onAfterOpen, onAfterClose,
-  contentOptions, onRequestClose, closeFromOutside, children,
+  className,
+  isOpen,
+  title,
+  onAfterOpen,
+  onAfterClose,
+  contentOptions,
+  onRequestClose,
+  closeFromOutside,
+  children,
  invisibleScroll,
 }) {
  return (
    <RawModal
-      className={`${className === null ? '' : `${className} `}dialog-modal`}
+      className={`${className === null ? "" : `${className} `}dialog-modal`}
      isOpen={isOpen}
      onAfterOpen={onAfterOpen}
      onAfterClose={onAfterClose}
@ -28,19 +35,19 @@ function Dialog({
        <div className="dialog__content">
          <Header>
            <TitleWrapper>
-              {
-                typeof title === 'string'
-                  ? <Text variant="h2" weight="medium" primary>{twemojify(title)}</Text>
-                  : title
-              }
+              {typeof title === "string" ? (
+                <Text variant="h2" weight="medium" primary>
+                  {twemojify(title)}
+                </Text>
+              ) : (
+                title
+              )}
            </TitleWrapper>
            {contentOptions}
          </Header>
          <div className="dialog__content__wrapper">
            <ScrollView autoHide={!invisibleScroll} invisible={invisibleScroll}>
-              <div className="dialog__content-container">
-                {children}
-              </div>
+              <div className="dialog__content-container">{children}</div>
            </ScrollView>
          </div>
        </div>
--- a/src/app/molecules/dialog/ReusableDialog.jsx
+++ b/src/app/molecules/dialog/ReusableDialog.jsx
@ -1,12 +1,12 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";

-import cons from '../../../client/state/cons';
+import cons from "../../../client/state/cons";

-import navigation from '../../../client/state/navigation';
-import IconButton from '../../atoms/button/IconButton';
-import Dialog from './Dialog';
+import navigation from "../../../client/state/navigation";
+import IconButton from "../../atoms/button/IconButton";
+import Dialog from "./Dialog";

-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";

 function ReusableDialog() {
  const [isOpen, setIsOpen] = useState(false);
@ -19,7 +19,10 @@ function ReusableDialog() {
    };
    navigation.on(cons.events.navigation.REUSABLE_DIALOG_OPENED, handleOpen);
    return () => {
-      navigation.removeListener(cons.events.navigation.REUSABLE_DIALOG_OPENED, handleOpen);
+      navigation.removeListener(
+        cons.events.navigation.REUSABLE_DIALOG_OPENED,
+        handleOpen
+      );
    };
  }, []);

@ -35,10 +38,16 @@ function ReusableDialog() {
  return (
    <Dialog
      isOpen={isOpen}
-      title={data?.title || ''}
+      title={data?.title || ""}
      onAfterClose={handleAfterClose}
      onRequestClose={handleRequestClose}
-      contentOptions={<IconButton src={CrossIC} onClick={handleRequestClose} tooltip="Close" />}
+      contentOptions={
+        <IconButton
+          src={CrossIC}
+          onClick={handleRequestClose}
+          tooltip="Close"
+        />
+      }
      invisibleScroll
    >
      {data?.render(handleRequestClose) || <div />}
--- a/src/app/molecules/following-members/FollowingMembers.jsx
+++ b/src/app/molecules/following-members/FollowingMembers.jsx
@ -1,17 +1,17 @@
 /* eslint-disable react/prop-types */
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './FollowingMembers.scss';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./FollowingMembers.scss";

-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import { openReadReceipts } from '../../../client/action/navigation';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import { openReadReceipts } from "../../../client/action/navigation";

-import Text from '../../atoms/text/Text';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
+import Text from "../../atoms/text/Text";
+import RawIcon from "../../atoms/system-icons/RawIcon";
+import TickMarkIC from "../../../../public/res/ic/outlined/tick-mark.svg";

-import { getUsersActionJsx } from '../../organisms/room/common';
+import { getUsersActionJsx } from "../../organisms/room/common";

 function FollowingMembers({ roomTimeline }) {
  const [followingMembers, setFollowingMembers] = useState([]);
@ -27,28 +27,38 @@ function FollowingMembers({ roomTimeline }) {
      setFollowingMembers(roomTimeline.getLiveReaders());
    };
    updateFollowingMembers();
-    roomTimeline.on(cons.events.roomTimeline.LIVE_RECEIPT, updateFollowingMembers);
+    roomTimeline.on(
+      cons.events.roomTimeline.LIVE_RECEIPT,
+      updateFollowingMembers
+    );
    roomsInput.on(cons.events.roomsInput.MESSAGE_SENT, handleOnMessageSent);
    return () => {
-      roomTimeline.removeListener(cons.events.roomTimeline.LIVE_RECEIPT, updateFollowingMembers);
-      roomsInput.removeListener(cons.events.roomsInput.MESSAGE_SENT, handleOnMessageSent);
+      roomTimeline.removeListener(
+        cons.events.roomTimeline.LIVE_RECEIPT,
+        updateFollowingMembers
+      );
+      roomsInput.removeListener(
+        cons.events.roomsInput.MESSAGE_SENT,
+        handleOnMessageSent
+      );
    };
  }, [roomTimeline]);

  const filteredM = followingMembers.filter((userId) => userId !== myUserId);

-  return filteredM.length !== 0 && (
-    <button
-      className="following-members"
-      onClick={() => openReadReceipts(roomId, followingMembers)}
-      type="button"
-    >
-      <RawIcon
-        size="extra-small"
-        src={TickMarkIC}
-      />
-      <Text variant="b2">{getUsersActionJsx(roomId, filteredM, 'following the conversation.')}</Text>
-    </button>
+  return (
+    filteredM.length !== 0 && (
+      <button
+        className="following-members"
+        onClick={() => openReadReceipts(roomId, followingMembers)}
+        type="button"
+      >
+        <RawIcon size="extra-small" src={TickMarkIC} />
+        <Text variant="b2">
+          {getUsersActionJsx(roomId, filteredM, "following the conversation.")}
+        </Text>
+      </button>
+    )
  );
 }

--- a/src/app/molecules/following-members/FollowingMembers.scss
+++ b/src/app/molecules/following-members/FollowingMembers.scss
@ -1,4 +1,4 @@
-@use '../../partials/text';
+@use "../../partials/text";

 .following-members {
  width: 100%;
--- a/src/app/molecules/global-notification/GlobalNotification.jsx
+++ b/src/app/molecules/global-notification/GlobalNotification.jsx
@ -1,59 +1,61 @@
-import React from 'react';
+import React from "react";

-import initMatrix from '../../../client/initMatrix';
-import { openReusableContextMenu } from '../../../client/action/navigation';
-import { getEventCords } from '../../../util/common';
+import initMatrix from "../../../client/initMatrix";
+import { openReusableContextMenu } from "../../../client/action/navigation";
+import { getEventCords } from "../../../util/common";

-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import SettingTile from '../setting-tile/SettingTile';
+import Text from "../../atoms/text/Text";
+import Button from "../../atoms/button/Button";
+import { MenuHeader } from "../../atoms/context-menu/ContextMenu";
+import SettingTile from "../setting-tile/SettingTile";

-import NotificationSelector from './NotificationSelector';
+import NotificationSelector from "./NotificationSelector";

-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+import ChevronBottomIC from "../../../../public/res/ic/outlined/chevron-bottom.svg";

-import { useAccountData } from '../../hooks/useAccountData';
+import { useAccountData } from "../../hooks/useAccountData";

 export const notifType = {
-  ON: 'on',
-  OFF: 'off',
-  NOISY: 'noisy',
+  ON: "on",
+  OFF: "off",
+  NOISY: "noisy",
 };
 export const typeToLabel = {
-  [notifType.ON]: 'On',
-  [notifType.OFF]: 'Off',
-  [notifType.NOISY]: 'Noisy',
+  [notifType.ON]: "On",
+  [notifType.OFF]: "Off",
+  [notifType.NOISY]: "Noisy",
 };
 Object.freeze(notifType);

-const DM = '.m.rule.room_one_to_one';
-const ENC_DM = '.m.rule.encrypted_room_one_to_one';
-const ROOM = '.m.rule.message';
-const ENC_ROOM = '.m.rule.encrypted';
+const DM = ".m.rule.room_one_to_one";
+const ENC_DM = ".m.rule.encrypted_room_one_to_one";
+const ROOM = ".m.rule.message";
+const ENC_ROOM = ".m.rule.encrypted";

 export function getActionType(rule) {
  const { actions } = rule;
-  if (actions.find((action) => action?.set_tweak === 'sound')) return notifType.NOISY;
-  if (actions.find((action) => action?.set_tweak === 'highlight')) return notifType.ON;
-  if (actions.find((action) => action === 'dont_notify')) return notifType.OFF;
+  if (actions.find((action) => action?.set_tweak === "sound"))
+    return notifType.NOISY;
+  if (actions.find((action) => action?.set_tweak === "highlight"))
+    return notifType.ON;
+  if (actions.find((action) => action === "dont_notify")) return notifType.OFF;
  return notifType.OFF;
 }

 export function getTypeActions(type, highlightValue = false) {
-  if (type === notifType.OFF) return ['dont_notify'];
+  if (type === notifType.OFF) return ["dont_notify"];

-  const highlight = { set_tweak: 'highlight' };
-  if (typeof highlightValue === 'boolean') highlight.value = highlightValue;
-  if (type === notifType.ON) return ['notify', highlight];
+  const highlight = { set_tweak: "highlight" };
+  if (typeof highlightValue === "boolean") highlight.value = highlightValue;
+  if (type === notifType.ON) return ["notify", highlight];

-  const sound = { set_tweak: 'sound', value: 'default' };
-  return ['notify', sound, highlight];
+  const sound = { set_tweak: "sound", value: "default" };
+  return ["notify", sound, highlight];
 }

 function useGlobalNotif() {
  const mx = initMatrix.matrixClient;
-  const pushRules = useAccountData('m.push_rules')?.getContent();
+  const pushRules = useAccountData("m.push_rules")?.getContent();
  const underride = pushRules?.global?.underride ?? [];
  const rulesToType = {
    [DM]: notifType.ON,
@ -65,12 +67,14 @@ function useGlobalNotif() {
  const getRuleCondition = (rule) => {
    const condition = [];
    if (rule === DM || rule === ENC_DM) {
-      condition.push({ kind: 'room_member_count', is: '2' });
+      condition.push({ kind: "room_member_count", is: "2" });
    }
    condition.push({
-      kind: 'event_match',
-      key: 'type',
-      pattern: [ENC_DM, ENC_ROOM].includes(rule) ? 'm.room.encrypted' : 'm.room.message',
+      kind: "event_match",
+      key: "type",
+      pattern: [ENC_DM, ENC_ROOM].includes(rule)
+        ? "m.room.encrypted"
+        : "m.room.message",
    });
    return condition;
  };
@ -93,7 +97,7 @@ function useGlobalNotif() {
    }
    ruleContent.actions = getTypeActions(type);

-    mx.setAccountData('m.push_rules', content);
+    mx.setAccountData("m.push_rules", content);
  };

  const dmRule = underride.find((rule) => rule.rule_id === DM);
@ -114,8 +118,8 @@ function GlobalNotification() {

  const onSelect = (evt, rule) => {
    openReusableContextMenu(
-      'bottom',
-      getEventCords(evt, '.btn-surface'),
+      "bottom",
+      getEventCords(evt, ".btn-surface"),
      (requestClose) => (
        <NotificationSelector
          value={rulesToType[rule]}
@ -124,7 +128,7 @@ function GlobalNotification() {
            requestClose();
          }}
        />
-      ),
+      )
    );
  };

@ -133,39 +137,67 @@ function GlobalNotification() {
      <MenuHeader>Global Notifications</MenuHeader>
      <SettingTile
        title="Direct messages"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, DM)} iconSrc={ChevronBottomIC}>
-            { typeToLabel[rulesToType[DM]] }
+        options={
+          <Button
+            onClick={(evt) => onSelect(evt, DM)}
+            iconSrc={ChevronBottomIC}
+          >
+            {typeToLabel[rulesToType[DM]]}
          </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all direct message.</Text>}
+        }
+        content={
+          <Text variant="b3">
+            Default notification settings for all direct message.
+          </Text>
+        }
      />
      <SettingTile
        title="Encrypted direct messages"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, ENC_DM)} iconSrc={ChevronBottomIC}>
+        options={
+          <Button
+            onClick={(evt) => onSelect(evt, ENC_DM)}
+            iconSrc={ChevronBottomIC}
+          >
            {typeToLabel[rulesToType[ENC_DM]]}
          </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all encrypted direct message.</Text>}
+        }
+        content={
+          <Text variant="b3">
+            Default notification settings for all encrypted direct message.
+          </Text>
+        }
      />
      <SettingTile
        title="Rooms messages"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, ROOM)} iconSrc={ChevronBottomIC}>
+        options={
+          <Button
+            onClick={(evt) => onSelect(evt, ROOM)}
+            iconSrc={ChevronBottomIC}
+          >
            {typeToLabel[rulesToType[ROOM]]}
          </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all room message.</Text>}
+        }
+        content={
+          <Text variant="b3">
+            Default notification settings for all room message.
+          </Text>
+        }
      />
      <SettingTile
        title="Encrypted rooms messages"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, ENC_ROOM)} iconSrc={ChevronBottomIC}>
+        options={
+          <Button
+            onClick={(evt) => onSelect(evt, ENC_ROOM)}
+            iconSrc={ChevronBottomIC}
+          >
            {typeToLabel[rulesToType[ENC_ROOM]]}
          </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all encrypted room message.</Text>}
+        }
+        content={
+          <Text variant="b3">
+            Default notification settings for all encrypted room message.
+          </Text>
+        }
      />
    </div>
  );
--- a/src/app/molecules/global-notification/IgnoreUserList.jsx
+++ b/src/app/molecules/global-notification/IgnoreUserList.jsx
@ -1,31 +1,31 @@
-import React from 'react';
-import './IgnoreUserList.scss';
+import React from "react";
+import "./IgnoreUserList.scss";

-import initMatrix from '../../../client/initMatrix';
-import * as roomActions from '../../../client/action/room';
+import initMatrix from "../../../client/initMatrix";
+import * as roomActions from "../../../client/action/room";

-import Text from '../../atoms/text/Text';
-import Chip from '../../atoms/chip/Chip';
-import Input from '../../atoms/input/Input';
-import Button from '../../atoms/button/Button';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import SettingTile from '../setting-tile/SettingTile';
+import Text from "../../atoms/text/Text";
+import Chip from "../../atoms/chip/Chip";
+import Input from "../../atoms/input/Input";
+import Button from "../../atoms/button/Button";
+import { MenuHeader } from "../../atoms/context-menu/ContextMenu";
+import SettingTile from "../setting-tile/SettingTile";

-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";

-import { useAccountData } from '../../hooks/useAccountData';
+import { useAccountData } from "../../hooks/useAccountData";

 function IgnoreUserList() {
-  useAccountData('m.ignored_user_list');
+  useAccountData("m.ignored_user_list");
  const ignoredUsers = initMatrix.matrixClient.getIgnoredUsers();

  const handleSubmit = (evt) => {
    evt.preventDefault();
    const { ignoreInput } = evt.target.elements;
    const value = ignoreInput.value.trim();
-    const userIds = value.split(' ').filter((v) => v.match(/^@\S+:\S+$/));
+    const userIds = value.split(" ").filter((v) => v.match(/^@\S+:\S+$/));
    if (userIds.length === 0) return;
-    ignoreInput.value = '';
+    ignoreInput.value = "";
    roomActions.ignore(userIds);
  };

@ -34,12 +34,17 @@ function IgnoreUserList() {
      <MenuHeader>Ignored users</MenuHeader>
      <SettingTile
        title="Ignore user"
-        content={(
+        content={
          <div className="ignore-user-list__users">
-            <Text variant="b3">Ignore userId if you do not want to receive their messages or invites.</Text>
+            <Text variant="b3">
+              Ignore userId if you do not want to receive their messages or
+              invites.
+            </Text>
            <form onSubmit={handleSubmit}>
              <Input name="ignoreInput" required />
-              <Button variant="primary" type="submit">Ignore</Button>
+              <Button variant="primary" type="submit">
+                Ignore
+              </Button>
            </form>
            {ignoredUsers.length > 0 && (
              <div>
@ -55,7 +60,7 @@ function IgnoreUserList() {
              </div>
            )}
          </div>
-        )}
+        }
      />
    </div>
  );
--- a/src/app/molecules/global-notification/KeywordNotification.jsx
+++ b/src/app/molecules/global-notification/KeywordNotification.jsx
@ -1,35 +1,38 @@
-import React from 'react';
-import './KeywordNotification.scss';
+import React from "react";
+import "./KeywordNotification.scss";

-import initMatrix from '../../../client/initMatrix';
-import { openReusableContextMenu } from '../../../client/action/navigation';
-import { getEventCords } from '../../../util/common';
+import initMatrix from "../../../client/initMatrix";
+import { openReusableContextMenu } from "../../../client/action/navigation";
+import { getEventCords } from "../../../util/common";

-import Text from '../../atoms/text/Text';
-import Chip from '../../atoms/chip/Chip';
-import Input from '../../atoms/input/Input';
-import Button from '../../atoms/button/Button';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import SettingTile from '../setting-tile/SettingTile';
+import Text from "../../atoms/text/Text";
+import Chip from "../../atoms/chip/Chip";
+import Input from "../../atoms/input/Input";
+import Button from "../../atoms/button/Button";
+import { MenuHeader } from "../../atoms/context-menu/ContextMenu";
+import SettingTile from "../setting-tile/SettingTile";

-import NotificationSelector from './NotificationSelector';
+import NotificationSelector from "./NotificationSelector";

-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import ChevronBottomIC from "../../../../public/res/ic/outlined/chevron-bottom.svg";
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";

-import { useAccountData } from '../../hooks/useAccountData';
+import { useAccountData } from "../../hooks/useAccountData";
 import {
-  notifType, typeToLabel, getActionType, getTypeActions,
-} from './GlobalNotification';
+  notifType,
+  typeToLabel,
+  getActionType,
+  getTypeActions,
+} from "./GlobalNotification";

-const DISPLAY_NAME = '.m.rule.contains_display_name';
-const ROOM_PING = '.m.rule.roomnotif';
-const USERNAME = '.m.rule.contains_user_name';
-const KEYWORD = 'keyword';
+const DISPLAY_NAME = ".m.rule.contains_display_name";
+const ROOM_PING = ".m.rule.roomnotif";
+const USERNAME = ".m.rule.contains_user_name";
+const KEYWORD = "keyword";

 function useKeywordNotif() {
  const mx = initMatrix.matrixClient;
-  const pushRules = useAccountData('m.push_rules')?.getContent();
+  const pushRules = useAccountData("m.push_rules")?.getContent();
  const override = pushRules?.global?.override ?? [];
  const content = pushRules?.global?.content ?? [];

@ -60,12 +63,12 @@ function useKeywordNotif() {
        or.push(orRule);
      }
      if (rule === DISPLAY_NAME) {
-        orRule.conditions = [{ kind: 'contains_display_name' }];
+        orRule.conditions = [{ kind: "contains_display_name" }];
        orRule.actions = getTypeActions(type, true);
      } else {
        orRule.conditions = [
-          { kind: 'event_match', key: 'content.body', pattern: '@room' },
-          { kind: 'sender_notification_permission', key: 'room' },
+          { kind: "event_match", key: "content.body", pattern: "@room" },
+          { kind: "sender_notification_permission", key: "room" },
        ];
        orRule.actions = getTypeActions(type, true);
      }
@ -92,7 +95,7 @@ function useKeywordNotif() {
      });
    }

-    mx.setAccountData('m.push_rules', evtContent);
+    mx.setAccountData("m.push_rules", evtContent);
  };

  const addKeyword = (keyword) => {
@ -104,11 +107,13 @@ function useKeywordNotif() {
      default: false,
      actions: getTypeActions(rulesToType[KEYWORD] ?? notifType.NOISY, true),
    });
-    mx.setAccountData('m.push_rules', pushRules);
+    mx.setAccountData("m.push_rules", pushRules);
  };
  const removeKeyword = (rule) => {
-    pushRules.global.content = content.filter((r) => r.rule_id !== rule.rule_id);
-    mx.setAccountData('m.push_rules', pushRules);
+    pushRules.global.content = content.filter(
+      (r) => r.rule_id !== rule.rule_id
+    );
+    mx.setAccountData("m.push_rules", pushRules);
  };

  const dsRule = override.find((rule) => rule.rule_id === DISPLAY_NAME);
@ -131,20 +136,16 @@ function useKeywordNotif() {
 }

 function GlobalNotification() {
-  const {
-    rulesToType,
-    pushRules,
-    setRule,
-    addKeyword,
-    removeKeyword,
-  } = useKeywordNotif();
+  const { rulesToType, pushRules, setRule, addKeyword, removeKeyword } =
+    useKeywordNotif();

-  const keywordRules = pushRules?.global?.content.filter((r) => r.rule_id !== USERNAME) ?? [];
+  const keywordRules =
+    pushRules?.global?.content.filter((r) => r.rule_id !== USERNAME) ?? [];

  const onSelect = (evt, rule) => {
    openReusableContextMenu(
-      'bottom',
-      getEventCords(evt, '.btn-surface'),
+      "bottom",
+      getEventCords(evt, ".btn-surface"),
      (requestClose) => (
        <NotificationSelector
          value={rulesToType[rule]}
@ -153,7 +154,7 @@ function GlobalNotification() {
            requestClose();
          }}
        />
-      ),
+      )
    );
  };

@ -161,9 +162,9 @@ function GlobalNotification() {
    evt.preventDefault();
    const { keywordInput } = evt.target.elements;
    const value = keywordInput.value.trim();
-    if (value === '') return;
+    if (value === "") return;
    addKeyword(value);
-    keywordInput.value = '';
+    keywordInput.value = "";
  };

  return (
@ -171,50 +172,84 @@ function GlobalNotification() {
      <MenuHeader>Mentions & keywords</MenuHeader>
      <SettingTile
        title="Message containing my display name"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, DISPLAY_NAME)} iconSrc={ChevronBottomIC}>
-            { typeToLabel[rulesToType[DISPLAY_NAME]] }
+        options={
+          <Button
+            onClick={(evt) => onSelect(evt, DISPLAY_NAME)}
+            iconSrc={ChevronBottomIC}
+          >
+            {typeToLabel[rulesToType[DISPLAY_NAME]]}
          </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all message containing your display name.</Text>}
+        }
+        content={
+          <Text variant="b3">
+            Default notification settings for all message containing your
+            display name.
+          </Text>
+        }
      />
      <SettingTile
        title="Message containing my username"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, USERNAME)} iconSrc={ChevronBottomIC}>
-            { typeToLabel[rulesToType[USERNAME]] }
+        options={
+          <Button
+            onClick={(evt) => onSelect(evt, USERNAME)}
+            iconSrc={ChevronBottomIC}
+          >
+            {typeToLabel[rulesToType[USERNAME]]}
          </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all message containing your username.</Text>}
+        }
+        content={
+          <Text variant="b3">
+            Default notification settings for all message containing your
+            username.
+          </Text>
+        }
      />
      <SettingTile
        title="Message containing @room"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, ROOM_PING)} iconSrc={ChevronBottomIC}>
+        options={
+          <Button
+            onClick={(evt) => onSelect(evt, ROOM_PING)}
+            iconSrc={ChevronBottomIC}
+          >
            {typeToLabel[rulesToType[ROOM_PING]]}
          </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all messages containing @room.</Text>}
+        }
+        content={
+          <Text variant="b3">
+            Default notification settings for all messages containing @room.
+          </Text>
+        }
      />
-      { rulesToType[KEYWORD] && (
+      {rulesToType[KEYWORD] && (
        <SettingTile
          title="Message containing keywords"
-          options={(
-            <Button onClick={(evt) => onSelect(evt, KEYWORD)} iconSrc={ChevronBottomIC}>
+          options={
+            <Button
+              onClick={(evt) => onSelect(evt, KEYWORD)}
+              iconSrc={ChevronBottomIC}
+            >
              {typeToLabel[rulesToType[KEYWORD]]}
            </Button>
-          )}
-          content={<Text variant="b3">Default notification settings for all message containing keywords.</Text>}
+          }
+          content={
+            <Text variant="b3">
+              Default notification settings for all message containing keywords.
+            </Text>
+          }
        />
      )}
      <SettingTile
        title="Keywords"
-        content={(
+        content={
          <div className="keyword-notification__keyword">
-            <Text variant="b3">Get notification when a message contains keyword.</Text>
+            <Text variant="b3">
+              Get notification when a message contains keyword.
+            </Text>
            <form onSubmit={handleSubmit}>
              <Input name="keywordInput" required />
-              <Button variant="primary" type="submit">Add</Button>
+              <Button variant="primary" type="submit">
+                Add
+              </Button>
            </form>
            {keywordRules.length > 0 && (
              <div>
@ -230,7 +265,7 @@ function GlobalNotification() {
              </div>
            )}
          </div>
-        )}
+        }
      />
    </div>
  );
--- a/src/app/molecules/global-notification/NotificationSelector.jsx
+++ b/src/app/molecules/global-notification/NotificationSelector.jsx
@ -1,25 +1,41 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";

-import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
+import { MenuHeader, MenuItem } from "../../atoms/context-menu/ContextMenu";

-import CheckIC from '../../../../public/res/ic/outlined/check.svg';
+import CheckIC from "../../../../public/res/ic/outlined/check.svg";

-function NotificationSelector({
-  value, onSelect,
-}) {
+function NotificationSelector({ value, onSelect }) {
  return (
    <div>
      <MenuHeader>Notification</MenuHeader>
-      <MenuItem iconSrc={value === 'off' ? CheckIC : null} variant={value === 'off' ? 'positive' : 'surface'} onClick={() => onSelect('off')}>Off</MenuItem>
-      <MenuItem iconSrc={value === 'on' ? CheckIC : null} variant={value === 'on' ? 'positive' : 'surface'} onClick={() => onSelect('on')}>On</MenuItem>
-      <MenuItem iconSrc={value === 'noisy' ? CheckIC : null} variant={value === 'noisy' ? 'positive' : 'surface'} onClick={() => onSelect('noisy')}>Noisy</MenuItem>
+      <MenuItem
+        iconSrc={value === "off" ? CheckIC : null}
+        variant={value === "off" ? "positive" : "surface"}
+        onClick={() => onSelect("off")}
+      >
+        Off
+      </MenuItem>
+      <MenuItem
+        iconSrc={value === "on" ? CheckIC : null}
+        variant={value === "on" ? "positive" : "surface"}
+        onClick={() => onSelect("on")}
+      >
+        On
+      </MenuItem>
+      <MenuItem
+        iconSrc={value === "noisy" ? CheckIC : null}
+        variant={value === "noisy" ? "positive" : "surface"}
+        onClick={() => onSelect("noisy")}
+      >
+        Noisy
+      </MenuItem>
    </div>
  );
 }

 NotificationSelector.propTypes = {
-  value: PropTypes.oneOf(['off', 'on', 'noisy']).isRequired,
+  value: PropTypes.oneOf(["off", "on", "noisy"]).isRequired,
  onSelect: PropTypes.func.isRequired,
 };

--- a/src/app/molecules/image-lightbox/ImageLightbox.jsx
+++ b/src/app/molecules/image-lightbox/ImageLightbox.jsx
@ -1,18 +1,16 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './ImageLightbox.scss';
-import FileSaver from 'file-saver';
+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 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';
+import DownloadSVG from "../../../../public/res/ic/outlined/download.svg";
+import ExternalSVG from "../../../../public/res/ic/outlined/external.svg";

-function ImageLightbox({
-  url, alt, isOpen, onRequestClose,
-}) {
+function ImageLightbox({ url, alt, isOpen, onRequestClose }) {
  const handleDownload = () => {
    FileSaver.saveAs(url, alt);
  };
@ -26,8 +24,14 @@ function ImageLightbox({
      size="large"
    >
      <div className="image-lightbox__header">
-        <Text variant="b2" weight="medium">{alt}</Text>
-        <IconButton onClick={() => window.open(url)} size="small" src={ExternalSVG} />
+        <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">
--- a/src/app/molecules/image-lightbox/ImageLightbox.scss
+++ b/src/app/molecules/image-lightbox/ImageLightbox.scss
@ -1,5 +1,5 @@
-@use '../../partials/flex';
-@use '../../partials/text';
+@use "../../partials/flex";
+@use "../../partials/text";

 .image-lightbox__modal {
  box-shadow: none;
@ -21,7 +21,6 @@
  background-color: var(--bg-overlay-low);
 }

-
 .image-lightbox__header > *,
 .image-lightbox__content > * {
  pointer-events: all;
--- a/src/app/molecules/image-pack/ImagePack.jsx
+++ b/src/app/molecules/image-pack/ImagePack.jsx
@ -1,75 +1,80 @@
-import React, {
-  useState, useMemo, useReducer, useEffect,
-} from 'react';
-import PropTypes from 'prop-types';
-import './ImagePack.scss';
+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 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 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';
+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;
+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);
-    },
-  );
-});
+    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';
+  if (usage.includes("emoticon") && usage.includes("sticker")) return "both";
+  if (usage.includes("emoticon")) return "emoticon";
+  if (usage.includes("sticker")) return "sticker";

-  return 'both';
+  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 globalContent = mx
+    .getAccountData("im.ponies.emote_rooms")
+    ?.getContent();
+  if (typeof globalContent !== "object") return false;

  const { rooms } = globalContent;
-  if (typeof rooms !== 'object') return false;
+  if (typeof rooms !== "object") return false;

  return rooms[roomId]?.[stateKey] !== undefined;
 }
@ -78,13 +83,17 @@ 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 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);
+    mx.sendStateEvent(roomId, "im.ponies.room_emotes", content, stateKey);
  };

  return {
@ -95,16 +104,21 @@ function useRoomImagePack(roomId, stateKey) {

 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 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);
+    mx.setAccountData("im.ponies.user_emotes", content);
  };

  return {
@ -117,12 +131,11 @@ 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 (typeof key !== "string") return undefined;
+    let newKey = key?.replace(/\s/g, "_");
    if (pack.getImages().get(newKey)) {
-      newKey = suffixRename(
-        newKey,
-        (suffixedKey) => pack.getImages().get(suffixedKey),
+      newKey = suffixRename(newKey, (suffixedKey) =>
+        pack.getImages().get(suffixedKey)
      );
    }
    return newKey;
@ -141,10 +154,12 @@ function useImagePackHandles(pack, sendPackContent) {
  };
  const handleUsageChange = (newUsage) => {
    const usage = [];
-    if (newUsage === 'emoticon' || newUsage === 'both') usage.push('emoticon');
-    if (newUsage === 'sticker' || newUsage === 'both') usage.push('sticker');
+    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));
+    pack
+      .getImages()
+      .forEach((img) => pack.setImageUsage(img.shortcode, undefined));

    sendPackContent(pack.getContent());
    forceUpdate();
@ -161,10 +176,10 @@ function useImagePackHandles(pack, sendPackContent) {
  };
  const handleDeleteItem = async (key) => {
    const isConfirmed = await confirmDialog(
-      'Delete',
+      "Delete",
      `Are you sure that you want to delete "${key}"?`,
-      'Delete',
-      'danger',
+      "Delete",
+      "danger"
    );
    if (!isConfirmed) return;
    pack.removeImage(key);
@ -174,8 +189,8 @@ function useImagePackHandles(pack, sendPackContent) {
  };
  const handleUsageItem = (key, newUsage) => {
    const usage = [];
-    if (newUsage === 'emoticon' || newUsage === 'both') usage.push('emoticon');
-    if (newUsage === 'sticker' || newUsage === 'both') usage.push('sticker');
+    if (newUsage === "emoticon" || newUsage === "both") usage.push("emoticon");
+    if (newUsage === "sticker" || newUsage === "both") usage.push("sticker");
    pack.setImageUsage(key, usage);

    sendPackContent(pack.getContent());
@ -205,21 +220,23 @@ function useImagePackHandles(pack, sendPackContent) {
 }

 function addGlobalImagePack(mx, roomId, stateKey) {
-  const content = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? {};
+  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);
+  return mx.setAccountData("im.ponies.emote_rooms", content);
 }
 function removeGlobalImagePack(mx, roomId, stateKey) {
-  const content = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? {};
+  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);
+  return mx.setAccountData("im.ponies.emote_rooms", content);
 }

 function ImagePack({ roomId, stateKey, handlePackDelete }) {
@ -247,14 +264,17 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
  };

  const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
-  const canChange = room.currentState.hasSufficientPowerLevelFor('state_default', myPowerlevel);
+  const canChange = room.currentState.hasSufficientPowerLevelFor(
+    "state_default",
+    myPowerlevel
+  );

  const handleDeletePack = async () => {
    const isConfirmed = await confirmDialog(
-      'Delete Pack',
+      "Delete Pack",
      `Are you sure that you want to delete "${pack.displayName}"?`,
-      'Delete',
-      'danger',
+      "Delete",
+      "danger"
    );
    if (!isConfirmed) return;
    handlePackDelete(stateKey);
@ -265,18 +285,20 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
  return (
    <div className="image-pack">
      <ImagePackProfile
-        avatarUrl={pack.avatarUrl ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, 'crop') : null}
-        displayName={pack.displayName ?? 'Unknown'}
+        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 : (
+      {canChange && <ImagePackUpload onUpload={handleAddItem} />}
+      {images.length === 0 ? null : (
        <div>
          <div className="image-pack__header">
            <Text variant="b3">Image</Text>
@ -300,21 +322,27 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
        <div className="image-pack__footer">
          {pack.images.size > 2 && (
            <Button onClick={() => setViewMore(!viewMore)}>
-              {
-                viewMore
-                  ? 'View less'
-                  : `View ${pack.images.size - 2} more`
-              }
+              {viewMore ? "View less" : `View ${pack.images.size - 2} more`}
+            </Button>
+          )}
+          {handlePackDelete && (
+            <Button variant="danger" onClick={handleDeletePack}>
+              Delete Pack
            </Button>
          )}
-          { handlePackDelete && <Button variant="danger" onClick={handleDeletePack}>Delete Pack</Button>}
        </div>
      )}
      <div className="image-pack__global">
-        <Checkbox variant="positive" onToggle={handleGlobalChange} isActive={isGlobal} />
+        <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>
+          <Text variant="b3">
+            Add this pack to your account to use in all rooms.
+          </Text>
        </div>
      </div>
    </div>
@ -351,8 +379,12 @@ function ImagePackUser() {
  return (
    <div className="image-pack">
      <ImagePackProfile
-        avatarUrl={pack.avatarUrl ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, 'crop') : null}
-        displayName={pack.displayName ?? 'Personal'}
+        avatarUrl={
+          pack.avatarUrl
+            ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, "crop")
+            : null
+        }
+        displayName={pack.displayName ?? "Personal"}
        attribution={pack.attribution}
        usage={getUsage(pack.usage)}
        onUsageChange={handleUsageChange}
@ -360,7 +392,7 @@ function ImagePackUser() {
        onEditProfile={handleEditProfile}
      />
      <ImagePackUpload onUpload={handleAddItem} />
-      { images.length === 0 ? null : (
+      {images.length === 0 ? null : (
        <div>
          <div className="image-pack__header">
            <Text variant="b3">Image</Text>
@ -380,14 +412,10 @@ function ImagePackUser() {
          ))}
        </div>
      )}
-      {(pack.images.size > 2) && (
+      {pack.images.size > 2 && (
        <div className="image-pack__footer">
          <Button onClick={() => setViewMore(!viewMore)}>
-            {
-              viewMore
-                ? 'View less'
-                : `View ${pack.images.size - 2} more`
-            }
+            {viewMore ? "View less" : `View ${pack.images.size - 2} more`}
          </Button>
        </div>
      )}
@ -400,11 +428,13 @@ function useGlobalImagePack() {
  const mx = initMatrix.matrixClient;

  const roomIdToStateKeys = new Map();
-  const globalContent = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? { rooms: {} };
+  const globalContent = mx
+    .getAccountData("im.ponies.emote_rooms")
+    ?.getContent() ?? { rooms: {} };
  const { rooms } = globalContent;

  Object.keys(rooms).forEach((roomId) => {
-    if (typeof rooms[roomId] !== 'object') return;
+    if (typeof rooms[roomId] !== "object") return;
    const room = mx.getRoom(roomId);
    const stateKeys = Object.keys(rooms[roomId]);
    if (!room || stateKeys.length === 0) return;
@ -413,11 +443,11 @@ function useGlobalImagePack() {

  useEffect(() => {
    const handleEvent = (event) => {
-      if (event.getType() === 'im.ponies.emote_rooms') forceUpdate();
+      if (event.getType() === "im.ponies.emote_rooms") forceUpdate();
    };
-    mx.addListener('accountData', handleEvent);
+    mx.addListener("accountData", handleEvent);
    return () => {
-      mx.removeListener('accountData', handleEvent);
+      mx.removeListener("accountData", handleEvent);
    };
  }, []);

@ -436,29 +466,39 @@ function ImagePackGlobal() {
    <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>
-                  );
-                })
+        {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
              );
-            })
-            : <div className="image-pack-global__empty"><Text>No global packs</Text></div>
-        }
+              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>
  );
--- a/src/app/molecules/image-pack/ImagePack.scss
+++ b/src/app/molecules/image-pack/ImagePack.scss
@ -1,4 +1,4 @@
-@use '../../partials/flex';
+@use "../../partials/flex";

 .image-pack {
  &-item {
--- a/src/app/molecules/image-pack/ImagePackItem.jsx
+++ b/src/app/molecules/image-pack/ImagePackItem.jsx
@ -1,28 +1,33 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './ImagePackItem.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import "./ImagePackItem.scss";

-import { openReusableContextMenu } from '../../../client/action/navigation';
-import { getEventCords } from '../../../util/common';
+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 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';
+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,
+  url,
+  shortcode,
+  usage,
+  onUsageChange,
+  onDelete,
+  onRename,
 }) {
  const handleUsageSelect = (event) => {
    openReusableContextMenu(
-      'bottom',
-      getEventCords(event, '.btn-surface'),
+      "bottom",
+      getEventCords(event, ".btn-surface"),
      (closeMenu) => (
        <ImagePackUsageSelector
          usage={usage}
@ -31,27 +36,48 @@ function ImagePackItem({
            closeMenu();
          }}
        />
-      ),
+      )
    );
  };

  return (
    <div className="image-pack-item">
-      <Avatar imageSrc={url} size="extra-small" text={shortcode} bgColor="black" />
+      <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)} />}
+          {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" />}
+          {onUsageChange && (
+            <RawIcon src={ChevronBottomIC} size="extra-small" />
+          )}
          <Text variant="b2">
-            {usage === 'emoticon' && 'Emoji'}
-            {usage === 'sticker' && 'Sticker'}
-            {usage === 'both' && 'Both'}
+            {usage === "emoticon" && "Emoji"}
+            {usage === "sticker" && "Sticker"}
+            {usage === "both" && "Both"}
          </Text>
        </Button>
      </div>
@ -67,7 +93,7 @@ ImagePackItem.defaultProps = {
 ImagePackItem.propTypes = {
  url: PropTypes.string.isRequired,
  shortcode: PropTypes.string.isRequired,
-  usage: PropTypes.oneOf(['emoticon', 'sticker', 'both']).isRequired,
+  usage: PropTypes.oneOf(["emoticon", "sticker", "both"]).isRequired,
  onUsageChange: PropTypes.func,
  onDelete: PropTypes.func,
  onRename: PropTypes.func,
--- a/src/app/molecules/image-pack/ImagePackItem.scss
+++ b/src/app/molecules/image-pack/ImagePackItem.scss
@ -1,5 +1,5 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
+@use "../../partials/flex";
+@use "../../partials/dir";

 .image-pack-item {
  margin: 0 var(--sp-normal);
--- a/src/app/molecules/image-pack/ImagePackProfile.jsx
+++ b/src/app/molecules/image-pack/ImagePackProfile.jsx
@ -1,24 +1,29 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import './ImagePackProfile.scss';
+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 { 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 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';
+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,
+  avatarUrl,
+  displayName,
+  attribution,
+  usage,
+  onUsageChange,
+  onAvatarChange,
+  onEditProfile,
 }) {
  const [isEdit, setIsEdit] = useState(false);

@ -35,8 +40,8 @@ function ImagePackProfile({

  const handleUsageSelect = (event) => {
    openReusableContextMenu(
-      'bottom',
-      getEventCords(event, '.btn-surface'),
+      "bottom",
+      getEventCords(event, ".btn-surface"),
      (closeMenu) => (
        <ImagePackUsageSelector
          usage={usage}
@ -45,48 +50,62 @@ function ImagePackProfile({
            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" />
-      }
+      {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>}
-              </>
-            )
-        }
+        {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>
@ -95,9 +114,9 @@ function ImagePackProfile({
          iconSrc={onUsageChange ? ChevronBottomIC : null}
        >
          <Text>
-            {usage === 'emoticon' && 'Emoji'}
-            {usage === 'sticker' && 'Sticker'}
-            {usage === 'both' && 'Both'}
+            {usage === "emoticon" && "Emoji"}
+            {usage === "sticker" && "Sticker"}
+            {usage === "both" && "Both"}
          </Text>
        </Button>
      </div>
@ -116,7 +135,7 @@ ImagePackProfile.propTypes = {
  avatarUrl: PropTypes.string,
  displayName: PropTypes.string.isRequired,
  attribution: PropTypes.string,
-  usage: PropTypes.oneOf(['emoticon', 'sticker', 'both']).isRequired,
+  usage: PropTypes.oneOf(["emoticon", "sticker", "both"]).isRequired,
  onUsageChange: PropTypes.func,
  onAvatarChange: PropTypes.func,
  onEditProfile: PropTypes.func,
--- a/src/app/molecules/image-pack/ImagePackProfile.scss
+++ b/src/app/molecules/image-pack/ImagePackProfile.scss
@ -1,4 +1,4 @@
-@use '../../partials/flex';
+@use "../../partials/flex";

 .image-pack-profile {
  padding: var(--sp-normal);
--- a/src/app/molecules/image-pack/ImagePackUpload.jsx
+++ b/src/app/molecules/image-pack/ImagePackUpload.jsx
@ -1,15 +1,15 @@
-import React, { useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './ImagePackUpload.scss';
+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 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';
+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;
@ -23,7 +23,7 @@ function ImagePackUpload({ onUpload }) {
    if (!imgFile) return;
    const { shortcodeInput } = evt.target;
    const shortcode = shortcodeInput.value.trim();
-    if (shortcode === '') return;
+    if (shortcode === "") return;

    setProgress(true);
    const image = await scaleDownImage(imgFile, 512, 512);
@ -32,37 +32,53 @@ function ImagePackUpload({ onUpload }) {
    onUpload(shortcode, url);
    setProgress(false);
    setImgFile(null);
-    shortcodeRef.current.value = '';
+    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.value = img.name.slice(0, img.name.indexOf("."));
    shortcodeRef.current.focus();
  };
  const handleRemove = () => {
    setImgFile(null);
    inputRef.current.value = null;
-    shortcodeRef.current.value = '';
+    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>
+      <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>
  );
 }
--- a/src/app/molecules/image-pack/ImagePackUpload.scss
+++ b/src/app/molecules/image-pack/ImagePackUpload.scss
@ -1,5 +1,5 @@
-@use '../../partials/dir';
-@use '../../partials/text';
+@use "../../partials/dir";
+@use "../../partials/text";

 .image-pack-upload {
  padding: var(--sp-normal);
--- a/src/app/molecules/image-pack/ImagePackUsageSelector.jsx
+++ b/src/app/molecules/image-pack/ImagePackUsageSelector.jsx
@ -1,31 +1,31 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+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';
+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')}
+        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')}
+        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')}
+        iconSrc={usage === "both" ? CheckIC : undefined}
+        variant={usage === "both" ? "positive" : "surface"}
+        onClick={() => onSelect("both")}
      >
        Both
      </MenuItem>
@ -34,7 +34,7 @@ function ImagePackUsageSelector({ usage, onSelect }) {
 }

 ImagePackUsageSelector.propTypes = {
-  usage: PropTypes.oneOf(['emoticon', 'sticker', 'both']).isRequired,
+  usage: PropTypes.oneOf(["emoticon", "sticker", "both"]).isRequired,
  onSelect: PropTypes.func.isRequired,
 };

--- a/src/app/molecules/image-upload/ImageUpload.jsx
+++ b/src/app/molecules/image-upload/ImageUpload.jsx
@ -1,18 +1,22 @@
-import React, { useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './ImageUpload.scss';
+import React, { useState, useRef } from "react";
+import PropTypes from "prop-types";
+import "./ImageUpload.scss";

-import initMatrix from '../../../client/initMatrix';
+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 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';
+import PlusIC from "../../../../public/res/ic/outlined/plus.svg";

 function ImageUpload({
-  text, bgColor, imageSrc, onUpload, onRequestRemove,
+  text,
+  bgColor,
+  imageSrc,
+  onUpload,
+  onRequestRemove,
  size,
 }) {
  const [uploadPromise, setUploadPromise] = useState(null);
@ -26,7 +30,7 @@ function ImageUpload({
      setUploadPromise(uPromise);

      const res = await uPromise;
-      if (typeof res?.content_uri === 'string') onUpload(res.content_uri);
+      if (typeof res?.content_uri === "string") onUpload(res.content_uri);
      setUploadPromise(null);
    } catch {
      setUploadPromise(null);
@ -50,40 +54,48 @@ function ImageUpload({
          uploadImageRef.current.click();
        }}
      >
-        <Avatar
-          imageSrc={imageSrc}
-          text={text}
-          bgColor={bgColor}
-          size={size}
-        />
-        <div className={`img-upload__process ${uploadPromise === null ? ' img-upload__process--stopped' : ''}`}>
-          {uploadPromise === null && (
-            size === 'large'
-              ? <Text variant="b3" weight="bold">Upload</Text>
-              : <RawIcon src={PlusIC} color="white" />
-          )}
+        <Avatar imageSrc={imageSrc} text={text} bgColor={bgColor} size={size} />
+        <div
+          className={`img-upload__process ${
+            uploadPromise === null ? " img-upload__process--stopped" : ""
+          }`}
+        >
+          {uploadPromise === null &&
+            (size === "large" ? (
+              <Text variant="b3" weight="bold">
+                Upload
+              </Text>
+            ) : (
+              <RawIcon src={PlusIC} color="white" />
+            ))}
          {uploadPromise !== null && <Spinner size="small" />}
        </div>
      </button>
-      { (typeof imageSrc === 'string' || uploadPromise !== null) && (
+      {(typeof imageSrc === "string" || uploadPromise !== null) && (
        <button
          className="img-upload__btn-cancel"
          type="button"
          onClick={uploadPromise === null ? onRequestRemove : cancelUpload}
        >
-          <Text variant="b3">{uploadPromise ? 'Cancel' : 'Remove'}</Text>
+          <Text variant="b3">{uploadPromise ? "Cancel" : "Remove"}</Text>
        </button>
      )}
-      <input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" accept="image/*" />
+      <input
+        onChange={uploadImage}
+        style={{ display: "none" }}
+        ref={uploadImageRef}
+        type="file"
+        accept="image/*"
+      />
    </div>
  );
 }

 ImageUpload.defaultProps = {
  text: null,
-  bgColor: 'transparent',
+  bgColor: "transparent",
  imageSrc: null,
-  size: 'large',
+  size: "large",
 };

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

 export default ImageUpload;
--- a/src/app/molecules/image-upload/ImageUpload.scss
+++ b/src/app/molecules/image-upload/ImageUpload.scss
@ -1,49 +1,48 @@
 .img-upload__wrapper {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }

 .img-upload {
-	display: flex;
-	cursor: pointer;
-	position: relative;
+  display: flex;
+  cursor: pointer;
+  position: relative;

-	&__process {
-		width: 100%;
-		height: 100%;
-		border-radius: var(--bo-radius);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		background-color: rgba(0, 0, 0, .6);
+  &__process {
+    width: 100%;
+    height: 100%;
+    border-radius: var(--bo-radius);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.6);

-		position: absolute;
-		left: 0;
-		right: 0;
-		z-index: 1;
-		& .text {
-			text-transform: uppercase;
-			color: white;
-		}
-		&--stopped {
-			display: none;
-		}
-		& .donut-spinner {
-			border-color: rgb(255, 255, 255, .3);
-    	border-left-color: white;
-		}
-	}
-	&:hover .img-upload__process--stopped {
-		display: flex;
-	}
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    & .text {
+      text-transform: uppercase;
+      color: white;
+    }
+    &--stopped {
+      display: none;
+    }
+    & .donut-spinner {
+      border-color: rgb(255, 255, 255, 0.3);
+      border-left-color: white;
+    }
+  }
+  &:hover .img-upload__process--stopped {
+    display: flex;
+  }

-
-	&__btn-cancel {
-		margin-top: var(--sp-extra-tight);
-		cursor: pointer;
-		& .text {
-			color: var(--tc-danger-normal)
-		}
-	}
+  &__btn-cancel {
+    margin-top: var(--sp-extra-tight);
+    cursor: pointer;
+    & .text {
+      color: var(--tc-danger-normal);
+    }
+  }
 }
--- a/src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.jsx
+++ b/src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.jsx
@ -1,18 +1,18 @@
-import React, { useState, useEffect, useRef } from 'react';
-import './ExportE2ERoomKeys.scss';
+import React, { useState, useEffect, useRef } from "react";
+import "./ExportE2ERoomKeys.scss";

-import FileSaver from 'file-saver';
+import FileSaver from "file-saver";

-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import { encryptMegolmKeyFile } from '../../../util/cryptE2ERoomKeys';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import { encryptMegolmKeyFile } from "../../../util/cryptE2ERoomKeys";

-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import Input from '../../atoms/input/Input';
-import Spinner from '../../atoms/spinner/Spinner';
+import Text from "../../atoms/text/Text";
+import Button from "../../atoms/button/Button";
+import Input from "../../atoms/input/Input";
+import Spinner from "../../atoms/spinner/Spinner";

-import { useStore } from '../../hooks/useStore';
+import { useStore } from "../../hooks/useStore";

 function ExportE2ERoomKeys() {
  const isMountStore = useStore();
@ -29,14 +29,14 @@ function ExportE2ERoomKeys() {
    if (password !== confirmPasswordRef.current.value) {
      setStatus({
        isOngoing: false,
-        msg: 'Password does not match.',
+        msg: "Password does not match.",
        type: cons.status.ERROR,
      });
      return;
    }
    setStatus({
      isOngoing: true,
-      msg: 'Getting keys...',
+      msg: "Getting keys...",
      type: cons.status.IN_FLIGHT,
    });
    try {
@ -44,19 +44,22 @@ function ExportE2ERoomKeys() {
      if (isMountStore.getItem()) {
        setStatus({
          isOngoing: true,
-          msg: 'Encrypting keys...',
+          msg: "Encrypting keys...",
          type: cons.status.IN_FLIGHT,
        });
      }
-      const encKeys = await encryptMegolmKeyFile(JSON.stringify(keys), password);
+      const encKeys = await encryptMegolmKeyFile(
+        JSON.stringify(keys),
+        password
+      );
      const blob = new Blob([encKeys], {
-        type: 'text/plain;charset=us-ascii',
+        type: "text/plain;charset=us-ascii",
      });
-      FileSaver.saveAs(blob, 'cinny-keys.txt');
+      FileSaver.saveAs(blob, "cinny-keys.txt");
      if (isMountStore.getItem()) {
        setStatus({
          isOngoing: false,
-          msg: 'Successfully exported all keys.',
+          msg: "Successfully exported all keys.",
          type: cons.status.SUCCESS,
        });
      }
@ -64,7 +67,7 @@ function ExportE2ERoomKeys() {
      if (isMountStore.getItem()) {
        setStatus({
          isOngoing: false,
-          msg: e.friendlyText || 'Failed to export keys. Please try again.',
+          msg: e.friendlyText || "Failed to export keys. Please try again.",
          type: cons.status.ERROR,
        });
      }
@ -80,19 +83,45 @@ function ExportE2ERoomKeys() {

  return (
    <div className="export-e2e-room-keys">
-      <form className="export-e2e-room-keys__form" onSubmit={(e) => { e.preventDefault(); exportE2ERoomKeys(); }}>
-        <Input forwardRef={passwordRef} type="password" placeholder="Password" required />
-        <Input forwardRef={confirmPasswordRef} type="password" placeholder="Confirm password" required />
-        <Button disabled={status.isOngoing} variant="primary" type="submit">Export</Button>
+      <form
+        className="export-e2e-room-keys__form"
+        onSubmit={(e) => {
+          e.preventDefault();
+          exportE2ERoomKeys();
+        }}
+      >
+        <Input
+          forwardRef={passwordRef}
+          type="password"
+          placeholder="Password"
+          required
+        />
+        <Input
+          forwardRef={confirmPasswordRef}
+          type="password"
+          placeholder="Confirm password"
+          required
+        />
+        <Button disabled={status.isOngoing} variant="primary" type="submit">
+          Export
+        </Button>
      </form>
-      { status.type === cons.status.IN_FLIGHT && (
+      {status.type === cons.status.IN_FLIGHT && (
        <div className="import-e2e-room-keys__process">
          <Spinner size="small" />
          <Text variant="b2">{status.msg}</Text>
        </div>
      )}
-      {status.type === cons.status.SUCCESS && <Text className="import-e2e-room-keys__success" variant="b2">{status.msg}</Text>}
-      {status.type === cons.status.ERROR && <Text className="import-e2e-room-keys__error" variant="b2">{status.msg}</Text>}
+      {status.type === cons.status.SUCCESS && (
+        <Text className="import-e2e-room-keys__success" variant="b2">
+          {status.msg}
+        </Text>
+      )}
+      {status.type === cons.status.ERROR && (
+        <Text className="import-e2e-room-keys__error" variant="b2">
+          {status.msg}
+        </Text>
+      )}
    </div>
  );
 }
--- a/src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.scss
+++ b/src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.scss
@ -24,5 +24,4 @@
    margin-top: var(--sp-tight);
    color: var(--tc-danger-high);
  }
-
 }
--- a/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.jsx
+++ b/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.jsx
@ -1,19 +1,19 @@
-import React, { useState, useEffect, useRef } from 'react';
-import './ImportE2ERoomKeys.scss';
+import React, { useState, useEffect, useRef } from "react";
+import "./ImportE2ERoomKeys.scss";

-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import { decryptMegolmKeyFile } from '../../../util/cryptE2ERoomKeys';
+import initMatrix from "../../../client/initMatrix";
+import cons from "../../../client/state/cons";
+import { decryptMegolmKeyFile } from "../../../util/cryptE2ERoomKeys";

-import Text from '../../atoms/text/Text';
-import IconButton from '../../atoms/button/IconButton';
-import Button from '../../atoms/button/Button';
-import Input from '../../atoms/input/Input';
-import Spinner from '../../atoms/spinner/Spinner';
+import Text from "../../atoms/text/Text";
+import IconButton from "../../atoms/button/IconButton";
+import Button from "../../atoms/button/Button";
+import Input from "../../atoms/input/Input";
+import Spinner from "../../atoms/spinner/Spinner";

-import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
+import CirclePlusIC from "../../../../public/res/ic/outlined/circle-plus.svg";

-import { useStore } from '../../hooks/useStore';
+import { useStore } from "../../hooks/useStore";

 function ImportE2ERoomKeys() {
  const isMountStore = useStore();
@ -32,7 +32,7 @@ function ImportE2ERoomKeys() {
      if (isMountStore.getItem()) {
        setStatus({
          isOngoing: true,
-          msg: 'Decrypting file...',
+          msg: "Decrypting file...",
          type: cons.status.IN_FLIGHT,
        });
      }
@ -41,7 +41,7 @@ function ImportE2ERoomKeys() {
      if (isMountStore.getItem()) {
        setStatus({
          isOngoing: true,
-          msg: 'Decrypting messages...',
+          msg: "Decrypting messages...",
          type: cons.status.IN_FLIGHT,
        });
      }
@ -49,7 +49,7 @@ function ImportE2ERoomKeys() {
      if (isMountStore.getItem()) {
        setStatus({
          isOngoing: false,
-          msg: 'Successfully imported all keys.',
+          msg: "Successfully imported all keys.",
          type: cons.status.SUCCESS,
        });
        inputRef.current.value = null;
@ -59,7 +59,7 @@ function ImportE2ERoomKeys() {
      if (isMountStore.getItem()) {
        setStatus({
          isOngoing: false,
-          msg: e.friendlyText || 'Failed to decrypt keys. Please try again.',
+          msg: e.friendlyText || "Failed to decrypt keys. Please try again.",
          type: cons.status.ERROR,
        });
      }
@ -68,7 +68,7 @@ function ImportE2ERoomKeys() {

  const importE2ERoomKeys = () => {
    const password = passwordRef.current.value;
-    if (password === '' || keyFile === null) return;
+    if (password === "" || keyFile === null) return;
    if (status.isOngoing) return;

    tryDecrypt(keyFile, password);
@ -76,7 +76,7 @@ function ImportE2ERoomKeys() {

  const handleFileChange = (e) => {
    const file = e.target.files.item(0);
-    passwordRef.current.value = '';
+    passwordRef.current.value = "";
    setKeyFile(file);
    setStatus({
      isOngoing: false,
@ -105,27 +105,59 @@ function ImportE2ERoomKeys() {

  return (
    <div className="import-e2e-room-keys">
-      <input ref={inputRef} onChange={handleFileChange} style={{ display: 'none' }} type="file" />
+      <input
+        ref={inputRef}
+        onChange={handleFileChange}
+        style={{ display: "none" }}
+        type="file"
+      />

-      <form className="import-e2e-room-keys__form" onSubmit={(e) => { e.preventDefault(); importE2ERoomKeys(); }}>
-        { keyFile !== null && (
+      <form
+        className="import-e2e-room-keys__form"
+        onSubmit={(e) => {
+          e.preventDefault();
+          importE2ERoomKeys();
+        }}
+      >
+        {keyFile !== null && (
          <div className="import-e2e-room-keys__file">
-            <IconButton onClick={removeImportKeysFile} src={CirclePlusIC} tooltip="Remove file" />
+            <IconButton
+              onClick={removeImportKeysFile}
+              src={CirclePlusIC}
+              tooltip="Remove file"
+            />
            <Text>{keyFile.name}</Text>
          </div>
        )}
-        {keyFile === null && <Button onClick={() => inputRef.current.click()}>Import keys</Button>}
-        <Input forwardRef={passwordRef} type="password" placeholder="Password" required />
-        <Button disabled={status.isOngoing} variant="primary" type="submit">Decrypt</Button>
+        {keyFile === null && (
+          <Button onClick={() => inputRef.current.click()}>Import keys</Button>
+        )}
+        <Input
+          forwardRef={passwordRef}
+          type="password"
+          placeholder="Password"
+          required
+        />
+        <Button disabled={status.isOngoing} variant="primary" type="submit">
+          Decrypt
+        </Button>
      </form>
-      { status.type === cons.status.IN_FLIGHT && (
+      {status.type === cons.status.IN_FLIGHT && (
        <div className="import-e2e-room-keys__process">
          <Spinner size="small" />
          <Text variant="b2">{status.msg}</Text>
        </div>
      )}
-      {status.type === cons.status.SUCCESS && <Text className="import-e2e-room-keys__success" variant="b2">{status.msg}</Text>}
-      {status.type === cons.status.ERROR && <Text className="import-e2e-room-keys__error" variant="b2">{status.msg}</Text>}
+      {status.type === cons.status.SUCCESS && (
+        <Text className="import-e2e-room-keys__success" variant="b2">
+          {status.msg}
+        </Text>
+      )}
+      {status.type === cons.status.ERROR && (
+        <Text className="import-e2e-room-keys__error" variant="b2">
+          {status.msg}
+        </Text>
+      )}
    </div>
  );
 }
--- a/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.scss
+++ b/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.scss
@ -1,5 +1,5 @@
-@use '../../partials/text';
-@use '../../partials/dir';
+@use "../../partials/text";
+@use "../../partials/dir";

 .import-e2e-room-keys {
  &__file {
@ -34,7 +34,6 @@
    display: flex;
    margin-top: var(--sp-extra-tight);

-    
    & .input-container {
      flex: 1;
      margin: 0 var(--sp-tight);
--- a/src/app/molecules/media/Media.jsx
+++ b/src/app/molecules/media/Media.jsx
@ -1,20 +1,20 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './Media.scss';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import "./Media.scss";

-import encrypt from 'browser-encrypt-attachment';
+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 { 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';
+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";

-import { getBlobSafeMimeType } from '../../../util/mimetypes';
+import { getBlobSafeMimeType } from "../../../util/mimetypes";

 async function getDecryptedBlob(response, type, decryptData) {
  const arrayBuffer = await response.arrayBuffer();
@ -25,9 +25,11 @@ async function getDecryptedBlob(response, type, decryptData) {

 async function getUrl(link, type, decryptData) {
  try {
-    const response = await fetch(link, { method: 'GET' });
+    const response = await fetch(link, { method: "GET" });
    if (decryptData !== null) {
-      return URL.createObjectURL(await getDecryptedBlob(response, type, decryptData));
+      return URL.createObjectURL(
+        await getDecryptedBlob(response, type, decryptData)
+      );
    }
    const blob = await response.blob();
    return URL.createObjectURL(blob);
@ -41,10 +43,7 @@ function getNativeHeight(width, height, maxWidth = 296) {
  return scale * height;
 }

-function FileHeader({
-  name, link, external,
-  file, type,
-}) {
+function FileHeader({ name, link, external, file, type }) {
  const [url, setUrl] = useState(null);

  async function getFile() {
@ -61,20 +60,25 @@ function FileHeader({
  }
  return (
    <div className="file-header">
-      <Text className="file-name" variant="b3">{name}</Text>
-      { link !== null && (
+      <Text className="file-name" variant="b3">
+        {name}
+      </Text>
+      {link !== null && (
        <>
-          {
-            external && (
-              <IconButton
-                size="extra-small"
-                tooltip="Open in new tab"
-                src={ExternalSVG}
-                onClick={() => window.open(url || link)}
-              />
-            )
-          }
-          <a href={url || link} download={name} target="_blank" rel="noreferrer">
+          {external && (
+            <IconButton
+              size="extra-small"
+              tooltip="Open in new tab"
+              src={ExternalSVG}
+              onClick={() => window.open(url || link)}
+            />
+          )}
+          <a
+            href={url || link}
+            download={name}
+            target="_blank"
+            rel="noreferrer"
+          >
            <IconButton
              size="extra-small"
              tooltip="Download"
@ -100,9 +104,7 @@ FileHeader.propTypes = {
  type: PropTypes.string.isRequired,
 };

-function File({
-  name, link, file, type,
-}) {
+function File({ name, link, file, type }) {
  return (
    <div className="file-container">
      <FileHeader name={name} link={link} file={file} type={type} />
@ -111,7 +113,7 @@ function File({
 }
 File.defaultProps = {
  file: null,
-  type: '',
+  type: "",
 };
 File.propTypes = {
  name: PropTypes.string.isRequired,
@ -120,9 +122,7 @@ File.propTypes = {
  file: PropTypes.shape({}),
 };

-function Image({
-  name, width, height, link, file, type, blurhash,
-}) {
+function Image({ name, width, height, link, file, type, blurhash }) {
  const [url, setUrl] = useState(null);
  const [blur, setBlur] = useState(true);
  const [lightbox, setLightbox] = useState(false);
@ -149,17 +149,19 @@ function Image({
    <>
      <div className="file-container">
        <div
-          style={{ height: width !== null ? getNativeHeight(width, height) : 'unset' }}
+          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 && (
+          {blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
+          {url !== null && (
            <img
-              style={{ display: blur ? 'none' : 'unset' }}
+              style={{ display: blur ? "none" : "unset" }}
              onLoad={() => setBlur(false)}
              src={url || link}
              alt={name}
@ -182,8 +184,8 @@ Image.defaultProps = {
  file: null,
  width: null,
  height: null,
-  type: '',
-  blurhash: '',
+  type: "",
+  blurhash: "",
 };
 Image.propTypes = {
  name: PropTypes.string.isRequired,
@ -195,9 +197,7 @@ Image.propTypes = {
  blurhash: PropTypes.string,
 };

-function Sticker({
-  name, height, width, link, file, type,
-}) {
+function Sticker({ name, height, width, link, file, type }) {
  const [url, setUrl] = useState(null);

  useEffect(() => {
@ -214,14 +214,19 @@ function Sticker({
  }, []);

  return (
-    <div className="sticker-container" style={{ height: width !== null ? getNativeHeight(width, height, 128) : 'unset' }}>
-      { url !== null && <img src={url || link} title={name} alt={name} />}
+    <div
+      className="sticker-container"
+      style={{
+        height: width !== null ? getNativeHeight(width, height, 128) : "unset",
+      }}
+    >
+      {url !== null && <img src={url || link} title={name} alt={name} />}
    </div>
  );
 }
 Sticker.defaultProps = {
  file: null,
-  type: '',
+  type: "",
  width: null,
  height: null,
 };
@ -234,9 +239,7 @@ Sticker.propTypes = {
  type: PropTypes.string,
 };

-function Audio({
-  name, link, type, file,
-}) {
+function Audio({ name, link, type, file }) {
  const [isLoading, setIsLoading] = useState(false);
  const [url, setUrl] = useState(null);

@ -252,11 +255,22 @@ function Audio({

  return (
    <div className="file-container">
-      <FileHeader name={name} link={file !== null ? url : url || link} type={type} external />
+      <FileHeader
+        name={name}
+        link={file !== null ? url : url || link}
+        type={type}
+        external
+      />
      <div className="audio-container">
-        { url === null && isLoading && <Spinner size="small" /> }
-        { url === null && !isLoading && <IconButton onClick={handlePlayAudio} tooltip="Play audio" src={PlaySVG} />}
-        { url !== null && (
+        {url === null && isLoading && <Spinner size="small" />}
+        {url === null && !isLoading && (
+          <IconButton
+            onClick={handlePlayAudio}
+            tooltip="Play audio"
+            src={PlaySVG}
+          />
+        )}
+        {url !== null && (
          /* eslint-disable-next-line jsx-a11y/media-has-caption */
          <audio autoPlay controls>
            <source src={url} type={getBlobSafeMimeType(type)} />
@ -268,7 +282,7 @@ function Audio({
 }
 Audio.defaultProps = {
  file: null,
-  type: '',
+  type: "",
 };
 Audio.propTypes = {
  name: PropTypes.string.isRequired,
@ -278,8 +292,16 @@ Audio.propTypes = {
 };

 function Video({
-  name, link, thumbnail, thumbnailFile, thumbnailType,
-  width, height, file, type, blurhash,
+  name,
+  link,
+  thumbnail,
+  thumbnailFile,
+  thumbnailType,
+  width,
+  height,
+  file,
+  type,
+  blurhash,
 }) {
  const [isLoading, setIsLoading] = useState(false);
  const [url, setUrl] = useState(null);
@ -312,21 +334,37 @@ function Video({

  return (
    <div className="file-container">
-      <FileHeader name={name} link={file !== null ? url : url || link} type={type} external />
+      <FileHeader
+        name={name}
+        link={file !== null ? url : url || link}
+        type={type}
+        external
+      />
      <div
        style={{
-          height: width !== null ? getNativeHeight(width, height) : 'unset',
+          height: width !== null ? getNativeHeight(width, height) : "unset",
        }}
        className="video-container"
      >
-        { url === null ? (
+        {url === null ? (
          <>
-            { blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
-            { thumbUrl !== null && (
-              <img style={{ display: blur ? 'none' : 'unset' }} src={thumbUrl} onLoad={() => setBlur(false)} alt={name} />
+            {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} />}
+            {!isLoading && (
+              <IconButton
+                onClick={handlePlayVideo}
+                tooltip="Play video"
+                src={PlaySVG}
+              />
+            )}
          </>
        ) : (
          /* eslint-disable-next-line jsx-a11y/media-has-caption */
@ -345,7 +383,7 @@ Video.defaultProps = {
  thumbnail: null,
  thumbnailType: null,
  thumbnailFile: null,
-  type: '',
+  type: "",
  blurhash: null,
 };
 Video.propTypes = {
@ -361,6 +399,4 @@ Video.propTypes = {
  blurhash: PropTypes.string,
 };

-export {
-  File, Image, Sticker, Audio, Video,
-};
+export { File, Image, Sticker, Audio, Video };
--- a/Show more
+++ b/Show more
Author	SHA1	Message	Date
Michael Zhang	ff046ef49a	add captain definition file	2023-04-04 19:35:41 -05:00
Michael Zhang	f0fa49c291	Convert to typescript and fix fullTime	2023-03-31 19:00:52 -05:00
Michael Zhang	373cceadfd	cryptE2ERoomKeys -> ts	2023-03-31 18:56:05 -05:00
Michael Zhang	344e225ff4	Fix width on the room selector	2023-03-31 18:26:17 -05:00
Michael Zhang	7e1b747a37	Use local date format.	2023-03-31 18:22:34 -05:00
Michael Zhang	bd2b79c84d	Run through an auto-formatter	2023-03-31 17:26:43 -05:00
Michael Zhang	c673ee5928	settings-sticky-tabs (#1 ) - Add sticky positioning for tabs on the Settings panel - Also add sticky position for SpaceSettings	2023-03-31 17:16:52 -05:00
Bo	dcad1840c4	fix: Fixed small typo an cross signing reset modal (#1112 )	2023-03-30 20:12:33 +05:30
Krishan	f6694031a1	Release v2.2.6 (#1178 ) * Update package.json * Update package-lock.json * Update cons.js	2023-03-29 22:02:01 +11:00
Krishan	cfddaaae13	Fix docker build failing (#1177 )	2023-03-29 21:57:05 +11:00
Krishan	8524472d38	Release v2.2.5 (#1176 ) * Update package.json * Update package-lock.json * Update cons.js	2023-03-29 14:30:52 +11:00
renovate[bot]	863612d1a1	fix(deps): update dependency matrix-js-sdk to v24 (#1175 ) * fix(deps): update dependency matrix-js-sdk to v24 * Update build-pull-request.yml * Update netlify-dev.yml * Update prod-deploy.yml --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Krishan <33421343+kfiven@users.noreply.github.com>	2023-03-29 14:17:00 +11:00