add mxid color toggle

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

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

@@ -12,9 +12,9 @@ jobs:
       PR_NUMBER: ${{github.event.number}}
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.2.0
+        uses: actions/checkout@v4.1.7
       - name: Setup node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version: 20.12.2
           cache: 'npm'
@@ -25,7 +25,7 @@ jobs:
           NODE_OPTIONS: '--max_old_space_size=4096'
         run: npm run build
       - name: Upload artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v4.3.6
         with:
           name: preview
           path: dist
@@ -33,7 +33,7 @@ jobs:
       - name: Save pr number
         run: echo ${PR_NUMBER} > ./pr.txt
       - name: Upload pr number
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v4.3.6
         with:
           name: pr
           path: ./pr.txt

.github/workflows/cla.yml

@@ -12,7 +12,7 @@ jobs:
       - 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
+        uses: cla-assistant/github-action@v2.5.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

.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@07ab29fd4a977ae4d2b275087cf67563dfdf0295
+        uses: dawidd6/action-download-artifact@bf251b5aa9c2f7eeb574a96ee720e24f801b7c11
         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@07ab29fd4a977ae4d2b275087cf67563dfdf0295
+        uses: dawidd6/action-download-artifact@bf251b5aa9c2f7eeb574a96ee720e24f801b7c11
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}

.github/workflows/docker-pr.yml

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

.github/workflows/lockfile.yml

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

.github/workflows/netlify-dev.yml

@@ -11,9 +11,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.2.0
+        uses: actions/checkout@v4.1.7
       - name: Setup node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version: 20.12.2
           cache: 'npm'

.github/workflows/prod-deploy.yml

@@ -10,9 +10,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.2.0
+        uses: actions/checkout@v4.1.7
       - name: Setup node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version: 20.12.2
           cache: 'npm'
@@ -52,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@c95fe1489396fe8a9eb87c0abf8aa5b2ef267fda
+        uses: softprops/action-gh-release@c062e08bd532815e2082a85e87e3ef29c3e6d191
         with:
           files: |
             cinny-${{ steps.vars.outputs.tag }}.tar.gz
@@ -66,31 +66,31 @@ jobs:
       packages: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.2.0
+        uses: actions/checkout@v4.1.7
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3.6.0
+        uses: docker/setup-qemu-action@v3.2.0
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.10.0
+        uses: docker/setup-buildx-action@v3.6.1
       - name: Login to Docker Hub
-        uses: docker/login-action@v3.4.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@v3.4.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@v5.7.0
+        uses: docker/metadata-action@v5.5.1
         with:
           images: |
             ${{ secrets.DOCKER_USERNAME }}/cinny
             ghcr.io/${{ github.repository }}
       - name: Build and push Docker image
-        uses: docker/build-push-action@v6.15.0
+        uses: docker/build-push-action@v6.7.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

Dockerfile

@@ -11,7 +11,7 @@ RUN npm run build
 
 
 ## App
-FROM nginx:1.27.4-alpine
+FROM nginx:1.27.0-alpine
 
 COPY --from=builder /src/dist /app
 COPY --from=builder /src/docker-nginx.conf /etc/nginx/conf.d/default.conf

README.md

@@ -19,22 +19,27 @@ A Matrix client focusing primarily on simple, elegant and secure interface. The
 <img align="center" src="https://raw.githubusercontent.com/cinnyapp/cinny-site/main/assets/preview2-light.png" height="380">
 
 ## Getting started
-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.
+* 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.
 
-You can also download our desktop app from the [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).
+* You can also download our desktop app from [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).
 
-## 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).
+* 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, register and Explore Community page, place a customized [`config.json`](config.json) in webroot of your choice.
+You will also need to setup redirects to serve the assests. An example setting of redirects for netlify is done in [`netlify.toml`](netlify.toml). You can also set `hashRouter.enabled = true` in [`config.json`](config.json) if you have trouble setting redirects.
+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 change `base: '/app'`.
 
-* The default homeservers and explore pages are defined in [`config.json`](config.json).
+* 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
+    ```
 
-* 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>
+<details>
+<summary>PGP Public Key to verify tarball</summary>
 
 ```
 -----BEGIN PGP PUBLIC KEY BLOCK-----
@@ -82,8 +87,8 @@ mxFo+ioe/ABCufSmyqFye0psX3Sp
 </details>
 
 ## Local development
-> [!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).
+> 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

contrib/caddy/caddyfile

@@ -1,6 +0,0 @@
-# more info: https://caddyserver.com/docs/caddyfile/patterns#single-page-apps-spas
-cinny.domain.tld {
-  root * /path/to/cinny/dist
-  try_files {path} / index.html
-  file_server
-}

contrib/nginx/cinny.domain.tld.conf

@@ -1,34 +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/;
+	location / {
+		root /opt/cinny/dist/;
 
-        rewrite ^/config.json$ /config.json break;
-        rewrite ^/manifest.json$ /manifest.json break;
+		rewrite ^/config.json$ /config.json break;
+    rewrite ^/manifest.json$ /manifest.json break;
 
-        rewrite ^/sw.js$ /sw.js break;
-        rewrite ^/pdf.worker.min.js$ /pdf.worker.min.js 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 ^/public/(.*)$ /public/$1 break;
+    rewrite ^/assets/(.*)$ /assets/$1 break;
 
-        rewrite ^(.+)$ /index.html break;
-    }
+    rewrite ^(.+)$ /index.html break;
+	}
 }

docker-nginx.conf

@@ -8,6 +8,7 @@ server {
     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;
 

netlify.toml

@@ -13,6 +13,11 @@
   to = "/sw.js"
   status = 200
 
+[[redirects]]
+  from = "*/olm.wasm"
+  to = "/olm.wasm"
+  status = 200
+  force = true
   
 [[redirects]]
   from = "/pdf.worker.min.js"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "4.8.1",
+  "version": "4.2.1",
   "description": "Yet another matrix client",
   "main": "index.js",
   "type": "module",
@@ -24,6 +24,7 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
     "@fontsource/inter": "4.5.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",
@@ -32,20 +33,18 @@
     "@vanilla-extract/recipes": "0.3.0",
     "@vanilla-extract/vite-plugin": "3.7.1",
     "await-to-js": "3.0.0",
-    "badwords-list": "2.0.1-4",
     "blurhash": "2.0.4",
     "browser-encrypt-attachment": "0.3.0",
-    "chroma-js": "3.1.2",
     "classnames": "2.3.2",
     "dateformat": "5.0.3",
     "dayjs": "1.11.10",
     "domhandler": "5.0.3",
-    "emojibase": "15.3.1",
-    "emojibase-data": "15.3.2",
+    "emojibase": "6.1.0",
+    "emojibase-data": "7.0.1",
     "file-saver": "2.0.5",
     "flux": "4.0.3",
     "focus-trap-react": "10.0.2",
-    "folds": "2.2.0",
+    "folds": "2.0.0",
     "formik": "2.4.6",
     "html-dom-parser": "4.0.0",
     "html-react-parser": "4.2.0",
@@ -57,16 +56,15 @@
     "jotai": "2.6.0",
     "linkify-react": "4.1.3",
     "linkifyjs": "4.1.3",
-    "matrix-js-sdk": "37.5.0",
+    "matrix-js-sdk": "34.5.0",
     "millify": "6.1.0",
     "pdfjs-dist": "4.2.67",
-    "prismjs": "1.30.0",
+    "prismjs": "1.29.0",
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-aria": "3.29.1",
     "react-autosize-textarea": "7.1.0",
     "react-blurhash": "0.2.0",
-    "react-colorful": "5.6.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.13",
     "react-google-recaptcha": "2.1.0",
@@ -75,10 +73,9 @@
     "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",
+    "slate": "0.94.1",
+    "slate-history": "0.93.0",
+    "slate-react": "0.98.4",
     "tippy.js": "6.3.7",
     "ua-parser-js": "1.0.35"
   },
@@ -86,9 +83,7 @@
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@rollup/plugin-inject": "5.0.3",
     "@rollup/plugin-wasm": "6.1.1",
-    "@types/chroma-js": "3.1.1",
     "@types/file-saver": "2.0.5",
-    "@types/is-hotkey": "0.1.10",
     "@types/node": "18.11.18",
     "@types/prismjs": "1.26.0",
     "@types/react": "18.2.39",
@@ -110,9 +105,9 @@
     "prettier": "2.8.1",
     "sass": "1.56.2",
     "typescript": "4.9.4",
-    "vite": "5.4.15",
+    "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"
+    "vite-plugin-top-level-await": "1.4.1"
   }
 }

src/app/components/AccountDataEditor.tsx

@@ -1,322 +0,0 @@
-import React, { FormEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  Box,
-  Text,
-  Icon,
-  Icons,
-  IconButton,
-  Input,
-  Button,
-  TextArea as TextAreaComponent,
-  color,
-  Spinner,
-  Chip,
-  Scroll,
-  config,
-} from 'folds';
-import { MatrixError } from 'matrix-js-sdk';
-import { Cursor } from '../plugins/text-area';
-import { syntaxErrorPosition } from '../utils/dom';
-import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { Page, PageHeader } from './page';
-import { useAlive } from '../hooks/useAlive';
-import { SequenceCard } from './sequence-card';
-import { TextViewerContent } from './text-viewer';
-import { useTextAreaCodeEditor } from '../hooks/useTextAreaCodeEditor';
-
-const EDITOR_INTENT_SPACE_COUNT = 2;
-
-export type AccountDataSubmitCallback = (type: string, content: object) => Promise<void>;
-
-type AccountDataInfo = {
-  type: string;
-  content: object;
-};
-
-type AccountDataEditProps = {
-  type: string;
-  defaultContent: string;
-  submitChange: AccountDataSubmitCallback;
-  onCancel: () => void;
-  onSave: (info: AccountDataInfo) => void;
-};
-function AccountDataEdit({
-  type,
-  defaultContent,
-  submitChange,
-  onCancel,
-  onSave,
-}: AccountDataEditProps) {
-  const alive = useAlive();
-
-  const textAreaRef = useRef<HTMLTextAreaElement>(null);
-  const [jsonError, setJSONError] = useState<SyntaxError>();
-
-  const { handleKeyDown, operations, getTarget } = useTextAreaCodeEditor(
-    textAreaRef,
-    EDITOR_INTENT_SPACE_COUNT
-  );
-
-  const [submitState, submit] = useAsyncCallback<void, MatrixError, [string, object]>(submitChange);
-  const submitting = submitState.status === AsyncStatus.Loading;
-
-  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
-    evt.preventDefault();
-    if (submitting) return;
-
-    const target = evt.target as HTMLFormElement | undefined;
-    const typeInput = target?.typeInput as HTMLInputElement | undefined;
-    const contentTextArea = target?.contentTextArea as HTMLTextAreaElement | undefined;
-    if (!typeInput || !contentTextArea) return;
-
-    const typeStr = typeInput.value.trim();
-    const contentStr = contentTextArea.value.trim();
-
-    let parsedContent: object;
-    try {
-      parsedContent = JSON.parse(contentStr);
-    } catch (e) {
-      setJSONError(e as SyntaxError);
-      return;
-    }
-    setJSONError(undefined);
-
-    if (
-      !typeStr ||
-      parsedContent === null ||
-      defaultContent === JSON.stringify(parsedContent, null, EDITOR_INTENT_SPACE_COUNT)
-    ) {
-      return;
-    }
-
-    submit(typeStr, parsedContent).then(() => {
-      if (alive()) {
-        onSave({
-          type: typeStr,
-          content: parsedContent,
-        });
-      }
-    });
-  };
-
-  useEffect(() => {
-    if (jsonError) {
-      const errorPosition = syntaxErrorPosition(jsonError) ?? 0;
-      const cursor = new Cursor(errorPosition, errorPosition, 'none');
-      operations.select(cursor);
-      getTarget()?.focus();
-    }
-  }, [jsonError, operations, getTarget]);
-
-  return (
-    <Box
-      as="form"
-      onSubmit={handleSubmit}
-      grow="Yes"
-      style={{
-        padding: config.space.S400,
-      }}
-      direction="Column"
-      gap="400"
-      aria-disabled={submitting}
-    >
-      <Box shrink="No" direction="Column" gap="100">
-        <Text size="L400">Account Data</Text>
-        <Box gap="300">
-          <Box grow="Yes" direction="Column">
-            <Input
-              variant={type.length > 0 || submitting ? 'SurfaceVariant' : 'Background'}
-              name="typeInput"
-              size="400"
-              radii="300"
-              readOnly={type.length > 0 || submitting}
-              defaultValue={type}
-              required
-            />
-          </Box>
-          <Button
-            variant="Success"
-            size="400"
-            radii="300"
-            type="submit"
-            disabled={submitting}
-            before={submitting && <Spinner variant="Primary" fill="Solid" size="300" />}
-          >
-            <Text size="B400">Save</Text>
-          </Button>
-          <Button
-            variant="Secondary"
-            fill="Soft"
-            size="400"
-            radii="300"
-            type="button"
-            onClick={onCancel}
-            disabled={submitting}
-          >
-            <Text size="B400">Cancel</Text>
-          </Button>
-        </Box>
-
-        {submitState.status === AsyncStatus.Error && (
-          <Text size="T200" style={{ color: color.Critical.Main }}>
-            <b>{submitState.error.message}</b>
-          </Text>
-        )}
-      </Box>
-      <Box grow="Yes" direction="Column" gap="100">
-        <Box shrink="No">
-          <Text size="L400">JSON Content</Text>
-        </Box>
-        <TextAreaComponent
-          ref={textAreaRef}
-          name="contentTextArea"
-          style={{
-            fontFamily: 'monospace',
-          }}
-          onKeyDown={handleKeyDown}
-          defaultValue={defaultContent}
-          resize="None"
-          spellCheck="false"
-          required
-          readOnly={submitting}
-        />
-        {jsonError && (
-          <Text size="T200" style={{ color: color.Critical.Main }}>
-            <b>
-              {jsonError.name}: {jsonError.message}
-            </b>
-          </Text>
-        )}
-      </Box>
-    </Box>
-  );
-}
-
-type AccountDataViewProps = {
-  type: string;
-  defaultContent: string;
-  onEdit: () => void;
-};
-function AccountDataView({ type, defaultContent, onEdit }: AccountDataViewProps) {
-  return (
-    <Box
-      direction="Column"
-      style={{
-        padding: config.space.S400,
-      }}
-      gap="400"
-    >
-      <Box shrink="No" gap="300" alignItems="End">
-        <Box grow="Yes" direction="Column" gap="100">
-          <Text size="L400">Account Data</Text>
-          <Input
-            variant="SurfaceVariant"
-            size="400"
-            radii="300"
-            readOnly
-            defaultValue={type}
-            required
-          />
-        </Box>
-        <Button variant="Secondary" size="400" radii="300" onClick={onEdit}>
-          <Text size="B400">Edit</Text>
-        </Button>
-      </Box>
-      <Box grow="Yes" direction="Column" gap="100">
-        <Text size="L400">JSON Content</Text>
-        <SequenceCard variant="SurfaceVariant">
-          <Scroll visibility="Always" size="300" hideTrack>
-            <TextViewerContent
-              size="T300"
-              style={{
-                padding: `${config.space.S300} ${config.space.S100} ${config.space.S300} ${config.space.S300}`,
-              }}
-              text={defaultContent}
-              langName="JSON"
-            />
-          </Scroll>
-        </SequenceCard>
-      </Box>
-    </Box>
-  );
-}
-
-export type AccountDataEditorProps = {
-  type?: string;
-  content?: object;
-  submitChange: AccountDataSubmitCallback;
-  requestClose: () => void;
-};
-
-export function AccountDataEditor({
-  type,
-  content,
-  submitChange,
-  requestClose,
-}: AccountDataEditorProps) {
-  const [data, setData] = useState<AccountDataInfo>({
-    type: type ?? '',
-    content: content ?? {},
-  });
-
-  const [edit, setEdit] = useState(!type);
-
-  const closeEdit = useCallback(() => {
-    if (!type) {
-      requestClose();
-      return;
-    }
-    setEdit(false);
-  }, [type, requestClose]);
-
-  const handleSave = useCallback((info: AccountDataInfo) => {
-    setData(info);
-    setEdit(false);
-  }, []);
-
-  const contentJSONStr = useMemo(
-    () => JSON.stringify(data.content, null, EDITOR_INTENT_SPACE_COUNT),
-    [data.content]
-  );
-
-  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">Developer Tools</Text>
-            </Chip>
-          </Box>
-          <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
-              <Icon src={Icons.Cross} />
-            </IconButton>
-          </Box>
-        </Box>
-      </PageHeader>
-      <Box grow="Yes" direction="Column">
-        {edit ? (
-          <AccountDataEdit
-            type={data.type}
-            defaultContent={contentJSONStr}
-            submitChange={submitChange}
-            onCancel={closeEdit}
-            onSave={handleSave}
-          />
-        ) : (
-          <AccountDataView
-            type={data.type}
-            defaultContent={contentJSONStr}
-            onEdit={() => setEdit(true)}
-          />
-        )}
-      </Box>
-    </Page>
-  );
-}

src/app/components/ActionUIA.tsx

@@ -1,73 +0,0 @@
-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/BackupRestore.tsx

@@ -1,281 +0,0 @@
-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/BetaNoticeBadge.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { TooltipProvider, Tooltip, Box, Text, Badge, toRem } from 'folds';
-
-export function BetaNoticeBadge() {
-  return (
-    <TooltipProvider
-      position="Right"
-      align="Center"
-      tooltip={
-        <Tooltip style={{ maxWidth: toRem(200) }}>
-          <Box direction="Column">
-            <Text size="L400">Notice</Text>
-            <Text size="T200">This feature is under testing and may change over time.</Text>
-          </Box>
-        </Tooltip>
-      }
-    >
-      {(triggerRef) => (
-        <Badge size="500" tabIndex={0} ref={triggerRef} variant="Primary" fill="Solid">
-          <Text size="L400">Beta</Text>
-        </Badge>
-      )}
-    </TooltipProvider>
-  );
-}

src/app/components/CapabilitiesAndMediaConfigLoader.tsx

@@ -19,7 +19,7 @@ export function CapabilitiesAndMediaConfigLoader({
     []
   >(
     useCallback(async () => {
-      const result = await Promise.allSettled([mx.getCapabilities(), mx.getMediaConfig()]);
+      const result = await Promise.allSettled([mx.getCapabilities(true), mx.getMediaConfig()]);
       const capabilities = promiseFulfilledResult(result[0]);
       const mediaConfig = promiseFulfilledResult(result[1]);
       return [capabilities, mediaConfig];

src/app/components/CapabilitiesLoader.tsx

@@ -9,7 +9,7 @@ type CapabilitiesLoaderProps = {
 export function CapabilitiesLoader({ children }: CapabilitiesLoaderProps) {
   const mx = useMatrixClient();
 
-  const [state, load] = useAsyncCallback(useCallback(() => mx.getCapabilities(), [mx]));
+  const [state, load] = useAsyncCallback(useCallback(() => mx.getCapabilities(true), [mx]));
 
   useEffect(() => {
     load();

src/app/components/DeviceVerification.tsx

@@ -1,318 +0,0 @@
-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

@@ -1,375 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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/HexColorPickerPopOut.tsx

@@ -1,59 +0,0 @@
-import FocusTrap from 'focus-trap-react';
-import { Box, Button, config, Menu, PopOut, RectCords, Text } from 'folds';
-import React, { MouseEventHandler, ReactNode, useState } from 'react';
-import { stopPropagation } from '../utils/keyboard';
-
-type HexColorPickerPopOutProps = {
-  children: (onOpen: MouseEventHandler<HTMLElement>, opened: boolean) => ReactNode;
-  picker: ReactNode;
-  onRemove?: () => void;
-};
-export function HexColorPickerPopOut({ picker, onRemove, children }: HexColorPickerPopOutProps) {
-  const [cords, setCords] = useState<RectCords>();
-
-  const handleOpen: MouseEventHandler<HTMLElement> = (evt) => {
-    setCords(evt.currentTarget.getBoundingClientRect());
-  };
-
-  return (
-    <PopOut
-      anchor={cords}
-      position="Bottom"
-      align="Center"
-      content={
-        <FocusTrap
-          focusTrapOptions={{
-            onDeactivate: () => setCords(undefined),
-            clickOutsideDeactivates: true,
-            escapeDeactivates: stopPropagation,
-          }}
-        >
-          <Menu
-            style={{
-              padding: config.space.S100,
-              borderRadius: config.radii.R500,
-              overflow: 'initial',
-            }}
-          >
-            <Box direction="Column" gap="200">
-              {picker}
-              {onRemove && (
-                <Button
-                  size="300"
-                  variant="Secondary"
-                  fill="Soft"
-                  radii="400"
-                  onClick={() => onRemove()}
-                >
-                  <Text size="B300">Remove</Text>
-                </Button>
-              )}
-            </Box>
-          </Menu>
-        </FocusTrap>
-      }
-    >
-      {children(handleOpen, !!cords)}
-    </PopOut>
-  );
-}

src/app/components/JoinRulesSwitcher.tsx

@@ -1,155 +0,0 @@
-import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
-import {
-  config,
-  Box,
-  MenuItem,
-  Text,
-  Icon,
-  Icons,
-  IconSrc,
-  RectCords,
-  PopOut,
-  Menu,
-  Button,
-  Spinner,
-} from 'folds';
-import { JoinRule } from 'matrix-js-sdk';
-import FocusTrap from 'focus-trap-react';
-import { stopPropagation } from '../utils/keyboard';
-
-export type ExtraJoinRules = 'knock_restricted';
-export type ExtendedJoinRules = JoinRule | ExtraJoinRules;
-
-type JoinRuleIcons = Record<ExtendedJoinRules, IconSrc>;
-export const useRoomJoinRuleIcon = (): JoinRuleIcons =>
-  useMemo(
-    () => ({
-      [JoinRule.Invite]: Icons.HashLock,
-      [JoinRule.Knock]: Icons.HashLock,
-      knock_restricted: Icons.Hash,
-      [JoinRule.Restricted]: Icons.Hash,
-      [JoinRule.Public]: Icons.HashGlobe,
-      [JoinRule.Private]: Icons.HashLock,
-    }),
-    []
-  );
-export const useSpaceJoinRuleIcon = (): JoinRuleIcons =>
-  useMemo(
-    () => ({
-      [JoinRule.Invite]: Icons.SpaceLock,
-      [JoinRule.Knock]: Icons.SpaceLock,
-      knock_restricted: Icons.Space,
-      [JoinRule.Restricted]: Icons.Space,
-      [JoinRule.Public]: Icons.SpaceGlobe,
-      [JoinRule.Private]: Icons.SpaceLock,
-    }),
-    []
-  );
-
-type JoinRuleLabels = Record<ExtendedJoinRules, string>;
-export const useRoomJoinRuleLabel = (): JoinRuleLabels =>
-  useMemo(
-    () => ({
-      [JoinRule.Invite]: 'Invite Only',
-      [JoinRule.Knock]: 'Knock & Invite',
-      knock_restricted: 'Space Members or Knock',
-      [JoinRule.Restricted]: 'Space Members',
-      [JoinRule.Public]: 'Public',
-      [JoinRule.Private]: 'Invite Only',
-    }),
-    []
-  );
-
-type JoinRulesSwitcherProps<T extends ExtendedJoinRules[]> = {
-  icons: JoinRuleIcons;
-  labels: JoinRuleLabels;
-  rules: T;
-  value: T[number];
-  onChange: (value: T[number]) => void;
-  disabled?: boolean;
-  changing?: boolean;
-};
-export function JoinRulesSwitcher<T extends ExtendedJoinRules[]>({
-  icons,
-  labels,
-  rules,
-  value,
-  onChange,
-  disabled,
-  changing,
-}: JoinRulesSwitcherProps<T>) {
-  const [cords, setCords] = useState<RectCords>();
-
-  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    setCords(evt.currentTarget.getBoundingClientRect());
-  };
-
-  const handleChange = useCallback(
-    (selectedRule: ExtendedJoinRules) => {
-      setCords(undefined);
-      onChange(selectedRule);
-    },
-    [onChange]
-  );
-
-  return (
-    <PopOut
-      anchor={cords}
-      position="Bottom"
-      align="End"
-      content={
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: false,
-            onDeactivate: () => setCords(undefined),
-            clickOutsideDeactivates: true,
-            isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-            escapeDeactivates: stopPropagation,
-          }}
-        >
-          <Menu>
-            <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
-              {rules.map((rule) => (
-                <MenuItem
-                  key={rule}
-                  size="300"
-                  variant="Surface"
-                  radii="300"
-                  aria-pressed={value === rule}
-                  onClick={() => handleChange(rule)}
-                  before={<Icon size="100" src={icons[rule]} />}
-                  disabled={disabled}
-                >
-                  <Box grow="Yes">
-                    <Text size="T300">{labels[rule]}</Text>
-                  </Box>
-                </MenuItem>
-              ))}
-            </Box>
-          </Menu>
-        </FocusTrap>
-      }
-    >
-      <Button
-        size="300"
-        variant="Secondary"
-        fill="Soft"
-        radii="300"
-        outlined
-        before={<Icon size="100" src={icons[value] ?? icons[JoinRule.Restricted]} />}
-        after={
-          changing ? (
-            <Spinner size="100" variant="Secondary" fill="Soft" />
-          ) : (
-            <Icon size="100" src={Icons.ChevronBottom} />
-          )
-        }
-        onClick={handleOpenMenu}
-        disabled={disabled}
-      >
-        <Text size="B300">{labels[value] ?? 'Unsupported'}</Text>
-      </Button>
-    </PopOut>
-  );
-}

src/app/components/LogoutDialog.tsx

@@ -1,89 +0,0 @@
-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

@@ -1,199 +0,0 @@
-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/MemberSortMenu.tsx

@@ -1,45 +0,0 @@
-import FocusTrap from 'focus-trap-react';
-import React from 'react';
-import { config, Menu, MenuItem, Text } from 'folds';
-import { stopPropagation } from '../utils/keyboard';
-import { useMemberSortMenu } from '../hooks/useMemberSort';
-
-type MemberSortMenuProps = {
-  requestClose: () => void;
-  selected: number;
-  onSelect: (index: number) => void;
-};
-export function MemberSortMenu({ selected, onSelect, requestClose }: MemberSortMenuProps) {
-  const memberSortMenu = useMemberSortMenu();
-
-  return (
-    <FocusTrap
-      focusTrapOptions={{
-        initialFocus: false,
-        onDeactivate: requestClose,
-        clickOutsideDeactivates: true,
-        isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-        isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-        escapeDeactivates: stopPropagation,
-      }}
-    >
-      <Menu style={{ padding: config.space.S100 }}>
-        {memberSortMenu.map((menuItem, index) => (
-          <MenuItem
-            key={menuItem.name}
-            variant="Surface"
-            aria-pressed={selected === index}
-            size="300"
-            radii="300"
-            onClick={() => {
-              onSelect(index);
-              requestClose();
-            }}
-          >
-            <Text size="T300">{menuItem.name}</Text>
-          </MenuItem>
-        ))}
-      </Menu>
-    </FocusTrap>
-  );
-}

src/app/components/MembershipFilterMenu.tsx

@@ -1,49 +0,0 @@
-import FocusTrap from 'focus-trap-react';
-import React from 'react';
-import { config, Menu, MenuItem, Text } from 'folds';
-import { stopPropagation } from '../utils/keyboard';
-import { useMembershipFilterMenu } from '../hooks/useMemberFilter';
-
-type MembershipFilterMenuProps = {
-  requestClose: () => void;
-  selected: number;
-  onSelect: (index: number) => void;
-};
-export function MembershipFilterMenu({
-  selected,
-  onSelect,
-  requestClose,
-}: MembershipFilterMenuProps) {
-  const membershipFilterMenu = useMembershipFilterMenu();
-
-  return (
-    <FocusTrap
-      focusTrapOptions={{
-        initialFocus: false,
-        onDeactivate: requestClose,
-        clickOutsideDeactivates: true,
-        isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-        isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-        escapeDeactivates: stopPropagation,
-      }}
-    >
-      <Menu style={{ padding: config.space.S100 }}>
-        {membershipFilterMenu.map((menuItem, index) => (
-          <MenuItem
-            key={menuItem.name}
-            variant="Surface"
-            aria-pressed={selected === index}
-            size="300"
-            radii="300"
-            onClick={() => {
-              onSelect(index);
-              requestClose();
-            }}
-          >
-            <Text size="T300">{menuItem.name}</Text>
-          </MenuItem>
-        ))}
-      </Menu>
-    </FocusTrap>
-  );
-}

src/app/components/Modal500.tsx

@@ -1,29 +0,0 @@
-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/RenderMessageContent.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { MsgType } from 'matrix-js-sdk';
 import { HTMLReactParserOptions } from 'html-react-parser';
 import { Opts } from 'linkifyjs';
-import { config } from 'folds';
 import {
   AudioContent,
   DownloadFile,
@@ -30,7 +29,6 @@ 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;
@@ -69,63 +67,38 @@ export function RenderMessageContent({
       </UrlPreviewHolder>
     );
   };
-  const renderCaption = () => {
-    const content: IImageContent = getContent();
-    if (content.filename && content.filename !== content.body) {
-      return (
-        <MText
-          style={{ marginTop: config.space.S200 }}
-          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()}
-    </>
+    <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}
+    />
   );
 
   if (msgType === MsgType.Text) {
@@ -185,72 +158,63 @@ export function RenderMessageContent({
 
   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()}
-      </>
+      <MImage
+        content={getContent()}
+        renderImageContent={(props) => (
+          <ImageContent
+            {...props}
+            autoPlay={mediaAutoLoad}
+            renderImage={(p) => <Image {...p} loading="lazy" />}
+            renderViewer={(p) => <ImageViewer {...p} />}
+          />
+        )}
+        outlined={outlineAttachment}
+      />
     );
   }
 
   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()}
-      </>
+      <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}
+      />
     );
   }
 
   if (msgType === MsgType.Audio) {
     return (
-      <>
-        <MAudio
-          content={getContent()}
-          renderAsFile={renderFile}
-          renderAudioContent={(props) => (
-            <AudioContent {...props} renderMediaControl={(p) => <MediaControl {...p} />} />
-          )}
-          outlined={outlineAttachment}
-        />
-        {renderCaption()}
-      </>
+      <MAudio
+        content={getContent()}
+        renderAsFile={renderFile}
+        renderAudioContent={(props) => (
+          <AudioContent {...props} renderMediaControl={(p) => <MediaControl {...p} />} />
+        )}
+        outlined={outlineAttachment}
+      />
     );
   }
 

src/app/components/RoomNotificationSwitcher.tsx

@@ -1,120 +0,0 @@
-import { Box, config, Icon, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
-import React, { MouseEventHandler, ReactNode, useMemo, useState } from 'react';
-import FocusTrap from 'focus-trap-react';
-import { stopPropagation } from '../utils/keyboard';
-import {
-  getRoomNotificationModeIcon,
-  RoomNotificationMode,
-  useSetRoomNotificationPreference,
-} from '../hooks/useRoomsNotificationPreferences';
-import { AsyncStatus } from '../hooks/useAsyncCallback';
-
-const useRoomNotificationModes = (): RoomNotificationMode[] =>
-  useMemo(
-    () => [
-      RoomNotificationMode.Unset,
-      RoomNotificationMode.AllMessages,
-      RoomNotificationMode.SpecialMessages,
-      RoomNotificationMode.Mute,
-    ],
-    []
-  );
-
-const useRoomNotificationModeStr = (): Record<RoomNotificationMode, string> =>
-  useMemo(
-    () => ({
-      [RoomNotificationMode.Unset]: 'Default',
-      [RoomNotificationMode.AllMessages]: 'All Messages',
-      [RoomNotificationMode.SpecialMessages]: 'Mention & Keywords',
-      [RoomNotificationMode.Mute]: 'Mute',
-    }),
-    []
-  );
-
-type NotificationModeSwitcherProps = {
-  roomId: string;
-  value?: RoomNotificationMode;
-  children: (
-    handleOpen: MouseEventHandler<HTMLButtonElement>,
-    opened: boolean,
-    changing: boolean
-  ) => ReactNode;
-};
-export function RoomNotificationModeSwitcher({
-  roomId,
-  value = RoomNotificationMode.Unset,
-  children,
-}: NotificationModeSwitcherProps) {
-  const modes = useRoomNotificationModes();
-  const modeToStr = useRoomNotificationModeStr();
-
-  const { modeState, setMode } = useSetRoomNotificationPreference(roomId);
-  const changing = modeState.status === AsyncStatus.Loading;
-
-  const [menuCords, setMenuCords] = useState<RectCords>();
-
-  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    setMenuCords(evt.currentTarget.getBoundingClientRect());
-  };
-
-  const handleClose = () => {
-    setMenuCords(undefined);
-  };
-
-  const handleSelect = (mode: RoomNotificationMode) => {
-    if (changing) return;
-    setMode(mode, value);
-    handleClose();
-  };
-
-  return (
-    <PopOut
-      anchor={menuCords}
-      offset={5}
-      position="Right"
-      align="Start"
-      content={
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: false,
-            onDeactivate: handleClose,
-            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 }}>
-              {modes.map((mode) => (
-                <MenuItem
-                  key={mode}
-                  size="300"
-                  variant="Surface"
-                  aria-pressed={mode === value}
-                  radii="300"
-                  disabled={changing}
-                  onClick={() => handleSelect(mode)}
-                  before={
-                    <Icon
-                      size="100"
-                      src={getRoomNotificationModeIcon(mode)}
-                      filled={mode === value}
-                    />
-                  }
-                >
-                  <Text size="T300">
-                    {mode === value ? <b>{modeToStr[mode]}</b> : modeToStr[mode]}
-                  </Text>
-                </MenuItem>
-              ))}
-            </Box>
-          </Menu>
-        </FocusTrap>
-      }
-    >
-      {children(handleOpenMenu, !!menuCords, changing)}
-    </PopOut>
-  );
-}

src/app/components/SecretStorage.tsx

@@ -1,204 +0,0 @@
-import React, { FormEventHandler, useCallback } from 'react';
-import { Box, Text, Button, Spinner, color } from 'folds';
-import { decodeRecoveryKey, deriveRecoveryKeyFromPassphrase } from 'matrix-js-sdk/lib/crypto-api';
-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 deriveRecoveryKeyFromPassphrase>
-  >(
-    useCallback(
-      async (passphrase, salt, iterations, bits) => {
-        const decodedRecoveryKey = await deriveRecoveryKeyFromPassphrase(
-          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/UIAFlowOverlay.tsx

@@ -13,6 +13,7 @@ import {
   IconButton,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
+import { stopPropagation } from '../utils/keyboard';
 
 export type UIAFlowOverlayProps = {
   currentStep: number;
@@ -28,7 +29,7 @@ export function UIAFlowOverlay({
 }: UIAFlowOverlayProps) {
   return (
     <Overlay open backdrop={<OverlayBackdrop />}>
-      <FocusTrap focusTrapOptions={{ initialFocus: false, escapeDeactivates: false }}>
+      <FocusTrap focusTrapOptions={{ initialFocus: false, escapeDeactivates: stopPropagation }}>
         <Box style={{ height: '100%' }} direction="Column" grow="Yes" gap="400">
           <Box grow="Yes" direction="Column" alignItems="Center" justifyContent="Center">
             {children}

src/app/components/cutout-card/CutoutCard.css.ts

@@ -1,8 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { config } from 'folds';
-
-export const CutoutCard = style({
-  borderRadius: config.radii.R300,
-  borderWidth: config.borderWidth.B300,
-  overflow: 'hidden',
-});

src/app/components/cutout-card/CutoutCard.tsx

@@ -1,15 +0,0 @@
-import { as, ContainerColor as TContainerColor } from 'folds';
-import React from 'react';
-import classNames from 'classnames';
-import { ContainerColor } from '../../styles/ContainerColor.css';
-import * as css from './CutoutCard.css';
-
-export const CutoutCard = as<'div', { variant?: TContainerColor }>(
-  ({ as: AsCutoutCard = 'div', className, variant = 'Surface', ...props }, ref) => (
-    <AsCutoutCard
-      className={classNames(ContainerColor({ variant }), css.CutoutCard, className)}
-      {...props}
-      ref={ref}
-    />
-  )
-);

src/app/components/cutout-card/index.ts

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

src/app/components/editor/Toolbar.tsx

@@ -257,9 +257,7 @@ export function Toolbar() {
   const modKey = isMacOS() ? KeySymbol.Command : 'Ctrl';
   const disableInline = isBlockActive(editor, BlockType.CodeBlock);
 
-  const canEscape = isBlockActive(editor, BlockType.Paragraph)
-    ? isAnyMarkActive(editor)
-    : ReactEditor.isFocused(editor);
+  const canEscape = isAnyMarkActive(editor) || !isBlockActive(editor, BlockType.Paragraph);
   const [isMarkdown, setIsMarkdown] = useSetting(settingsAtom, 'isMarkdown');
 
   return (

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

@@ -5,7 +5,6 @@ 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;
@@ -13,22 +12,13 @@ type AutocompleteMenuProps = {
   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,
+            onDeactivate: () => requestClose(),
             returnFocusOnDeactivate: false,
             clickOutsideDeactivates: true,
             allowOutsideClick: true,

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

@@ -6,21 +6,24 @@ 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 {
+  SearchItemStrGetter,
+  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 { ExtendedPackImage, PackUsage } from '../../../plugins/custom-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 EmoticonSearchItem = ExtendedPackImage | IEmoji;
 
 type EmoticonAutocompleteProps = {
   imagePackRooms: Room[];
@@ -30,11 +33,16 @@ type EmoticonAutocompleteProps = {
 };
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
+  limit: 20,
   matchOptions: {
     contain: true,
   },
 };
 
+const getEmoticonStr: SearchItemStrGetter<EmoticonSearchItem> = (emoticon) => [
+  `:${emoticon.shortcode}:`,
+];
+
 export function EmoticonAutocomplete({
   imagePackRooms,
   editor,
@@ -44,23 +52,19 @@ export function EmoticonAutocomplete({
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
 
-  const imagePacks = useRelevantImagePacks(ImageUsage.Emoticon, imagePackRooms);
+  const imagePacks = useRelevantImagePacks(mx, PackUsage.Emoticon, imagePackRooms);
   const recentEmoji = useRecentEmoji(mx, 20);
 
   const searchList = useMemo(() => {
     const list: Array<EmoticonSearchItem> = [];
     return list.concat(
-      imagePacks.flatMap((pack) => pack.getImages(ImageUsage.Emoticon)),
+      imagePacks.flatMap((pack) => pack.getImagesFor(PackUsage.Emoticon)),
       emojis
     );
   }, [imagePacks]);
 
-  const [result, search, resetSearch] = useAsyncSearch(
-    searchList,
-    getEmoticonSearchStr,
-    SEARCH_OPTIONS
-  );
-  const autoCompleteEmoticon = result ? result.items.slice(0, 20) : recentEmoji;
+  const [result, search, resetSearch] = useAsyncSearch(searchList, getEmoticonStr, SEARCH_OPTIONS);
+  const autoCompleteEmoticon = result ? result.items : recentEmoji;
 
   useEffect(() => {
     if (query.text) search(query.text);

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

@@ -65,6 +65,7 @@ type RoomMentionAutocompleteProps = {
 };
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
+  limit: 20,
   matchOptions: {
     contain: true,
   },
@@ -96,7 +97,7 @@ export function RoomMentionAutocomplete({
     SEARCH_OPTIONS
   );
 
-  const autoCompleteRoomIds = result ? result.items.slice(0, 20) : allRooms.slice(0, 20);
+  const autoCompleteRoomIds = result ? result.items : allRooms.slice(0, 20);
 
   useEffect(() => {
     if (query.text) search(query.text);

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

@@ -19,7 +19,6 @@ import { getMxIdLocalPart, getMxIdServer, validMxId } from '../../../utils/matri
 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;
 
@@ -68,13 +67,8 @@ type UserMentionAutocompleteProps = {
   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,
+  limit: 20,
   matchOptions: {
     contain: true,
   },
@@ -97,9 +91,7 @@ export function UserMentionAutocomplete({
   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
-  );
+  const autoCompleteMembers = result ? result.items : members.slice(0, 20);
 
   useEffect(() => {
     if (query.text) search(query.text);

src/app/components/editor/input.ts

@@ -26,75 +26,48 @@ import {
   testMatrixTo,
 } from '../../plugins/matrix-to';
 import { tryDecodeURIComponent } from '../../utils/dom';
-import {
-  escapeMarkdownInlineSequences,
-  escapeMarkdownBlockSequences,
-} from '../../plugins/markdown';
 
-type ProcessTextCallback = (text: string) => string;
+const markNodeToType: Record<string, MarkType> = {
+  b: MarkType.Bold,
+  strong: MarkType.Bold,
+  i: MarkType.Italic,
+  em: MarkType.Italic,
+  u: MarkType.Underline,
+  s: MarkType.StrikeThrough,
+  del: MarkType.StrikeThrough,
+  code: MarkType.Code,
+  span: MarkType.Spoiler,
+};
 
-const getText = (node: ChildNode): string => {
+const elementToTextMark = (node: Element): MarkType | undefined => {
+  const markType = markNodeToType[node.name];
+  if (!markType) return undefined;
+
+  if (markType === MarkType.Spoiler && node.attribs['data-mx-spoiler'] === undefined) {
+    return undefined;
+  }
+  if (
+    markType === MarkType.Code &&
+    node.parent &&
+    'name' in node.parent &&
+    node.parent.name === 'pre'
+  ) {
+    return undefined;
+  }
+  return markType;
+};
+
+const parseNodeText = (node: ChildNode): string => {
   if (isText(node)) {
     return node.data;
   }
   if (isTag(node)) {
-    return node.children.map((child) => getText(child)).join('');
+    return node.children.map((child) => parseNodeText(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 => {
+const elementToInlineNode = (node: Element): MentionElement | EmoticonElement | undefined => {
   if (node.name === 'img' && node.attribs['data-mx-emoticon'] !== undefined) {
     const { src, alt } = node.attribs;
     if (!src) return undefined;
@@ -106,13 +79,13 @@ const getInlineNonMarkElement = (node: Element): MentionElement | EmoticonElemen
     if (testMatrixTo(href)) {
       const userMention = parseMatrixToUser(href);
       if (userMention) {
-        return createMentionElement(userMention, getText(node) || userMention, false);
+        return createMentionElement(userMention, parseNodeText(node) || userMention, false);
       }
       const roomMention = parseMatrixToRoom(href);
       if (roomMention) {
         return createMentionElement(
           roomMention.roomIdOrAlias,
-          getText(node) || roomMention.roomIdOrAlias,
+          parseNodeText(node) || roomMention.roomIdOrAlias,
           false,
           undefined,
           roomMention.viaServers
@@ -122,7 +95,7 @@ const getInlineNonMarkElement = (node: Element): MentionElement | EmoticonElemen
       if (eventMention) {
         return createMentionElement(
           eventMention.roomIdOrAlias,
-          getText(node) || eventMention.roomIdOrAlias,
+          parseNodeText(node) || eventMention.roomIdOrAlias,
           false,
           eventMention.eventId,
           eventMention.viaServers
@@ -133,40 +106,44 @@ const getInlineNonMarkElement = (node: Element): MentionElement | EmoticonElemen
   return undefined;
 };
 
-const getInlineElement = (node: ChildNode, processText: ProcessTextCallback): InlineElement[] => {
+const parseInlineNodes = (node: ChildNode): InlineElement[] => {
   if (isText(node)) {
-    return [{ text: processText(node.data) }];
+    return [{ text: node.data }];
   }
-
   if (isTag(node)) {
-    const markType = getInlineNodeMarkType(node);
+    const markType = elementToTextMark(node);
     if (markType) {
-      return getInlineMarkElement(markType, node, (child) => {
-        if (markType === MarkType.Code) return [{ text: getText(child) }];
-        return getInlineElement(child, processText);
-      });
+      const children = node.children.flatMap(parseInlineNodes);
+      if (node.attribs['data-md'] !== undefined) {
+        children.unshift({ text: node.attribs['data-md'] });
+        children.push({ text: node.attribs['data-md'] });
+      } else {
+        children.forEach((child) => {
+          if (Text.isText(child)) {
+            child[markType] = true;
+          }
+        });
+      }
+      return children;
     }
 
-    const inlineNode = getInlineNonMarkElement(node);
+    const inlineNode = elementToInlineNode(node);
     if (inlineNode) return [inlineNode];
 
     if (node.name === 'a') {
-      const children = node.childNodes.flatMap((child) => getInlineElement(child, processText));
+      const children = node.childNodes.flatMap(parseInlineNodes);
       children.unshift({ text: '[' });
       children.push({ text: `](${node.attribs.href})` });
       return children;
     }
 
-    return node.childNodes.flatMap((child) => getInlineElement(child, processText));
+    return node.childNodes.flatMap(parseInlineNodes);
   }
 
   return [];
 };
 
-const parseBlockquoteNode = (
-  node: Element,
-  processText: ProcessTextCallback
-): BlockQuoteElement[] | ParagraphElement[] => {
+const parseBlockquoteNode = (node: Element): BlockQuoteElement[] | ParagraphElement[] => {
   const quoteLines: Array<InlineElement[]> = [];
   let lineHolder: InlineElement[] = [];
 
@@ -179,7 +156,7 @@ const parseBlockquoteNode = (
 
   node.children.forEach((child) => {
     if (isText(child)) {
-      lineHolder.push({ text: processText(child.data) });
+      lineHolder.push({ text: child.data });
       return;
     }
     if (isTag(child)) {
@@ -191,20 +168,19 @@ const parseBlockquoteNode = (
 
       if (child.name === 'p') {
         appendLine();
-        quoteLines.push(child.children.flatMap((c) => getInlineElement(c, processText)));
+        quoteLines.push(child.children.flatMap((c) => parseInlineNodes(c)));
         return;
       }
 
-      lineHolder.push(...getInlineElement(child, processText));
+      parseInlineNodes(child).forEach((inlineNode) => lineHolder.push(inlineNode));
     }
   });
   appendLine();
 
-  const mdSequence = node.attribs['data-md'];
-  if (mdSequence !== undefined) {
+  if (node.attribs['data-md'] !== undefined) {
     return quoteLines.map((lineChildren) => ({
       type: BlockType.Paragraph,
-      children: [{ text: `${mdSequence} ` }, ...lineChildren],
+      children: [{ text: `${node.attribs['data-md']} ` }, ...lineChildren],
     }));
   }
 
@@ -219,19 +195,22 @@ const parseBlockquoteNode = (
   ];
 };
 const parseCodeBlockNode = (node: Element): CodeBlockElement[] | ParagraphElement[] => {
-  const codeLines = getText(node).trim().split('\n');
+  const codeLines = parseNodeText(node).trim().split('\n');
 
-  const mdSequence = node.attribs['data-md'];
-  if (mdSequence !== undefined) {
-    const pLines = codeLines.map<ParagraphElement>((text) => ({
+  if (node.attribs['data-md'] !== undefined) {
+    const pLines = codeLines.map<ParagraphElement>((lineText) => ({
       type: BlockType.Paragraph,
-      children: [{ text }],
+      children: [
+        {
+          text: lineText,
+        },
+      ],
     }));
     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 };
+    const prefix = { text: `${node.attribs['data-md']}${className.replace('language-', '')}` };
+    const suffix = { text: node.attribs['data-md'] };
     return [
       { type: BlockType.Paragraph, children: [prefix] },
       ...pLines,
@@ -242,16 +221,19 @@ const parseCodeBlockNode = (node: Element): CodeBlockElement[] | ParagraphElemen
   return [
     {
       type: BlockType.CodeBlock,
-      children: codeLines.map<CodeLineElement>((text) => ({
+      children: codeLines.map<CodeLineElement>((lineTxt) => ({
         type: BlockType.CodeLine,
-        children: [{ text }],
+        children: [
+          {
+            text: lineTxt,
+          },
+        ],
       })),
     },
   ];
 };
 const parseListNode = (
-  node: Element,
-  processText: ProcessTextCallback
+  node: Element
 ): OrderedListElement[] | UnorderedListElement[] | ParagraphElement[] => {
   const listLines: Array<InlineElement[]> = [];
   let lineHolder: InlineElement[] = [];
@@ -265,7 +247,7 @@ const parseListNode = (
 
   node.children.forEach((child) => {
     if (isText(child)) {
-      lineHolder.push({ text: processText(child.data) });
+      lineHolder.push({ text: child.data });
       return;
     }
     if (isTag(child)) {
@@ -277,18 +259,17 @@ const parseListNode = (
 
       if (child.name === 'li') {
         appendLine();
-        listLines.push(child.children.flatMap((c) => getInlineElement(c, processText)));
+        listLines.push(child.children.flatMap((c) => parseInlineNodes(c)));
         return;
       }
 
-      lineHolder.push(...getInlineElement(child, processText));
+      parseInlineNodes(child).forEach((inlineNode) => lineHolder.push(inlineNode));
     }
   });
   appendLine();
 
-  const mdSequence = node.attribs['data-md'];
-  if (mdSequence !== undefined) {
-    const prefix = mdSequence || '-';
+  if (node.attribs['data-md'] !== undefined) {
+    const prefix = node.attribs['data-md'] || '-';
     const [starOrHyphen] = prefix.match(/^\*|-$/) ?? [];
     return listLines.map((lineChildren) => ({
       type: BlockType.Paragraph,
@@ -321,21 +302,17 @@ const parseListNode = (
     },
   ];
 };
-const parseHeadingNode = (
-  node: Element,
-  processText: ProcessTextCallback
-): HeadingElement | ParagraphElement => {
-  const children = node.children.flatMap((child) => getInlineElement(child, processText));
+const parseHeadingNode = (node: Element): HeadingElement | ParagraphElement => {
+  const children = node.children.flatMap((child) => parseInlineNodes(child));
 
   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) {
+  if (node.attribs['data-md'] !== undefined) {
     return {
       type: BlockType.Paragraph,
-      children: [{ text: `${mdSequence} ` }, ...children],
+      children: [{ text: `${node.attribs['data-md']} ` }, ...children],
     };
   }
 
@@ -346,11 +323,7 @@ const parseHeadingNode = (
   };
 };
 
-export const domToEditorInput = (
-  domNodes: ChildNode[],
-  processText: ProcessTextCallback,
-  processLineStartText: ProcessTextCallback
-): Descendant[] => {
+export const domToEditorInput = (domNodes: ChildNode[]): Descendant[] => {
   const children: Descendant[] = [];
 
   let lineHolder: InlineElement[] = [];
@@ -367,14 +340,7 @@ export const domToEditorInput = (
 
   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) });
+      lineHolder.push({ text: node.data });
       return;
     }
     if (isTag(node)) {
@@ -388,14 +354,14 @@ export const domToEditorInput = (
         appendLine();
         children.push({
           type: BlockType.Paragraph,
-          children: node.children.flatMap((child) => getInlineElement(child, processText)),
+          children: node.children.flatMap((child) => parseInlineNodes(child)),
         });
         return;
       }
 
       if (node.name === 'blockquote') {
         appendLine();
-        children.push(...parseBlockquoteNode(node, processText));
+        children.push(...parseBlockquoteNode(node));
         return;
       }
       if (node.name === 'pre') {
@@ -405,17 +371,17 @@ export const domToEditorInput = (
       }
       if (node.name === 'ol' || node.name === 'ul') {
         appendLine();
-        children.push(...parseListNode(node, processText));
+        children.push(...parseListNode(node));
         return;
       }
 
       if (node.name.match(/^h[123456]$/)) {
         appendLine();
-        children.push(parseHeadingNode(node, processText));
+        children.push(parseHeadingNode(node));
         return;
       }
 
-      lineHolder.push(...getInlineElement(node, processText));
+      parseInlineNodes(node).forEach((inlineNode) => lineHolder.push(inlineNode));
     }
   });
   appendLine();
@@ -423,31 +389,21 @@ export const domToEditorInput = (
   return children;
 };
 
-export const htmlToEditorInput = (unsafeHtml: string, markdown?: boolean): Descendant[] => {
+export const htmlToEditorInput = (unsafeHtml: string): 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);
-  });
+  const editorNodes = domToEditorInput(domNodes);
   return editorNodes;
 };
 
-export const plainToEditorInput = (text: string, markdown?: boolean): Descendant[] => {
+export const plainToEditorInput = (text: string): Descendant[] => {
   const editorNodes: Descendant[] = text.split('\n').map((lineText) => {
     const paragraphNode: ParagraphElement = {
       type: BlockType.Paragraph,
       children: [
         {
-          text: markdown
-            ? escapeMarkdownBlockSequences(lineText, escapeMarkdownInlineSequences)
-            : lineText,
+          text: lineText,
         },
       ],
     };

src/app/components/editor/output.ts

@@ -1,17 +1,10 @@
-import { Descendant, Editor, Text } from 'slate';
-import { MatrixClient } from 'matrix-js-sdk';
+import { Descendant, Text } from 'slate';
+
 import { sanitizeText } from '../../utils/sanitize';
 import { BlockType } from './types';
 import { CustomElement } from './slate';
-import {
-  parseBlockMD,
-  parseInlineMD,
-  unescapeMarkdownBlockSequences,
-  unescapeMarkdownInlineSequences,
-} from '../../plugins/markdown';
+import { parseBlockMD, parseInlineMD } from '../../plugins/markdown';
 import { findAndReplace } from '../../utils/findAndReplace';
-import { sanitizeForRegex } from '../../utils/regex';
-import { getCanonicalAliasOrRoomId, isUserId } from '../../utils/matrix';
 
 export type OutputOptions = {
   allowTextFormatting?: boolean;
@@ -25,7 +18,7 @@ const textToCustomHtml = (node: Text, opts: OutputOptions): string => {
     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.strikeThrough) string = `<del>${string}</del>`;
     if (node.code) string = `<code>${string}</code>`;
     if (node.spoiler) string = `<span data-mx-spoiler>${string}</span>`;
   }
@@ -108,8 +101,7 @@ export const toMatrixCustomHTML = (
         allowBlockMarkdown: false,
       })
         .replace(/<br\/>$/, '\n')
-        .replace(/^(\\*)&gt;/, '$1>');
-
+        .replace(/^&gt;/, '>');
       markdownLines += line;
       if (index === targetNodes.length - 1) {
         return parseBlockMD(markdownLines, ignoreHTMLParseInlineMD);
@@ -164,14 +156,11 @@ const elementToPlainText = (node: CustomElement, children: string): string => {
   }
 };
 
-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;
+export const toPlainText = (node: Descendant | Descendant[]): string => {
+  if (Array.isArray(node)) return node.map((n) => toPlainText(n)).join('');
+  if (Text.isText(node)) return node.text;
 
-  const children = node.children.map((n) => toPlainText(n, isMarkdown)).join('');
+  const children = node.children.map((n) => toPlainText(n)).join('');
   return elementToPlainText(node, children);
 };
 
@@ -190,42 +179,9 @@ export const customHtmlEqualsPlainText = (customHtml: string, plain: string): bo
 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 cmdRegX = new RegExp(`^(\\s+)?(\\/${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/emoji-board/EmojiBoard.tsx

@@ -41,6 +41,7 @@ import { preventScrollWithArrowKey, stopPropagation } from '../../utils/keyboard
 import { useRelevantImagePacks } from '../../hooks/useImagePacks';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRecentEmoji } from '../../hooks/useRecentEmoji';
+import { ExtendedPackImage, ImagePack, PackUsage } from '../../plugins/custom-emoji';
 import { isUserId, mxcUrlToHttp } from '../../utils/matrix';
 import { editableActiveElement, isIntersectingScrollView, targetFromEvent } from '../../utils/dom';
 import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
@@ -49,8 +50,6 @@ 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';
@@ -360,16 +359,16 @@ function ImagePackSidebarStack({
 }: {
   mx: MatrixClient;
   packs: ImagePack[];
-  usage: ImageUsage;
+  usage: PackUsage;
   onItemClick: (id: string) => void;
   useAuthentication?: boolean;
 }) {
   const activeGroupId = useAtomValue(activeGroupIdAtom);
   return (
     <SidebarStack>
-      {usage === ImageUsage.Emoticon && <SidebarDivider />}
+      {usage === PackUsage.Emoticon && <SidebarDivider />}
       {packs.map((pack) => {
-        let label = pack.meta.name;
+        let label = pack.displayName;
         if (!label) label = isUserId(pack.id) ? 'Personal Pack' : mx.getRoom(pack.id)?.name;
         return (
           <SidebarBtn
@@ -385,10 +384,7 @@ function ImagePackSidebarStack({
                 height: toRem(24),
                 objectFit: 'contain',
               }}
-              src={
-                mxcUrlToHttp(mx, pack.getAvatarUrl(usage) ?? '', useAuthentication) ||
-                pack.meta.avatar
-              }
+              src={mxcUrlToHttp(mx, pack.getPackAvatarUrl(usage) ?? '', useAuthentication) || pack.avatarUrl}
               alt={label || 'Unknown Pack'}
             />
           </SidebarBtn>
@@ -466,154 +462,130 @@ export function SearchEmojiGroup({
   tab: EmojiBoardTab;
   label: string;
   id: string;
-  emojis: Array<PackImageReader | IEmoji>;
+  emojis: Array<ExtendedPackImage | 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>
-            )
+          '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>
-            )
-          )}
+          '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;
-  }) => (
+  ({ 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 key={pack.id} id={pack.id} label={pack.displayName || 'Unknown'}>
+          {pack.getEmojis().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>
+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>
-      )}
-      {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>
-      ))}
-    </>
-  )
-);
+      </Box>
+    )}
+    {groups.map((pack) => (
+      <EmojiGroup key={pack.id} id={pack.id} label={pack.displayName || 'Unknown'}>
+        {pack.getStickers().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 }) => (
@@ -637,8 +609,15 @@ export const NativeEmojiGroups = memo(
   )
 );
 
+const getSearchListItemStr = (item: ExtendedPackImage | IEmoji) => {
+  const shortcode = `:${item.shortcode}:`;
+  if ('body' in item) {
+    return [shortcode, item.body ?? ''];
+  }
+  return shortcode;
+};
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
-  limit: 1000,
+  limit: 26,
   matchOptions: {
     contain: true,
   },
@@ -654,7 +633,6 @@ export function EmojiBoard({
   onCustomEmojiSelect,
   onStickerSelect,
   allowTextCustomEmoji,
-  addToRecentEmoji = true,
 }: {
   tab?: EmojiBoardTab;
   onTabChange?: (tab: EmojiBoardTab) => void;
@@ -665,18 +643,17 @@ export function EmojiBoard({
   onCustomEmojiSelect?: (mxc: string, shortcode: string) => void;
   onStickerSelect?: (mxc: string, shortcode: string, label: string) => void;
   allowTextCustomEmoji?: boolean;
-  addToRecentEmoji?: boolean;
 }) {
   const emojiTab = tab === EmojiBoardTab.Emoji;
   const stickerTab = tab === EmojiBoardTab.Sticker;
-  const usage = emojiTab ? ImageUsage.Emoticon : ImageUsage.Sticker;
+  const usage = emojiTab ? PackUsage.Emoticon : PackUsage.Sticker;
 
   const setActiveGroupId = useSetAtom(activeGroupIdAtom);
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const emojiGroupLabels = useEmojiGroupLabels();
   const emojiGroupIcons = useEmojiGroupIcons();
-  const imagePacks = useRelevantImagePacks(usage, imagePackRooms);
+  const imagePacks = useRelevantImagePacks(mx, usage, imagePackRooms);
   const recentEmojis = useRecentEmoji(mx, 21);
 
   const contentScrollRef = useRef<HTMLDivElement>(null);
@@ -684,20 +661,18 @@ export function EmojiBoard({
   const emojiPreviewTextRef = useRef<HTMLParagraphElement>(null);
 
   const searchList = useMemo(() => {
-    let list: Array<PackImageReader | IEmoji> = [];
-    list = list.concat(imagePacks.flatMap((pack) => pack.getImages(usage)));
+    let list: Array<ExtendedPackImage | IEmoji> = [];
+    list = list.concat(imagePacks.flatMap((pack) => pack.getImagesFor(usage)));
     if (emojiTab) list = list.concat(emojis);
     return list;
   }, [emojiTab, usage, imagePacks]);
 
   const [result, search, resetSearch] = useAsyncSearch(
     searchList,
-    getEmoticonSearchStr,
+    getSearchListItemStr,
     SEARCH_OPTIONS
   );
 
-  const searchedItems = result?.items.slice(0, 100);
-
   const handleOnChange: ChangeEventHandler<HTMLInputElement> = useDebounce(
     useCallback(
       (evt) => {
@@ -713,7 +688,7 @@ export function EmojiBoard({
   const syncActiveGroupId = useCallback(() => {
     const targetEl = contentScrollRef.current;
     if (!targetEl) return;
-    const groupEls = Array.from(targetEl.querySelectorAll('div[data-group-id]')) as HTMLElement[];
+    const groupEls = [...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);
@@ -737,9 +712,7 @@ export function EmojiBoard({
     if (emojiInfo.type === EmojiType.Emoji) {
       onEmojiSelect?.(emojiInfo.data, emojiInfo.shortcode);
       if (!evt.altKey && !evt.shiftKey) {
-        if (addToRecentEmoji) {
-          addRecentEmoji(mx, emojiInfo.data);
-        }
+        addRecentEmoji(mx, emojiInfo.data);
         requestClose();
       }
     }
@@ -762,10 +735,7 @@ export function EmojiBoard({
       } 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('src', mxcUrlToHttp(mx, emojiInfo.data, useAuthentication) || emojiInfo.data);
         img.setAttribute('alt', emojiInfo.shortcode);
         emojiPreviewRef.current.textContent = '';
         emojiPreviewRef.current.appendChild(img);
@@ -920,29 +890,21 @@ export function EmojiBoard({
               direction="Column"
               gap="200"
             >
-              {searchedItems && (
+              {result && (
                 <SearchEmojiGroup
                   mx={mx}
                   tab={tab}
                   id={SEARCH_GROUP_ID}
-                  label={searchedItems.length ? 'Search Results' : 'No Results found'}
-                  emojis={searchedItems}
+                  label={result.items.length ? 'Search Results' : 'No Results found'}
+                  emojis={result.items}
                   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 && <CustomEmojiGroups mx={mx} groups={imagePacks} useAuthentication={useAuthentication} />}
+              {stickerTab && <StickerGroups mx={mx} groups={imagePacks} useAuthentication={useAuthentication} />}
               {emojiTab && <NativeEmojiGroups groups={emojiGroups} labels={emojiGroupLabels} />}
             </Box>
           </Scroll>

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

@@ -1,35 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

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

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

@@ -1,388 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,214 +0,0 @@
-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

@@ -1,232 +0,0 @@
-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>
-  );
-}

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

@@ -1,55 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import { Room } from 'matrix-js-sdk';
-import { usePowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { ImagePackContent } from './ImagePackContent';
-import { ImagePack, PackContent } from '../../plugins/custom-emoji';
-import { StateEvent } from '../../../types/matrix/room';
-import { useRoomImagePack } from '../../hooks/useImagePacks';
-import { randomStr } from '../../utils/common';
-
-type RoomImagePackProps = {
-  room: Room;
-  stateKey: string;
-};
-
-export function RoomImagePack({ room, stateKey }: RoomImagePackProps) {
-  const mx = useMatrixClient();
-  const userId = mx.getUserId()!;
-  const powerLevels = usePowerLevels(room);
-
-  const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
-  const canEditImagePack = canSendStateEvent(StateEvent.PoniesRoomEmotes, getPowerLevel(userId));
-
-  const fallbackPack = useMemo(() => {
-    const fakePackId = randomStr(4);
-    return new ImagePack(
-      fakePackId,
-      {},
-      {
-        roomId: room.roomId,
-        stateKey,
-      }
-    );
-  }, [room.roomId, stateKey]);
-  const imagePack = useRoomImagePack(room, stateKey) ?? fallbackPack;
-
-  const handleUpdate = useCallback(
-    async (packContent: PackContent) => {
-      const { address } = imagePack;
-      if (!address) return;
-
-      await mx.sendStateEvent(
-        address.roomId,
-        StateEvent.PoniesRoomEmotes,
-        packContent,
-        address.stateKey
-      );
-    },
-    [mx, imagePack]
-  );
-
-  return (
-    <ImagePackContent imagePack={imagePack} canEdit={canEditImagePack} onUpdate={handleUpdate} />
-  );
-}

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

@@ -1,116 +0,0 @@
-import React, { MouseEventHandler, useMemo, useState } from 'react';
-import { Box, Button, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
-import FocusTrap from 'focus-trap-react';
-import { ImageUsage } from '../../plugins/custom-emoji';
-import { stopPropagation } from '../../utils/keyboard';
-
-export const useUsageStr = (): ((usage: ImageUsage[]) => string) => {
-  const getUsageStr = (usage: ImageUsage[]): string => {
-    const sticker = usage.includes(ImageUsage.Sticker);
-    const emoticon = usage.includes(ImageUsage.Emoticon);
-
-    if (sticker && emoticon) return 'Both';
-    if (sticker) return 'Sticker';
-    if (emoticon) return 'Emoji';
-    return 'Both';
-  };
-  return getUsageStr;
-};
-
-type UsageSelectorProps = {
-  selected: ImageUsage[];
-  onChange: (usage: ImageUsage[]) => void;
-};
-export function UsageSelector({ selected, onChange }: UsageSelectorProps) {
-  const getUsageStr = useUsageStr();
-
-  const selectedUsageStr = getUsageStr(selected);
-  const isSelected = (usage: ImageUsage[]) => getUsageStr(usage) === selectedUsageStr;
-
-  const allUsages: ImageUsage[][] = useMemo(
-    () => [[ImageUsage.Emoticon], [ImageUsage.Sticker], [ImageUsage.Sticker, ImageUsage.Emoticon]],
-    []
-  );
-
-  return (
-    <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
-      {allUsages.map((usage) => (
-        <MenuItem
-          key={getUsageStr(usage)}
-          size="300"
-          variant={isSelected(usage) ? 'SurfaceVariant' : 'Surface'}
-          aria-selected={isSelected(usage)}
-          radii="300"
-          onClick={() => onChange(usage)}
-        >
-          <Box grow="Yes">
-            <Text size="T300">{getUsageStr(usage)}</Text>
-          </Box>
-        </MenuItem>
-      ))}
-    </Box>
-  );
-}
-
-type UsageSwitcherProps = {
-  usage: ImageUsage[];
-  canEdit?: boolean;
-  onChange: (usage: ImageUsage[]) => void;
-};
-export function UsageSwitcher({ usage, onChange, canEdit }: UsageSwitcherProps) {
-  const getUsageStr = useUsageStr();
-
-  const [menuCords, setMenuCords] = useState<RectCords>();
-
-  const handleSelectUsage: MouseEventHandler<HTMLButtonElement> = (event) => {
-    setMenuCords(event.currentTarget.getBoundingClientRect());
-  };
-
-  return (
-    <>
-      <Button
-        variant="Secondary"
-        fill="Soft"
-        size="300"
-        radii="300"
-        type="button"
-        outlined
-        aria-disabled={!canEdit}
-        after={canEdit && <Icon src={Icons.ChevronBottom} size="100" />}
-        onClick={canEdit ? handleSelectUsage : undefined}
-      >
-        <Text size="B300">{getUsageStr(usage)}</Text>
-      </Button>
-      <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>
-              <UsageSelector
-                selected={usage}
-                onChange={(usg) => {
-                  setMenuCords(undefined);
-                  onChange(usg);
-                }}
-              />
-            </Menu>
-          </FocusTrap>
-        }
-      />
-    </>
-  );
-}

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

@@ -1,22 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import { ImagePackContent } from './ImagePackContent';
-import { ImagePack, PackContent } from '../../plugins/custom-emoji';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { AccountDataEvent } from '../../../types/matrix/accountData';
-import { useUserImagePack } from '../../hooks/useImagePacks';
-
-export function UserImagePack() {
-  const mx = useMatrixClient();
-
-  const defaultPack = useMemo(() => new ImagePack(mx.getUserId() ?? '', {}, undefined), [mx]);
-  const imagePack = useUserImagePack();
-
-  const handleUpdate = useCallback(
-    async (packContent: PackContent) => {
-      await mx.setAccountData(AccountDataEvent.PoniesUserEmotes, packContent);
-    },
-    [mx]
-  );
-
-  return <ImagePackContent imagePack={imagePack ?? defaultPack} canEdit onUpdate={handleUpdate} />;
-}

src/app/components/image-pack-view/index.ts

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

src/app/components/image-pack-view/style.css.ts

@@ -1,37 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { color, config, DefaultReset, toRem } from 'folds';
-
-export const ImagePackImage = style([
-  DefaultReset,
-  {
-    width: toRem(36),
-    height: toRem(36),
-    objectFit: 'contain',
-  },
-]);
-
-export const DeleteImageShortcode = style([
-  DefaultReset,
-  {
-    color: color.Critical.Main,
-    textDecoration: 'line-through',
-  },
-]);
-
-export const ImagePackImageInputs = style([
-  DefaultReset,
-  {
-    overflow: 'hidden',
-    borderRadius: config.radii.R300,
-  },
-]);
-
-export const UnsavedMenu = style({
-  position: 'sticky',
-  padding: config.space.S200,
-  paddingLeft: config.space.S400,
-  top: config.space.S400,
-  left: config.space.S400,
-  right: 0,
-  zIndex: 1,
-});

src/app/components/info-card/InfoCard.tsx

@@ -1,53 +0,0 @@
-import { Box, ContainerColor, Text } from 'folds';
-import React, { ReactNode } from 'react';
-import classNames from 'classnames';
-import { BreakWord } from '../../styles/Text.css';
-import { ContainerColor as ContainerClr } from '../../styles/ContainerColor.css';
-import * as css from './styles.css';
-
-type InfoCardProps = {
-  variant?: ContainerColor;
-  title?: ReactNode;
-  description?: ReactNode;
-  before?: ReactNode;
-  after?: ReactNode;
-  children?: ReactNode;
-};
-export function InfoCard({
-  variant = 'Primary',
-  title,
-  description,
-  before,
-  after,
-  children,
-}: InfoCardProps) {
-  return (
-    <Box
-      direction="Column"
-      className={classNames(css.InfoCard, ContainerClr({ variant }))}
-      gap="300"
-    >
-      <Box gap="200" alignItems="Center">
-        {before && (
-          <Box shrink="No" alignSelf="Start">
-            {before}
-          </Box>
-        )}
-        <Box grow="Yes" direction="Column" gap="100">
-          {title && (
-            <Text size="L400" className={BreakWord}>
-              {title}
-            </Text>
-          )}
-          {description && (
-            <Text size="T200" className={BreakWord}>
-              {description}
-            </Text>
-          )}
-        </Box>
-        {after && <Box shrink="No">{after}</Box>}
-      </Box>
-      {children}
-    </Box>
-  );
-}

src/app/components/info-card/index.ts

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

src/app/components/info-card/styles.css.ts

@@ -1,10 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { config } from 'folds';
-
-export const InfoCard = style([
-  {
-    padding: config.space.S200,
-    borderRadius: config.radii.R300,
-    borderWidth: config.borderWidth.B300,
-  },
-]);

src/app/components/member-tile/MemberTile.tsx

@@ -1,53 +0,0 @@
-import React, { ReactNode } from 'react';
-import { as, Avatar, Box, Icon, Icons, Text } from 'folds';
-import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
-import { getMemberDisplayName } from '../../utils/room';
-import { getMxIdLocalPart } from '../../utils/matrix';
-import { UserAvatar } from '../user-avatar';
-import * as css from './style.css';
-
-const getName = (room: Room, member: RoomMember) =>
-  getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId) ?? member.userId;
-
-type MemberTileProps = {
-  mx: MatrixClient;
-  room: Room;
-  member: RoomMember;
-  useAuthentication: boolean;
-  after?: ReactNode;
-};
-export const MemberTile = as<'button', MemberTileProps>(
-  ({ as: AsMemberTile = 'button', mx, room, member, useAuthentication, after, ...props }, ref) => {
-    const name = getName(room, member);
-    const username = getMxIdLocalPart(member.userId);
-
-    const avatarMxcUrl = member.getMxcAvatarUrl();
-    const avatarUrl = avatarMxcUrl
-      ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication)
-      : undefined;
-
-    return (
-      <AsMemberTile className={css.MemberTile} {...props} ref={ref}>
-        <Avatar size="300" radii="400">
-          <UserAvatar
-            userId={member.userId}
-            src={avatarUrl ?? undefined}
-            alt={name}
-            renderFallback={() => <Icon size="300" src={Icons.User} filled />}
-          />
-        </Avatar>
-        <Box grow="Yes" as="span" direction="Column">
-          <Text as="span" size="T300" truncate>
-            <b>{name}</b>
-          </Text>
-          <Box alignItems="Center" justifyContent="SpaceBetween" gap="100">
-            <Text as="span" size="T200" priority="300" truncate>
-              {username}
-            </Text>
-          </Box>
-        </Box>
-        {after}
-      </AsMemberTile>
-    );
-  }
-);

src/app/components/member-tile/index.ts

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

src/app/components/member-tile/style.css.ts

@@ -1,32 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { color, config, DefaultReset, Disabled, FocusOutline } from 'folds';
-
-export const MemberTile = style([
-  DefaultReset,
-  {
-    width: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    gap: config.space.S200,
-
-    padding: config.space.S100,
-    borderRadius: config.radii.R500,
-
-    selectors: {
-      'button&': {
-        cursor: 'pointer',
-      },
-      '&[aria-pressed=true]': {
-        backgroundColor: color.Surface.ContainerActive,
-      },
-      'button&:hover, &:focus-visible': {
-        backgroundColor: color.Surface.ContainerHover,
-      },
-      'button&:active': {
-        backgroundColor: color.Surface.ContainerActive,
-      },
-    },
-  },
-  FocusOutline,
-  Disabled,
-]);

src/app/components/message/FileHeader.tsx

@@ -1,81 +1,22 @@
-import { Badge, Box, Icon, IconButton, Icons, Spinner, Text, as, toRem } from 'folds';
-import React, { ReactNode, useCallback } from 'react';
-import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
-import FileSaver from 'file-saver';
+import { Badge, Box, Text, as, toRem } from 'folds';
+import React from 'react';
 import { mimeTypeToExt } from '../../utils/mimeTypes';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import {
-  decryptFile,
-  downloadEncryptedMedia,
-  downloadMedia,
-  mxcUrlToHttp,
-} from '../../utils/matrix';
 
 const badgeStyles = { maxWidth: toRem(100) };
 
-type FileDownloadButtonProps = {
-  filename: string;
-  url: string;
-  mimeType: string;
-  encInfo?: EncryptedAttachmentInfo;
-};
-export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDownloadButtonProps) {
-  const mx = useMatrixClient();
-  const useAuthentication = useMediaAuthentication();
-
-  const [downloadState, download] = useAsyncCallback(
-    useCallback(async () => {
-      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
-      const fileContent = encInfo
-        ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo))
-        : await downloadMedia(mediaUrl);
-
-      const fileURL = URL.createObjectURL(fileContent);
-      FileSaver.saveAs(fileURL, filename);
-      return fileURL;
-    }, [mx, url, useAuthentication, mimeType, encInfo, filename])
-  );
-
-  const downloading = downloadState.status === AsyncStatus.Loading;
-  const hasError = downloadState.status === AsyncStatus.Error;
-  return (
-    <IconButton
-      disabled={downloading}
-      onClick={download}
-      variant={hasError ? 'Critical' : 'SurfaceVariant'}
-      size="300"
-      radii="300"
-    >
-      {downloading ? (
-        <Spinner size="100" variant={hasError ? 'Critical' : 'Secondary'} />
-      ) : (
-        <Icon size="100" src={Icons.Download} />
-      )}
-    </IconButton>
-  );
-}
-
 export type FileHeaderProps = {
   body: string;
   mimeType: string;
-  after?: ReactNode;
 };
-export const FileHeader = as<'div', FileHeaderProps>(({ body, mimeType, after, ...props }, ref) => (
+export const FileHeader = as<'div', FileHeaderProps>(({ body, mimeType, ...props }, ref) => (
   <Box alignItems="Center" gap="200" grow="Yes" {...props} ref={ref}>
-    <Box shrink="No">
-      <Badge style={badgeStyles} variant="Secondary" radii="Pill">
-        <Text size="O400" truncate>
-          {mimeTypeToExt(mimeType)}
-        </Text>
-      </Badge>
-    </Box>
-    <Box grow="Yes">
-      <Text size="T300" truncate>
-        {body}
+    <Badge style={badgeStyles} variant="Secondary" radii="Pill">
+      <Text size="O400" truncate>
+        {mimeTypeToExt(mimeType)}
       </Text>
-    </Box>
-    {after}
+    </Badge>
+    <Text size="T300" truncate>
+      {body}
+    </Text>
   </Box>
 ));

src/app/components/message/MsgTypeRenderers.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { Box, Chip, Icon, Icons, Text, toRem } from 'folds';
 import { IContent } from 'matrix-js-sdk';
 import { JUMBO_EMOJI_REG, URL_REG } from '../../utils/regex';
@@ -22,13 +22,11 @@ import {
   IThumbnailContent,
   IVideoContent,
   IVideoInfo,
-  MATRIX_SPOILER_PROPERTY_NAME,
-  MATRIX_SPOILER_REASON_PROPERTY_NAME,
 } from '../../../types/matrix/common';
 import { FALLBACK_MIMETYPE, getBlobSafeMimeType } from '../../utils/mimeTypes';
 import { parseGeoUri, scaleYDimension } from '../../utils/common';
 import { Attachment, AttachmentBox, AttachmentContent, AttachmentHeader } from './attachment';
-import { FileHeader, FileDownloadButton } from './FileHeader';
+import { FileHeader } from './FileHeader';
 
 export function MBadEncrypted() {
   return (
@@ -74,9 +72,8 @@ type MTextProps = {
   content: Record<string, unknown>;
   renderBody: (props: RenderBodyProps) => ReactNode;
   renderUrlsPreview?: (urls: string[]) => ReactNode;
-  style?: CSSProperties;
 };
-export function MText({ edited, content, renderBody, renderUrlsPreview, style }: MTextProps) {
+export function MText({ edited, content, renderBody, renderUrlsPreview }: MTextProps) {
   const { body, formatted_body: customBody } = content;
 
   if (typeof body !== 'string') return <BrokenContent />;
@@ -89,7 +86,6 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }:
       <MessageTextBody
         preWrap={typeof customBody !== 'string'}
         jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
-        style={style}
       >
         {renderBody({
           body: trimmedBody,
@@ -176,13 +172,10 @@ export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNot
 
 type RenderImageContentProps = {
   body: string;
-  filename?: string;
   info?: IImageInfo & IThumbnailContent;
   mimeType?: string;
   url: string;
   encInfo?: IEncryptedFile;
-  markedAsSpoiler?: boolean;
-  spoilerReason?: string;
 };
 type MImageProps = {
   content: IImageContent;
@@ -210,8 +203,6 @@ export function MImage({ content, renderImageContent, outlined }: MImageProps) {
           mimeType: imgInfo?.mimetype,
           url: mxcUrl,
           encInfo: content.file,
-          markedAsSpoiler: content[MATRIX_SPOILER_PROPERTY_NAME],
-          spoilerReason: content[MATRIX_SPOILER_REASON_PROPERTY_NAME],
         })}
       </AttachmentBox>
     </Attachment>
@@ -245,24 +236,8 @@ export function MVideo({ content, renderAsFile, renderVideoContent, outlined }:
 
   const height = scaleYDimension(videoInfo.w || 400, 400, videoInfo.h || 400);
 
-  const filename = content.filename ?? content.body ?? 'Video';
-
   return (
     <Attachment outlined={outlined}>
-      <AttachmentHeader>
-        <FileHeader
-          body={filename}
-          mimeType={safeMimeType}
-          after={
-            <FileDownloadButton
-              filename={filename}
-              url={mxcUrl}
-              mimeType={safeMimeType}
-              encInfo={content.file}
-            />
-          }
-        />
-      </AttachmentHeader>
       <AttachmentBox
         style={{
           height: toRem(height < 48 ? 48 : height),
@@ -304,22 +279,10 @@ export function MAudio({ content, renderAsFile, renderAudioContent, outlined }:
     return <BrokenContent />;
   }
 
-  const filename = content.filename ?? content.body ?? 'Audio';
   return (
     <Attachment outlined={outlined}>
       <AttachmentHeader>
-        <FileHeader
-          body={filename}
-          mimeType={safeMimeType}
-          after={
-            <FileDownloadButton
-              filename={filename}
-              url={mxcUrl}
-              mimeType={safeMimeType}
-              encInfo={content.file}
-            />
-          }
-        />
+        <FileHeader body={content.body ?? 'Audio'} mimeType={safeMimeType} />
       </AttachmentHeader>
       <AttachmentBox>
         <AttachmentContent>
@@ -359,14 +322,14 @@ export function MFile({ content, renderFileContent, outlined }: MFileProps) {
     <Attachment outlined={outlined}>
       <AttachmentHeader>
         <FileHeader
-          body={content.filename ?? content.body ?? 'Unnamed File'}
+          body={content.body ?? 'Unnamed File'}
           mimeType={fileInfo?.mimetype ?? FALLBACK_MIMETYPE}
         />
       </AttachmentHeader>
       <AttachmentBox>
         <AttachmentContent>
           {renderFileContent({
-            body: content.filename ?? content.body ?? 'File',
+            body: content.body ?? 'File',
             info: fileInfo ?? {},
             mimeType: fileInfo?.mimetype ?? FALLBACK_MIMETYPE,
             url: mxcUrl,

src/app/components/message/Reply.tsx

@@ -1,7 +1,10 @@
 import { Box, Icon, Icons, Text, as, color, toRem } from 'folds';
-import { EventTimelineSet, Room } from 'matrix-js-sdk';
-import React, { MouseEventHandler, ReactNode, useCallback, useMemo } from 'react';
+import { EventTimelineSet, MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
+import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
+import React, { MouseEventHandler, ReactNode, useEffect, useMemo, useState } from 'react';
+import to from 'await-to-js';
 import classNames from 'classnames';
+import colorMXID from '../../../util/colorMXID';
 import { getMemberDisplayName, trimReplyFromBody } from '../../utils/room';
 import { getMxIdLocalPart } from '../../utils/matrix';
 import { LinePlaceholder } from './placeholder';
@@ -9,9 +12,6 @@ import { randomNumberBetween } from '../../utils/common';
 import * as css from './Reply.css';
 import { MessageBadEncryptedContent, MessageDeletedContent, MessageFailedContent } from './content';
 import { scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
-import { useRoomEvent } from '../../hooks/useRoomEvent';
-import { GetPowerLevelTag } from '../../hooks/usePowerLevelTags';
-import colorMXID from '../../../util/colorMXID';
 
 type ReplyLayoutProps = {
   userColor?: string;
@@ -22,6 +22,7 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>(
     <Box
       className={classNames(css.Reply, className)}
       alignItems="Center"
+      alignSelf="Start"
       gap="100"
       {...props}
       ref={ref}
@@ -38,97 +39,94 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>(
 );
 
 export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
-  <Box className={css.ThreadIndicator} alignItems="Center" {...props} ref={ref}>
+  <Box className={css.ThreadIndicator} alignItems="Center" alignSelf="Start" {...props} ref={ref}>
     <Icon className={css.ThreadIndicatorIcon} src={Icons.Message} />
     <Text size="T200">Threaded reply</Text>
   </Box>
 ));
 
 type ReplyProps = {
+  mx: MatrixClient;
   room: Room;
+  mxidColor?: boolean;
   timelineSet?: EventTimelineSet | undefined;
   replyEventId: string;
   threadRootId?: string | undefined;
   onClick?: MouseEventHandler | undefined;
-  getPowerLevel?: (userId: string) => number;
-  getPowerLevelTag?: GetPowerLevelTag;
-  accessibleTagColors?: Map<string, string>;
-  legacyUsernameColor?: boolean;
 };
 
-export const Reply = as<'div', ReplyProps>(
-  (
-    {
-      room,
-      timelineSet,
-      replyEventId,
-      threadRootId,
-      onClick,
-      getPowerLevel,
-      getPowerLevelTag,
-      accessibleTagColors,
-      legacyUsernameColor,
-      ...props
-    },
-    ref
-  ) => {
-    const placeholderWidth = useMemo(() => randomNumberBetween(40, 400), []);
-    const getFromLocalTimeline = useCallback(
-      () => timelineSet?.findEventById(replyEventId),
-      [timelineSet, replyEventId]
-    );
-    const replyEvent = useRoomEvent(room, replyEventId, getFromLocalTimeline);
+export const Reply = as<'div', ReplyProps>((_, ref) => {
+  const { mx, room, mxidColor, timelineSet, replyEventId, threadRootId, onClick, ...props } = _;
+  const [replyEvent, setReplyEvent] = useState<MatrixEvent | null | undefined>(
+    timelineSet?.findEventById(replyEventId)
+  );
+  const placeholderWidth = useMemo(() => randomNumberBetween(40, 400), []);
 
-    const { body } = replyEvent?.getContent() ?? {};
-    const sender = replyEvent?.getSender();
-    const senderPL = sender && getPowerLevel?.(sender);
-    const powerTag = typeof senderPL === 'number' ? getPowerLevelTag?.(senderPL) : undefined;
-    const tagColor = powerTag?.color ? accessibleTagColors?.get(powerTag.color) : undefined;
+  const { body } = replyEvent?.getContent() ?? {};
+  const sender = replyEvent?.getSender();
 
-    const usernameColor = legacyUsernameColor ? colorMXID(sender ?? replyEventId) : tagColor;
+  const fallbackBody = replyEvent?.isRedacted() ? (
+    <MessageDeletedContent />
+  ) : (
+    <MessageFailedContent />
+  );
 
-    const fallbackBody = replyEvent?.isRedacted() ? (
-      <MessageDeletedContent />
-    ) : (
-      <MessageFailedContent />
-    );
+  useEffect(() => {
+    let disposed = false;
+    const loadEvent = async () => {
+      const [err, evt] = await to(mx.fetchRoomEvent(room.roomId, replyEventId));
+      const mEvent = new MatrixEvent(evt);
+      if (disposed) return;
+      if (err) {
+        setReplyEvent(null);
+        return;
+      }
+      if (mEvent.isEncrypted() && mx.getCrypto()) {
+        await to(mEvent.attemptDecryption(mx.getCrypto() as CryptoBackend));
+      }
+      setReplyEvent(mEvent);
+    };
+    if (replyEvent === undefined) loadEvent();
+    return () => {
+      disposed = true;
+    };
+  }, [replyEvent, mx, room, replyEventId]);
 
-    const badEncryption = replyEvent?.getContent().msgtype === 'm.bad.encrypted';
-    const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody;
+  const badEncryption = replyEvent?.getContent().msgtype === 'm.bad.encrypted';
+  const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody;
 
-    return (
-      <Box direction="Column" alignItems="Start" {...props} ref={ref}>
-        {threadRootId && (
-          <ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
-        )}
-        <ReplyLayout
-          as="button"
-          userColor={usernameColor}
-          username={
-            sender && (
-              <Text size="T300" truncate>
-                <b>{getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender)}</b>
-              </Text>
-            )
-          }
-          data-event-id={replyEventId}
-          onClick={onClick}
-        >
-          {replyEvent !== undefined ? (
+  return (
+    <Box direction="Column" {...props} ref={ref}>
+      {threadRootId && (
+        <ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
+      )}
+      <ReplyLayout
+        as="button"
+        userColor={sender && mxidColor ? colorMXID(sender) : undefined}
+        username={
+          sender && (
             <Text size="T300" truncate>
-              {badEncryption ? <MessageBadEncryptedContent /> : bodyJSX}
+              <b>{getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender)}</b>
             </Text>
-          ) : (
-            <LinePlaceholder
-              style={{
-                backgroundColor: color.SurfaceVariant.ContainerActive,
-                width: toRem(placeholderWidth),
-                maxWidth: '100%',
-              }}
-            />
-          )}
-        </ReplyLayout>
-      </Box>
-    );
-  }
-);
+          )
+        }
+        data-event-id={replyEventId}
+        onClick={onClick}
+      >
+        {replyEvent !== undefined ? (
+          <Text size="T300" truncate>
+            {badEncryption ? <MessageBadEncryptedContent /> : bodyJSX}
+          </Text>
+        ) : (
+          <LinePlaceholder
+            style={{
+              backgroundColor: color.SurfaceVariant.ContainerActive,
+              maxWidth: toRem(placeholderWidth),
+              width: '100%',
+            }}
+          />
+        )}
+      </ReplyLayout>
+    </Box>
+  );
+});

src/app/components/message/content/EventContent.tsx

@@ -1,7 +1,6 @@
 import { Box, Icon, IconSrc } from 'folds';
 import React, { ReactNode } from 'react';
 import { CompactLayout, ModernLayout } from '..';
-import { MessageLayout } from '../../../state/settings';
 
 export type EventContentProps = {
   messageLayout: number;
@@ -12,9 +11,9 @@ export type EventContentProps = {
 export function EventContent({ messageLayout, time, iconSrc, content }: EventContentProps) {
   const beforeJSX = (
     <Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
-      {messageLayout === MessageLayout.Compact && time}
+      {messageLayout === 1 && time}
       <Box
-        grow={messageLayout === MessageLayout.Compact ? undefined : 'Yes'}
+        grow={messageLayout === 1 ? undefined : 'Yes'}
         alignItems="Center"
         justifyContent="Center"
       >
@@ -26,11 +25,11 @@ export function EventContent({ messageLayout, time, iconSrc, content }: EventCon
   const msgContentJSX = (
     <Box justifyContent="SpaceBetween" alignItems="Baseline" gap="200">
       {content}
-      {messageLayout !== MessageLayout.Compact && time}
+      {messageLayout !== 1 && time}
     </Box>
   );
 
-  return messageLayout === MessageLayout.Compact ? (
+  return messageLayout === 1 ? (
     <CompactLayout before={beforeJSX}>{msgContentJSX}</CompactLayout>
   ) : (
     <ModernLayout before={beforeJSX}>{msgContentJSX}</ModernLayout>

src/app/components/message/content/FileContent.tsx

@@ -27,6 +27,7 @@ import {
   getFileNameExt,
   mimeTypeToExt,
 } from '../../../utils/mimeTypes';
+import * as css from './style.css';
 import { stopPropagation } from '../../../utils/keyboard';
 import {
   decryptFile,
@@ -35,7 +36,6 @@ import {
   mxcUrlToHttp,
 } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
-import { ModalWide } from '../../../styles/Modal.css';
 
 const renderErrorButton = (retry: () => void, text: string) => (
   <TooltipProvider
@@ -111,7 +111,7 @@ export function ReadTextFile({ body, mimeType, url, encInfo, renderViewer }: Rea
               }}
             >
               <Modal
-                className={ModalWide}
+                className={css.ModalWide}
                 size="500"
                 onContextMenu={(evt: any) => evt.stopPropagation()}
               >
@@ -199,7 +199,7 @@ export function ReadPdfFile({ body, mimeType, url, encInfo, renderViewer }: Read
               }}
             >
               <Modal
-                className={ModalWide}
+                className={css.ModalWide}
                 size="500"
                 onContextMenu={(evt: any) => evt.stopPropagation()}
               >

src/app/components/message/content/ImageContent.tsx

@@ -3,7 +3,6 @@ import {
   Badge,
   Box,
   Button,
-  Chip,
   Icon,
   Icons,
   Modal,
@@ -29,8 +28,6 @@ import { FALLBACK_MIMETYPE } from '../../../utils/mimeTypes';
 import { stopPropagation } from '../../../utils/keyboard';
 import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
-import { ModalWide } from '../../../styles/Modal.css';
-import { validBlurHash } from '../../../utils/blurHash';
 
 type RenderViewerProps = {
   src: string;
@@ -53,8 +50,6 @@ export type ImageContentProps = {
   info?: IImageInfo;
   encInfo?: EncryptedAttachmentInfo;
   autoPlay?: boolean;
-  markedAsSpoiler?: boolean;
-  spoilerReason?: string;
   renderViewer: (props: RenderViewerProps) => ReactNode;
   renderImage: (props: RenderImageProps) => ReactNode;
 };
@@ -68,8 +63,6 @@ export const ImageContent = as<'div', ImageContentProps>(
       info,
       encInfo,
       autoPlay,
-      markedAsSpoiler,
-      spoilerReason,
       renderViewer,
       renderImage,
       ...props
@@ -78,12 +71,11 @@ export const ImageContent = as<'div', ImageContentProps>(
   ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
-    const blurHash = validBlurHash(info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
+    const blurHash = info?.[MATRIX_BLUR_HASH_PROPERTY_NAME];
 
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);
     const [viewer, setViewer] = useState(false);
-    const [blurred, setBlurred] = useState(markedAsSpoiler ?? false);
 
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
@@ -129,7 +121,7 @@ export const ImageContent = as<'div', ImageContentProps>(
                 }}
               >
                 <Modal
-                  className={ModalWide}
+                  className={css.ModalWide}
                   size="500"
                   onContextMenu={(evt: any) => evt.stopPropagation()}
                 >
@@ -152,7 +144,7 @@ export const ImageContent = as<'div', ImageContentProps>(
             punch={1}
           />
         )}
-        {!autoPlay && !markedAsSpoiler && srcState.status === AsyncStatus.Idle && (
+        {!autoPlay && srcState.status === AsyncStatus.Idle && (
           <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
             <Button
               variant="Secondary"
@@ -167,7 +159,7 @@ export const ImageContent = as<'div', ImageContentProps>(
           </Box>
         )}
         {srcState.status === AsyncStatus.Success && (
-          <Box className={classNames(css.AbsoluteContainer, blurred && css.Blur)}>
+          <Box className={css.AbsoluteContainer}>
             {renderImage({
               alt: body,
               title: body,
@@ -179,42 +171,8 @@ export const ImageContent = as<'div', ImageContentProps>(
             })}
           </Box>
         )}
-        {blurred && !error && srcState.status !== AsyncStatus.Error && (
-          <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
-            <TooltipProvider
-              tooltip={
-                typeof spoilerReason === 'string' && (
-                  <Tooltip variant="Secondary">
-                    <Text>{spoilerReason}</Text>
-                  </Tooltip>
-                )
-              }
-              position="Top"
-              align="Center"
-            >
-              {(triggerRef) => (
-                <Chip
-                  ref={triggerRef}
-                  variant="Secondary"
-                  radii="Pill"
-                  size="500"
-                  outlined
-                  onClick={() => {
-                    setBlurred(false);
-                    if (srcState.status === AsyncStatus.Idle) {
-                      loadSrc();
-                    }
-                  }}
-                >
-                  <Text size="B300">Spoiler</Text>
-                </Chip>
-              )}
-            </TooltipProvider>
-          </Box>
-        )}
         {(srcState.status === AsyncStatus.Loading || srcState.status === AsyncStatus.Success) &&
-          !load &&
-          !markedAsSpoiler && (
+          !load && (
             <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
               <Spinner variant="Secondary" />
             </Box>

src/app/components/message/content/VideoContent.tsx

@@ -31,7 +31,6 @@ import {
   mxcUrlToHttp,
 } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
-import { validBlurHash } from '../../../utils/blurHash';
 
 type RenderVideoProps = {
   title: string;
@@ -69,7 +68,7 @@ export const VideoContent = as<'div', VideoContentProps>(
   ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
-    const blurHash = validBlurHash(info.thumbnail_info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
+    const blurHash = info.thumbnail_info?.[MATRIX_BLUR_HASH_PROPERTY_NAME];
 
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);

src/app/components/message/content/style.css.ts

@@ -31,9 +31,7 @@ export const AbsoluteFooter = style([
   },
 ]);
 
-export const Blur = style([
-  DefaultReset,
-  {
-    filter: 'blur(44px)',
-  },
-]);
+export const ModalWide = style({
+  minWidth: '85vw',
+  minHeight: '90vh',
+});

src/app/components/message/layout/Base.tsx

@@ -24,10 +24,6 @@ export const Username = as<'span'>(({ as: AsUsername = 'span', className, ...pro
   <AsUsername className={classNames(css.Username, className)} {...props} ref={ref} />
 ));
 
-export const UsernameBold = as<'b'>(({ as: AsUsernameBold = 'b', className, ...props }, ref) => (
-  <AsUsernameBold className={classNames(css.UsernameBold, className)} {...props} ref={ref} />
-));
-
 export const MessageTextBody = as<'div', css.MessageTextBodyVariants & { notice?: boolean }>(
   ({ as: asComp = 'div', className, preWrap, jumboEmoji, emote, notice, ...props }, ref) => (
     <Text

src/app/components/message/layout/layout.css.ts

@@ -157,10 +157,6 @@ export const Username = style({
   },
 });
 
-export const UsernameBold = style({
-  fontWeight: 550,
-});
-
 export const MessageTextBody = recipe({
   base: {
     wordBreak: 'break-word',

src/app/components/message/placeholder/CompactPlaceholder.tsx

@@ -1,27 +1,22 @@
-import React, { useMemo } from 'react';
-import { as, ContainerColor, toRem } from 'folds';
+import React from 'react';
+import { as, toRem } from 'folds';
 import { randomNumberBetween } from '../../../utils/common';
 import { LinePlaceholder } from './LinePlaceholder';
-import { CompactLayout } from '../layout';
+import { CompactLayout, MessageBase } from '../layout';
 
-export const CompactPlaceholder = as<'div', { variant?: ContainerColor }>(
-  ({ variant, ...props }, ref) => {
-    const nameSize = useMemo(() => randomNumberBetween(40, 100), []);
-    const msgSize = useMemo(() => randomNumberBetween(120, 500), []);
-
-    return (
-      <CompactLayout
-        {...props}
-        ref={ref}
-        before={
-          <>
-            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(50) }} />
-            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(nameSize) }} />
-          </>
-        }
-      >
-        <LinePlaceholder variant={variant} style={{ maxWidth: toRem(msgSize) }} />
-      </CompactLayout>
-    );
-  }
-);
+export const CompactPlaceholder = as<'div'>(({ ...props }, ref) => (
+  <MessageBase>
+    <CompactLayout
+      {...props}
+      ref={ref}
+      before={
+        <>
+          <LinePlaceholder style={{ maxWidth: toRem(50) }} />
+          <LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(40, 100)) }} />
+        </>
+      }
+    >
+      <LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(120, 500)) }} />
+    </CompactLayout>
+  </MessageBase>
+));

src/app/components/message/placeholder/DefaultPlaceholder.tsx

@@ -1,39 +1,25 @@
-import React, { CSSProperties, useMemo } from 'react';
-import { Avatar, Box, ContainerColor, as, color, toRem } from 'folds';
+import React, { CSSProperties } from 'react';
+import { Avatar, Box, as, color, toRem } from 'folds';
 import { randomNumberBetween } from '../../../utils/common';
 import { LinePlaceholder } from './LinePlaceholder';
-import { ModernLayout } from '../layout';
+import { MessageBase, ModernLayout } from '../layout';
 
 const contentMargin: CSSProperties = { marginTop: toRem(3) };
+const avatarBg: CSSProperties = { backgroundColor: color.SurfaceVariant.Container };
 
-export const DefaultPlaceholder = as<'div', { variant?: ContainerColor }>(
-  ({ variant, ...props }, ref) => {
-    const nameSize = useMemo(() => randomNumberBetween(40, 100), []);
-    const msgSize = useMemo(() => randomNumberBetween(80, 200), []);
-    const msg2Size = useMemo(() => randomNumberBetween(80, 200), []);
-
-    return (
-      <ModernLayout
-        {...props}
-        ref={ref}
-        before={
-          <Avatar
-            style={{ backgroundColor: color[variant ?? 'SurfaceVariant'].Container }}
-            size="300"
-          />
-        }
-      >
-        <Box style={contentMargin} grow="Yes" direction="Column" gap="200">
-          <Box grow="Yes" gap="200" alignItems="Center" justifyContent="SpaceBetween">
-            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(nameSize) }} />
-            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(50) }} />
-          </Box>
-          <Box grow="Yes" gap="200" wrap="Wrap">
-            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(msgSize) }} />
-            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(msg2Size) }} />
-          </Box>
+export const DefaultPlaceholder = as<'div'>(({ ...props }, ref) => (
+  <MessageBase>
+    <ModernLayout {...props} ref={ref} before={<Avatar style={avatarBg} size="300" />}>
+      <Box style={contentMargin} grow="Yes" direction="Column" gap="200">
+        <Box grow="Yes" gap="200" alignItems="Center" justifyContent="SpaceBetween">
+          <LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(40, 100)) }} />
+          <LinePlaceholder style={{ maxWidth: toRem(50) }} />
         </Box>
-      </ModernLayout>
-    );
-  }
-);
+        <Box grow="Yes" gap="200" wrap="Wrap">
+          <LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(80, 200)) }} />
+          <LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(80, 200)) }} />
+        </Box>
+      </Box>
+    </ModernLayout>
+  </MessageBase>
+));

src/app/components/message/placeholder/LinePlaceholder.css.ts

@@ -1,35 +1,12 @@
-import { ComplexStyleRule } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { ContainerColor, DefaultReset, color, config, toRem } from 'folds';
+import { style } from '@vanilla-extract/css';
+import { DefaultReset, color, config, toRem } from 'folds';
 
-const getVariant = (variant: ContainerColor): ComplexStyleRule => ({
-  backgroundColor: color[variant].Container,
-});
-
-export const LinePlaceholder = recipe({
-  base: [
-    DefaultReset,
-    {
-      width: '100%',
-      height: toRem(16),
-      borderRadius: config.radii.R300,
-    },
-  ],
-  variants: {
-    variant: {
-      Background: getVariant('Background'),
-      Surface: getVariant('Surface'),
-      SurfaceVariant: getVariant('SurfaceVariant'),
-      Primary: getVariant('Primary'),
-      Secondary: getVariant('Secondary'),
-      Success: getVariant('Success'),
-      Warning: getVariant('Warning'),
-      Critical: getVariant('Critical'),
-    },
+export const LinePlaceholder = style([
+  DefaultReset,
+  {
+    width: '100%',
+    height: toRem(16),
+    borderRadius: config.radii.R300,
+    backgroundColor: color.SurfaceVariant.Container,
   },
-  defaultVariants: {
-    variant: 'SurfaceVariant',
-  },
-});
-
-export type LinePlaceholderVariants = RecipeVariants<typeof LinePlaceholder>;
+]);

src/app/components/message/placeholder/LinePlaceholder.tsx

@@ -3,13 +3,6 @@ import { Box, as } from 'folds';
 import classNames from 'classnames';
 import * as css from './LinePlaceholder.css';
 
-export const LinePlaceholder = as<'div', css.LinePlaceholderVariants>(
-  ({ className, variant, ...props }, ref) => (
-    <Box
-      className={classNames(css.LinePlaceholder({ variant }), className)}
-      shrink="No"
-      {...props}
-      ref={ref}
-    />
-  )
-);
+export const LinePlaceholder = as<'div'>(({ className, ...props }, ref) => (
+  <Box className={classNames(css.LinePlaceholder, className)} shrink="No" {...props} ref={ref} />
+));

src/app/components/page/Page.tsx

@@ -27,14 +27,14 @@ export function PageRoot({ nav, children }: PageRootProps) {
 type ClientDrawerLayoutProps = {
   children: ReactNode;
 };
-export function PageNav({ size, children }: ClientDrawerLayoutProps & css.PageNavVariants) {
+export function PageNav({ children }: ClientDrawerLayoutProps) {
   const screenSize = useScreenSizeContext();
   const isMobile = screenSize === ScreenSize.Mobile;
 
   return (
     <Box
       grow={isMobile ? 'Yes' : undefined}
-      className={css.PageNav({ size })}
+      className={css.PageNav}
       shrink={isMobile ? 'Yes' : 'No'}
     >
       <Box grow="Yes" direction="Column">
@@ -44,17 +44,15 @@ export function PageNav({ size, children }: ClientDrawerLayoutProps & css.PageNa
   );
 }
 
-export const PageNavHeader = as<'header', css.PageNavHeaderVariants>(
-  ({ className, outlined, ...props }, ref) => (
-    <Header
-      className={classNames(css.PageNavHeader({ outlined }), className)}
-      variant="Background"
-      size="600"
-      {...props}
-      ref={ref}
-    />
-  )
-);
+export const PageNavHeader = as<'header'>(({ className, ...props }, ref) => (
+  <Header
+    className={classNames(css.PageNavHeader, className)}
+    variant="Background"
+    size="600"
+    {...props}
+    ref={ref}
+  />
+));
 
 export function PageNavContent({
   scrollRef,
@@ -90,11 +88,11 @@ export const Page = as<'div'>(({ className, ...props }, ref) => (
 ));
 
 export const PageHeader = as<'div', css.PageHeaderVariants>(
-  ({ className, outlined, balance, ...props }, ref) => (
+  ({ className, balance, ...props }, ref) => (
     <Header
       as="header"
       size="600"
-      className={classNames(css.PageHeader({ balance, outlined }), className)}
+      className={classNames(css.PageHeader({ balance }), className)}
       {...props}
       ref={ref}
     />
@@ -105,20 +103,6 @@ export const PageContent = as<'div'>(({ className, ...props }, ref) => (
   <div className={classNames(css.PageContent, className)} {...props} ref={ref} />
 ));
 
-export function PageHeroEmpty({ children }: { children: ReactNode }) {
-  return (
-    <Box
-      className={classNames(ContainerColor({ variant: 'SurfaceVariant' }), css.PageHeroEmpty)}
-      direction="Column"
-      alignItems="Center"
-      justifyContent="Center"
-      gap="200"
-    >
-      {children}
-    </Box>
-  );
-}
-
 export const PageHeroSection = as<'div', ComponentProps<typeof Box>>(
   ({ className, ...props }, ref) => (
     <Box

src/app/components/page/style.css.ts

@@ -2,55 +2,30 @@ import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { DefaultReset, color, config, toRem } from 'folds';
 
-export const PageNav = recipe({
-  variants: {
-    size: {
-      '400': {
-        width: toRem(256),
-      },
-      '300': {
-        width: toRem(222),
-      },
+export const PageNav = style({
+  width: toRem(256),
+});
+
+export const PageNavHeader = style({
+  padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
+  flexShrink: 0,
+  borderBottomWidth: 1,
+
+  selectors: {
+    'button&': {
+      cursor: 'pointer',
+    },
+    'button&[aria-pressed=true]': {
+      backgroundColor: color.Background.ContainerActive,
+    },
+    'button&:hover, button&:focus-visible': {
+      backgroundColor: color.Background.ContainerHover,
+    },
+    'button&:active': {
+      backgroundColor: color.Background.ContainerActive,
     },
-  },
-  defaultVariants: {
-    size: '400',
   },
 });
-export type PageNavVariants = RecipeVariants<typeof PageNav>;
-
-export const PageNavHeader = recipe({
-  base: {
-    padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
-    flexShrink: 0,
-    selectors: {
-      'button&': {
-        cursor: 'pointer',
-      },
-      'button&[aria-pressed=true]': {
-        backgroundColor: color.Background.ContainerActive,
-      },
-      'button&:hover, button&:focus-visible': {
-        backgroundColor: color.Background.ContainerHover,
-      },
-      'button&:active': {
-        backgroundColor: color.Background.ContainerActive,
-      },
-    },
-  },
-
-  variants: {
-    outlined: {
-      true: {
-        borderBottomWidth: 1,
-      },
-    },
-  },
-  defaultVariants: {
-    outlined: true,
-  },
-});
-export type PageNavHeaderVariants = RecipeVariants<typeof PageNavHeader>;
 
 export const PageNavContent = style({
   minHeight: '100%',
@@ -63,6 +38,7 @@ export const PageHeader = recipe({
   base: {
     paddingLeft: config.space.S400,
     paddingRight: config.space.S200,
+    borderBottomWidth: config.borderWidth.B300,
   },
   variants: {
     balance: {
@@ -70,14 +46,6 @@ export const PageHeader = recipe({
         paddingLeft: config.space.S200,
       },
     },
-    outlined: {
-      true: {
-        borderBottomWidth: config.borderWidth.B300,
-      },
-    },
-  },
-  defaultVariants: {
-    outlined: true,
   },
 });
 export type PageHeaderVariants = RecipeVariants<typeof PageHeader>;
@@ -92,15 +60,6 @@ export const PageContent = style([
   },
 ]);
 
-export const PageHeroEmpty = style([
-  DefaultReset,
-  {
-    padding: config.space.S400,
-    borderRadius: config.radii.R400,
-    minHeight: toRem(450),
-  },
-]);
-
 export const PageHeroSection = style([
   DefaultReset,
   {

src/app/components/password-input/PasswordInput.tsx

@@ -6,7 +6,7 @@ type PasswordInputProps = Omit<ComponentProps<typeof Input>, 'type' | 'size'> &
   size: '400' | '500';
 };
 export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
-  ({ variant = 'Background', size, style, after, ...props }, ref) => {
+  ({ variant, size, style, after, ...props }, ref) => {
     const paddingRight: string = size === '500' ? config.space.S300 : config.space.S200;
 
     return (

src/app/components/password-input/index.ts

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

src/app/components/power/PowerColorBadge.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { as } from 'folds';
-import classNames from 'classnames';
-import * as css from './style.css';
-
-type PowerColorBadgeProps = {
-  color?: string;
-};
-export const PowerColorBadge = as<'span', PowerColorBadgeProps>(
-  ({ as: AsPowerColorBadge = 'span', color, className, style, ...props }, ref) => (
-    <AsPowerColorBadge
-      className={classNames(css.PowerColorBadge, { [css.PowerColorBadgeNone]: !color }, className)}
-      style={{
-        backgroundColor: color,
-        ...style,
-      }}
-      {...props}
-      ref={ref}
-    />
-  )
-);

src/app/components/power/PowerIcon.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import * as css from './style.css';
-import { JUMBO_EMOJI_REG } from '../../utils/regex';
-
-type PowerIconProps = css.PowerIconVariants & {
-  iconSrc: string;
-  name?: string;
-};
-export function PowerIcon({ size, iconSrc, name }: PowerIconProps) {
-  return JUMBO_EMOJI_REG.test(iconSrc) ? (
-    <span className={css.PowerIcon({ size })}>{iconSrc}</span>
-  ) : (
-    <img className={css.PowerIcon({ size })} src={iconSrc} alt={name} />
-  );
-}

src/app/components/power/PowerSelector.tsx

@@ -1,94 +0,0 @@
-import React, { forwardRef, MouseEventHandler, ReactNode, useState } from 'react';
-import FocusTrap from 'focus-trap-react';
-import { Box, config, Menu, MenuItem, PopOut, Scroll, Text, toRem, RectCords } from 'folds';
-import { getPowers, PowerLevelTags } from '../../hooks/usePowerLevelTags';
-import { PowerColorBadge } from './PowerColorBadge';
-import { stopPropagation } from '../../utils/keyboard';
-
-type PowerSelectorProps = {
-  powerLevelTags: PowerLevelTags;
-  value: number;
-  onChange: (value: number) => void;
-};
-export const PowerSelector = forwardRef<HTMLDivElement, PowerSelectorProps>(
-  ({ powerLevelTags, value, onChange }, ref) => (
-    <Menu
-      ref={ref}
-      style={{
-        maxHeight: '75vh',
-        maxWidth: toRem(300),
-        display: 'flex',
-      }}
-    >
-      <Box grow="Yes">
-        <Scroll size="0" hideTrack visibility="Hover">
-          <div style={{ padding: config.space.S100 }}>
-            {getPowers(powerLevelTags).map((power) => {
-              const selected = value === power;
-              const tag = powerLevelTags[power];
-
-              return (
-                <MenuItem
-                  key={power}
-                  aria-pressed={selected}
-                  radii="300"
-                  onClick={selected ? undefined : () => onChange(power)}
-                  before={<PowerColorBadge color={tag.color} />}
-                  after={<Text size="L400">{power}</Text>}
-                >
-                  <Text style={{ flexGrow: 1 }} size="B400" truncate>
-                    {tag.name}
-                  </Text>
-                </MenuItem>
-              );
-            })}
-          </div>
-        </Scroll>
-      </Box>
-    </Menu>
-  )
-);
-
-type PowerSwitcherProps = PowerSelectorProps & {
-  children: (handleOpen: MouseEventHandler<HTMLButtonElement>, opened: boolean) => ReactNode;
-};
-export function PowerSwitcher({ powerLevelTags, value, onChange, children }: PowerSwitcherProps) {
-  const [menuCords, setMenuCords] = useState<RectCords>();
-
-  const handleOpen: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    setMenuCords(evt.currentTarget.getBoundingClientRect());
-  };
-
-  return (
-    <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,
-          }}
-        >
-          <PowerSelector
-            powerLevelTags={powerLevelTags}
-            value={value}
-            onChange={(v) => {
-              onChange(v);
-              setMenuCords(undefined);
-            }}
-          />
-        </FocusTrap>
-      }
-    >
-      {children(handleOpen, !!menuCords)}
-    </PopOut>
-  );
-}

src/app/components/power/index.ts

@@ -1,3 +0,0 @@
-export * from './PowerColorBadge';
-export * from './PowerIcon';
-export * from './PowerSelector';

src/app/components/power/style.css.ts

@@ -1,90 +0,0 @@
-import { createVar, style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { color, config, DefaultReset, toRem } from 'folds';
-
-export const PowerColorBadge = style({
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexShrink: 0,
-  width: toRem(16),
-  height: toRem(16),
-  borderRadius: config.radii.Pill,
-  border: `${config.borderWidth.B300} solid ${color.Secondary.ContainerLine}`,
-  position: 'relative',
-});
-
-export const PowerColorBadgeNone = style({
-  selectors: {
-    '&::before': {
-      content: '',
-      display: 'inline-block',
-      width: '100%',
-      height: config.borderWidth.B300,
-      backgroundColor: color.Critical.Main,
-
-      position: 'absolute',
-      transform: `rotateZ(-45deg)`,
-    },
-  },
-});
-
-const PowerIconSize = createVar();
-export const PowerIcon = recipe({
-  base: [
-    DefaultReset,
-    {
-      display: 'inline-flex',
-      height: PowerIconSize,
-      minWidth: PowerIconSize,
-      fontSize: PowerIconSize,
-      lineHeight: PowerIconSize,
-      borderRadius: config.radii.R300,
-      cursor: 'default',
-    },
-  ],
-  variants: {
-    size: {
-      '50': {
-        vars: {
-          [PowerIconSize]: config.size.X50,
-        },
-      },
-      '100': {
-        vars: {
-          [PowerIconSize]: config.size.X100,
-        },
-      },
-      '200': {
-        vars: {
-          [PowerIconSize]: config.size.X200,
-        },
-      },
-      '300': {
-        vars: {
-          [PowerIconSize]: config.size.X300,
-        },
-      },
-      '400': {
-        vars: {
-          [PowerIconSize]: config.size.X400,
-        },
-      },
-      '500': {
-        vars: {
-          [PowerIconSize]: config.size.X500,
-        },
-      },
-      '600': {
-        vars: {
-          [PowerIconSize]: config.size.X600,
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    size: '400',
-  },
-});
-
-export type PowerIconVariants = RecipeVariants<typeof PowerIcon>;

src/app/components/server-badge/ServerBadge.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { as, Badge, Text } from 'folds';
-
-export const ServerBadge = as<
-  'div',
-  {
-    server: string;
-    fill?: 'Solid' | 'None';
-  }
->(({ as: AsServerBadge = 'div', fill, server, ...props }, ref) => (
-  <Badge as={AsServerBadge} variant="Secondary" fill={fill} radii="300" {...props} ref={ref}>
-    <Text as="span" size="L400" truncate>
-      {server}
-    </Text>
-  </Badge>
-));

src/app/components/server-badge/index.ts

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

src/app/components/setting-tile/SettingTile.tsx

@@ -1,32 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Box, Text } from 'folds';
-import { BreakWord } from '../../styles/Text.css';
-
-type SettingTileProps = {
-  title?: ReactNode;
-  description?: ReactNode;
-  before?: ReactNode;
-  after?: ReactNode;
-  children?: ReactNode;
-};
-export function SettingTile({ title, description, before, after, children }: SettingTileProps) {
-  return (
-    <Box alignItems="Center" gap="300">
-      {before && <Box shrink="No">{before}</Box>}
-      <Box grow="Yes" direction="Column" gap="100">
-        {title && (
-          <Text className={BreakWord} size="T300">
-            {title}
-          </Text>
-        )}
-        {description && (
-          <Text className={BreakWord} size="T200" priority="300">
-            {description}
-          </Text>
-        )}
-        {children}
-      </Box>
-      {after && <Box shrink="No">{after}</Box>}
-    </Box>
-  );
-}

src/app/components/setting-tile/index.ts

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

src/app/components/text-viewer/TextViewer.css.ts

@@ -31,11 +31,7 @@ export const TextViewerContent = style([
 export const TextViewerPre = style([
   DefaultReset,
   {
+    padding: config.space.S600,
     whiteSpace: 'pre-wrap',
-    wordBreak: 'break-word',
   },
 ]);
-
-export const TextViewerPrePadding = style({
-  padding: config.space.S600,
-});

src/app/components/text-viewer/TextViewer.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-import React, { ComponentProps, HTMLAttributes, Suspense, forwardRef, lazy } from 'react';
+import React, { Suspense, lazy } from 'react';
 import classNames from 'classnames';
 import { Box, Chip, Header, Icon, IconButton, Icons, Scroll, Text, as } from 'folds';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -8,29 +8,6 @@ import { copyToClipboard } from '../../utils/dom';
 
 const ReactPrism = lazy(() => import('../../plugins/react-prism/ReactPrism'));
 
-type TextViewerContentProps = {
-  text: string;
-  langName: string;
-  size?: ComponentProps<typeof Text>['size'];
-} & HTMLAttributes<HTMLPreElement>;
-export const TextViewerContent = forwardRef<HTMLPreElement, TextViewerContentProps>(
-  ({ text, langName, size, className, ...props }, ref) => (
-    <Text
-      as="pre"
-      size={size}
-      className={classNames(css.TextViewerPre, `language-${langName}`, className)}
-      {...props}
-      ref={ref}
-    >
-      <ErrorBoundary fallback={<code>{text}</code>}>
-        <Suspense fallback={<code>{text}</code>}>
-          <ReactPrism key={text}>{(codeRef) => <code ref={codeRef}>{text}</code>}</ReactPrism>
-        </Suspense>
-      </ErrorBoundary>
-    </Text>
-  )
-);
-
 export type TextViewerProps = {
   name: string;
   text: string;
@@ -66,7 +43,6 @@ export const TextViewer = as<'div', TextViewerProps>(
             </Chip>
           </Box>
         </Header>
-
         <Box
           grow="Yes"
           className={css.TextViewerContent}
@@ -74,11 +50,13 @@ export const TextViewer = as<'div', TextViewerProps>(
           alignItems="Center"
         >
           <Scroll hideTrack variant="Background" visibility="Hover">
-            <TextViewerContent
-              className={css.TextViewerPrePadding}
-              text={text}
-              langName={langName}
-            />
+            <Text as="pre" className={classNames(css.TextViewerPre, `language-${langName}`)}>
+              <ErrorBoundary fallback={<code>{text}</code>}>
+                <Suspense fallback={<code>{text}</code>}>
+                  <ReactPrism>{(codeRef) => <code ref={codeRef}>{text}</code>}</ReactPrism>
+                </Suspense>
+              </ErrorBoundary>
+            </Text>
           </Scroll>
         </Box>
       </Box>

src/app/components/uia-stages/PasswordStage.tsx

@@ -1,89 +0,0 @@
-import { Box, Button, color, config, Dialog, Header, Icon, IconButton, Icons, Text } from 'folds';
-import React, { FormEventHandler } from 'react';
-import { AuthType } from 'matrix-js-sdk';
-import { StageComponentProps } from './types';
-import { ErrorCode } from '../../cs-errorcode';
-import { PasswordInput } from '../password-input';
-
-export function PasswordStage({
-  stageData,
-  submitAuthDict,
-  onCancel,
-  userId,
-}: StageComponentProps & {
-  userId: string;
-}) {
-  const { errorCode, error, session } = stageData;
-
-  const handleFormSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
-    evt.preventDefault();
-    const { passwordInput } = evt.target as HTMLFormElement & {
-      passwordInput: HTMLInputElement;
-    };
-    const password = passwordInput.value;
-    if (!password) return;
-    submitAuthDict({
-      type: AuthType.Password,
-      identifier: {
-        type: 'm.id.user',
-        user: userId,
-      },
-      password,
-      session,
-    });
-  };
-
-  return (
-    <Dialog>
-      <Header
-        style={{
-          padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
-        }}
-        variant="Surface"
-        size="500"
-      >
-        <Box grow="Yes">
-          <Text size="H4">Account Password</Text>
-        </Box>
-        <IconButton size="300" onClick={onCancel} radii="300">
-          <Icon src={Icons.Cross} />
-        </IconButton>
-      </Header>
-      <Box
-        as="form"
-        onSubmit={handleFormSubmit}
-        style={{ padding: `0 ${config.space.S400} ${config.space.S400}` }}
-        direction="Column"
-        gap="400"
-      >
-        <Box direction="Column" gap="400">
-          <Text size="T200">
-            To perform this action you need to authenticate yourself by entering you account
-            password.
-          </Text>
-          <Box direction="Column" gap="100">
-            <Text size="L400">Password</Text>
-            <PasswordInput size="400" name="passwordInput" outlined autoFocus required />
-            {errorCode && (
-              <Box alignItems="Center" gap="100" style={{ color: color.Critical.Main }}>
-                <Icon size="50" src={Icons.Warning} filled />
-                <Text size="T200">
-                  <b>
-                    {errorCode === ErrorCode.M_FORBIDDEN
-                      ? 'Invalid Password!'
-                      : `${errorCode}: ${error}`}
-                  </b>
-                </Text>
-              </Box>
-            )}
-          </Box>
-        </Box>
-        <Button variant="Primary" type="submit">
-          <Text as="span" size="B400">
-            Continue
-          </Text>
-        </Button>
-      </Box>
-    </Dialog>
-  );
-}