Enable semantic check on PR title

Manager seem more appropriate than Co-Founder. As Co-founder essentially have same power to Founder.

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

@@ -14,7 +14,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4.2.0
       - name: Setup node
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.4.0
         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.0
+        uses: actions/upload-artifact@v4.6.2
         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.0
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: pr
           path: ./pr.txt

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

.github/workflows/docker-pr.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4.2.0
       - name: Build Docker image
-        uses: docker/build-push-action@v6.13.0
+        uses: docker/build-push-action@v6.18.0
         with:
           context: .
           push: false

.github/workflows/netlify-dev.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4.2.0
       - name: Setup node
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version: 20.12.2
           cache: 'npm'

.github/workflows/pr-title.yml

@@ -0,0 +1,17 @@
+name: Check PR title
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - reopened
+      - edited
+      - synchronize
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@0723387faaf9b38adef4775cd42cfd5155ed6017
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/prod-deploy.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4.2.0
       - name: Setup node
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.4.0
         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@72f2c25fcb47643c292f7107632f7a47c1df5cd8
         with:
           files: |
             cinny-${{ steps.vars.outputs.tag }}.tar.gz
@@ -68,29 +68,29 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4.2.0
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3.4.0
+        uses: docker/setup-qemu-action@v3.6.0
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.9.0
+        uses: docker/setup-buildx-action@v3.10.0
       - name: Login to Docker Hub
-        uses: docker/login-action@v3.3.0
+        uses: docker/login-action@v3.5.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Login to the Container registry
-        uses: docker/login-action@v3.3.0
+        uses: docker/login-action@v3.5.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.6.1
+        uses: docker/metadata-action@v5.8.0
         with:
           images: |
             ${{ secrets.DOCKER_USERNAME }}/cinny
             ghcr.io/${{ github.repository }}
       - name: Build and push Docker image
-        uses: docker/build-push-action@v6.13.0
+        uses: docker/build-push-action@v6.18.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.29.0-alpine
 
 COPY --from=builder /src/dist /app
 COPY --from=builder /src/docker-nginx.conf /etc/nginx/conf.d/default.conf

contrib/caddy/caddyfile

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

contrib/nginx/cinny.domain.tld.conf

@@ -23,7 +23,6 @@ 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;
 

docker-nginx.conf

@@ -8,7 +8,6 @@ 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,11 +13,6 @@
   to = "/sw.js"
   status = 200
 
-[[redirects]]
-  from = "*/olm.wasm"
-  to = "/olm.wasm"
-  status = 200
-  force = true
   
 [[redirects]]
   from = "/pdf.worker.min.js"

package-lock.json

@@ -1,19 +1,18 @@
 {
   "name": "cinny",
-  "version": "4.5.0",
+  "version": "4.9.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cinny",
-      "version": "4.5.0",
+      "version": "4.9.0",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "1.1.6",
         "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
         "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
         "@fontsource/inter": "4.5.14",
-        "@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",
@@ -22,8 +21,10 @@
         "@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",
@@ -33,7 +34,7 @@
         "file-saver": "2.0.5",
         "flux": "4.0.3",
         "focus-trap-react": "10.0.2",
-        "folds": "2.1.0",
+        "folds": "2.2.0",
         "formik": "2.4.6",
         "html-dom-parser": "4.0.0",
         "html-react-parser": "4.2.0",
@@ -45,15 +46,16 @@
         "jotai": "2.6.0",
         "linkify-react": "4.1.3",
         "linkifyjs": "4.1.3",
-        "matrix-js-sdk": "35.0.0",
+        "matrix-js-sdk": "37.5.0",
         "millify": "6.1.0",
         "pdfjs-dist": "4.2.67",
-        "prismjs": "1.29.0",
+        "prismjs": "1.30.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",
@@ -73,6 +75,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",
@@ -96,7 +99,7 @@
         "prettier": "2.8.1",
         "sass": "1.56.2",
         "typescript": "4.9.4",
-        "vite": "5.0.13",
+        "vite": "5.4.19",
         "vite-plugin-pwa": "0.20.5",
         "vite-plugin-static-copy": "1.0.4",
         "vite-plugin-top-level-await": "1.4.4"
@@ -2261,17 +2264,19 @@
       }
     },
     "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-11.1.0.tgz",
-      "integrity": "sha512-JPuO9RCVDklDjbFzMvZfQb7PuiFkLY72bniRSu81lRzkkrcbZtmKqBFMm9H4f2FSz+tHVkDnmsvn12I4sdJJ5A==",
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-14.1.0.tgz",
+      "integrity": "sha512-vcSxHJIr6lP0Fgo8jl0sTHg+OZxZn+skGjiyB62erfgw/R2QqJl0ZVSY8SRcbk9LtHo/ZGld1tnaOyjL2e3cLQ==",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">= 10"
+        "node": ">= 18"
       }
     },
     "node_modules/@matrix-org/olm": {
       "version": "3.2.15",
       "resolved": "https://registry.npmjs.org/@matrix-org/olm/-/olm-3.2.15.tgz",
-      "integrity": "sha512-S7lOrndAK9/8qOtaTq/WhttJC/o4GAzdfK0MUPpo8ApzsJEC0QjtwrkC3KBXdFP1cD1MXi/mlKR7aaoVMKgs6Q=="
+      "integrity": "sha512-S7lOrndAK9/8qOtaTq/WhttJC/o4GAzdfK0MUPpo8ApzsJEC0QjtwrkC3KBXdFP1cD1MXi/mlKR7aaoVMKgs6Q==",
+      "license": "Apache-2.0"
     },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
@@ -4572,6 +4577,13 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/chroma-js": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-3.1.1.tgz",
+      "integrity": "sha512-SFCr4edNkZ1bGaLzGz7rgR1bRzVX4MmMxwsIa3/Bh6ose8v+hRpneoizHv0KChdjxaXyjRtaMq7sCuZSzPomQA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -4580,7 +4592,8 @@
     "node_modules/@types/events": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.3.tgz",
-      "integrity": "sha512-trOc4AAUThEz9hapPtSd7wf5tiQKvTtu5b371UxXdTuqzIh0ArcRspRP0i0Viu+LXstIQ1z96t1nsPxT9ol01g=="
+      "integrity": "sha512-trOc4AAUThEz9hapPtSd7wf5tiQKvTtu5b371UxXdTuqzIh0ArcRspRP0i0Viu+LXstIQ1z96t1nsPxT9ol01g==",
+      "license": "MIT"
     },
     "node_modules/@types/file-saver": {
       "version": "2.0.5",
@@ -4669,7 +4682,8 @@
     "node_modules/@types/retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
-      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
+      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
+      "license": "MIT"
     },
     "node_modules/@types/sanitize-html": {
       "version": "2.9.0",
@@ -5079,7 +5093,8 @@
     "node_modules/another-json": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/another-json/-/another-json-0.2.0.tgz",
-      "integrity": "sha512-/Ndrl68UQLhnCdsAzEXLMFuOR546o2qbYRqCglaNHbjXrwG1ayTcdwr3zkSGOGtGXDyR5X9nCFfnyG2AFJIsqg=="
+      "integrity": "sha512-/Ndrl68UQLhnCdsAzEXLMFuOR546o2qbYRqCglaNHbjXrwG1ayTcdwr3zkSGOGtGXDyR5X9nCFfnyG2AFJIsqg==",
+      "license": "Apache-2.0"
     },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
@@ -5422,6 +5437,12 @@
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
+    "node_modules/badwords-list": {
+      "version": "2.0.1-4",
+      "resolved": "https://registry.npmjs.org/badwords-list/-/badwords-list-2.0.1-4.tgz",
+      "integrity": "sha512-FxfZUp7B9yCnesNtFQS9v6PvZdxTYa14Q60JR6vhjdQdWI4naTjJIyx22JzoER8ooeT8SAAKoHLjKfCV7XgYUQ==",
+      "license": "MIT"
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -5429,9 +5450,10 @@
       "devOptional": true
     },
     "node_modules/base-x": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/base-x/-/base-x-5.0.0.tgz",
-      "integrity": "sha512-sMW3VGSX1QWVFA6l8U62MLKz29rRfpTlYdCqLdpLo1/Yd4zZwSbnUaDfciIAowAqvq7YFnWq9hrhdg1KYgc1lQ=="
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/base-x/-/base-x-5.0.1.tgz",
+      "integrity": "sha512-M7uio8Zt++eg3jPj+rHMfCC+IuygQHHCOU+IYsVtik6FWjuYpVt/+MRKcgsAMHh8mMFAwnB+Bs+mTrFiXjMzKg==",
+      "license": "MIT"
     },
     "node_modules/base64-js": {
       "version": "1.5.1",
@@ -5537,6 +5559,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/bs58/-/bs58-6.0.0.tgz",
       "integrity": "sha512-PD0wEnEYg6ijszw/u8s+iI3H17cTymlrwkKhDhPZq+Sokl3AU4htyBFTjAeNAlCCmg0f53g6ih3jATyCKftTfw==",
+      "license": "MIT",
       "dependencies": {
         "base-x": "^5.0.0"
       }
@@ -5729,6 +5752,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/chroma-js": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-3.1.2.tgz",
+      "integrity": "sha512-IJnETTalXbsLx1eKEgx19d5L6SRM7cH4vINw/99p/M11HCuXGRWL+6YmCm7FWFGIo6dtWuQoQi1dc5yQ7ESIHg==",
+      "license": "(BSD-3-Clause AND Apache-2.0)"
+    },
     "node_modules/classnames": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
@@ -5833,6 +5862,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
       "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
@@ -6984,6 +7014,7 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.8.x"
       }
@@ -7234,15 +7265,16 @@
       }
     },
     "node_modules/folds": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/folds/-/folds-2.1.0.tgz",
-      "integrity": "sha512-KwAG8bH3jsyZ9FKPMg+6ABV2YOcpp4nL0cCelsalnaPeRThkc5fgG1Xj5mhmdffYKjEXpEbERi5qmGbepgJryg==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/folds/-/folds-2.2.0.tgz",
+      "integrity": "sha512-uOfck5eWEIK11rhOAEdSoPIvMXwv+D1Go03pxSAKezWVb+uRoBdmE6LEqiLOF+ac4DGmZRMPvpdDsXCg7EVNIg==",
+      "license": "Apache-2.0",
       "peerDependencies": {
-        "@vanilla-extract/css": "^1.9.2",
-        "@vanilla-extract/recipes": "^0.3.0",
-        "classnames": "^2.3.2",
-        "react": "^17.0.0",
-        "react-dom": "^17.0.0"
+        "@vanilla-extract/css": "1.9.2",
+        "@vanilla-extract/recipes": "0.3.0",
+        "classnames": "2.3.2",
+        "react": "17.0.0",
+        "react-dom": "17.0.0"
       }
     },
     "node_modules/for-each": {
@@ -8542,6 +8574,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
       "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "license": "MIT",
       "engines": {
         "node": ">=18"
       }
@@ -8674,6 +8707,7 @@
       "version": "1.9.2",
       "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.2.tgz",
       "integrity": "sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6.0"
       },
@@ -8749,21 +8783,23 @@
     "node_modules/matrix-events-sdk": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/matrix-events-sdk/-/matrix-events-sdk-0.0.1.tgz",
-      "integrity": "sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA=="
+      "integrity": "sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==",
+      "license": "Apache-2.0"
     },
     "node_modules/matrix-js-sdk": {
-      "version": "35.0.0",
-      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-35.0.0.tgz",
-      "integrity": "sha512-X8hIsd/8x1SC9vRr8DiNKQxmdrfRujtvEWPz8mY4FxVDJG8HEGDHvqUmaSy2jrtnOUn4oHzGQVLFO3DnhsSf8w==",
+      "version": "37.5.0",
+      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-37.5.0.tgz",
+      "integrity": "sha512-5tyuAi5hnKud1UkVq8Z2/3c22hWGELBZzErJPZkE6Hju2uGUfGtrIx6uj6puv0ZjvsUU3X6Qgm8vdReKO1PGig==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@matrix-org/matrix-sdk-crypto-wasm": "^11.0.0",
+        "@matrix-org/matrix-sdk-crypto-wasm": "^14.0.1",
         "@matrix-org/olm": "3.2.15",
         "another-json": "^0.2.0",
         "bs58": "^6.0.0",
         "content-type": "^1.0.4",
         "jwt-decode": "^4.0.0",
-        "loglevel": "^1.7.1",
+        "loglevel": "^1.9.2",
         "matrix-events-sdk": "0.0.1",
         "matrix-widget-api": "^1.10.0",
         "oidc-client-ts": "^3.0.1",
@@ -8777,21 +8813,23 @@
       }
     },
     "node_modules/matrix-js-sdk/node_modules/uuid": {
-      "version": "11.0.5",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.5.tgz",
-      "integrity": "sha512-508e6IcKLrhxKdBbcA2b4KQZlLVp2+J5UwQ6F7Drckkc5N9ZJwFa4TgWtsww9UG8fGHbm6gbV19TdM5pQ4GaIA==",
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
+      "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
       "funding": [
         "https://github.com/sponsors/broofa",
         "https://github.com/sponsors/ctavan"
       ],
+      "license": "MIT",
       "bin": {
         "uuid": "dist/esm/bin/uuid"
       }
     },
     "node_modules/matrix-widget-api": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.12.0.tgz",
-      "integrity": "sha512-6JRd9fJGGvuBRhcTg9wX+Skn/Q1wox3jdp5yYQKJ6pPw4urW9bkTR90APBKVDB1vorJKT44jml+lCzkDMRBjww==",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.13.1.tgz",
+      "integrity": "sha512-mkOHUVzaN018TCbObfGOSaMW2GoUxOfcxNNlTVx5/HeMk3OSQPQM0C9oEME5Liiv/dBUoSrEB64V8wF7e/gb1w==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@types/events": "^3.0.0",
         "events": "^3.2.0"
@@ -9183,9 +9221,10 @@
       }
     },
     "node_modules/oidc-client-ts": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-3.1.0.tgz",
-      "integrity": "sha512-IDopEXjiwjkmJLYZo6BTlvwOtnlSniWZkKZoXforC/oLZHC9wkIxd25Kwtmo5yKFMMVcsp3JY6bhcNJqdYk8+g==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-3.2.1.tgz",
+      "integrity": "sha512-hS5AJ5s/x4bXhHvNJT1v+GGvzHUwdRWqNQQbSrp10L1IRmzfRGKQ3VWN3dstJb+oF3WtAyKezwD2+dTEIyBiAA==",
+      "license": "Apache-2.0",
       "dependencies": {
         "jwt-decode": "^4.0.0"
       },
@@ -9273,6 +9312,7 @@
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
       "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
+      "license": "MIT",
       "dependencies": {
         "@types/retry": "0.12.0",
         "retry": "^0.13.1"
@@ -9493,9 +9533,10 @@
       }
     },
     "node_modules/prismjs": {
-      "version": "1.29.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
-      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -9654,6 +9695,16 @@
         "react": ">=15"
       }
     },
+    "node_modules/react-colorful": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
+      "integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -10025,6 +10076,7 @@
       "version": "0.13.1",
       "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
       "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "license": "MIT",
       "engines": {
         "node": ">= 4"
       }
@@ -10238,6 +10290,7 @@
       "version": "2.15.0",
       "resolved": "https://registry.npmjs.org/sdp-transform/-/sdp-transform-2.15.0.tgz",
       "integrity": "sha512-KrOH82c/W+GYQ0LHqtr3caRpM3ITglq3ljGUIb8LTki7ByacJZ9z+piSGiwZDsRyhQbYBOBJgr2k6X4BZXi3Kw==",
+      "license": "MIT",
       "bin": {
         "sdp-verify": "checker.js"
       }
@@ -11146,7 +11199,8 @@
     "node_modules/unhomoglyph": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/unhomoglyph/-/unhomoglyph-1.0.6.tgz",
-      "integrity": "sha512-7uvcWI3hWshSADBu4JpnyYbTVc7YlhF5GDW/oPD5AxIxl34k4wXR3WDkPnzLxkN32LiTCTKMQLtKVZiwki3zGg=="
+      "integrity": "sha512-7uvcWI3hWshSADBu4JpnyYbTVc7YlhF5GDW/oPD5AxIxl34k4wXR3WDkPnzLxkN32LiTCTKMQLtKVZiwki3zGg==",
+      "license": "MIT"
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.1",
@@ -11277,13 +11331,14 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.0.13",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.13.tgz",
-      "integrity": "sha512-/9ovhv2M2dGTuA+dY93B9trfyWMDRQw2jdVBhHNP6wr0oF34wG2i/N55801iZIpgUpnHDm4F/FabGQLyc+eOgg==",
+      "version": "5.4.19",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz",
+      "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
+      "license": "MIT",
       "dependencies": {
-        "esbuild": "^0.19.3",
-        "postcss": "^8.4.32",
-        "rollup": "^4.2.0"
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -11302,6 +11357,7 @@
         "less": "*",
         "lightningcss": "^1.21.0",
         "sass": "*",
+        "sass-embedded": "*",
         "stylus": "*",
         "sugarss": "*",
         "terser": "^5.4.0"
@@ -11319,6 +11375,9 @@
         "sass": {
           "optional": true
         },
+        "sass-embedded": {
+          "optional": true
+        },
         "stylus": {
           "optional": true
         },
@@ -11418,6 +11477,412 @@
         "vite": ">=2.8"
       }
     },
+    "node_modules/vite/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
     "node_modules/void-elements": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "4.5.0",
+  "version": "4.9.0",
   "description": "Yet another matrix client",
   "main": "index.js",
   "type": "module",
@@ -24,7 +24,6 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
     "@fontsource/inter": "4.5.14",
-    "@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",
@@ -33,8 +32,10 @@
     "@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",
@@ -44,7 +45,7 @@
     "file-saver": "2.0.5",
     "flux": "4.0.3",
     "focus-trap-react": "10.0.2",
-    "folds": "2.1.0",
+    "folds": "2.2.0",
     "formik": "2.4.6",
     "html-dom-parser": "4.0.0",
     "html-react-parser": "4.2.0",
@@ -56,15 +57,16 @@
     "jotai": "2.6.0",
     "linkify-react": "4.1.3",
     "linkifyjs": "4.1.3",
-    "matrix-js-sdk": "35.0.0",
+    "matrix-js-sdk": "37.5.0",
     "millify": "6.1.0",
     "pdfjs-dist": "4.2.67",
-    "prismjs": "1.29.0",
+    "prismjs": "1.30.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",
@@ -84,6 +86,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",
@@ -107,7 +110,7 @@
     "prettier": "2.8.1",
     "sass": "1.56.2",
     "typescript": "4.9.4",
-    "vite": "5.0.13",
+    "vite": "5.4.19",
     "vite-plugin-pwa": "0.20.5",
     "vite-plugin-static-copy": "1.0.4",
     "vite-plugin-top-level-await": "1.4.4"

src/app/atoms/time/Time.jsx

@@ -4,10 +4,25 @@ import PropTypes from 'prop-types';
 import dateFormat from 'dateformat';
 import { isInSameDay } from '../../../util/common';
 
-function Time({ timestamp, fullTime }) {
+/**
+ * Renders a formatted timestamp.
+ *
+ * Displays the time in hour:minute format if the message is from today or yesterday, unless `fullTime` is true.
+ * For older messages, it shows the date and time.
+ *
+ * @param {number} timestamp - The timestamp to display.
+ * @param {boolean} [fullTime=false] - If true, always show the full date and time.
+ * @param {boolean} hour24Clock - Whether to use 24-hour time format.
+ * @param {string} dateFormatString - Format string for the date part.
+ * @returns {JSX.Element} A <time> element with the formatted date/time.
+ */
+function Time({ timestamp, fullTime, hour24Clock, dateFormatString }) {
   const date = new Date(timestamp);
 
-  const formattedFullTime = dateFormat(date, 'dd mmmm yyyy, hh:MM TT');
+  const formattedFullTime = dateFormat(
+    date,
+    hour24Clock ? 'dd mmmm yyyy, HH:MM' : 'dd mmmm yyyy, hh:MM TT'
+  );
   let formattedDate = formattedFullTime;
 
   if (!fullTime) {
@@ -16,17 +31,19 @@ function Time({ timestamp, fullTime }) {
     compareDate.setDate(compareDate.getDate() - 1);
     const isYesterday = isInSameDay(date, compareDate);
 
-    formattedDate = dateFormat(date, isToday || isYesterday ? 'hh:MM TT' : 'dd/mm/yyyy');
+    const timeFormat = hour24Clock ? 'HH:MM' : 'hh:MM TT';
+
+    formattedDate = dateFormat(
+      date,
+      isToday || isYesterday ? timeFormat : dateFormatString.toLowerCase()
+    );
     if (isYesterday) {
       formattedDate = `Yesterday, ${formattedDate}`;
     }
   }
 
   return (
-    <time
-      dateTime={date.toISOString()}
-      title={formattedFullTime}
-    >
+    <time dateTime={date.toISOString()} title={formattedFullTime}>
       {formattedDate}
     </time>
   );
@@ -39,6 +56,8 @@ Time.defaultProps = {
 Time.propTypes = {
   timestamp: PropTypes.number.isRequired,
   fullTime: PropTypes.bool,
+  hour24Clock: PropTypes.bool.isRequired,
+  dateFormatString: PropTypes.string.isRequired,
 };
 
 export default Time;

src/app/components/AccountDataEditor.tsx

@@ -1,12 +1,4 @@
-import React, {
-  FormEventHandler,
-  KeyboardEventHandler,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { FormEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   Box,
   Text,
@@ -22,22 +14,20 @@ import {
   Scroll,
   config,
 } from 'folds';
-import { isKeyHotkey } from 'is-hotkey';
 import { MatrixError } from 'matrix-js-sdk';
-import * as css from './styles.css';
-import { useTextAreaIntentHandler } from '../../../hooks/useTextAreaIntent';
-import { Cursor, Intent, TextArea, TextAreaOperations } from '../../../plugins/text-area';
-import { GetTarget } from '../../../plugins/text-area/type';
-import { syntaxErrorPosition } from '../../../utils/dom';
-import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { Page, PageHeader } from '../../../components/page';
-import { useAlive } from '../../../hooks/useAlive';
-import { SequenceCard } from '../../../components/sequence-card';
-import { TextViewerContent } from '../../../components/text-viewer';
+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;
@@ -46,45 +36,28 @@ type AccountDataInfo = {
 type AccountDataEditProps = {
   type: string;
   defaultContent: string;
+  submitChange: AccountDataSubmitCallback;
   onCancel: () => void;
   onSave: (info: AccountDataInfo) => void;
 };
-function AccountDataEdit({ type, defaultContent, onCancel, onSave }: AccountDataEditProps) {
-  const mx = useMatrixClient();
+function AccountDataEdit({
+  type,
+  defaultContent,
+  submitChange,
+  onCancel,
+  onSave,
+}: AccountDataEditProps) {
   const alive = useAlive();
 
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const [jsonError, setJSONError] = useState<SyntaxError>();
 
-  const getTarget: GetTarget = useCallback(() => {
-    const target = textAreaRef.current;
-    if (!target) throw new Error('TextArea element not found!');
-    return target;
-  }, []);
-
-  const { textArea, operations, intent } = useMemo(() => {
-    const ta = new TextArea(getTarget);
-    const op = new TextAreaOperations(getTarget);
-    return {
-      textArea: ta,
-      operations: op,
-      intent: new Intent(EDITOR_INTENT_SPACE_COUNT, ta, op),
-    };
-  }, [getTarget]);
-
-  const intentHandler = useTextAreaIntentHandler(textArea, operations, intent);
-
-  const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (evt) => {
-    intentHandler(evt);
-    if (isKeyHotkey('escape', evt)) {
-      const cursor = Cursor.fromTextAreaElement(getTarget());
-      operations.deselect(cursor);
-    }
-  };
-
-  const [submitState, submit] = useAsyncCallback<object, MatrixError, [string, object]>(
-    useCallback((dataType, data) => mx.setAccountData(dataType, data), [mx])
+  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) => {
@@ -140,7 +113,9 @@ function AccountDataEdit({ type, defaultContent, onCancel, onSave }: AccountData
       as="form"
       onSubmit={handleSubmit}
       grow="Yes"
-      className={css.EditorContent}
+      style={{
+        padding: config.space.S400,
+      }}
       direction="Column"
       gap="400"
       aria-disabled={submitting}
@@ -174,6 +149,7 @@ function AccountDataEdit({ type, defaultContent, onCancel, onSave }: AccountData
             fill="Soft"
             size="400"
             radii="300"
+            type="button"
             onClick={onCancel}
             disabled={submitting}
           >
@@ -194,7 +170,9 @@ function AccountDataEdit({ type, defaultContent, onCancel, onSave }: AccountData
         <TextAreaComponent
           ref={textAreaRef}
           name="contentTextArea"
-          className={css.EditorTextArea}
+          style={{
+            fontFamily: 'monospace',
+          }}
           onKeyDown={handleKeyDown}
           defaultValue={defaultContent}
           resize="None"
@@ -221,7 +199,13 @@ type AccountDataViewProps = {
 };
 function AccountDataView({ type, defaultContent, onEdit }: AccountDataViewProps) {
   return (
-    <Box direction="Column" className={css.EditorContent} gap="400">
+    <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>
@@ -259,15 +243,20 @@ function AccountDataView({ type, defaultContent, onEdit }: AccountDataViewProps)
 
 export type AccountDataEditorProps = {
   type?: string;
+  content?: object;
+  submitChange: AccountDataSubmitCallback;
   requestClose: () => void;
 };
 
-export function AccountDataEditor({ type, requestClose }: AccountDataEditorProps) {
-  const mx = useMatrixClient();
-
+export function AccountDataEditor({
+  type,
+  content,
+  submitChange,
+  requestClose,
+}: AccountDataEditorProps) {
   const [data, setData] = useState<AccountDataInfo>({
     type: type ?? '',
-    content: mx.getAccountData(type ?? '')?.getContent() ?? {},
+    content: content ?? {},
   });
 
   const [edit, setEdit] = useState(!type);
@@ -316,6 +305,7 @@ export function AccountDataEditor({ type, requestClose }: AccountDataEditorProps
           <AccountDataEdit
             type={data.type}
             defaultContent={contentJSONStr}
+            submitChange={submitChange}
             onCancel={closeEdit}
             onSave={handleSave}
           />

src/app/components/BetaNoticeBadge.tsx

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

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

src/app/components/HexColorPickerPopOut.tsx

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

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

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

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

@@ -2,6 +2,7 @@ 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,
@@ -29,7 +30,7 @@ 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";
+import { IImageContent } from '../../types/matrix/common';
 
 type RenderMessageContentProps = {
   displayName: string;
@@ -70,9 +71,10 @@ export function RenderMessageContent({
   };
   const renderCaption = () => {
     const content: IImageContent = getContent();
-    if(content.filename && content.filename !== content.body) {
+    if (content.filename && content.filename !== content.body) {
       return (
         <MText
+          style={{ marginTop: config.space.S200 }}
           edited={edited}
           content={content}
           renderBody={(props) => (
@@ -85,10 +87,10 @@ export function RenderMessageContent({
           )}
           renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
         />
-      )
+      );
     }
     return null;
-  }
+  };
 
   const renderFile = () => (
     <>
@@ -119,7 +121,6 @@ export function RenderMessageContent({
           >
             <DownloadFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} info={info} />
           </FileContent>
-
         )}
         outlined={outlineAttachment}
       />
@@ -234,7 +235,6 @@ export function RenderMessageContent({
         />
         {renderCaption()}
       </>
-
     );
   }
 
@@ -251,7 +251,6 @@ export function RenderMessageContent({
         />
         {renderCaption()}
       </>
-
     );
   }
 

src/app/components/RoomNotificationSwitcher.tsx

@@ -0,0 +1,120 @@
+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,7 +1,6 @@
 import React, { FormEventHandler, useCallback } from 'react';
 import { Box, Text, Button, Spinner, color } from 'folds';
-import { decodeRecoveryKey } from 'matrix-js-sdk/lib/crypto-api';
-import { deriveKey } from 'matrix-js-sdk/lib/crypto/key_passphrase';
+import { decodeRecoveryKey, deriveRecoveryKeyFromPassphrase } from 'matrix-js-sdk/lib/crypto-api';
 import { PasswordInput } from './password-input';
 import {
   SecretStorageKeyContent,
@@ -29,11 +28,16 @@ export function SecretStorageRecoveryPassphrase({
   const [driveKeyState, submitPassphrase] = useAsyncCallback<
     Uint8Array,
     Error,
-    Parameters<typeof deriveKey>
+    Parameters<typeof deriveRecoveryKeyFromPassphrase>
   >(
     useCallback(
       async (passphrase, salt, iterations, bits) => {
-        const decodedRecoveryKey = await deriveKey(passphrase, salt, iterations, bits);
+        const decodedRecoveryKey = await deriveRecoveryKeyFromPassphrase(
+          passphrase,
+          salt,
+          iterations,
+          bits
+        );
 
         const match = await mx.secretStorage.checkKey(decodedRecoveryKey, keyContent as any);
 

src/app/components/ServerConfigsLoader.tsx

@@ -0,0 +1,52 @@
+import { ReactNode, useCallback, useMemo } from 'react';
+import { Capabilities, validateAuthMetadata, ValidatedAuthMetadata } from 'matrix-js-sdk';
+import { AsyncStatus, useAsyncCallbackValue } from '../hooks/useAsyncCallback';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+import { MediaConfig } from '../hooks/useMediaConfig';
+import { promiseFulfilledResult } from '../utils/common';
+
+export type ServerConfigs = {
+  capabilities?: Capabilities;
+  mediaConfig?: MediaConfig;
+  authMetadata?: ValidatedAuthMetadata;
+};
+
+type ServerConfigsLoaderProps = {
+  children: (configs: ServerConfigs) => ReactNode;
+};
+export function ServerConfigsLoader({ children }: ServerConfigsLoaderProps) {
+  const mx = useMatrixClient();
+  const fallbackConfigs = useMemo(() => ({}), []);
+
+  const [configsState] = useAsyncCallbackValue<ServerConfigs, unknown>(
+    useCallback(async () => {
+      const result = await Promise.allSettled([
+        mx.getCapabilities(),
+        mx.getMediaConfig(),
+        mx.getAuthMetadata(),
+      ]);
+
+      const capabilities = promiseFulfilledResult(result[0]);
+      const mediaConfig = promiseFulfilledResult(result[1]);
+      const authMetadata = promiseFulfilledResult(result[2]);
+      let validatedAuthMetadata: ValidatedAuthMetadata | undefined;
+
+      try {
+        validatedAuthMetadata = validateAuthMetadata(authMetadata);
+      } catch (e) {
+        console.error(e);
+      }
+
+      return {
+        capabilities,
+        mediaConfig,
+        authMetadata: validatedAuthMetadata,
+      };
+    }, [mx])
+  );
+
+  const configs: ServerConfigs =
+    configsState.status === AsyncStatus.Success ? configsState.data : fallbackConfigs;
+
+  return children(configs);
+}

src/app/components/UserRoomProfileRenderer.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Menu, PopOut, toRem } from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { useCloseUserRoomProfile, useUserRoomProfileState } from '../state/hooks/userRoomProfile';
+import { UserRoomProfile } from './user-profile';
+import { UserRoomProfileState } from '../state/userRoomProfile';
+import { useAllJoinedRoomsSet, useGetRoom } from '../hooks/useGetRoom';
+import { stopPropagation } from '../utils/keyboard';
+import { SpaceProvider } from '../hooks/useSpace';
+import { RoomProvider } from '../hooks/useRoom';
+
+function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState }) {
+  const { roomId, spaceId, userId, cords, position } = state;
+  const allJoinedRooms = useAllJoinedRoomsSet();
+  const getRoom = useGetRoom(allJoinedRooms);
+  const room = getRoom(roomId);
+  const space = spaceId ? getRoom(spaceId) : undefined;
+
+  const close = useCloseUserRoomProfile();
+
+  if (!room) return null;
+
+  return (
+    <PopOut
+      anchor={cords}
+      position={position ?? 'Top'}
+      align="Start"
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: close,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Menu style={{ width: toRem(340) }}>
+            <SpaceProvider value={space ?? null}>
+              <RoomProvider value={room}>
+                <UserRoomProfile userId={userId} />
+              </RoomProvider>
+            </SpaceProvider>
+          </Menu>
+        </FocusTrap>
+      }
+    />
+  );
+}
+
+export function UserRoomProfileRenderer() {
+  const state = useUserRoomProfileState();
+
+  if (!state) return null;
+  return <UserRoomProfileContextMenu state={state} />;
+}

src/app/components/create-room/AdditionalCreatorInput.tsx

@@ -0,0 +1,306 @@
+import {
+  Box,
+  Button,
+  Chip,
+  config,
+  Icon,
+  Icons,
+  Input,
+  Line,
+  Menu,
+  MenuItem,
+  PopOut,
+  RectCords,
+  Scroll,
+  Text,
+  toRem,
+} from 'folds';
+import { isKeyHotkey } from 'is-hotkey';
+import FocusTrap from 'focus-trap-react';
+import React, {
+  ChangeEventHandler,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  useMemo,
+  useState,
+} from 'react';
+import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../utils/matrix';
+import { useDirectUsers } from '../../hooks/useDirectUsers';
+import { SettingTile } from '../setting-tile';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { stopPropagation } from '../../utils/keyboard';
+import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
+import { findAndReplace } from '../../utils/findAndReplace';
+import { highlightText } from '../../styles/CustomHtml.css';
+import { makeHighlightRegex } from '../../plugins/react-custom-html-parser';
+
+export const useAdditionalCreators = (defaultCreators?: string[]) => {
+  const mx = useMatrixClient();
+  const [additionalCreators, setAdditionalCreators] = useState<string[]>(
+    () => defaultCreators?.filter((id) => id !== mx.getSafeUserId()) ?? []
+  );
+
+  const addAdditionalCreator = (userId: string) => {
+    if (userId === mx.getSafeUserId()) return;
+
+    setAdditionalCreators((creators) => {
+      const creatorsSet = new Set(creators);
+      creatorsSet.add(userId);
+      return Array.from(creatorsSet);
+    });
+  };
+
+  const removeAdditionalCreator = (userId: string) => {
+    setAdditionalCreators((creators) => {
+      const creatorsSet = new Set(creators);
+      creatorsSet.delete(userId);
+      return Array.from(creatorsSet);
+    });
+  };
+
+  return {
+    additionalCreators,
+    addAdditionalCreator,
+    removeAdditionalCreator,
+  };
+};
+
+const SEARCH_OPTIONS: UseAsyncSearchOptions = {
+  limit: 1000,
+  matchOptions: {
+    contain: true,
+  },
+};
+const getUserIdString = (userId: string) => getMxIdLocalPart(userId) ?? userId;
+
+type AdditionalCreatorInputProps = {
+  additionalCreators: string[];
+  onSelect: (userId: string) => void;
+  onRemove: (userId: string) => void;
+  disabled?: boolean;
+};
+export function AdditionalCreatorInput({
+  additionalCreators,
+  onSelect,
+  onRemove,
+  disabled,
+}: AdditionalCreatorInputProps) {
+  const mx = useMatrixClient();
+  const [menuCords, setMenuCords] = useState<RectCords>();
+  const directUsers = useDirectUsers();
+
+  const [validUserId, setValidUserId] = useState<string>();
+  const filteredUsers = useMemo(
+    () => directUsers.filter((userId) => !additionalCreators.includes(userId)),
+    [directUsers, additionalCreators]
+  );
+  const [result, search, resetSearch] = useAsyncSearch(
+    filteredUsers,
+    getUserIdString,
+    SEARCH_OPTIONS
+  );
+  const queryHighlighRegex = result?.query ? makeHighlightRegex([result.query]) : undefined;
+
+  const suggestionUsers = result
+    ? result.items
+    : filteredUsers.sort((a, b) => (a.toLocaleLowerCase() >= b.toLocaleLowerCase() ? 1 : -1));
+
+  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuCords(evt.currentTarget.getBoundingClientRect());
+  };
+  const handleCloseMenu = () => {
+    setMenuCords(undefined);
+    setValidUserId(undefined);
+    resetSearch();
+  };
+
+  const handleCreatorChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
+    const creatorInput = evt.currentTarget;
+    const creator = creatorInput.value.trim();
+    if (isUserId(creator)) {
+      setValidUserId(creator);
+    } else {
+      setValidUserId(undefined);
+      const term =
+        getMxIdLocalPart(creator) ?? (creator.startsWith('@') ? creator.slice(1) : creator);
+      if (term) {
+        search(term);
+      } else {
+        resetSearch();
+      }
+    }
+  };
+
+  const handleSelectUserId = (userId?: string) => {
+    if (userId && isUserId(userId)) {
+      onSelect(userId);
+      handleCloseMenu();
+    }
+  };
+
+  const handleCreatorKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
+    if (isKeyHotkey('enter', evt)) {
+      evt.preventDefault();
+      const creator = evt.currentTarget.value.trim();
+      handleSelectUserId(isUserId(creator) ? creator : suggestionUsers[0]);
+    }
+  };
+
+  const handleEnterClick = () => {
+    handleSelectUserId(validUserId);
+  };
+
+  return (
+    <SettingTile
+      title="Founders"
+      description="Special privileged users can be assigned during creation. These users have elevated control and can only be modified during a upgrade."
+    >
+      <Box shrink="No" direction="Column" gap="100">
+        <Box gap="200" wrap="Wrap">
+          <Chip type="button" variant="Primary" radii="Pill" outlined>
+            <Text size="B300">{mx.getSafeUserId()}</Text>
+          </Chip>
+          {additionalCreators.map((creator) => (
+            <Chip
+              type="button"
+              key={creator}
+              variant="Secondary"
+              radii="Pill"
+              after={<Icon size="50" src={Icons.Cross} />}
+              onClick={() => onRemove(creator)}
+              disabled={disabled}
+            >
+              <Text size="B300">{creator}</Text>
+            </Chip>
+          ))}
+          <PopOut
+            anchor={menuCords}
+            position="Bottom"
+            align="Center"
+            content={
+              <FocusTrap
+                focusTrapOptions={{
+                  onDeactivate: handleCloseMenu,
+                  clickOutsideDeactivates: true,
+                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                  escapeDeactivates: stopPropagation,
+                }}
+              >
+                <Menu
+                  style={{
+                    width: '100vw',
+                    maxWidth: toRem(300),
+                    height: toRem(250),
+                    display: 'flex',
+                  }}
+                >
+                  <Box grow="Yes" direction="Column">
+                    <Box shrink="No" gap="100" style={{ padding: config.space.S100 }}>
+                      <Box grow="Yes" direction="Column" gap="100">
+                        <Input
+                          size="400"
+                          variant="Background"
+                          radii="300"
+                          outlined
+                          placeholder="@john:server"
+                          onChange={handleCreatorChange}
+                          onKeyDown={handleCreatorKeyDown}
+                        />
+                      </Box>
+                      <Button
+                        type="button"
+                        variant="Success"
+                        radii="300"
+                        onClick={handleEnterClick}
+                        disabled={!validUserId}
+                      >
+                        <Text size="B400">Enter</Text>
+                      </Button>
+                    </Box>
+                    <Line size="300" />
+                    <Box grow="Yes" direction="Column">
+                      {!validUserId && suggestionUsers.length > 0 ? (
+                        <Scroll size="300" hideTrack>
+                          <Box
+                            grow="Yes"
+                            direction="Column"
+                            gap="100"
+                            style={{ padding: config.space.S200, paddingRight: 0 }}
+                          >
+                            {suggestionUsers.map((userId) => (
+                              <MenuItem
+                                key={userId}
+                                size="300"
+                                variant="Surface"
+                                radii="300"
+                                onClick={() => handleSelectUserId(userId)}
+                                after={
+                                  <Text size="T200" truncate>
+                                    {getMxIdServer(userId)}
+                                  </Text>
+                                }
+                              >
+                                <Box grow="Yes">
+                                  <Text size="T200" truncate>
+                                    <b>
+                                      {queryHighlighRegex
+                                        ? findAndReplace(
+                                            getMxIdLocalPart(userId) ?? userId,
+                                            queryHighlighRegex,
+                                            (match, pushIndex) => (
+                                              <span
+                                                key={`highlight-${pushIndex}`}
+                                                className={highlightText}
+                                              >
+                                                {match[0]}
+                                              </span>
+                                            ),
+                                            (txt) => txt
+                                          )
+                                        : getMxIdLocalPart(userId)}
+                                    </b>
+                                  </Text>
+                                </Box>
+                              </MenuItem>
+                            ))}
+                          </Box>
+                        </Scroll>
+                      ) : (
+                        <Box
+                          grow="Yes"
+                          alignItems="Center"
+                          justifyContent="Center"
+                          direction="Column"
+                          gap="100"
+                        >
+                          <Text size="H6" align="Center">
+                            No Suggestions
+                          </Text>
+                          <Text size="T200" align="Center">
+                            Please provide the user ID and hit Enter.
+                          </Text>
+                        </Box>
+                      )}
+                    </Box>
+                  </Box>
+                </Menu>
+              </FocusTrap>
+            }
+          >
+            <Chip
+              type="button"
+              variant="Secondary"
+              radii="Pill"
+              onClick={handleOpenMenu}
+              aria-pressed={!!menuCords}
+              disabled={disabled}
+            >
+              <Icon size="50" src={Icons.Plus} />
+            </Chip>
+          </PopOut>
+        </Box>
+      </Box>
+    </SettingTile>
+  );
+}

src/app/components/create-room/CreateRoomAliasInput.tsx

@@ -0,0 +1,118 @@
+import React, {
+  FormEventHandler,
+  KeyboardEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { MatrixError } from 'matrix-js-sdk';
+import { Box, color, Icon, Icons, Input, Spinner, Text, toRem } from 'folds';
+import { isKeyHotkey } from 'is-hotkey';
+import { getMxIdServer } from '../../utils/matrix';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { replaceSpaceWithDash } from '../../utils/common';
+import { AsyncState, AsyncStatus, useAsync } from '../../hooks/useAsyncCallback';
+import { useDebounce } from '../../hooks/useDebounce';
+
+export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) {
+  const mx = useMatrixClient();
+  const aliasInputRef = useRef<HTMLInputElement>(null);
+  const [aliasAvail, setAliasAvail] = useState<AsyncState<boolean, Error>>({
+    status: AsyncStatus.Idle,
+  });
+
+  useEffect(() => {
+    if (aliasAvail.status === AsyncStatus.Success && aliasInputRef.current?.value === '') {
+      setAliasAvail({ status: AsyncStatus.Idle });
+    }
+  }, [aliasAvail]);
+
+  const checkAliasAvail = useAsync(
+    useCallback(
+      async (aliasLocalPart: string) => {
+        const roomAlias = `#${aliasLocalPart}:${getMxIdServer(mx.getSafeUserId())}`;
+        try {
+          const result = await mx.getRoomIdForAlias(roomAlias);
+          return typeof result.room_id !== 'string';
+        } catch (e) {
+          if (e instanceof MatrixError && e.httpStatus === 404) {
+            return true;
+          }
+          throw e;
+        }
+      },
+      [mx]
+    ),
+    setAliasAvail
+  );
+  const aliasAvailable: boolean | undefined =
+    aliasAvail.status === AsyncStatus.Success ? aliasAvail.data : undefined;
+
+  const debounceCheckAliasAvail = useDebounce(checkAliasAvail, { wait: 500 });
+
+  const handleAliasChange: FormEventHandler<HTMLInputElement> = (evt) => {
+    const aliasInput = evt.currentTarget;
+    const aliasLocalPart = replaceSpaceWithDash(aliasInput.value);
+    if (aliasLocalPart) {
+      aliasInput.value = aliasLocalPart;
+      debounceCheckAliasAvail(aliasLocalPart);
+    } else {
+      setAliasAvail({ status: AsyncStatus.Idle });
+    }
+  };
+
+  const handleAliasKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
+    if (isKeyHotkey('enter', evt)) {
+      evt.preventDefault();
+
+      const aliasInput = evt.currentTarget;
+      const aliasLocalPart = replaceSpaceWithDash(aliasInput.value);
+      if (aliasLocalPart) {
+        checkAliasAvail(aliasLocalPart);
+      } else {
+        setAliasAvail({ status: AsyncStatus.Idle });
+      }
+    }
+  };
+
+  return (
+    <Box shrink="No" direction="Column" gap="100">
+      <Text size="L400">Address (Optional)</Text>
+      <Text size="T200" priority="300">
+        Pick an unique address to make it discoverable.
+      </Text>
+      <Input
+        ref={aliasInputRef}
+        onChange={handleAliasChange}
+        before={
+          aliasAvail.status === AsyncStatus.Loading ? (
+            <Spinner size="100" variant="Secondary" />
+          ) : (
+            <Icon size="100" src={Icons.Hash} />
+          )
+        }
+        after={
+          <Text style={{ maxWidth: toRem(150) }} truncate>
+            :{getMxIdServer(mx.getSafeUserId())}
+          </Text>
+        }
+        onKeyDown={handleAliasKeyDown}
+        name="aliasInput"
+        size="500"
+        variant={aliasAvailable === true ? 'Success' : 'SurfaceVariant'}
+        radii="400"
+        autoComplete="off"
+        disabled={disabled}
+      />
+      {aliasAvailable === false && (
+        <Box style={{ color: color.Critical.Main }} alignItems="Center" gap="100">
+          <Icon src={Icons.Warning} filled size="50" />
+          <Text size="T200">
+            <b>This address is already taken. Please select a different one.</b>
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

src/app/components/create-room/CreateRoomKindSelector.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Box, Text, Icon, Icons, config, IconSrc } from 'folds';
+import { SequenceCard } from '../sequence-card';
+import { SettingTile } from '../setting-tile';
+
+export enum CreateRoomKind {
+  Private = 'private',
+  Restricted = 'restricted',
+  Public = 'public',
+}
+type CreateRoomKindSelectorProps = {
+  value?: CreateRoomKind;
+  onSelect: (value: CreateRoomKind) => void;
+  canRestrict?: boolean;
+  disabled?: boolean;
+  getIcon: (kind: CreateRoomKind) => IconSrc;
+};
+export function CreateRoomKindSelector({
+  value,
+  onSelect,
+  canRestrict,
+  disabled,
+  getIcon,
+}: CreateRoomKindSelectorProps) {
+  return (
+    <Box shrink="No" direction="Column" gap="100">
+      {canRestrict && (
+        <SequenceCard
+          style={{ padding: config.space.S300 }}
+          variant={value === CreateRoomKind.Restricted ? 'Primary' : 'SurfaceVariant'}
+          direction="Column"
+          gap="100"
+          as="button"
+          type="button"
+          aria-pressed={value === CreateRoomKind.Restricted}
+          onClick={() => onSelect(CreateRoomKind.Restricted)}
+          disabled={disabled}
+        >
+          <SettingTile
+            before={<Icon size="400" src={getIcon(CreateRoomKind.Restricted)} />}
+            after={value === CreateRoomKind.Restricted && <Icon src={Icons.Check} />}
+          >
+            <Text size="H6">Restricted</Text>
+            <Text size="T300" priority="300">
+              Only member of parent space can join.
+            </Text>
+          </SettingTile>
+        </SequenceCard>
+      )}
+      <SequenceCard
+        style={{ padding: config.space.S300 }}
+        variant={value === CreateRoomKind.Private ? 'Primary' : 'SurfaceVariant'}
+        direction="Column"
+        gap="100"
+        as="button"
+        type="button"
+        aria-pressed={value === CreateRoomKind.Private}
+        onClick={() => onSelect(CreateRoomKind.Private)}
+        disabled={disabled}
+      >
+        <SettingTile
+          before={<Icon size="400" src={getIcon(CreateRoomKind.Private)} />}
+          after={value === CreateRoomKind.Private && <Icon src={Icons.Check} />}
+        >
+          <Text size="H6">Private</Text>
+          <Text size="T300" priority="300">
+            Only people with invite can join.
+          </Text>
+        </SettingTile>
+      </SequenceCard>
+      <SequenceCard
+        style={{ padding: config.space.S300 }}
+        variant={value === CreateRoomKind.Public ? 'Primary' : 'SurfaceVariant'}
+        direction="Column"
+        gap="100"
+        as="button"
+        type="button"
+        aria-pressed={value === CreateRoomKind.Public}
+        onClick={() => onSelect(CreateRoomKind.Public)}
+        disabled={disabled}
+      >
+        <SettingTile
+          before={<Icon size="400" src={getIcon(CreateRoomKind.Public)} />}
+          after={value === CreateRoomKind.Public && <Icon src={Icons.Check} />}
+        >
+          <Text size="H6">Public</Text>
+          <Text size="T300" priority="300">
+            Anyone with the address can join.
+          </Text>
+        </SettingTile>
+      </SequenceCard>
+    </Box>
+  );
+}

src/app/components/create-room/RoomVersionSelector.tsx

@@ -0,0 +1,117 @@
+import React, { MouseEventHandler, useState } from 'react';
+import {
+  Box,
+  Button,
+  Chip,
+  config,
+  Icon,
+  Icons,
+  Menu,
+  PopOut,
+  RectCords,
+  Text,
+  toRem,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { SettingTile } from '../setting-tile';
+import { SequenceCard } from '../sequence-card';
+import { stopPropagation } from '../../utils/keyboard';
+
+export function RoomVersionSelector({
+  versions,
+  value,
+  onChange,
+  disabled,
+}: {
+  versions: string[];
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}) {
+  const [menuCords, setMenuCords] = useState<RectCords>();
+
+  const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const handleSelect = (version: string) => {
+    setMenuCords(undefined);
+    onChange(version);
+  };
+
+  return (
+    <SequenceCard
+      style={{ padding: config.space.S300 }}
+      variant="SurfaceVariant"
+      direction="Column"
+      gap="500"
+    >
+      <SettingTile
+        title="Version"
+        after={
+          <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="200"
+                    style={{ padding: config.space.S200, maxWidth: toRem(300) }}
+                  >
+                    <Text size="L400">Versions</Text>
+                    <Box wrap="Wrap" gap="100">
+                      {versions.map((version) => (
+                        <Chip
+                          key={version}
+                          variant={value === version ? 'Primary' : 'SurfaceVariant'}
+                          aria-pressed={value === version}
+                          outlined={value === version}
+                          radii="300"
+                          onClick={() => handleSelect(version)}
+                          type="button"
+                        >
+                          <Text truncate size="T300">
+                            {version}
+                          </Text>
+                        </Chip>
+                      ))}
+                    </Box>
+                  </Box>
+                </Menu>
+              </FocusTrap>
+            }
+          >
+            <Button
+              type="button"
+              onClick={handleMenu}
+              size="300"
+              variant="Secondary"
+              fill="Soft"
+              radii="300"
+              aria-pressed={!!menuCords}
+              before={<Icon size="50" src={menuCords ? Icons.ChevronTop : Icons.ChevronBottom} />}
+              disabled={disabled}
+            >
+              <Text size="B300">{value}</Text>
+            </Button>
+          </PopOut>
+        }
+      />
+    </SequenceCard>
+  );
+}

src/app/components/create-room/index.ts

@@ -0,0 +1,5 @@
+export * from './CreateRoomKindSelector';
+export * from './CreateRoomAliasInput';
+export * from './RoomVersionSelector';
+export * from './utils';
+export * from './AdditionalCreatorInput';

src/app/components/create-room/utils.ts

@@ -0,0 +1,140 @@
+import {
+  ICreateRoomOpts,
+  ICreateRoomStateEvent,
+  JoinRule,
+  MatrixClient,
+  RestrictedAllowType,
+  Room,
+} from 'matrix-js-sdk';
+import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
+import { CreateRoomKind } from './CreateRoomKindSelector';
+import { RoomType, StateEvent } from '../../../types/matrix/room';
+import { getViaServers } from '../../plugins/via-servers';
+import { getMxIdServer } from '../../utils/matrix';
+
+export const createRoomCreationContent = (
+  type: RoomType | undefined,
+  allowFederation: boolean,
+  additionalCreators: string[] | undefined
+): object => {
+  const content: Record<string, any> = {};
+  if (typeof type === 'string') {
+    content.type = type;
+  }
+  if (allowFederation === false) {
+    content['m.federate'] = false;
+  }
+  if (Array.isArray(additionalCreators)) {
+    content.additional_creators = additionalCreators;
+  }
+
+  return content;
+};
+
+export const createRoomJoinRulesState = (
+  kind: CreateRoomKind,
+  parent: Room | undefined,
+  knock: boolean
+) => {
+  let content: RoomJoinRulesEventContent = {
+    join_rule: knock ? JoinRule.Knock : JoinRule.Invite,
+  };
+
+  if (kind === CreateRoomKind.Public) {
+    content = {
+      join_rule: JoinRule.Public,
+    };
+  }
+
+  if (kind === CreateRoomKind.Restricted && parent) {
+    content = {
+      join_rule: knock ? ('knock_restricted' as JoinRule) : JoinRule.Restricted,
+      allow: [
+        {
+          type: RestrictedAllowType.RoomMembership,
+          room_id: parent.roomId,
+        },
+      ],
+    };
+  }
+
+  return {
+    type: StateEvent.RoomJoinRules,
+    state_key: '',
+    content,
+  };
+};
+
+export const createRoomParentState = (parent: Room) => ({
+  type: StateEvent.SpaceParent,
+  state_key: parent.roomId,
+  content: {
+    canonical: true,
+    via: getViaServers(parent),
+  },
+});
+
+export const createRoomEncryptionState = () => ({
+  type: 'm.room.encryption',
+  state_key: '',
+  content: {
+    algorithm: 'm.megolm.v1.aes-sha2',
+  },
+});
+
+export type CreateRoomData = {
+  version: string;
+  type?: RoomType;
+  parent?: Room;
+  kind: CreateRoomKind;
+  name: string;
+  topic?: string;
+  aliasLocalPart?: string;
+  encryption?: boolean;
+  knock: boolean;
+  allowFederation: boolean;
+  additionalCreators?: string[];
+};
+export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promise<string> => {
+  const initialState: ICreateRoomStateEvent[] = [];
+
+  if (data.encryption) {
+    initialState.push(createRoomEncryptionState());
+  }
+
+  if (data.parent) {
+    initialState.push(createRoomParentState(data.parent));
+  }
+
+  initialState.push(createRoomJoinRulesState(data.kind, data.parent, data.knock));
+
+  const options: ICreateRoomOpts = {
+    room_version: data.version,
+    name: data.name,
+    topic: data.topic,
+    room_alias_name: data.aliasLocalPart,
+    creation_content: createRoomCreationContent(
+      data.type,
+      data.allowFederation,
+      data.additionalCreators
+    ),
+    initial_state: initialState,
+  };
+
+  const result = await mx.createRoom(options);
+
+  if (data.parent) {
+    await mx.sendStateEvent(
+      data.parent.roomId,
+      StateEvent.SpaceChild as any,
+      {
+        auto_join: false,
+        suggested: false,
+        via: [getMxIdServer(mx.getUserId() ?? '') ?? ''],
+      },
+      result.room_id
+    );
+  }
+
+  return result.room_id;
+};

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

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

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

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

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

@@ -41,21 +41,21 @@ export const EditorTextarea = style([
   },
 ]);
 
-export const EditorPlaceholder = style([
+export const EditorPlaceholderContainer = style([
   DefaultReset,
   {
-    position: 'absolute',
-    zIndex: 1,
-    width: '100%',
     opacity: config.opacity.Placeholder,
     pointerEvents: 'none',
     userSelect: 'none',
+  },
+]);
 
-    selectors: {
-      '&:not(:first-child)': {
-        display: 'none',
-      },
-    },
+export const EditorPlaceholderTextVisual = style([
+  DefaultReset,
+  {
+    display: 'block',
+    paddingTop: toRem(13),
+    paddingLeft: toRem(1),
   },
 ]);
 

src/app/components/editor/Editor.tsx

@@ -106,22 +106,17 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
       [editor, onKeyDown]
     );
 
-    const renderPlaceholder = useCallback(({ attributes, children }: RenderPlaceholderProps) => {
-      // drop style attribute as we use our custom placeholder css.
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { style, ...props } = attributes;
-      return (
-        <Text
-          as="span"
-          {...props}
-          className={css.EditorPlaceholder}
-          contentEditable={false}
-          truncate
-        >
+    const renderPlaceholder = useCallback(
+      ({ attributes, children }: RenderPlaceholderProps) => (
+        <span {...attributes} className={css.EditorPlaceholderContainer}>
+          {/* Inner component to style the actual text position and appearance */}
+          <Text as="span" className={css.EditorPlaceholderTextVisual} truncate>
             {children}
           </Text>
+        </span>
+      ),
+      []
     );
-    }, []);
 
     return (
       <div className={css.Editor} ref={ref}>

src/app/components/editor/Elements.tsx

@@ -157,7 +157,7 @@ export function RenderElement({ attributes, element, children }: RenderElementPr
         <Text as="pre" className={css.CodeBlock} {...attributes}>
           <Scroll
             direction="Horizontal"
-            variant="Secondary"
+            variant="SurfaceVariant"
             size="300"
             visibility="Hover"
             hideTrack

src/app/components/editor/Toolbar.tsx

@@ -339,7 +339,7 @@ export function Toolbar() {
           <Box className={css.MarkdownBtnBox} shrink="No" grow="Yes" justifyContent="End">
             <TooltipProvider
               align="End"
-              tooltip={<BtnTooltip text="Toggle Markdown" />}
+              tooltip={<BtnTooltip text={isMarkdown ? 'Disable Markdown' : 'Enable Markdown'} />}
               delay={500}
             >
               {(triggerRef) => (

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

@@ -9,7 +9,7 @@ import { getDirectRoomAvatarUrl } from '../../../utils/room';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AutocompleteQuery } from './autocompleteQuery';
 import { AutocompleteMenu } from './AutocompleteMenu';
-import { getMxIdServer, validMxId } from '../../../utils/matrix';
+import { getMxIdServer, isRoomAlias } from '../../../utils/matrix';
 import { UseAsyncSearchOptions, useAsyncSearch } from '../../../hooks/useAsyncSearch';
 import { onTabPress } from '../../../utils/keyboard';
 import { useKeyDown } from '../../../hooks/useKeyDown';
@@ -22,7 +22,7 @@ import { getViaServers } from '../../../plugins/via-servers';
 type MentionAutoCompleteHandler = (roomAliasOrId: string, name: string) => void;
 
 const roomAliasFromQueryText = (mx: MatrixClient, text: string) =>
-  validMxId(`#${text}`)
+  isRoomAlias(`#${text}`)
     ? `#${text}`
     : `#${text}${text.endsWith(':') ? '' : ':'}${getMxIdServer(mx.getUserId() ?? '')}`;
 

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

@@ -15,7 +15,7 @@ import {
 import { onTabPress } from '../../../utils/keyboard';
 import { createMentionElement, moveCursor, replaceWithElement } from '../utils';
 import { useKeyDown } from '../../../hooks/useKeyDown';
-import { getMxIdLocalPart, getMxIdServer, validMxId } from '../../../utils/matrix';
+import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../../utils/matrix';
 import { getMemberDisplayName, getMemberSearchStr } from '../../../utils/room';
 import { UserAvatar } from '../../user-avatar';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
@@ -24,7 +24,7 @@ import { Membership } from '../../../../types/matrix/room';
 type MentionAutoCompleteHandler = (userId: string, name: string) => void;
 
 const userIdFromQueryText = (mx: MatrixClient, text: string) =>
-  validMxId(`@${text}`)
+  isUserId(`@${text}`)
     ? `@${text}`
     : `@${text}${text.endsWith(':') ? '' : ':'}${getMxIdServer(mx.getUserId() ?? '')}`;
 

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

@@ -654,6 +654,7 @@ export function EmojiBoard({
   onCustomEmojiSelect,
   onStickerSelect,
   allowTextCustomEmoji,
+  addToRecentEmoji = true,
 }: {
   tab?: EmojiBoardTab;
   onTabChange?: (tab: EmojiBoardTab) => void;
@@ -664,6 +665,7 @@ 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;
@@ -735,7 +737,9 @@ export function EmojiBoard({
     if (emojiInfo.type === EmojiType.Emoji) {
       onEmojiSelect?.(emojiInfo.data, emojiInfo.shortcode);
       if (!evt.altKey && !evt.shiftKey) {
+        if (addToRecentEmoji) {
           addRecentEmoji(mx, emojiInfo.data);
+        }
         requestClose();
       }
     }

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

@@ -19,9 +19,11 @@ import { getMemberDisplayName } from '../../utils/room';
 import { getMxIdLocalPart } from '../../utils/matrix';
 import * as css from './EventReaders.css';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { openProfileViewer } from '../../../client/action/navigation';
 import { UserAvatar } from '../user-avatar';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
+import { useSpaceOptionally } from '../../hooks/useSpace';
+import { getMouseEventCords } from '../../utils/dom';
 
 export type EventReadersProps = {
   room: Room;
@@ -33,6 +35,8 @@ export const EventReaders = as<'div', EventReadersProps>(
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
     const latestEventReaders = useRoomEventReaders(room, eventId);
+    const openProfile = useOpenUserRoomProfile();
+    const space = useSpaceOptionally();
 
     const getName = (userId: string) =>
       getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
@@ -57,19 +61,32 @@ export const EventReaders = as<'div', EventReadersProps>(
             <Box className={css.Content} direction="Column">
               {latestEventReaders.map((readerId) => {
                 const name = getName(readerId);
-                const avatarMxcUrl = room
-                  .getMember(readerId)
-                  ?.getMxcAvatarUrl();
-                const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication) : undefined;
+                const avatarMxcUrl = room.getMember(readerId)?.getMxcAvatarUrl();
+                const avatarUrl = avatarMxcUrl
+                  ? mx.mxcUrlToHttp(
+                      avatarMxcUrl,
+                      100,
+                      100,
+                      'crop',
+                      undefined,
+                      false,
+                      useAuthentication
+                    )
+                  : undefined;
 
                 return (
                   <MenuItem
                     key={readerId}
                     style={{ padding: `0 ${config.space.S200}` }}
                     radii="400"
-                    onClick={() => {
-                      requestClose();
-                      openProfileViewer(readerId, room.roomId);
+                    onClick={(event) => {
+                      openProfile(
+                        room.roomId,
+                        space?.roomId,
+                        readerId,
+                        getMouseEventCords(event.nativeEvent),
+                        'Bottom'
+                      );
                     }}
                     before={
                       <Avatar size="200">

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

@@ -1,12 +1,14 @@
 import React, { useCallback, useMemo } from 'react';
 import { Room } from 'matrix-js-sdk';
-import { usePowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
+import { usePowerLevels } 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';
+import { useRoomPermissions } from '../../hooks/useRoomPermissions';
+import { useRoomCreators } from '../../hooks/useRoomCreators';
 
 type RoomImagePackProps = {
   room: Room;
@@ -17,9 +19,10 @@ export function RoomImagePack({ room, stateKey }: RoomImagePackProps) {
   const mx = useMatrixClient();
   const userId = mx.getUserId()!;
   const powerLevels = usePowerLevels(room);
+  const creators = useRoomCreators(room);
 
-  const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
-  const canEditImagePack = canSendStateEvent(StateEvent.PoniesRoomEmotes, getPowerLevel(userId));
+  const permissions = useRoomPermissions(creators, powerLevels);
+  const canEditImagePack = permissions.stateEvent(StateEvent.PoniesRoomEmotes, userId);
 
   const fallbackPack = useMemo(() => {
     const fakePackId = randomStr(4);

src/app/components/join-address-prompt/JoinAddressPrompt.tsx

@@ -0,0 +1,131 @@
+import React, { FormEventHandler, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+  Dialog,
+  Overlay,
+  OverlayCenter,
+  OverlayBackdrop,
+  Header,
+  config,
+  Box,
+  Text,
+  IconButton,
+  Icon,
+  Icons,
+  Button,
+  Input,
+  color,
+} from 'folds';
+import { stopPropagation } from '../../utils/keyboard';
+import { isRoomAlias, isRoomId } from '../../utils/matrix';
+import { parseMatrixToRoom, parseMatrixToRoomEvent, testMatrixTo } from '../../plugins/matrix-to';
+import { tryDecodeURIComponent } from '../../utils/dom';
+
+type JoinAddressProps = {
+  onOpen: (roomIdOrAlias: string, via?: string[], eventId?: string) => void;
+  onCancel: () => void;
+};
+export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
+  const [invalid, setInvalid] = useState(false);
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    setInvalid(false);
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const addressInput = target?.addressInput as HTMLInputElement | undefined;
+    const address = addressInput?.value.trim();
+    if (!address) return;
+
+    if (isRoomId(address) || isRoomAlias(address)) {
+      onOpen(address);
+      return;
+    }
+
+    if (testMatrixTo(address)) {
+      const decodedAddress = tryDecodeURIComponent(address);
+      const toRoom = parseMatrixToRoom(decodedAddress);
+      if (toRoom) {
+        onOpen(toRoom.roomIdOrAlias, toRoom.viaServers);
+        return;
+      }
+
+      const toEvent = parseMatrixToRoomEvent(decodedAddress);
+      if (toEvent) {
+        onOpen(toEvent.roomIdOrAlias, toEvent.viaServers, toEvent.eventId);
+        return;
+      }
+    }
+
+    setInvalid(true);
+  };
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: onCancel,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Dialog variant="Surface">
+            <Header
+              style={{
+                padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+              }}
+              variant="Surface"
+              size="500"
+            >
+              <Box grow="Yes">
+                <Text size="H4">Join with Address</Text>
+              </Box>
+              <IconButton size="300" onClick={onCancel} radii="300">
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Header>
+            <Box
+              as="form"
+              onSubmit={handleSubmit}
+              style={{ padding: config.space.S400, paddingTop: 0 }}
+              direction="Column"
+              gap="400"
+            >
+              <Box direction="Column" gap="200">
+                <Text priority="400" size="T300">
+                  Enter public address to join the community. Addresses looks like:
+                </Text>
+                <Text as="ul" size="T200" priority="300" style={{ paddingLeft: config.space.S400 }}>
+                  <li>#community:server</li>
+                  <li>https://matrix.to/#/#community:server</li>
+                  <li>https://matrix.to/#/!xYzAj?via=server</li>
+                </Text>
+              </Box>
+              <Box direction="Column" gap="100">
+                <Text size="L400">Address</Text>
+                <Input
+                  size="500"
+                  autoFocus
+                  name="addressInput"
+                  variant="Background"
+                  placeholder="#community:server"
+                  required
+                />
+                {invalid && (
+                  <Text size="T200" style={{ color: color.Critical.Main }}>
+                    <b>Invalid Address</b>
+                  </Text>
+                )}
+              </Box>
+              <Button type="submit" variant="Primary">
+                <Text size="B400">Open</Text>
+              </Button>
+            </Box>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}

src/app/components/join-address-prompt/index.ts

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

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

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

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

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

@@ -0,0 +1,32 @@
+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,22 +1,81 @@
-import { Badge, Box, Text, as, toRem } from 'folds';
-import React from 'react';
+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 { 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, ...props }, ref) => (
+export const FileHeader = as<'div', FileHeaderProps>(({ body, mimeType, after, ...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}
       </Text>
     </Box>
+    {after}
+  </Box>
 ));

src/app/components/message/MsgTypeRenderers.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { CSSProperties, 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';
@@ -28,7 +28,7 @@ import {
 import { FALLBACK_MIMETYPE, getBlobSafeMimeType } from '../../utils/mimeTypes';
 import { parseGeoUri, scaleYDimension } from '../../utils/common';
 import { Attachment, AttachmentBox, AttachmentContent, AttachmentHeader } from './attachment';
-import { FileHeader } from './FileHeader';
+import { FileHeader, FileDownloadButton } from './FileHeader';
 
 export function MBadEncrypted() {
   return (
@@ -74,8 +74,9 @@ type MTextProps = {
   content: Record<string, unknown>;
   renderBody: (props: RenderBodyProps) => ReactNode;
   renderUrlsPreview?: (urls: string[]) => ReactNode;
+  style?: CSSProperties;
 };
-export function MText({ edited, content, renderBody, renderUrlsPreview }: MTextProps) {
+export function MText({ edited, content, renderBody, renderUrlsPreview, style }: MTextProps) {
   const { body, formatted_body: customBody } = content;
 
   if (typeof body !== 'string') return <BrokenContent />;
@@ -88,6 +89,7 @@ export function MText({ edited, content, renderBody, renderUrlsPreview }: MTextP
       <MessageTextBody
         preWrap={typeof customBody !== 'string'}
         jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
+        style={style}
       >
         {renderBody({
           body: trimmedBody,
@@ -243,8 +245,24 @@ 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),
@@ -286,10 +304,22 @@ export function MAudio({ content, renderAsFile, renderAudioContent, outlined }:
     return <BrokenContent />;
   }
 
+  const filename = content.filename ?? content.body ?? 'Audio';
   return (
     <Attachment outlined={outlined}>
       <AttachmentHeader>
-        <FileHeader body={content.filename ?? content.body ?? 'Audio'} mimeType={safeMimeType} />
+        <FileHeader
+          body={filename}
+          mimeType={safeMimeType}
+          after={
+            <FileDownloadButton
+              filename={filename}
+              url={mxcUrl}
+              mimeType={safeMimeType}
+              encInfo={content.file}
+            />
+          }
+        />
       </AttachmentHeader>
       <AttachmentBox>
         <AttachmentContent>

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

@@ -7,7 +7,6 @@ export const ReplyBend = style({
 
 export const ThreadIndicator = style({
   opacity: config.opacity.P300,
-  gap: toRem(2),
 
   selectors: {
     'button&': {
@@ -19,11 +18,6 @@ export const ThreadIndicator = style({
   },
 });
 
-export const ThreadIndicatorIcon = style({
-  width: toRem(14),
-  height: toRem(14),
-});
-
 export const Reply = style({
   marginBottom: toRem(1),
   minWidth: 0,

src/app/components/message/Reply.tsx

@@ -2,7 +2,6 @@ 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 classNames from 'classnames';
-import colorMXID from '../../../util/colorMXID';
 import { getMemberDisplayName, trimReplyFromBody } from '../../utils/room';
 import { getMxIdLocalPart } from '../../utils/matrix';
 import { LinePlaceholder } from './placeholder';
@@ -11,6 +10,8 @@ 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 colorMXID from '../../../util/colorMXID';
+import { GetMemberPowerTag } from '../../hooks/useMemberPowerTag';
 
 type ReplyLayoutProps = {
   userColor?: string;
@@ -37,9 +38,16 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>(
 );
 
 export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
-  <Box className={css.ThreadIndicator} alignItems="Center" {...props} ref={ref}>
-    <Icon className={css.ThreadIndicatorIcon} src={Icons.Message} />
-    <Text size="T200">Threaded reply</Text>
+  <Box
+    shrink="No"
+    className={css.ThreadIndicator}
+    alignItems="Center"
+    gap="100"
+    {...props}
+    ref={ref}
+  >
+    <Icon size="50" src={Icons.Thread} />
+    <Text size="L400">Thread</Text>
   </Box>
 ));
 
@@ -49,10 +57,26 @@ type ReplyProps = {
   replyEventId: string;
   threadRootId?: string | undefined;
   onClick?: MouseEventHandler | undefined;
+  getMemberPowerTag?: GetMemberPowerTag;
+  accessibleTagColors?: Map<string, string>;
+  legacyUsernameColor?: boolean;
 };
 
 export const Reply = as<'div', ReplyProps>(
-  ({ room, timelineSet, replyEventId, threadRootId, onClick, ...props }, ref) => {
+  (
+    {
+      room,
+      timelineSet,
+      replyEventId,
+      threadRootId,
+      onClick,
+      getMemberPowerTag,
+      accessibleTagColors,
+      legacyUsernameColor,
+      ...props
+    },
+    ref
+  ) => {
     const placeholderWidth = useMemo(() => randomNumberBetween(40, 400), []);
     const getFromLocalTimeline = useCallback(
       () => timelineSet?.findEventById(replyEventId),
@@ -62,6 +86,10 @@ export const Reply = as<'div', ReplyProps>(
 
     const { body } = replyEvent?.getContent() ?? {};
     const sender = replyEvent?.getSender();
+    const powerTag = sender ? getMemberPowerTag?.(sender) : undefined;
+    const tagColor = powerTag?.color ? accessibleTagColors?.get(powerTag.color) : undefined;
+
+    const usernameColor = legacyUsernameColor ? colorMXID(sender ?? replyEventId) : tagColor;
 
     const fallbackBody = replyEvent?.isRedacted() ? (
       <MessageDeletedContent />
@@ -73,13 +101,13 @@ export const Reply = as<'div', ReplyProps>(
     const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody;
 
     return (
-      <Box direction="Column" alignItems="Start" {...props} ref={ref}>
+      <Box direction="Row" gap="200" alignItems="Center" {...props} ref={ref}>
         {threadRootId && (
           <ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
         )}
         <ReplyLayout
           as="button"
-          userColor={sender ? colorMXID(sender) : undefined}
+          userColor={usernameColor}
           username={
             sender && (
               <Text size="T300" truncate>

src/app/components/message/Time.tsx

@@ -5,19 +5,35 @@ import { timeDayMonYear, timeHourMinute, today, yesterday } from '../../utils/ti
 export type TimeProps = {
   compact?: boolean;
   ts: number;
+  hour24Clock: boolean;
+  dateFormatString: string;
 };
 
+/**
+ * Renders a formatted timestamp, supporting compact and full display modes.
+ *
+ * Displays the time in hour:minute format if the message is from today, yesterday, or if `compact` is true.
+ * For older messages, it shows the date and time.
+ *
+ * @param {number} ts - The timestamp to display.
+ * @param {boolean} [compact=false] - If true, always show only the time.
+ * @param {boolean} hour24Clock - Whether to use 24-hour time format.
+ * @param {string} dateFormatString - Format string for the date part.
+ * @returns {React.ReactElement} A <Text as="time"> element with the formatted date/time.
+ */
 export const Time = as<'span', TimeProps & ComponentProps<typeof Text>>(
-  ({ compact, ts, ...props }, ref) => {
+  ({ compact, hour24Clock, dateFormatString, ts, ...props }, ref) => {
+    const formattedTime = timeHourMinute(ts, hour24Clock);
+
     let time = '';
     if (compact) {
-      time = timeHourMinute(ts);
+      time = formattedTime;
     } else if (today(ts)) {
-      time = timeHourMinute(ts);
+      time = formattedTime;
     } else if (yesterday(ts)) {
-      time = `Yesterday ${timeHourMinute(ts)}`;
+      time = `Yesterday ${formattedTime}`;
     } else {
-      time = `${timeDayMonYear(ts)} ${timeHourMinute(ts)}`;
+      time = `${timeDayMonYear(ts, dateFormatString)} ${formattedTime}`;
     }
 
     return (

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

@@ -30,6 +30,7 @@ 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;
@@ -77,7 +78,7 @@ export const ImageContent = as<'div', ImageContentProps>(
   ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
-    const blurHash = info?.[MATRIX_BLUR_HASH_PROPERTY_NAME];
+    const blurHash = validBlurHash(info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
 
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);

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

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

@@ -16,6 +16,7 @@ export const AbsoluteContainer = style([
     position: 'absolute',
     top: 0,
     left: 0,
+    zIndex: 1,
     width: '100%',
     height: '100%',
   },

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

@@ -24,6 +24,10 @@ 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

@@ -124,7 +124,7 @@ export const AvatarBase = style({
 
   selectors: {
     '&:hover': {
-      transform: `translateY(${toRem(-4)})`,
+      transform: `translateY(${toRem(-2)})`,
     },
   },
 });
@@ -157,6 +157,10 @@ export const Username = style({
   },
 });
 
+export const UsernameBold = style({
+  fontWeight: 550,
+});
+
 export const MessageTextBody = recipe({
   base: {
     wordBreak: 'break-word',

src/app/components/page/Page.tsx

@@ -105,6 +105,20 @@ 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

@@ -92,6 +92,15 @@ 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/power/PowerColorBadge.tsx

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

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

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

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

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

@@ -0,0 +1,90 @@
+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/presence/Presence.tsx

@@ -0,0 +1,80 @@
+import {
+  as,
+  Badge,
+  Box,
+  color,
+  ContainerColor,
+  MainColor,
+  Text,
+  Tooltip,
+  TooltipProvider,
+  toRem,
+} from 'folds';
+import React, { ReactNode, useId } from 'react';
+import * as css from './styles.css';
+import { Presence, usePresenceLabel } from '../../hooks/useUserPresence';
+
+const PresenceToColor: Record<Presence, MainColor> = {
+  [Presence.Online]: 'Success',
+  [Presence.Unavailable]: 'Warning',
+  [Presence.Offline]: 'Secondary',
+};
+
+type PresenceBadgeProps = {
+  presence: Presence;
+  status?: string;
+  size?: '200' | '300' | '400' | '500';
+};
+export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
+  const label = usePresenceLabel();
+  const badgeLabelId = useId();
+
+  return (
+    <TooltipProvider
+      position="Right"
+      align="Center"
+      offset={4}
+      delay={200}
+      tooltip={
+        <Tooltip id={badgeLabelId}>
+          <Box style={{ maxWidth: toRem(250) }} alignItems="Baseline" gap="100">
+            <Text size="L400">{label[presence]}</Text>
+            {status && <Text size="T200">•</Text>}
+            {status && <Text size="T200">{status}</Text>}
+          </Box>
+        </Tooltip>
+      }
+    >
+      {(triggerRef) => (
+        <Badge
+          aria-labelledby={badgeLabelId}
+          ref={triggerRef}
+          size={size}
+          variant={PresenceToColor[presence]}
+          fill={presence === Presence.Offline ? 'Soft' : 'Solid'}
+          radii="Pill"
+        />
+      )}
+    </TooltipProvider>
+  );
+}
+
+type AvatarPresenceProps = {
+  badge: ReactNode;
+  variant?: ContainerColor;
+};
+export const AvatarPresence = as<'div', AvatarPresenceProps>(
+  ({ as: AsAvatarPresence, badge, variant = 'Surface', children, ...props }, ref) => (
+    <Box as={AsAvatarPresence} className={css.AvatarPresence} {...props} ref={ref}>
+      {badge && (
+        <div
+          className={css.AvatarPresenceBadge}
+          style={{ backgroundColor: color[variant].Container }}
+        >
+          {badge}
+        </div>
+      )}
+      {children}
+    </Box>
+  )
+);

src/app/components/presence/index.ts

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

src/app/components/presence/styles.css.ts

@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css';
+import { config } from 'folds';
+
+export const AvatarPresence = style({
+  display: 'flex',
+  position: 'relative',
+  flexShrink: 0,
+});
+
+export const AvatarPresenceBadge = style({
+  position: 'absolute',
+  bottom: 0,
+  right: 0,
+  transform: 'translate(25%, 25%)',
+  zIndex: 1,
+
+  display: 'flex',
+  padding: config.borderWidth.B600,
+  backgroundColor: 'inherit',
+  borderRadius: config.radii.Pill,
+  overflow: 'hidden',
+});

src/app/components/room-intro/RoomIntro.tsx

@@ -15,6 +15,8 @@ import { nameInitials } from '../../utils/common';
 import { useRoomAvatar, useRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
 import { mDirectAtom } from '../../state/mDirectList';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
 
 export type RoomIntroProps = {
   room: Room;
@@ -43,6 +45,8 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
     useCallback(async (roomId: string) => mx.joinRoom(roomId), [mx])
   );
 
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+
   return (
     <Box direction="Column" grow="Yes" gap="500" {...props} ref={ref}>
       <Box>
@@ -67,7 +71,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
             <Text size="T200" priority="300">
               {'Created by '}
               <b>@{creatorName}</b>
-              {` on ${timeDayMonthYear(ts)} ${timeHourMinute(ts)}`}
+              {` on ${timeDayMonthYear(ts)} ${timeHourMinute(ts, hour24Clock)}`}
             </Text>
           )}
         </Box>
@@ -83,7 +87,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
           {typeof prevRoomId === 'string' &&
             (mx.getRoom(prevRoomId)?.getMyMembership() === Membership.Join ? (
               <Button
-                onClick={() => navigateRoom(prevRoomId)}
+                onClick={() => navigateRoom(prevRoomId, createContent?.predecessor?.event_id)}
                 variant="Success"
                 size="300"
                 fill="Soft"

src/app/components/sequence-card/SequenceCard.tsx

@@ -7,12 +7,31 @@ import * as css from './style.css';
 export const SequenceCard = as<
   'div',
   ComponentProps<typeof Box> & ContainerColorVariants & css.SequenceCardVariants
->(({ className, variant, firstChild, lastChild, outlined, ...props }, ref) => (
+>(
+  (
+    {
+      as: AsSequenceCard = 'div',
+      className,
+      variant,
+      radii,
+      firstChild,
+      lastChild,
+      outlined,
+      ...props
+    },
+    ref
+  ) => (
     <Box
-    className={classNames(css.SequenceCard({ outlined }), ContainerColor({ variant }), className)}
+      as={AsSequenceCard}
+      className={classNames(
+        css.SequenceCard({ radii, outlined }),
+        ContainerColor({ variant }),
+        className
+      )}
       data-first-child={firstChild}
       data-last-child={lastChild}
       {...props}
       ref={ref}
     />
-));
+  )
+);

src/app/components/sequence-card/style.css.ts

@@ -3,6 +3,7 @@ import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
 import { config } from 'folds';
 
 const outlinedWidth = createVar('0');
+const radii = createVar(config.radii.R400);
 export const SequenceCard = recipe({
   base: {
     vars: {
@@ -13,33 +14,59 @@ export const SequenceCard = recipe({
     borderBottomWidth: 0,
     selectors: {
       '&:first-child, :not(&) + &': {
-        borderTopLeftRadius: config.radii.R400,
-        borderTopRightRadius: config.radii.R400,
+        borderTopLeftRadius: [radii],
+        borderTopRightRadius: [radii],
       },
       '&:last-child, &:not(:has(+&))': {
-        borderBottomLeftRadius: config.radii.R400,
-        borderBottomRightRadius: config.radii.R400,
+        borderBottomLeftRadius: [radii],
+        borderBottomRightRadius: [radii],
         borderBottomWidth: outlinedWidth,
       },
       [`&[data-first-child="true"]`]: {
-        borderTopLeftRadius: config.radii.R400,
-        borderTopRightRadius: config.radii.R400,
+        borderTopLeftRadius: [radii],
+        borderTopRightRadius: [radii],
       },
       [`&[data-first-child="false"]`]: {
         borderTopLeftRadius: 0,
         borderTopRightRadius: 0,
       },
       [`&[data-last-child="true"]`]: {
-        borderBottomLeftRadius: config.radii.R400,
-        borderBottomRightRadius: config.radii.R400,
+        borderBottomLeftRadius: [radii],
+        borderBottomRightRadius: [radii],
       },
       [`&[data-last-child="false"]`]: {
         borderBottomLeftRadius: 0,
         borderBottomRightRadius: 0,
       },
+
+      'button&': {
+        cursor: 'pointer',
+      },
     },
   },
   variants: {
+    radii: {
+      '0': {
+        vars: {
+          [radii]: config.radii.R0,
+        },
+      },
+      '300': {
+        vars: {
+          [radii]: config.radii.R300,
+        },
+      },
+      '400': {
+        vars: {
+          [radii]: config.radii.R400,
+        },
+      },
+      '500': {
+        vars: {
+          [radii]: config.radii.R500,
+        },
+      },
+    },
     outlined: {
       true: {
         vars: {
@@ -48,5 +75,8 @@ export const SequenceCard = recipe({
       },
     },
   },
+  defaultVariants: {
+    radii: '400',
+  },
 });
 export type SequenceCardVariants = RecipeVariants<typeof SequenceCard>;

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

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

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

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

@@ -24,7 +24,7 @@ export const TextViewerContent = forwardRef<HTMLPreElement, TextViewerContentPro
     >
       <ErrorBoundary fallback={<code>{text}</code>}>
         <Suspense fallback={<code>{text}</code>}>
-          <ReactPrism>{(codeRef) => <code ref={codeRef}>{text}</code>}</ReactPrism>
+          <ReactPrism key={text}>{(codeRef) => <code ref={codeRef}>{text}</code>}</ReactPrism>
         </Suspense>
       </ErrorBoundary>
     </Text>

src/app/components/time-date/DatePicker.tsx

@@ -0,0 +1,129 @@
+import React, { forwardRef } from 'react';
+import { Menu, Box, Text, Chip } from 'folds';
+import dayjs from 'dayjs';
+import * as css from './styles.css';
+import { PickerColumn } from './PickerColumn';
+import { dateFor, daysInMonth, daysToMs } from '../../utils/time';
+
+type DatePickerProps = {
+  min: number;
+  max: number;
+  value: number;
+  onChange: (value: number) => void;
+};
+export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
+  ({ min, max, value, onChange }, ref) => {
+    const selectedYear = dayjs(value).year();
+    const selectedMonth = dayjs(value).month() + 1;
+    const selectedDay = dayjs(value).date();
+
+    const handleSubmit = (newValue: number) => {
+      onChange(Math.min(Math.max(min, newValue), max));
+    };
+
+    const handleDay = (day: number) => {
+      const seconds = daysToMs(day);
+      const lastSeconds = daysToMs(selectedDay);
+      const newValue = value + (seconds - lastSeconds);
+      handleSubmit(newValue);
+    };
+
+    const handleMonthAndYear = (month: number, year: number) => {
+      const mDays = daysInMonth(month, year);
+      const currentDate = dateFor(selectedYear, selectedMonth, selectedDay);
+      const time = value - currentDate;
+
+      const newDate = dateFor(year, month, mDays < selectedDay ? mDays : selectedDay);
+
+      const newValue = newDate + time;
+      handleSubmit(newValue);
+    };
+
+    const handleMonth = (month: number) => {
+      handleMonthAndYear(month, selectedYear);
+    };
+
+    const handleYear = (year: number) => {
+      handleMonthAndYear(selectedMonth, year);
+    };
+
+    const minYear = dayjs(min).year();
+    const maxYear = dayjs(max).year();
+    const yearsRange = maxYear - minYear + 1;
+
+    const minMonth = dayjs(min).month() + 1;
+    const maxMonth = dayjs(max).month() + 1;
+
+    const minDay = dayjs(min).date();
+    const maxDay = dayjs(max).date();
+    return (
+      <Menu className={css.PickerMenu} ref={ref}>
+        <Box direction="Row" gap="200" className={css.PickerContainer}>
+          <PickerColumn title="Day">
+            {Array.from(Array(daysInMonth(selectedMonth, selectedYear)).keys())
+              .map((i) => i + 1)
+              .map((day) => (
+                <Chip
+                  key={day}
+                  size="500"
+                  variant={selectedDay === day ? 'Primary' : 'SurfaceVariant'}
+                  fill="None"
+                  radii="300"
+                  aria-selected={selectedDay === day}
+                  onClick={() => handleDay(day)}
+                  disabled={
+                    (selectedYear === minYear && selectedMonth === minMonth && day < minDay) ||
+                    (selectedYear === maxYear && selectedMonth === maxMonth && day > maxDay)
+                  }
+                >
+                  <Text size="T300">{day}</Text>
+                </Chip>
+              ))}
+          </PickerColumn>
+          <PickerColumn title="Month">
+            {Array.from(Array(12).keys())
+              .map((i) => i + 1)
+              .map((month) => (
+                <Chip
+                  key={month}
+                  size="500"
+                  variant={selectedMonth === month ? 'Primary' : 'SurfaceVariant'}
+                  fill="None"
+                  radii="300"
+                  aria-selected={selectedMonth === month}
+                  onClick={() => handleMonth(month)}
+                  disabled={
+                    (selectedYear === minYear && month < minMonth) ||
+                    (selectedYear === maxYear && month > maxMonth)
+                  }
+                >
+                  <Text size="T300">
+                    {dayjs()
+                      .month(month - 1)
+                      .format('MMM')}
+                  </Text>
+                </Chip>
+              ))}
+          </PickerColumn>
+          <PickerColumn title="Year">
+            {Array.from(Array(yearsRange).keys())
+              .map((i) => minYear + i)
+              .map((year) => (
+                <Chip
+                  key={year}
+                  size="500"
+                  variant={selectedYear === year ? 'Primary' : 'SurfaceVariant'}
+                  fill="None"
+                  radii="300"
+                  aria-selected={selectedYear === year}
+                  onClick={() => handleYear(year)}
+                >
+                  <Text size="T300">{year}</Text>
+                </Chip>
+              ))}
+          </PickerColumn>
+        </Box>
+      </Menu>
+    );
+  }
+);

src/app/components/time-date/PickerColumn.tsx

@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+import { Box, Text, Scroll } from 'folds';
+import { CutoutCard } from '../cutout-card';
+import * as css from './styles.css';
+
+export function PickerColumn({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <Box direction="Column" gap="100">
+      <Text className={css.PickerColumnLabel} size="L400">
+        {title}
+      </Text>
+      <Box grow="Yes">
+        <CutoutCard variant="Background">
+          <Scroll variant="Background" size="300" hideTrack>
+            <Box className={css.PickerColumnContent} direction="Column" gap="100">
+              {children}
+            </Box>
+          </Scroll>
+        </CutoutCard>
+      </Box>
+    </Box>
+  );
+}

src/app/components/time-date/TimePicker.tsx

@@ -0,0 +1,153 @@
+import React, { forwardRef } from 'react';
+import { Menu, Box, Text, Chip } from 'folds';
+import dayjs from 'dayjs';
+import * as css from './styles.css';
+import { PickerColumn } from './PickerColumn';
+import { hour12to24, hour24to12, hoursToMs, inSameDay, minutesToMs } from '../../utils/time';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
+
+type TimePickerProps = {
+  min: number;
+  max: number;
+  value: number;
+  onChange: (value: number) => void;
+};
+export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
+  ({ min, max, value, onChange }, ref) => {
+    const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+
+    const hour24 = dayjs(value).hour();
+
+    const selectedHour = hour24Clock ? hour24 : hour24to12(hour24);
+    const selectedMinute = dayjs(value).minute();
+    const selectedPM = hour24 >= 12;
+
+    const handleSubmit = (newValue: number) => {
+      onChange(Math.min(Math.max(min, newValue), max));
+    };
+
+    const handleHour = (hour: number) => {
+      const seconds = hoursToMs(hour24Clock ? hour : hour12to24(hour, selectedPM));
+      const lastSeconds = hoursToMs(hour24);
+      const newValue = value + (seconds - lastSeconds);
+      handleSubmit(newValue);
+    };
+
+    const handleMinute = (minute: number) => {
+      const seconds = minutesToMs(minute);
+      const lastSeconds = minutesToMs(selectedMinute);
+      const newValue = value + (seconds - lastSeconds);
+      handleSubmit(newValue);
+    };
+
+    const handlePeriod = (pm: boolean) => {
+      const seconds = hoursToMs(hour12to24(selectedHour, pm));
+      const lastSeconds = hoursToMs(hour24);
+      const newValue = value + (seconds - lastSeconds);
+      handleSubmit(newValue);
+    };
+
+    const minHour24 = dayjs(min).hour();
+    const maxHour24 = dayjs(max).hour();
+
+    const minMinute = dayjs(min).minute();
+    const maxMinute = dayjs(max).minute();
+    const minPM = minHour24 >= 12;
+    const maxPM = maxHour24 >= 12;
+
+    const minDay = inSameDay(min, value);
+    const maxDay = inSameDay(max, value);
+
+    return (
+      <Menu className={css.PickerMenu} ref={ref}>
+        <Box direction="Row" gap="200" className={css.PickerContainer}>
+          <PickerColumn title="Hour">
+            {hour24Clock
+              ? Array.from(Array(24).keys()).map((hour) => (
+                  <Chip
+                    key={hour}
+                    size="500"
+                    variant={hour === selectedHour ? 'Primary' : 'Background'}
+                    fill="None"
+                    radii="300"
+                    aria-selected={hour === selectedHour}
+                    onClick={() => handleHour(hour)}
+                    disabled={(minDay && hour < minHour24) || (maxDay && hour > maxHour24)}
+                  >
+                    <Text size="T300">{hour < 10 ? `0${hour}` : hour}</Text>
+                  </Chip>
+                ))
+              : Array.from(Array(12).keys())
+                  .map((i) => {
+                    if (i === 0) return 12;
+                    return i;
+                  })
+                  .map((hour) => (
+                    <Chip
+                      key={hour}
+                      size="500"
+                      variant={hour === selectedHour ? 'Primary' : 'Background'}
+                      fill="None"
+                      radii="300"
+                      aria-selected={hour === selectedHour}
+                      onClick={() => handleHour(hour)}
+                      disabled={
+                        (minDay && hour12to24(hour, selectedPM) < minHour24) ||
+                        (maxDay && hour12to24(hour, selectedPM) > maxHour24)
+                      }
+                    >
+                      <Text size="T300">{hour < 10 ? `0${hour}` : hour}</Text>
+                    </Chip>
+                  ))}
+          </PickerColumn>
+          <PickerColumn title="Minutes">
+            {Array.from(Array(60).keys()).map((minute) => (
+              <Chip
+                key={minute}
+                size="500"
+                variant={minute === selectedMinute ? 'Primary' : 'Background'}
+                fill="None"
+                radii="300"
+                aria-selected={minute === selectedMinute}
+                onClick={() => handleMinute(minute)}
+                disabled={
+                  (minDay && hour24 === minHour24 && minute < minMinute) ||
+                  (maxDay && hour24 === maxHour24 && minute > maxMinute)
+                }
+              >
+                <Text size="T300">{minute < 10 ? `0${minute}` : minute}</Text>
+              </Chip>
+            ))}
+          </PickerColumn>
+          {!hour24Clock && (
+            <PickerColumn title="Period">
+              <Chip
+                size="500"
+                variant={!selectedPM ? 'Primary' : 'SurfaceVariant'}
+                fill="None"
+                radii="300"
+                aria-selected={!selectedPM}
+                onClick={() => handlePeriod(false)}
+                disabled={minDay && minPM}
+              >
+                <Text size="T300">AM</Text>
+              </Chip>
+              <Chip
+                size="500"
+                variant={selectedPM ? 'Primary' : 'SurfaceVariant'}
+                fill="None"
+                radii="300"
+                aria-selected={selectedPM}
+                onClick={() => handlePeriod(true)}
+                disabled={maxDay && !maxPM}
+              >
+                <Text size="T300">PM</Text>
+              </Chip>
+            </PickerColumn>
+          )}
+        </Box>
+      </Menu>
+    );
+  }
+);

src/app/components/time-date/index.ts

@@ -0,0 +1,2 @@
+export * from './TimePicker';
+export * from './DatePicker';

src/app/components/time-date/styles.css.ts

@@ -0,0 +1,16 @@
+import { style } from '@vanilla-extract/css';
+import { config, toRem } from 'folds';
+
+export const PickerMenu = style({
+  padding: config.space.S200,
+});
+export const PickerContainer = style({
+  maxHeight: toRem(250),
+});
+export const PickerColumnLabel = style({
+  padding: config.space.S200,
+});
+export const PickerColumnContent = style({
+  padding: config.space.S200,
+  paddingRight: 0,
+});

src/app/components/upload-card/CompactUploadCardRenderer.tsx

@@ -4,7 +4,8 @@ import { UploadCard, UploadCardError, CompactUploadCardProgress } from './Upload
 import { TUploadAtom, UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { TUploadContent } from '../../utils/matrix';
-import { getFileTypeIcon } from '../../utils/common';
+import { bytesToSize, getFileTypeIcon } from '../../utils/common';
+import { useMediaConfig } from '../../hooks/useMediaConfig';
 
 type CompactUploadCardRendererProps = {
   isEncrypted?: boolean;
@@ -19,10 +20,16 @@ export function CompactUploadCardRenderer({
   onComplete,
 }: CompactUploadCardRendererProps) {
   const mx = useMatrixClient();
+  const mediaConfig = useMediaConfig();
+  const allowSize = mediaConfig['m.upload.size'] || Infinity;
+
   const { upload, startUpload, cancelUpload } = useBindUploadAtom(mx, uploadAtom, isEncrypted);
   const { file } = upload;
+  const fileSizeExceeded = file.size >= allowSize;
 
-  if (upload.status === UploadStatus.Idle) startUpload();
+  if (upload.status === UploadStatus.Idle && !fileSizeExceeded) {
+    startUpload();
+  }
 
   const removeUpload = () => {
     cancelUpload();
@@ -76,7 +83,7 @@ export function CompactUploadCardRenderer({
         </>
       ) : (
         <>
-          {upload.status === UploadStatus.Idle && (
+          {upload.status === UploadStatus.Idle && !fileSizeExceeded && (
             <CompactUploadCardProgress sentBytes={0} totalBytes={file.size} />
           )}
           {upload.status === UploadStatus.Loading && (
@@ -87,6 +94,15 @@ export function CompactUploadCardRenderer({
               <Text size="T200">{upload.error.message}</Text>
             </UploadCardError>
           )}
+          {upload.status === UploadStatus.Idle && fileSizeExceeded && (
+            <UploadCardError>
+              <Text size="T200">
+                The file size exceeds the limit. Maximum allowed size is{' '}
+                <b>{bytesToSize(allowSize)}</b>, but the uploaded file is{' '}
+                <b>{bytesToSize(file.size)}</b>.
+              </Text>
+            </UploadCardError>
+          )}
         </>
       )}
     </UploadCard>

src/app/components/upload-card/UploadCardRenderer.tsx

@@ -4,13 +4,14 @@ import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard';
 import { UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { TUploadContent } from '../../utils/matrix';
-import { getFileTypeIcon } from '../../utils/common';
+import { bytesToSize, getFileTypeIcon } from '../../utils/common';
 import {
   roomUploadAtomFamily,
   TUploadItem,
   TUploadMetadata,
 } from '../../state/room/roomInputDrafts';
 import { useObjectURL } from '../../hooks/useObjectURL';
+import { useMediaConfig } from '../../hooks/useMediaConfig';
 
 type ImagePreviewProps = { fileItem: TUploadItem; onSpoiler: (marked: boolean) => void };
 function ImagePreview({ fileItem, onSpoiler }: ImagePreviewProps) {
@@ -75,12 +76,18 @@ export function UploadCardRenderer({
   onComplete,
 }: UploadCardRendererProps) {
   const mx = useMatrixClient();
+  const mediaConfig = useMediaConfig();
+  const allowSize = mediaConfig['m.upload.size'] || Infinity;
+
   const uploadAtom = roomUploadAtomFamily(fileItem.file);
   const { metadata } = fileItem;
   const { upload, startUpload, cancelUpload } = useBindUploadAtom(mx, uploadAtom, isEncrypted);
   const { file } = upload;
+  const fileSizeExceeded = file.size >= allowSize;
 
-  if (upload.status === UploadStatus.Idle) startUpload();
+  if (upload.status === UploadStatus.Idle && !fileSizeExceeded) {
+    startUpload();
+  }
 
   const handleSpoiler = (marked: boolean) => {
     setMetadata(fileItem, { ...metadata, markedAsSpoiler: marked });
@@ -131,7 +138,7 @@ export function UploadCardRenderer({
           {fileItem.originalFile.type.startsWith('image') && (
             <ImagePreview fileItem={fileItem} onSpoiler={handleSpoiler} />
           )}
-          {upload.status === UploadStatus.Idle && (
+          {upload.status === UploadStatus.Idle && !fileSizeExceeded && (
             <UploadCardProgress sentBytes={0} totalBytes={file.size} />
           )}
           {upload.status === UploadStatus.Loading && (
@@ -142,6 +149,15 @@ export function UploadCardRenderer({
               <Text size="T200">{upload.error.message}</Text>
             </UploadCardError>
           )}
+          {upload.status === UploadStatus.Idle && fileSizeExceeded && (
+            <UploadCardError>
+              <Text size="T200">
+                The file size exceeds the limit. Maximum allowed size is{' '}
+                <b>{bytesToSize(allowSize)}</b>, but the uploaded file is{' '}
+                <b>{bytesToSize(file.size)}</b>.
+              </Text>
+            </UploadCardError>
+          )}
         </>
       }
     >

src/app/components/user-profile/CreatorChip.tsx

@@ -0,0 +1,101 @@
+import { Chip, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
+import React, { MouseEventHandler, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import { isKeyHotkey } from 'is-hotkey';
+import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
+import { PowerColorBadge, PowerIcon } from '../power';
+import { getPowerTagIconSrc } from '../../hooks/useMemberPowerTag';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { stopPropagation } from '../../utils/keyboard';
+import { useRoom } from '../../hooks/useRoom';
+import { useSpaceOptionally } from '../../hooks/useSpace';
+import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
+import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
+import { SpaceSettingsPage } from '../../state/spaceSettings';
+import { RoomSettingsPage } from '../../state/roomSettings';
+
+export function CreatorChip() {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const room = useRoom();
+  const space = useSpaceOptionally();
+  const openRoomSettings = useOpenRoomSettings();
+  const openSpaceSettings = useOpenSpaceSettings();
+
+  const [cords, setCords] = useState<RectCords>();
+  const tag = useRoomCreatorsTag();
+  const tagIconSrc = tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
+
+  const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const close = () => setCords(undefined);
+
+  return (
+    <PopOut
+      anchor={cords}
+      position="Bottom"
+      align="Start"
+      offset={4}
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: close,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+            isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
+            isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
+          }}
+        >
+          <Menu>
+            <div style={{ padding: config.space.S100 }}>
+              <MenuItem
+                variant="Surface"
+                fill="None"
+                size="300"
+                radii="300"
+                onClick={() => {
+                  if (room.isSpaceRoom()) {
+                    openSpaceSettings(
+                      room.roomId,
+                      space?.roomId,
+                      SpaceSettingsPage.PermissionsPage
+                    );
+                  } else {
+                    openRoomSettings(room.roomId, space?.roomId, RoomSettingsPage.PermissionsPage);
+                  }
+                  close();
+                }}
+              >
+                <Text size="B300">Manage Powers</Text>
+              </MenuItem>
+            </div>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <Chip
+        variant="Success"
+        outlined
+        radii="Pill"
+        before={
+          cords ? (
+            <Icon size="50" src={Icons.ChevronBottom} />
+          ) : (
+            <PowerColorBadge color={tag.color} />
+          )
+        }
+        after={tagIconSrc ? <PowerIcon size="50" iconSrc={tagIconSrc} /> : undefined}
+        onClick={open}
+        aria-pressed={!!cords}
+      >
+        <Text size="B300" truncate>
+          {tag.name}
+        </Text>
+      </Chip>
+    </PopOut>
+  );
+}

src/app/components/user-profile/PowerChip.tsx

@@ -0,0 +1,357 @@
+import {
+  Box,
+  Button,
+  Chip,
+  config,
+  Dialog,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Line,
+  Menu,
+  MenuItem,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  PopOut,
+  RectCords,
+  Spinner,
+  Text,
+  toRem,
+} from 'folds';
+import React, { MouseEventHandler, useCallback, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import { isKeyHotkey } from 'is-hotkey';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { PowerColorBadge, PowerIcon } from '../power';
+import { useGetMemberPowerLevel, usePowerLevels } from '../../hooks/usePowerLevels';
+import { getPowers, usePowerLevelTags } from '../../hooks/usePowerLevelTags';
+import { stopPropagation } from '../../utils/keyboard';
+import { StateEvent } from '../../../types/matrix/room';
+import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
+import { RoomSettingsPage } from '../../state/roomSettings';
+import { useRoom } from '../../hooks/useRoom';
+import { useSpaceOptionally } from '../../hooks/useSpace';
+import { CutoutCard } from '../cutout-card';
+import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
+import { SpaceSettingsPage } from '../../state/spaceSettings';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { BreakWord } from '../../styles/Text.css';
+import { getPowerTagIconSrc, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
+import { useRoomCreators } from '../../hooks/useRoomCreators';
+import { useRoomPermissions } from '../../hooks/useRoomPermissions';
+import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
+
+type SelfDemoteAlertProps = {
+  power: number;
+  onCancel: () => void;
+  onChange: (power: number) => void;
+};
+function SelfDemoteAlert({ power, onCancel, onChange }: SelfDemoteAlertProps) {
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: onCancel,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Dialog variant="Surface">
+            <Header
+              style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
+              variant="Surface"
+              size="500"
+            >
+              <Box grow="Yes">
+                <Text size="H4">Self Demotion</Text>
+              </Box>
+              <IconButton size="300" onClick={onCancel} radii="300">
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Header>
+            <Box style={{ padding: config.space.S400, paddingTop: 0 }} direction="Column" gap="500">
+              <Box direction="Column" gap="200">
+                <Text priority="400">
+                  You are about to demote yourself! You will not be able to regain this power
+                  yourself. Are you sure?
+                </Text>
+              </Box>
+              <Box direction="Column" gap="200">
+                <Button type="submit" variant="Warning" onClick={() => onChange(power)}>
+                  <Text size="B400">Demote</Text>
+                </Button>
+              </Box>
+            </Box>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}
+
+type SharedPowerAlertProps = {
+  power: number;
+  onCancel: () => void;
+  onChange: (power: number) => void;
+};
+function SharedPowerAlert({ power, onCancel, onChange }: SharedPowerAlertProps) {
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: onCancel,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Dialog variant="Surface">
+            <Header
+              style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
+              variant="Surface"
+              size="500"
+            >
+              <Box grow="Yes">
+                <Text size="H4">Shared Power</Text>
+              </Box>
+              <IconButton size="300" onClick={onCancel} radii="300">
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Header>
+            <Box style={{ padding: config.space.S400, paddingTop: 0 }} direction="Column" gap="500">
+              <Box direction="Column" gap="200">
+                <Text priority="400">
+                  You are promoting the user to have the same power as yourself! You will not be
+                  able to change their power afterward. Are you sure?
+                </Text>
+              </Box>
+              <Box direction="Column" gap="200">
+                <Button type="submit" variant="Warning" onClick={() => onChange(power)}>
+                  <Text size="B400">Promote</Text>
+                </Button>
+              </Box>
+            </Box>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}
+
+export function PowerChip({ userId }: { userId: string }) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const space = useSpaceOptionally();
+  const useAuthentication = useMediaAuthentication();
+  const openRoomSettings = useOpenRoomSettings();
+  const openSpaceSettings = useOpenSpaceSettings();
+
+  const powerLevels = usePowerLevels(room);
+  const creators = useRoomCreators(room);
+
+  const permissions = useRoomPermissions(creators, powerLevels);
+  const getMemberPowerLevel = useGetMemberPowerLevel(powerLevels);
+  const { hasMorePower } = useMemberPowerCompare(creators, powerLevels);
+
+  const powerLevelTags = usePowerLevelTags(room, powerLevels);
+  const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+
+  const myUserId = mx.getSafeUserId();
+  const canChangePowers =
+    permissions.stateEvent(StateEvent.RoomPowerLevels, myUserId) &&
+    (myUserId === userId ? true : hasMorePower(myUserId, userId));
+
+  const tag = getMemberPowerTag(userId);
+  const tagIconSrc = tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
+
+  const [cords, setCords] = useState<RectCords>();
+
+  const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const close = () => setCords(undefined);
+
+  const [powerState, changePower] = useAsyncCallback<undefined, Error, [number]>(
+    useCallback(
+      async (power: number) => {
+        await mx.setPowerLevel(room.roomId, userId, power);
+      },
+      [mx, userId, room]
+    )
+  );
+  const changing = powerState.status === AsyncStatus.Loading;
+  const error = powerState.status === AsyncStatus.Error;
+  const [selfDemote, setSelfDemote] = useState<number>();
+  const [sharedPower, setSharedPower] = useState<number>();
+
+  const handlePowerSelect = (power: number): void => {
+    close();
+    if (!canChangePowers) return;
+    if (power === getMemberPowerLevel(userId)) return;
+
+    if (userId === mx.getSafeUserId()) {
+      setSelfDemote(power);
+      return;
+    }
+    if (!creators.has(myUserId) && power === getMemberPowerLevel(myUserId)) {
+      setSharedPower(power);
+      return;
+    }
+
+    changePower(power);
+  };
+
+  const handleSelfDemote = (power: number) => {
+    setSelfDemote(undefined);
+    changePower(power);
+  };
+  const handleSharedPower = (power: number) => {
+    setSharedPower(undefined);
+    changePower(power);
+  };
+
+  return (
+    <>
+      <PopOut
+        anchor={cords}
+        position="Bottom"
+        align="Start"
+        offset={4}
+        content={
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: close,
+              clickOutsideDeactivates: true,
+              escapeDeactivates: stopPropagation,
+              isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
+              isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
+            }}
+          >
+            <Menu>
+              <Box
+                direction="Column"
+                gap="100"
+                style={{ padding: config.space.S100, maxWidth: toRem(200) }}
+              >
+                {error && (
+                  <CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
+                    <Text size="L400">Error: {powerState.error.name}</Text>
+                    <Text className={BreakWord} size="T200">
+                      {powerState.error.message}
+                    </Text>
+                  </CutoutCard>
+                )}
+                {getPowers(powerLevelTags).map((power) => {
+                  const powerTag = powerLevelTags[power];
+                  const powerTagIconSrc =
+                    powerTag.icon && getPowerTagIconSrc(mx, useAuthentication, powerTag.icon);
+
+                  const selected = getMemberPowerLevel(userId) === power;
+                  const canAssignPower = creators.has(myUserId)
+                    ? true
+                    : power <= getMemberPowerLevel(myUserId);
+
+                  return (
+                    <MenuItem
+                      key={power}
+                      variant={selected ? 'Primary' : 'Surface'}
+                      fill="None"
+                      size="300"
+                      radii="300"
+                      aria-disabled={changing || !canChangePowers || !canAssignPower}
+                      aria-pressed={selected}
+                      before={<PowerColorBadge color={powerTag.color} />}
+                      after={
+                        powerTagIconSrc ? (
+                          <PowerIcon size="50" iconSrc={powerTagIconSrc} />
+                        ) : undefined
+                      }
+                      onClick={
+                        canChangePowers && canAssignPower
+                          ? () => handlePowerSelect(power)
+                          : undefined
+                      }
+                    >
+                      <Text size="B300">{powerTag.name}</Text>
+                    </MenuItem>
+                  );
+                })}
+              </Box>
+              <Line size="300" />
+              <div style={{ padding: config.space.S100 }}>
+                <MenuItem
+                  variant="Surface"
+                  fill="None"
+                  size="300"
+                  radii="300"
+                  onClick={() => {
+                    if (room.isSpaceRoom()) {
+                      openSpaceSettings(
+                        room.roomId,
+                        space?.roomId,
+                        SpaceSettingsPage.PermissionsPage
+                      );
+                    } else {
+                      openRoomSettings(
+                        room.roomId,
+                        space?.roomId,
+                        RoomSettingsPage.PermissionsPage
+                      );
+                    }
+                    close();
+                  }}
+                >
+                  <Text size="B300">Manage Powers</Text>
+                </MenuItem>
+              </div>
+            </Menu>
+          </FocusTrap>
+        }
+      >
+        <Chip
+          variant={error ? 'Critical' : 'SurfaceVariant'}
+          radii="Pill"
+          before={
+            cords ? (
+              <Icon size="50" src={Icons.ChevronBottom} />
+            ) : (
+              <>
+                {!changing && <PowerColorBadge color={tag.color} />}
+                {changing && <Spinner size="50" variant="Secondary" fill="Soft" />}
+              </>
+            )
+          }
+          after={tagIconSrc ? <PowerIcon size="50" iconSrc={tagIconSrc} /> : undefined}
+          onClick={open}
+          aria-pressed={!!cords}
+        >
+          <Text size="B300" truncate>
+            {tag.name}
+          </Text>
+        </Chip>
+      </PopOut>
+      {typeof selfDemote === 'number' ? (
+        <SelfDemoteAlert
+          power={selfDemote}
+          onCancel={() => setSelfDemote(undefined)}
+          onChange={handleSelfDemote}
+        />
+      ) : null}
+      {typeof sharedPower === 'number' ? (
+        <SharedPowerAlert
+          power={sharedPower}
+          onCancel={() => setSharedPower(undefined)}
+          onChange={handleSharedPower}
+        />
+      ) : null}
+    </>
+  );
+}

src/app/components/user-profile/UserChips.tsx

@@ -0,0 +1,514 @@
+import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import FocusTrap from 'focus-trap-react';
+import { isKeyHotkey } from 'is-hotkey';
+import { Room } from 'matrix-js-sdk';
+import {
+  PopOut,
+  Menu,
+  MenuItem,
+  config,
+  Text,
+  Line,
+  Chip,
+  Icon,
+  Icons,
+  RectCords,
+  Spinner,
+  toRem,
+  Box,
+  Scroll,
+  Avatar,
+} from 'folds';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { getMxIdServer } from '../../utils/matrix';
+import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
+import { stopPropagation } from '../../utils/keyboard';
+import { copyToClipboard } from '../../utils/dom';
+import { getExploreServerPath } from '../../pages/pathUtils';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { factoryRoomIdByAtoZ } from '../../utils/sort';
+import { useMutualRooms, useMutualRoomsSupport } from '../../hooks/useMutualRooms';
+import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { useDirectRooms } from '../../pages/client/direct/useDirectRooms';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
+import { RoomAvatar, RoomIcon } from '../room-avatar';
+import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
+import { nameInitials } from '../../utils/common';
+import { getMatrixToUser } from '../../plugins/matrix-to';
+import { useTimeoutToggle } from '../../hooks/useTimeoutToggle';
+import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
+import { CutoutCard } from '../cutout-card';
+import { SettingTile } from '../setting-tile';
+
+export function ServerChip({ server }: { server: string }) {
+  const mx = useMatrixClient();
+  const myServer = getMxIdServer(mx.getSafeUserId());
+  const navigate = useNavigate();
+  const closeProfile = useCloseUserRoomProfile();
+  const [copied, setCopied] = useTimeoutToggle();
+
+  const [cords, setCords] = useState<RectCords>();
+
+  const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const close = () => setCords(undefined);
+
+  return (
+    <PopOut
+      anchor={cords}
+      position="Bottom"
+      align="Start"
+      offset={4}
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: close,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+            isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
+            isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
+          }}
+        >
+          <Menu>
+            <div style={{ padding: config.space.S100 }}>
+              <MenuItem
+                variant="Surface"
+                fill="None"
+                size="300"
+                radii="300"
+                onClick={() => {
+                  copyToClipboard(server);
+                  setCopied();
+                  close();
+                }}
+              >
+                <Text size="B300">Copy Server</Text>
+              </MenuItem>
+              <MenuItem
+                variant="Surface"
+                fill="None"
+                size="300"
+                radii="300"
+                onClick={() => {
+                  navigate(getExploreServerPath(server));
+                  closeProfile();
+                }}
+              >
+                <Text size="B300">Explore Community</Text>
+              </MenuItem>
+            </div>
+            <Line size="300" />
+            <div style={{ padding: config.space.S100 }}>
+              <MenuItem
+                variant={myServer === server ? 'Surface' : 'Critical'}
+                fill="None"
+                size="300"
+                radii="300"
+                onClick={() => {
+                  window.open(`https://${server}`, '_blank');
+                  close();
+                }}
+              >
+                <Text size="B300">Open in Browser</Text>
+              </MenuItem>
+            </div>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <Chip
+        variant={myServer === server ? 'SurfaceVariant' : 'Warning'}
+        radii="Pill"
+        before={
+          cords ? (
+            <Icon size="50" src={Icons.ChevronBottom} />
+          ) : (
+            <Icon size="50" src={copied ? Icons.Check : Icons.Server} />
+          )
+        }
+        onClick={open}
+        aria-pressed={!!cords}
+      >
+        <Text size="B300" truncate>
+          {server}
+        </Text>
+      </Chip>
+    </PopOut>
+  );
+}
+
+export function ShareChip({ userId }: { userId: string }) {
+  const [cords, setCords] = useState<RectCords>();
+
+  const [copied, setCopied] = useTimeoutToggle();
+
+  const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const close = () => setCords(undefined);
+
+  return (
+    <PopOut
+      anchor={cords}
+      position="Bottom"
+      align="Start"
+      offset={4}
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: close,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+            isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
+            isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
+          }}
+        >
+          <Menu>
+            <div style={{ padding: config.space.S100 }}>
+              <MenuItem
+                variant="Surface"
+                fill="None"
+                size="300"
+                radii="300"
+                onClick={() => {
+                  copyToClipboard(userId);
+                  setCopied();
+                  close();
+                }}
+              >
+                <Text size="B300">Copy User ID</Text>
+              </MenuItem>
+              <MenuItem
+                variant="Surface"
+                fill="None"
+                size="300"
+                radii="300"
+                onClick={() => {
+                  copyToClipboard(getMatrixToUser(userId));
+                  setCopied();
+                  close();
+                }}
+              >
+                <Text size="B300">Copy User Link</Text>
+              </MenuItem>
+            </div>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <Chip
+        variant={copied ? 'Success' : 'SurfaceVariant'}
+        radii="Pill"
+        before={
+          cords ? (
+            <Icon size="50" src={Icons.ChevronBottom} />
+          ) : (
+            <Icon size="50" src={copied ? Icons.Check : Icons.Link} />
+          )
+        }
+        onClick={open}
+        aria-pressed={!!cords}
+      >
+        <Text size="B300" truncate>
+          Share
+        </Text>
+      </Chip>
+    </PopOut>
+  );
+}
+
+type MutualRoomsData = {
+  rooms: Room[];
+  spaces: Room[];
+  directs: Room[];
+};
+
+export function MutualRoomsChip({ userId }: { userId: string }) {
+  const mx = useMatrixClient();
+  const mutualRoomSupported = useMutualRoomsSupport();
+  const mutualRoomsState = useMutualRooms(userId);
+  const { navigateRoom, navigateSpace } = useRoomNavigate();
+  const closeUserRoomProfile = useCloseUserRoomProfile();
+  const directs = useDirectRooms();
+  const useAuthentication = useMediaAuthentication();
+
+  const allJoinedRooms = useAllJoinedRoomsSet();
+  const getRoom = useGetRoom(allJoinedRooms);
+
+  const [cords, setCords] = useState<RectCords>();
+
+  const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const close = () => setCords(undefined);
+
+  const mutual: MutualRoomsData = useMemo(() => {
+    const data: MutualRoomsData = {
+      rooms: [],
+      spaces: [],
+      directs: [],
+    };
+
+    if (mutualRoomsState.status === AsyncStatus.Success) {
+      const mutualRooms = mutualRoomsState.data
+        .sort(factoryRoomIdByAtoZ(mx))
+        .map(getRoom)
+        .filter((room) => !!room);
+      mutualRooms.forEach((room) => {
+        if (room.isSpaceRoom()) {
+          data.spaces.push(room);
+          return;
+        }
+        if (directs.includes(room.roomId)) {
+          data.directs.push(room);
+          return;
+        }
+        data.rooms.push(room);
+      });
+    }
+    return data;
+  }, [mutualRoomsState, getRoom, directs, mx]);
+
+  if (
+    userId === mx.getSafeUserId() ||
+    !mutualRoomSupported ||
+    mutualRoomsState.status === AsyncStatus.Error
+  ) {
+    return null;
+  }
+
+  const renderItem = (room: Room) => {
+    const { roomId } = room;
+    const dm = directs.includes(roomId);
+
+    return (
+      <MenuItem
+        key={roomId}
+        variant="Surface"
+        fill="None"
+        size="300"
+        radii="300"
+        style={{ paddingLeft: config.space.S100 }}
+        onClick={() => {
+          if (room.isSpaceRoom()) {
+            navigateSpace(roomId);
+          } else {
+            navigateRoom(roomId);
+          }
+          closeUserRoomProfile();
+        }}
+        before={
+          <Avatar size="200" radii={dm ? '400' : '300'}>
+            {dm || room.isSpaceRoom() ? (
+              <RoomAvatar
+                roomId={room.roomId}
+                src={
+                  dm
+                    ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
+                    : getRoomAvatarUrl(mx, room, 96, useAuthentication)
+                }
+                alt={room.name}
+                renderFallback={() => (
+                  <Text as="span" size="H6">
+                    {nameInitials(room.name)}
+                  </Text>
+                )}
+              />
+            ) : (
+              <RoomIcon size="100" joinRule={room.getJoinRule()} />
+            )}
+          </Avatar>
+        }
+      >
+        <Text size="B300" truncate>
+          {room.name}
+        </Text>
+      </MenuItem>
+    );
+  };
+
+  return (
+    <PopOut
+      anchor={cords}
+      position="Bottom"
+      align="Start"
+      offset={4}
+      content={
+        mutualRoomsState.status === AsyncStatus.Success ? (
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: close,
+              clickOutsideDeactivates: true,
+              escapeDeactivates: stopPropagation,
+              isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
+              isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
+            }}
+          >
+            <Menu
+              style={{
+                display: 'flex',
+                maxWidth: toRem(200),
+                maxHeight: '80vh',
+              }}
+            >
+              <Box grow="Yes">
+                <Scroll size="300" hideTrack>
+                  <Box
+                    direction="Column"
+                    gap="400"
+                    style={{ padding: config.space.S200, paddingRight: 0 }}
+                  >
+                    {mutual.spaces.length > 0 && (
+                      <Box direction="Column" gap="100">
+                        <Text style={{ paddingLeft: config.space.S100 }} size="L400">
+                          Spaces
+                        </Text>
+                        {mutual.spaces.map(renderItem)}
+                      </Box>
+                    )}
+                    {mutual.rooms.length > 0 && (
+                      <Box direction="Column" gap="100">
+                        <Text style={{ paddingLeft: config.space.S100 }} size="L400">
+                          Rooms
+                        </Text>
+                        {mutual.rooms.map(renderItem)}
+                      </Box>
+                    )}
+                    {mutual.directs.length > 0 && (
+                      <Box direction="Column" gap="100">
+                        <Text style={{ paddingLeft: config.space.S100 }} size="L400">
+                          Direct Messages
+                        </Text>
+                        {mutual.directs.map(renderItem)}
+                      </Box>
+                    )}
+                  </Box>
+                </Scroll>
+              </Box>
+            </Menu>
+          </FocusTrap>
+        ) : null
+      }
+    >
+      <Chip
+        variant="SurfaceVariant"
+        radii="Pill"
+        before={mutualRoomsState.status === AsyncStatus.Loading && <Spinner size="50" />}
+        disabled={
+          mutualRoomsState.status !== AsyncStatus.Success || mutualRoomsState.data.length === 0
+        }
+        onClick={open}
+        aria-pressed={!!cords}
+      >
+        <Text size="B300">
+          {mutualRoomsState.status === AsyncStatus.Success &&
+            `${mutualRoomsState.data.length} Mutual Rooms`}
+          {mutualRoomsState.status === AsyncStatus.Loading && 'Mutual Rooms'}
+        </Text>
+      </Chip>
+    </PopOut>
+  );
+}
+
+export function IgnoredUserAlert() {
+  return (
+    <CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
+      <SettingTile>
+        <Box direction="Column" gap="200">
+          <Box gap="200" justifyContent="SpaceBetween">
+            <Text size="L400">Blocked User</Text>
+          </Box>
+          <Box direction="Column">
+            <Text size="T200">You do not receive any messages or invites from this user.</Text>
+          </Box>
+        </Box>
+      </SettingTile>
+    </CutoutCard>
+  );
+}
+
+export function OptionsChip({ userId }: { userId: string }) {
+  const mx = useMatrixClient();
+  const [cords, setCords] = useState<RectCords>();
+
+  const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const close = () => setCords(undefined);
+
+  const ignoredUsers = useIgnoredUsers();
+  const ignored = ignoredUsers.includes(userId);
+
+  const [ignoreState, toggleIgnore] = useAsyncCallback(
+    useCallback(async () => {
+      const users = ignoredUsers.filter((u) => u !== userId);
+      if (!ignored) users.push(userId);
+      await mx.setIgnoredUsers(users);
+    }, [mx, ignoredUsers, userId, ignored])
+  );
+  const ignoring = ignoreState.status === AsyncStatus.Loading;
+
+  return (
+    <PopOut
+      anchor={cords}
+      position="Bottom"
+      align="Start"
+      offset={4}
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: close,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+            isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
+            isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
+          }}
+        >
+          <Menu>
+            <div style={{ padding: config.space.S100 }}>
+              <MenuItem
+                variant="Critical"
+                fill="None"
+                size="300"
+                radii="300"
+                onClick={() => {
+                  toggleIgnore();
+                  close();
+                }}
+                before={
+                  ignoring ? (
+                    <Spinner variant="Critical" size="50" />
+                  ) : (
+                    <Icon size="50" src={Icons.Prohibited} />
+                  )
+                }
+                disabled={ignoring}
+              >
+                <Text size="B300">{ignored ? 'Unblock User' : 'Block User'}</Text>
+              </MenuItem>
+            </div>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <Chip variant="SurfaceVariant" radii="Pill" onClick={open} aria-pressed={!!cords}>
+        {ignoring ? (
+          <Spinner variant="Secondary" size="50" />
+        ) : (
+          <Icon size="50" src={Icons.HorizontalDots} />
+        )}
+      </Chip>
+    </PopOut>
+  );
+}

src/app/components/user-profile/UserHero.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Avatar, Box, Icon, Icons, Text } from 'folds';
+import classNames from 'classnames';
+import * as css from './styles.css';
+import { UserAvatar } from '../user-avatar';
+import colorMXID from '../../../util/colorMXID';
+import { getMxIdLocalPart } from '../../utils/matrix';
+import { BreakWord, LineClamp3 } from '../../styles/Text.css';
+import { UserPresence } from '../../hooks/useUserPresence';
+import { AvatarPresence, PresenceBadge } from '../presence';
+
+type UserHeroProps = {
+  userId: string;
+  avatarUrl?: string;
+  presence?: UserPresence;
+};
+export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
+  return (
+    <Box direction="Column" className={css.UserHero}>
+      <div
+        className={css.UserHeroCoverContainer}
+        style={{
+          backgroundColor: colorMXID(userId),
+          filter: avatarUrl ? undefined : 'brightness(50%)',
+        }}
+      >
+        {avatarUrl && <img className={css.UserHeroCover} src={avatarUrl} alt={userId} />}
+      </div>
+      <div className={css.UserHeroAvatarContainer}>
+        <AvatarPresence
+          className={css.UserAvatarContainer}
+          badge={
+            presence && <PresenceBadge presence={presence.presence} status={presence.status} />
+          }
+        >
+          <Avatar className={css.UserHeroAvatar} size="500">
+            <UserAvatar
+              userId={userId}
+              src={avatarUrl}
+              alt={userId}
+              renderFallback={() => <Icon size="500" src={Icons.User} filled />}
+            />
+          </Avatar>
+        </AvatarPresence>
+      </div>
+    </Box>
+  );
+}
+
+type UserHeroNameProps = {
+  displayName?: string;
+  userId: string;
+};
+export function UserHeroName({ displayName, userId }: UserHeroNameProps) {
+  const username = getMxIdLocalPart(userId);
+
+  return (
+    <Box grow="Yes" direction="Column" gap="0">
+      <Box alignItems="Baseline" gap="200" wrap="Wrap">
+        <Text
+          size="H4"
+          className={classNames(BreakWord, LineClamp3)}
+          title={displayName ?? username}
+        >
+          {displayName ?? username ?? userId}
+        </Text>
+      </Box>
+      <Box alignItems="Center" gap="100" wrap="Wrap">
+        <Text size="T200" className={classNames(BreakWord, LineClamp3)} title={username}>
+          @{username}
+        </Text>
+      </Box>
+    </Box>
+  );
+}

src/app/components/user-profile/UserModeration.tsx

@@ -0,0 +1,349 @@
+import { Box, Button, color, config, Icon, Icons, Spinner, Text, Input } from 'folds';
+import React, { useCallback, useRef } from 'react';
+import { useRoom } from '../../hooks/useRoom';
+import { CutoutCard } from '../cutout-card';
+import { SettingTile } from '../setting-tile';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { BreakWord } from '../../styles/Text.css';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
+import { timeDayMonYear, timeHourMinute } from '../../utils/time';
+
+type UserKickAlertProps = {
+  reason?: string;
+  kickedBy?: string;
+  ts?: number;
+};
+export function UserKickAlert({ reason, kickedBy, ts }: UserKickAlertProps) {
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+
+  const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
+  const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
+
+  return (
+    <CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
+      <SettingTile>
+        <Box direction="Column" gap="200">
+          <Box gap="200" justifyContent="SpaceBetween">
+            <Text size="L400">Kicked User</Text>
+            {time && date && (
+              <Text size="T200">
+                {date} {time}
+              </Text>
+            )}
+          </Box>
+          <Box direction="Column">
+            {kickedBy && (
+              <Text size="T200">
+                Kicked by: <b>{kickedBy}</b>
+              </Text>
+            )}
+            <Text size="T200">
+              {reason ? (
+                <>
+                  Reason: <b>{reason}</b>
+                </>
+              ) : (
+                <i>No Reason Provided.</i>
+              )}
+            </Text>
+          </Box>
+        </Box>
+      </SettingTile>
+    </CutoutCard>
+  );
+}
+
+type UserBanAlertProps = {
+  userId: string;
+  reason?: string;
+  canUnban?: boolean;
+  bannedBy?: string;
+  ts?: number;
+};
+export function UserBanAlert({ userId, reason, canUnban, bannedBy, ts }: UserBanAlertProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+
+  const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
+  const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
+
+  const [unbanState, unban] = useAsyncCallback<undefined, Error, []>(
+    useCallback(async () => {
+      await mx.unban(room.roomId, userId);
+    }, [mx, room, userId])
+  );
+  const banning = unbanState.status === AsyncStatus.Loading;
+  const error = unbanState.status === AsyncStatus.Error;
+
+  return (
+    <CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
+      <SettingTile>
+        <Box direction="Column" gap="200">
+          <Box gap="200" justifyContent="SpaceBetween">
+            <Text size="L400">Banned User</Text>
+            {time && date && (
+              <Text size="T200">
+                {date} {time}
+              </Text>
+            )}
+          </Box>
+          <Box direction="Column">
+            {bannedBy && (
+              <Text size="T200">
+                Banned by: <b>{bannedBy}</b>
+              </Text>
+            )}
+            <Text size="T200">
+              {reason ? (
+                <>
+                  Reason: <b>{reason}</b>
+                </>
+              ) : (
+                <i>No Reason Provided.</i>
+              )}
+            </Text>
+          </Box>
+          {error && (
+            <Text className={BreakWord} size="T200" style={{ color: color.Critical.Main }}>
+              <b>{unbanState.error.message}</b>
+            </Text>
+          )}
+          {canUnban && (
+            <Button
+              size="300"
+              variant="Critical"
+              radii="300"
+              onClick={unban}
+              before={banning && <Spinner size="100" variant="Critical" fill="Solid" />}
+              disabled={banning}
+            >
+              <Text size="B300">Unban</Text>
+            </Button>
+          )}
+        </Box>
+      </SettingTile>
+    </CutoutCard>
+  );
+}
+
+type UserInviteAlertProps = {
+  userId: string;
+  reason?: string;
+  canKick?: boolean;
+  invitedBy?: string;
+  ts?: number;
+};
+export function UserInviteAlert({ userId, reason, canKick, invitedBy, ts }: UserInviteAlertProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+
+  const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
+  const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
+
+  const [kickState, kick] = useAsyncCallback<undefined, Error, []>(
+    useCallback(async () => {
+      await mx.kick(room.roomId, userId);
+    }, [mx, room, userId])
+  );
+  const kicking = kickState.status === AsyncStatus.Loading;
+  const error = kickState.status === AsyncStatus.Error;
+
+  return (
+    <CutoutCard style={{ padding: config.space.S200 }} variant="Success">
+      <SettingTile>
+        <Box direction="Column" gap="200">
+          <Box gap="200" justifyContent="SpaceBetween">
+            <Text size="L400">Invited User</Text>
+            {time && date && (
+              <Text size="T200">
+                {date} {time}
+              </Text>
+            )}
+          </Box>
+          <Box direction="Column">
+            {invitedBy && (
+              <Text size="T200">
+                Invited by: <b>{invitedBy}</b>
+              </Text>
+            )}
+            <Text size="T200">
+              {reason ? (
+                <>
+                  Reason: <b>{reason}</b>
+                </>
+              ) : (
+                <i>No Reason Provided.</i>
+              )}
+            </Text>
+          </Box>
+          {error && (
+            <Text className={BreakWord} size="T200" style={{ color: color.Critical.Main }}>
+              <b>{kickState.error.message}</b>
+            </Text>
+          )}
+          {canKick && (
+            <Button
+              size="300"
+              variant="Success"
+              fill="Soft"
+              outlined
+              radii="300"
+              onClick={kick}
+              before={kicking && <Spinner size="100" variant="Success" fill="Soft" />}
+              disabled={kicking}
+            >
+              <Text size="B300">Cancel Invite</Text>
+            </Button>
+          )}
+        </Box>
+      </SettingTile>
+    </CutoutCard>
+  );
+}
+
+type UserModerationProps = {
+  userId: string;
+  canKick: boolean;
+  canBan: boolean;
+  canInvite: boolean;
+};
+export function UserModeration({ userId, canKick, canBan, canInvite }: UserModerationProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const reasonInputRef = useRef<HTMLInputElement>(null);
+
+  const getReason = useCallback((): string | undefined => {
+    const reason = reasonInputRef.current?.value.trim() || undefined;
+    if (reasonInputRef.current) {
+      reasonInputRef.current.value = '';
+    }
+    return reason;
+  }, []);
+
+  const [kickState, kick] = useAsyncCallback<undefined, Error, []>(
+    useCallback(async () => {
+      await mx.kick(room.roomId, userId, getReason());
+    }, [mx, room, userId, getReason])
+  );
+
+  const [banState, ban] = useAsyncCallback<undefined, Error, []>(
+    useCallback(async () => {
+      await mx.ban(room.roomId, userId, getReason());
+    }, [mx, room, userId, getReason])
+  );
+
+  const [inviteState, invite] = useAsyncCallback<undefined, Error, []>(
+    useCallback(async () => {
+      await mx.invite(room.roomId, userId, getReason());
+    }, [mx, room, userId, getReason])
+  );
+
+  const disabled =
+    kickState.status === AsyncStatus.Loading ||
+    banState.status === AsyncStatus.Loading ||
+    inviteState.status === AsyncStatus.Loading;
+
+  if (!canBan && !canKick && !canInvite) return null;
+
+  return (
+    <Box direction="Column" gap="400">
+      <Box direction="Column" gap="200">
+        <Box grow="Yes" direction="Column" gap="100">
+          <Text size="L400">Moderation</Text>
+          <Input
+            ref={reasonInputRef}
+            placeholder="Reason"
+            size="300"
+            variant="Background"
+            radii="300"
+            disabled={disabled}
+          />
+          {kickState.status === AsyncStatus.Error && (
+            <Text style={{ color: color.Critical.Main }} className={BreakWord} size="T200">
+              <b>{kickState.error.message}</b>
+            </Text>
+          )}
+          {banState.status === AsyncStatus.Error && (
+            <Text style={{ color: color.Critical.Main }} className={BreakWord} size="T200">
+              <b>{banState.error.message}</b>
+            </Text>
+          )}
+          {inviteState.status === AsyncStatus.Error && (
+            <Text style={{ color: color.Critical.Main }} className={BreakWord} size="T200">
+              <b>{inviteState.error.message}</b>
+            </Text>
+          )}
+        </Box>
+        <Box shrink="No" gap="200">
+          {canInvite && (
+            <Button
+              style={{ flexGrow: 1 }}
+              size="300"
+              variant="Secondary"
+              fill="Soft"
+              radii="300"
+              before={
+                inviteState.status === AsyncStatus.Loading ? (
+                  <Spinner size="50" variant="Secondary" fill="Soft" />
+                ) : (
+                  <Icon size="50" src={Icons.ArrowRight} />
+                )
+              }
+              onClick={invite}
+              disabled={disabled}
+            >
+              <Text size="B300">Invite</Text>
+            </Button>
+          )}
+          {canKick && (
+            <Button
+              style={{ flexGrow: 1 }}
+              size="300"
+              variant="Critical"
+              fill="Soft"
+              radii="300"
+              before={
+                kickState.status === AsyncStatus.Loading ? (
+                  <Spinner size="50" variant="Critical" fill="Soft" />
+                ) : (
+                  <Icon size="50" src={Icons.ArrowLeft} />
+                )
+              }
+              onClick={kick}
+              disabled={disabled}
+            >
+              <Text size="B300">Kick</Text>
+            </Button>
+          )}
+          {canBan && (
+            <Button
+              style={{ flexGrow: 1 }}
+              size="300"
+              variant="Critical"
+              fill="Solid"
+              radii="300"
+              before={
+                banState.status === AsyncStatus.Loading ? (
+                  <Spinner size="50" variant="Critical" fill="Solid" />
+                ) : (
+                  <Icon size="50" src={Icons.Prohibited} />
+                )
+              }
+              onClick={ban}
+              disabled={disabled}
+            >
+              <Text size="B300">Ban</Text>
+            </Button>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+}

src/app/components/user-profile/UserRoomProfile.tsx

@@ -0,0 +1,169 @@
+import { Box, Button, color, config, Icon, Icons, Spinner, Text } from 'folds';
+import React, { useCallback } from 'react';
+import { UserHero, UserHeroName } from './UserHero';
+import { getDMRoomFor, getMxIdServer, mxcUrlToHttp } from '../../utils/matrix';
+import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { usePowerLevels } from '../../hooks/usePowerLevels';
+import { useRoom } from '../../hooks/useRoom';
+import { useUserPresence } from '../../hooks/useUserPresence';
+import { IgnoredUserAlert, MutualRoomsChip, OptionsChip, ServerChip, ShareChip } from './UserChips';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { createDM } from '../../../client/action/room';
+import { hasDevices } from '../../../util/matrixUtil';
+import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { useAlive } from '../../hooks/useAlive';
+import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
+import { PowerChip } from './PowerChip';
+import { UserInviteAlert, UserBanAlert, UserModeration, UserKickAlert } from './UserModeration';
+import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
+import { useMembership } from '../../hooks/useMembership';
+import { Membership } from '../../../types/matrix/room';
+import { useRoomCreators } from '../../hooks/useRoomCreators';
+import { useRoomPermissions } from '../../hooks/useRoomPermissions';
+import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
+import { CreatorChip } from './CreatorChip';
+
+type UserRoomProfileProps = {
+  userId: string;
+};
+export function UserRoomProfile({ userId }: UserRoomProfileProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const { navigateRoom } = useRoomNavigate();
+  const alive = useAlive();
+  const closeUserRoomProfile = useCloseUserRoomProfile();
+  const ignoredUsers = useIgnoredUsers();
+  const ignored = ignoredUsers.includes(userId);
+
+  const room = useRoom();
+  const powerLevels = usePowerLevels(room);
+  const creators = useRoomCreators(room);
+
+  const permissions = useRoomPermissions(creators, powerLevels);
+  const { hasMorePower } = useMemberPowerCompare(creators, powerLevels);
+
+  const myUserId = mx.getSafeUserId();
+  const creator = creators.has(userId);
+
+  const canKickUser = permissions.action('kick', myUserId) && hasMorePower(myUserId, userId);
+  const canBanUser = permissions.action('ban', myUserId) && hasMorePower(myUserId, userId);
+  const canUnban = permissions.action('ban', myUserId);
+  const canInvite = permissions.action('invite', myUserId);
+
+  const member = room.getMember(userId);
+  const membership = useMembership(room, userId);
+
+  const server = getMxIdServer(userId);
+  const displayName = getMemberDisplayName(room, userId);
+  const avatarMxc = getMemberAvatarMxc(room, userId);
+  const avatarUrl = (avatarMxc && mxcUrlToHttp(mx, avatarMxc, useAuthentication)) ?? undefined;
+
+  const presence = useUserPresence(userId);
+
+  const [directMessageState, directMessage] = useAsyncCallback<string, Error, []>(
+    useCallback(async () => {
+      const result = await createDM(mx, userId, await hasDevices(mx, userId));
+      return result.room_id as string;
+    }, [userId, mx])
+  );
+
+  const handleMessage = () => {
+    const dmRoomId = getDMRoomFor(mx, userId)?.roomId;
+    if (dmRoomId) {
+      navigateRoom(dmRoomId);
+      closeUserRoomProfile();
+      return;
+    }
+    directMessage().then((rId) => {
+      if (alive()) {
+        navigateRoom(rId);
+        closeUserRoomProfile();
+      }
+    });
+  };
+
+  return (
+    <Box direction="Column">
+      <UserHero
+        userId={userId}
+        avatarUrl={avatarUrl}
+        presence={presence && presence.lastActiveTs !== 0 ? presence : undefined}
+      />
+      <Box direction="Column" gap="500" style={{ padding: config.space.S400 }}>
+        <Box direction="Column" gap="400">
+          <Box gap="400" alignItems="Start">
+            <UserHeroName displayName={displayName} userId={userId} />
+            <Box shrink="No">
+              <Button
+                size="300"
+                variant="Primary"
+                fill="Solid"
+                radii="300"
+                disabled={directMessageState.status === AsyncStatus.Loading}
+                before={
+                  directMessageState.status === AsyncStatus.Loading ? (
+                    <Spinner size="50" variant="Primary" fill="Solid" />
+                  ) : (
+                    <Icon size="50" src={Icons.Message} filled />
+                  )
+                }
+                onClick={handleMessage}
+              >
+                <Text size="B300">Message</Text>
+              </Button>
+            </Box>
+          </Box>
+          {directMessageState.status === AsyncStatus.Error && (
+            <Text style={{ color: color.Critical.Main }}>
+              <b>{directMessageState.error.message}</b>
+            </Text>
+          )}
+          <Box alignItems="Center" gap="200" wrap="Wrap">
+            {server && <ServerChip server={server} />}
+            <ShareChip userId={userId} />
+            {creator ? <CreatorChip /> : <PowerChip userId={userId} />}
+            {userId !== myUserId && <MutualRoomsChip userId={userId} />}
+            {userId !== myUserId && <OptionsChip userId={userId} />}
+          </Box>
+        </Box>
+        {ignored && <IgnoredUserAlert />}
+        {member && membership === Membership.Ban && (
+          <UserBanAlert
+            userId={userId}
+            reason={member.events.member?.getContent().reason}
+            canUnban={canUnban}
+            bannedBy={member.events.member?.getSender()}
+            ts={member.events.member?.getTs()}
+          />
+        )}
+        {member &&
+          membership === Membership.Leave &&
+          member.events.member &&
+          member.events.member.getSender() !== userId && (
+            <UserKickAlert
+              reason={member.events.member?.getContent().reason}
+              kickedBy={member.events.member?.getSender()}
+              ts={member.events.member?.getTs()}
+            />
+          )}
+        {member && membership === Membership.Invite && (
+          <UserInviteAlert
+            userId={userId}
+            reason={member.events.member?.getContent().reason}
+            canKick={canKickUser}
+            invitedBy={member.events.member?.getSender()}
+            ts={member.events.member?.getTs()}
+          />
+        )}
+        <UserModeration
+          userId={userId}
+          canInvite={canInvite && membership === Membership.Leave}
+          canKick={canKickUser && membership === Membership.Join}
+          canBan={canBanUser && membership !== Membership.Ban}
+        />
+      </Box>
+    </Box>
+  );
+}

src/app/components/user-profile/index.ts

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

src/app/components/user-profile/styles.css.ts

@@ -0,0 +1,42 @@
+import { style } from '@vanilla-extract/css';
+import { color, config, toRem } from 'folds';
+
+export const UserHeader = style({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  zIndex: 1,
+  padding: config.space.S200,
+});
+
+export const UserHero = style({
+  position: 'relative',
+});
+
+export const UserHeroCoverContainer = style({
+  height: toRem(96),
+  overflow: 'hidden',
+});
+export const UserHeroCover = style({
+  height: '100%',
+  width: '100%',
+  objectFit: 'cover',
+  filter: 'blur(16px)',
+  transform: 'scale(2)',
+});
+
+export const UserHeroAvatarContainer = style({
+  position: 'relative',
+  height: toRem(29),
+});
+export const UserAvatarContainer = style({
+  position: 'absolute',
+  left: config.space.S400,
+  top: 0,
+  transform: 'translateY(-50%)',
+  backgroundColor: color.Surface.Container,
+});
+export const UserHeroAvatar = style({
+  outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`,
+});

src/app/features/common-settings/developer-tools/DevelopTools.tsx

@@ -0,0 +1,396 @@
+import React, { useCallback, useState } from 'react';
+import {
+  Box,
+  Text,
+  IconButton,
+  Icon,
+  Icons,
+  Scroll,
+  Switch,
+  Button,
+  MenuItem,
+  config,
+  color,
+} from 'folds';
+import { Page, PageContent, PageHeader } from '../../../components/page';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+import { useSetting } from '../../../state/hooks/settings';
+import { settingsAtom } from '../../../state/settings';
+import { copyToClipboard } from '../../../utils/dom';
+import { useRoom } from '../../../hooks/useRoom';
+import { useRoomState } from '../../../hooks/useRoomState';
+import { StateEventEditor, StateEventInfo } from './StateEventEditor';
+import { SendRoomEvent } from './SendRoomEvent';
+import { useRoomAccountData } from '../../../hooks/useRoomAccountData';
+import { CutoutCard } from '../../../components/cutout-card';
+import {
+  AccountDataEditor,
+  AccountDataSubmitCallback,
+} from '../../../components/AccountDataEditor';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+
+type DeveloperToolsProps = {
+  requestClose: () => void;
+};
+export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
+  const [developerTools, setDeveloperTools] = useSetting(settingsAtom, 'developerTools');
+  const mx = useMatrixClient();
+  const room = useRoom();
+
+  const roomState = useRoomState(room);
+  const accountData = useRoomAccountData(room);
+
+  const [expandState, setExpandState] = useState(false);
+  const [expandStateType, setExpandStateType] = useState<string>();
+  const [openStateEvent, setOpenStateEvent] = useState<StateEventInfo>();
+  const [composeEvent, setComposeEvent] = useState<{ type?: string; stateKey?: string }>();
+
+  const [expandAccountData, setExpandAccountData] = useState(false);
+  const [accountDataType, setAccountDataType] = useState<string | null>();
+
+  const handleClose = useCallback(() => {
+    setOpenStateEvent(undefined);
+    setComposeEvent(undefined);
+    setAccountDataType(undefined);
+  }, []);
+
+  const submitAccountData: AccountDataSubmitCallback = useCallback(
+    async (type, content) => {
+      await mx.setRoomAccountData(room.roomId, type, content);
+    },
+    [mx, room.roomId]
+  );
+
+  if (accountDataType !== undefined) {
+    return (
+      <AccountDataEditor
+        type={accountDataType ?? undefined}
+        content={accountDataType ? accountData.get(accountDataType) : undefined}
+        submitChange={submitAccountData}
+        requestClose={handleClose}
+      />
+    );
+  }
+
+  if (composeEvent) {
+    return <SendRoomEvent {...composeEvent} requestClose={handleClose} />;
+  }
+
+  if (openStateEvent) {
+    return <StateEventEditor {...openStateEvent} requestClose={handleClose} />;
+  }
+
+  return (
+    <Page>
+      <PageHeader outlined={false}>
+        <Box grow="Yes" gap="200">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <Text size="H3" truncate>
+              Developer Tools
+            </Text>
+          </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>
+            <Box direction="Column" gap="700">
+              <Box direction="Column" gap="100">
+                <Text size="L400">Options</Text>
+                <SequenceCard
+                  className={SequenceCardStyle}
+                  variant="SurfaceVariant"
+                  direction="Column"
+                  gap="400"
+                >
+                  <SettingTile
+                    title="Enable Developer Tools"
+                    after={
+                      <Switch
+                        variant="Primary"
+                        value={developerTools}
+                        onChange={setDeveloperTools}
+                      />
+                    }
+                  />
+                </SequenceCard>
+                {developerTools && (
+                  <SequenceCard
+                    className={SequenceCardStyle}
+                    variant="SurfaceVariant"
+                    direction="Column"
+                    gap="400"
+                  >
+                    <SettingTile
+                      title="Room ID"
+                      description={`Copy room ID to clipboard. ("${room.roomId}")`}
+                      after={
+                        <Button
+                          onClick={() => copyToClipboard(room.roomId ?? '<NO_ROOM_ID_FOUND>')}
+                          variant="Secondary"
+                          fill="Soft"
+                          size="300"
+                          radii="300"
+                          outlined
+                        >
+                          <Text size="B300">Copy</Text>
+                        </Button>
+                      }
+                    />
+                  </SequenceCard>
+                )}
+              </Box>
+
+              {developerTools && (
+                <Box direction="Column" gap="100">
+                  <Text size="L400">Data</Text>
+
+                  <SequenceCard
+                    className={SequenceCardStyle}
+                    variant="SurfaceVariant"
+                    direction="Column"
+                    gap="400"
+                  >
+                    <SettingTile
+                      title="New Message Event"
+                      description="Create and send a new message event within the room."
+                      after={
+                        <Button
+                          onClick={() => setComposeEvent({})}
+                          variant="Secondary"
+                          fill="Soft"
+                          size="300"
+                          radii="300"
+                          outlined
+                        >
+                          <Text size="B300">Compose</Text>
+                        </Button>
+                      }
+                    />
+                  </SequenceCard>
+                  <SequenceCard
+                    className={SequenceCardStyle}
+                    variant="SurfaceVariant"
+                    direction="Column"
+                    gap="400"
+                  >
+                    <SettingTile
+                      title="Room State"
+                      description="State events of the room."
+                      after={
+                        <Button
+                          onClick={() => setExpandState(!expandState)}
+                          variant="Secondary"
+                          fill="Soft"
+                          size="300"
+                          radii="300"
+                          outlined
+                          before={
+                            <Icon
+                              src={expandState ? Icons.ChevronTop : Icons.ChevronBottom}
+                              size="100"
+                              filled
+                            />
+                          }
+                        >
+                          <Text size="B300">{expandState ? 'Collapse' : 'Expand'}</Text>
+                        </Button>
+                      }
+                    />
+                    {expandState && (
+                      <Box direction="Column" gap="100">
+                        <Box justifyContent="SpaceBetween">
+                          <Text size="L400">Events</Text>
+                          <Text size="L400">Total: {roomState.size}</Text>
+                        </Box>
+                        <CutoutCard>
+                          <MenuItem
+                            onClick={() => setComposeEvent({ stateKey: '' })}
+                            variant="Surface"
+                            fill="None"
+                            size="300"
+                            radii="0"
+                            before={<Icon size="50" src={Icons.Plus} />}
+                          >
+                            <Box grow="Yes">
+                              <Text size="T200" truncate>
+                                Add New
+                              </Text>
+                            </Box>
+                          </MenuItem>
+                          {Array.from(roomState.keys())
+                            .sort()
+                            .map((eventType) => {
+                              const expanded = eventType === expandStateType;
+                              const stateKeyToEvents = roomState.get(eventType);
+                              if (!stateKeyToEvents) return null;
+
+                              return (
+                                <Box id={eventType} key={eventType} direction="Column" gap="100">
+                                  <MenuItem
+                                    onClick={() =>
+                                      setExpandStateType(expanded ? undefined : eventType)
+                                    }
+                                    variant="Surface"
+                                    fill="None"
+                                    size="300"
+                                    radii="0"
+                                    before={
+                                      <Icon
+                                        size="50"
+                                        src={expanded ? Icons.ChevronBottom : Icons.ChevronRight}
+                                      />
+                                    }
+                                    after={<Text size="L400">{stateKeyToEvents.size}</Text>}
+                                  >
+                                    <Box grow="Yes">
+                                      <Text size="T200" truncate>
+                                        {eventType}
+                                      </Text>
+                                    </Box>
+                                  </MenuItem>
+                                  {expanded && (
+                                    <div
+                                      style={{
+                                        marginLeft: config.space.S400,
+                                        borderLeft: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+                                      }}
+                                    >
+                                      <MenuItem
+                                        onClick={() =>
+                                          setComposeEvent({ type: eventType, stateKey: '' })
+                                        }
+                                        variant="Surface"
+                                        fill="None"
+                                        size="300"
+                                        radii="0"
+                                        before={<Icon size="50" src={Icons.Plus} />}
+                                      >
+                                        <Box grow="Yes">
+                                          <Text size="T200" truncate>
+                                            Add New
+                                          </Text>
+                                        </Box>
+                                      </MenuItem>
+                                      {Array.from(stateKeyToEvents.keys())
+                                        .sort()
+                                        .map((stateKey) => (
+                                          <MenuItem
+                                            onClick={() => {
+                                              setOpenStateEvent({
+                                                type: eventType,
+                                                stateKey,
+                                              });
+                                            }}
+                                            key={stateKey}
+                                            variant="Surface"
+                                            fill="None"
+                                            size="300"
+                                            radii="0"
+                                            after={<Icon size="50" src={Icons.ChevronRight} />}
+                                          >
+                                            <Box grow="Yes">
+                                              <Text size="T200" truncate>
+                                                {stateKey ? `"${stateKey}"` : 'Default'}
+                                              </Text>
+                                            </Box>
+                                          </MenuItem>
+                                        ))}
+                                    </div>
+                                  )}
+                                </Box>
+                              );
+                            })}
+                        </CutoutCard>
+                      </Box>
+                    )}
+                  </SequenceCard>
+                  <SequenceCard
+                    className={SequenceCardStyle}
+                    variant="SurfaceVariant"
+                    direction="Column"
+                    gap="400"
+                  >
+                    <SettingTile
+                      title="Account Data"
+                      description="Private personalization data stored within room."
+                      after={
+                        <Button
+                          onClick={() => setExpandAccountData(!expandAccountData)}
+                          variant="Secondary"
+                          fill="Soft"
+                          size="300"
+                          radii="300"
+                          outlined
+                          before={
+                            <Icon
+                              src={expandAccountData ? Icons.ChevronTop : Icons.ChevronBottom}
+                              size="100"
+                              filled
+                            />
+                          }
+                        >
+                          <Text size="B300">{expandAccountData ? 'Collapse' : 'Expand'}</Text>
+                        </Button>
+                      }
+                    />
+                    {expandAccountData && (
+                      <Box direction="Column" gap="100">
+                        <Box justifyContent="SpaceBetween">
+                          <Text size="L400">Events</Text>
+                          <Text size="L400">Total: {accountData.size}</Text>
+                        </Box>
+                        <CutoutCard>
+                          <MenuItem
+                            variant="Surface"
+                            fill="None"
+                            size="300"
+                            radii="0"
+                            before={<Icon size="50" src={Icons.Plus} />}
+                            onClick={() => setAccountDataType(null)}
+                          >
+                            <Box grow="Yes">
+                              <Text size="T200" truncate>
+                                Add New
+                              </Text>
+                            </Box>
+                          </MenuItem>
+                          {Array.from(accountData.keys())
+                            .sort()
+                            .map((type) => (
+                              <MenuItem
+                                key={type}
+                                variant="Surface"
+                                fill="None"
+                                size="300"
+                                radii="0"
+                                after={<Icon size="50" src={Icons.ChevronRight} />}
+                                onClick={() => setAccountDataType(type)}
+                              >
+                                <Box grow="Yes">
+                                  <Text size="T200" truncate>
+                                    {type}
+                                  </Text>
+                                </Box>
+                              </MenuItem>
+                            ))}
+                        </CutoutCard>
+                      </Box>
+                    )}
+                  </SequenceCard>
+                </Box>
+              )}
+            </Box>
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}

src/app/features/common-settings/developer-tools/SendRoomEvent.tsx

@@ -0,0 +1,208 @@
+import React, { useCallback, useRef, useState, FormEventHandler, useEffect } from 'react';
+import { MatrixError } from 'matrix-js-sdk';
+import {
+  Box,
+  Chip,
+  Icon,
+  Icons,
+  IconButton,
+  Text,
+  config,
+  Button,
+  Spinner,
+  color,
+  TextArea as TextAreaComponent,
+  Input,
+} from 'folds';
+import { Page, PageHeader } from '../../../components/page';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useRoom } from '../../../hooks/useRoom';
+import { useAlive } from '../../../hooks/useAlive';
+import { useTextAreaCodeEditor } from '../../../hooks/useTextAreaCodeEditor';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { syntaxErrorPosition } from '../../../utils/dom';
+import { Cursor } from '../../../plugins/text-area';
+
+const EDITOR_INTENT_SPACE_COUNT = 2;
+
+export type SendRoomEventProps = {
+  type?: string;
+  stateKey?: string;
+  requestClose: () => void;
+};
+export function SendRoomEvent({ type, stateKey, requestClose }: SendRoomEventProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const alive = useAlive();
+  const composeStateEvent = typeof stateKey === 'string';
+
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const [jsonError, setJSONError] = useState<SyntaxError>();
+  const { handleKeyDown, operations, getTarget } = useTextAreaCodeEditor(
+    textAreaRef,
+    EDITOR_INTENT_SPACE_COUNT
+  );
+
+  const [submitState, submit] = useAsyncCallback<
+    object,
+    MatrixError,
+    [string, string | undefined, object]
+  >(
+    useCallback(
+      (evtType, evtStateKey, evtContent) => {
+        if (typeof evtStateKey === 'string') {
+          return mx.sendStateEvent(room.roomId, evtType as any, evtContent, evtStateKey);
+        }
+        return mx.sendEvent(room.roomId, evtType as any, evtContent);
+      },
+      [mx, room]
+    )
+  );
+  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 stateKeyInput = target?.stateKeyInput as HTMLInputElement | undefined;
+    const contentTextArea = target?.contentTextArea as HTMLTextAreaElement | undefined;
+    if (!typeInput || !contentTextArea) return;
+
+    const evtType = typeInput.value;
+    const evtStateKey = stateKeyInput?.value;
+    const contentStr = contentTextArea.value.trim();
+
+    let parsedContent: object;
+    try {
+      parsedContent = JSON.parse(contentStr);
+    } catch (e) {
+      setJSONError(e as SyntaxError);
+      return;
+    }
+    setJSONError(undefined);
+
+    if (parsedContent === null) {
+      return;
+    }
+
+    submit(evtType, evtStateKey, parsedContent).then(() => {
+      if (alive()) {
+        requestClose();
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (jsonError) {
+      const errorPosition = syntaxErrorPosition(jsonError) ?? 0;
+      const cursor = new Cursor(errorPosition, errorPosition, 'none');
+      operations.select(cursor);
+      getTarget()?.focus();
+    }
+  }, [jsonError, operations, getTarget]);
+
+  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">
+        <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">{composeStateEvent ? 'State Event Type' : 'Message Event Type'}</Text>
+            <Box gap="300">
+              <Box grow="Yes" direction="Column">
+                <Input
+                  variant="Background"
+                  name="typeInput"
+                  size="400"
+                  radii="300"
+                  readOnly={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">Send</Text>
+              </Button>
+            </Box>
+
+            {submitState.status === AsyncStatus.Error && (
+              <Text size="T200" style={{ color: color.Critical.Main }}>
+                <b>{submitState.error.message}</b>
+              </Text>
+            )}
+          </Box>
+          {composeStateEvent && (
+            <Box shrink="No" direction="Column" gap="100">
+              <Text size="L400">State Key (Optional)</Text>
+              <Input
+                variant="Background"
+                name="stateKeyInput"
+                size="400"
+                radii="300"
+                readOnly={submitting}
+                defaultValue={stateKey}
+              />
+            </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}
+              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>
+      </Box>
+    </Page>
+  );
+}

src/app/features/common-settings/developer-tools/StateEventEditor.tsx

@@ -0,0 +1,302 @@
+import React, { FormEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Box,
+  Text,
+  Icon,
+  Icons,
+  IconButton,
+  Chip,
+  Scroll,
+  config,
+  TextArea as TextAreaComponent,
+  color,
+  Spinner,
+  Button,
+} from 'folds';
+import { MatrixError } from 'matrix-js-sdk';
+import { Page, PageHeader } from '../../../components/page';
+import { SequenceCard } from '../../../components/sequence-card';
+import { TextViewerContent } from '../../../components/text-viewer';
+import { useStateEvent } from '../../../hooks/useStateEvent';
+import { useRoom } from '../../../hooks/useRoom';
+import { StateEvent } from '../../../../types/matrix/room';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useAlive } from '../../../hooks/useAlive';
+import { Cursor } from '../../../plugins/text-area';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { syntaxErrorPosition } from '../../../utils/dom';
+import { SettingTile } from '../../../components/setting-tile';
+import { SequenceCardStyle } from '../styles.css';
+import { usePowerLevels } from '../../../hooks/usePowerLevels';
+import { useTextAreaCodeEditor } from '../../../hooks/useTextAreaCodeEditor';
+import { useRoomCreators } from '../../../hooks/useRoomCreators';
+import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
+
+const EDITOR_INTENT_SPACE_COUNT = 2;
+
+type StateEventEditProps = {
+  type: string;
+  stateKey: string;
+  content: object;
+  requestClose: () => void;
+};
+function StateEventEdit({ type, stateKey, content, requestClose }: StateEventEditProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const alive = useAlive();
+
+  const defaultContentStr = useMemo(
+    () => JSON.stringify(content, undefined, EDITOR_INTENT_SPACE_COUNT),
+    [content]
+  );
+
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const [jsonError, setJSONError] = useState<SyntaxError>();
+  const { handleKeyDown, operations, getTarget } = useTextAreaCodeEditor(
+    textAreaRef,
+    EDITOR_INTENT_SPACE_COUNT
+  );
+
+  const [submitState, submit] = useAsyncCallback<object, MatrixError, [object]>(
+    useCallback(
+      (c) => mx.sendStateEvent(room.roomId, type as any, c, stateKey),
+      [mx, room, type, stateKey]
+    )
+  );
+  const submitting = submitState.status === AsyncStatus.Loading;
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    if (submitting) return;
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const contentTextArea = target?.contentTextArea as HTMLTextAreaElement | undefined;
+    if (!contentTextArea) return;
+
+    const contentStr = contentTextArea.value.trim();
+
+    let parsedContent: object;
+    try {
+      parsedContent = JSON.parse(contentStr);
+    } catch (e) {
+      setJSONError(e as SyntaxError);
+      return;
+    }
+    setJSONError(undefined);
+
+    if (
+      parsedContent === null ||
+      defaultContentStr === JSON.stringify(parsedContent, null, EDITOR_INTENT_SPACE_COUNT)
+    ) {
+      return;
+    }
+
+    submit(parsedContent).then(() => {
+      if (alive()) {
+        requestClose();
+      }
+    });
+  };
+
+  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">State Event</Text>
+        <SequenceCard
+          className={SequenceCardStyle}
+          variant="SurfaceVariant"
+          direction="Column"
+          gap="400"
+        >
+          <SettingTile
+            title={type}
+            description={stateKey}
+            after={
+              <Box gap="200">
+                <Button
+                  variant="Success"
+                  size="300"
+                  radii="300"
+                  type="submit"
+                  disabled={submitting}
+                  before={submitting && <Spinner variant="Primary" fill="Solid" size="300" />}
+                >
+                  <Text size="B300">Save</Text>
+                </Button>
+                <Button
+                  variant="Secondary"
+                  fill="Soft"
+                  size="300"
+                  radii="300"
+                  onClick={requestClose}
+                  disabled={submitting}
+                >
+                  <Text size="B300">Cancel</Text>
+                </Button>
+              </Box>
+            }
+          />
+        </SequenceCard>
+
+        {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={defaultContentStr}
+          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 StateEventViewProps = {
+  content: object;
+  eventJSONStr: string;
+  onEditContent?: (content: object) => void;
+};
+function StateEventView({ content, eventJSONStr, onEditContent }: StateEventViewProps) {
+  return (
+    <Box direction="Column" style={{ padding: config.space.S400 }} gap="400">
+      <Box grow="Yes" direction="Column" gap="100">
+        <Box gap="200" alignItems="End">
+          <Box grow="Yes">
+            <Text size="L400">State Event</Text>
+          </Box>
+          {onEditContent && (
+            <Box shrink="No" gap="200">
+              <Chip
+                variant="Secondary"
+                fill="Soft"
+                radii="300"
+                outlined
+                onClick={() => onEditContent(content)}
+              >
+                <Text size="B300">Edit</Text>
+              </Chip>
+            </Box>
+          )}
+        </Box>
+        <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={eventJSONStr}
+              langName="JSON"
+            />
+          </Scroll>
+        </SequenceCard>
+      </Box>
+    </Box>
+  );
+}
+
+export type StateEventInfo = {
+  type: string;
+  stateKey: string;
+};
+export type StateEventEditorProps = StateEventInfo & {
+  requestClose: () => void;
+};
+
+export function StateEventEditor({ type, stateKey, requestClose }: StateEventEditorProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const stateEvent = useStateEvent(room, type as unknown as StateEvent, stateKey);
+  const [editContent, setEditContent] = useState<object>();
+  const powerLevels = usePowerLevels(room);
+  const creators = useRoomCreators(room);
+
+  const permissions = useRoomPermissions(creators, powerLevels);
+  const canEdit = permissions.stateEvent(type, mx.getSafeUserId());
+
+  const eventJSONStr = useMemo(() => {
+    if (!stateEvent) return '';
+    return JSON.stringify(stateEvent.event, null, EDITOR_INTENT_SPACE_COUNT);
+  }, [stateEvent]);
+
+  const handleCloseEdit = useCallback(() => {
+    setEditContent(undefined);
+  }, []);
+
+  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">
+        {editContent ? (
+          <StateEventEdit
+            type={type}
+            stateKey={stateKey}
+            content={editContent}
+            requestClose={handleCloseEdit}
+          />
+        ) : (
+          <StateEventView
+            content={stateEvent?.getContent() ?? {}}
+            onEditContent={canEdit ? setEditContent : undefined}
+            eventJSONStr={eventJSONStr}
+          />
+        )}
+      </Box>
+    </Page>
+  );
+}

src/app/features/common-settings/developer-tools/index.ts

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

src/app/features/common-settings/emojis-stickers/EmojisStickers.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
+import { Page, PageContent, PageHeader } from '../../../components/page';
+import { ImagePack } from '../../../plugins/custom-emoji';
+import { ImagePackView } from '../../../components/image-pack-view';
+import { RoomPacks } from './RoomPacks';
+
+type EmojisStickersProps = {
+  requestClose: () => void;
+};
+export function EmojisStickers({ requestClose }: EmojisStickersProps) {
+  const [imagePack, setImagePack] = useState<ImagePack>();
+
+  const handleImagePackViewClose = () => {
+    setImagePack(undefined);
+  };
+
+  if (imagePack) {
+    return <ImagePackView address={imagePack.address} requestClose={handleImagePackViewClose} />;
+  }
+
+  return (
+    <Page>
+      <PageHeader outlined={false}>
+        <Box grow="Yes" gap="200">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <Text size="H3" truncate>
+              Emojis & Stickers
+            </Text>
+          </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>
+            <Box direction="Column" gap="700">
+              <RoomPacks onViewPack={setImagePack} />
+            </Box>
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}

src/app/features/common-settings/emojis-stickers/RoomPacks.tsx

@@ -0,0 +1,353 @@
+import React, { FormEventHandler, useCallback, useMemo, useState } from 'react';
+import {
+  Box,
+  Text,
+  Button,
+  Icon,
+  Icons,
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  toRem,
+  config,
+  Input,
+  Spinner,
+  color,
+  IconButton,
+  Menu,
+} from 'folds';
+import { MatrixError } from 'matrix-js-sdk';
+import { SequenceCard } from '../../../components/sequence-card';
+import {
+  ImagePack,
+  ImageUsage,
+  PackAddress,
+  packAddressEqual,
+  PackContent,
+} from '../../../plugins/custom-emoji';
+import { useRoom } from '../../../hooks/useRoom';
+import { useRoomImagePacks } from '../../../hooks/useImagePacks';
+import { LineClamp2 } from '../../../styles/Text.css';
+import { SettingTile } from '../../../components/setting-tile';
+import { SequenceCardStyle } from '../styles.css';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { mxcUrlToHttp } from '../../../utils/matrix';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { usePowerLevels } from '../../../hooks/usePowerLevels';
+import { StateEvent } from '../../../../types/matrix/room';
+import { suffixRename } from '../../../utils/common';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { useAlive } from '../../../hooks/useAlive';
+import { useRoomCreators } from '../../../hooks/useRoomCreators';
+import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
+
+type CreatePackTileProps = {
+  packs: ImagePack[];
+  roomId: string;
+};
+function CreatePackTile({ packs, roomId }: CreatePackTileProps) {
+  const mx = useMatrixClient();
+  const alive = useAlive();
+
+  const [addState, addPack] = useAsyncCallback<void, MatrixError, [string, string]>(
+    useCallback(
+      async (stateKey, name) => {
+        const content: PackContent = {
+          pack: {
+            display_name: name,
+          },
+        };
+        await mx.sendStateEvent(roomId, StateEvent.PoniesRoomEmotes as any, content, stateKey);
+      },
+      [mx, roomId]
+    )
+  );
+
+  const creating = addState.status === AsyncStatus.Loading;
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    if (creating) return;
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const nameInput = target?.nameInput as HTMLInputElement | undefined;
+    if (!nameInput) return;
+    const name = nameInput?.value.trim();
+    if (!name) return;
+
+    let packKey = name.replace(/\s/g, '-');
+
+    const hasPack = (k: string): boolean => !!packs.find((pack) => pack.address?.stateKey === k);
+    if (hasPack(packKey)) {
+      packKey = suffixRename(packKey, hasPack);
+    }
+
+    addPack(packKey, name).then(() => {
+      if (alive()) {
+        nameInput.value = '';
+      }
+    });
+  };
+
+  return (
+    <SequenceCard
+      className={SequenceCardStyle}
+      variant="SurfaceVariant"
+      direction="Column"
+      gap="400"
+    >
+      <SettingTile
+        title="New Pack"
+        description="Add your own emoji and sticker pack to use in room."
+      >
+        <Box
+          style={{ marginTop: config.space.S200 }}
+          as="form"
+          onSubmit={handleSubmit}
+          gap="200"
+          alignItems="End"
+        >
+          <Box direction="Column" gap="100" grow="Yes">
+            <Text size="L400">Name</Text>
+            <Input
+              name="nameInput"
+              required
+              size="400"
+              variant="Secondary"
+              radii="300"
+              readOnly={creating}
+            />
+            {addState.status === AsyncStatus.Error && (
+              <Text style={{ color: color.Critical.Main }} size="T300">
+                {addState.error.message}
+              </Text>
+            )}
+          </Box>
+          <Button
+            variant="Success"
+            radii="300"
+            type="submit"
+            disabled={creating}
+            before={creating && <Spinner size="200" variant="Success" fill="Solid" />}
+          >
+            <Text size="B400">Create</Text>
+          </Button>
+        </Box>
+      </SettingTile>
+    </SequenceCard>
+  );
+}
+
+type RoomPacksProps = {
+  onViewPack: (imagePack: ImagePack) => void;
+};
+export function RoomPacks({ onViewPack }: RoomPacksProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const room = useRoom();
+  const alive = useAlive();
+
+  const powerLevels = usePowerLevels(room);
+  const creators = useRoomCreators(room);
+
+  const permissions = useRoomPermissions(creators, powerLevels);
+  const canEdit = permissions.stateEvent(StateEvent.PoniesRoomEmotes, mx.getSafeUserId());
+
+  const unfilteredPacks = useRoomImagePacks(room);
+  const packs = useMemo(() => unfilteredPacks.filter((pack) => !pack.deleted), [unfilteredPacks]);
+
+  const [removedPacks, setRemovedPacks] = useState<PackAddress[]>([]);
+  const hasChanges = removedPacks.length > 0;
+
+  const [applyState, applyChanges] = useAsyncCallback(
+    useCallback(async () => {
+      for (let i = 0; i < removedPacks.length; i += 1) {
+        const addr = removedPacks[i];
+        // eslint-disable-next-line no-await-in-loop
+        await mx.sendStateEvent(room.roomId, StateEvent.PoniesRoomEmotes as any, {}, addr.stateKey);
+      }
+    }, [mx, room, removedPacks])
+  );
+  const applyingChanges = applyState.status === AsyncStatus.Loading;
+
+  const handleRemove = (address: PackAddress) => {
+    setRemovedPacks((addresses) => [...addresses, address]);
+  };
+
+  const handleUndoRemove = (address: PackAddress) => {
+    setRemovedPacks((addresses) => addresses.filter((addr) => !packAddressEqual(addr, address)));
+  };
+
+  const handleCancelChanges = () => setRemovedPacks([]);
+
+  const handleApplyChanges = () => {
+    applyChanges().then(() => {
+      if (alive()) {
+        setRemovedPacks([]);
+      }
+    });
+  };
+
+  const renderPack = (pack: ImagePack) => {
+    const avatarMxc = pack.getAvatarUrl(ImageUsage.Emoticon);
+    const avatarUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication) : undefined;
+    const { address } = pack;
+    if (!address) return null;
+    const removed = !!removedPacks.find((addr) => packAddressEqual(addr, address));
+
+    return (
+      <SequenceCard
+        key={pack.id}
+        className={SequenceCardStyle}
+        variant={removed ? 'Critical' : 'SurfaceVariant'}
+        direction="Column"
+        gap="400"
+      >
+        <SettingTile
+          title={
+            <span style={{ textDecoration: removed ? 'line-through' : undefined }}>
+              {pack.meta.name ?? 'Unknown'}
+            </span>
+          }
+          description={<span className={LineClamp2}>{pack.meta.attribution}</span>}
+          before={
+            <Box alignItems="Center" gap="300">
+              {canEdit &&
+                (removed ? (
+                  <IconButton
+                    size="300"
+                    radii="Pill"
+                    variant="Critical"
+                    onClick={() => handleUndoRemove(address)}
+                    disabled={applyingChanges}
+                  >
+                    <Icon src={Icons.Plus} size="100" />
+                  </IconButton>
+                ) : (
+                  <IconButton
+                    size="300"
+                    radii="Pill"
+                    variant="Secondary"
+                    onClick={() => handleRemove(address)}
+                    disabled={applyingChanges}
+                  >
+                    <Icon src={Icons.Cross} size="100" />
+                  </IconButton>
+                ))}
+              <Avatar size="300" radii="300">
+                {avatarUrl ? (
+                  <AvatarImage style={{ objectFit: 'contain' }} src={avatarUrl} />
+                ) : (
+                  <AvatarFallback>
+                    <Icon size="400" src={Icons.Sticker} filled />
+                  </AvatarFallback>
+                )}
+              </Avatar>
+            </Box>
+          }
+          after={
+            !removed && (
+              <Button
+                variant="Secondary"
+                fill="Soft"
+                size="300"
+                radii="300"
+                outlined
+                onClick={() => onViewPack(pack)}
+              >
+                <Text size="B300">View</Text>
+              </Button>
+            )
+          }
+        />
+      </SequenceCard>
+    );
+  };
+
+  return (
+    <>
+      <Box direction="Column" gap="100">
+        <Text size="L400">Packs</Text>
+        {canEdit && <CreatePackTile roomId={room.roomId} packs={packs} />}
+        {packs.map(renderPack)}
+        {packs.length === 0 && (
+          <SequenceCard
+            className={SequenceCardStyle}
+            variant="SurfaceVariant"
+            direction="Column"
+            gap="400"
+          >
+            <Box
+              justifyContent="Center"
+              direction="Column"
+              gap="200"
+              style={{
+                padding: `${config.space.S700} ${config.space.S400}`,
+                maxWidth: toRem(300),
+                margin: 'auto',
+              }}
+            >
+              <Text size="H5" align="Center">
+                No Packs
+              </Text>
+              <Text size="T200" align="Center">
+                There are no emoji or sticker packs to display at the moment.
+              </Text>
+            </Box>
+          </SequenceCard>
+        )}
+      </Box>
+
+      {hasChanges && (
+        <Menu
+          style={{
+            position: 'sticky',
+            padding: config.space.S200,
+            paddingLeft: config.space.S400,
+            bottom: config.space.S400,
+            left: config.space.S400,
+            right: 0,
+            zIndex: 1,
+          }}
+          variant="Critical"
+        >
+          <Box alignItems="Center" gap="400">
+            <Box grow="Yes" direction="Column">
+              {applyState.status === AsyncStatus.Error ? (
+                <Text size="T200">
+                  <b>Failed to remove packs! Please try again.</b>
+                </Text>
+              ) : (
+                <Text size="T200">
+                  <b>Delete selected packs. ({removedPacks.length} selected)</b>
+                </Text>
+              )}
+            </Box>
+            <Box shrink="No" gap="200">
+              <Button
+                size="300"
+                variant="Critical"
+                fill="None"
+                radii="300"
+                disabled={applyingChanges}
+                onClick={handleCancelChanges}
+              >
+                <Text size="B300">Cancel</Text>
+              </Button>
+              <Button
+                size="300"
+                variant="Critical"
+                radii="300"
+                disabled={applyingChanges}
+                before={applyingChanges && <Spinner variant="Critical" fill="Solid" size="100" />}
+                onClick={handleApplyChanges}
+              >
+                <Text size="B300">Delete</Text>
+              </Button>
+            </Box>
+          </Box>
+        </Menu>
+      )}
+    </>
+  );
+}

src/app/features/common-settings/emojis-stickers/index.ts

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

src/app/features/common-settings/general/RoomAddress.tsx

@@ -0,0 +1,436 @@
+import React, { FormEventHandler, useCallback, useState } from 'react';
+import {
+  Badge,
+  Box,
+  Button,
+  Checkbox,
+  Chip,
+  color,
+  config,
+  Icon,
+  Icons,
+  Input,
+  Spinner,
+  Text,
+  toRem,
+} from 'folds';
+import { MatrixError } from 'matrix-js-sdk';
+import { SettingTile } from '../../../components/setting-tile';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../../room-settings/styles.css';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useRoom } from '../../../hooks/useRoom';
+import {
+  useLocalAliases,
+  usePublishedAliases,
+  usePublishUnpublishAliases,
+  useSetMainAlias,
+} from '../../../hooks/useRoomAliases';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { CutoutCard } from '../../../components/cutout-card';
+import { getIdServer } from '../../../../util/matrixUtil';
+import { replaceSpaceWithDash } from '../../../utils/common';
+import { useAlive } from '../../../hooks/useAlive';
+import { StateEvent } from '../../../../types/matrix/room';
+import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
+
+type RoomPublishedAddressesProps = {
+  permissions: RoomPermissionsAPI;
+};
+
+export function RoomPublishedAddresses({ permissions }: RoomPublishedAddressesProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+
+  const canEditCanonical = permissions.stateEvent(
+    StateEvent.RoomCanonicalAlias,
+    mx.getSafeUserId()
+  );
+
+  const [canonicalAlias, publishedAliases] = usePublishedAliases(room);
+  const setMainAlias = useSetMainAlias(room);
+
+  const [mainState, setMain] = useAsyncCallback(setMainAlias);
+  const loading = mainState.status === AsyncStatus.Loading;
+
+  return (
+    <SequenceCard
+      className={SequenceCardStyle}
+      variant="SurfaceVariant"
+      direction="Column"
+      gap="400"
+    >
+      <SettingTile
+        title="Published Addresses"
+        description={
+          <span>
+            If access is <b>Public</b>, Published addresses will be used to join by anyone.
+          </span>
+        }
+      />
+      <CutoutCard variant="Surface" style={{ padding: config.space.S300 }}>
+        {publishedAliases.length === 0 ? (
+          <Box direction="Column" gap="100">
+            <Text size="L400">No Addresses</Text>
+            <Text size="T200">
+              To publish an address, it needs to be set as a local address first
+            </Text>
+          </Box>
+        ) : (
+          <Box direction="Column" gap="300">
+            {publishedAliases.map((alias) => (
+              <Box key={alias} as="span" gap="200" alignItems="Center">
+                <Box grow="Yes" gap="Inherit" alignItems="Center">
+                  <Text size="T300" truncate>
+                    {alias === canonicalAlias ? <b>{alias}</b> : alias}
+                  </Text>
+                  {alias === canonicalAlias && (
+                    <Badge variant="Success" fill="Solid" size="500">
+                      <Text size="L400">Main</Text>
+                    </Badge>
+                  )}
+                </Box>
+                {canEditCanonical && (
+                  <Box shrink="No" gap="100">
+                    {alias === canonicalAlias ? (
+                      <Chip
+                        variant="Warning"
+                        radii="Pill"
+                        fill="None"
+                        disabled={loading}
+                        onClick={() => setMain(undefined)}
+                      >
+                        <Text size="B300">Unset Main</Text>
+                      </Chip>
+                    ) : (
+                      <Chip
+                        variant="Success"
+                        radii="Pill"
+                        fill={canonicalAlias ? 'None' : 'Soft'}
+                        disabled={loading}
+                        onClick={() => setMain(alias)}
+                      >
+                        <Text size="B300">Set Main</Text>
+                      </Chip>
+                    )}
+                  </Box>
+                )}
+              </Box>
+            ))}
+
+            {mainState.status === AsyncStatus.Error && (
+              <Text size="T200" style={{ color: color.Critical.Main }}>
+                {(mainState.error as MatrixError).message}
+              </Text>
+            )}
+          </Box>
+        )}
+      </CutoutCard>
+    </SequenceCard>
+  );
+}
+
+function LocalAddressInput({ addLocalAlias }: { addLocalAlias: (alias: string) => Promise<void> }) {
+  const mx = useMatrixClient();
+  const userId = mx.getSafeUserId();
+  const server = getIdServer(userId);
+  const alive = useAlive();
+
+  const [addState, addAlias] = useAsyncCallback(addLocalAlias);
+  const adding = addState.status === AsyncStatus.Loading;
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    if (adding) return;
+    evt.preventDefault();
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const aliasInput = target?.aliasInput as HTMLInputElement | undefined;
+    if (!aliasInput) return;
+    const alias = replaceSpaceWithDash(aliasInput.value.trim());
+    if (!alias) return;
+
+    addAlias(`#${alias}:${server}`).then(() => {
+      if (alive()) {
+        aliasInput.value = '';
+      }
+    });
+  };
+
+  return (
+    <Box as="form" onSubmit={handleSubmit} direction="Column" gap="200">
+      <Box gap="200">
+        <Box grow="Yes" direction="Column">
+          <Input
+            name="aliasInput"
+            variant="Secondary"
+            size="400"
+            radii="300"
+            before={<Text size="T200">#</Text>}
+            readOnly={adding}
+            after={
+              <Text style={{ maxWidth: toRem(300) }} size="T200" truncate>
+                :{server}
+              </Text>
+            }
+          />
+        </Box>
+        <Box shrink="No">
+          <Button
+            variant="Success"
+            size="400"
+            radii="300"
+            type="submit"
+            disabled={adding}
+            before={adding && <Spinner size="100" variant="Success" fill="Solid" />}
+          >
+            <Text size="B400">Save</Text>
+          </Button>
+        </Box>
+      </Box>
+      {addState.status === AsyncStatus.Error && (
+        <Text style={{ color: color.Critical.Main }} size="T200">
+          {(addState.error as MatrixError).httpStatus === 409
+            ? 'Address is already in use!'
+            : (addState.error as MatrixError).message}
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+function LocalAddressesList({
+  localAliases,
+  removeLocalAlias,
+  canEditCanonical,
+}: {
+  localAliases: string[];
+  removeLocalAlias: (alias: string) => Promise<void>;
+  canEditCanonical?: boolean;
+}) {
+  const room = useRoom();
+  const alive = useAlive();
+
+  const [, publishedAliases] = usePublishedAliases(room);
+  const { publishAliases, unpublishAliases } = usePublishUnpublishAliases(room);
+
+  const [selectedAliases, setSelectedAliases] = useState<string[]>([]);
+  const selectHasPublished = selectedAliases.find((alias) => publishedAliases.includes(alias));
+
+  const toggleSelect = (alias: string) => {
+    setSelectedAliases((aliases) => {
+      if (aliases.includes(alias)) {
+        return aliases.filter((a) => a !== alias);
+      }
+      const newAliases = [...aliases];
+      newAliases.push(alias);
+      return newAliases;
+    });
+  };
+  const clearSelected = () => {
+    if (alive()) {
+      setSelectedAliases([]);
+    }
+  };
+
+  const [deleteState, deleteAliases] = useAsyncCallback(
+    useCallback(
+      async (aliases: string[]) => {
+        for (let i = 0; i < aliases.length; i += 1) {
+          const alias = aliases[i];
+          // eslint-disable-next-line no-await-in-loop
+          await removeLocalAlias(alias);
+        }
+      },
+      [removeLocalAlias]
+    )
+  );
+  const [publishState, publish] = useAsyncCallback(publishAliases);
+  const [unpublishState, unpublish] = useAsyncCallback(unpublishAliases);
+
+  const handleDelete = () => {
+    deleteAliases(selectedAliases).then(clearSelected);
+  };
+  const handlePublish = () => {
+    publish(selectedAliases).then(clearSelected);
+  };
+  const handleUnpublish = () => {
+    unpublish(selectedAliases).then(clearSelected);
+  };
+
+  const loading =
+    deleteState.status === AsyncStatus.Loading ||
+    publishState.status === AsyncStatus.Loading ||
+    unpublishState.status === AsyncStatus.Loading;
+  let error: MatrixError | undefined;
+  if (deleteState.status === AsyncStatus.Error) error = deleteState.error as MatrixError;
+  if (publishState.status === AsyncStatus.Error) error = publishState.error as MatrixError;
+  if (unpublishState.status === AsyncStatus.Error) error = unpublishState.error as MatrixError;
+
+  return (
+    <Box direction="Column" gap="300">
+      {selectedAliases.length > 0 && (
+        <Box gap="200">
+          <Box grow="Yes">
+            <Text size="L400">{selectedAliases.length} Selected</Text>
+          </Box>
+          <Box shrink="No" gap="Inherit">
+            {canEditCanonical &&
+              (selectHasPublished ? (
+                <Chip
+                  variant="Warning"
+                  radii="Pill"
+                  disabled={loading}
+                  onClick={handleUnpublish}
+                  before={
+                    unpublishState.status === AsyncStatus.Loading && (
+                      <Spinner size="100" variant="Warning" />
+                    )
+                  }
+                >
+                  <Text size="B300">Unpublish</Text>
+                </Chip>
+              ) : (
+                <Chip
+                  variant="Success"
+                  radii="Pill"
+                  disabled={loading}
+                  onClick={handlePublish}
+                  before={
+                    publishState.status === AsyncStatus.Loading && (
+                      <Spinner size="100" variant="Success" />
+                    )
+                  }
+                >
+                  <Text size="B300">Publish</Text>
+                </Chip>
+              ))}
+            <Chip
+              variant="Critical"
+              radii="Pill"
+              disabled={loading}
+              onClick={handleDelete}
+              before={
+                deleteState.status === AsyncStatus.Loading && (
+                  <Spinner size="100" variant="Critical" />
+                )
+              }
+            >
+              <Text size="B300">Delete</Text>
+            </Chip>
+          </Box>
+        </Box>
+      )}
+      {localAliases.map((alias) => {
+        const published = publishedAliases.includes(alias);
+        const selected = selectedAliases.includes(alias);
+
+        return (
+          <Box key={alias} as="span" alignItems="Center" gap="200">
+            <Box shrink="No">
+              <Checkbox
+                checked={selected}
+                onChange={() => toggleSelect(alias)}
+                size="50"
+                variant="Primary"
+                disabled={loading}
+              />
+            </Box>
+            <Box grow="Yes">
+              <Text size="T300" truncate>
+                {alias}
+              </Text>
+            </Box>
+            <Box shrink="No" gap="100">
+              {published && (
+                <Badge variant="Success" fill="Soft" size="500">
+                  <Text size="L400">Published</Text>
+                </Badge>
+              )}
+            </Box>
+          </Box>
+        );
+      })}
+      {error && (
+        <Text size="T200" style={{ color: color.Critical.Main }}>
+          {error.message}
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+export function RoomLocalAddresses({ permissions }: { permissions: RoomPermissionsAPI }) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+
+  const canEditCanonical = permissions.stateEvent(
+    StateEvent.RoomCanonicalAlias,
+    mx.getSafeUserId()
+  );
+
+  const [expand, setExpand] = useState(false);
+
+  const { localAliasesState, addLocalAlias, removeLocalAlias } = useLocalAliases(room.roomId);
+
+  return (
+    <SequenceCard
+      className={SequenceCardStyle}
+      variant="SurfaceVariant"
+      direction="Column"
+      gap="400"
+    >
+      <SettingTile
+        title="Local Addresses"
+        description="Set local address so users can join through your homeserver."
+        after={
+          <Button
+            type="button"
+            onClick={() => setExpand(!expand)}
+            size="300"
+            variant="Secondary"
+            fill="Soft"
+            outlined
+            radii="300"
+            before={
+              <Icon size="100" src={expand ? Icons.ChevronTop : Icons.ChevronBottom} filled />
+            }
+          >
+            <Text as="span" size="B300" truncate>
+              {expand ? 'Collapse' : 'Expand'}
+            </Text>
+          </Button>
+        }
+      />
+      {expand && (
+        <CutoutCard variant="Surface" style={{ padding: config.space.S300 }}>
+          {localAliasesState.status === AsyncStatus.Loading && (
+            <Box gap="100">
+              <Spinner variant="Secondary" size="100" />
+              <Text size="T200">Loading...</Text>
+            </Box>
+          )}
+          {localAliasesState.status === AsyncStatus.Success &&
+            (localAliasesState.data.length === 0 ? (
+              <Box direction="Column" gap="100">
+                <Text size="L400">No Addresses</Text>
+              </Box>
+            ) : (
+              <LocalAddressesList
+                localAliases={localAliasesState.data}
+                removeLocalAlias={removeLocalAlias}
+                canEditCanonical={canEditCanonical}
+              />
+            ))}
+          {localAliasesState.status === AsyncStatus.Error && (
+            <Box gap="100">
+              <Text size="T200" style={{ color: color.Critical.Main }}>
+                {localAliasesState.error.message}
+              </Text>
+            </Box>
+          )}
+        </CutoutCard>
+      )}
+      {expand && <LocalAddressInput addLocalAlias={addLocalAlias} />}
+    </SequenceCard>
+  );
+}

src/app/features/common-settings/general/RoomEncryption.tsx

@@ -0,0 +1,146 @@
+import {
+  Badge,
+  Box,
+  Button,
+  color,
+  config,
+  Dialog,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Spinner,
+  Text,
+} from 'folds';
+import React, { useCallback, useState } from 'react';
+import { MatrixError } from 'matrix-js-sdk';
+import FocusTrap from 'focus-trap-react';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../../room-settings/styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { StateEvent } from '../../../../types/matrix/room';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { useRoom } from '../../../hooks/useRoom';
+import { useStateEvent } from '../../../hooks/useStateEvent';
+import { stopPropagation } from '../../../utils/keyboard';
+import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
+
+const ROOM_ENC_ALGO = 'm.megolm.v1.aes-sha2';
+
+type RoomEncryptionProps = {
+  permissions: RoomPermissionsAPI;
+};
+export function RoomEncryption({ permissions }: RoomEncryptionProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+
+  const canEnable = permissions.stateEvent(StateEvent.RoomEncryption, mx.getSafeUserId());
+  const content = useStateEvent(room, StateEvent.RoomEncryption)?.getContent<{
+    algorithm: string;
+  }>();
+  const enabled = content?.algorithm === ROOM_ENC_ALGO;
+
+  const [enableState, enable] = useAsyncCallback(
+    useCallback(async () => {
+      await mx.sendStateEvent(room.roomId, StateEvent.RoomEncryption as any, {
+        algorithm: ROOM_ENC_ALGO,
+      });
+    }, [mx, room.roomId])
+  );
+
+  const enabling = enableState.status === AsyncStatus.Loading;
+
+  const [prompt, setPrompt] = useState(false);
+
+  const handleEnable = () => {
+    enable();
+    setPrompt(false);
+  };
+
+  return (
+    <SequenceCard
+      className={SequenceCardStyle}
+      variant="SurfaceVariant"
+      direction="Column"
+      gap="400"
+    >
+      <SettingTile
+        title="Room Encryption"
+        description={
+          enabled
+            ? 'Messages in this room are protected by end-to-end encryption.'
+            : 'Once enabled, encryption cannot be disabled!'
+        }
+        after={
+          enabled ? (
+            <Badge size="500" variant="Success" fill="Solid" radii="300">
+              <Text size="L400">Enabled</Text>
+            </Badge>
+          ) : (
+            <Button
+              size="300"
+              variant="Primary"
+              fill="Solid"
+              radii="300"
+              disabled={!canEnable}
+              onClick={() => setPrompt(true)}
+              before={enabling && <Spinner size="100" variant="Primary" fill="Solid" />}
+            >
+              <Text size="B300">Enable</Text>
+            </Button>
+          )
+        }
+      >
+        {enableState.status === AsyncStatus.Error && (
+          <Text style={{ color: color.Critical.Main }} size="T200">
+            {(enableState.error as MatrixError).message}
+          </Text>
+        )}
+        {prompt && (
+          <Overlay open backdrop={<OverlayBackdrop />}>
+            <OverlayCenter>
+              <FocusTrap
+                focusTrapOptions={{
+                  initialFocus: false,
+                  onDeactivate: () => setPrompt(false),
+                  clickOutsideDeactivates: true,
+                  escapeDeactivates: stopPropagation,
+                }}
+              >
+                <Dialog variant="Surface">
+                  <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">Enable Encryption</Text>
+                    </Box>
+                    <IconButton size="300" onClick={() => setPrompt(false)} radii="300">
+                      <Icon src={Icons.Cross} />
+                    </IconButton>
+                  </Header>
+                  <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+                    <Text priority="400">
+                      Are you sure? Once enabled, encryption cannot be disabled!
+                    </Text>
+                    <Button type="submit" variant="Primary" onClick={handleEnable}>
+                      <Text size="B400">Enable E2E Encryption</Text>
+                    </Button>
+                  </Box>
+                </Dialog>
+              </FocusTrap>
+            </OverlayCenter>
+          </Overlay>
+        )}
+      </SettingTile>
+    </SequenceCard>
+  );
+}

src/app/features/common-settings/general/RoomHistoryVisibility.tsx

@@ -0,0 +1,165 @@
+import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
+import {
+  Button,
+  color,
+  config,
+  Icon,
+  Icons,
+  Menu,
+  MenuItem,
+  PopOut,
+  RectCords,
+  Spinner,
+  Text,
+} from 'folds';
+import { HistoryVisibility, MatrixError } from 'matrix-js-sdk';
+import { RoomHistoryVisibilityEventContent } from 'matrix-js-sdk/lib/types';
+import FocusTrap from 'focus-trap-react';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../../room-settings/styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useRoom } from '../../../hooks/useRoom';
+import { StateEvent } from '../../../../types/matrix/room';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { useStateEvent } from '../../../hooks/useStateEvent';
+import { stopPropagation } from '../../../utils/keyboard';
+import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
+
+const useVisibilityStr = () =>
+  useMemo(
+    () => ({
+      [HistoryVisibility.Invited]: 'After Invite',
+      [HistoryVisibility.Joined]: 'After Join',
+      [HistoryVisibility.Shared]: 'All Messages',
+      [HistoryVisibility.WorldReadable]: 'All Messages (Guests)',
+    }),
+    []
+  );
+
+const useVisibilityMenu = () =>
+  useMemo(
+    () => [
+      HistoryVisibility.Shared,
+      HistoryVisibility.Invited,
+      HistoryVisibility.Joined,
+      HistoryVisibility.WorldReadable,
+    ],
+    []
+  );
+
+type RoomHistoryVisibilityProps = {
+  permissions: RoomPermissionsAPI;
+};
+export function RoomHistoryVisibility({ permissions }: RoomHistoryVisibilityProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+
+  const canEdit = permissions.stateEvent(StateEvent.RoomHistoryVisibility, mx.getSafeUserId());
+
+  const visibilityEvent = useStateEvent(room, StateEvent.RoomHistoryVisibility);
+  const historyVisibility: HistoryVisibility =
+    visibilityEvent?.getContent<RoomHistoryVisibilityEventContent>().history_visibility ??
+    HistoryVisibility.Shared;
+  const visibilityMenu = useVisibilityMenu();
+  const visibilityStr = useVisibilityStr();
+
+  const [menuAnchor, setMenuAnchor] = useState<RectCords>();
+
+  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuAnchor(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const [submitState, submit] = useAsyncCallback(
+    useCallback(
+      async (visibility: HistoryVisibility) => {
+        const content: RoomHistoryVisibilityEventContent = {
+          history_visibility: visibility,
+        };
+        await mx.sendStateEvent(room.roomId, StateEvent.RoomHistoryVisibility as any, content);
+      },
+      [mx, room.roomId]
+    )
+  );
+  const submitting = submitState.status === AsyncStatus.Loading;
+
+  const handleChange = (visibility: HistoryVisibility) => {
+    submit(visibility);
+    setMenuAnchor(undefined);
+  };
+
+  return (
+    <SequenceCard
+      className={SequenceCardStyle}
+      variant="SurfaceVariant"
+      direction="Column"
+      gap="400"
+    >
+      <SettingTile
+        title="Message History Visibility"
+        description="Changes to history visibility will only apply to future messages. The visibility of existing history will have no effect."
+        after={
+          <PopOut
+            anchor={menuAnchor}
+            position="Bottom"
+            align="End"
+            content={
+              <FocusTrap
+                focusTrapOptions={{
+                  initialFocus: false,
+                  returnFocusOnDeactivate: false,
+                  onDeactivate: () => setMenuAnchor(undefined),
+                  clickOutsideDeactivates: true,
+                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                  escapeDeactivates: stopPropagation,
+                }}
+              >
+                <Menu style={{ padding: config.space.S100 }}>
+                  {visibilityMenu.map((visibility) => (
+                    <MenuItem
+                      key={visibility}
+                      size="300"
+                      radii="300"
+                      onClick={() => handleChange(visibility)}
+                      aria-pressed={visibility === historyVisibility}
+                    >
+                      <Text as="span" size="T300" truncate>
+                        {visibilityStr[visibility]}
+                      </Text>
+                    </MenuItem>
+                  ))}
+                </Menu>
+              </FocusTrap>
+            }
+          >
+            <Button
+              variant="Secondary"
+              fill="Soft"
+              size="300"
+              radii="300"
+              outlined
+              disabled={!canEdit || submitting}
+              onClick={handleOpenMenu}
+              after={
+                submitting ? (
+                  <Spinner size="100" variant="Secondary" />
+                ) : (
+                  <Icon size="100" src={Icons.ChevronBottom} />
+                )
+              }
+            >
+              <Text size="B300">{visibilityStr[historyVisibility]}</Text>
+            </Button>
+          </PopOut>
+        }
+      >
+        {submitState.status === AsyncStatus.Error && (
+          <Text style={{ color: color.Critical.Main }} size="T200">
+            {(submitState.error as MatrixError).message}
+          </Text>
+        )}
+      </SettingTile>
+    </SequenceCard>
+  );
+}