Release v4.5.0 (#2247)

* fix backslash appear in url with inline markdown sequences

* fix markdown chars not escaping on edit

.eslintrc.cjs

@@ -20,6 +20,9 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
+  "globals": {
+    JSX: "readonly"
+  },
   plugins: [
     'react',
     '@typescript-eslint'
@@ -27,6 +30,7 @@ module.exports = {
   rules: {
     'linebreak-style': 0,
     'no-underscore-dangle': 0,
+    "no-shadow": "off",
 
     "import/prefer-default-export": "off",
     "import/extensions": "off",
@@ -55,5 +59,14 @@ module.exports = {
     "react-hooks/exhaustive-deps": "error",
 
     "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-shadow": "error"
   },
+  overrides: [
+    {
+      files: ['*.ts'],
+      rules: {
+        'no-undef': 'off',
+      },
+    },
+  ],
 };

.github/dependabot.yml

@@ -2,14 +2,14 @@
 
 version: 2
 updates:
-  - package-ecosystem: npm
-    directory: /
-    schedule:
-      interval: weekly
-      day: "tuesday"
-      time: "01:00"
-      timezone: "Asia/Kolkata"
-    open-pull-requests-limit: 15
+#   - package-ecosystem: npm
+#     directory: /
+#     schedule:
+#       interval: weekly
+#       day: "tuesday"
+#       time: "01:00"
+#       timezone: "Asia/Kolkata"
+#     open-pull-requests-limit: 15
 
   - package-ecosystem: github-actions
     directory: /

.github/renovate.json

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

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

@@ -12,18 +12,20 @@ jobs:
       PR_NUMBER: ${{github.event.number}}
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3.2.0
+        uses: actions/checkout@v4.2.0
       - name: Setup node
-        uses: actions/setup-node@v3.5.1
+        uses: actions/setup-node@v4.2.0
         with:
-          node-version: 18.12.1
-          cache: "npm"
+          node-version: 20.12.2
+          cache: 'npm'
       - 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
+        uses: actions/upload-artifact@v4.6.0
         with:
           name: preview
           path: dist
@@ -31,7 +33,7 @@ jobs:
       - name: Save pr number
         run: echo ${PR_NUMBER} > ./pr.txt
       - name: Upload pr number
-        uses: actions/upload-artifact@v3.1.1
+        uses: actions/upload-artifact@v4.6.0
         with:
           name: pr
           path: ./pr.txt

.github/workflows/cla.yml

@@ -0,0 +1,36 @@
+name: 'CLA Assistant'
+on:
+  issue_comment:
+    types: [created]
+  pull_request_target:
+    types: [opened, closed, synchronize]
+
+jobs:
+  CLAssistant:
+    runs-on: ubuntu-latest
+    steps:
+      - 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.6.1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          # 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
+          # branch should not be protected
+          branch: 'main'
+          allowlist: ajbura,bot*
+
+          #below are the optional inputs - If the optional inputs are not given, then default values will be taken
+          remote-organization-name: cinnyapp
+          remote-repository-name: cla
+          #create-file-commit-message: 'For example: Creating file for storing CLA Signatures'
+          #signed-commit-message: 'For example: $contributorName has signed the CLA in #$pullRequestNo'
+          #custom-notsigned-prcomment: 'pull request comment with Introductory message to ask new contributors to sign'
+          #custom-pr-sign-comment: 'The signature to be committed in order to sign the CLA'
+          #custom-allsigned-prcomment: 'pull request comment when all contributors has signed, defaults to **CLA Assistant Lite bot** All Contributors have signed the CLA.'
+          #lock-pullrequest-aftermerge: false - if you don't want this bot to automatically lock the pull request after merging (default - true)
+          #use-dco-flag: true - If you are using DCO instead of CLA

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

@@ -15,7 +15,7 @@ jobs:
     if: ${{ github.event.workflow_run.conclusion == 'success' }}
     steps:
       - name: Download pr number
-        uses: dawidd6/action-download-artifact@e6e25ac3a2b93187502a8be1ef9e9603afc34925
+        uses: dawidd6/action-download-artifact@20319c5641d495c8a52e688b7dc5fada6c3a9fbc
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -24,7 +24,7 @@ jobs:
         id: pr
         run: echo "id=$(<pr.txt)" >> $GITHUB_OUTPUT
       - name: Download artifact
-        uses: dawidd6/action-download-artifact@e6e25ac3a2b93187502a8be1ef9e9603afc34925
+        uses: dawidd6/action-download-artifact@20319c5641d495c8a52e688b7dc5fada6c3a9fbc
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -32,7 +32,7 @@ jobs:
           path: dist
       - name: Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@5da65c9f74c7961c5501a3ba329b8d0912f39c03
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
         with:
           publish-dir: dist
           deploy-message: "Deploy PR ${{ steps.pr.outputs.id }}"
@@ -45,7 +45,7 @@ jobs:
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_PR_CINNY }}
         timeout-minutes: 1
       - name: Comment preview on PR
-        uses: thollander/actions-comment-pull-request@c22fb302208b7b170d252a61a505d2ea27245eff
+        uses: thollander/actions-comment-pull-request@fabd468d3a1a0b97feee5f6b9e499eab0dd903f6
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:

.github/workflows/docker-pr.yml

@@ -11,9 +11,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3.2.0
+        uses: actions/checkout@v4.2.0
       - name: Build Docker image
-        uses: docker/build-push-action@v3.2.0
+        uses: docker/build-push-action@v6.13.0
         with:
           context: .
           push: false

.github/workflows/lockfile.yml

@@ -14,7 +14,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout
-        uses: actions/checkout@v3.2.0
+        uses: actions/checkout@v4.2.0
       - name: NPM Lockfile Changes
         uses: codepunkt/npm-lockfile-changes@b40543471c36394409466fdb277a73a0856d7891
         with:

.github/workflows/netlify-dev.yml

@@ -3,7 +3,7 @@ name: Deploy to Netlify (dev)
 on:
   push:
     branches:
-       - dev
+      - dev
 
 jobs:
   deploy-to-netlify:
@@ -11,21 +11,23 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3.2.0
+        uses: actions/checkout@v4.2.0
       - name: Setup node
-        uses: actions/setup-node@v3.5.1
+        uses: actions/setup-node@v4.2.0
         with:
-          node-version: 18.12.1
-          cache: "npm"
+          node-version: 20.12.2
+          cache: 'npm'
       - 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
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
         with:
           publish-dir: dist
-          deploy-message: "Dev deploy ${{ github.sha }}"
+          deploy-message: 'Dev deploy ${{ github.sha }}'
           enable-commit-comment: false
           github-token: ${{ secrets.GITHUB_TOKEN }}
           production-deploy: true

.github/workflows/prod-deploy.yml

@@ -10,21 +10,23 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3.2.0
+        uses: actions/checkout@v4.2.0
       - name: Setup node
-        uses: actions/setup-node@v3.5.1
+        uses: actions/setup-node@v4.2.0
         with:
-          node-version: 18.12.1
-          cache: "npm"
+          node-version: 20.12.2
+          cache: 'npm'
       - 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
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
         with:
           publish-dir: dist
-          deploy-message: "Prod deploy ${{ github.ref_name }}"
+          deploy-message: 'Prod deploy ${{ github.ref_name }}'
           enable-commit-comment: false
           github-token: ${{ secrets.GITHUB_TOKEN }}
           production-deploy: true
@@ -36,7 +38,7 @@ jobs:
         timeout-minutes: 1
       - name: Get version from tag
         id: vars
-        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
+        run: echo "tag=${GITHUB_REF#refs/*/}" >> $GITHUB_OUTPUT
       - name: Create tar.gz
         run: tar -czvf cinny-${{ steps.vars.outputs.tag }}.tar.gz dist
       - name: Sign tar.gz
@@ -50,7 +52,7 @@ jobs:
           gpg --export | xxd -p
           echo '${{ secrets.GNUPG_PASSPHRASE }}' | gpg --batch --yes --pinentry-mode loopback --passphrase-fd 0 --armor --detach-sign cinny-${{ steps.vars.outputs.tag }}.tar.gz
       - name: Upload tagged release
-        uses: softprops/action-gh-release@de2c0eb89ae2a093876385947365aca7b0e5f844
+        uses: softprops/action-gh-release@c95fe1489396fe8a9eb87c0abf8aa5b2ef267fda
         with:
           files: |
             cinny-${{ steps.vars.outputs.tag }}.tar.gz
@@ -64,31 +66,31 @@ jobs:
       packages: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3.2.0
+        uses: actions/checkout@v4.2.0
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2.1.0
+        uses: docker/setup-qemu-action@v3.4.0
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.2.1
+        uses: docker/setup-buildx-action@v3.9.0
       - name: Login to Docker Hub
-        uses: docker/login-action@v2.1.0
+        uses: docker/login-action@v3.3.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Login to the Container registry
-        uses: docker/login-action@v2.1.0
+        uses: docker/login-action@v3.3.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@v4.1.1
+        uses: docker/metadata-action@v5.6.1
         with:
           images: |
             ${{ secrets.DOCKER_USERNAME }}/cinny
             ghcr.io/${{ github.repository }}
       - name: Build and push Docker image
-        uses: docker/build-push-action@v3.2.0
+        uses: docker/build-push-action@v6.13.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.gitignore

@@ -4,3 +4,4 @@ node_modules
 devAssets
 
 .DS_Store
+.idea

.npmrc

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

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+cinnyapp@gmail.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

Dockerfile

@@ -1,18 +1,20 @@
 ## Builder
-FROM node:18.12.1-alpine3.15 as builder
+FROM node:20.12.2-alpine3.18 as builder
 
 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
 
 
 ## App
-FROM nginx:1.23.3-alpine
+FROM nginx:1.27.4-alpine
 
 COPY --from=builder /src/dist /app
+COPY --from=builder /src/docker-nginx.conf /etc/nginx/conf.d/default.conf
 
 RUN rm -rf /usr/share/nginx/html \
   && ln -s /app /usr/share/nginx/html

LICENSE

@@ -1,21 +1,661 @@
-MIT License
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
 
-Copyright (c) 2021-present Ajay Bura (ajbura)
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+                            Preamble
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.

README.md

@@ -13,29 +13,28 @@
 </p>
 
 A Matrix client focusing primarily on simple, elegant and secure interface. The main goal is to have an instant messaging application that is easy on people and has a modern touch.
-- [Roadmap](https://github.com/ajbura/cinny/projects/11)
+- [Roadmap](https://github.com/orgs/cinnyapp/projects/1)
 - [Contributing](./CONTRIBUTING.md)
 
+<img align="center" src="https://raw.githubusercontent.com/cinnyapp/cinny-site/main/assets/preview2-light.png" height="380">
+
 ## Getting started
-Web app is available at https://app.cinny.in and gets updated on each new release. The `dev` branch is continuously deployed at https://dev.cinny.in but keep in mind that it could have things broken.
+The web app is available at [app.cinny.in](https://app.cinny.in/) and gets updated on each new release. The `dev` branch is continuously deployed at [dev.cinny.in](https://dev.cinny.in) but keep in mind that it could have things broken.
 
-You can also download our desktop app from [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).
+You can also download our desktop app from the [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).
 
-To host Cinny on your own, download tarball of the app from [GitHub release](https://github.com/cinnyapp/cinny/releases/latest).
-You can serve the application with a webserver of your choice by simply copying `dist/` directory to the webroot. 
-To set default Homeserver on login and register page, place a customized [`config.json`](config.json) in webroot of your choice.
+## Self-hosting
+To host Cinny on your own, simply download the tarball from [GitHub releases](https://github.com/cinnyapp/cinny/releases/latest), and serve the files from `dist/` using your preferred webserver. Alternatively, you can just pull the docker image from [DockerHub](https://hub.docker.com/r/ajbura/cinny) or [GitHub Container Registry](https://github.com/cinnyapp/cinny/pkgs/container/cinny).
 
-Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by:
-```
-docker pull ajbura/cinny
-```
-or [ghcr image](https://github.com/cinnyapp/cinny/pkgs/container/cinny) by:
-```
-docker pull ghcr.io/cinnyapp/cinny:latest
-```
+* The default homeservers and explore pages are defined in [`config.json`](config.json).
 
-<details>
-<summary>PGP Public Key to verify tarball</summary>
+* You need to set up redirects to serve the assests. Example configurations; [netlify](netlify.toml), [nginx](contrib/nginx/cinny.domain.tld.conf), [caddy](contrib/caddy/caddyfile).
+    * If you have trouble configuring redirects you can [enable hash routing](config.json#L35) — the url in the browser will have a `/#/` between the domain and open channel (ie. `app.cinny.in/#/home/` instead of `app.cinny.in/home/`) but you won't have to configure your webserver.
+
+* To deploy on subdirectory, you need to rebuild the app youself after updating the `base` path in [`build.config.ts`](build.config.ts).
+    * For example, if you want to deploy on `https://cinny.in/app`, then set `base: '/app'`.
+
+<details><summary><b>PGP Public Key to verify tarball</b></summary>
 
 ```
 -----BEGIN PGP PUBLIC KEY BLOCK-----
@@ -49,16 +48,16 @@ Frn9ttCEzV55Y+so4X2e4ZnB+5gOnNw+ecifGVdj/+UyWnqvqqDvLrEjjK890nLb
 Pil4siecNMEpiwAN6WSmKpWaCwQAHEGDVeZCc/kT0iYfj5FBcsTVqWiO6eaxkUlm
 jnulqWqRrlB8CJQQvih/g//uSEBdzIibo+ro+3Jpe120U/XVUH62i9HoRQEm6ADG
 4zS5hIq4xyA8fL8AEQEAAbQdQ2lubnlBcHAgPGNpbm55YXBwQGdtYWlsLmNvbT6J
-AdQEEwEIAD4WIQSRri2MHidaaZv+vvuUMwx6UK/M8wUCYnD+DQIbAwUJA8JnAAUL
-CQgHAgYVCgkICwIEFgIDAQIeAQIXgAAKCRCUMwx6UK/M88ApC/9HAdbum1lYBC0s
-1k7GwP2A7B4sQtBWjy771BzybWlHeaeG+BGJwg4YiuowXZMm5dubFJFoI/CfeY07
-B5aK40/bmT6Xcfkp0VA74c1wUpubBUEJN7tH5HG/OGd9BKeq9E/HHtVaJLVT1k3w
-Rhv9VuHO6nR30EEp7IDthftotl5S4lio3+W0pKk4TAKV8vjaCNp3y/lAHzoP1BU9
-bUSao+7GXVeArKBjuqxN+t1uuiaxPH4L0oe2pMVjTig04zGJM5fTVoly859MEcC/
-R7Taq9RWGfXFmgCXy8Dviz3eOD90vqpCzhX4+ypK0cp2X0UwhMH4dpKUzExmdbhl
-eBO5GcHB4VxvloRBNf9/Lr7YOTgWejMUw+MlhZE2RE8unfW1LnM/cjL4dhXzO/XB
-FUHHNq8d6d4e02rfWqw7mZo2/NVJgFRcvzw2rgx7w7CKtCNwF4lNjUetB2waZzDb
-fAE0kwhK4Iuwvy12JOBzL0Yy9MxANtwUryr/LQz9AmdT4Rwnp0S5AY0EYnD+DQEM
+AdQEEwEIAD4CGwMFCwkIBwIGFQoJCAsCBBYCAwECHgECF4AWIQSRri2MHidaaZv+
+vvuUMwx6UK/M8wUCZqEDwAUJFvwIswAKCRCUMwx6UK/M877qC/4lxXOQIoWnLLkK
+YiRCTkGsH6NdxgeYr6wpXT4xuQ45ZxCytwHpOGQmO/5up5961TxWW8D1frRIJHjj
+AZGoRCL3EKEuY8nt3D99fpf3DvZrs1uoVAhiyn737hRlZAg+QsJheeGCmdSJ0hX5
+Yud8SE+9zxLS1+CEjMrsUd/RGre/phme+wNXfaHfREAC9ewolgVChPIbMxG2f+vs
+K8Xv52BFng7ta9fgsl1XuOjpuaSbQv6g+4ONk/lxKF0SmnhEGM3dmIYPONxW47Yf
+atnIjRra/YhPTNwrNBGMmG4IFKaOsMbjW/eakjWTWOVKKJNBMoDdRcYYWIMCpLy8
+AQUrMtQEsHSnqCwrw818S5A6rrhcfVGk36RGm0nOy6LS5g5jmqaYsvbCcBGY9B2c
+SUAVNm17oo7TtEajk8hcSXoZod1t++pyjcVKEmSn3nFK7v5m3V+cPhNTxZMK459P
+3x1Ucqj/kTqrxKw6s2Uknuk0ajmw0ljV+BQwgL6maguo9BKgCNW5AY0EYnD+DQEM
 ANOu/d6ZMF8bW+Df9RDCUQKytbaZfa+ZbIHBus7whCD/SQMOhPKntv3HX7SmMCs+
 5i27kJMu4YN623JCS7hdCoXVO1R5kXCEcneW/rPBMDutaM472YvIWMIqK9Wwl5+0
 Piu2N+uTkKhe9uS2u7eN+Khef3d7xfjGRxoppM+xI9dZO+jhYiy8LuC0oBohTjJq
@@ -67,24 +66,24 @@ s1+eh00n/tVpi2Jj9pCm7S0csSXvXj8v2OTdK1jt4YjpzR0/rwh4+/xlOjDjZEqH
 vMPhpzpbgnwkxZ3X8BFne9dJ3maC5zQ3LAeCP5m1W0hXzagYhfyjo74slJgD1O8c
 LDf2Oxc5MyM8Y/UK497zfqSPfgT3NhQmhHzk83DjXw3I6Z3A3U+Jp61w0eBRI1nx
 H1UIG+gldcAKUTcfwL0lghoT3nmi9JAbvek0Smhz00Bbo8/dx8vwQRxDUxlt7Exx
-NwARAQABiQG8BBgBCAAmFiEEka4tjB4nWmmb/r77lDMMelCvzPMFAmJw/g0CGwwF
-CQPCZwAACgkQlDMMelCvzPPT7Qv8CjXUEhphZFLwpBfaNOzRNfIXJST9aDit8zHW
-IMmfSpORVfpU71IyIB3o/DtTUPwCeb8nvNJs7aj1QT1ZUSsqFa3yY2S16V/g8+WN
-sHca6oDSc1J+A0eEpEL1HbG1b5OPBC0AeGvvMOoqrbqThBZVKg1Jc/0SD3cvKElv
-aHeCZCNNmfcZ2Ib4HYhhc8//ZtC9TeI+5J/YesctY1M12EoWMxMrc27Y3P5Pa0BI
-Uc3qxWggPq1vOFYsEshL0w99HyJvREJmQA7Fa0crV+rICxyrBxJeNnEvjH/0KCBU
-LCkEonLY1QwrxyeeV3VpxGE3zHHE3azOdAjTIoAdzX5f/qhbgYlM68GL2f8xdDkp
-O0igSGHWhO4F8BfmE7IOTx1Bi7daczp8nCFxh73cKpKB0RUsd9xxrqYpovjmEAlo
-w7aHpdzt64NQcsrbK10OSVDF3gFa9Vz20/NQvdUrp8jGmAb/8+nYqI94Jsc28H36
-UeGsouhyuITLwEhScounZDqop+Dx
-=Zg+6
+NwARAQABiQG8BBgBCAAmAhsMFiEEka4tjB4nWmmb/r77lDMMelCvzPMFAmahA9IF
+CRb8CMUACgkQlDMMelCvzPPQgQv/d5/z+fxgKqgfhQX+V49X4WgTVxZ/CzztDoJ1
+XAq1dzTNEy8AFguXIo6eVXPSpMxec7ZreN3+UPQBnCf3eR5YxWNYOYKmk0G4E8D2
+KGUJept7TSA42/8N2ov6tToXFg4CgzKZj0fYLwgutly7K8eiWmSU6ptaO8aEQBHB
+gTGIOO3h6vJMGVycmoeRnHjv4wV84YWSVFSoJ7cY0he4Z9UznJBbE/KHZjrkXsPo
+N+Gg5lDuOP5xjKzM5SogV9lhxBAhMWAg3URUF15yruZBiA8uV1FOK8sal/9C1G7V
+M6ygA6uOZqXlZtcdA94RoSsW2pZ9eLVPsxz2B3Zko7tu11MpNP/wYmfGTI3KxZBj
+n/eodvwjJSgHpGOFSmbNzvPJo3to5nNlp7wH1KxIMc6Uuu9hgfDfwkFZgV2bnFIa
+Q6gyF548Ub48z7Dz83+WwLgbX19ve4oZx+dqSdczP6ILHRQomtrzrkkP2LU52oI5
+mxFo+ioe/ABCufSmyqFye0psX3Sp
+=WtqZ
 -----END PGP PUBLIC KEY BLOCK-----
 ```
 </details>
 
 ## Local development
-> We recommend using a version manager as versions change very quickly. You will likely need to switch 
-between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Also recommended nodejs version Hydrogen LTS (v18).
+> [!TIP]
+> We recommend using a version manager as versions change very quickly. You will likely need to switch between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Recommended nodejs version is Iron LTS (v20).
 
 Execute the following commands to start a development server:
 ```sh
@@ -110,12 +109,3 @@ docker run -p 8080:80 cinny:latest
 ```
 
 This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by navigating to `http://localhost:8080`.
-
-
-## License
-
-Copyright (c) 2021-present Ajay Bura (ajbura)
-
-Code licensed under the MIT License: <http://opensource.org/licenses/MIT>
-
-Graphics licensed under CC-BY 4.0: <https://creativecommons.org/licenses/by/4.0/>

_redirects

@@ -1,3 +0,0 @@
-# Redirects from what the browser requests to what we serve
-/login       /
-/register    /

build.config.ts

@@ -0,0 +1,3 @@
+export default {
+  base: '/',
+};

config.json

@@ -1,11 +1,38 @@
 {
-  "defaultHomeserver": 3,
+  "defaultHomeserver": 2,
   "homeserverList": [
     "converser.eu",
     "envs.net",
-    "halogen.city",
     "matrix.org",
-    "mozilla.org"
+    "monero.social",
+    "mozilla.org",
+    "xmr.se"
   ],
-  "allowCustomHomeservers": true
+  "allowCustomHomeservers": true,
+
+  "featuredCommunities": {
+    "openAsDefault": false,
+    "spaces": [
+      "#cinny-space:matrix.org",
+      "#community:matrix.org",
+      "#space:envs.net",
+      "#science-space:matrix.org",
+      "#libregaming-games:tchncs.de",
+      "#mathematics-on:matrix.org"
+    ],
+    "rooms": [
+      "#cinny:matrix.org",
+      "#freesoftware:matrix.org",
+      "#pcapdroid:matrix.org",
+      "#gentoo:matrix.org",
+      "#PrivSec.dev:arcticfoxes.net",
+      "#disroot:aria-net.org"
+    ],
+    "servers": ["envs.net", "matrix.org", "monero.social", "mozilla.org"]
+  },
+
+  "hashRouter": {
+    "enabled": false,
+    "basename": "/"
+  }
 }

contrib/caddy/caddyfile

@@ -0,0 +1,6 @@
+cinny.domain.tld {
+  @nativeRouter not file {path} /
+  rewrite @nativeRouter {http.matchers.file.relative}
+  root * /path/to/caddy/dist
+  file_server
+}

contrib/nginx/cinny.domain.tld.conf

@@ -1,27 +1,35 @@
 server {
-	listen 80;
-	listen [::]:80;
-	server_name cinny.domain.tld;
+    listen 80;
+    listen [::]:80;
+    server_name cinny.domain.tld;
 
-	location / {
-		return 301 https://$host$request_uri;
-	}
+    location / {
+        return 301 https://$host$request_uri;
+    }
 
-	location /.well-known/acme-challenge/ {
-		alias /var/lib/letsencrypt/.well-known/acme-challenge/;
-	}
+    location /.well-known/acme-challenge/ {
+        alias /var/lib/letsencrypt/.well-known/acme-challenge/;
+    }
 }
 
 server {
-	listen 443 ssl http2;
-	listen [::]:443 ssl;
-	server_name cinny.domain.tld;
+    listen 443 ssl http2;
+    listen [::]:443 ssl;
+    server_name cinny.domain.tld;
 
-	location / {
-		root /opt/cinny/dist/;
-		index index.html;
-	}
-	location ~* ^\/(login|register) {
-		try_files $uri $uri/ /index.html;
-	}
+    location / {
+        root /opt/cinny/dist/;
+
+        rewrite ^/config.json$ /config.json break;
+        rewrite ^/manifest.json$ /manifest.json break;
+
+        rewrite ^.*/olm.wasm$ /olm.wasm break;
+        rewrite ^/sw.js$ /sw.js break;
+        rewrite ^/pdf.worker.min.js$ /pdf.worker.min.js break;
+
+        rewrite ^/public/(.*)$ /public/$1 break;
+        rewrite ^/assets/(.*)$ /assets/$1 break;
+
+        rewrite ^(.+)$ /index.html break;
+    }
 }

docker-nginx.conf

@@ -0,0 +1,20 @@
+server {
+  listen 80;
+  listen [::]:80;
+
+  location / {
+    root /usr/share/nginx/html;
+
+    rewrite ^/config.json$ /config.json break;
+    rewrite ^/manifest.json$ /manifest.json break;
+
+    rewrite ^.*/olm.wasm$ /olm.wasm break;
+    rewrite ^/sw.js$ /sw.js break;
+    rewrite ^/pdf.worker.min.js$ /pdf.worker.min.js break;
+
+    rewrite ^/public/(.*)$ /public/$1 break;
+    rewrite ^/assets/(.*)$ /assets/$1 break;
+
+    rewrite ^(.+)$ /index.html break;
+  }
+}

index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
     <title>Cinny</title>
     <meta name="name" content="Cinny" />
     <meta name="author" content="Ajay Bura" />
@@ -27,7 +27,7 @@
 
     <link id="favicon" rel="shortcut icon" href="./public/favicon.ico" />
 
-    <link rel="manifest" href="./manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="application-name" content="Cinny" />
     <meta name="apple-mobile-web-app-title" content="Cinny" />
@@ -90,12 +90,6 @@
       window.global ||= window;
     </script>
     <div id="root"></div>
-    <audio id="notificationSound">
-      <source src="./public/sound/notification.ogg" type="audio/ogg" />
-    </audio>
-    <audio id="inviteSound">
-      <source src="./public/sound/invite.ogg" type="audio/ogg" />
-    </audio>
-    <script type="module" src="./src/index.jsx"></script>
+    <script type="module" src="./src/index.tsx"></script>
   </body>
 </html>

netlify.toml

@@ -0,0 +1,41 @@
+[[redirects]]
+  from = "/config.json"
+  to = "/config.json"
+  status = 200
+
+[[redirects]]
+  from = "/manifest.json"
+  to = "/manifest.json"
+  status = 200
+
+[[redirects]]
+  from = "/sw.js"
+  to = "/sw.js"
+  status = 200
+
+[[redirects]]
+  from = "*/olm.wasm"
+  to = "/olm.wasm"
+  status = 200
+  force = true
+  
+[[redirects]]
+  from = "/pdf.worker.min.js"
+  to = "/pdf.worker.min.js"
+  status = 200
+
+[[redirects]]
+  from = "/public/*"
+  to = "/public/:splat"
+  status = 200
+
+[[redirects]]
+  from = "/assets/*"
+  to = "/assets/:splat"
+  status = 200
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+  force = true

package.json

@@ -1,8 +1,9 @@
 {
   "name": "cinny",
-  "version": "2.2.3",
+  "version": "4.5.0",
   "description": "Yet another matrix client",
   "main": "index.js",
+  "type": "module",
   "engines": {
     "node": ">=16.0.0"
   },
@@ -17,58 +18,98 @@
   },
   "keywords": [],
   "author": "Ajay Bura",
-  "license": "MIT",
+  "license": "AGPL-3.0-only",
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "1.1.6",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
     "@fontsource/inter": "4.5.14",
-    "@fontsource/roboto": "4.5.8",
-    "@khanacademy/simple-markdown": "0.8.6",
-    "@matrix-org/olm": "3.2.14",
+    "@matrix-org/olm": "3.2.15",
+    "@tanstack/react-query": "5.24.1",
+    "@tanstack/react-query-devtools": "5.24.1",
+    "@tanstack/react-virtual": "3.2.0",
     "@tippyjs/react": "4.2.6",
+    "@vanilla-extract/css": "1.9.3",
+    "@vanilla-extract/recipes": "0.3.0",
+    "@vanilla-extract/vite-plugin": "3.7.1",
+    "await-to-js": "3.0.0",
     "blurhash": "2.0.4",
     "browser-encrypt-attachment": "0.3.0",
+    "classnames": "2.3.2",
     "dateformat": "5.0.3",
-    "emojibase-data": "7.0.1",
+    "dayjs": "1.11.10",
+    "domhandler": "5.0.3",
+    "emojibase": "15.3.1",
+    "emojibase-data": "15.3.2",
     "file-saver": "2.0.5",
     "flux": "4.0.3",
-    "formik": "2.2.9",
-    "html-react-parser": "3.0.4",
-    "katex": "0.16.4",
-    "linkify-html": "4.0.2",
-    "linkifyjs": "4.0.2",
-    "matrix-js-sdk": "22.0.0",
+    "focus-trap-react": "10.0.2",
+    "folds": "2.1.0",
+    "formik": "2.4.6",
+    "html-dom-parser": "4.0.0",
+    "html-react-parser": "4.2.0",
+    "i18next": "23.12.2",
+    "i18next-browser-languagedetector": "8.0.0",
+    "i18next-http-backend": "2.5.2",
+    "immer": "9.0.16",
+    "is-hotkey": "0.2.0",
+    "jotai": "2.6.0",
+    "linkify-react": "4.1.3",
+    "linkifyjs": "4.1.3",
+    "matrix-js-sdk": "35.0.0",
+    "millify": "6.1.0",
+    "pdfjs-dist": "4.2.67",
+    "prismjs": "1.29.0",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
+    "react-aria": "3.29.1",
     "react-autosize-textarea": "7.1.0",
     "react-blurhash": "0.2.0",
-    "react-dnd": "15.1.2",
-    "react-dnd-html5-backend": "15.1.3",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
+    "react-error-boundary": "4.0.13",
     "react-google-recaptcha": "2.1.0",
+    "react-i18next": "15.0.0",
     "react-modal": "3.16.1",
-    "sanitize-html": "2.8.0",
+    "react-range": "1.8.14",
+    "react-router-dom": "6.20.0",
+    "sanitize-html": "2.12.1",
+    "slate": "0.112.0",
+    "slate-dom": "0.112.2",
+    "slate-history": "0.110.3",
+    "slate-react": "0.112.1",
     "tippy.js": "6.3.7",
-    "twemoji": "14.0.2"
+    "ua-parser-js": "1.0.35"
   },
   "devDependencies": {
+    "@esbuild-plugins/node-globals-polyfill": "0.2.3",
+    "@rollup/plugin-inject": "5.0.3",
     "@rollup/plugin-wasm": "6.1.1",
+    "@types/file-saver": "2.0.5",
+    "@types/is-hotkey": "0.1.10",
     "@types/node": "18.11.18",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.9",
+    "@types/prismjs": "1.26.0",
+    "@types/react": "18.2.39",
+    "@types/react-dom": "18.2.17",
+    "@types/react-google-recaptcha": "2.1.8",
+    "@types/sanitize-html": "2.9.0",
+    "@types/ua-parser-js": "0.7.36",
     "@typescript-eslint/eslint-plugin": "5.46.1",
     "@typescript-eslint/parser": "5.46.1",
-    "@vitejs/plugin-react": "3.0.0",
+    "@vitejs/plugin-react": "4.2.0",
+    "buffer": "6.0.3",
     "eslint": "8.29.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsx-a11y": "6.6.1",
     "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "4.6.0",
-    "mini-svg-data-uri": "1.4.4",
     "prettier": "2.8.1",
     "sass": "1.56.2",
     "typescript": "4.9.4",
-    "vite": "4.0.1",
-    "vite-plugin-static-copy": "0.13.0"
+    "vite": "5.0.13",
+    "vite-plugin-pwa": "0.20.5",
+    "vite-plugin-static-copy": "1.0.4",
+    "vite-plugin-top-level-await": "1.4.4"
   }
 }

public/locales/de.json

@@ -0,0 +1,7 @@
+{
+  "Organisms": {
+    "RoomCommon": {
+      "changed_room_name": " hat den Raum Name geändert"
+    }
+  }
+}

public/locales/en.json

@@ -0,0 +1,7 @@
+{
+  "Organisms": {
+    "RoomCommon": {
+      "changed_room_name": " changed room name"
+    }
+  }
+}

public/manifest.json

@@ -6,52 +6,52 @@
   "lang": "en-US",
   "display": "standalone",
   "orientation": "portrait",
-  "start_url": "/",
+  "start_url": "./",
   "background_color": "#fff",
   "theme_color": "#fff",
   "icons": [
     {
-      "src": "/public/android/android-chrome-36x36.png",
+      "src": "./public/android/android-chrome-36x36.png",
       "sizes": "36x36",
       "type": "image/png"
     },
     {
-      "src": "/public/android/android-chrome-48x48.png",
+      "src": "./public/android/android-chrome-48x48.png",
       "sizes": "48x48",
       "type": "image/png"
     },
     {
-      "src": "/public/android/android-chrome-72x72.png",
+      "src": "./public/android/android-chrome-72x72.png",
       "sizes": "72x72",
       "type": "image/png"
     },
     {
-      "src": "/public/android/android-chrome-96x96.png",
+      "src": "./public/android/android-chrome-96x96.png",
       "sizes": "96x96",
       "type": "image/png"
     },
     {
-      "src": "/public/android/android-chrome-144x144.png",
+      "src": "./public/android/android-chrome-144x144.png",
       "sizes": "144x144",
       "type": "image/png"
     },
     {
-      "src": "/public/android/android-chrome-192x192.png",
+      "src": "./public/android/android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "/public/android/android-chrome-256x256.png",
+      "src": "./public/android/android-chrome-256x256.png",
       "sizes": "256x256",
       "type": "image/png"
     },
     {
-      "src": "/public/android/android-chrome-384x384.png",
+      "src": "./public/android/android-chrome-384x384.png",
       "sizes": "384x384",
       "type": "image/png"
     },
     {
-      "src": "/public/android/android-chrome-512x512.png",
+      "src": "./public/android/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }

public/res/LICENSE

@@ -1,395 +0,0 @@
-Attribution 4.0 International
-
-=======================================================================
-
-Creative Commons Corporation ("Creative Commons") is not a law firm and
-does not provide legal services or legal advice. Distribution of
-Creative Commons public licenses does not create a lawyer-client or
-other relationship. Creative Commons makes its licenses and related
-information available on an "as-is" basis. Creative Commons gives no
-warranties regarding its licenses, any material licensed under their
-terms and conditions, or any related information. Creative Commons
-disclaims all liability for damages resulting from their use to the
-fullest extent possible.
-
-Using Creative Commons Public Licenses
-
-Creative Commons public licenses provide a standard set of terms and
-conditions that creators and other rights holders may use to share
-original works of authorship and other material subject to copyright
-and certain other rights specified in the public license below. The
-following considerations are for informational purposes only, are not
-exhaustive, and do not form part of our licenses.
-
-     Considerations for licensors: Our public licenses are
-     intended for use by those authorized to give the public
-     permission to use material in ways otherwise restricted by
-     copyright and certain other rights. Our licenses are
-     irrevocable. Licensors should read and understand the terms
-     and conditions of the license they choose before applying it.
-     Licensors should also secure all rights necessary before
-     applying our licenses so that the public can reuse the
-     material as expected. Licensors should clearly mark any
-     material not subject to the license. This includes other CC-
-     licensed material, or material used under an exception or
-     limitation to copyright. More considerations for licensors:
-    wiki.creativecommons.org/Considerations_for_licensors
-
-     Considerations for the public: By using one of our public
-     licenses, a licensor grants the public permission to use the
-     licensed material under specified terms and conditions. If
-     the licensor's permission is not necessary for any reason--for
-     example, because of any applicable exception or limitation to
-     copyright--then that use is not regulated by the license. Our
-     licenses grant only permissions under copyright and certain
-     other rights that a licensor has authority to grant. Use of
-     the licensed material may still be restricted for other
-     reasons, including because others have copyright or other
-     rights in the material. A licensor may make special requests,
-     such as asking that all changes be marked or described.
-     Although not required by our licenses, you are encouraged to
-     respect those requests where reasonable. More considerations
-     for the public:
-    wiki.creativecommons.org/Considerations_for_licensees
-
-=======================================================================
-
-Creative Commons Attribution 4.0 International Public License
-
-By exercising the Licensed Rights (defined below), You accept and agree
-to be bound by the terms and conditions of this Creative Commons
-Attribution 4.0 International Public License ("Public License"). To the
-extent this Public License may be interpreted as a contract, You are
-granted the Licensed Rights in consideration of Your acceptance of
-these terms and conditions, and the Licensor grants You such rights in
-consideration of benefits the Licensor receives from making the
-Licensed Material available under these terms and conditions.
-
-
-Section 1 -- Definitions.
-
-  a. Adapted Material means material subject to Copyright and Similar
-     Rights that is derived from or based upon the Licensed Material
-     and in which the Licensed Material is translated, altered,
-     arranged, transformed, or otherwise modified in a manner requiring
-     permission under the Copyright and Similar Rights held by the
-     Licensor. For purposes of this Public License, where the Licensed
-     Material is a musical work, performance, or sound recording,
-     Adapted Material is always produced where the Licensed Material is
-     synched in timed relation with a moving image.
-
-  b. Adapter's License means the license You apply to Your Copyright
-     and Similar Rights in Your contributions to Adapted Material in
-     accordance with the terms and conditions of this Public License.
-
-  c. Copyright and Similar Rights means copyright and/or similar rights
-     closely related to copyright including, without limitation,
-     performance, broadcast, sound recording, and Sui Generis Database
-     Rights, without regard to how the rights are labeled or
-     categorized. For purposes of this Public License, the rights
-     specified in Section 2(b)(1)-(2) are not Copyright and Similar
-     Rights.
-
-  d. Effective Technological Measures means those measures that, in the
-     absence of proper authority, may not be circumvented under laws
-     fulfilling obligations under Article 11 of the WIPO Copyright
-     Treaty adopted on December 20, 1996, and/or similar international
-     agreements.
-
-  e. Exceptions and Limitations means fair use, fair dealing, and/or
-     any other exception or limitation to Copyright and Similar Rights
-     that applies to Your use of the Licensed Material.
-
-  f. Licensed Material means the artistic or literary work, database,
-     or other material to which the Licensor applied this Public
-     License.
-
-  g. Licensed Rights means the rights granted to You subject to the
-     terms and conditions of this Public License, which are limited to
-     all Copyright and Similar Rights that apply to Your use of the
-     Licensed Material and that the Licensor has authority to license.
-
-  h. Licensor means the individual(s) or entity(ies) granting rights
-     under this Public License.
-
-  i. Share means to provide material to the public by any means or
-     process that requires permission under the Licensed Rights, such
-     as reproduction, public display, public performance, distribution,
-     dissemination, communication, or importation, and to make material
-     available to the public including in ways that members of the
-     public may access the material from a place and at a time
-     individually chosen by them.
-
-  j. Sui Generis Database Rights means rights other than copyright
-     resulting from Directive 96/9/EC of the European Parliament and of
-     the Council of 11 March 1996 on the legal protection of databases,
-     as amended and/or succeeded, as well as other essentially
-     equivalent rights anywhere in the world.
-
-  k. You means the individual or entity exercising the Licensed Rights
-     under this Public License. Your has a corresponding meaning.
-
-
-Section 2 -- Scope.
-
-  a. License grant.
-
-       1. Subject to the terms and conditions of this Public License,
-          the Licensor hereby grants You a worldwide, royalty-free,
-          non-sublicensable, non-exclusive, irrevocable license to
-          exercise the Licensed Rights in the Licensed Material to:
-
-            a. reproduce and Share the Licensed Material, in whole or
-               in part; and
-
-            b. produce, reproduce, and Share Adapted Material.
-
-       2. Exceptions and Limitations. For the avoidance of doubt, where
-          Exceptions and Limitations apply to Your use, this Public
-          License does not apply, and You do not need to comply with
-          its terms and conditions.
-
-       3. Term. The term of this Public License is specified in Section
-          6(a).
-
-       4. Media and formats; technical modifications allowed. The
-          Licensor authorizes You to exercise the Licensed Rights in
-          all media and formats whether now known or hereafter created,
-          and to make technical modifications necessary to do so. The
-          Licensor waives and/or agrees not to assert any right or
-          authority to forbid You from making technical modifications
-          necessary to exercise the Licensed Rights, including
-          technical modifications necessary to circumvent Effective
-          Technological Measures. For purposes of this Public License,
-          simply making modifications authorized by this Section 2(a)
-          (4) never produces Adapted Material.
-
-       5. Downstream recipients.
-
-            a. Offer from the Licensor -- Licensed Material. Every
-               recipient of the Licensed Material automatically
-               receives an offer from the Licensor to exercise the
-               Licensed Rights under the terms and conditions of this
-               Public License.
-
-            b. No downstream restrictions. You may not offer or impose
-               any additional or different terms or conditions on, or
-               apply any Effective Technological Measures to, the
-               Licensed Material if doing so restricts exercise of the
-               Licensed Rights by any recipient of the Licensed
-               Material.
-
-       6. No endorsement. Nothing in this Public License constitutes or
-          may be construed as permission to assert or imply that You
-          are, or that Your use of the Licensed Material is, connected
-          with, or sponsored, endorsed, or granted official status by,
-          the Licensor or others designated to receive attribution as
-          provided in Section 3(a)(1)(A)(i).
-
-  b. Other rights.
-
-       1. Moral rights, such as the right of integrity, are not
-          licensed under this Public License, nor are publicity,
-          privacy, and/or other similar personality rights; however, to
-          the extent possible, the Licensor waives and/or agrees not to
-          assert any such rights held by the Licensor to the limited
-          extent necessary to allow You to exercise the Licensed
-          Rights, but not otherwise.
-
-       2. Patent and trademark rights are not licensed under this
-          Public License.
-
-       3. To the extent possible, the Licensor waives any right to
-          collect royalties from You for the exercise of the Licensed
-          Rights, whether directly or through a collecting society
-          under any voluntary or waivable statutory or compulsory
-          licensing scheme. In all other cases the Licensor expressly
-          reserves any right to collect such royalties.
-
-
-Section 3 -- License Conditions.
-
-Your exercise of the Licensed Rights is expressly made subject to the
-following conditions.
-
-  a. Attribution.
-
-       1. If You Share the Licensed Material (including in modified
-          form), You must:
-
-            a. retain the following if it is supplied by the Licensor
-               with the Licensed Material:
-
-                 i. identification of the creator(s) of the Licensed
-                    Material and any others designated to receive
-                    attribution, in any reasonable manner requested by
-                    the Licensor (including by pseudonym if
-                    designated);
-
-                ii. a copyright notice;
-
-               iii. a notice that refers to this Public License;
-
-                iv. a notice that refers to the disclaimer of
-                    warranties;
-
-                 v. a URI or hyperlink to the Licensed Material to the
-                    extent reasonably practicable;
-
-            b. indicate if You modified the Licensed Material and
-               retain an indication of any previous modifications; and
-
-            c. indicate the Licensed Material is licensed under this
-               Public License, and include the text of, or the URI or
-               hyperlink to, this Public License.
-
-       2. You may satisfy the conditions in Section 3(a)(1) in any
-          reasonable manner based on the medium, means, and context in
-          which You Share the Licensed Material. For example, it may be
-          reasonable to satisfy the conditions by providing a URI or
-          hyperlink to a resource that includes the required
-          information.
-
-       3. If requested by the Licensor, You must remove any of the
-          information required by Section 3(a)(1)(A) to the extent
-          reasonably practicable.
-
-       4. If You Share Adapted Material You produce, the Adapter's
-          License You apply must not prevent recipients of the Adapted
-          Material from complying with this Public License.
-
-
-Section 4 -- Sui Generis Database Rights.
-
-Where the Licensed Rights include Sui Generis Database Rights that
-apply to Your use of the Licensed Material:
-
-  a. for the avoidance of doubt, Section 2(a)(1) grants You the right
-     to extract, reuse, reproduce, and Share all or a substantial
-     portion of the contents of the database;
-
-  b. if You include all or a substantial portion of the database
-     contents in a database in which You have Sui Generis Database
-     Rights, then the database in which You have Sui Generis Database
-     Rights (but not its individual contents) is Adapted Material; and
-
-  c. You must comply with the conditions in Section 3(a) if You Share
-     all or a substantial portion of the contents of the database.
-
-For the avoidance of doubt, this Section 4 supplements and does not
-replace Your obligations under this Public License where the Licensed
-Rights include other Copyright and Similar Rights.
-
-
-Section 5 -- Disclaimer of Warranties and Limitation of Liability.
-
-  a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
-     EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
-     AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
-     ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
-     IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
-     WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
-     PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
-     ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
-     KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
-     ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
-
-  b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
-     TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
-     NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
-     INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
-     COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
-     USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
-     ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
-     DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
-     IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
-
-  c. The disclaimer of warranties and limitation of liability provided
-     above shall be interpreted in a manner that, to the extent
-     possible, most closely approximates an absolute disclaimer and
-     waiver of all liability.
-
-
-Section 6 -- Term and Termination.
-
-  a. This Public License applies for the term of the Copyright and
-     Similar Rights licensed here. However, if You fail to comply with
-     this Public License, then Your rights under this Public License
-     terminate automatically.
-
-  b. Where Your right to use the Licensed Material has terminated under
-     Section 6(a), it reinstates:
-
-       1. automatically as of the date the violation is cured, provided
-          it is cured within 30 days of Your discovery of the
-          violation; or
-
-       2. upon express reinstatement by the Licensor.
-
-     For the avoidance of doubt, this Section 6(b) does not affect any
-     right the Licensor may have to seek remedies for Your violations
-     of this Public License.
-
-  c. For the avoidance of doubt, the Licensor may also offer the
-     Licensed Material under separate terms or conditions or stop
-     distributing the Licensed Material at any time; however, doing so
-     will not terminate this Public License.
-
-  d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
-     License.
-
-
-Section 7 -- Other Terms and Conditions.
-
-  a. The Licensor shall not be bound by any additional or different
-     terms or conditions communicated by You unless expressly agreed.
-
-  b. Any arrangements, understandings, or agreements regarding the
-     Licensed Material not stated herein are separate from and
-     independent of the terms and conditions of this Public License.
-
-
-Section 8 -- Interpretation.
-
-  a. For the avoidance of doubt, this Public License does not, and
-     shall not be interpreted to, reduce, limit, restrict, or impose
-     conditions on any use of the Licensed Material that could lawfully
-     be made without permission under this Public License.
-
-  b. To the extent possible, if any provision of this Public License is
-     deemed unenforceable, it shall be automatically reformed to the
-     minimum extent necessary to make it enforceable. If the provision
-     cannot be reformed, it shall be severed from this Public License
-     without affecting the enforceability of the remaining terms and
-     conditions.
-
-  c. No term or condition of this Public License will be waived and no
-     failure to comply consented to unless expressly agreed to by the
-     Licensor.
-
-  d. Nothing in this Public License constitutes or may be interpreted
-     as a limitation upon, or waiver of, any privileges and immunities
-     that apply to the Licensor or You, including from the legal
-     processes of any jurisdiction or authority.
-
-
-=======================================================================
-
-Creative Commons is not a party to its public
-licenses. Notwithstanding, Creative Commons may elect to apply one of
-its public licenses to material it publishes and in those instances
-will be considered the “Licensor.” The text of the Creative Commons
-public licenses is dedicated to the public domain under the CC0 Public
-Domain Dedication. Except for the limited purpose of indicating that
-material is shared under a Creative Commons public license or as
-otherwise permitted by the Creative Commons policies published at
-creativecommons.org/policies, Creative Commons does not authorize the
-use of the trademark "Creative Commons" or any other trademark or logo
-of Creative Commons without its prior written consent including,
-without limitation, in connection with any unauthorized modifications
-to any of its public licenses or any other arrangements,
-understandings, or agreements concerning use of licensed material. For
-the avoidance of doubt, this paragraph does not form part of the
-public licenses.
-
-Creative Commons may be contacted at creativecommons.org.

public/res/README.md

@@ -1,7 +0,0 @@
-Copyright (c) 2021-present Ajay Bura (ajbura)
-
-Graphic content is licensed under a
-Creative Commons Attribution 4.0 International License.
-
-You should have received a copy of the license along with this
-work. If not, see <http://creativecommons.org/licenses/by/4.0/>;.

src/app/atoms/avatar/Avatar.jsx

@@ -2,17 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './Avatar.scss';
 
-import { twemojify } from '../../../util/twemojify';
-
 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';
 
-const Avatar = React.forwardRef(({
-  text, bgColor, iconSrc, iconColor, imageSrc, size,
-}, ref) => {
+const Avatar = React.forwardRef(({ text, bgColor, iconSrc, iconColor, imageSrc, size }, ref) => {
   let textSize = 's1';
   if (size === 'large') textSize = 'h1';
   if (size === 'small') textSize = 'b1';
@@ -20,34 +16,34 @@ const Avatar = React.forwardRef(({
 
   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>
-          )
-      }
+      {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>
+                {avatarInitials(text)}
+              </Text>
+            )
+          )}
+        </span>
+      )}
     </div>
   );
 });

src/app/atoms/button/Toggle.scss

@@ -22,8 +22,7 @@
     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;
   }
 
@@ -36,8 +35,8 @@
       @include dir.prop(transform, var(--ltr), var(--rtl));
 
       transform: translateX(calc(125%));
-      background-color: white;
+      background-color: var(--bg-surface);
       opacity: 1;
     }
   }
-}
+}

src/app/atoms/math/Math.jsx

@@ -1,33 +0,0 @@
-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/dist/contrib/copy-tex';
-
-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]);
-
-  return <span ref={ref} />;
-});
-Math.defaultProps = {
-  throwOnError: null,
-  errorColor: null,
-  displayMode: null,
-};
-Math.propTypes = {
-  content: PropTypes.string.isRequired,
-  throwOnError: PropTypes.bool,
-  errorColor: PropTypes.string,
-  displayMode: PropTypes.bool,
-};
-
-export default Math;

src/app/atoms/math/Math.scss

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

src/app/atoms/tabs/Tabs.jsx

@@ -41,8 +41,9 @@ TabItem.propTypes = {
 function Tabs({ items, defaultSelected, onSelect }) {
   const [selectedItem, setSelectedItem] = useState(items[defaultSelected]);
 
-  const handleTabSelection = (item, index) => {
+  const handleTabSelection = (item, index, target) => {
     if (selectedItem === item) return;
+    target.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
     setSelectedItem(item);
     onSelect(item, index);
   };
@@ -57,7 +58,7 @@ function Tabs({ items, defaultSelected, onSelect }) {
               selected={selectedItem.text === item.text}
               iconSrc={item.iconSrc}
               disabled={item.disabled}
-              onClick={() => handleTabSelection(item, index)}
+              onClick={(e) => handleTabSelection(item, index, e.currentTarget)}
             >
               {item.text}
             </TabItem>

src/app/components/ActionUIA.tsx

@@ -0,0 +1,73 @@
+import React, { ReactNode } from 'react';
+import { AuthDict, AuthType, IAuthData, UIAFlow } from 'matrix-js-sdk';
+import { getUIAFlowForStages } from '../utils/matrix-uia';
+import { useSupportedUIAFlows, useUIACompleted, useUIAFlow } from '../hooks/useUIAFlows';
+import { UIAFlowOverlay } from './UIAFlowOverlay';
+import { PasswordStage, SSOStage } from './uia-stages';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+
+export const SUPPORTED_IN_APP_UIA_STAGES = [AuthType.Password, AuthType.Sso];
+
+export const pickUIAFlow = (uiaFlows: UIAFlow[]): UIAFlow | undefined => {
+  const passwordFlow = getUIAFlowForStages(uiaFlows, [AuthType.Password]);
+  if (passwordFlow) return passwordFlow;
+  return getUIAFlowForStages(uiaFlows, [AuthType.Sso]);
+};
+
+type ActionUIAProps = {
+  authData: IAuthData;
+  ongoingFlow: UIAFlow;
+  action: (authDict: AuthDict) => void;
+  onCancel: () => void;
+};
+export function ActionUIA({ authData, ongoingFlow, action, onCancel }: ActionUIAProps) {
+  const mx = useMatrixClient();
+  const completed = useUIACompleted(authData);
+  const { getStageToComplete } = useUIAFlow(authData, ongoingFlow);
+
+  const stageToComplete = getStageToComplete();
+
+  if (!stageToComplete) return null;
+  return (
+    <UIAFlowOverlay
+      currentStep={completed.length + 1}
+      stepCount={ongoingFlow.stages.length}
+      onCancel={onCancel}
+    >
+      {stageToComplete.type === AuthType.Password && (
+        <PasswordStage
+          userId={mx.getUserId()!}
+          stageData={stageToComplete}
+          onCancel={onCancel}
+          submitAuthDict={action}
+        />
+      )}
+      {stageToComplete.type === AuthType.Sso && stageToComplete.session && (
+        <SSOStage
+          ssoRedirectURL={mx.getFallbackAuthUrl(AuthType.Sso, stageToComplete.session)}
+          stageData={stageToComplete}
+          onCancel={onCancel}
+          submitAuthDict={action}
+        />
+      )}
+    </UIAFlowOverlay>
+  );
+}
+
+type ActionUIAFlowsLoaderProps = {
+  authData: IAuthData;
+  unsupported: () => ReactNode;
+  children: (ongoingFlow: UIAFlow) => ReactNode;
+};
+export function ActionUIAFlowsLoader({
+  authData,
+  unsupported,
+  children,
+}: ActionUIAFlowsLoaderProps) {
+  const supportedFlows = useSupportedUIAFlows(authData.flows ?? [], SUPPORTED_IN_APP_UIA_STAGES);
+  const ongoingFlow = supportedFlows.length > 0 ? supportedFlows[0] : undefined;
+
+  if (!ongoingFlow) return unsupported();
+
+  return children(ongoingFlow);
+}

src/app/components/AuthFlowsLoader.tsx

@@ -0,0 +1,64 @@
+import { ReactNode, useCallback, useEffect, useMemo } from 'react';
+import { MatrixError, createClient } from 'matrix-js-sdk';
+import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
+import { useAutoDiscoveryInfo } from '../hooks/useAutoDiscoveryInfo';
+import { promiseFulfilledResult, promiseRejectedResult } from '../utils/common';
+import {
+  AuthFlows,
+  RegisterFlowStatus,
+  RegisterFlowsResponse,
+  parseRegisterErrResp,
+} from '../hooks/useAuthFlows';
+
+type AuthFlowsLoaderProps = {
+  fallback?: () => ReactNode;
+  error?: (err: unknown) => ReactNode;
+  children: (authFlows: AuthFlows) => ReactNode;
+};
+export function AuthFlowsLoader({ fallback, error, children }: AuthFlowsLoaderProps) {
+  const autoDiscoveryInfo = useAutoDiscoveryInfo();
+  const baseUrl = autoDiscoveryInfo['m.homeserver'].base_url;
+
+  const mx = useMemo(() => createClient({ baseUrl }), [baseUrl]);
+
+  const [state, load] = useAsyncCallback(
+    useCallback(async () => {
+      const result = await Promise.allSettled([mx.loginFlows(), mx.registerRequest({})]);
+      const loginFlows = promiseFulfilledResult(result[0]);
+      const registerResp = promiseRejectedResult(result[1]) as MatrixError | undefined;
+      let registerFlows: RegisterFlowsResponse = { status: RegisterFlowStatus.InvalidRequest };
+
+      if (typeof registerResp === 'object' && registerResp.httpStatus) {
+        registerFlows = parseRegisterErrResp(registerResp);
+      }
+
+      if (!loginFlows) {
+        throw new Error('Missing auth flow!');
+      }
+      if ('errcode' in loginFlows) {
+        throw new Error('Failed to load auth flow!');
+      }
+
+      const authFlows: AuthFlows = {
+        loginFlows,
+        registerFlows,
+      };
+
+      return authFlows;
+    }, [mx])
+  );
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  if (state.status === AsyncStatus.Idle || state.status === AsyncStatus.Loading) {
+    return fallback?.();
+  }
+
+  if (state.status === AsyncStatus.Error) {
+    return error?.(state.error);
+  }
+
+  return children(state.data);
+}

src/app/components/BackRouteHandler.tsx

@@ -0,0 +1,86 @@
+import { ReactNode, useCallback } from 'react';
+import { matchPath, useLocation, useNavigate } from 'react-router-dom';
+import {
+  getDirectPath,
+  getExplorePath,
+  getHomePath,
+  getInboxPath,
+  getSpacePath,
+} from '../pages/pathUtils';
+import { DIRECT_PATH, EXPLORE_PATH, HOME_PATH, INBOX_PATH, SPACE_PATH } from '../pages/paths';
+
+type BackRouteHandlerProps = {
+  children: (onBack: () => void) => ReactNode;
+};
+export function BackRouteHandler({ children }: BackRouteHandlerProps) {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const goBack = useCallback(() => {
+    if (
+      matchPath(
+        {
+          path: HOME_PATH,
+          caseSensitive: true,
+          end: false,
+        },
+        location.pathname
+      )
+    ) {
+      navigate(getHomePath());
+      return;
+    }
+    if (
+      matchPath(
+        {
+          path: DIRECT_PATH,
+          caseSensitive: true,
+          end: false,
+        },
+        location.pathname
+      )
+    ) {
+      navigate(getDirectPath());
+      return;
+    }
+    const spaceMatch = matchPath(
+      {
+        path: SPACE_PATH,
+        caseSensitive: true,
+        end: false,
+      },
+      location.pathname
+    );
+    if (spaceMatch?.params.spaceIdOrAlias) {
+      navigate(getSpacePath(spaceMatch.params.spaceIdOrAlias));
+      return;
+    }
+    if (
+      matchPath(
+        {
+          path: EXPLORE_PATH,
+          caseSensitive: true,
+          end: false,
+        },
+        location.pathname
+      )
+    ) {
+      navigate(getExplorePath());
+      return;
+    }
+    if (
+      matchPath(
+        {
+          path: INBOX_PATH,
+          caseSensitive: true,
+          end: false,
+        },
+        location.pathname
+      )
+    ) {
+      navigate(getInboxPath());
+    }
+  }, [navigate, location]);
+
+  return children(goBack);
+}

src/app/components/BackupRestore.tsx

@@ -0,0 +1,281 @@
+import React, { MouseEventHandler, useCallback, useState } from 'react';
+import { useAtom } from 'jotai';
+import { CryptoApi, KeyBackupInfo } from 'matrix-js-sdk/lib/crypto-api';
+import {
+  Badge,
+  Box,
+  Button,
+  color,
+  config,
+  Icon,
+  IconButton,
+  Icons,
+  Menu,
+  percent,
+  PopOut,
+  ProgressBar,
+  RectCords,
+  Spinner,
+  Text,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { BackupProgressStatus, backupRestoreProgressAtom } from '../state/backupRestore';
+import { InfoCard } from './info-card';
+import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
+import {
+  useKeyBackupInfo,
+  useKeyBackupStatus,
+  useKeyBackupSync,
+  useKeyBackupTrust,
+} from '../hooks/useKeyBackup';
+import { stopPropagation } from '../utils/keyboard';
+import { useRestoreBackupOnVerification } from '../hooks/useRestoreBackupOnVerification';
+
+type BackupStatusProps = {
+  enabled: boolean;
+};
+function BackupStatus({ enabled }: BackupStatusProps) {
+  return (
+    <Box as="span" gap="100" alignItems="Center">
+      <Badge variant={enabled ? 'Success' : 'Critical'} fill="Solid" size="200" radii="Pill" />
+      <Text
+        as="span"
+        size="L400"
+        style={{ color: enabled ? color.Success.Main : color.Critical.Main }}
+      >
+        {enabled ? 'Connected' : 'Disconnected'}
+      </Text>
+    </Box>
+  );
+}
+type BackupSyncingProps = {
+  count: number;
+};
+function BackupSyncing({ count }: BackupSyncingProps) {
+  return (
+    <Box as="span" gap="100" alignItems="Center">
+      <Spinner size="50" variant="Primary" fill="Soft" />
+      <Text as="span" size="L400" style={{ color: color.Primary.Main }}>
+        Syncing ({count})
+      </Text>
+    </Box>
+  );
+}
+
+function BackupProgressFetching() {
+  return (
+    <Box grow="Yes" gap="200" alignItems="Center">
+      <Badge variant="Secondary" fill="Solid" radii="300">
+        <Text size="L400">Restoring: 0%</Text>
+      </Badge>
+      <Box grow="Yes" direction="Column">
+        <ProgressBar variant="Secondary" size="300" min={0} max={1} value={0} />
+      </Box>
+      <Spinner size="50" variant="Secondary" fill="Soft" />
+    </Box>
+  );
+}
+
+type BackupProgressProps = {
+  total: number;
+  downloaded: number;
+};
+function BackupProgress({ total, downloaded }: BackupProgressProps) {
+  return (
+    <Box grow="Yes" gap="200" alignItems="Center">
+      <Badge variant="Secondary" fill="Solid" radii="300">
+        <Text size="L400">Restoring: {`${Math.round(percent(0, total, downloaded))}%`}</Text>
+      </Badge>
+      <Box grow="Yes" direction="Column">
+        <ProgressBar variant="Secondary" size="300" min={0} max={total} value={downloaded} />
+      </Box>
+      <Badge variant="Secondary" fill="Soft" radii="Pill">
+        <Text size="L400">
+          {downloaded} / {total}
+        </Text>
+      </Badge>
+    </Box>
+  );
+}
+
+type BackupTrustInfoProps = {
+  crypto: CryptoApi;
+  backupInfo: KeyBackupInfo;
+};
+function BackupTrustInfo({ crypto, backupInfo }: BackupTrustInfoProps) {
+  const trust = useKeyBackupTrust(crypto, backupInfo);
+
+  if (!trust) return null;
+
+  return (
+    <Box direction="Column">
+      {trust.matchesDecryptionKey ? (
+        <Text size="T200" style={{ color: color.Success.Main }}>
+          <b>Backup has trusted decryption key.</b>
+        </Text>
+      ) : (
+        <Text size="T200" style={{ color: color.Critical.Main }}>
+          <b>Backup does not have trusted decryption key!</b>
+        </Text>
+      )}
+      {trust.trusted ? (
+        <Text size="T200" style={{ color: color.Success.Main }}>
+          <b>Backup has trusted by signature.</b>
+        </Text>
+      ) : (
+        <Text size="T200" style={{ color: color.Critical.Main }}>
+          <b>Backup does not have trusted signature!</b>
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+type BackupRestoreTileProps = {
+  crypto: CryptoApi;
+};
+export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
+  const [restoreProgress, setRestoreProgress] = useAtom(backupRestoreProgressAtom);
+  const restoring =
+    restoreProgress.status === BackupProgressStatus.Fetching ||
+    restoreProgress.status === BackupProgressStatus.Loading;
+
+  const backupEnabled = useKeyBackupStatus(crypto);
+  const backupInfo = useKeyBackupInfo(crypto);
+  const [remainingSession, syncFailure] = useKeyBackupSync();
+
+  const [menuCords, setMenuCords] = useState<RectCords>();
+
+  const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const [restoreState, restoreBackup] = useAsyncCallback<void, Error, []>(
+    useCallback(async () => {
+      await crypto.restoreKeyBackup({
+        progressCallback(progress) {
+          setRestoreProgress(progress);
+        },
+      });
+    }, [crypto, setRestoreProgress])
+  );
+
+  const handleRestore = () => {
+    setMenuCords(undefined);
+    restoreBackup();
+  };
+
+  return (
+    <InfoCard
+      variant="Surface"
+      title="Encryption Backup"
+      after={
+        <Box alignItems="Center" gap="200">
+          {remainingSession === 0 ? (
+            <BackupStatus enabled={backupEnabled} />
+          ) : (
+            <BackupSyncing count={remainingSession} />
+          )}
+          <IconButton
+            aria-pressed={!!menuCords}
+            size="300"
+            variant="Surface"
+            radii="300"
+            onClick={handleMenu}
+          >
+            <Icon size="100" src={Icons.VerticalDots} />
+          </IconButton>
+          <PopOut
+            anchor={menuCords}
+            offset={5}
+            position="Bottom"
+            align="End"
+            content={
+              <FocusTrap
+                focusTrapOptions={{
+                  initialFocus: false,
+                  onDeactivate: () => setMenuCords(undefined),
+                  clickOutsideDeactivates: true,
+                  isKeyForward: (evt: KeyboardEvent) =>
+                    evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+                  isKeyBackward: (evt: KeyboardEvent) =>
+                    evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
+                  escapeDeactivates: stopPropagation,
+                }}
+              >
+                <Menu
+                  style={{
+                    padding: config.space.S100,
+                  }}
+                >
+                  <Box direction="Column" gap="100">
+                    <Box direction="Column" gap="200">
+                      <InfoCard
+                        variant="SurfaceVariant"
+                        title="Backup Details"
+                        description={
+                          <>
+                            <span>Version: {backupInfo?.version ?? 'NIL'}</span>
+                            <br />
+                            <span>Keys: {backupInfo?.count ?? 'NIL'}</span>
+                          </>
+                        }
+                      />
+                    </Box>
+                    <Button
+                      size="300"
+                      variant="Success"
+                      radii="300"
+                      aria-disabled={restoreState.status === AsyncStatus.Loading || restoring}
+                      onClick={
+                        restoreState.status === AsyncStatus.Loading || restoring
+                          ? undefined
+                          : handleRestore
+                      }
+                      before={<Icon size="100" src={Icons.Download} />}
+                    >
+                      <Text size="B300">Restore Backup</Text>
+                    </Button>
+                  </Box>
+                </Menu>
+              </FocusTrap>
+            }
+          />
+        </Box>
+      }
+    >
+      {syncFailure && (
+        <Text size="T200" style={{ color: color.Critical.Main }}>
+          <b>{syncFailure}</b>
+        </Text>
+      )}
+      {!backupEnabled && backupInfo === null && (
+        <Text size="T200" style={{ color: color.Critical.Main }}>
+          <b>No backup present on server!</b>
+        </Text>
+      )}
+      {!syncFailure && !backupEnabled && backupInfo && (
+        <BackupTrustInfo crypto={crypto} backupInfo={backupInfo} />
+      )}
+      {restoreState.status === AsyncStatus.Loading && !restoring && <BackupProgressFetching />}
+      {restoreProgress.status === BackupProgressStatus.Fetching && <BackupProgressFetching />}
+      {restoreProgress.status === BackupProgressStatus.Loading && (
+        <BackupProgress
+          total={restoreProgress.data.total}
+          downloaded={restoreProgress.data.downloaded}
+        />
+      )}
+      {restoreState.status === AsyncStatus.Error && (
+        <Text size="T200" style={{ color: color.Critical.Main }}>
+          <b>{restoreState.error.message}</b>
+        </Text>
+      )}
+    </InfoCard>
+  );
+}
+
+export function AutoRestoreBackupOnVerification() {
+  useRestoreBackupOnVerification();
+
+  return null;
+}

src/app/components/CapabilitiesAndMediaConfigLoader.tsx

@@ -0,0 +1,36 @@
+import { ReactNode, useCallback, useEffect } from 'react';
+import { Capabilities } from 'matrix-js-sdk';
+import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+import { MediaConfig } from '../hooks/useMediaConfig';
+import { promiseFulfilledResult } from '../utils/common';
+
+type CapabilitiesAndMediaConfigLoaderProps = {
+  children: (capabilities?: Capabilities, mediaConfig?: MediaConfig) => ReactNode;
+};
+export function CapabilitiesAndMediaConfigLoader({
+  children,
+}: CapabilitiesAndMediaConfigLoaderProps) {
+  const mx = useMatrixClient();
+
+  const [state, load] = useAsyncCallback<
+    [Capabilities | undefined, MediaConfig | undefined],
+    unknown,
+    []
+  >(
+    useCallback(async () => {
+      const result = await Promise.allSettled([mx.getCapabilities(), mx.getMediaConfig()]);
+      const capabilities = promiseFulfilledResult(result[0]);
+      const mediaConfig = promiseFulfilledResult(result[1]);
+      return [capabilities, mediaConfig];
+    }, [mx])
+  );
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const [capabilities, mediaConfig] =
+    state.status === AsyncStatus.Success ? state.data : [undefined, undefined];
+  return children(capabilities, mediaConfig);
+}

src/app/components/CapabilitiesLoader.tsx

@@ -0,0 +1,19 @@
+import { ReactNode, useCallback, useEffect } from 'react';
+import { Capabilities } from 'matrix-js-sdk';
+import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+
+type CapabilitiesLoaderProps = {
+  children: (capabilities: Capabilities | undefined) => ReactNode;
+};
+export function CapabilitiesLoader({ children }: CapabilitiesLoaderProps) {
+  const mx = useMatrixClient();
+
+  const [state, load] = useAsyncCallback(useCallback(() => mx.getCapabilities(), [mx]));
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  return children(state.status === AsyncStatus.Success ? state.data : undefined);
+}

src/app/components/ClientConfigLoader.tsx

@@ -0,0 +1,38 @@
+import { ReactNode, useCallback, useEffect, useState } from 'react';
+import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
+import { ClientConfig } from '../hooks/useClientConfig';
+import { trimTrailingSlash } from '../utils/common';
+
+const getClientConfig = async (): Promise<ClientConfig> => {
+  const url = `${trimTrailingSlash(import.meta.env.BASE_URL)}/config.json`;
+  const config = await fetch(url, { method: 'GET' });
+  return config.json();
+};
+
+type ClientConfigLoaderProps = {
+  fallback?: () => ReactNode;
+  error?: (err: unknown, retry: () => void, ignore: () => void) => ReactNode;
+  children: (config: ClientConfig) => ReactNode;
+};
+export function ClientConfigLoader({ fallback, error, children }: ClientConfigLoaderProps) {
+  const [state, load] = useAsyncCallback(getClientConfig);
+  const [ignoreError, setIgnoreError] = useState(false);
+
+  const ignoreCallback = useCallback(() => setIgnoreError(true), []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  if (state.status === AsyncStatus.Idle || state.status === AsyncStatus.Loading) {
+    return fallback?.();
+  }
+
+  if (!ignoreError && state.status === AsyncStatus.Error) {
+    return error?.(state.error, load, ignoreCallback);
+  }
+
+  const config: ClientConfig = state.status === AsyncStatus.Success ? state.data : {};
+
+  return children(config);
+}

src/app/components/ConfirmPasswordMatch.tsx

@@ -0,0 +1,35 @@
+import { ReactNode, RefObject, useCallback, useRef, useState } from 'react';
+import { useDebounce } from '../hooks/useDebounce';
+
+type ConfirmPasswordMatchProps = {
+  initialValue: boolean;
+  children: (
+    match: boolean,
+    doMatch: () => void,
+    passRef: RefObject<HTMLInputElement>,
+    confPassRef: RefObject<HTMLInputElement>
+  ) => ReactNode;
+};
+export function ConfirmPasswordMatch({ initialValue, children }: ConfirmPasswordMatchProps) {
+  const [match, setMatch] = useState(initialValue);
+  const passRef = useRef<HTMLInputElement>(null);
+  const confPassRef = useRef<HTMLInputElement>(null);
+
+  const doMatch = useDebounce(
+    useCallback(() => {
+      const pass = passRef.current?.value;
+      const confPass = confPassRef.current?.value;
+      if (!confPass) {
+        setMatch(initialValue);
+        return;
+      }
+      setMatch(pass === confPass);
+    }, [initialValue]),
+    {
+      wait: 500,
+      immediate: false,
+    }
+  );
+
+  return children(match, doMatch, passRef, confPassRef);
+}

src/app/components/DeviceVerification.tsx

@@ -0,0 +1,318 @@
+import {
+  ShowSasCallbacks,
+  VerificationPhase,
+  VerificationRequest,
+  Verifier,
+} from 'matrix-js-sdk/lib/crypto-api';
+import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
+import { VerificationMethod } from 'matrix-js-sdk/lib/types';
+import {
+  Box,
+  Button,
+  config,
+  Dialog,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Spinner,
+  Text,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import {
+  useVerificationRequestPhase,
+  useVerificationRequestReceived,
+  useVerifierCancel,
+  useVerifierShowSas,
+} from '../hooks/useVerificationRequest';
+import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
+import { ContainerColor } from '../styles/ContainerColor.css';
+
+const DialogHeaderStyles: CSSProperties = {
+  padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+  borderBottomWidth: config.borderWidth.B300,
+};
+
+type WaitingMessageProps = {
+  message: string;
+};
+function WaitingMessage({ message }: WaitingMessageProps) {
+  return (
+    <Box alignItems="Center" gap="200">
+      <Spinner variant="Secondary" size="200" />
+      <Text size="T300">{message}</Text>
+    </Box>
+  );
+}
+
+type VerificationUnexpectedProps = { message: string; onClose: () => void };
+function VerificationUnexpected({ message, onClose }: VerificationUnexpectedProps) {
+  return (
+    <Box direction="Column" gap="400">
+      <Text>{message}</Text>
+      <Button variant="Secondary" fill="Soft" onClick={onClose}>
+        <Text size="B400">Close</Text>
+      </Button>
+    </Box>
+  );
+}
+
+function VerificationWaitAccept() {
+  return (
+    <Box direction="Column" gap="400">
+      <Text>Please accept the request from other device.</Text>
+      <WaitingMessage message="Waiting for request to be accepted..." />
+    </Box>
+  );
+}
+
+type VerificationAcceptProps = {
+  onAccept: () => Promise<void>;
+};
+function VerificationAccept({ onAccept }: VerificationAcceptProps) {
+  const [acceptState, accept] = useAsyncCallback(onAccept);
+
+  const accepting = acceptState.status === AsyncStatus.Loading;
+  return (
+    <Box direction="Column" gap="400">
+      <Text>Click accept to start the verification process.</Text>
+      <Button
+        variant="Primary"
+        fill="Solid"
+        onClick={accept}
+        before={accepting && <Spinner size="100" variant="Primary" fill="Solid" />}
+        disabled={accepting}
+      >
+        <Text size="B400">Accept</Text>
+      </Button>
+    </Box>
+  );
+}
+
+function VerificationWaitStart() {
+  return (
+    <Box direction="Column" gap="400">
+      <Text>Verification request has been accepted.</Text>
+      <WaitingMessage message="Waiting for the response from other device..." />
+    </Box>
+  );
+}
+
+type VerificationStartProps = {
+  onStart: () => Promise<void>;
+};
+function AutoVerificationStart({ onStart }: VerificationStartProps) {
+  useEffect(() => {
+    onStart();
+  }, [onStart]);
+
+  return (
+    <Box direction="Column" gap="400">
+      <WaitingMessage message="Starting verification using emoji comparison..." />
+    </Box>
+  );
+}
+
+function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
+  const [confirmState, confirm] = useAsyncCallback(useCallback(() => sasData.confirm(), [sasData]));
+
+  const confirming =
+    confirmState.status === AsyncStatus.Loading || confirmState.status === AsyncStatus.Success;
+
+  return (
+    <Box direction="Column" gap="400">
+      <Text>Confirm the emoji below are displayed on both devices, in the same order:</Text>
+      <Box
+        className={ContainerColor({ variant: 'SurfaceVariant' })}
+        style={{
+          borderRadius: config.radii.R400,
+          padding: config.space.S500,
+        }}
+        gap="700"
+        wrap="Wrap"
+        justifyContent="Center"
+      >
+        {sasData.sas.emoji?.map(([emoji, name], index) => (
+          <Box
+            // eslint-disable-next-line react/no-array-index-key
+            key={`${emoji}${name}${index}`}
+            direction="Column"
+            gap="100"
+            justifyContent="Center"
+            alignItems="Center"
+          >
+            <Text size="H1">{emoji}</Text>
+            <Text size="T200">{name}</Text>
+          </Box>
+        ))}
+      </Box>
+      <Box direction="Column" gap="200">
+        <Button
+          variant="Primary"
+          fill="Soft"
+          onClick={confirm}
+          disabled={confirming}
+          before={confirming && <Spinner size="100" variant="Primary" />}
+        >
+          <Text size="B400">They Match</Text>
+        </Button>
+        <Button
+          variant="Primary"
+          fill="Soft"
+          onClick={() => sasData.mismatch()}
+          disabled={confirming}
+        >
+          <Text size="B400">Do not Match</Text>
+        </Button>
+      </Box>
+    </Box>
+  );
+}
+
+type SasVerificationProps = {
+  verifier: Verifier;
+  onCancel: () => void;
+};
+function SasVerification({ verifier, onCancel }: SasVerificationProps) {
+  const [sasData, setSasData] = useState<ShowSasCallbacks>();
+
+  useVerifierShowSas(verifier, setSasData);
+  useVerifierCancel(verifier, onCancel);
+
+  useEffect(() => {
+    verifier.verify();
+  }, [verifier]);
+
+  if (sasData) {
+    return <CompareEmoji sasData={sasData} />;
+  }
+
+  return (
+    <Box direction="Column" gap="400">
+      <WaitingMessage message="Starting verification using emoji comparison..." />
+    </Box>
+  );
+}
+
+type VerificationDoneProps = {
+  onExit: () => void;
+};
+function VerificationDone({ onExit }: VerificationDoneProps) {
+  return (
+    <Box direction="Column" gap="400">
+      <div>
+        <Text>Your device is verified.</Text>
+      </div>
+      <Button variant="Primary" fill="Solid" onClick={onExit}>
+        <Text size="B400">Okay</Text>
+      </Button>
+    </Box>
+  );
+}
+
+type VerificationCanceledProps = {
+  onClose: () => void;
+};
+function VerificationCanceled({ onClose }: VerificationCanceledProps) {
+  return (
+    <Box direction="Column" gap="400">
+      <Text>Verification has been canceled.</Text>
+      <Button variant="Secondary" fill="Soft" onClick={onClose}>
+        <Text size="B400">Close</Text>
+      </Button>
+    </Box>
+  );
+}
+
+type DeviceVerificationProps = {
+  request: VerificationRequest;
+  onExit: () => void;
+};
+export function DeviceVerification({ request, onExit }: DeviceVerificationProps) {
+  const phase = useVerificationRequestPhase(request);
+
+  const handleCancel = useCallback(() => {
+    if (request.phase !== VerificationPhase.Done && request.phase !== VerificationPhase.Cancelled) {
+      request.cancel();
+    }
+    onExit();
+  }, [request, onExit]);
+
+  const handleAccept = useCallback(() => request.accept(), [request]);
+  const handleStart = useCallback(async () => {
+    await request.startVerification(VerificationMethod.Sas);
+  }, [request]);
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            clickOutsideDeactivates: false,
+            escapeDeactivates: false,
+          }}
+        >
+          <Dialog variant="Surface">
+            <Header style={DialogHeaderStyles} variant="Surface" size="500">
+              <Box grow="Yes">
+                <Text size="H4">Device Verification</Text>
+              </Box>
+              <IconButton size="300" radii="300" onClick={handleCancel}>
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Header>
+            <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+              {phase === VerificationPhase.Requested &&
+                (request.initiatedByMe ? (
+                  <VerificationWaitAccept />
+                ) : (
+                  <VerificationAccept onAccept={handleAccept} />
+                ))}
+              {phase === VerificationPhase.Ready &&
+                (request.initiatedByMe ? (
+                  <AutoVerificationStart onStart={handleStart} />
+                ) : (
+                  <VerificationWaitStart />
+                ))}
+              {phase === VerificationPhase.Started &&
+                (request.verifier ? (
+                  <SasVerification verifier={request.verifier} onCancel={handleCancel} />
+                ) : (
+                  <VerificationUnexpected
+                    message="Unexpected Error! Verification is started but verifier is missing."
+                    onClose={handleCancel}
+                  />
+                ))}
+              {phase === VerificationPhase.Done && <VerificationDone onExit={onExit} />}
+              {phase === VerificationPhase.Cancelled && (
+                <VerificationCanceled onClose={handleCancel} />
+              )}
+            </Box>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}
+
+export function ReceiveSelfDeviceVerification() {
+  const [request, setRequest] = useState<VerificationRequest>();
+
+  useVerificationRequestReceived(setRequest);
+
+  const handleExit = useCallback(() => {
+    setRequest(undefined);
+  }, []);
+
+  if (!request) return null;
+
+  if (!request.isSelfVerification) {
+    return null;
+  }
+
+  return <DeviceVerification request={request} onExit={handleExit} />;
+}

src/app/components/DeviceVerificationSetup.tsx

@@ -0,0 +1,375 @@
+import React, { FormEventHandler, forwardRef, useCallback, useState } from 'react';
+import {
+  Dialog,
+  Header,
+  Box,
+  Text,
+  IconButton,
+  Icon,
+  Icons,
+  config,
+  Button,
+  Chip,
+  color,
+  Spinner,
+} from 'folds';
+import FileSaver from 'file-saver';
+import to from 'await-to-js';
+import { AuthDict, IAuthData, MatrixError, UIAuthCallback } from 'matrix-js-sdk';
+import { PasswordInput } from './password-input';
+import { ContainerColor } from '../styles/ContainerColor.css';
+import { copyToClipboard } from '../utils/dom';
+import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
+import { clearSecretStorageKeys } from '../../client/state/secretStorageKeys';
+import { ActionUIA, ActionUIAFlowsLoader } from './ActionUIA';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+import { useAlive } from '../hooks/useAlive';
+import { UseStateProvider } from './UseStateProvider';
+
+type UIACallback<T> = (
+  authDict: AuthDict | null
+) => Promise<[IAuthData, undefined] | [undefined, T]>;
+
+type PerformAction<T> = (authDict: AuthDict | null) => Promise<T>;
+
+type UIAAction<T> = {
+  authData: IAuthData;
+  callback: UIACallback<T>;
+  cancelCallback: () => void;
+};
+
+function makeUIAAction<T>(
+  authData: IAuthData,
+  performAction: PerformAction<T>,
+  resolve: (data: T) => void,
+  reject: (error?: any) => void
+): UIAAction<T> {
+  const action: UIAAction<T> = {
+    authData,
+    callback: async (authDict) => {
+      const [error, data] = await to<T, MatrixError | Error>(performAction(authDict));
+
+      if (error instanceof MatrixError && error.httpStatus === 401) {
+        return [error.data as IAuthData, undefined];
+      }
+
+      if (error) {
+        reject(error);
+        throw error;
+      }
+
+      resolve(data);
+      return [undefined, data];
+    },
+    cancelCallback: reject,
+  };
+
+  return action;
+}
+
+type SetupVerificationProps = {
+  onComplete: (recoveryKey: string) => void;
+};
+function SetupVerification({ onComplete }: SetupVerificationProps) {
+  const mx = useMatrixClient();
+  const alive = useAlive();
+
+  const [uiaAction, setUIAAction] = useState<UIAAction<void>>();
+  const [nextAuthData, setNextAuthData] = useState<IAuthData | null>(); // null means no next action.
+
+  const handleAction = useCallback(
+    async (authDict: AuthDict) => {
+      if (!uiaAction) {
+        throw new Error('Unexpected Error! UIA action is perform without data.');
+      }
+      if (alive()) {
+        setNextAuthData(null);
+      }
+      const [authData] = await uiaAction.callback(authDict);
+
+      if (alive() && authData) {
+        setNextAuthData(authData);
+      }
+    },
+    [uiaAction, alive]
+  );
+
+  const resetUIA = useCallback(() => {
+    if (!alive()) return;
+    setUIAAction(undefined);
+    setNextAuthData(undefined);
+  }, [alive]);
+
+  const authUploadDeviceSigningKeys: UIAuthCallback<void> = useCallback(
+    (makeRequest) =>
+      new Promise<void>((resolve, reject) => {
+        makeRequest(null)
+          .then(() => {
+            resolve();
+            resetUIA();
+          })
+          .catch((error) => {
+            if (error instanceof MatrixError && error.httpStatus === 401) {
+              const authData = error.data as IAuthData;
+              const action = makeUIAAction(
+                authData,
+                makeRequest as PerformAction<void>,
+                resolve,
+                (err) => {
+                  resetUIA();
+                  reject(err);
+                }
+              );
+              if (alive()) {
+                setUIAAction(action);
+              } else {
+                reject(new Error('Authentication failed! Failed to setup device verification.'));
+              }
+              return;
+            }
+            reject(error);
+          });
+      }),
+    [alive, resetUIA]
+  );
+
+  const [setupState, setup] = useAsyncCallback<void, Error, [string | undefined]>(
+    useCallback(
+      async (passphrase) => {
+        const crypto = mx.getCrypto();
+        if (!crypto) throw new Error('Unexpected Error! Crypto module not found!');
+
+        const recoveryKeyData = await crypto.createRecoveryKeyFromPassphrase(passphrase);
+        if (!recoveryKeyData.encodedPrivateKey) {
+          throw new Error('Unexpected Error! Failed to create recovery key.');
+        }
+        clearSecretStorageKeys();
+
+        await crypto.bootstrapSecretStorage({
+          createSecretStorageKey: async () => recoveryKeyData,
+          setupNewSecretStorage: true,
+        });
+
+        await crypto.bootstrapCrossSigning({
+          authUploadDeviceSigningKeys,
+          setupNewCrossSigning: true,
+        });
+
+        await crypto.resetKeyBackup();
+
+        onComplete(recoveryKeyData.encodedPrivateKey);
+      },
+      [mx, onComplete, authUploadDeviceSigningKeys]
+    )
+  );
+
+  const loading = setupState.status === AsyncStatus.Loading;
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    if (loading) return;
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const passphraseInput = target?.passphraseInput as HTMLInputElement | undefined;
+    let passphrase: string | undefined;
+    if (passphraseInput && passphraseInput.value.length > 0) {
+      passphrase = passphraseInput.value;
+    }
+
+    setup(passphrase);
+  };
+
+  return (
+    <Box as="form" onSubmit={handleSubmit} direction="Column" gap="400">
+      <Text size="T300">
+        Generate a <b>Recovery Key</b> for verifying identity if you do not have access to other
+        devices. Additionally, setup a passphrase as a memorable alternative.
+      </Text>
+      <Box direction="Column" gap="100">
+        <Text size="L400">Passphrase (Optional)</Text>
+        <PasswordInput name="passphraseInput" size="400" readOnly={loading} />
+      </Box>
+      <Button
+        type="submit"
+        disabled={loading}
+        before={loading && <Spinner size="200" variant="Primary" fill="Solid" />}
+      >
+        <Text size="B400">Continue</Text>
+      </Button>
+      {setupState.status === AsyncStatus.Error && (
+        <Text size="T200" style={{ color: color.Critical.Main }}>
+          <b>{setupState.error ? setupState.error.message : 'Unexpected Error!'}</b>
+        </Text>
+      )}
+      {nextAuthData !== null && uiaAction && (
+        <ActionUIAFlowsLoader
+          authData={nextAuthData ?? uiaAction.authData}
+          unsupported={() => (
+            <Text size="T200">
+              Authentication steps to perform this action are not supported by client.
+            </Text>
+          )}
+        >
+          {(ongoingFlow) => (
+            <ActionUIA
+              authData={nextAuthData ?? uiaAction.authData}
+              ongoingFlow={ongoingFlow}
+              action={handleAction}
+              onCancel={uiaAction.cancelCallback}
+            />
+          )}
+        </ActionUIAFlowsLoader>
+      )}
+    </Box>
+  );
+}
+
+type RecoveryKeyDisplayProps = {
+  recoveryKey: string;
+};
+function RecoveryKeyDisplay({ recoveryKey }: RecoveryKeyDisplayProps) {
+  const [show, setShow] = useState(false);
+
+  const handleCopy = () => {
+    copyToClipboard(recoveryKey);
+  };
+
+  const handleDownload = () => {
+    const blob = new Blob([recoveryKey], {
+      type: 'text/plain;charset=us-ascii',
+    });
+    FileSaver.saveAs(blob, 'recovery-key.txt');
+  };
+
+  const safeToDisplayKey = show ? recoveryKey : recoveryKey.replace(/[^\s]/g, '*');
+
+  return (
+    <Box direction="Column" gap="400">
+      <Text size="T300">
+        Store the Recovery Key in a safe place for future use, as you will need it to verify your
+        identity if you do not have access to other devices.
+      </Text>
+      <Box direction="Column" gap="100">
+        <Text size="L400">Recovery Key</Text>
+        <Box
+          className={ContainerColor({ variant: 'SurfaceVariant' })}
+          style={{
+            padding: config.space.S300,
+            borderRadius: config.radii.R400,
+          }}
+          alignItems="Center"
+          justifyContent="Center"
+          gap="400"
+        >
+          <Text style={{ fontFamily: 'monospace' }} size="T200" priority="300">
+            {safeToDisplayKey}
+          </Text>
+          <Chip onClick={() => setShow(!show)} variant="Secondary" radii="Pill">
+            <Text size="B300">{show ? 'Hide' : 'Show'}</Text>
+          </Chip>
+        </Box>
+      </Box>
+      <Box direction="Column" gap="200">
+        <Button onClick={handleCopy}>
+          <Text size="B400">Copy</Text>
+        </Button>
+        <Button onClick={handleDownload} fill="Soft">
+          <Text size="B400">Download</Text>
+        </Button>
+      </Box>
+    </Box>
+  );
+}
+
+type DeviceVerificationSetupProps = {
+  onCancel: () => void;
+};
+export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerificationSetupProps>(
+  ({ onCancel }, ref) => {
+    const [recoveryKey, setRecoveryKey] = useState<string>();
+
+    return (
+      <Dialog ref={ref}>
+        <Header
+          style={{
+            padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+            borderBottomWidth: config.borderWidth.B300,
+          }}
+          variant="Surface"
+          size="500"
+        >
+          <Box grow="Yes">
+            <Text size="H4">Setup Device Verification</Text>
+          </Box>
+          <IconButton size="300" radii="300" onClick={onCancel}>
+            <Icon src={Icons.Cross} />
+          </IconButton>
+        </Header>
+        <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+          {recoveryKey ? (
+            <RecoveryKeyDisplay recoveryKey={recoveryKey} />
+          ) : (
+            <SetupVerification onComplete={setRecoveryKey} />
+          )}
+        </Box>
+      </Dialog>
+    );
+  }
+);
+type DeviceVerificationResetProps = {
+  onCancel: () => void;
+};
+export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerificationResetProps>(
+  ({ onCancel }, ref) => {
+    const [reset, setReset] = useState(false);
+
+    return (
+      <Dialog ref={ref}>
+        <Header
+          style={{
+            padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+            borderBottomWidth: config.borderWidth.B300,
+          }}
+          variant="Surface"
+          size="500"
+        >
+          <Box grow="Yes">
+            <Text size="H4">Reset Device Verification</Text>
+          </Box>
+          <IconButton size="300" radii="300" onClick={onCancel}>
+            <Icon src={Icons.Cross} />
+          </IconButton>
+        </Header>
+        {reset ? (
+          <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+            <UseStateProvider initial={undefined}>
+              {(recoveryKey: string | undefined, setRecoveryKey) =>
+                recoveryKey ? (
+                  <RecoveryKeyDisplay recoveryKey={recoveryKey} />
+                ) : (
+                  <SetupVerification onComplete={setRecoveryKey} />
+                )
+              }
+            </UseStateProvider>
+          </Box>
+        ) : (
+          <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+            <Box direction="Column" gap="200">
+              <Text size="H1">✋🧑‍🚒🤚</Text>
+              <Text size="T300">Resetting device verification is permanent.</Text>
+              <Text size="T300">
+                Anyone you have verified with will see security alerts and your encryption backup
+                will be lost. You almost certainly do not want to do this, unless you have lost{' '}
+                <b>Recovery Key</b> or <b>Recovery Passphrase</b> and every device you can verify
+                from.
+              </Text>
+            </Box>
+            <Button variant="Critical" onClick={() => setReset(true)}>
+              <Text size="B400">Reset</Text>
+            </Button>
+          </Box>
+        )}
+      </Dialog>
+    );
+  }
+);

src/app/components/DeviceVerificationStatus.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { CryptoApi } from 'matrix-js-sdk/lib/crypto-api';
+import {
+  useDeviceVerificationStatus,
+  VerificationStatus,
+} from '../hooks/useDeviceVerificationStatus';
+
+type DeviceVerificationStatusProps = {
+  crypto?: CryptoApi;
+  userId: string;
+  deviceId: string;
+  children: (verificationStatus: VerificationStatus) => ReactNode;
+};
+
+export function DeviceVerificationStatus({
+  crypto,
+  userId,
+  deviceId,
+  children,
+}: DeviceVerificationStatusProps) {
+  const status = useDeviceVerificationStatus(crypto, userId, deviceId);
+
+  return children(status);
+}

src/app/components/LogoutDialog.tsx

@@ -0,0 +1,89 @@
+import React, { forwardRef, useCallback } from 'react';
+import { Dialog, Header, config, Box, Text, Button, Spinner, color } from 'folds';
+import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
+import { logoutClient } from '../../client/initMatrix';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+import { useCrossSigningActive } from '../hooks/useCrossSigning';
+import { InfoCard } from './info-card';
+import {
+  useDeviceVerificationStatus,
+  VerificationStatus,
+} from '../hooks/useDeviceVerificationStatus';
+
+type LogoutDialogProps = {
+  handleClose: () => void;
+};
+export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
+  ({ handleClose }, ref) => {
+    const mx = useMatrixClient();
+    const hasEncryptedRoom = !!mx.getRooms().find((room) => room.hasEncryptionStateEvent());
+    const crossSigningActive = useCrossSigningActive();
+    const verificationStatus = useDeviceVerificationStatus(
+      mx.getCrypto(),
+      mx.getSafeUserId(),
+      mx.getDeviceId() ?? undefined
+    );
+
+    const [logoutState, logout] = useAsyncCallback<void, Error, []>(
+      useCallback(async () => {
+        await logoutClient(mx);
+      }, [mx])
+    );
+
+    const ongoingLogout = logoutState.status === AsyncStatus.Loading;
+
+    return (
+      <Dialog variant="Surface" ref={ref}>
+        <Header
+          style={{
+            padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+            borderBottomWidth: config.borderWidth.B300,
+          }}
+          variant="Surface"
+          size="500"
+        >
+          <Box grow="Yes">
+            <Text size="H4">Logout</Text>
+          </Box>
+        </Header>
+        <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+          {hasEncryptedRoom &&
+            (crossSigningActive ? (
+              verificationStatus === VerificationStatus.Unverified && (
+                <InfoCard
+                  variant="Critical"
+                  title="Unverified Device"
+                  description="Verify your device before logging out to save your encrypted messages."
+                />
+              )
+            ) : (
+              <InfoCard
+                variant="Critical"
+                title="Alert"
+                description="Enable device verification or export your encrypted data from settings to avoid losing access to your messages."
+              />
+            ))}
+          <Text priority="400">You’re about to log out. Are you sure?</Text>
+          {logoutState.status === AsyncStatus.Error && (
+            <Text style={{ color: color.Critical.Main }} size="T300">
+              Failed to logout! {logoutState.error.message}
+            </Text>
+          )}
+          <Box direction="Column" gap="200">
+            <Button
+              variant="Critical"
+              onClick={logout}
+              disabled={ongoingLogout}
+              before={ongoingLogout && <Spinner variant="Critical" fill="Solid" size="200" />}
+            >
+              <Text size="B400">Logout</Text>
+            </Button>
+            <Button variant="Secondary" fill="Soft" onClick={handleClose} disabled={ongoingLogout}>
+              <Text size="B400">Cancel</Text>
+            </Button>
+          </Box>
+        </Box>
+      </Dialog>
+    );
+  }
+);

src/app/components/ManualVerification.tsx

@@ -0,0 +1,199 @@
+import React, { MouseEventHandler, ReactNode, useCallback, useState } from 'react';
+import {
+  Box,
+  Text,
+  Chip,
+  Icon,
+  Icons,
+  RectCords,
+  PopOut,
+  Menu,
+  config,
+  MenuItem,
+  color,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { stopPropagation } from '../utils/keyboard';
+import { SettingTile } from './setting-tile';
+import { SecretStorageKeyContent } from '../../types/matrix/accountData';
+import { SecretStorageRecoveryKey, SecretStorageRecoveryPassphrase } from './SecretStorage';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
+import { storePrivateKey } from '../../client/state/secretStorageKeys';
+
+export enum ManualVerificationMethod {
+  RecoveryPassphrase = 'passphrase',
+  RecoveryKey = 'key',
+}
+type ManualVerificationMethodSwitcherProps = {
+  value: ManualVerificationMethod;
+  onChange: (value: ManualVerificationMethod) => void;
+};
+export function ManualVerificationMethodSwitcher({
+  value,
+  onChange,
+}: ManualVerificationMethodSwitcherProps) {
+  const [menuCords, setMenuCords] = useState<RectCords>();
+
+  const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const handleSelect = (method: ManualVerificationMethod) => {
+    setMenuCords(undefined);
+    onChange(method);
+  };
+
+  return (
+    <>
+      <Chip
+        type="button"
+        variant="Secondary"
+        fill="Soft"
+        radii="Pill"
+        before={<Icon size="100" src={Icons.ChevronBottom} />}
+        onClick={handleMenu}
+      >
+        <Text as="span" size="B300">
+          {value === ManualVerificationMethod.RecoveryPassphrase && 'Recovery Passphrase'}
+          {value === ManualVerificationMethod.RecoveryKey && 'Recovery Key'}
+        </Text>
+      </Chip>
+      <PopOut
+        anchor={menuCords}
+        offset={5}
+        position="Bottom"
+        align="End"
+        content={
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: () => setMenuCords(undefined),
+              clickOutsideDeactivates: true,
+              isKeyForward: (evt: KeyboardEvent) =>
+                evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+              isKeyBackward: (evt: KeyboardEvent) =>
+                evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Menu>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+                <MenuItem
+                  size="300"
+                  variant="Surface"
+                  aria-selected={value === ManualVerificationMethod.RecoveryPassphrase}
+                  radii="300"
+                  onClick={() => handleSelect(ManualVerificationMethod.RecoveryPassphrase)}
+                >
+                  <Box grow="Yes">
+                    <Text size="T300">Recovery Passphrase</Text>
+                  </Box>
+                </MenuItem>
+                <MenuItem
+                  size="300"
+                  variant="Surface"
+                  aria-selected={value === ManualVerificationMethod.RecoveryKey}
+                  radii="300"
+                  onClick={() => handleSelect(ManualVerificationMethod.RecoveryKey)}
+                >
+                  <Box grow="Yes">
+                    <Text size="T300">Recovery Key</Text>
+                  </Box>
+                </MenuItem>
+              </Box>
+            </Menu>
+          </FocusTrap>
+        }
+      />
+    </>
+  );
+}
+
+type ManualVerificationTileProps = {
+  secretStorageKeyId: string;
+  secretStorageKeyContent: SecretStorageKeyContent;
+  options?: ReactNode;
+};
+export function ManualVerificationTile({
+  secretStorageKeyId,
+  secretStorageKeyContent,
+  options,
+}: ManualVerificationTileProps) {
+  const mx = useMatrixClient();
+
+  const hasPassphrase = !!secretStorageKeyContent.passphrase;
+  const [method, setMethod] = useState(
+    hasPassphrase
+      ? ManualVerificationMethod.RecoveryPassphrase
+      : ManualVerificationMethod.RecoveryKey
+  );
+
+  const verifyAndRestoreBackup = useCallback(
+    async (recoveryKey: Uint8Array) => {
+      const crypto = mx.getCrypto();
+      if (!crypto) {
+        throw new Error('Unexpected Error! Crypto object not found.');
+      }
+
+      storePrivateKey(secretStorageKeyId, recoveryKey);
+
+      await crypto.bootstrapCrossSigning({});
+      await crypto.bootstrapSecretStorage({});
+
+      await crypto.loadSessionBackupPrivateKeyFromSecretStorage();
+    },
+    [mx, secretStorageKeyId]
+  );
+
+  const [verifyState, handleDecodedRecoveryKey] = useAsyncCallback<void, Error, [Uint8Array]>(
+    verifyAndRestoreBackup
+  );
+  const verifying = verifyState.status === AsyncStatus.Loading;
+
+  return (
+    <Box direction="Column" gap="200">
+      <SettingTile
+        title="Verify Manually"
+        description={hasPassphrase ? 'Select a verification method.' : 'Provide recovery key.'}
+        after={
+          <Box alignItems="Center" gap="200">
+            {hasPassphrase && (
+              <ManualVerificationMethodSwitcher value={method} onChange={setMethod} />
+            )}
+            {options}
+          </Box>
+        }
+      />
+      {verifyState.status === AsyncStatus.Success ? (
+        <Text size="T200" style={{ color: color.Success.Main }}>
+          <b>Device verified!</b>
+        </Text>
+      ) : (
+        <Box direction="Column" gap="100">
+          {method === ManualVerificationMethod.RecoveryKey && (
+            <SecretStorageRecoveryKey
+              processing={verifying}
+              keyContent={secretStorageKeyContent}
+              onDecodedRecoveryKey={handleDecodedRecoveryKey}
+            />
+          )}
+          {method === ManualVerificationMethod.RecoveryPassphrase &&
+            secretStorageKeyContent.passphrase && (
+              <SecretStorageRecoveryPassphrase
+                processing={verifying}
+                keyContent={secretStorageKeyContent}
+                passphraseContent={secretStorageKeyContent.passphrase}
+                onDecodedRecoveryKey={handleDecodedRecoveryKey}
+              />
+            )}
+          {verifyState.status === AsyncStatus.Error && (
+            <Text size="T200" style={{ color: color.Critical.Main }}>
+              <b>{verifyState.error.message}</b>
+            </Text>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+}

src/app/components/MediaConfigLoader.tsx

@@ -0,0 +1,19 @@
+import { ReactNode, useCallback, useEffect } from 'react';
+import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+import { MediaConfig } from '../hooks/useMediaConfig';
+
+type MediaConfigLoaderProps = {
+  children: (mediaConfig: MediaConfig | undefined) => ReactNode;
+};
+export function MediaConfigLoader({ children }: MediaConfigLoaderProps) {
+  const mx = useMatrixClient();
+
+  const [state, load] = useAsyncCallback(useCallback(() => mx.getMediaConfig(), [mx]));
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  return children(state.status === AsyncStatus.Success ? state.data : undefined);
+}

src/app/components/Modal500.tsx

@@ -0,0 +1,29 @@
+import React, { ReactNode } from 'react';
+import FocusTrap from 'focus-trap-react';
+import { Modal, Overlay, OverlayBackdrop, OverlayCenter } from 'folds';
+import { stopPropagation } from '../utils/keyboard';
+
+type Modal500Props = {
+  requestClose: () => void;
+  children: ReactNode;
+};
+export function Modal500({ requestClose, children }: Modal500Props) {
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            clickOutsideDeactivates: true,
+            onDeactivate: requestClose,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Modal size="500" variant="Background">
+            {children}
+          </Modal>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}

src/app/components/Pdf-viewer/PdfViewer.css.ts

@@ -0,0 +1,37 @@
+import { style } from '@vanilla-extract/css';
+import { DefaultReset, color, config } from 'folds';
+
+export const PdfViewer = style([
+  DefaultReset,
+  {
+    height: '100%',
+  },
+]);
+
+export const PdfViewerHeader = style([
+  DefaultReset,
+  {
+    paddingLeft: config.space.S200,
+    paddingRight: config.space.S200,
+    borderBottomWidth: config.borderWidth.B300,
+    flexShrink: 0,
+    gap: config.space.S200,
+  },
+]);
+export const PdfViewerFooter = style([
+  PdfViewerHeader,
+  {
+    borderTopWidth: config.borderWidth.B300,
+    borderBottomWidth: 0,
+  },
+]);
+
+export const PdfViewerContent = style([
+  DefaultReset,
+  {
+    margin: 'auto',
+    display: 'inline-block',
+    backgroundColor: color.Surface.Container,
+    color: color.Surface.OnContainer,
+  },
+]);

src/app/components/Pdf-viewer/PdfViewer.tsx

@@ -0,0 +1,261 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+import React, { FormEventHandler, MouseEventHandler, useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import {
+  Box,
+  Button,
+  Chip,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Input,
+  Menu,
+  PopOut,
+  RectCords,
+  Scroll,
+  Spinner,
+  Text,
+  as,
+  config,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import FileSaver from 'file-saver';
+import * as css from './PdfViewer.css';
+import { AsyncStatus } from '../../hooks/useAsyncCallback';
+import { useZoom } from '../../hooks/useZoom';
+import { createPage, usePdfDocumentLoader, usePdfJSLoader } from '../../plugins/pdfjs-dist';
+import { stopPropagation } from '../../utils/keyboard';
+
+export type PdfViewerProps = {
+  name: string;
+  src: string;
+  requestClose: () => void;
+};
+
+export const PdfViewer = as<'div', PdfViewerProps>(
+  ({ className, name, src, requestClose, ...props }, ref) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const scrollRef = useRef<HTMLDivElement>(null);
+    const { zoom, zoomIn, zoomOut, setZoom } = useZoom(0.2);
+
+    const [pdfJSState, loadPdfJS] = usePdfJSLoader();
+    const [docState, loadPdfDocument] = usePdfDocumentLoader(
+      pdfJSState.status === AsyncStatus.Success ? pdfJSState.data : undefined,
+      src
+    );
+    const isLoading =
+      pdfJSState.status === AsyncStatus.Loading || docState.status === AsyncStatus.Loading;
+    const isError =
+      pdfJSState.status === AsyncStatus.Error || docState.status === AsyncStatus.Error;
+    const [pageNo, setPageNo] = useState(1);
+    const [jumpAnchor, setJumpAnchor] = useState<RectCords>();
+
+    useEffect(() => {
+      loadPdfJS();
+    }, [loadPdfJS]);
+    useEffect(() => {
+      if (pdfJSState.status === AsyncStatus.Success) {
+        loadPdfDocument();
+      }
+    }, [pdfJSState, loadPdfDocument]);
+
+    useEffect(() => {
+      if (docState.status === AsyncStatus.Success) {
+        const doc = docState.data;
+        if (pageNo < 0 || pageNo > doc.numPages) return;
+        createPage(doc, pageNo, { scale: zoom }).then((canvas) => {
+          const container = containerRef.current;
+          if (!container) return;
+          container.textContent = '';
+          container.append(canvas);
+          scrollRef.current?.scrollTo({
+            top: 0,
+          });
+        });
+      }
+    }, [docState, pageNo, zoom]);
+
+    const handleDownload = () => {
+      FileSaver.saveAs(src, name);
+    };
+
+    const handleJumpSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+      evt.preventDefault();
+      if (docState.status !== AsyncStatus.Success) return;
+      const jumpInput = evt.currentTarget.jumpInput as HTMLInputElement;
+      if (!jumpInput) return;
+      const jumpTo = parseInt(jumpInput.value, 10);
+      setPageNo(Math.max(1, Math.min(docState.data.numPages, jumpTo)));
+      setJumpAnchor(undefined);
+    };
+
+    const handlePrevPage = () => {
+      setPageNo((n) => Math.max(n - 1, 1));
+    };
+
+    const handleNextPage = () => {
+      if (docState.status !== AsyncStatus.Success) return;
+      setPageNo((n) => Math.min(n + 1, docState.data.numPages));
+    };
+
+    const handleOpenJump: MouseEventHandler<HTMLButtonElement> = (evt) => {
+      setJumpAnchor(evt.currentTarget.getBoundingClientRect());
+    };
+
+    return (
+      <Box className={classNames(css.PdfViewer, className)} direction="Column" {...props} ref={ref}>
+        <Header className={css.PdfViewerHeader} size="400">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <IconButton size="300" radii="300" onClick={requestClose}>
+              <Icon size="50" src={Icons.ArrowLeft} />
+            </IconButton>
+            <Text size="T300" truncate>
+              {name}
+            </Text>
+          </Box>
+          <Box shrink="No" alignItems="Center" gap="200">
+            <IconButton
+              variant={zoom < 1 ? 'Success' : 'SurfaceVariant'}
+              outlined={zoom < 1}
+              size="300"
+              radii="Pill"
+              onClick={zoomOut}
+              aria-label="Zoom Out"
+            >
+              <Icon size="50" src={Icons.Minus} />
+            </IconButton>
+            <Chip variant="SurfaceVariant" radii="Pill" onClick={() => setZoom(zoom === 1 ? 2 : 1)}>
+              <Text size="B300">{Math.round(zoom * 100)}%</Text>
+            </Chip>
+            <IconButton
+              variant={zoom > 1 ? 'Success' : 'SurfaceVariant'}
+              outlined={zoom > 1}
+              size="300"
+              radii="Pill"
+              onClick={zoomIn}
+              aria-label="Zoom In"
+            >
+              <Icon size="50" src={Icons.Plus} />
+            </IconButton>
+            <Chip
+              variant="Primary"
+              onClick={handleDownload}
+              radii="300"
+              before={<Icon size="50" src={Icons.Download} />}
+            >
+              <Text size="B300">Download</Text>
+            </Chip>
+          </Box>
+        </Header>
+        <Box direction="Column" grow="Yes" alignItems="Center" justifyContent="Center" gap="200">
+          {isLoading && <Spinner variant="Secondary" size="600" />}
+          {isError && (
+            <>
+              <Text>Failed to load PDF</Text>
+              <Button
+                variant="Critical"
+                fill="Soft"
+                size="300"
+                radii="300"
+                before={<Icon src={Icons.Warning} size="50" />}
+                onClick={loadPdfJS}
+              >
+                <Text size="B300">Retry</Text>
+              </Button>
+            </>
+          )}
+          {docState.status === AsyncStatus.Success && (
+            <Scroll
+              ref={scrollRef}
+              size="300"
+              direction="Both"
+              variant="Surface"
+              visibility="Hover"
+            >
+              <Box>
+                <div className={css.PdfViewerContent} ref={containerRef} />
+              </Box>
+            </Scroll>
+          )}
+        </Box>
+        {docState.status === AsyncStatus.Success && (
+          <Header as="footer" className={css.PdfViewerFooter} size="400">
+            <Chip
+              variant="Secondary"
+              radii="300"
+              before={<Icon size="50" src={Icons.ChevronLeft} />}
+              onClick={handlePrevPage}
+              aria-disabled={pageNo <= 1}
+            >
+              <Text size="B300">Previous</Text>
+            </Chip>
+            <Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
+              <PopOut
+                anchor={jumpAnchor}
+                align="Center"
+                position="Top"
+                content={
+                  <FocusTrap
+                    focusTrapOptions={{
+                      initialFocus: false,
+                      onDeactivate: () => setJumpAnchor(undefined),
+                      clickOutsideDeactivates: true,
+                      escapeDeactivates: stopPropagation,
+                    }}
+                  >
+                    <Menu variant="Surface">
+                      <Box
+                        as="form"
+                        onSubmit={handleJumpSubmit}
+                        style={{ padding: config.space.S200 }}
+                        direction="Column"
+                        gap="200"
+                      >
+                        <Input
+                          name="jumpInput"
+                          size="300"
+                          variant="Background"
+                          defaultValue={pageNo}
+                          min={1}
+                          max={docState.data.numPages}
+                          step={1}
+                          outlined
+                          type="number"
+                          radii="300"
+                          aria-label="Page Number"
+                        />
+                        <Button type="submit" size="300" variant="Primary" radii="300">
+                          <Text size="B300">Jump To Page</Text>
+                        </Button>
+                      </Box>
+                    </Menu>
+                  </FocusTrap>
+                }
+              >
+                <Chip
+                  onClick={handleOpenJump}
+                  variant="SurfaceVariant"
+                  radii="300"
+                  aria-pressed={jumpAnchor !== undefined}
+                >
+                  <Text size="B300">{`${pageNo}/${docState.data.numPages}`}</Text>
+                </Chip>
+              </PopOut>
+            </Box>
+            <Chip
+              variant="Primary"
+              radii="300"
+              after={<Icon size="50" src={Icons.ChevronRight} />}
+              onClick={handleNextPage}
+              aria-disabled={pageNo >= docState.data.numPages}
+            >
+              <Text size="B300">Next</Text>
+            </Chip>
+          </Header>
+        )}
+      </Box>
+    );
+  }
+);

src/app/components/Pdf-viewer/index.ts

@@ -0,0 +1 @@
+export * from './PdfViewer';

src/app/components/RenderMessageContent.tsx

@@ -0,0 +1,271 @@
+import React from 'react';
+import { MsgType } from 'matrix-js-sdk';
+import { HTMLReactParserOptions } from 'html-react-parser';
+import { Opts } from 'linkifyjs';
+import {
+  AudioContent,
+  DownloadFile,
+  FileContent,
+  ImageContent,
+  MAudio,
+  MBadEncrypted,
+  MEmote,
+  MFile,
+  MImage,
+  MLocation,
+  MNotice,
+  MText,
+  MVideo,
+  ReadPdfFile,
+  ReadTextFile,
+  RenderBody,
+  ThumbnailContent,
+  UnsupportedContent,
+  VideoContent,
+} from './message';
+import { UrlPreviewCard, UrlPreviewHolder } from './url-preview';
+import { Image, MediaControl, Video } from './media';
+import { ImageViewer } from './image-viewer';
+import { PdfViewer } from './Pdf-viewer';
+import { TextViewer } from './text-viewer';
+import { testMatrixTo } from '../plugins/matrix-to';
+import {IImageContent} from "../../types/matrix/common";
+
+type RenderMessageContentProps = {
+  displayName: string;
+  msgType: string;
+  ts: number;
+  edited?: boolean;
+  getContent: <T>() => T;
+  mediaAutoLoad?: boolean;
+  urlPreview?: boolean;
+  highlightRegex?: RegExp;
+  htmlReactParserOptions: HTMLReactParserOptions;
+  linkifyOpts: Opts;
+  outlineAttachment?: boolean;
+};
+export function RenderMessageContent({
+  displayName,
+  msgType,
+  ts,
+  edited,
+  getContent,
+  mediaAutoLoad,
+  urlPreview,
+  highlightRegex,
+  htmlReactParserOptions,
+  linkifyOpts,
+  outlineAttachment,
+}: RenderMessageContentProps) {
+  const renderUrlsPreview = (urls: string[]) => {
+    const filteredUrls = urls.filter((url) => !testMatrixTo(url));
+    if (filteredUrls.length === 0) return undefined;
+    return (
+      <UrlPreviewHolder>
+        {filteredUrls.map((url) => (
+          <UrlPreviewCard key={url} url={url} ts={ts} />
+        ))}
+      </UrlPreviewHolder>
+    );
+  };
+  const renderCaption = () => {
+    const content: IImageContent = getContent();
+    if(content.filename && content.filename !== content.body) {
+      return (
+        <MText
+          edited={edited}
+          content={content}
+          renderBody={(props) => (
+            <RenderBody
+              {...props}
+              highlightRegex={highlightRegex}
+              htmlReactParserOptions={htmlReactParserOptions}
+              linkifyOpts={linkifyOpts}
+            />
+          )}
+          renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
+        />
+      )
+    }
+    return null;
+  }
+
+  const renderFile = () => (
+    <>
+      <MFile
+        content={getContent()}
+        renderFileContent={({ body, mimeType, info, encInfo, url }) => (
+            <FileContent
+              body={body}
+              mimeType={mimeType}
+              renderAsPdfFile={() => (
+                <ReadPdfFile
+                  body={body}
+                  mimeType={mimeType}
+                  url={url}
+                  encInfo={encInfo}
+                  renderViewer={(p) => <PdfViewer {...p} />}
+                />
+              )}
+              renderAsTextFile={() => (
+                <ReadTextFile
+                  body={body}
+                  mimeType={mimeType}
+                  url={url}
+                  encInfo={encInfo}
+                  renderViewer={(p) => <TextViewer {...p} />}
+                />
+              )}
+            >
+              <DownloadFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} info={info} />
+            </FileContent>
+
+        )}
+        outlined={outlineAttachment}
+      />
+      {renderCaption()}
+    </>
+  );
+
+  if (msgType === MsgType.Text) {
+    return (
+      <MText
+        edited={edited}
+        content={getContent()}
+        renderBody={(props) => (
+          <RenderBody
+            {...props}
+            highlightRegex={highlightRegex}
+            htmlReactParserOptions={htmlReactParserOptions}
+            linkifyOpts={linkifyOpts}
+          />
+        )}
+        renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
+      />
+    );
+  }
+
+  if (msgType === MsgType.Emote) {
+    return (
+      <MEmote
+        displayName={displayName}
+        edited={edited}
+        content={getContent()}
+        renderBody={(props) => (
+          <RenderBody
+            {...props}
+            highlightRegex={highlightRegex}
+            htmlReactParserOptions={htmlReactParserOptions}
+            linkifyOpts={linkifyOpts}
+          />
+        )}
+        renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
+      />
+    );
+  }
+
+  if (msgType === MsgType.Notice) {
+    return (
+      <MNotice
+        edited={edited}
+        content={getContent()}
+        renderBody={(props) => (
+          <RenderBody
+            {...props}
+            highlightRegex={highlightRegex}
+            htmlReactParserOptions={htmlReactParserOptions}
+            linkifyOpts={linkifyOpts}
+          />
+        )}
+        renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
+      />
+    );
+  }
+
+  if (msgType === MsgType.Image) {
+    return (
+      <>
+        <MImage
+          content={getContent()}
+          renderImageContent={(props) => (
+              <ImageContent
+                  {...props}
+                  autoPlay={mediaAutoLoad}
+                  renderImage={(p) => <Image {...p} loading="lazy" />}
+                  renderViewer={(p) => <ImageViewer {...p} />}
+              />
+          )}
+          outlined={outlineAttachment}
+        />
+        {renderCaption()}
+      </>
+    );
+  }
+
+  if (msgType === MsgType.Video) {
+    return (
+      <>
+        <MVideo
+          content={getContent()}
+          renderAsFile={renderFile}
+          renderVideoContent={({ body, info, mimeType, url, encInfo }) => (
+            <VideoContent
+              body={body}
+              info={info}
+              mimeType={mimeType}
+              url={url}
+              encInfo={encInfo}
+              renderThumbnail={
+                mediaAutoLoad
+                  ? () => (
+                    <ThumbnailContent
+                      info={info}
+                      renderImage={(src) => (
+                        <Image alt={body} title={body} src={src} loading="lazy" />
+                      )}
+                    />
+                  )
+                  : undefined
+              }
+              renderVideo={(p) => <Video {...p} />}
+            />
+          )}
+          outlined={outlineAttachment}
+        />
+        {renderCaption()}
+      </>
+
+    );
+  }
+
+  if (msgType === MsgType.Audio) {
+    return (
+      <>
+        <MAudio
+          content={getContent()}
+          renderAsFile={renderFile}
+          renderAudioContent={(props) => (
+            <AudioContent {...props} renderMediaControl={(p) => <MediaControl {...p} />} />
+          )}
+          outlined={outlineAttachment}
+        />
+        {renderCaption()}
+      </>
+
+    );
+  }
+
+  if (msgType === MsgType.File) {
+    return renderFile();
+  }
+
+  if (msgType === MsgType.Location) {
+    return <MLocation content={getContent()} />;
+  }
+
+  if (msgType === 'm.bad.encrypted') {
+    return <MBadEncrypted />;
+  }
+
+  return <UnsupportedContent />;
+}

src/app/components/RoomSummaryLoader.tsx

@@ -0,0 +1,90 @@
+import { ReactNode, useCallback, useState } from 'react';
+import { MatrixClient, Room } from 'matrix-js-sdk';
+import { useQuery } from '@tanstack/react-query';
+import { IHierarchyRoom } from 'matrix-js-sdk/lib/@types/spaces';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+import { LocalRoomSummary, useLocalRoomSummary } from '../hooks/useLocalRoomSummary';
+import { AsyncState, AsyncStatus } from '../hooks/useAsyncCallback';
+
+export type IRoomSummary = Awaited<ReturnType<MatrixClient['getRoomSummary']>>;
+
+type RoomSummaryLoaderProps = {
+  roomIdOrAlias: string;
+  children: (roomSummary?: IRoomSummary) => ReactNode;
+};
+
+export function RoomSummaryLoader({ roomIdOrAlias, children }: RoomSummaryLoaderProps) {
+  const mx = useMatrixClient();
+
+  const fetchSummary = useCallback(() => mx.getRoomSummary(roomIdOrAlias), [mx, roomIdOrAlias]);
+
+  const { data } = useQuery({
+    queryKey: [roomIdOrAlias, `summary`],
+    queryFn: fetchSummary,
+  });
+
+  return children(data);
+}
+
+export function LocalRoomSummaryLoader({
+  room,
+  children,
+}: {
+  room: Room;
+  children: (roomSummary: LocalRoomSummary) => ReactNode;
+}) {
+  const summary = useLocalRoomSummary(room);
+
+  return children(summary);
+}
+
+export function HierarchyRoomSummaryLoader({
+  roomId,
+  children,
+}: {
+  roomId: string;
+  children: (state: AsyncState<IHierarchyRoom, Error>) => ReactNode;
+}) {
+  const mx = useMatrixClient();
+
+  const fetchSummary = useCallback(() => mx.getRoomHierarchy(roomId, 1, 1), [mx, roomId]);
+  const [errorMemo, setError] = useState<Error>();
+
+  const { data, error } = useQuery({
+    queryKey: [roomId, `hierarchy`],
+    queryFn: fetchSummary,
+    retryOnMount: false,
+    refetchOnWindowFocus: false,
+    retry: (failureCount, err) => {
+      setError(err);
+      if (failureCount > 3) return false;
+      return true;
+    },
+  });
+
+  let state: AsyncState<IHierarchyRoom, Error> = {
+    status: AsyncStatus.Loading,
+  };
+  if (error) {
+    state = {
+      status: AsyncStatus.Error,
+      error,
+    };
+  }
+  if (errorMemo) {
+    state = {
+      status: AsyncStatus.Error,
+      error: errorMemo,
+    };
+  }
+
+  const summary = data?.rooms[0] ?? undefined;
+  if (summary) {
+    state = {
+      status: AsyncStatus.Success,
+      data: summary,
+    };
+  }
+
+  return children(state);
+}

src/app/components/RoomUnreadProvider.tsx

@@ -0,0 +1,24 @@
+import { ReactElement } from 'react';
+import { Unread } from '../../types/matrix/room';
+import { useRoomUnread, useRoomsUnread } from '../state/hooks/unread';
+import { roomToUnreadAtom } from '../state/room/roomToUnread';
+
+type RoomUnreadProviderProps = {
+  roomId: string;
+  children: (unread?: Unread) => ReactElement;
+};
+export function RoomUnreadProvider({ roomId, children }: RoomUnreadProviderProps) {
+  const unread = useRoomUnread(roomId, roomToUnreadAtom);
+
+  return children(unread);
+}
+
+type RoomsUnreadProviderProps = {
+  rooms: string[];
+  children: (unread?: Unread) => ReactElement;
+};
+export function RoomsUnreadProvider({ rooms, children }: RoomsUnreadProviderProps) {
+  const unread = useRoomsUnread(rooms, roomToUnreadAtom);
+
+  return children(unread);
+}

src/app/components/SecretStorage.tsx

@@ -0,0 +1,200 @@
+import React, { FormEventHandler, useCallback } from 'react';
+import { Box, Text, Button, Spinner, color } from 'folds';
+import { decodeRecoveryKey } from 'matrix-js-sdk/lib/crypto-api';
+import { deriveKey } from 'matrix-js-sdk/lib/crypto/key_passphrase';
+import { PasswordInput } from './password-input';
+import {
+  SecretStorageKeyContent,
+  SecretStoragePassphraseContent,
+} from '../../types/matrix/accountData';
+import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+import { useAlive } from '../hooks/useAlive';
+
+type SecretStorageRecoveryPassphraseProps = {
+  processing?: boolean;
+  keyContent: SecretStorageKeyContent;
+  passphraseContent: SecretStoragePassphraseContent;
+  onDecodedRecoveryKey: (recoveryKey: Uint8Array) => void;
+};
+export function SecretStorageRecoveryPassphrase({
+  processing,
+  keyContent,
+  passphraseContent,
+  onDecodedRecoveryKey,
+}: SecretStorageRecoveryPassphraseProps) {
+  const mx = useMatrixClient();
+  const alive = useAlive();
+
+  const [driveKeyState, submitPassphrase] = useAsyncCallback<
+    Uint8Array,
+    Error,
+    Parameters<typeof deriveKey>
+  >(
+    useCallback(
+      async (passphrase, salt, iterations, bits) => {
+        const decodedRecoveryKey = await deriveKey(passphrase, salt, iterations, bits);
+
+        const match = await mx.secretStorage.checkKey(decodedRecoveryKey, keyContent as any);
+
+        if (!match) {
+          throw new Error('Invalid recovery passphrase.');
+        }
+
+        return decodedRecoveryKey;
+      },
+      [mx, keyContent]
+    )
+  );
+
+  const drivingKey = driveKeyState.status === AsyncStatus.Loading;
+  const loading = drivingKey || processing;
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    if (loading) return;
+    evt.preventDefault();
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const recoveryPassphraseInput = target?.recoveryPassphraseInput as HTMLInputElement | undefined;
+    if (!recoveryPassphraseInput) return;
+    const recoveryPassphrase = recoveryPassphraseInput.value.trim();
+    if (!recoveryPassphrase) return;
+
+    const { salt, iterations, bits } = passphraseContent;
+    submitPassphrase(recoveryPassphrase, salt, iterations, bits).then((decodedRecoveryKey) => {
+      if (alive()) {
+        recoveryPassphraseInput.value = '';
+        onDecodedRecoveryKey(decodedRecoveryKey);
+      }
+    });
+  };
+
+  return (
+    <Box as="form" onSubmit={handleSubmit} direction="Column" gap="100">
+      <Box gap="200" alignItems="End">
+        <Box grow="Yes" direction="Column" gap="100">
+          <Text size="L400">Recovery Passphrase</Text>
+          <PasswordInput
+            name="recoveryPassphraseInput"
+            size="400"
+            variant="Secondary"
+            radii="300"
+            autoFocus
+            required
+            outlined
+            readOnly={loading}
+          />
+        </Box>
+        <Box shrink="No" gap="200">
+          <Button
+            type="submit"
+            variant="Success"
+            size="400"
+            radii="300"
+            disabled={loading}
+            before={loading && <Spinner size="200" variant="Success" fill="Solid" />}
+          >
+            <Text as="span" size="B400">
+              Verify
+            </Text>
+          </Button>
+        </Box>
+      </Box>
+      {driveKeyState.status === AsyncStatus.Error && (
+        <Text size="T200" style={{ color: color.Critical.Main }}>
+          <b>{driveKeyState.error.message}</b>
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+type SecretStorageRecoveryKeyProps = {
+  processing?: boolean;
+  keyContent: SecretStorageKeyContent;
+  onDecodedRecoveryKey: (recoveryKey: Uint8Array) => void;
+};
+export function SecretStorageRecoveryKey({
+  processing,
+  keyContent,
+  onDecodedRecoveryKey,
+}: SecretStorageRecoveryKeyProps) {
+  const mx = useMatrixClient();
+  const alive = useAlive();
+
+  const [driveKeyState, submitRecoveryKey] = useAsyncCallback<Uint8Array, Error, [string]>(
+    useCallback(
+      async (recoveryKey) => {
+        const decodedRecoveryKey = decodeRecoveryKey(recoveryKey);
+
+        const match = await mx.secretStorage.checkKey(decodedRecoveryKey, keyContent as any);
+
+        if (!match) {
+          throw new Error('Invalid recovery key.');
+        }
+
+        return decodedRecoveryKey;
+      },
+      [mx, keyContent]
+    )
+  );
+
+  const drivingKey = driveKeyState.status === AsyncStatus.Loading;
+  const loading = drivingKey || processing;
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const recoveryKeyInput = target?.recoveryKeyInput as HTMLInputElement | undefined;
+    if (!recoveryKeyInput) return;
+    const recoveryKey = recoveryKeyInput.value.trim();
+    if (!recoveryKey) return;
+
+    submitRecoveryKey(recoveryKey).then((decodedRecoveryKey) => {
+      if (alive()) {
+        recoveryKeyInput.value = '';
+        onDecodedRecoveryKey(decodedRecoveryKey);
+      }
+    });
+  };
+
+  return (
+    <Box as="form" onSubmit={handleSubmit} direction="Column" gap="100">
+      <Box gap="200" alignItems="End">
+        <Box grow="Yes" direction="Column" gap="100">
+          <Text size="L400">Recovery Key</Text>
+          <PasswordInput
+            name="recoveryKeyInput"
+            size="400"
+            variant="Secondary"
+            radii="300"
+            autoFocus
+            required
+            outlined
+            readOnly={loading}
+          />
+        </Box>
+        <Box shrink="No" gap="200">
+          <Button
+            type="submit"
+            variant="Success"
+            size="400"
+            radii="300"
+            disabled={loading}
+            before={loading && <Spinner size="200" variant="Success" fill="Solid" />}
+          >
+            <Text as="span" size="B400">
+              Verify
+            </Text>
+          </Button>
+        </Box>
+      </Box>
+      {driveKeyState.status === AsyncStatus.Error && (
+        <Text size="T200" style={{ color: color.Critical.Main }}>
+          <b>{driveKeyState.error.message}</b>
+        </Text>
+      )}
+    </Box>
+  );
+}

src/app/components/SpaceChildDirectsProvider.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { RoomToParents } from '../../types/matrix/room';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+import { allRoomsAtom } from '../state/room-list/roomList';
+import { useChildDirectScopeFactory, useSpaceChildren } from '../state/hooks/roomList';
+
+type SpaceChildDirectsProviderProps = {
+  spaceId: string;
+  mDirects: Set<string>;
+  roomToParents: RoomToParents;
+  children: (rooms: string[]) => ReactNode;
+};
+export function SpaceChildDirectsProvider({
+  spaceId,
+  roomToParents,
+  mDirects,
+  children,
+}: SpaceChildDirectsProviderProps) {
+  const mx = useMatrixClient();
+
+  const childDirects = useSpaceChildren(
+    allRoomsAtom,
+    spaceId,
+    useChildDirectScopeFactory(mx, mDirects, roomToParents)
+  );
+
+  return children(childDirects);
+}

src/app/components/SpaceChildRoomsProvider.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { RoomToParents } from '../../types/matrix/room';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+import { allRoomsAtom } from '../state/room-list/roomList';
+import { useChildRoomScopeFactory, useSpaceChildren } from '../state/hooks/roomList';
+
+type SpaceChildRoomsProviderProps = {
+  spaceId: string;
+  mDirects: Set<string>;
+  roomToParents: RoomToParents;
+  children: (rooms: string[]) => ReactNode;
+};
+export function SpaceChildRoomsProvider({
+  spaceId,
+  roomToParents,
+  mDirects,
+  children,
+}: SpaceChildRoomsProviderProps) {
+  const mx = useMatrixClient();
+
+  const childRooms = useSpaceChildren(
+    allRoomsAtom,
+    spaceId,
+    useChildRoomScopeFactory(mx, mDirects, roomToParents)
+  );
+
+  return children(childRooms);
+}

src/app/components/SpecVersionsLoader.tsx

@@ -0,0 +1,43 @@
+import { ReactNode, useCallback, useEffect, useState } from 'react';
+import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
+import { SpecVersions, specVersions } from '../cs-api';
+
+type SpecVersionsLoaderProps = {
+  baseUrl: string;
+  fallback?: () => ReactNode;
+  error?: (err: unknown, retry: () => void, ignore: () => void) => ReactNode;
+  children: (versions: SpecVersions) => ReactNode;
+};
+export function SpecVersionsLoader({
+  baseUrl,
+  fallback,
+  error,
+  children,
+}: SpecVersionsLoaderProps) {
+  const [state, load] = useAsyncCallback(
+    useCallback(() => specVersions(fetch, baseUrl), [baseUrl])
+  );
+  const [ignoreError, setIgnoreError] = useState(false);
+
+  const ignoreCallback = useCallback(() => setIgnoreError(true), []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  if (state.status === AsyncStatus.Idle || state.status === AsyncStatus.Loading) {
+    return fallback?.();
+  }
+
+  if (!ignoreError && state.status === AsyncStatus.Error) {
+    return error?.(state.error, load, ignoreCallback);
+  }
+
+  return children(
+    state.status === AsyncStatus.Success
+      ? state.data
+      : {
+          versions: [],
+        }
+  );
+}

src/app/components/SupportedUIAFlowsLoader.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { UIAFlow } from 'matrix-js-sdk';
+import { useSupportedUIAFlows } from '../hooks/useUIAFlows';
+
+export function SupportedUIAFlowsLoader({
+  flows,
+  supportedStages,
+  children,
+}: {
+  supportedStages: string[];
+  flows: UIAFlow[];
+  children: (supportedFlows: UIAFlow[]) => ReactNode;
+}) {
+  const supportedFlows = useSupportedUIAFlows(flows, supportedStages);
+
+  return children(supportedFlows);
+}

src/app/components/UIAFlowOverlay.tsx

@@ -0,0 +1,72 @@
+import React, { ReactNode } from 'react';
+import {
+  Overlay,
+  OverlayBackdrop,
+  Box,
+  config,
+  Text,
+  TooltipProvider,
+  Tooltip,
+  Icons,
+  Icon,
+  Chip,
+  IconButton,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+
+export type UIAFlowOverlayProps = {
+  currentStep: number;
+  stepCount: number;
+  children: ReactNode;
+  onCancel: () => void;
+};
+export function UIAFlowOverlay({
+  currentStep,
+  stepCount,
+  children,
+  onCancel,
+}: UIAFlowOverlayProps) {
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <FocusTrap focusTrapOptions={{ initialFocus: false, escapeDeactivates: false }}>
+        <Box style={{ height: '100%' }} direction="Column" grow="Yes" gap="400">
+          <Box grow="Yes" direction="Column" alignItems="Center" justifyContent="Center">
+            {children}
+          </Box>
+          <Box
+            style={{ padding: config.space.S200 }}
+            shrink="No"
+            justifyContent="Center"
+            alignItems="Center"
+            gap="200"
+          >
+            <Chip as="div" radii="Pill" outlined>
+              <Text as="span" size="T300">{`Step ${currentStep}/${stepCount}`}</Text>
+            </Chip>
+            <TooltipProvider
+              tooltip={
+                <Tooltip variant="Critical">
+                  <Text>Exit</Text>
+                </Tooltip>
+              }
+              position="Top"
+            >
+              {(anchorRef) => (
+                <IconButton
+                  ref={anchorRef}
+                  variant="Critical"
+                  size="300"
+                  onClick={onCancel}
+                  radii="Pill"
+                  outlined
+                >
+                  <Icon size="50" src={Icons.Cross} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          </Box>
+        </Box>
+      </FocusTrap>
+    </Overlay>
+  );
+}

src/app/components/UseStateProvider.tsx

@@ -0,0 +1,9 @@
+import { Dispatch, ReactElement, SetStateAction, useState } from 'react';
+
+type UseStateProviderProps<T> = {
+  initial: T | (() => T);
+  children: (value: T, setter: Dispatch<SetStateAction<T>>) => ReactElement;
+};
+export function UseStateProvider<T>({ initial, children }: UseStateProviderProps<T>) {
+  return children(...useState(initial));
+}

src/app/components/editor/Editor.css.ts

@@ -0,0 +1,72 @@
+import { style } from '@vanilla-extract/css';
+import { color, config, DefaultReset, toRem } from 'folds';
+
+export const Editor = style([
+  DefaultReset,
+  {
+    backgroundColor: color.SurfaceVariant.Container,
+    color: color.SurfaceVariant.OnContainer,
+    boxShadow: `inset 0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.ContainerLine}`,
+    borderRadius: config.radii.R400,
+    overflow: 'hidden',
+  },
+]);
+
+export const EditorOptions = style([
+  DefaultReset,
+  {
+    padding: config.space.S200,
+  },
+]);
+
+export const EditorTextareaScroll = style({});
+
+export const EditorTextarea = style([
+  DefaultReset,
+  {
+    flexGrow: 1,
+    height: '100%',
+    padding: `${toRem(13)} ${toRem(1)}`,
+    selectors: {
+      [`${EditorTextareaScroll}:first-child &`]: {
+        paddingLeft: toRem(13),
+      },
+      [`${EditorTextareaScroll}:last-child &`]: {
+        paddingRight: toRem(13),
+      },
+      '&:focus': {
+        outline: 'none',
+      },
+    },
+  },
+]);
+
+export const EditorPlaceholder = style([
+  DefaultReset,
+  {
+    position: 'absolute',
+    zIndex: 1,
+    width: '100%',
+    opacity: config.opacity.Placeholder,
+    pointerEvents: 'none',
+    userSelect: 'none',
+
+    selectors: {
+      '&:not(:first-child)': {
+        display: 'none',
+      },
+    },
+  },
+]);
+
+export const EditorToolbarBase = style({
+  padding: `0 ${config.borderWidth.B300}`,
+});
+
+export const EditorToolbar = style({
+  padding: config.space.S100,
+});
+
+export const MarkdownBtnBox = style({
+  paddingRight: config.space.S100,
+});

src/app/components/editor/Editor.preview.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+  config,
+  Icon,
+  IconButton,
+  Icons,
+  Line,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+} from 'folds';
+
+import { CustomEditor, useEditor } from './Editor';
+import { Toolbar } from './Toolbar';
+import { stopPropagation } from '../../utils/keyboard';
+
+export function EditorPreview() {
+  const [open, setOpen] = useState(false);
+  const editor = useEditor();
+  const [toolbar, setToolbar] = useState(false);
+
+  return (
+    <>
+      <IconButton variant="SurfaceVariant" onClick={() => setOpen(!open)}>
+        <Icon src={Icons.BlockQuote} />
+      </IconButton>
+      <Overlay open={open} backdrop={<OverlayBackdrop />}>
+        <OverlayCenter>
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: () => setOpen(false),
+              clickOutsideDeactivates: true,
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Modal size="500">
+              <div style={{ padding: config.space.S400 }}>
+                <CustomEditor
+                  editor={editor}
+                  placeholder="Send a message..."
+                  before={
+                    <IconButton variant="SurfaceVariant" size="300" radii="300">
+                      <Icon src={Icons.PlusCircle} />
+                    </IconButton>
+                  }
+                  after={
+                    <>
+                      <IconButton
+                        variant="SurfaceVariant"
+                        size="300"
+                        radii="300"
+                        onClick={() => setToolbar(!toolbar)}
+                        aria-pressed={toolbar}
+                      >
+                        <Icon src={toolbar ? Icons.AlphabetUnderline : Icons.Alphabet} />
+                      </IconButton>
+                      <IconButton variant="SurfaceVariant" size="300" radii="300">
+                        <Icon src={Icons.Smile} />
+                      </IconButton>
+                      <IconButton variant="SurfaceVariant" size="300" radii="300">
+                        <Icon src={Icons.Send} />
+                      </IconButton>
+                    </>
+                  }
+                  bottom={
+                    toolbar && (
+                      <div>
+                        <Line variant="SurfaceVariant" size="300" />
+                        <Toolbar />
+                      </div>
+                    )
+                  }
+                />
+              </div>
+            </Modal>
+          </FocusTrap>
+        </OverlayCenter>
+      </Overlay>
+    </>
+  );
+}

src/app/components/editor/Editor.tsx

@@ -0,0 +1,167 @@
+/* eslint-disable no-param-reassign */
+import React, {
+  ClipboardEventHandler,
+  KeyboardEventHandler,
+  ReactNode,
+  forwardRef,
+  useCallback,
+  useState,
+} from 'react';
+import { Box, Scroll, Text } from 'folds';
+import { Descendant, Editor, createEditor } from 'slate';
+import {
+  Slate,
+  Editable,
+  withReact,
+  RenderLeafProps,
+  RenderElementProps,
+  RenderPlaceholderProps,
+} from 'slate-react';
+import { withHistory } from 'slate-history';
+import { BlockType } from './types';
+import { RenderElement, RenderLeaf } from './Elements';
+import { CustomElement } from './slate';
+import * as css from './Editor.css';
+import { toggleKeyboardShortcut } from './keyboard';
+
+const initialValue: CustomElement[] = [
+  {
+    type: BlockType.Paragraph,
+    children: [{ text: '' }],
+  },
+];
+
+const withInline = (editor: Editor): Editor => {
+  const { isInline } = editor;
+
+  editor.isInline = (element) =>
+    [BlockType.Mention, BlockType.Emoticon, BlockType.Link, BlockType.Command].includes(
+      element.type
+    ) || isInline(element);
+
+  return editor;
+};
+
+const withVoid = (editor: Editor): Editor => {
+  const { isVoid } = editor;
+
+  editor.isVoid = (element) =>
+    [BlockType.Mention, BlockType.Emoticon, BlockType.Command].includes(element.type) ||
+    isVoid(element);
+
+  return editor;
+};
+
+export const useEditor = (): Editor => {
+  const [editor] = useState(() => withInline(withVoid(withReact(withHistory(createEditor())))));
+  return editor;
+};
+
+export type EditorChangeHandler = (value: Descendant[]) => void;
+type CustomEditorProps = {
+  editableName?: string;
+  top?: ReactNode;
+  bottom?: ReactNode;
+  before?: ReactNode;
+  after?: ReactNode;
+  maxHeight?: string;
+  editor: Editor;
+  placeholder?: string;
+  onKeyDown?: KeyboardEventHandler;
+  onKeyUp?: KeyboardEventHandler;
+  onChange?: EditorChangeHandler;
+  onPaste?: ClipboardEventHandler;
+};
+export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
+  (
+    {
+      editableName,
+      top,
+      bottom,
+      before,
+      after,
+      maxHeight = '50vh',
+      editor,
+      placeholder,
+      onKeyDown,
+      onKeyUp,
+      onChange,
+      onPaste,
+    },
+    ref
+  ) => {
+    const renderElement = useCallback(
+      (props: RenderElementProps) => <RenderElement {...props} />,
+      []
+    );
+
+    const renderLeaf = useCallback((props: RenderLeafProps) => <RenderLeaf {...props} />, []);
+
+    const handleKeydown: KeyboardEventHandler = useCallback(
+      (evt) => {
+        onKeyDown?.(evt);
+        const shortcutToggled = toggleKeyboardShortcut(editor, evt);
+        if (shortcutToggled) evt.preventDefault();
+      },
+      [editor, onKeyDown]
+    );
+
+    const renderPlaceholder = useCallback(({ attributes, children }: RenderPlaceholderProps) => {
+      // drop style attribute as we use our custom placeholder css.
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { style, ...props } = attributes;
+      return (
+        <Text
+          as="span"
+          {...props}
+          className={css.EditorPlaceholder}
+          contentEditable={false}
+          truncate
+        >
+          {children}
+        </Text>
+      );
+    }, []);
+
+    return (
+      <div className={css.Editor} ref={ref}>
+        <Slate editor={editor} initialValue={initialValue} onChange={onChange}>
+          {top}
+          <Box alignItems="Start">
+            {before && (
+              <Box className={css.EditorOptions} alignItems="Center" gap="100" shrink="No">
+                {before}
+              </Box>
+            )}
+            <Scroll
+              className={css.EditorTextareaScroll}
+              variant="SurfaceVariant"
+              style={{ maxHeight }}
+              size="300"
+              visibility="Hover"
+              hideTrack
+            >
+              <Editable
+                data-editable-name={editableName}
+                className={css.EditorTextarea}
+                placeholder={placeholder}
+                renderPlaceholder={renderPlaceholder}
+                renderElement={renderElement}
+                renderLeaf={renderLeaf}
+                onKeyDown={handleKeydown}
+                onKeyUp={onKeyUp}
+                onPaste={onPaste}
+              />
+            </Scroll>
+            {after && (
+              <Box className={css.EditorOptions} alignItems="Center" gap="100" shrink="No">
+                {after}
+              </Box>
+            )}
+          </Box>
+          {bottom}
+        </Slate>
+      </div>
+    );
+  }
+);

src/app/components/editor/Elements.tsx

@@ -0,0 +1,276 @@
+import { Scroll, Text } from 'folds';
+import React from 'react';
+import {
+  RenderElementProps,
+  RenderLeafProps,
+  useFocused,
+  useSelected,
+  useSlate,
+} from 'slate-react';
+
+import * as css from '../../styles/CustomHtml.css';
+import { CommandElement, EmoticonElement, LinkElement, MentionElement } from './slate';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { getBeginCommand } from './utils';
+import { BlockType } from './types';
+import { mxcUrlToHttp } from '../../utils/matrix';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+
+// Put this at the start and end of an inline component to work around this Chromium bug:
+// https://bugs.chromium.org/p/chromium/issues/detail?id=1249405
+function InlineChromiumBugfix() {
+  return (
+    <span className={css.InlineChromiumBugfix} contentEditable={false}>
+      {String.fromCodePoint(160) /* Non-breaking space */}
+    </span>
+  );
+}
+
+function RenderMentionElement({
+  attributes,
+  element,
+  children,
+}: { element: MentionElement } & RenderElementProps) {
+  const selected = useSelected();
+  const focused = useFocused();
+
+  return (
+    <span
+      {...attributes}
+      className={css.Mention({
+        highlight: element.highlight,
+        focus: selected && focused,
+      })}
+      contentEditable={false}
+    >
+      {element.name}
+      {children}
+    </span>
+  );
+}
+function RenderCommandElement({
+  attributes,
+  element,
+  children,
+}: { element: CommandElement } & RenderElementProps) {
+  const selected = useSelected();
+  const focused = useFocused();
+  const editor = useSlate();
+
+  return (
+    <span
+      {...attributes}
+      className={css.Command({
+        focus: selected && focused,
+        active: getBeginCommand(editor) === element.command,
+      })}
+      contentEditable={false}
+    >
+      {`/${element.command}`}
+      {children}
+    </span>
+  );
+}
+
+function RenderEmoticonElement({
+  attributes,
+  element,
+  children,
+}: { element: EmoticonElement } & RenderElementProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const selected = useSelected();
+  const focused = useFocused();
+
+  return (
+    <span className={css.EmoticonBase} {...attributes}>
+      <span
+        className={css.Emoticon({
+          focus: selected && focused,
+        })}
+        contentEditable={false}
+      >
+        {element.key.startsWith('mxc://') ? (
+          <img
+            className={css.EmoticonImg}
+            src={mxcUrlToHttp(mx, element.key, useAuthentication) ?? element.key}
+            alt={element.shortcode}
+          />
+        ) : (
+          element.key
+        )}
+        {children}
+      </span>
+    </span>
+  );
+}
+
+function RenderLinkElement({
+  attributes,
+  element,
+  children,
+}: { element: LinkElement } & RenderElementProps) {
+  return (
+    <a href={element.href} {...attributes}>
+      <InlineChromiumBugfix />
+      {children}
+    </a>
+  );
+}
+
+export function RenderElement({ attributes, element, children }: RenderElementProps) {
+  switch (element.type) {
+    case BlockType.Paragraph:
+      return (
+        <Text {...attributes} className={css.Paragraph}>
+          {children}
+        </Text>
+      );
+    case BlockType.Heading:
+      if (element.level === 1)
+        return (
+          <Text className={css.Heading} as="h2" size="H2" {...attributes}>
+            {children}
+          </Text>
+        );
+      if (element.level === 2)
+        return (
+          <Text className={css.Heading} as="h3" size="H3" {...attributes}>
+            {children}
+          </Text>
+        );
+      if (element.level === 3)
+        return (
+          <Text className={css.Heading} as="h4" size="H4" {...attributes}>
+            {children}
+          </Text>
+        );
+      return (
+        <Text className={css.Heading} as="h3" size="H3" {...attributes}>
+          {children}
+        </Text>
+      );
+    case BlockType.CodeLine:
+      return <div {...attributes}>{children}</div>;
+    case BlockType.CodeBlock:
+      return (
+        <Text as="pre" className={css.CodeBlock} {...attributes}>
+          <Scroll
+            direction="Horizontal"
+            variant="Secondary"
+            size="300"
+            visibility="Hover"
+            hideTrack
+          >
+            <div className={css.CodeBlockInternal}>{children}</div>
+          </Scroll>
+        </Text>
+      );
+    case BlockType.QuoteLine:
+      return <div {...attributes}>{children}</div>;
+    case BlockType.BlockQuote:
+      return (
+        <Text as="blockquote" className={css.BlockQuote} {...attributes}>
+          {children}
+        </Text>
+      );
+    case BlockType.ListItem:
+      return (
+        <Text as="li" {...attributes}>
+          {children}
+        </Text>
+      );
+    case BlockType.OrderedList:
+      return (
+        <ol className={css.List} {...attributes}>
+          {children}
+        </ol>
+      );
+    case BlockType.UnorderedList:
+      return (
+        <ul className={css.List} {...attributes}>
+          {children}
+        </ul>
+      );
+    case BlockType.Mention:
+      return (
+        <RenderMentionElement attributes={attributes} element={element}>
+          {children}
+        </RenderMentionElement>
+      );
+    case BlockType.Emoticon:
+      return (
+        <RenderEmoticonElement attributes={attributes} element={element}>
+          {children}
+        </RenderEmoticonElement>
+      );
+    case BlockType.Link:
+      return (
+        <RenderLinkElement attributes={attributes} element={element}>
+          {children}
+        </RenderLinkElement>
+      );
+    case BlockType.Command:
+      return (
+        <RenderCommandElement attributes={attributes} element={element}>
+          {children}
+        </RenderCommandElement>
+      );
+    default:
+      return (
+        <Text className={css.Paragraph} {...attributes}>
+          {children}
+        </Text>
+      );
+  }
+}
+
+export function RenderLeaf({ attributes, leaf, children }: RenderLeafProps) {
+  let child = children;
+  if (leaf.bold)
+    child = (
+      <strong {...attributes}>
+        <InlineChromiumBugfix />
+        {child}
+      </strong>
+    );
+  if (leaf.italic)
+    child = (
+      <i {...attributes}>
+        <InlineChromiumBugfix />
+        {child}
+      </i>
+    );
+  if (leaf.underline)
+    child = (
+      <u {...attributes}>
+        <InlineChromiumBugfix />
+        {child}
+      </u>
+    );
+  if (leaf.strikeThrough)
+    child = (
+      <s {...attributes}>
+        <InlineChromiumBugfix />
+        {child}
+      </s>
+    );
+  if (leaf.code)
+    child = (
+      <code className={css.Code} {...attributes}>
+        <InlineChromiumBugfix />
+        {child}
+      </code>
+    );
+  if (leaf.spoiler)
+    child = (
+      <span className={css.Spoiler()} {...attributes}>
+        <InlineChromiumBugfix />
+        {child}
+      </span>
+    );
+
+  if (child !== children) return child;
+
+  return <span {...attributes}>{child}</span>;
+}

src/app/components/editor/Toolbar.tsx

@@ -0,0 +1,365 @@
+import FocusTrap from 'focus-trap-react';
+import {
+  Badge,
+  Box,
+  config,
+  Icon,
+  IconButton,
+  Icons,
+  IconSrc,
+  Line,
+  Menu,
+  PopOut,
+  RectCords,
+  Scroll,
+  Text,
+  Tooltip,
+  TooltipProvider,
+  toRem,
+} from 'folds';
+import React, { MouseEventHandler, ReactNode, useState } from 'react';
+import { ReactEditor, useSlate } from 'slate-react';
+import {
+  headingLevel,
+  isAnyMarkActive,
+  isBlockActive,
+  isMarkActive,
+  removeAllMark,
+  toggleBlock,
+  toggleMark,
+} from './utils';
+import * as css from './Editor.css';
+import { BlockType, MarkType } from './types';
+import { HeadingLevel } from './slate';
+import { isMacOS } from '../../utils/user-agent';
+import { KeySymbol } from '../../utils/key-symbol';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
+import { stopPropagation } from '../../utils/keyboard';
+
+function BtnTooltip({ text, shortCode }: { text: string; shortCode?: string }) {
+  return (
+    <Tooltip style={{ padding: config.space.S300 }}>
+      <Box gap="200" direction="Column" alignItems="Center">
+        <Text align="Center">{text}</Text>
+        {shortCode && (
+          <Badge as="kbd" radii="300" size="500">
+            <Text size="T200" align="Center">
+              {shortCode}
+            </Text>
+          </Badge>
+        )}
+      </Box>
+    </Tooltip>
+  );
+}
+
+type MarkButtonProps = { format: MarkType; icon: IconSrc; tooltip: ReactNode };
+export function MarkButton({ format, icon, tooltip }: MarkButtonProps) {
+  const editor = useSlate();
+  const disableInline = isBlockActive(editor, BlockType.CodeBlock);
+
+  if (disableInline) {
+    removeAllMark(editor);
+  }
+
+  const handleClick = () => {
+    toggleMark(editor, format);
+    ReactEditor.focus(editor);
+  };
+
+  return (
+    <TooltipProvider tooltip={tooltip} delay={500}>
+      {(triggerRef) => (
+        <IconButton
+          ref={triggerRef}
+          variant="SurfaceVariant"
+          onClick={handleClick}
+          aria-pressed={isMarkActive(editor, format)}
+          size="400"
+          radii="300"
+          disabled={disableInline}
+        >
+          <Icon size="200" src={icon} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
+type BlockButtonProps = {
+  format: BlockType;
+  icon: IconSrc;
+  tooltip: ReactNode;
+};
+export function BlockButton({ format, icon, tooltip }: BlockButtonProps) {
+  const editor = useSlate();
+
+  const handleClick = () => {
+    toggleBlock(editor, format, { level: 1 });
+    ReactEditor.focus(editor);
+  };
+
+  return (
+    <TooltipProvider tooltip={tooltip} delay={500}>
+      {(triggerRef) => (
+        <IconButton
+          ref={triggerRef}
+          variant="SurfaceVariant"
+          onClick={handleClick}
+          aria-pressed={isBlockActive(editor, format)}
+          size="400"
+          radii="300"
+        >
+          <Icon size="200" src={icon} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
+export function HeadingBlockButton() {
+  const editor = useSlate();
+  const level = headingLevel(editor);
+  const [anchor, setAnchor] = useState<RectCords>();
+  const isActive = isBlockActive(editor, BlockType.Heading);
+  const modKey = isMacOS() ? KeySymbol.Command : 'Ctrl';
+
+  const handleMenuSelect = (selectedLevel: HeadingLevel) => {
+    setAnchor(undefined);
+    toggleBlock(editor, BlockType.Heading, { level: selectedLevel });
+    ReactEditor.focus(editor);
+  };
+
+  const handleMenuOpen: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    if (isActive) {
+      toggleBlock(editor, BlockType.Heading);
+      return;
+    }
+    setAnchor(evt.currentTarget.getBoundingClientRect());
+  };
+  return (
+    <PopOut
+      anchor={anchor}
+      offset={5}
+      position="Top"
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: () => setAnchor(undefined),
+            clickOutsideDeactivates: true,
+            isKeyForward: (evt: KeyboardEvent) =>
+              evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Menu style={{ padding: config.space.S100 }}>
+            <Box gap="100">
+              <TooltipProvider
+                tooltip={<BtnTooltip text="Heading 1" shortCode={`${modKey} + 1`} />}
+                delay={500}
+              >
+                {(triggerRef) => (
+                  <IconButton
+                    ref={triggerRef}
+                    onClick={() => handleMenuSelect(1)}
+                    size="400"
+                    radii="300"
+                  >
+                    <Icon size="200" src={Icons.Heading1} />
+                  </IconButton>
+                )}
+              </TooltipProvider>
+              <TooltipProvider
+                tooltip={<BtnTooltip text="Heading 2" shortCode={`${modKey} + 2`} />}
+                delay={500}
+              >
+                {(triggerRef) => (
+                  <IconButton
+                    ref={triggerRef}
+                    onClick={() => handleMenuSelect(2)}
+                    size="400"
+                    radii="300"
+                  >
+                    <Icon size="200" src={Icons.Heading2} />
+                  </IconButton>
+                )}
+              </TooltipProvider>
+              <TooltipProvider
+                tooltip={<BtnTooltip text="Heading 3" shortCode={`${modKey} + 3`} />}
+                delay={500}
+              >
+                {(triggerRef) => (
+                  <IconButton
+                    ref={triggerRef}
+                    onClick={() => handleMenuSelect(3)}
+                    size="400"
+                    radii="300"
+                  >
+                    <Icon size="200" src={Icons.Heading3} />
+                  </IconButton>
+                )}
+              </TooltipProvider>
+            </Box>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <IconButton
+        style={{ width: 'unset' }}
+        variant="SurfaceVariant"
+        onClick={handleMenuOpen}
+        aria-pressed={isActive}
+        size="400"
+        radii="300"
+      >
+        <Icon size="200" src={level ? Icons[`Heading${level}`] : Icons.Heading1} />
+        <Icon size="200" src={isActive ? Icons.Cross : Icons.ChevronBottom} />
+      </IconButton>
+    </PopOut>
+  );
+}
+
+type ExitFormattingProps = { tooltip: ReactNode };
+export function ExitFormatting({ tooltip }: ExitFormattingProps) {
+  const editor = useSlate();
+
+  const handleClick = () => {
+    if (isAnyMarkActive(editor)) {
+      removeAllMark(editor);
+    } else if (!isBlockActive(editor, BlockType.Paragraph)) {
+      toggleBlock(editor, BlockType.Paragraph);
+    }
+    ReactEditor.focus(editor);
+  };
+
+  return (
+    <TooltipProvider tooltip={tooltip} delay={500}>
+      {(triggerRef) => (
+        <IconButton
+          ref={triggerRef}
+          variant="SurfaceVariant"
+          onClick={handleClick}
+          size="400"
+          radii="300"
+        >
+          <Text size="B400">{`Exit ${KeySymbol.Hyper}`}</Text>
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
+export function Toolbar() {
+  const editor = useSlate();
+  const modKey = isMacOS() ? KeySymbol.Command : 'Ctrl';
+  const disableInline = isBlockActive(editor, BlockType.CodeBlock);
+
+  const canEscape = isBlockActive(editor, BlockType.Paragraph)
+    ? isAnyMarkActive(editor)
+    : ReactEditor.isFocused(editor);
+  const [isMarkdown, setIsMarkdown] = useSetting(settingsAtom, 'isMarkdown');
+
+  return (
+    <Box className={css.EditorToolbarBase}>
+      <Scroll direction="Horizontal" size="0">
+        <Box className={css.EditorToolbar} alignItems="Center" gap="300">
+          <>
+            <Box shrink="No" gap="100">
+              <MarkButton
+                format={MarkType.Bold}
+                icon={Icons.Bold}
+                tooltip={<BtnTooltip text="Bold" shortCode={`${modKey} + B`} />}
+              />
+              <MarkButton
+                format={MarkType.Italic}
+                icon={Icons.Italic}
+                tooltip={<BtnTooltip text="Italic" shortCode={`${modKey} + I`} />}
+              />
+              <MarkButton
+                format={MarkType.Underline}
+                icon={Icons.Underline}
+                tooltip={<BtnTooltip text="Underline" shortCode={`${modKey} + U`} />}
+              />
+              <MarkButton
+                format={MarkType.StrikeThrough}
+                icon={Icons.Strike}
+                tooltip={<BtnTooltip text="Strike Through" shortCode={`${modKey} + S`} />}
+              />
+              <MarkButton
+                format={MarkType.Code}
+                icon={Icons.Code}
+                tooltip={<BtnTooltip text="Inline Code" shortCode={`${modKey} + [`} />}
+              />
+              <MarkButton
+                format={MarkType.Spoiler}
+                icon={Icons.EyeBlind}
+                tooltip={<BtnTooltip text="Spoiler" shortCode={`${modKey} + H`} />}
+              />
+            </Box>
+            <Line variant="SurfaceVariant" direction="Vertical" style={{ height: toRem(12) }} />
+          </>
+          <Box shrink="No" gap="100">
+            <BlockButton
+              format={BlockType.BlockQuote}
+              icon={Icons.BlockQuote}
+              tooltip={<BtnTooltip text="Block Quote" shortCode={`${modKey} + '`} />}
+            />
+            <BlockButton
+              format={BlockType.CodeBlock}
+              icon={Icons.BlockCode}
+              tooltip={<BtnTooltip text="Block Code" shortCode={`${modKey} + ;`} />}
+            />
+            <BlockButton
+              format={BlockType.OrderedList}
+              icon={Icons.OrderList}
+              tooltip={<BtnTooltip text="Ordered List" shortCode={`${modKey} + 7`} />}
+            />
+            <BlockButton
+              format={BlockType.UnorderedList}
+              icon={Icons.UnorderList}
+              tooltip={<BtnTooltip text="Unordered List" shortCode={`${modKey} + 8`} />}
+            />
+            <HeadingBlockButton />
+          </Box>
+          {canEscape && (
+            <>
+              <Line variant="SurfaceVariant" direction="Vertical" style={{ height: toRem(12) }} />
+              <Box shrink="No" gap="100">
+                <ExitFormatting
+                  tooltip={
+                    <BtnTooltip text="Exit Formatting" shortCode={`Escape, ${modKey} + E`} />
+                  }
+                />
+              </Box>
+            </>
+          )}
+          <Box className={css.MarkdownBtnBox} shrink="No" grow="Yes" justifyContent="End">
+            <TooltipProvider
+              align="End"
+              tooltip={<BtnTooltip text="Toggle Markdown" />}
+              delay={500}
+            >
+              {(triggerRef) => (
+                <IconButton
+                  ref={triggerRef}
+                  variant="SurfaceVariant"
+                  onClick={() => setIsMarkdown(!isMarkdown)}
+                  aria-pressed={isMarkdown}
+                  size="300"
+                  radii="300"
+                  disabled={disableInline || !!isAnyMarkActive(editor)}
+                >
+                  <Icon size="200" src={Icons.Markdown} filled={isMarkdown} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+            <span />
+          </Box>
+        </Box>
+      </Scroll>
+    </Box>
+  );
+}

src/app/components/editor/autocomplete/AutocompleteMenu.css.tsx

@@ -0,0 +1,35 @@
+import { style } from '@vanilla-extract/css';
+import { DefaultReset, config } from 'folds';
+
+export const AutocompleteMenuBase = style([
+  DefaultReset,
+  {
+    position: 'relative',
+  },
+]);
+
+export const AutocompleteMenuContainer = style([
+  DefaultReset,
+  {
+    position: 'absolute',
+    bottom: config.space.S200,
+    left: 0,
+    right: 0,
+    zIndex: config.zIndex.Max,
+  },
+]);
+
+export const AutocompleteMenu = style([
+  DefaultReset,
+  {
+    maxHeight: '30vh',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+]);
+
+export const AutocompleteMenuHeader = style([
+  DefaultReset,
+  { padding: `0 ${config.space.S300}`, flexShrink: 0 },
+]);

src/app/components/editor/autocomplete/AutocompleteMenu.tsx

@@ -0,0 +1,52 @@
+import React, { ReactNode } from 'react';
+import FocusTrap from 'focus-trap-react';
+import { isKeyHotkey } from 'is-hotkey';
+import { Header, Menu, Scroll, config } from 'folds';
+
+import * as css from './AutocompleteMenu.css';
+import { preventScrollWithArrowKey, stopPropagation } from '../../../utils/keyboard';
+import { useAlive } from '../../../hooks/useAlive';
+
+type AutocompleteMenuProps = {
+  requestClose: () => void;
+  headerContent: ReactNode;
+  children: ReactNode;
+};
+export function AutocompleteMenu({ headerContent, requestClose, children }: AutocompleteMenuProps) {
+  const alive = useAlive();
+
+  const handleDeactivate = () => {
+    if (alive()) {
+      // The component is unmounted so we will not call for `requestClose`
+      requestClose();
+    }
+  };
+
+  return (
+    <div className={css.AutocompleteMenuBase}>
+      <div className={css.AutocompleteMenuContainer}>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onPostDeactivate: handleDeactivate,
+            returnFocusOnDeactivate: false,
+            clickOutsideDeactivates: true,
+            allowOutsideClick: true,
+            isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
+            isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Menu className={css.AutocompleteMenu}>
+            <Header className={css.AutocompleteMenuHeader} size="400">
+              {headerContent}
+            </Header>
+            <Scroll style={{ flexGrow: 1 }} onKeyDown={preventScrollWithArrowKey}>
+              <div style={{ padding: config.space.S200 }}>{children}</div>
+            </Scroll>
+          </Menu>
+        </FocusTrap>
+      </div>
+    </div>
+  );
+}

src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx

@@ -0,0 +1,129 @@
+import React, { KeyboardEvent as ReactKeyboardEvent, useEffect, useMemo } from 'react';
+import { Editor } from 'slate';
+import { Box, MenuItem, Text, toRem } from 'folds';
+import { Room } from 'matrix-js-sdk';
+
+import { AutocompleteQuery } from './autocompleteQuery';
+import { AutocompleteMenu } from './AutocompleteMenu';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { UseAsyncSearchOptions, useAsyncSearch } from '../../../hooks/useAsyncSearch';
+import { onTabPress } from '../../../utils/keyboard';
+import { createEmoticonElement, moveCursor, replaceWithElement } from '../utils';
+import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
+import { useRelevantImagePacks } from '../../../hooks/useImagePacks';
+import { IEmoji, emojis } from '../../../plugins/emoji';
+import { useKeyDown } from '../../../hooks/useKeyDown';
+import { mxcUrlToHttp } from '../../../utils/matrix';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { ImageUsage, PackImageReader } from '../../../plugins/custom-emoji';
+import { getEmoticonSearchStr } from '../../../plugins/utils';
+
+type EmoticonCompleteHandler = (key: string, shortcode: string) => void;
+
+type EmoticonSearchItem = PackImageReader | IEmoji;
+
+type EmoticonAutocompleteProps = {
+  imagePackRooms: Room[];
+  editor: Editor;
+  query: AutocompleteQuery<string>;
+  requestClose: () => void;
+};
+
+const SEARCH_OPTIONS: UseAsyncSearchOptions = {
+  matchOptions: {
+    contain: true,
+  },
+};
+
+export function EmoticonAutocomplete({
+  imagePackRooms,
+  editor,
+  query,
+  requestClose,
+}: EmoticonAutocompleteProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+
+  const imagePacks = useRelevantImagePacks(ImageUsage.Emoticon, imagePackRooms);
+  const recentEmoji = useRecentEmoji(mx, 20);
+
+  const searchList = useMemo(() => {
+    const list: Array<EmoticonSearchItem> = [];
+    return list.concat(
+      imagePacks.flatMap((pack) => pack.getImages(ImageUsage.Emoticon)),
+      emojis
+    );
+  }, [imagePacks]);
+
+  const [result, search, resetSearch] = useAsyncSearch(
+    searchList,
+    getEmoticonSearchStr,
+    SEARCH_OPTIONS
+  );
+  const autoCompleteEmoticon = result ? result.items.slice(0, 20) : recentEmoji;
+
+  useEffect(() => {
+    if (query.text) search(query.text);
+    else resetSearch();
+  }, [query.text, search, resetSearch]);
+
+  const handleAutocomplete: EmoticonCompleteHandler = (key, shortcode) => {
+    const emoticonEl = createEmoticonElement(key, shortcode);
+    replaceWithElement(editor, query.range, emoticonEl);
+    moveCursor(editor, true);
+    requestClose();
+  };
+
+  useKeyDown(window, (evt: KeyboardEvent) => {
+    onTabPress(evt, () => {
+      if (autoCompleteEmoticon.length === 0) return;
+      const emoticon = autoCompleteEmoticon[0];
+      const key = 'url' in emoticon ? emoticon.url : emoticon.unicode;
+      handleAutocomplete(key, emoticon.shortcode);
+    });
+  });
+
+  return autoCompleteEmoticon.length === 0 ? null : (
+    <AutocompleteMenu headerContent={<Text size="L400">Emojis</Text>} requestClose={requestClose}>
+      {autoCompleteEmoticon.map((emoticon) => {
+        const isCustomEmoji = 'url' in emoticon;
+        const key = isCustomEmoji ? emoticon.url : emoticon.unicode;
+        return (
+          <MenuItem
+            key={emoticon.shortcode + key}
+            as="button"
+            radii="300"
+            onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
+              onTabPress(evt, () => handleAutocomplete(key, emoticon.shortcode))
+            }
+            onClick={() => handleAutocomplete(key, emoticon.shortcode)}
+            before={
+              isCustomEmoji ? (
+                <Box
+                  shrink="No"
+                  as="img"
+                  src={mxcUrlToHttp(mx, key, useAuthentication) || key}
+                  alt={emoticon.shortcode}
+                  style={{ width: toRem(24), height: toRem(24), objectFit: 'contain' }}
+                />
+              ) : (
+                <Box
+                  shrink="No"
+                  as="span"
+                  display="InlineFlex"
+                  style={{ fontSize: toRem(24), lineHeight: toRem(24) }}
+                >
+                  {key}
+                </Box>
+              )
+            }
+          >
+            <Text style={{ flexGrow: 1 }} size="B400" truncate>
+              :{emoticon.shortcode}:
+            </Text>
+          </MenuItem>
+        );
+      })}
+    </AutocompleteMenu>
+  );
+}

src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx

@@ -0,0 +1,191 @@
+import React, { KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect } from 'react';
+import { Editor } from 'slate';
+import { Avatar, Icon, Icons, MenuItem, Text } from 'folds';
+import { JoinRule, MatrixClient } from 'matrix-js-sdk';
+import { useAtomValue } from 'jotai';
+
+import { createMentionElement, moveCursor, replaceWithElement } from '../utils';
+import { getDirectRoomAvatarUrl } from '../../../utils/room';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { AutocompleteQuery } from './autocompleteQuery';
+import { AutocompleteMenu } from './AutocompleteMenu';
+import { getMxIdServer, validMxId } from '../../../utils/matrix';
+import { UseAsyncSearchOptions, useAsyncSearch } from '../../../hooks/useAsyncSearch';
+import { onTabPress } from '../../../utils/keyboard';
+import { useKeyDown } from '../../../hooks/useKeyDown';
+import { mDirectAtom } from '../../../state/mDirectList';
+import { allRoomsAtom } from '../../../state/room-list/roomList';
+import { factoryRoomIdByActivity } from '../../../utils/sort';
+import { RoomAvatar, RoomIcon } from '../../room-avatar';
+import { getViaServers } from '../../../plugins/via-servers';
+
+type MentionAutoCompleteHandler = (roomAliasOrId: string, name: string) => void;
+
+const roomAliasFromQueryText = (mx: MatrixClient, text: string) =>
+  validMxId(`#${text}`)
+    ? `#${text}`
+    : `#${text}${text.endsWith(':') ? '' : ':'}${getMxIdServer(mx.getUserId() ?? '')}`;
+
+function UnknownRoomMentionItem({
+  query,
+  handleAutocomplete,
+}: {
+  query: AutocompleteQuery<string>;
+  handleAutocomplete: MentionAutoCompleteHandler;
+}) {
+  const mx = useMatrixClient();
+  const roomAlias: string = roomAliasFromQueryText(mx, query.text);
+
+  const handleSelect = () => handleAutocomplete(roomAlias, roomAlias);
+
+  return (
+    <MenuItem
+      as="button"
+      radii="300"
+      onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) => onTabPress(evt, handleSelect)}
+      onClick={handleSelect}
+      before={
+        <Avatar size="200">
+          <Icon src={Icons.Hash} size="100" />
+        </Avatar>
+      }
+    >
+      <Text style={{ flexGrow: 1 }} size="B400">
+        {roomAlias}
+      </Text>
+    </MenuItem>
+  );
+}
+
+type RoomMentionAutocompleteProps = {
+  roomId: string;
+  editor: Editor;
+  query: AutocompleteQuery<string>;
+  requestClose: () => void;
+};
+
+const SEARCH_OPTIONS: UseAsyncSearchOptions = {
+  matchOptions: {
+    contain: true,
+  },
+};
+
+export function RoomMentionAutocomplete({
+  roomId,
+  editor,
+  query,
+  requestClose,
+}: RoomMentionAutocompleteProps) {
+  const mx = useMatrixClient();
+  const mDirects = useAtomValue(mDirectAtom);
+
+  const allRooms = useAtomValue(allRoomsAtom).sort(factoryRoomIdByActivity(mx));
+
+  const [result, search, resetSearch] = useAsyncSearch(
+    allRooms,
+    useCallback(
+      (rId) => {
+        const r = mx.getRoom(rId);
+        if (!r) return 'Unknown Room';
+        const alias = r.getCanonicalAlias();
+        if (alias) return [r.name, alias];
+        return r.name;
+      },
+      [mx]
+    ),
+    SEARCH_OPTIONS
+  );
+
+  const autoCompleteRoomIds = result ? result.items.slice(0, 20) : allRooms.slice(0, 20);
+
+  useEffect(() => {
+    if (query.text) search(query.text);
+    else resetSearch();
+  }, [query.text, search, resetSearch]);
+
+  const handleAutocomplete: MentionAutoCompleteHandler = (roomAliasOrId, name) => {
+    const mentionRoom = mx.getRoom(roomAliasOrId);
+    const viaServers = mentionRoom ? getViaServers(mentionRoom) : undefined;
+    const mentionEl = createMentionElement(
+      roomAliasOrId,
+      name.startsWith('#') ? name : `#${name}`,
+      roomId === roomAliasOrId || mx.getRoom(roomId)?.getCanonicalAlias() === roomAliasOrId,
+      undefined,
+      viaServers
+    );
+    replaceWithElement(editor, query.range, mentionEl);
+    moveCursor(editor, true);
+    requestClose();
+  };
+
+  useKeyDown(window, (evt: KeyboardEvent) => {
+    onTabPress(evt, () => {
+      if (autoCompleteRoomIds.length === 0) {
+        const alias = roomAliasFromQueryText(mx, query.text);
+        handleAutocomplete(alias, alias);
+        return;
+      }
+      const rId = autoCompleteRoomIds[0];
+      const r = mx.getRoom(rId);
+      const name = r?.name ?? rId;
+      handleAutocomplete(r?.getCanonicalAlias() ?? rId, name);
+    });
+  });
+
+  return (
+    <AutocompleteMenu headerContent={<Text size="L400">Rooms</Text>} requestClose={requestClose}>
+      {autoCompleteRoomIds.length === 0 ? (
+        <UnknownRoomMentionItem query={query} handleAutocomplete={handleAutocomplete} />
+      ) : (
+        autoCompleteRoomIds.map((rId) => {
+          const room = mx.getRoom(rId);
+          if (!room) return null;
+          const dm = mDirects.has(room.roomId);
+
+          const handleSelect = () => handleAutocomplete(room.getCanonicalAlias() ?? rId, room.name);
+
+          return (
+            <MenuItem
+              key={rId}
+              as="button"
+              radii="300"
+              onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
+                onTabPress(evt, handleSelect)
+              }
+              onClick={handleSelect}
+              after={
+                <Text size="T200" priority="300" truncate>
+                  {room.getCanonicalAlias() ?? ''}
+                </Text>
+              }
+              before={
+                <Avatar size="200">
+                  {dm ? (
+                    <RoomAvatar
+                      roomId={room.roomId}
+                      src={getDirectRoomAvatarUrl(mx, room)}
+                      alt={room.name}
+                      renderFallback={() => (
+                        <RoomIcon
+                          size="50"
+                          joinRule={room.getJoinRule() ?? JoinRule.Restricted}
+                          filled
+                        />
+                      )}
+                    />
+                  ) : (
+                    <RoomIcon size="100" joinRule={room.getJoinRule()} space={room.isSpaceRoom()} />
+                  )}
+                </Avatar>
+              }
+            >
+              <Text style={{ flexGrow: 1 }} size="B400" truncate>
+                {room.name}
+              </Text>
+            </MenuItem>
+          );
+        })
+      )}
+    </AutocompleteMenu>
+  );
+}

src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx

@@ -0,0 +1,194 @@
+import React, { useEffect, KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { Editor } from 'slate';
+import { Avatar, Icon, Icons, MenuItem, Text } from 'folds';
+import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
+
+import { AutocompleteQuery } from './autocompleteQuery';
+import { AutocompleteMenu } from './AutocompleteMenu';
+import { useRoomMembers } from '../../../hooks/useRoomMembers';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import {
+  SearchItemStrGetter,
+  UseAsyncSearchOptions,
+  useAsyncSearch,
+} from '../../../hooks/useAsyncSearch';
+import { onTabPress } from '../../../utils/keyboard';
+import { createMentionElement, moveCursor, replaceWithElement } from '../utils';
+import { useKeyDown } from '../../../hooks/useKeyDown';
+import { getMxIdLocalPart, getMxIdServer, validMxId } from '../../../utils/matrix';
+import { getMemberDisplayName, getMemberSearchStr } from '../../../utils/room';
+import { UserAvatar } from '../../user-avatar';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { Membership } from '../../../../types/matrix/room';
+
+type MentionAutoCompleteHandler = (userId: string, name: string) => void;
+
+const userIdFromQueryText = (mx: MatrixClient, text: string) =>
+  validMxId(`@${text}`)
+    ? `@${text}`
+    : `@${text}${text.endsWith(':') ? '' : ':'}${getMxIdServer(mx.getUserId() ?? '')}`;
+
+function UnknownMentionItem({
+  userId,
+  name,
+  handleAutocomplete,
+}: {
+  userId: string;
+  name: string;
+  handleAutocomplete: MentionAutoCompleteHandler;
+}) {
+  return (
+    <MenuItem
+      as="button"
+      radii="300"
+      onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
+        onTabPress(evt, () => handleAutocomplete(userId, name))
+      }
+      onClick={() => handleAutocomplete(userId, name)}
+      before={
+        <Avatar size="200">
+          <UserAvatar
+            userId={userId}
+            renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+          />
+        </Avatar>
+      }
+    >
+      <Text style={{ flexGrow: 1 }} size="B400">
+        {name}
+      </Text>
+    </MenuItem>
+  );
+}
+
+type UserMentionAutocompleteProps = {
+  room: Room;
+  editor: Editor;
+  query: AutocompleteQuery<string>;
+  requestClose: () => void;
+};
+
+const withAllowedMembership = (member: RoomMember): boolean =>
+  member.membership === Membership.Join ||
+  member.membership === Membership.Invite ||
+  member.membership === Membership.Knock;
+
+const SEARCH_OPTIONS: UseAsyncSearchOptions = {
+  limit: 1000,
+  matchOptions: {
+    contain: true,
+  },
+};
+
+const mxIdToName = (mxId: string) => getMxIdLocalPart(mxId) ?? mxId;
+const getRoomMemberStr: SearchItemStrGetter<RoomMember> = (m, query) =>
+  getMemberSearchStr(m, query, mxIdToName);
+
+export function UserMentionAutocomplete({
+  room,
+  editor,
+  query,
+  requestClose,
+}: UserMentionAutocompleteProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const roomId: string = room.roomId!;
+  const roomAliasOrId = room.getCanonicalAlias() || roomId;
+  const members = useRoomMembers(mx, roomId);
+
+  const [result, search, resetSearch] = useAsyncSearch(members, getRoomMemberStr, SEARCH_OPTIONS);
+  const autoCompleteMembers = (result ? result.items.slice(0, 20) : members.slice(0, 20)).filter(
+    withAllowedMembership
+  );
+
+  useEffect(() => {
+    if (query.text) search(query.text);
+    else resetSearch();
+  }, [query.text, search, resetSearch]);
+
+  const handleAutocomplete: MentionAutoCompleteHandler = (uId, name) => {
+    const mentionEl = createMentionElement(
+      uId,
+      name.startsWith('@') ? name : `@${name}`,
+      mx.getUserId() === uId || roomAliasOrId === uId
+    );
+    replaceWithElement(editor, query.range, mentionEl);
+    moveCursor(editor, true);
+    requestClose();
+  };
+
+  useKeyDown(window, (evt: KeyboardEvent) => {
+    onTabPress(evt, () => {
+      if (query.text === 'room') {
+        handleAutocomplete(roomAliasOrId, '@room');
+        return;
+      }
+      if (autoCompleteMembers.length === 0) {
+        const userId = userIdFromQueryText(mx, query.text);
+        handleAutocomplete(userId, userId);
+        return;
+      }
+      const roomMember = autoCompleteMembers[0];
+      handleAutocomplete(roomMember.userId, roomMember.name);
+    });
+  });
+
+  const getName = (member: RoomMember) =>
+    getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId) ?? member.userId;
+
+  return (
+    <AutocompleteMenu headerContent={<Text size="L400">Mentions</Text>} requestClose={requestClose}>
+      {query.text === 'room' && (
+        <UnknownMentionItem
+          userId={roomAliasOrId}
+          name="@room"
+          handleAutocomplete={handleAutocomplete}
+        />
+      )}
+      {autoCompleteMembers.length === 0 ? (
+        <UnknownMentionItem
+          userId={userIdFromQueryText(mx, query.text)}
+          name={userIdFromQueryText(mx, query.text)}
+          handleAutocomplete={handleAutocomplete}
+        />
+      ) : (
+        autoCompleteMembers.map((roomMember) => {
+          const avatarMxcUrl = roomMember.getMxcAvatarUrl();
+          const avatarUrl = avatarMxcUrl
+            ? mx.mxcUrlToHttp(avatarMxcUrl, 32, 32, 'crop', undefined, false, useAuthentication)
+            : undefined;
+          return (
+            <MenuItem
+              key={roomMember.userId}
+              as="button"
+              radii="300"
+              onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
+                onTabPress(evt, () => handleAutocomplete(roomMember.userId, getName(roomMember)))
+              }
+              onClick={() => handleAutocomplete(roomMember.userId, getName(roomMember))}
+              after={
+                <Text size="T200" priority="300" truncate>
+                  {roomMember.userId}
+                </Text>
+              }
+              before={
+                <Avatar size="200">
+                  <UserAvatar
+                    userId={roomMember.userId}
+                    src={avatarUrl ?? undefined}
+                    alt={getName(roomMember)}
+                    renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+                  />
+                </Avatar>
+              }
+            >
+              <Text style={{ flexGrow: 1 }} size="B400" truncate>
+                {getName(roomMember)}
+              </Text>
+            </MenuItem>
+          );
+        })
+      )}
+    </AutocompleteMenu>
+  );
+}

src/app/components/editor/autocomplete/autocompleteQuery.ts

@@ -0,0 +1,49 @@
+import { BaseRange, Editor } from 'slate';
+
+export enum AutocompletePrefix {
+  RoomMention = '#',
+  UserMention = '@',
+  Emoticon = ':',
+  Command = '/',
+}
+export const AUTOCOMPLETE_PREFIXES: readonly AutocompletePrefix[] = [
+  AutocompletePrefix.RoomMention,
+  AutocompletePrefix.UserMention,
+  AutocompletePrefix.Emoticon,
+  AutocompletePrefix.Command,
+];
+
+export type AutocompleteQuery<TPrefix extends string> = {
+  range: BaseRange;
+  prefix: TPrefix;
+  text: string;
+};
+
+export const getAutocompletePrefix = <TPrefix extends string>(
+  editor: Editor,
+  queryRange: BaseRange,
+  validPrefixes: readonly TPrefix[]
+): TPrefix | undefined => {
+  const world = Editor.string(editor, queryRange);
+  return validPrefixes.find((p) => world.startsWith(p));
+};
+
+export const getAutocompleteQueryText = (
+  editor: Editor,
+  queryRange: BaseRange,
+  prefix: string
+): string => Editor.string(editor, queryRange).slice(prefix.length);
+
+export const getAutocompleteQuery = <TPrefix extends string>(
+  editor: Editor,
+  queryRange: BaseRange,
+  validPrefixes: readonly TPrefix[]
+): AutocompleteQuery<TPrefix> | undefined => {
+  const prefix = getAutocompletePrefix(editor, queryRange, validPrefixes);
+  if (!prefix) return undefined;
+  return {
+    range: queryRange,
+    prefix,
+    text: getAutocompleteQueryText(editor, queryRange, prefix),
+  };
+};

src/app/components/editor/autocomplete/index.ts

@@ -0,0 +1,5 @@
+export * from './AutocompleteMenu';
+export * from './autocompleteQuery';
+export * from './RoomMentionAutocomplete';
+export * from './UserMentionAutocomplete';
+export * from './EmoticonAutocomplete';

src/app/components/editor/index.ts

@@ -0,0 +1,9 @@
+export * from './autocomplete';
+export * from './utils';
+export * from './Editor';
+export * from './Elements';
+export * from './keyboard';
+export * from './output';
+export * from './Toolbar';
+export * from './input';
+export * from './types';

src/app/components/editor/input.ts

@@ -0,0 +1,457 @@
+/* eslint-disable no-param-reassign */
+import { Descendant, Text } from 'slate';
+import parse from 'html-dom-parser';
+import { ChildNode, Element, isText, isTag } from 'domhandler';
+
+import { sanitizeCustomHtml } from '../../utils/sanitize';
+import { BlockType, MarkType } from './types';
+import {
+  BlockQuoteElement,
+  CodeBlockElement,
+  CodeLineElement,
+  EmoticonElement,
+  HeadingElement,
+  HeadingLevel,
+  InlineElement,
+  MentionElement,
+  OrderedListElement,
+  ParagraphElement,
+  UnorderedListElement,
+} from './slate';
+import { createEmoticonElement, createMentionElement } from './utils';
+import {
+  parseMatrixToRoom,
+  parseMatrixToRoomEvent,
+  parseMatrixToUser,
+  testMatrixTo,
+} from '../../plugins/matrix-to';
+import { tryDecodeURIComponent } from '../../utils/dom';
+import {
+  escapeMarkdownInlineSequences,
+  escapeMarkdownBlockSequences,
+} from '../../plugins/markdown';
+
+type ProcessTextCallback = (text: string) => string;
+
+const getText = (node: ChildNode): string => {
+  if (isText(node)) {
+    return node.data;
+  }
+  if (isTag(node)) {
+    return node.children.map((child) => getText(child)).join('');
+  }
+  return '';
+};
+
+const getInlineNodeMarkType = (node: Element): MarkType | undefined => {
+  if (node.name === 'b' || node.name === 'strong') {
+    return MarkType.Bold;
+  }
+
+  if (node.name === 'i' || node.name === 'em') {
+    return MarkType.Italic;
+  }
+
+  if (node.name === 'u') {
+    return MarkType.Underline;
+  }
+
+  if (node.name === 's' || node.name === 'del') {
+    return MarkType.StrikeThrough;
+  }
+
+  if (node.name === 'code') {
+    if (node.parent && 'name' in node.parent && node.parent.name === 'pre') {
+      return undefined; // Don't apply `Code` mark inside a <pre> tag
+    }
+    return MarkType.Code;
+  }
+
+  if (node.name === 'span' && node.attribs['data-mx-spoiler'] !== undefined) {
+    return MarkType.Spoiler;
+  }
+
+  return undefined;
+};
+
+const getInlineMarkElement = (
+  markType: MarkType,
+  node: Element,
+  getChild: (child: ChildNode) => InlineElement[]
+): InlineElement[] => {
+  const children = node.children.flatMap(getChild);
+  const mdSequence = node.attribs['data-md'];
+  if (mdSequence !== undefined) {
+    children.unshift({ text: mdSequence });
+    children.push({ text: mdSequence });
+    return children;
+  }
+  children.forEach((child) => {
+    if (Text.isText(child)) {
+      child[markType] = true;
+    }
+  });
+  return children;
+};
+
+const getInlineNonMarkElement = (node: Element): MentionElement | EmoticonElement | undefined => {
+  if (node.name === 'img' && node.attribs['data-mx-emoticon'] !== undefined) {
+    const { src, alt } = node.attribs;
+    if (!src) return undefined;
+    return createEmoticonElement(src, alt || 'Unknown Emoji');
+  }
+  if (node.name === 'a') {
+    const href = tryDecodeURIComponent(node.attribs.href);
+    if (typeof href !== 'string') return undefined;
+    if (testMatrixTo(href)) {
+      const userMention = parseMatrixToUser(href);
+      if (userMention) {
+        return createMentionElement(userMention, getText(node) || userMention, false);
+      }
+      const roomMention = parseMatrixToRoom(href);
+      if (roomMention) {
+        return createMentionElement(
+          roomMention.roomIdOrAlias,
+          getText(node) || roomMention.roomIdOrAlias,
+          false,
+          undefined,
+          roomMention.viaServers
+        );
+      }
+      const eventMention = parseMatrixToRoomEvent(href);
+      if (eventMention) {
+        return createMentionElement(
+          eventMention.roomIdOrAlias,
+          getText(node) || eventMention.roomIdOrAlias,
+          false,
+          eventMention.eventId,
+          eventMention.viaServers
+        );
+      }
+    }
+  }
+  return undefined;
+};
+
+const getInlineElement = (node: ChildNode, processText: ProcessTextCallback): InlineElement[] => {
+  if (isText(node)) {
+    return [{ text: processText(node.data) }];
+  }
+
+  if (isTag(node)) {
+    const markType = getInlineNodeMarkType(node);
+    if (markType) {
+      return getInlineMarkElement(markType, node, (child) => {
+        if (markType === MarkType.Code) return [{ text: getText(child) }];
+        return getInlineElement(child, processText);
+      });
+    }
+
+    const inlineNode = getInlineNonMarkElement(node);
+    if (inlineNode) return [inlineNode];
+
+    if (node.name === 'a') {
+      const children = node.childNodes.flatMap((child) => getInlineElement(child, processText));
+      children.unshift({ text: '[' });
+      children.push({ text: `](${node.attribs.href})` });
+      return children;
+    }
+
+    return node.childNodes.flatMap((child) => getInlineElement(child, processText));
+  }
+
+  return [];
+};
+
+const parseBlockquoteNode = (
+  node: Element,
+  processText: ProcessTextCallback
+): BlockQuoteElement[] | ParagraphElement[] => {
+  const quoteLines: Array<InlineElement[]> = [];
+  let lineHolder: InlineElement[] = [];
+
+  const appendLine = () => {
+    if (lineHolder.length === 0) return;
+
+    quoteLines.push(lineHolder);
+    lineHolder = [];
+  };
+
+  node.children.forEach((child) => {
+    if (isText(child)) {
+      lineHolder.push({ text: processText(child.data) });
+      return;
+    }
+    if (isTag(child)) {
+      if (child.name === 'br') {
+        lineHolder.push({ text: '' });
+        appendLine();
+        return;
+      }
+
+      if (child.name === 'p') {
+        appendLine();
+        quoteLines.push(child.children.flatMap((c) => getInlineElement(c, processText)));
+        return;
+      }
+
+      lineHolder.push(...getInlineElement(child, processText));
+    }
+  });
+  appendLine();
+
+  const mdSequence = node.attribs['data-md'];
+  if (mdSequence !== undefined) {
+    return quoteLines.map((lineChildren) => ({
+      type: BlockType.Paragraph,
+      children: [{ text: `${mdSequence} ` }, ...lineChildren],
+    }));
+  }
+
+  return [
+    {
+      type: BlockType.BlockQuote,
+      children: quoteLines.map((lineChildren) => ({
+        type: BlockType.QuoteLine,
+        children: lineChildren,
+      })),
+    },
+  ];
+};
+const parseCodeBlockNode = (node: Element): CodeBlockElement[] | ParagraphElement[] => {
+  const codeLines = getText(node).trim().split('\n');
+
+  const mdSequence = node.attribs['data-md'];
+  if (mdSequence !== undefined) {
+    const pLines = codeLines.map<ParagraphElement>((text) => ({
+      type: BlockType.Paragraph,
+      children: [{ text }],
+    }));
+    const childCode = node.children[0];
+    const className =
+      isTag(childCode) && childCode.tagName === 'code' ? childCode.attribs.class ?? '' : '';
+    const prefix = { text: `${mdSequence}${className.replace('language-', '')}` };
+    const suffix = { text: mdSequence };
+    return [
+      { type: BlockType.Paragraph, children: [prefix] },
+      ...pLines,
+      { type: BlockType.Paragraph, children: [suffix] },
+    ];
+  }
+
+  return [
+    {
+      type: BlockType.CodeBlock,
+      children: codeLines.map<CodeLineElement>((text) => ({
+        type: BlockType.CodeLine,
+        children: [{ text }],
+      })),
+    },
+  ];
+};
+const parseListNode = (
+  node: Element,
+  processText: ProcessTextCallback
+): OrderedListElement[] | UnorderedListElement[] | ParagraphElement[] => {
+  const listLines: Array<InlineElement[]> = [];
+  let lineHolder: InlineElement[] = [];
+
+  const appendLine = () => {
+    if (lineHolder.length === 0) return;
+
+    listLines.push(lineHolder);
+    lineHolder = [];
+  };
+
+  node.children.forEach((child) => {
+    if (isText(child)) {
+      lineHolder.push({ text: processText(child.data) });
+      return;
+    }
+    if (isTag(child)) {
+      if (child.name === 'br') {
+        lineHolder.push({ text: '' });
+        appendLine();
+        return;
+      }
+
+      if (child.name === 'li') {
+        appendLine();
+        listLines.push(child.children.flatMap((c) => getInlineElement(c, processText)));
+        return;
+      }
+
+      lineHolder.push(...getInlineElement(child, processText));
+    }
+  });
+  appendLine();
+
+  const mdSequence = node.attribs['data-md'];
+  if (mdSequence !== undefined) {
+    const prefix = mdSequence || '-';
+    const [starOrHyphen] = prefix.match(/^\*|-$/) ?? [];
+    return listLines.map((lineChildren) => ({
+      type: BlockType.Paragraph,
+      children: [
+        { text: `${starOrHyphen ? `${starOrHyphen} ` : `${prefix}. `} ` },
+        ...lineChildren,
+      ],
+    }));
+  }
+
+  if (node.name === 'ol') {
+    return [
+      {
+        type: BlockType.OrderedList,
+        children: listLines.map((lineChildren) => ({
+          type: BlockType.ListItem,
+          children: lineChildren,
+        })),
+      },
+    ];
+  }
+
+  return [
+    {
+      type: BlockType.UnorderedList,
+      children: listLines.map((lineChildren) => ({
+        type: BlockType.ListItem,
+        children: lineChildren,
+      })),
+    },
+  ];
+};
+const parseHeadingNode = (
+  node: Element,
+  processText: ProcessTextCallback
+): HeadingElement | ParagraphElement => {
+  const children = node.children.flatMap((child) => getInlineElement(child, processText));
+
+  const headingMatch = node.name.match(/^h([123456])$/);
+  const [, g1AsLevel] = headingMatch ?? ['h3', '3'];
+  const level = parseInt(g1AsLevel, 10);
+
+  const mdSequence = node.attribs['data-md'];
+  if (mdSequence !== undefined) {
+    return {
+      type: BlockType.Paragraph,
+      children: [{ text: `${mdSequence} ` }, ...children],
+    };
+  }
+
+  return {
+    type: BlockType.Heading,
+    level: (level <= 3 ? level : 3) as HeadingLevel,
+    children,
+  };
+};
+
+export const domToEditorInput = (
+  domNodes: ChildNode[],
+  processText: ProcessTextCallback,
+  processLineStartText: ProcessTextCallback
+): Descendant[] => {
+  const children: Descendant[] = [];
+
+  let lineHolder: InlineElement[] = [];
+
+  const appendLine = () => {
+    if (lineHolder.length === 0) return;
+
+    children.push({
+      type: BlockType.Paragraph,
+      children: lineHolder,
+    });
+    lineHolder = [];
+  };
+
+  domNodes.forEach((node) => {
+    if (isText(node)) {
+      if (lineHolder.length === 0) {
+        // we are inserting first part of line
+        // it may contain block markdown starting data
+        // that we may need to escape.
+        lineHolder.push({ text: processLineStartText(node.data) });
+        return;
+      }
+      lineHolder.push({ text: processText(node.data) });
+      return;
+    }
+    if (isTag(node)) {
+      if (node.name === 'br') {
+        lineHolder.push({ text: '' });
+        appendLine();
+        return;
+      }
+
+      if (node.name === 'p') {
+        appendLine();
+        children.push({
+          type: BlockType.Paragraph,
+          children: node.children.flatMap((child) => getInlineElement(child, processText)),
+        });
+        return;
+      }
+
+      if (node.name === 'blockquote') {
+        appendLine();
+        children.push(...parseBlockquoteNode(node, processText));
+        return;
+      }
+      if (node.name === 'pre') {
+        appendLine();
+        children.push(...parseCodeBlockNode(node));
+        return;
+      }
+      if (node.name === 'ol' || node.name === 'ul') {
+        appendLine();
+        children.push(...parseListNode(node, processText));
+        return;
+      }
+
+      if (node.name.match(/^h[123456]$/)) {
+        appendLine();
+        children.push(parseHeadingNode(node, processText));
+        return;
+      }
+
+      lineHolder.push(...getInlineElement(node, processText));
+    }
+  });
+  appendLine();
+
+  return children;
+};
+
+export const htmlToEditorInput = (unsafeHtml: string, markdown?: boolean): Descendant[] => {
+  const sanitizedHtml = sanitizeCustomHtml(unsafeHtml);
+
+  const processText = (partText: string) => {
+    if (!markdown) return partText;
+    return escapeMarkdownInlineSequences(partText);
+  };
+
+  const domNodes = parse(sanitizedHtml);
+  const editorNodes = domToEditorInput(domNodes, processText, (lineStartText: string) => {
+    if (!markdown) return lineStartText;
+    return escapeMarkdownBlockSequences(lineStartText, processText);
+  });
+  return editorNodes;
+};
+
+export const plainToEditorInput = (text: string, markdown?: boolean): Descendant[] => {
+  const editorNodes: Descendant[] = text.split('\n').map((lineText) => {
+    const paragraphNode: ParagraphElement = {
+      type: BlockType.Paragraph,
+      children: [
+        {
+          text: markdown
+            ? escapeMarkdownBlockSequences(lineText, escapeMarkdownInlineSequences)
+            : lineText,
+        },
+      ],
+    };
+    return paragraphNode;
+  });
+  return editorNodes;
+};

src/app/components/editor/keyboard.ts

@@ -0,0 +1,116 @@
+import { isKeyHotkey } from 'is-hotkey';
+import { KeyboardEvent } from 'react';
+import { Editor, Element as SlateElement, Range, Transforms } from 'slate';
+import { isAnyMarkActive, isBlockActive, removeAllMark, toggleBlock, toggleMark } from './utils';
+import { BlockType, MarkType } from './types';
+
+export const INLINE_HOTKEYS: Record<string, MarkType> = {
+  'mod+b': MarkType.Bold,
+  'mod+i': MarkType.Italic,
+  'mod+u': MarkType.Underline,
+  'mod+s': MarkType.StrikeThrough,
+  'mod+[': MarkType.Code,
+  'mod+h': MarkType.Spoiler,
+};
+const INLINE_KEYS = Object.keys(INLINE_HOTKEYS);
+
+export const BLOCK_HOTKEYS: Record<string, BlockType> = {
+  'mod+7': BlockType.OrderedList,
+  'mod+8': BlockType.UnorderedList,
+  "mod+'": BlockType.BlockQuote,
+  'mod+;': BlockType.CodeBlock,
+};
+const BLOCK_KEYS = Object.keys(BLOCK_HOTKEYS);
+const isHeading1 = isKeyHotkey('mod+1');
+const isHeading2 = isKeyHotkey('mod+2');
+const isHeading3 = isKeyHotkey('mod+3');
+
+/**
+ * @return boolean true if shortcut is toggled.
+ */
+export const toggleKeyboardShortcut = (editor: Editor, event: KeyboardEvent<Element>): boolean => {
+  if (isKeyHotkey('backspace', event) && editor.selection && Range.isCollapsed(editor.selection)) {
+    const startPoint = Range.start(editor.selection);
+    if (startPoint.offset !== 0) return false;
+
+    const [parentNode, parentPath] = Editor.parent(editor, startPoint);
+    const parentLocation = { at: parentPath };
+    const [previousNode] = Editor.previous(editor, parentLocation) ?? [];
+    const [nextNode] = Editor.next(editor, parentLocation) ?? [];
+
+    if (Editor.isEditor(parentNode)) return false;
+
+    if (parentNode.type === BlockType.Heading) {
+      toggleBlock(editor, BlockType.Paragraph);
+      return true;
+    }
+    if (
+      parentNode.type === BlockType.CodeLine ||
+      parentNode.type === BlockType.QuoteLine ||
+      parentNode.type === BlockType.ListItem
+    ) {
+      // exit formatting only when line block
+      // is first of last of it's parent
+      if (!previousNode || !nextNode) {
+        toggleBlock(editor, BlockType.Paragraph);
+        return true;
+      }
+    }
+    // Unwrap paragraph children to put them
+    // in previous none paragraph element
+    if (SlateElement.isElement(previousNode) && previousNode.type !== BlockType.Paragraph) {
+      Transforms.unwrapNodes(editor, {
+        at: startPoint,
+      });
+    }
+    Editor.deleteBackward(editor);
+    return true;
+  }
+
+  if (isKeyHotkey('mod+e', event) || isKeyHotkey('escape', event)) {
+    if (isAnyMarkActive(editor)) {
+      removeAllMark(editor);
+      return true;
+    }
+
+    if (!isBlockActive(editor, BlockType.Paragraph)) {
+      toggleBlock(editor, BlockType.Paragraph);
+      return true;
+    }
+    return false;
+  }
+
+  const blockToggled = BLOCK_KEYS.find((hotkey) => {
+    if (isKeyHotkey(hotkey, event)) {
+      event.preventDefault();
+      toggleBlock(editor, BLOCK_HOTKEYS[hotkey]);
+      return true;
+    }
+    return false;
+  });
+  if (blockToggled) return true;
+  if (isHeading1(event)) {
+    toggleBlock(editor, BlockType.Heading, { level: 1 });
+    return true;
+  }
+  if (isHeading2(event)) {
+    toggleBlock(editor, BlockType.Heading, { level: 2 });
+    return true;
+  }
+  if (isHeading3(event)) {
+    toggleBlock(editor, BlockType.Heading, { level: 3 });
+    return true;
+  }
+
+  const inlineToggled = isBlockActive(editor, BlockType.CodeBlock)
+    ? false
+    : INLINE_KEYS.find((hotkey) => {
+        if (isKeyHotkey(hotkey, event)) {
+          event.preventDefault();
+          toggleMark(editor, INLINE_HOTKEYS[hotkey]);
+          return true;
+        }
+        return false;
+      });
+  return !!inlineToggled;
+};

src/app/components/editor/output.ts

@@ -0,0 +1,231 @@
+import { Descendant, Editor, Text } from 'slate';
+import { MatrixClient } from 'matrix-js-sdk';
+import { sanitizeText } from '../../utils/sanitize';
+import { BlockType } from './types';
+import { CustomElement } from './slate';
+import {
+  parseBlockMD,
+  parseInlineMD,
+  unescapeMarkdownBlockSequences,
+  unescapeMarkdownInlineSequences,
+} from '../../plugins/markdown';
+import { findAndReplace } from '../../utils/findAndReplace';
+import { sanitizeForRegex } from '../../utils/regex';
+import { getCanonicalAliasOrRoomId, isUserId } from '../../utils/matrix';
+
+export type OutputOptions = {
+  allowTextFormatting?: boolean;
+  allowInlineMarkdown?: boolean;
+  allowBlockMarkdown?: boolean;
+};
+
+const textToCustomHtml = (node: Text, opts: OutputOptions): string => {
+  let string = sanitizeText(node.text);
+  if (opts.allowTextFormatting) {
+    if (node.bold) string = `<strong>${string}</strong>`;
+    if (node.italic) string = `<i>${string}</i>`;
+    if (node.underline) string = `<u>${string}</u>`;
+    if (node.strikeThrough) string = `<s>${string}</s>`;
+    if (node.code) string = `<code>${string}</code>`;
+    if (node.spoiler) string = `<span data-mx-spoiler>${string}</span>`;
+  }
+
+  if (opts.allowInlineMarkdown && string === sanitizeText(node.text)) {
+    string = parseInlineMD(string);
+  }
+
+  return string;
+};
+
+const elementToCustomHtml = (node: CustomElement, children: string): string => {
+  switch (node.type) {
+    case BlockType.Paragraph:
+      return `${children}<br/>`;
+    case BlockType.Heading:
+      return `<h${node.level}>${children}</h${node.level}>`;
+    case BlockType.CodeLine:
+      return `${children}\n`;
+    case BlockType.CodeBlock:
+      return `<pre><code>${children}</code></pre>`;
+    case BlockType.QuoteLine:
+      return `${children}<br/>`;
+    case BlockType.BlockQuote:
+      return `<blockquote>${children}</blockquote>`;
+    case BlockType.ListItem:
+      return `<li><p>${children}</p></li>`;
+    case BlockType.OrderedList:
+      return `<ol>${children}</ol>`;
+    case BlockType.UnorderedList:
+      return `<ul>${children}</ul>`;
+
+    case BlockType.Mention: {
+      let fragment = node.id;
+
+      if (node.eventId) {
+        fragment += `/${node.eventId}`;
+      }
+      if (node.viaServers && node.viaServers.length > 0) {
+        fragment += `?${node.viaServers.map((server) => `via=${server}`).join('&')}`;
+      }
+
+      const matrixTo = `https://matrix.to/#/${fragment}`;
+      return `<a href="${encodeURI(matrixTo)}">${sanitizeText(node.name)}</a>`;
+    }
+    case BlockType.Emoticon:
+      return node.key.startsWith('mxc://')
+        ? `<img data-mx-emoticon src="${node.key}" alt="${sanitizeText(
+            node.shortcode
+          )}" title="${sanitizeText(node.shortcode)}" height="32" />`
+        : sanitizeText(node.key);
+    case BlockType.Link:
+      return `<a href="${encodeURI(node.href)}">${node.children}</a>`;
+    case BlockType.Command:
+      return `/${sanitizeText(node.command)}`;
+    default:
+      return children;
+  }
+};
+
+const HTML_TAG_REG_G = /<([\w-]+)(?: [^>]*)?(?:(?:\/>)|(?:>.*?<\/\1>))/g;
+const ignoreHTMLParseInlineMD = (text: string): string =>
+  findAndReplace(
+    text,
+    HTML_TAG_REG_G,
+    (match) => match[0],
+    (txt) => parseInlineMD(txt)
+  ).join('');
+
+export const toMatrixCustomHTML = (
+  node: Descendant | Descendant[],
+  opts: OutputOptions
+): string => {
+  let markdownLines = '';
+  const parseNode = (n: Descendant, index: number, targetNodes: Descendant[]) => {
+    if (opts.allowBlockMarkdown && 'type' in n && n.type === BlockType.Paragraph) {
+      const line = toMatrixCustomHTML(n, {
+        ...opts,
+        allowInlineMarkdown: false,
+        allowBlockMarkdown: false,
+      })
+        .replace(/<br\/>$/, '\n')
+        .replace(/^(\\*)&gt;/, '$1>');
+
+      markdownLines += line;
+      if (index === targetNodes.length - 1) {
+        return parseBlockMD(markdownLines, ignoreHTMLParseInlineMD);
+      }
+      return '';
+    }
+
+    const parsedMarkdown = parseBlockMD(markdownLines, ignoreHTMLParseInlineMD);
+    markdownLines = '';
+    const isCodeLine = 'type' in n && n.type === BlockType.CodeLine;
+    if (isCodeLine) return `${parsedMarkdown}${toMatrixCustomHTML(n, {})}`;
+
+    return `${parsedMarkdown}${toMatrixCustomHTML(n, { ...opts, allowBlockMarkdown: false })}`;
+  };
+  if (Array.isArray(node)) return node.map(parseNode).join('');
+  if (Text.isText(node)) return textToCustomHtml(node, opts);
+
+  const children = node.children.map(parseNode).join('');
+  return elementToCustomHtml(node, children);
+};
+
+const elementToPlainText = (node: CustomElement, children: string): string => {
+  switch (node.type) {
+    case BlockType.Paragraph:
+      return `${children}\n`;
+    case BlockType.Heading:
+      return `${children}\n`;
+    case BlockType.CodeLine:
+      return `${children}\n`;
+    case BlockType.CodeBlock:
+      return `${children}\n`;
+    case BlockType.QuoteLine:
+      return `| ${children}\n`;
+    case BlockType.BlockQuote:
+      return `${children}\n`;
+    case BlockType.ListItem:
+      return `- ${children}\n`;
+    case BlockType.OrderedList:
+      return `${children}\n`;
+    case BlockType.UnorderedList:
+      return `${children}\n`;
+    case BlockType.Mention:
+      return node.id;
+    case BlockType.Emoticon:
+      return node.key.startsWith('mxc://') ? `:${node.shortcode}:` : node.key;
+    case BlockType.Link:
+      return `[${node.children}](${node.href})`;
+    case BlockType.Command:
+      return `/${node.command}`;
+    default:
+      return children;
+  }
+};
+
+export const toPlainText = (node: Descendant | Descendant[], isMarkdown: boolean): string => {
+  if (Array.isArray(node)) return node.map((n) => toPlainText(n, isMarkdown)).join('');
+  if (Text.isText(node))
+    return isMarkdown
+      ? unescapeMarkdownBlockSequences(node.text, unescapeMarkdownInlineSequences)
+      : node.text;
+
+  const children = node.children.map((n) => toPlainText(n, isMarkdown)).join('');
+  return elementToPlainText(node, children);
+};
+
+/**
+ * Check if customHtml is equals to plainText
+ * by replacing `<br/>` with `/n` in customHtml
+ * and sanitizing plainText before comparison
+ * because text are sanitized in customHtml
+ * @param customHtml string
+ * @param plain string
+ * @returns boolean
+ */
+export const customHtmlEqualsPlainText = (customHtml: string, plain: string): boolean =>
+  customHtml.replace(/<br\/>/g, '\n') === sanitizeText(plain);
+
+export const trimCustomHtml = (customHtml: string) => customHtml.replace(/<br\/>$/g, '').trim();
+
+export const trimCommand = (cmdName: string, str: string) => {
+  const cmdRegX = new RegExp(`^(\\s+)?(\\/${sanitizeForRegex(cmdName)})([^\\S\n]+)?`);
+
+  const match = str.match(cmdRegX);
+  if (!match) return str;
+  return str.slice(match[0].length);
+};
+
+export type MentionsData = {
+  room: boolean;
+  users: Set<string>;
+};
+export const getMentions = (mx: MatrixClient, roomId: string, editor: Editor): MentionsData => {
+  const mentionData: MentionsData = {
+    room: false,
+    users: new Set(),
+  };
+
+  const parseMentions = (node: Descendant): void => {
+    if (Text.isText(node)) return;
+    if (node.type === BlockType.CodeBlock) return;
+
+    if (node.type === BlockType.Mention) {
+      if (node.id === getCanonicalAliasOrRoomId(mx, roomId)) {
+        mentionData.room = true;
+      }
+      if (isUserId(node.id) && node.id !== mx.getUserId()) {
+        mentionData.users.add(node.id);
+      }
+
+      return;
+    }
+
+    node.children.forEach(parseMentions);
+  };
+
+  editor.children.forEach(parseMentions);
+
+  return mentionData;
+};

src/app/components/editor/slate.d.ts

@@ -0,0 +1,111 @@
+import { BaseEditor } from 'slate';
+import { ReactEditor } from 'slate-react';
+import { HistoryEditor } from 'slate-history';
+import { BlockType } from './types';
+
+export type HeadingLevel = 1 | 2 | 3;
+
+export type Editor = BaseEditor & HistoryEditor & ReactEditor;
+
+export type Text = {
+  text: string;
+};
+
+export type FormattedText = Text & {
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  strikeThrough?: boolean;
+  code?: boolean;
+  spoiler?: boolean;
+};
+
+export type LinkElement = {
+  type: BlockType.Link;
+  href: string;
+  children: Text[];
+};
+
+export type MentionElement = {
+  type: BlockType.Mention;
+  id: string;
+  eventId?: string;
+  viaServers?: string[];
+  highlight: boolean;
+  name: string;
+  children: Text[];
+};
+export type EmoticonElement = {
+  type: BlockType.Emoticon;
+  key: string;
+  shortcode: string;
+  children: Text[];
+};
+export type CommandElement = {
+  type: BlockType.Command;
+  command: string;
+  children: Text[];
+};
+
+export type InlineElement = Text | LinkElement | MentionElement | EmoticonElement | CommandElement;
+
+export type ParagraphElement = {
+  type: BlockType.Paragraph;
+  children: InlineElement[];
+};
+export type HeadingElement = {
+  type: BlockType.Heading;
+  level: HeadingLevel;
+  children: InlineElement[];
+};
+export type CodeLineElement = {
+  type: BlockType.CodeLine;
+  children: Text[];
+};
+export type CodeBlockElement = {
+  type: BlockType.CodeBlock;
+  children: CodeLineElement[];
+};
+export type QuoteLineElement = {
+  type: BlockType.QuoteLine;
+  children: InlineElement[];
+};
+export type BlockQuoteElement = {
+  type: BlockType.BlockQuote;
+  children: QuoteLineElement[];
+};
+export type ListItemElement = {
+  type: BlockType.ListItem;
+  children: InlineElement[];
+};
+export type OrderedListElement = {
+  type: BlockType.OrderedList;
+  children: ListItemElement[];
+};
+export type UnorderedListElement = {
+  type: BlockType.UnorderedList;
+  children: ListItemElement[];
+};
+
+export type CustomElement =
+  | LinkElement
+  | MentionElement
+  | EmoticonElement
+  | CommandElement
+  | ParagraphElement
+  | HeadingElement
+  | CodeLineElement
+  | CodeBlockElement
+  | QuoteLineElement
+  | BlockQuoteElement
+  | ListItemElement
+  | OrderedListElement
+  | UnorderedListElement;
+
+declare module 'slate' {
+  interface CustomTypes {
+    Editor: Editor;
+    Element: CustomElement;
+    Text: FormattedText & Text;
+  }
+}

src/app/components/editor/types.ts

@@ -0,0 +1,24 @@
+export enum MarkType {
+  Bold = 'bold',
+  Italic = 'italic',
+  Underline = 'underline',
+  StrikeThrough = 'strikeThrough',
+  Code = 'code',
+  Spoiler = 'spoiler',
+}
+
+export enum BlockType {
+  Paragraph = 'paragraph',
+  Heading = 'heading',
+  CodeLine = 'code-line',
+  CodeBlock = 'code-block',
+  QuoteLine = 'quote-line',
+  BlockQuote = 'block-quote',
+  ListItem = 'list-item',
+  OrderedList = 'ordered-list',
+  UnorderedList = 'unordered-list',
+  Mention = 'mention',
+  Emoticon = 'emoticon',
+  Link = 'link',
+  Command = 'command',
+}

src/app/components/editor/utils.ts

@@ -0,0 +1,275 @@
+import { BasePoint, BaseRange, Editor, Element, Point, Range, Text, Transforms } from 'slate';
+import { BlockType, MarkType } from './types';
+import {
+  CommandElement,
+  EmoticonElement,
+  FormattedText,
+  HeadingLevel,
+  LinkElement,
+  MentionElement,
+} from './slate';
+
+const ALL_MARK_TYPE: MarkType[] = [
+  MarkType.Bold,
+  MarkType.Code,
+  MarkType.Italic,
+  MarkType.Spoiler,
+  MarkType.StrikeThrough,
+  MarkType.Underline,
+];
+
+export const isMarkActive = (editor: Editor, format: MarkType) => {
+  const marks = Editor.marks(editor);
+  return marks ? marks[format] === true : false;
+};
+
+export const isAnyMarkActive = (editor: Editor) => {
+  const marks = Editor.marks(editor);
+  return marks && !!ALL_MARK_TYPE.find((type) => marks[type] === true);
+};
+
+export const toggleMark = (editor: Editor, format: MarkType) => {
+  const isActive = isMarkActive(editor, format);
+
+  if (isActive) {
+    Editor.removeMark(editor, format);
+  } else {
+    Editor.addMark(editor, format, true);
+  }
+};
+
+export const removeAllMark = (editor: Editor) => {
+  ALL_MARK_TYPE.forEach((mark) => {
+    if (isMarkActive(editor, mark)) Editor.removeMark(editor, mark);
+  });
+};
+
+export const isBlockActive = (editor: Editor, format: BlockType) => {
+  const [match] = Editor.nodes(editor, {
+    match: (node) => Element.isElement(node) && node.type === format,
+  });
+
+  return !!match;
+};
+
+export const headingLevel = (editor: Editor): HeadingLevel | undefined => {
+  const [nodeEntry] = Editor.nodes(editor, {
+    match: (node) => Element.isElement(node) && node.type === BlockType.Heading,
+  });
+  const [node] = nodeEntry ?? [];
+  if (!node) return undefined;
+  if ('level' in node) return node.level;
+  return undefined;
+};
+
+type BlockOption = { level: HeadingLevel };
+const NESTED_BLOCK = [
+  BlockType.OrderedList,
+  BlockType.UnorderedList,
+  BlockType.BlockQuote,
+  BlockType.CodeBlock,
+];
+
+export const toggleBlock = (editor: Editor, format: BlockType, option?: BlockOption) => {
+  Transforms.collapse(editor, {
+    edge: 'end',
+  });
+  const isActive = isBlockActive(editor, format);
+
+  Transforms.unwrapNodes(editor, {
+    match: (node) => Element.isElement(node) && NESTED_BLOCK.includes(node.type),
+    split: true,
+  });
+
+  if (isActive) {
+    Transforms.setNodes(editor, {
+      type: BlockType.Paragraph,
+    });
+    return;
+  }
+
+  if (format === BlockType.OrderedList || format === BlockType.UnorderedList) {
+    Transforms.setNodes(editor, {
+      type: BlockType.ListItem,
+    });
+    const block = {
+      type: format,
+      children: [],
+    };
+    Transforms.wrapNodes(editor, block);
+    return;
+  }
+  if (format === BlockType.CodeBlock) {
+    Transforms.setNodes(editor, {
+      type: BlockType.CodeLine,
+    });
+    const block = {
+      type: format,
+      children: [],
+    };
+    Transforms.wrapNodes(editor, block);
+    return;
+  }
+
+  if (format === BlockType.BlockQuote) {
+    Transforms.setNodes(editor, {
+      type: BlockType.QuoteLine,
+    });
+    const block = {
+      type: format,
+      children: [],
+    };
+    Transforms.wrapNodes(editor, block);
+    return;
+  }
+
+  if (format === BlockType.Heading) {
+    Transforms.setNodes(editor, {
+      type: format,
+      level: option?.level ?? 1,
+    });
+  }
+
+  Transforms.setNodes(editor, {
+    type: format,
+  });
+};
+
+export const resetEditor = (editor: Editor) => {
+  Transforms.delete(editor, {
+    at: {
+      anchor: Editor.start(editor, []),
+      focus: Editor.end(editor, []),
+    },
+  });
+
+  toggleBlock(editor, BlockType.Paragraph);
+  removeAllMark(editor);
+};
+
+export const resetEditorHistory = (editor: Editor) => {
+  // eslint-disable-next-line no-param-reassign
+  editor.history = {
+    undos: [],
+    redos: [],
+  };
+};
+
+export const createMentionElement = (
+  id: string,
+  name: string,
+  highlight: boolean,
+  eventId?: string,
+  viaServers?: string[]
+): MentionElement => ({
+  type: BlockType.Mention,
+  id,
+  eventId,
+  viaServers,
+  highlight,
+  name,
+  children: [{ text: '' }],
+});
+
+export const createEmoticonElement = (key: string, shortcode: string): EmoticonElement => ({
+  type: BlockType.Emoticon,
+  key,
+  shortcode,
+  children: [{ text: '' }],
+});
+
+export const createLinkElement = (
+  href: string,
+  children: string | FormattedText[]
+): LinkElement => ({
+  type: BlockType.Link,
+  href,
+  children: typeof children === 'string' ? [{ text: children }] : children,
+});
+
+export const createCommandElement = (command: string): CommandElement => ({
+  type: BlockType.Command,
+  command,
+  children: [{ text: '' }],
+});
+
+export const replaceWithElement = (editor: Editor, selectRange: BaseRange, element: Element) => {
+  Transforms.select(editor, selectRange);
+  Transforms.insertNodes(editor, element);
+  Transforms.collapse(editor, {
+    edge: 'end',
+  });
+};
+
+export const moveCursor = (editor: Editor, withSpace?: boolean) => {
+  Transforms.move(editor);
+  if (withSpace) editor.insertText(' ');
+};
+
+interface PointUntilCharOptions {
+  match: (char: string) => boolean;
+  reverse?: boolean;
+}
+export const getPointUntilChar = (
+  editor: Editor,
+  cursorPoint: BasePoint,
+  options: PointUntilCharOptions
+): BasePoint | undefined => {
+  let targetPoint: BasePoint | undefined;
+  let prevPoint: BasePoint | undefined;
+  let char: string | undefined;
+
+  const pointItr = Editor.positions(editor, {
+    at: {
+      anchor: Editor.start(editor, []),
+      focus: Editor.point(editor, cursorPoint, { edge: 'start' }),
+    },
+    unit: 'character',
+    reverse: options.reverse,
+  });
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const point of pointItr) {
+    if (!Point.equals(point, cursorPoint) && prevPoint) {
+      char = Editor.string(editor, { anchor: point, focus: prevPoint });
+
+      if (options.match(char)) break;
+      targetPoint = point;
+    }
+    prevPoint = point;
+  }
+  return targetPoint;
+};
+
+export const getPrevWorldRange = (editor: Editor): BaseRange | undefined => {
+  const { selection } = editor;
+  if (!selection || !Range.isCollapsed(selection)) return undefined;
+  const [cursorPoint] = Range.edges(selection);
+  const worldStartPoint = getPointUntilChar(editor, cursorPoint, {
+    reverse: true,
+    match: (char) => char === ' ',
+  });
+  return worldStartPoint && Editor.range(editor, worldStartPoint, cursorPoint);
+};
+
+export const isEmptyEditor = (editor: Editor): boolean => {
+  const firstChildren = editor.children[0];
+  if (firstChildren && Element.isElement(firstChildren)) {
+    const isEmpty = editor.children.length === 1 && Editor.isEmpty(editor, firstChildren);
+    return isEmpty;
+  }
+  return false;
+};
+
+export const getBeginCommand = (editor: Editor): string | undefined => {
+  const lineBlock = editor.children[0];
+  if (!Element.isElement(lineBlock)) return undefined;
+  if (lineBlock.type !== BlockType.Paragraph) return undefined;
+
+  const [firstInline, secondInline] = lineBlock.children;
+  const isEmptyText = Text.isText(firstInline) && firstInline.text.trim() === '';
+  if (!isEmptyText) return undefined;
+  if (Element.isElement(secondInline) && secondInline.type === BlockType.Command)
+    return secondInline.command;
+  return undefined;
+};

src/app/components/emoji-board/EmojiBoard.css.tsx

@@ -0,0 +1,136 @@
+import { style } from '@vanilla-extract/css';
+import { DefaultReset, FocusOutline, color, config, toRem } from 'folds';
+
+export const Base = style({
+  maxWidth: toRem(432),
+  width: `calc(100vw - 2 * ${config.space.S400})`,
+  height: toRem(450),
+  backgroundColor: color.Surface.Container,
+  color: color.Surface.OnContainer,
+  border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+  borderRadius: config.radii.R400,
+  boxShadow: config.shadow.E200,
+  overflow: 'hidden',
+});
+
+export const Sidebar = style({
+  width: toRem(54),
+  backgroundColor: color.Surface.Container,
+  color: color.Surface.OnContainer,
+  position: 'relative',
+});
+
+export const SidebarContent = style({
+  padding: `${config.space.S200} 0`,
+});
+
+export const SidebarStack = style({
+  width: '100%',
+  backgroundColor: color.Surface.Container,
+});
+
+export const NativeEmojiSidebarStack = style({
+  position: 'sticky',
+  bottom: '-67%',
+  zIndex: 1,
+});
+
+export const SidebarDivider = style({
+  width: toRem(18),
+});
+
+export const Header = style({
+  padding: config.space.S300,
+  paddingBottom: 0,
+});
+
+export const EmojiBoardTab = style({
+  cursor: 'pointer',
+});
+
+export const Footer = style({
+  padding: config.space.S200,
+  margin: config.space.S300,
+  marginTop: 0,
+  minHeight: toRem(40),
+
+  borderRadius: config.radii.R400,
+  backgroundColor: color.SurfaceVariant.Container,
+  color: color.SurfaceVariant.OnContainer,
+});
+
+export const EmojiGroup = style({
+  padding: `${config.space.S300} 0`,
+});
+
+export const EmojiGroupLabel = style({
+  position: 'sticky',
+  top: config.space.S200,
+  zIndex: 1,
+
+  margin: 'auto',
+  padding: `${config.space.S100} ${config.space.S200}`,
+  borderRadius: config.radii.Pill,
+  backgroundColor: color.SurfaceVariant.Container,
+  color: color.SurfaceVariant.OnContainer,
+});
+
+export const EmojiGroupContent = style([
+  DefaultReset,
+  {
+    padding: `0 ${config.space.S200}`,
+  },
+]);
+
+export const EmojiPreview = style([
+  DefaultReset,
+  {
+    width: toRem(32),
+    height: toRem(32),
+    fontSize: toRem(32),
+    lineHeight: toRem(32),
+  },
+]);
+
+export const EmojiItem = style([
+  DefaultReset,
+  FocusOutline,
+  {
+    width: toRem(48),
+    height: toRem(48),
+    fontSize: toRem(32),
+    lineHeight: toRem(32),
+    borderRadius: config.radii.R400,
+    cursor: 'pointer',
+
+    ':hover': {
+      backgroundColor: color.Surface.ContainerHover,
+    },
+  },
+]);
+
+export const StickerItem = style([
+  EmojiItem,
+  {
+    width: toRem(112),
+    height: toRem(112),
+  },
+]);
+
+export const CustomEmojiImg = style([
+  DefaultReset,
+  {
+    width: toRem(32),
+    height: toRem(32),
+    objectFit: 'contain',
+  },
+]);
+
+export const StickerImg = style([
+  DefaultReset,
+  {
+    width: toRem(96),
+    height: toRem(96),
+    objectFit: 'contain',
+  },
+]);

src/app/components/emoji-board/EmojiBoard.tsx

@@ -0,0 +1,949 @@
+import React, {
+  ChangeEventHandler,
+  FocusEventHandler,
+  MouseEventHandler,
+  UIEventHandler,
+  ReactNode,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  Badge,
+  Box,
+  Chip,
+  Icon,
+  IconButton,
+  Icons,
+  Input,
+  Line,
+  Scroll,
+  Text,
+  Tooltip,
+  TooltipProvider,
+  as,
+  config,
+  toRem,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { isKeyHotkey } from 'is-hotkey';
+import classNames from 'classnames';
+import { MatrixClient, Room } from 'matrix-js-sdk';
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+
+import * as css from './EmojiBoard.css';
+import { EmojiGroupId, IEmoji, IEmojiGroup, emojiGroups, emojis } from '../../plugins/emoji';
+import { IEmojiGroupLabels, useEmojiGroupLabels } from './useEmojiGroupLabels';
+import { IEmojiGroupIcons, useEmojiGroupIcons } from './useEmojiGroupIcons';
+import { preventScrollWithArrowKey, stopPropagation } from '../../utils/keyboard';
+import { useRelevantImagePacks } from '../../hooks/useImagePacks';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useRecentEmoji } from '../../hooks/useRecentEmoji';
+import { isUserId, mxcUrlToHttp } from '../../utils/matrix';
+import { editableActiveElement, isIntersectingScrollView, targetFromEvent } from '../../utils/dom';
+import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
+import { useDebounce } from '../../hooks/useDebounce';
+import { useThrottle } from '../../hooks/useThrottle';
+import { addRecentEmoji } from '../../plugins/recent-emoji';
+import { mobileOrTablet } from '../../utils/user-agent';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { ImagePack, ImageUsage, PackImageReader } from '../../plugins/custom-emoji';
+import { getEmoticonSearchStr } from '../../plugins/utils';
+
+const RECENT_GROUP_ID = 'recent_group';
+const SEARCH_GROUP_ID = 'search_group';
+
+export enum EmojiBoardTab {
+  Emoji = 'Emoji',
+  Sticker = 'Sticker',
+}
+
+enum EmojiType {
+  Emoji = 'emoji',
+  CustomEmoji = 'customEmoji',
+  Sticker = 'sticker',
+}
+
+export type EmojiItemInfo = {
+  type: EmojiType;
+  data: string;
+  shortcode: string;
+  label: string;
+};
+
+const getDOMGroupId = (id: string): string => `EmojiBoardGroup-${id}`;
+
+const getEmojiItemInfo = (element: Element): EmojiItemInfo | undefined => {
+  const type = element.getAttribute('data-emoji-type') as EmojiType | undefined;
+  const data = element.getAttribute('data-emoji-data');
+  const label = element.getAttribute('title');
+  const shortcode = element.getAttribute('data-emoji-shortcode');
+
+  if (type && data && shortcode && label)
+    return {
+      type,
+      data,
+      shortcode,
+      label,
+    };
+  return undefined;
+};
+
+const activeGroupIdAtom = atom<string | undefined>(undefined);
+
+function Sidebar({ children }: { children: ReactNode }) {
+  return (
+    <Box className={css.Sidebar} shrink="No">
+      <Scroll size="0">
+        <Box className={css.SidebarContent} direction="Column" alignItems="Center" gap="100">
+          {children}
+        </Box>
+      </Scroll>
+    </Box>
+  );
+}
+
+const SidebarStack = as<'div'>(({ className, children, ...props }, ref) => (
+  <Box
+    className={classNames(css.SidebarStack, className)}
+    direction="Column"
+    alignItems="Center"
+    gap="100"
+    {...props}
+    ref={ref}
+  >
+    {children}
+  </Box>
+));
+function SidebarDivider() {
+  return <Line className={css.SidebarDivider} size="300" variant="Surface" />;
+}
+
+function Header({ children }: { children: ReactNode }) {
+  return (
+    <Box className={css.Header} direction="Column" shrink="No">
+      {children}
+    </Box>
+  );
+}
+
+function Content({ children }: { children: ReactNode }) {
+  return <Box grow="Yes">{children}</Box>;
+}
+
+function Footer({ children }: { children: ReactNode }) {
+  return (
+    <Box shrink="No" className={css.Footer} gap="300" alignItems="Center">
+      {children}
+    </Box>
+  );
+}
+
+const EmojiBoardLayout = as<
+  'div',
+  {
+    header: ReactNode;
+    sidebar?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+  }
+>(({ className, header, sidebar, footer, children, ...props }, ref) => (
+  <Box
+    display="InlineFlex"
+    className={classNames(css.Base, className)}
+    direction="Row"
+    {...props}
+    ref={ref}
+  >
+    <Box direction="Column" grow="Yes">
+      {header}
+      {children}
+      {footer}
+    </Box>
+    <Line size="300" direction="Vertical" />
+    {sidebar}
+  </Box>
+));
+
+function EmojiBoardTabs({
+  tab,
+  onTabChange,
+}: {
+  tab: EmojiBoardTab;
+  onTabChange: (tab: EmojiBoardTab) => void;
+}) {
+  return (
+    <Box gap="100">
+      <Badge
+        className={css.EmojiBoardTab}
+        as="button"
+        variant="Secondary"
+        fill={tab === EmojiBoardTab.Sticker ? 'Solid' : 'None'}
+        size="500"
+        onClick={() => onTabChange(EmojiBoardTab.Sticker)}
+      >
+        <Text as="span" size="L400">
+          Sticker
+        </Text>
+      </Badge>
+      <Badge
+        className={css.EmojiBoardTab}
+        as="button"
+        variant="Secondary"
+        fill={tab === EmojiBoardTab.Emoji ? 'Solid' : 'None'}
+        size="500"
+        onClick={() => onTabChange(EmojiBoardTab.Emoji)}
+      >
+        <Text as="span" size="L400">
+          Emoji
+        </Text>
+      </Badge>
+    </Box>
+  );
+}
+
+export function SidebarBtn<T extends string>({
+  active,
+  label,
+  id,
+  onItemClick,
+  children,
+}: {
+  active?: boolean;
+  label: string;
+  id: T;
+  onItemClick: (id: T) => void;
+  children: ReactNode;
+}) {
+  return (
+    <TooltipProvider
+      delay={500}
+      position="Left"
+      tooltip={
+        <Tooltip id={`SidebarStackItem-${id}-label`}>
+          <Text size="T300">{label}</Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton
+          aria-pressed={active}
+          aria-labelledby={`SidebarStackItem-${id}-label`}
+          ref={ref}
+          onClick={() => onItemClick(id)}
+          size="400"
+          radii="300"
+          variant="Surface"
+        >
+          {children}
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
+export const EmojiGroup = as<
+  'div',
+  {
+    id: string;
+    label: string;
+    children: ReactNode;
+  }
+>(({ className, id, label, children, ...props }, ref) => (
+  <Box
+    id={getDOMGroupId(id)}
+    data-group-id={id}
+    className={classNames(css.EmojiGroup, className)}
+    direction="Column"
+    gap="200"
+    {...props}
+    ref={ref}
+  >
+    <Text id={`EmojiGroup-${id}-label`} as="label" className={css.EmojiGroupLabel} size="O400">
+      {label}
+    </Text>
+    <div aria-labelledby={`EmojiGroup-${id}-label`} className={css.EmojiGroupContent}>
+      <Box wrap="Wrap" justifyContent="Center">
+        {children}
+      </Box>
+    </div>
+  </Box>
+));
+
+export function EmojiItem({
+  label,
+  type,
+  data,
+  shortcode,
+  children,
+}: {
+  label: string;
+  type: EmojiType;
+  data: string;
+  shortcode: string;
+  children: ReactNode;
+}) {
+  return (
+    <Box
+      as="button"
+      className={css.EmojiItem}
+      type="button"
+      alignItems="Center"
+      justifyContent="Center"
+      title={label}
+      aria-label={`${label} emoji`}
+      data-emoji-type={type}
+      data-emoji-data={data}
+      data-emoji-shortcode={shortcode}
+    >
+      {children}
+    </Box>
+  );
+}
+
+export function StickerItem({
+  label,
+  type,
+  data,
+  shortcode,
+  children,
+}: {
+  label: string;
+  type: EmojiType;
+  data: string;
+  shortcode: string;
+  children: ReactNode;
+}) {
+  return (
+    <Box
+      as="button"
+      className={css.StickerItem}
+      type="button"
+      alignItems="Center"
+      justifyContent="Center"
+      title={label}
+      aria-label={`${label} sticker`}
+      data-emoji-type={type}
+      data-emoji-data={data}
+      data-emoji-shortcode={shortcode}
+    >
+      {children}
+    </Box>
+  );
+}
+
+function RecentEmojiSidebarStack({ onItemClick }: { onItemClick: (id: string) => void }) {
+  const activeGroupId = useAtomValue(activeGroupIdAtom);
+
+  return (
+    <SidebarStack>
+      <SidebarBtn
+        active={activeGroupId === RECENT_GROUP_ID}
+        id={RECENT_GROUP_ID}
+        label="Recent"
+        onItemClick={() => onItemClick(RECENT_GROUP_ID)}
+      >
+        <Icon src={Icons.RecentClock} filled={activeGroupId === RECENT_GROUP_ID} />
+      </SidebarBtn>
+    </SidebarStack>
+  );
+}
+
+function ImagePackSidebarStack({
+  mx,
+  packs,
+  usage,
+  onItemClick,
+  useAuthentication,
+}: {
+  mx: MatrixClient;
+  packs: ImagePack[];
+  usage: ImageUsage;
+  onItemClick: (id: string) => void;
+  useAuthentication?: boolean;
+}) {
+  const activeGroupId = useAtomValue(activeGroupIdAtom);
+  return (
+    <SidebarStack>
+      {usage === ImageUsage.Emoticon && <SidebarDivider />}
+      {packs.map((pack) => {
+        let label = pack.meta.name;
+        if (!label) label = isUserId(pack.id) ? 'Personal Pack' : mx.getRoom(pack.id)?.name;
+        return (
+          <SidebarBtn
+            active={activeGroupId === pack.id}
+            key={pack.id}
+            id={pack.id}
+            label={label || 'Unknown Pack'}
+            onItemClick={onItemClick}
+          >
+            <img
+              style={{
+                width: toRem(24),
+                height: toRem(24),
+                objectFit: 'contain',
+              }}
+              src={
+                mxcUrlToHttp(mx, pack.getAvatarUrl(usage) ?? '', useAuthentication) ||
+                pack.meta.avatar
+              }
+              alt={label || 'Unknown Pack'}
+            />
+          </SidebarBtn>
+        );
+      })}
+    </SidebarStack>
+  );
+}
+
+function NativeEmojiSidebarStack({
+  groups,
+  icons,
+  labels,
+  onItemClick,
+}: {
+  groups: IEmojiGroup[];
+  icons: IEmojiGroupIcons;
+  labels: IEmojiGroupLabels;
+  onItemClick: (id: EmojiGroupId) => void;
+}) {
+  const activeGroupId = useAtomValue(activeGroupIdAtom);
+  return (
+    <SidebarStack className={css.NativeEmojiSidebarStack}>
+      <SidebarDivider />
+      {groups.map((group) => (
+        <SidebarBtn
+          key={group.id}
+          active={activeGroupId === group.id}
+          id={group.id}
+          label={labels[group.id]}
+          onItemClick={onItemClick}
+        >
+          <Icon src={icons[group.id]} filled={activeGroupId === group.id} />
+        </SidebarBtn>
+      ))}
+    </SidebarStack>
+  );
+}
+
+export function RecentEmojiGroup({
+  label,
+  id,
+  emojis: recentEmojis,
+}: {
+  label: string;
+  id: string;
+  emojis: IEmoji[];
+}) {
+  return (
+    <EmojiGroup key={id} id={id} label={label}>
+      {recentEmojis.map((emoji) => (
+        <EmojiItem
+          key={emoji.unicode}
+          label={emoji.label}
+          type={EmojiType.Emoji}
+          data={emoji.unicode}
+          shortcode={emoji.shortcode}
+        >
+          {emoji.unicode}
+        </EmojiItem>
+      ))}
+    </EmojiGroup>
+  );
+}
+
+export function SearchEmojiGroup({
+  mx,
+  tab,
+  label,
+  id,
+  emojis: searchResult,
+  useAuthentication,
+}: {
+  mx: MatrixClient;
+  tab: EmojiBoardTab;
+  label: string;
+  id: string;
+  emojis: Array<PackImageReader | IEmoji>;
+  useAuthentication?: boolean;
+}) {
+  return (
+    <EmojiGroup key={id} id={id} label={label}>
+      {tab === EmojiBoardTab.Emoji
+        ? searchResult.map((emoji) =>
+            'unicode' in emoji ? (
+              <EmojiItem
+                key={emoji.unicode}
+                label={emoji.label}
+                type={EmojiType.Emoji}
+                data={emoji.unicode}
+                shortcode={emoji.shortcode}
+              >
+                {emoji.unicode}
+              </EmojiItem>
+            ) : (
+              <EmojiItem
+                key={emoji.shortcode}
+                label={emoji.body || emoji.shortcode}
+                type={EmojiType.CustomEmoji}
+                data={emoji.url}
+                shortcode={emoji.shortcode}
+              >
+                <img
+                  loading="lazy"
+                  className={css.CustomEmojiImg}
+                  alt={emoji.body || emoji.shortcode}
+                  src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
+                />
+              </EmojiItem>
+            )
+          )
+        : searchResult.map((emoji) =>
+            'unicode' in emoji ? null : (
+              <StickerItem
+                key={emoji.shortcode}
+                label={emoji.body || emoji.shortcode}
+                type={EmojiType.Sticker}
+                data={emoji.url}
+                shortcode={emoji.shortcode}
+              >
+                <img
+                  loading="lazy"
+                  className={css.StickerImg}
+                  alt={emoji.body || emoji.shortcode}
+                  src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
+                />
+              </StickerItem>
+            )
+          )}
+    </EmojiGroup>
+  );
+}
+
+export const CustomEmojiGroups = memo(
+  ({
+    mx,
+    groups,
+    useAuthentication,
+  }: {
+    mx: MatrixClient;
+    groups: ImagePack[];
+    useAuthentication?: boolean;
+  }) => (
+    <>
+      {groups.map((pack) => (
+        <EmojiGroup key={pack.id} id={pack.id} label={pack.meta.name || 'Unknown'}>
+          {pack
+            .getImages(ImageUsage.Emoticon)
+            .sort((a, b) => a.shortcode.localeCompare(b.shortcode))
+            .map((image) => (
+              <EmojiItem
+                key={image.shortcode}
+                label={image.body || image.shortcode}
+                type={EmojiType.CustomEmoji}
+                data={image.url}
+                shortcode={image.shortcode}
+              >
+                <img
+                  loading="lazy"
+                  className={css.CustomEmojiImg}
+                  alt={image.body || image.shortcode}
+                  src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
+                />
+              </EmojiItem>
+            ))}
+        </EmojiGroup>
+      ))}
+    </>
+  )
+);
+
+export const StickerGroups = memo(
+  ({
+    mx,
+    groups,
+    useAuthentication,
+  }: {
+    mx: MatrixClient;
+    groups: ImagePack[];
+    useAuthentication?: boolean;
+  }) => (
+    <>
+      {groups.length === 0 && (
+        <Box
+          style={{ padding: `${toRem(60)} ${config.space.S500}` }}
+          alignItems="Center"
+          justifyContent="Center"
+          direction="Column"
+          gap="300"
+        >
+          <Icon size="600" src={Icons.Sticker} />
+          <Box direction="Inherit">
+            <Text align="Center">No Sticker Packs!</Text>
+            <Text priority="300" align="Center" size="T200">
+              Add stickers from user, room or space settings.
+            </Text>
+          </Box>
+        </Box>
+      )}
+      {groups.map((pack) => (
+        <EmojiGroup key={pack.id} id={pack.id} label={pack.meta.name || 'Unknown'}>
+          {pack
+            .getImages(ImageUsage.Sticker)
+            .sort((a, b) => a.shortcode.localeCompare(b.shortcode))
+            .map((image) => (
+              <StickerItem
+                key={image.shortcode}
+                label={image.body || image.shortcode}
+                type={EmojiType.Sticker}
+                data={image.url}
+                shortcode={image.shortcode}
+              >
+                <img
+                  loading="lazy"
+                  className={css.StickerImg}
+                  alt={image.body || image.shortcode}
+                  src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
+                />
+              </StickerItem>
+            ))}
+        </EmojiGroup>
+      ))}
+    </>
+  )
+);
+
+export const NativeEmojiGroups = memo(
+  ({ groups, labels }: { groups: IEmojiGroup[]; labels: IEmojiGroupLabels }) => (
+    <>
+      {groups.map((emojiGroup) => (
+        <EmojiGroup key={emojiGroup.id} id={emojiGroup.id} label={labels[emojiGroup.id]}>
+          {emojiGroup.emojis.map((emoji) => (
+            <EmojiItem
+              key={emoji.unicode}
+              label={emoji.label}
+              type={EmojiType.Emoji}
+              data={emoji.unicode}
+              shortcode={emoji.shortcode}
+            >
+              {emoji.unicode}
+            </EmojiItem>
+          ))}
+        </EmojiGroup>
+      ))}
+    </>
+  )
+);
+
+const SEARCH_OPTIONS: UseAsyncSearchOptions = {
+  limit: 1000,
+  matchOptions: {
+    contain: true,
+  },
+};
+
+export function EmojiBoard({
+  tab = EmojiBoardTab.Emoji,
+  onTabChange,
+  imagePackRooms,
+  requestClose,
+  returnFocusOnDeactivate,
+  onEmojiSelect,
+  onCustomEmojiSelect,
+  onStickerSelect,
+  allowTextCustomEmoji,
+}: {
+  tab?: EmojiBoardTab;
+  onTabChange?: (tab: EmojiBoardTab) => void;
+  imagePackRooms: Room[];
+  requestClose: () => void;
+  returnFocusOnDeactivate?: boolean;
+  onEmojiSelect?: (unicode: string, shortcode: string) => void;
+  onCustomEmojiSelect?: (mxc: string, shortcode: string) => void;
+  onStickerSelect?: (mxc: string, shortcode: string, label: string) => void;
+  allowTextCustomEmoji?: boolean;
+}) {
+  const emojiTab = tab === EmojiBoardTab.Emoji;
+  const stickerTab = tab === EmojiBoardTab.Sticker;
+  const usage = emojiTab ? ImageUsage.Emoticon : ImageUsage.Sticker;
+
+  const setActiveGroupId = useSetAtom(activeGroupIdAtom);
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const emojiGroupLabels = useEmojiGroupLabels();
+  const emojiGroupIcons = useEmojiGroupIcons();
+  const imagePacks = useRelevantImagePacks(usage, imagePackRooms);
+  const recentEmojis = useRecentEmoji(mx, 21);
+
+  const contentScrollRef = useRef<HTMLDivElement>(null);
+  const emojiPreviewRef = useRef<HTMLDivElement>(null);
+  const emojiPreviewTextRef = useRef<HTMLParagraphElement>(null);
+
+  const searchList = useMemo(() => {
+    let list: Array<PackImageReader | IEmoji> = [];
+    list = list.concat(imagePacks.flatMap((pack) => pack.getImages(usage)));
+    if (emojiTab) list = list.concat(emojis);
+    return list;
+  }, [emojiTab, usage, imagePacks]);
+
+  const [result, search, resetSearch] = useAsyncSearch(
+    searchList,
+    getEmoticonSearchStr,
+    SEARCH_OPTIONS
+  );
+
+  const searchedItems = result?.items.slice(0, 100);
+
+  const handleOnChange: ChangeEventHandler<HTMLInputElement> = useDebounce(
+    useCallback(
+      (evt) => {
+        const term = evt.target.value;
+        if (term) search(term);
+        else resetSearch();
+      },
+      [search, resetSearch]
+    ),
+    { wait: 200 }
+  );
+
+  const syncActiveGroupId = useCallback(() => {
+    const targetEl = contentScrollRef.current;
+    if (!targetEl) return;
+    const groupEls = Array.from(targetEl.querySelectorAll('div[data-group-id]')) as HTMLElement[];
+    const groupEl = groupEls.find((el) => isIntersectingScrollView(targetEl, el));
+    const groupId = groupEl?.getAttribute('data-group-id') ?? undefined;
+    setActiveGroupId(groupId);
+  }, [setActiveGroupId]);
+
+  const handleOnScroll: UIEventHandler<HTMLDivElement> = useThrottle(syncActiveGroupId, {
+    wait: 500,
+  });
+
+  const handleScrollToGroup = (groupId: string) => {
+    setActiveGroupId(groupId);
+    const groupElement = document.getElementById(getDOMGroupId(groupId));
+    groupElement?.scrollIntoView();
+  };
+
+  const handleEmojiClick: MouseEventHandler = (evt) => {
+    const targetEl = targetFromEvent(evt.nativeEvent, 'button');
+    if (!targetEl) return;
+    const emojiInfo = getEmojiItemInfo(targetEl);
+    if (!emojiInfo) return;
+    if (emojiInfo.type === EmojiType.Emoji) {
+      onEmojiSelect?.(emojiInfo.data, emojiInfo.shortcode);
+      if (!evt.altKey && !evt.shiftKey) {
+        addRecentEmoji(mx, emojiInfo.data);
+        requestClose();
+      }
+    }
+    if (emojiInfo.type === EmojiType.CustomEmoji) {
+      onCustomEmojiSelect?.(emojiInfo.data, emojiInfo.shortcode);
+      if (!evt.altKey && !evt.shiftKey) requestClose();
+    }
+    if (emojiInfo.type === EmojiType.Sticker) {
+      onStickerSelect?.(emojiInfo.data, emojiInfo.shortcode, emojiInfo.label);
+      if (!evt.altKey && !evt.shiftKey) requestClose();
+    }
+  };
+
+  const handleEmojiPreview = useCallback(
+    (element: HTMLButtonElement) => {
+      const emojiInfo = getEmojiItemInfo(element);
+      if (!emojiInfo || !emojiPreviewTextRef.current) return;
+      if (emojiInfo.type === EmojiType.Emoji && emojiPreviewRef.current) {
+        emojiPreviewRef.current.textContent = emojiInfo.data;
+      } else if (emojiInfo.type === EmojiType.CustomEmoji && emojiPreviewRef.current) {
+        const img = document.createElement('img');
+        img.className = css.CustomEmojiImg;
+        img.setAttribute(
+          'src',
+          mxcUrlToHttp(mx, emojiInfo.data, useAuthentication) || emojiInfo.data
+        );
+        img.setAttribute('alt', emojiInfo.shortcode);
+        emojiPreviewRef.current.textContent = '';
+        emojiPreviewRef.current.appendChild(img);
+      }
+      emojiPreviewTextRef.current.textContent = `:${emojiInfo.shortcode}:`;
+    },
+    [mx, useAuthentication]
+  );
+
+  const throttleEmojiHover = useThrottle(handleEmojiPreview, {
+    wait: 200,
+    immediate: true,
+  });
+
+  const handleEmojiHover: MouseEventHandler = (evt) => {
+    const targetEl = targetFromEvent(evt.nativeEvent, 'button') as HTMLButtonElement | undefined;
+    if (!targetEl) return;
+    throttleEmojiHover(targetEl);
+  };
+
+  const handleEmojiFocus: FocusEventHandler = (evt) => {
+    const targetEl = evt.target as HTMLButtonElement;
+    handleEmojiPreview(targetEl);
+  };
+
+  // Reset scroll top on search and tab change
+  useEffect(() => {
+    syncActiveGroupId();
+    contentScrollRef.current?.scrollTo({
+      top: 0,
+    });
+  }, [result, emojiTab, syncActiveGroupId]);
+
+  return (
+    <FocusTrap
+      focusTrapOptions={{
+        returnFocusOnDeactivate,
+        initialFocus: false,
+        onDeactivate: requestClose,
+        clickOutsideDeactivates: true,
+        allowOutsideClick: true,
+        isKeyForward: (evt: KeyboardEvent) =>
+          !editableActiveElement() && isKeyHotkey(['arrowdown', 'arrowright'], evt),
+        isKeyBackward: (evt: KeyboardEvent) =>
+          !editableActiveElement() && isKeyHotkey(['arrowup', 'arrowleft'], evt),
+        escapeDeactivates: stopPropagation,
+      }}
+    >
+      <EmojiBoardLayout
+        header={
+          <Header>
+            <Box direction="Column" gap="200">
+              {onTabChange && <EmojiBoardTabs tab={tab} onTabChange={onTabChange} />}
+              <Input
+                data-emoji-board-search
+                variant="SurfaceVariant"
+                size="400"
+                placeholder={allowTextCustomEmoji ? 'Search or Text Reaction ' : 'Search'}
+                maxLength={50}
+                after={
+                  allowTextCustomEmoji && result?.query ? (
+                    <Chip
+                      variant="Primary"
+                      radii="Pill"
+                      after={<Icon src={Icons.ArrowRight} size="50" />}
+                      outlined
+                      onClick={() => {
+                        const searchInput = document.querySelector<HTMLInputElement>(
+                          '[data-emoji-board-search="true"]'
+                        );
+                        const textReaction = searchInput?.value.trim();
+                        if (!textReaction) return;
+                        onCustomEmojiSelect?.(textReaction, textReaction);
+                        requestClose();
+                      }}
+                    >
+                      <Text size="L400">React</Text>
+                    </Chip>
+                  ) : (
+                    <Icon src={Icons.Search} size="50" />
+                  )
+                }
+                onChange={handleOnChange}
+                autoFocus={!mobileOrTablet()}
+              />
+            </Box>
+          </Header>
+        }
+        sidebar={
+          <Sidebar>
+            {emojiTab && recentEmojis.length > 0 && (
+              <RecentEmojiSidebarStack onItemClick={handleScrollToGroup} />
+            )}
+            {imagePacks.length > 0 && (
+              <ImagePackSidebarStack
+                mx={mx}
+                usage={usage}
+                packs={imagePacks}
+                onItemClick={handleScrollToGroup}
+                useAuthentication={useAuthentication}
+              />
+            )}
+            {emojiTab && (
+              <NativeEmojiSidebarStack
+                groups={emojiGroups}
+                icons={emojiGroupIcons}
+                labels={emojiGroupLabels}
+                onItemClick={handleScrollToGroup}
+              />
+            )}
+          </Sidebar>
+        }
+        footer={
+          emojiTab ? (
+            <Footer>
+              <Box
+                display="InlineFlex"
+                ref={emojiPreviewRef}
+                className={css.EmojiPreview}
+                alignItems="Center"
+                justifyContent="Center"
+              >
+                😃
+              </Box>
+              <Text ref={emojiPreviewTextRef} size="H5" truncate>
+                :smiley:
+              </Text>
+            </Footer>
+          ) : (
+            imagePacks.length > 0 && (
+              <Footer>
+                <Text ref={emojiPreviewTextRef} size="H5" truncate>
+                  :smiley:
+                </Text>
+              </Footer>
+            )
+          )
+        }
+      >
+        <Content>
+          <Scroll
+            ref={contentScrollRef}
+            size="400"
+            onScroll={handleOnScroll}
+            onKeyDown={preventScrollWithArrowKey}
+            hideTrack
+          >
+            <Box
+              onClick={handleEmojiClick}
+              onMouseMove={handleEmojiHover}
+              onFocus={handleEmojiFocus}
+              direction="Column"
+              gap="200"
+            >
+              {searchedItems && (
+                <SearchEmojiGroup
+                  mx={mx}
+                  tab={tab}
+                  id={SEARCH_GROUP_ID}
+                  label={searchedItems.length ? 'Search Results' : 'No Results found'}
+                  emojis={searchedItems}
+                  useAuthentication={useAuthentication}
+                />
+              )}
+              {emojiTab && recentEmojis.length > 0 && (
+                <RecentEmojiGroup id={RECENT_GROUP_ID} label="Recent" emojis={recentEmojis} />
+              )}
+              {emojiTab && (
+                <CustomEmojiGroups
+                  mx={mx}
+                  groups={imagePacks}
+                  useAuthentication={useAuthentication}
+                />
+              )}
+              {stickerTab && (
+                <StickerGroups mx={mx} groups={imagePacks} useAuthentication={useAuthentication} />
+              )}
+              {emojiTab && <NativeEmojiGroups groups={emojiGroups} labels={emojiGroupLabels} />}
+            </Box>
+          </Scroll>
+        </Content>
+      </EmojiBoardLayout>
+    </FocusTrap>
+  );
+}

src/app/components/emoji-board/index.ts

@@ -0,0 +1 @@
+export * from './EmojiBoard';

src/app/components/emoji-board/useEmojiGroupIcons.ts

@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+import { IconSrc, Icons } from 'folds';
+
+import { EmojiGroupId } from '../../plugins/emoji';
+
+export type IEmojiGroupIcons = Record<EmojiGroupId, IconSrc>;
+
+export const useEmojiGroupIcons = (): IEmojiGroupIcons =>
+  useMemo(
+    () => ({
+      [EmojiGroupId.People]: Icons.Smile,
+      [EmojiGroupId.Nature]: Icons.Leaf,
+      [EmojiGroupId.Food]: Icons.Cup,
+      [EmojiGroupId.Activity]: Icons.Ball,
+      [EmojiGroupId.Travel]: Icons.Photo,
+      [EmojiGroupId.Object]: Icons.Bulb,
+      [EmojiGroupId.Symbol]: Icons.Peace,
+      [EmojiGroupId.Flag]: Icons.Flag,
+    }),
+    []
+  );

src/app/components/emoji-board/useEmojiGroupLabels.ts

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { EmojiGroupId } from '../../plugins/emoji';
+
+export type IEmojiGroupLabels = Record<EmojiGroupId, string>;
+
+export const useEmojiGroupLabels = (): IEmojiGroupLabels =>
+  useMemo(
+    () => ({
+      [EmojiGroupId.People]: 'Smileys & People',
+      [EmojiGroupId.Nature]: 'Animals & Nature',
+      [EmojiGroupId.Food]: 'Food & Drinks',
+      [EmojiGroupId.Activity]: 'Activity',
+      [EmojiGroupId.Travel]: 'Travel & Places',
+      [EmojiGroupId.Object]: 'Objects',
+      [EmojiGroupId.Symbol]: 'Symbols',
+      [EmojiGroupId.Flag]: 'Flags',
+    }),
+    []
+  );

src/app/components/event-readers/EventReaders.css.ts

@@ -0,0 +1,21 @@
+import { style } from '@vanilla-extract/css';
+import { DefaultReset, config } from 'folds';
+
+export const EventReaders = style([
+  DefaultReset,
+  {
+    height: '100%',
+  },
+]);
+
+export const Header = style({
+  paddingLeft: config.space.S400,
+  paddingRight: config.space.S300,
+
+  flexShrink: 0,
+});
+
+export const Content = style({
+  paddingLeft: config.space.S200,
+  paddingBottom: config.space.S400,
+});

src/app/components/event-readers/EventReaders.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import classNames from 'classnames';
+import {
+  Avatar,
+  Box,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  MenuItem,
+  Scroll,
+  Text,
+  as,
+  config,
+} from 'folds';
+import { Room } from 'matrix-js-sdk';
+import { useRoomEventReaders } from '../../hooks/useRoomEventReaders';
+import { getMemberDisplayName } from '../../utils/room';
+import { getMxIdLocalPart } from '../../utils/matrix';
+import * as css from './EventReaders.css';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { openProfileViewer } from '../../../client/action/navigation';
+import { UserAvatar } from '../user-avatar';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+
+export type EventReadersProps = {
+  room: Room;
+  eventId: string;
+  requestClose: () => void;
+};
+export const EventReaders = as<'div', EventReadersProps>(
+  ({ className, room, eventId, requestClose, ...props }, ref) => {
+    const mx = useMatrixClient();
+    const useAuthentication = useMediaAuthentication();
+    const latestEventReaders = useRoomEventReaders(room, eventId);
+
+    const getName = (userId: string) =>
+      getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
+
+    return (
+      <Box
+        className={classNames(css.EventReaders, className)}
+        direction="Column"
+        {...props}
+        ref={ref}
+      >
+        <Header className={css.Header} variant="Surface" size="600">
+          <Box grow="Yes">
+            <Text size="H3">Seen by</Text>
+          </Box>
+          <IconButton size="300" onClick={requestClose}>
+            <Icon src={Icons.Cross} />
+          </IconButton>
+        </Header>
+        <Box grow="Yes">
+          <Scroll visibility="Hover" hideTrack size="300">
+            <Box className={css.Content} direction="Column">
+              {latestEventReaders.map((readerId) => {
+                const name = getName(readerId);
+                const avatarMxcUrl = room
+                  .getMember(readerId)
+                  ?.getMxcAvatarUrl();
+                const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication) : undefined;
+
+                return (
+                  <MenuItem
+                    key={readerId}
+                    style={{ padding: `0 ${config.space.S200}` }}
+                    radii="400"
+                    onClick={() => {
+                      requestClose();
+                      openProfileViewer(readerId, room.roomId);
+                    }}
+                    before={
+                      <Avatar size="200">
+                        <UserAvatar
+                          userId={readerId}
+                          src={avatarUrl ?? undefined}
+                          alt={name}
+                          renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+                        />
+                      </Avatar>
+                    }
+                  >
+                    <Text size="T400" truncate>
+                      {name}
+                    </Text>
+                  </MenuItem>
+                );
+              })}
+            </Box>
+          </Scroll>
+        </Box>
+      </Box>
+    );
+  }
+);

src/app/components/event-readers/index.ts

@@ -0,0 +1 @@
+export * from './EventReaders';

src/app/components/image-editor/ImageEditor.css.ts

@@ -0,0 +1,35 @@
+import { style } from '@vanilla-extract/css';
+import { DefaultReset, color, config } from 'folds';
+
+export const ImageEditor = style([
+  DefaultReset,
+  {
+    height: '100%',
+  },
+]);
+
+export const ImageEditorHeader = style([
+  DefaultReset,
+  {
+    paddingLeft: config.space.S200,
+    paddingRight: config.space.S200,
+    borderBottomWidth: config.borderWidth.B300,
+    flexShrink: 0,
+    gap: config.space.S200,
+  },
+]);
+
+export const ImageEditorContent = style([
+  DefaultReset,
+  {
+    backgroundColor: color.Background.Container,
+    color: color.Background.OnContainer,
+    overflow: 'hidden',
+  },
+]);
+
+export const Image = style({
+  width: '100%',
+  height: '100%',
+  objectFit: 'contain',
+});

src/app/components/image-editor/ImageEditor.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds';
+import * as css from './ImageEditor.css';
+
+export type ImageEditorProps = {
+  name: string;
+  url: string;
+  requestClose: () => void;
+};
+
+export const ImageEditor = as<'div', ImageEditorProps>(
+  ({ className, name, url, requestClose, ...props }, ref) => {
+    const handleApply = () => {
+      //
+    };
+
+    return (
+      <Box
+        className={classNames(css.ImageEditor, className)}
+        direction="Column"
+        {...props}
+        ref={ref}
+      >
+        <Header className={css.ImageEditorHeader} size="400">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <IconButton size="300" radii="300" onClick={requestClose}>
+              <Icon size="50" src={Icons.ArrowLeft} />
+            </IconButton>
+            <Text size="T300" truncate>
+              Image Editor
+            </Text>
+          </Box>
+          <Box shrink="No" alignItems="Center" gap="200">
+            <Chip variant="Primary" radii="300" onClick={handleApply}>
+              <Text size="B300">Save</Text>
+            </Chip>
+          </Box>
+        </Header>
+        <Box
+          grow="Yes"
+          className={css.ImageEditorContent}
+          justifyContent="Center"
+          alignItems="Center"
+        >
+          <img className={css.Image} src={url} alt={name} />
+        </Box>
+      </Box>
+    );
+  }
+);

src/app/components/image-editor/index.ts

@@ -0,0 +1 @@
+export * from './ImageEditor';

src/app/components/image-pack-view/ImagePackContent.tsx

@@ -0,0 +1,388 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { as, Box, Text, config, Button, Menu, Spinner } from 'folds';
+import {
+  ImagePack,
+  ImageUsage,
+  PackContent,
+  PackImage,
+  PackImageReader,
+  packMetaEqual,
+  PackMetaReader,
+} from '../../plugins/custom-emoji';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { SequenceCard } from '../sequence-card';
+import { ImageTile, ImageTileEdit, ImageTileUpload } from './ImageTile';
+import { SettingTile } from '../setting-tile';
+import { UsageSwitcher } from './UsageSwitcher';
+import { ImagePackProfile, ImagePackProfileEdit } from './PackMeta';
+import * as css from './style.css';
+import { useFilePicker } from '../../hooks/useFilePicker';
+import { CompactUploadCardRenderer } from '../upload-card';
+import { UploadSuccess } from '../../state/upload';
+import { getImageInfo, TUploadContent } from '../../utils/matrix';
+import { getImageFileUrl, loadImageElement, renameFile } from '../../utils/dom';
+import { replaceSpaceWithDash, suffixRename } from '../../utils/common';
+import { getFileNameWithoutExt } from '../../utils/mimeTypes';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+
+export type ImagePackContentProps = {
+  imagePack: ImagePack;
+  canEdit?: boolean;
+  onUpdate?: (packContent: PackContent) => Promise<void>;
+};
+
+export const ImagePackContent = as<'div', ImagePackContentProps>(
+  ({ imagePack, canEdit, onUpdate, ...props }, ref) => {
+    const useAuthentication = useMediaAuthentication();
+
+    const [metaEditing, setMetaEditing] = useState(false);
+    const [savedMeta, setSavedMeta] = useState<PackMetaReader>();
+    const currentMeta = savedMeta ?? imagePack.meta;
+
+    const images = useMemo(() => Array.from(imagePack.images.collection.values()), [imagePack]);
+    const [files, setFiles] = useState<File[]>([]);
+    const [uploadedImages, setUploadedImages] = useState<PackImageReader[]>([]);
+    const [imagesEditing, setImagesEditing] = useState<Set<string>>(new Set());
+    const [savedImages, setSavedImages] = useState<Map<string, PackImageReader>>(new Map());
+    const [deleteImages, setDeleteImages] = useState<Set<string>>(new Set());
+
+    const hasImageWithShortcode = useCallback(
+      (shortcode: string): boolean => {
+        const hasInPack = imagePack.images.collection.has(shortcode);
+        if (hasInPack) return true;
+        const hasInUploaded =
+          uploadedImages.find((img) => img.shortcode === shortcode) !== undefined;
+        if (hasInUploaded) return true;
+        const hasInSaved =
+          Array.from(savedImages).find(([, img]) => img.shortcode === shortcode) !== undefined;
+        return hasInSaved;
+      },
+      [imagePack, savedImages, uploadedImages]
+    );
+
+    const pickFiles = useFilePicker(
+      useCallback(
+        (pickedFiles: File[]) => {
+          const uniqueFiles = pickedFiles.map((file) => {
+            const fileName = replaceSpaceWithDash(file.name);
+            if (hasImageWithShortcode(fileName)) {
+              const uniqueName = suffixRename(fileName, hasImageWithShortcode);
+              return renameFile(file, uniqueName);
+            }
+            return fileName !== file.name ? renameFile(file, fileName) : file;
+          });
+
+          setFiles((f) => [...f, ...uniqueFiles]);
+        },
+        [hasImageWithShortcode]
+      ),
+      true
+    );
+
+    const handleMetaSave = useCallback(
+      (editedMeta: PackMetaReader) => {
+        setMetaEditing(false);
+        setSavedMeta(
+          (m) =>
+            new PackMetaReader({
+              ...imagePack.meta.content,
+              ...m?.content,
+              ...editedMeta.content,
+            })
+        );
+      },
+      [imagePack.meta]
+    );
+
+    const handleMetaCancel = () => setMetaEditing(false);
+
+    const handlePackUsageChange = useCallback(
+      (usg: ImageUsage[]) => {
+        setSavedMeta(
+          (m) =>
+            new PackMetaReader({
+              ...imagePack.meta.content,
+              ...m?.content,
+              usage: usg,
+            })
+        );
+      },
+      [imagePack.meta]
+    );
+
+    const handleUploadRemove = useCallback((file: TUploadContent) => {
+      setFiles((fs) => fs.filter((f) => f !== file));
+    }, []);
+
+    const handleUploadComplete = useCallback(
+      async (data: UploadSuccess) => {
+        const imgEl = await loadImageElement(getImageFileUrl(data.file));
+        const packImage: PackImage = {
+          url: data.mxc,
+          info: getImageInfo(imgEl, data.file),
+        };
+        const image = PackImageReader.fromPackImage(
+          getFileNameWithoutExt(data.file.name),
+          packImage
+        );
+        if (!image) return;
+        handleUploadRemove(data.file);
+        setUploadedImages((imgs) => [image, ...imgs]);
+      },
+      [handleUploadRemove]
+    );
+
+    const handleImageEdit = (shortcode: string) => {
+      setImagesEditing((shortcodes) => {
+        const shortcodeSet = new Set(shortcodes);
+        shortcodeSet.add(shortcode);
+        return shortcodeSet;
+      });
+    };
+    const handleDeleteToggle = (shortcode: string) => {
+      setDeleteImages((shortcodes) => {
+        const shortcodeSet = new Set(shortcodes);
+        if (shortcodeSet.has(shortcode)) shortcodeSet.delete(shortcode);
+        else shortcodeSet.add(shortcode);
+        return shortcodeSet;
+      });
+    };
+
+    const handleImageEditCancel = (shortcode: string) => {
+      setImagesEditing((shortcodes) => {
+        const shortcodeSet = new Set(shortcodes);
+        shortcodeSet.delete(shortcode);
+        return shortcodeSet;
+      });
+    };
+
+    const handleImageEditSave = (shortcode: string, image: PackImageReader) => {
+      handleImageEditCancel(shortcode);
+
+      const saveImage =
+        shortcode !== image.shortcode && hasImageWithShortcode(image.shortcode)
+          ? new PackImageReader(
+              suffixRename(image.shortcode, hasImageWithShortcode),
+              image.url,
+              image.content
+            )
+          : image;
+
+      setSavedImages((sImgs) => {
+        const imgs = new Map(sImgs);
+        imgs.set(shortcode, saveImage);
+        return imgs;
+      });
+    };
+
+    const handleResetSavedChanges = () => {
+      setSavedMeta(undefined);
+      setFiles([]);
+      setUploadedImages([]);
+      setSavedImages(new Map());
+      setDeleteImages(new Set());
+    };
+
+    const [applyState, applyChanges] = useAsyncCallback(
+      useCallback(async () => {
+        const pack: PackContent = {
+          pack: savedMeta?.content ?? imagePack.meta.content,
+          images: {},
+        };
+        const pushImage = (img: PackImageReader) => {
+          if (deleteImages.has(img.shortcode)) return;
+          if (!pack.images) return;
+          const imgToPush = savedImages.get(img.shortcode) ?? img;
+          pack.images[imgToPush.shortcode] = imgToPush.content;
+        };
+        uploadedImages.forEach((img) => pushImage(img));
+        images.forEach((img) => pushImage(img));
+
+        return onUpdate?.(pack);
+      }, [imagePack, images, savedMeta, uploadedImages, savedImages, deleteImages, onUpdate])
+    );
+
+    useEffect(() => {
+      if (applyState.status === AsyncStatus.Success) {
+        handleResetSavedChanges();
+      }
+    }, [applyState]);
+
+    const savedChanges =
+      (savedMeta && !packMetaEqual(imagePack.meta, savedMeta)) ||
+      uploadedImages.length > 0 ||
+      savedImages.size > 0 ||
+      deleteImages.size > 0;
+    const canApplyChanges = !metaEditing && imagesEditing.size === 0 && files.length === 0;
+    const applying = applyState.status === AsyncStatus.Loading;
+
+    const renderImage = (image: PackImageReader) => (
+      <SequenceCard
+        key={image.shortcode}
+        style={{ padding: config.space.S300 }}
+        variant={deleteImages.has(image.shortcode) ? 'Critical' : 'SurfaceVariant'}
+        direction="Column"
+        gap="400"
+      >
+        {imagesEditing.has(image.shortcode) ? (
+          <ImageTileEdit
+            defaultShortcode={image.shortcode}
+            image={savedImages.get(image.shortcode) ?? image}
+            packUsage={currentMeta.usage}
+            useAuthentication={useAuthentication}
+            onCancel={handleImageEditCancel}
+            onSave={handleImageEditSave}
+          />
+        ) : (
+          <ImageTile
+            defaultShortcode={image.shortcode}
+            image={savedImages.get(image.shortcode) ?? image}
+            packUsage={currentMeta.usage}
+            useAuthentication={useAuthentication}
+            canEdit={canEdit}
+            onEdit={handleImageEdit}
+            deleted={deleteImages.has(image.shortcode)}
+            onDeleteToggle={handleDeleteToggle}
+          />
+        )}
+      </SequenceCard>
+    );
+
+    return (
+      <Box grow="Yes" direction="Column" gap="700" {...props} ref={ref}>
+        {savedChanges && (
+          <Menu className={css.UnsavedMenu} variant="Success">
+            <Box alignItems="Center" gap="400">
+              <Box grow="Yes" direction="Column">
+                {applyState.status === AsyncStatus.Error ? (
+                  <Text size="T200">
+                    <b>Failed to apply changes! Please try again.</b>
+                  </Text>
+                ) : (
+                  <Text size="T200">
+                    <b>Changes saved! Apply when ready.</b>
+                  </Text>
+                )}
+              </Box>
+              <Box shrink="No" gap="200">
+                <Button
+                  size="300"
+                  variant="Success"
+                  fill="None"
+                  radii="300"
+                  disabled={!canApplyChanges || applying}
+                  onClick={handleResetSavedChanges}
+                >
+                  <Text size="B300">Reset</Text>
+                </Button>
+                <Button
+                  size="300"
+                  variant="Success"
+                  radii="300"
+                  disabled={!canApplyChanges || applying}
+                  before={applying && <Spinner variant="Success" fill="Solid" size="100" />}
+                  onClick={applyChanges}
+                >
+                  <Text size="B300">Apply Changes</Text>
+                </Button>
+              </Box>
+            </Box>
+          </Menu>
+        )}
+        <Box direction="Column" gap="100">
+          <Text size="L400">Pack</Text>
+          <SequenceCard
+            style={{ padding: config.space.S300 }}
+            variant="SurfaceVariant"
+            direction="Column"
+            gap="400"
+          >
+            {metaEditing ? (
+              <ImagePackProfileEdit
+                meta={currentMeta}
+                onCancel={handleMetaCancel}
+                onSave={handleMetaSave}
+              />
+            ) : (
+              <ImagePackProfile
+                meta={currentMeta}
+                canEdit={canEdit}
+                onEdit={() => setMetaEditing(true)}
+              />
+            )}
+          </SequenceCard>
+          <SequenceCard
+            style={{ padding: config.space.S300 }}
+            variant="SurfaceVariant"
+            direction="Column"
+            gap="400"
+          >
+            <SettingTile
+              title="Images Usage"
+              description="Select how the images are being used: as emojis, as stickers, or as both."
+              after={
+                <UsageSwitcher
+                  usage={currentMeta.usage}
+                  canEdit={canEdit}
+                  onChange={handlePackUsageChange}
+                />
+              }
+            />
+          </SequenceCard>
+        </Box>
+        {images.length === 0 && !canEdit ? null : (
+          <Box direction="Column" gap="100">
+            <Text size="L400">Images</Text>
+            {canEdit && (
+              <SequenceCard
+                style={{ padding: config.space.S300 }}
+                variant="SurfaceVariant"
+                direction="Column"
+                gap="400"
+              >
+                <SettingTile
+                  title="Upload Images"
+                  description="Select images from your storage to upload them in pack."
+                  after={
+                    <Button
+                      variant="Secondary"
+                      fill="Soft"
+                      size="300"
+                      radii="300"
+                      type="button"
+                      outlined
+                      onClick={() => pickFiles('image/*')}
+                    >
+                      <Text size="B300">Select</Text>
+                    </Button>
+                  }
+                />
+              </SequenceCard>
+            )}
+            {files.map((file) => (
+              <SequenceCard
+                key={file.name}
+                style={{ padding: config.space.S300 }}
+                variant="SurfaceVariant"
+                direction="Column"
+                gap="400"
+              >
+                <ImageTileUpload file={file}>
+                  {(uploadAtom) => (
+                    <CompactUploadCardRenderer
+                      uploadAtom={uploadAtom}
+                      onRemove={handleUploadRemove}
+                      onComplete={handleUploadComplete}
+                    />
+                  )}
+                </ImageTileUpload>
+              </SequenceCard>
+            ))}
+            {uploadedImages.map(renderImage)}
+            {images.map(renderImage)}
+          </Box>
+        )}
+      </Box>
+    );
+  }
+);

src/app/components/image-pack-view/ImagePackView.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Box, IconButton, Text, Icon, Icons, Scroll, Chip } from 'folds';
+import { PackAddress } from '../../plugins/custom-emoji';
+import { Page, PageHeader, PageContent } from '../page';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { RoomImagePack } from './RoomImagePack';
+import { UserImagePack } from './UserImagePack';
+
+type ImagePackViewProps = {
+  address: PackAddress | undefined;
+  requestClose: () => void;
+};
+export function ImagePackView({ address, requestClose }: ImagePackViewProps) {
+  const mx = useMatrixClient();
+  const room = address && mx.getRoom(address.roomId);
+
+  return (
+    <Page>
+      <PageHeader outlined={false} balance>
+        <Box alignItems="Center" grow="Yes" gap="200">
+          <Box alignItems="Inherit" grow="Yes" gap="200">
+            <Chip
+              size="500"
+              radii="Pill"
+              onClick={requestClose}
+              before={<Icon size="100" src={Icons.ArrowLeft} />}
+            >
+              <Text size="T300">Emojis & Stickers</Text>
+            </Chip>
+          </Box>
+          <Box shrink="No">
+            <IconButton onClick={requestClose} variant="Surface">
+              <Icon src={Icons.Cross} />
+            </IconButton>
+          </Box>
+        </Box>
+      </PageHeader>
+      <Box grow="Yes">
+        <Scroll hideTrack visibility="Hover">
+          <PageContent>
+            {room && address ? (
+              <RoomImagePack room={room} stateKey={address.stateKey} />
+            ) : (
+              <UserImagePack />
+            )}
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}

src/app/components/image-pack-view/ImageTile.tsx

@@ -0,0 +1,214 @@
+import React, { FormEventHandler, ReactNode, useMemo, useState } from 'react';
+import { Badge, Box, Button, Chip, Icon, Icons, Input, Text } from 'folds';
+import { UsageSwitcher, useUsageStr } from './UsageSwitcher';
+import { mxcUrlToHttp } from '../../utils/matrix';
+import * as css from './style.css';
+import { ImageUsage, imageUsageEqual, PackImageReader } from '../../plugins/custom-emoji';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { SettingTile } from '../setting-tile';
+import { useObjectURL } from '../../hooks/useObjectURL';
+import { createUploadAtom, TUploadAtom } from '../../state/upload';
+import { replaceSpaceWithDash } from '../../utils/common';
+
+type ImageTileProps = {
+  defaultShortcode: string;
+  useAuthentication: boolean;
+  packUsage: ImageUsage[];
+  image: PackImageReader;
+  canEdit?: boolean;
+  onEdit?: (defaultShortcode: string, image: PackImageReader) => void;
+  deleted?: boolean;
+  onDeleteToggle?: (defaultShortcode: string) => void;
+};
+export function ImageTile({
+  defaultShortcode,
+  image,
+  packUsage,
+  useAuthentication,
+  canEdit,
+  onEdit,
+  onDeleteToggle,
+  deleted,
+}: ImageTileProps) {
+  const mx = useMatrixClient();
+  const getUsageStr = useUsageStr();
+
+  return (
+    <SettingTile
+      before={
+        <img
+          className={css.ImagePackImage}
+          src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? ''}
+          alt={image.shortcode}
+          loading="lazy"
+        />
+      }
+      title={
+        deleted ? (
+          <span className={css.DeleteImageShortcode}>{image.shortcode}</span>
+        ) : (
+          image.shortcode
+        )
+      }
+      description={
+        <Box as="span" gap="200">
+          {image.usage && getUsageStr(image.usage) !== getUsageStr(packUsage) && (
+            <Badge as="span" variant="Secondary" size="400" radii="300" outlined>
+              <Text as="span" size="L400">
+                {getUsageStr(image.usage)}
+              </Text>
+            </Badge>
+          )}
+          {image.body}
+        </Box>
+      }
+      after={
+        canEdit ? (
+          <Box shrink="No" alignItems="Center" gap="200">
+            <Chip
+              variant={deleted ? 'Critical' : 'Secondary'}
+              fill="None"
+              radii="Pill"
+              onClick={() => onDeleteToggle?.(defaultShortcode)}
+            >
+              {deleted ? <Text size="B300">Undo</Text> : <Icon size="50" src={Icons.Delete} />}
+            </Chip>
+            {!deleted && (
+              <Chip
+                variant="Secondary"
+                radii="Pill"
+                onClick={() => onEdit?.(defaultShortcode, image)}
+              >
+                <Text size="B300">Edit</Text>
+              </Chip>
+            )}
+          </Box>
+        ) : undefined
+      }
+    />
+  );
+}
+
+type ImageTileUploadProps = {
+  file: File;
+  children: (uploadAtom: TUploadAtom) => ReactNode;
+};
+export function ImageTileUpload({ file, children }: ImageTileUploadProps) {
+  const url = useObjectURL(file);
+  const uploadAtom = useMemo(() => createUploadAtom(file), [file]);
+
+  return (
+    <SettingTile before={<img className={css.ImagePackImage} src={url} alt={file.name} />}>
+      {children(uploadAtom)}
+    </SettingTile>
+  );
+}
+
+type ImageTileEditProps = {
+  defaultShortcode: string;
+  useAuthentication: boolean;
+  packUsage: ImageUsage[];
+  image: PackImageReader;
+  onCancel: (shortcode: string) => void;
+  onSave: (shortcode: string, image: PackImageReader) => void;
+};
+export function ImageTileEdit({
+  defaultShortcode,
+  useAuthentication,
+  packUsage,
+  image,
+  onCancel,
+  onSave,
+}: ImageTileEditProps) {
+  const mx = useMatrixClient();
+  const defaultUsage = image.usage ?? packUsage;
+
+  const [unsavedUsage, setUnsavedUsages] = useState(defaultUsage);
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const shortcodeInput = target?.shortcodeInput as HTMLInputElement | undefined;
+    const bodyInput = target?.bodyInput as HTMLTextAreaElement | undefined;
+    if (!shortcodeInput || !bodyInput) return;
+
+    const shortcode = replaceSpaceWithDash(shortcodeInput.value.trim());
+    const body = bodyInput.value.trim() || undefined;
+    const usage = unsavedUsage;
+
+    if (!shortcode) return;
+
+    if (
+      shortcode === image.shortcode &&
+      body === image.body &&
+      imageUsageEqual(usage, defaultUsage)
+    ) {
+      onCancel(defaultShortcode);
+      return;
+    }
+
+    const imageReader = new PackImageReader(shortcode, image.url, {
+      info: image.info,
+      body,
+      usage: imageUsageEqual(usage, packUsage) ? undefined : usage,
+    });
+
+    onSave(defaultShortcode, imageReader);
+  };
+
+  return (
+    <SettingTile
+      before={
+        <img
+          className={css.ImagePackImage}
+          src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? ''}
+          alt={image.shortcode}
+          loading="lazy"
+        />
+      }
+    >
+      <Box as="form" onSubmit={handleSubmit} direction="Column" gap="200">
+        <Box direction="Column" className={css.ImagePackImageInputs}>
+          <Input
+            before={<Text size="L400">Shortcode:</Text>}
+            defaultValue={image.shortcode}
+            name="shortcodeInput"
+            variant="Secondary"
+            size="300"
+            radii="0"
+            required
+            autoFocus
+          />
+          <Input
+            before={<Text size="L400">Body:</Text>}
+            defaultValue={image.body}
+            name="bodyInput"
+            variant="Secondary"
+            size="300"
+            radii="0"
+          />
+        </Box>
+        <Box gap="200">
+          <Box shrink="No" direction="Column">
+            <UsageSwitcher usage={unsavedUsage} onChange={setUnsavedUsages} canEdit />
+          </Box>
+          <Box grow="Yes" />
+          <Button type="submit" variant="Success" size="300" radii="300">
+            <Text size="B300">Save</Text>
+          </Button>
+          <Button
+            type="reset"
+            variant="Secondary"
+            fill="Soft"
+            size="300"
+            radii="300"
+            onClick={() => onCancel(defaultShortcode)}
+          >
+            <Text size="B300">Cancel</Text>
+          </Button>
+        </Box>
+      </Box>
+    </SettingTile>
+  );
+}

src/app/components/image-pack-view/PackMeta.tsx

@@ -0,0 +1,232 @@
+import React, { FormEventHandler, useCallback, useMemo, useState } from 'react';
+import {
+  Box,
+  Text,
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  Button,
+  Icon,
+  Icons,
+  Input,
+  TextArea,
+  Chip,
+} from 'folds';
+import Linkify from 'linkify-react';
+import { mxcUrlToHttp } from '../../utils/matrix';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { nameInitials } from '../../utils/common';
+import { BreakWord } from '../../styles/Text.css';
+import { LINKIFY_OPTS } from '../../plugins/react-custom-html-parser';
+import { ContainerColor } from '../../styles/ContainerColor.css';
+import { useFilePicker } from '../../hooks/useFilePicker';
+import { useObjectURL } from '../../hooks/useObjectURL';
+import { createUploadAtom, UploadSuccess } from '../../state/upload';
+import { CompactUploadCardRenderer } from '../upload-card';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { PackMetaReader } from '../../plugins/custom-emoji';
+
+type ImagePackAvatarProps = {
+  url?: string;
+  name?: string;
+};
+function ImagePackAvatar({ url, name }: ImagePackAvatarProps) {
+  return (
+    <Avatar size="500" className={ContainerColor({ variant: 'Secondary' })}>
+      {url ? (
+        <AvatarImage src={url} alt={name ?? 'Unknown'} />
+      ) : (
+        <AvatarFallback>
+          <Text size="H2">{nameInitials(name ?? 'Unknown')}</Text>
+        </AvatarFallback>
+      )}
+    </Avatar>
+  );
+}
+
+type ImagePackProfileProps = {
+  meta: PackMetaReader;
+  canEdit?: boolean;
+  onEdit?: () => void;
+};
+export function ImagePackProfile({ meta, canEdit, onEdit }: ImagePackProfileProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const avatarUrl = meta.avatar
+    ? mxcUrlToHttp(mx, meta.avatar, useAuthentication) ?? undefined
+    : undefined;
+
+  return (
+    <Box gap="400">
+      <Box grow="Yes" direction="Column" gap="300">
+        <Box direction="Column" gap="100">
+          <Text className={BreakWord} size="H5">
+            {meta.name ?? 'Unknown'}
+          </Text>
+          {meta.attribution && (
+            <Text className={BreakWord} size="T200">
+              <Linkify options={LINKIFY_OPTS}>{meta.attribution}</Linkify>
+            </Text>
+          )}
+        </Box>
+        {canEdit && (
+          <Box gap="200">
+            <Chip
+              variant="Secondary"
+              fill="Soft"
+              radii="300"
+              before={<Icon size="50" src={Icons.Pencil} />}
+              onClick={onEdit}
+              outlined
+            >
+              <Text size="B300">Edit</Text>
+            </Chip>
+          </Box>
+        )}
+      </Box>
+      <Box shrink="No">
+        <ImagePackAvatar url={avatarUrl} name={meta.name} />
+      </Box>
+    </Box>
+  );
+}
+
+type ImagePackProfileEditProps = {
+  meta: PackMetaReader;
+  onCancel: () => void;
+  onSave: (meta: PackMetaReader) => void;
+};
+export function ImagePackProfileEdit({ meta, onCancel, onSave }: ImagePackProfileEditProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const [avatar, setAvatar] = useState(meta.avatar);
+
+  const avatarUrl = avatar ? mxcUrlToHttp(mx, avatar, useAuthentication) ?? undefined : undefined;
+
+  const [imageFile, setImageFile] = useState<File>();
+  const avatarFileUrl = useObjectURL(imageFile);
+  const uploadingAvatar = avatarFileUrl ? avatar === meta.avatar : false;
+  const uploadAtom = useMemo(() => {
+    if (imageFile) return createUploadAtom(imageFile);
+    return undefined;
+  }, [imageFile]);
+
+  const pickFile = useFilePicker(setImageFile, false);
+
+  const handleRemoveUpload = useCallback(() => {
+    setImageFile(undefined);
+    setAvatar(meta.avatar);
+  }, [meta.avatar]);
+
+  const handleUploaded = useCallback((upload: UploadSuccess) => {
+    setAvatar(upload.mxc);
+  }, []);
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    if (uploadingAvatar) return;
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const nameInput = target?.nameInput as HTMLInputElement | undefined;
+    const attributionTextArea = target?.attributionTextArea as HTMLTextAreaElement | undefined;
+    if (!nameInput || !attributionTextArea) return;
+
+    const name = nameInput.value.trim();
+    const attribution = attributionTextArea.value.trim();
+    if (!name) return;
+
+    const metaReader = new PackMetaReader({
+      avatar_url: avatar,
+      display_name: name,
+      attribution,
+    });
+    onSave(metaReader);
+  };
+
+  return (
+    <Box as="form" onSubmit={handleSubmit} direction="Column" gap="400">
+      <Box gap="400">
+        <Box grow="Yes" direction="Column" gap="100">
+          <Text size="L400">Pack Avatar</Text>
+          {uploadAtom ? (
+            <Box gap="200" direction="Column">
+              <CompactUploadCardRenderer
+                uploadAtom={uploadAtom}
+                onRemove={handleRemoveUpload}
+                onComplete={handleUploaded}
+              />
+            </Box>
+          ) : (
+            <Box gap="200">
+              <Button
+                type="button"
+                size="300"
+                variant="Secondary"
+                fill="Soft"
+                radii="300"
+                onClick={() => pickFile('image/*')}
+              >
+                <Text size="B300">Upload</Text>
+              </Button>
+              {!avatar && meta.avatar && (
+                <Button
+                  type="button"
+                  size="300"
+                  variant="Success"
+                  fill="None"
+                  radii="300"
+                  onClick={() => setAvatar(meta.avatar)}
+                >
+                  <Text size="B300">Reset</Text>
+                </Button>
+              )}
+              {avatar && (
+                <Button
+                  type="button"
+                  size="300"
+                  variant="Critical"
+                  fill="None"
+                  radii="300"
+                  onClick={() => setAvatar(undefined)}
+                >
+                  <Text size="B300">Remove</Text>
+                </Button>
+              )}
+            </Box>
+          )}
+        </Box>
+        <Box shrink="No">
+          <ImagePackAvatar url={avatarFileUrl ?? avatarUrl} name={meta.name} />
+        </Box>
+      </Box>
+      <Box direction="Inherit" gap="100">
+        <Text size="L400">Name</Text>
+        <Input name="nameInput" defaultValue={meta.name} variant="Secondary" radii="300" required />
+      </Box>
+      <Box direction="Inherit" gap="100">
+        <Text size="L400">Attribution</Text>
+        <TextArea
+          name="attributionTextArea"
+          defaultValue={meta.attribution}
+          variant="Secondary"
+          radii="300"
+        />
+      </Box>
+      <Box gap="300">
+        <Button type="submit" variant="Success" size="300" radii="300" disabled={uploadingAvatar}>
+          <Text size="B300">Save</Text>
+        </Button>
+        <Button
+          type="reset"
+          onClick={onCancel}
+          variant="Secondary"
+          fill="Soft"
+          size="300"
+          radii="300"
+        >
+          <Text size="B300">Cancel</Text>
+        </Button>
+      </Box>
+    </Box>
+  );
+}