Merge branch 'dev' into dev

.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.3.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.1
+        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.1
+        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@07ab29fd4a977ae4d2b275087cf67563dfdf0295
         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@07ab29fd4a977ae4d2b275087cf67563dfdf0295
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}

.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.3.0
         with:
           node-version: 20.12.2
           cache: 'npm'

.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.3.0
         with:
           node-version: 20.12.2
           cache: 'npm'
@@ -72,12 +72,12 @@ jobs:
       - name: Set up Docker Buildx
         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.4.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.4.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}

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} /
+  root * /path/to/cinny/dist
-  rewrite @nativeRouter {http.matchers.file.relative}
+  try_files {path} / index.html
-  root * /path/to/caddy/dist
   file_server
 }

package-lock.json

@@ -24,6 +24,7 @@
         "await-to-js": "3.0.0",
         "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",
@@ -48,12 +49,13 @@
         "matrix-js-sdk": "35.0.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.15",
         "vite-plugin-pwa": "0.20.5",
         "vite-plugin-static-copy": "1.0.4",
         "vite-plugin-top-level-await": "1.4.4"
@@ -4572,6 +4575,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",
@@ -5729,6 +5739,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",
@@ -9493,9 +9509,10 @@
       }
     },
     "node_modules/prismjs": {
-      "version": "1.29.0",
+      "version": "1.30.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
-      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -9654,6 +9671,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",
@@ -11277,13 +11304,14 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.0.13",
+      "version": "5.4.15",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.13.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.15.tgz",
-      "integrity": "sha512-/9ovhv2M2dGTuA+dY93B9trfyWMDRQw2jdVBhHNP6wr0oF34wG2i/N55801iZIpgUpnHDm4F/FabGQLyc+eOgg==",
+      "integrity": "sha512-6ANcZRivqL/4WtwPGTKNaosuNJr5tWiftOC7liM7G9+rMb8+oeJeyzymDu4rTN93seySBmbjSfsS3Vzr19KNtA==",
+      "license": "MIT",
       "dependencies": {
-        "esbuild": "^0.19.3",
+        "esbuild": "^0.21.3",
-        "postcss": "^8.4.32",
+        "postcss": "^8.4.43",
-        "rollup": "^4.2.0"
+        "rollup": "^4.20.0"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -11302,6 +11330,7 @@
         "less": "*",
         "lightningcss": "^1.21.0",
         "sass": "*",
+        "sass-embedded": "*",
         "stylus": "*",
         "sugarss": "*",
         "terser": "^5.4.0"
@@ -11319,6 +11348,9 @@
         "sass": {
           "optional": true
         },
+        "sass-embedded": {
+          "optional": true
+        },
         "stylus": {
           "optional": true
         },
@@ -11418,6 +11450,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

@@ -35,6 +35,7 @@
     "await-to-js": "3.0.0",
     "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",
@@ -59,12 +60,13 @@
     "matrix-js-sdk": "35.0.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.15",
     "vite-plugin-pwa": "0.20.5",
     "vite-plugin-static-copy": "1.0.4",
     "vite-plugin-top-level-await": "1.4.4"

src/app/components/AccountDataEditor.tsx

@@ -1,12 +1,4 @@
-import React, {
+import React, { FormEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-  FormEventHandler,
-  KeyboardEventHandler,
-  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 { Cursor } from '../plugins/text-area';
-import { useTextAreaIntentHandler } from '../../../hooks/useTextAreaIntent';
+import { syntaxErrorPosition } from '../utils/dom';
-import { Cursor, Intent, TextArea, TextAreaOperations } from '../../../plugins/text-area';
+import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { GetTarget } from '../../../plugins/text-area/type';
+import { Page, PageHeader } from './page';
-import { syntaxErrorPosition } from '../../../utils/dom';
+import { useAlive } from '../hooks/useAlive';
-import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { SequenceCard } from './sequence-card';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { TextViewerContent } from './text-viewer';
-import { Page, PageHeader } from '../../../components/page';
+import { useTextAreaCodeEditor } from '../hooks/useTextAreaCodeEditor';
-import { useAlive } from '../../../hooks/useAlive';
-import { SequenceCard } from '../../../components/sequence-card';
-import { TextViewerContent } from '../../../components/text-viewer';
 
 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) {
+function AccountDataEdit({
-  const mx = useMatrixClient();
+  type,
+  defaultContent,
+  submitChange,
+  onCancel,
+  onSave,
+}: AccountDataEditProps) {
   const alive = useAlive();
 
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const [jsonError, setJSONError] = useState<SyntaxError>();
 
-  const getTarget: GetTarget = useCallback(() => {
+  const { handleKeyDown, operations, getTarget } = useTextAreaCodeEditor(
-    const target = textAreaRef.current;
+    textAreaRef,
-    if (!target) throw new Error('TextArea element not found!');
+    EDITOR_INTENT_SPACE_COUNT
-    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 [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) {
+export function AccountDataEditor({
-  const mx = useMatrixClient();
+  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/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,149 @@
+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';
+
+type JoinRuleIcons = Record<JoinRule, IconSrc>;
+export const useRoomJoinRuleIcon = (): JoinRuleIcons =>
+  useMemo(
+    () => ({
+      [JoinRule.Invite]: Icons.HashLock,
+      [JoinRule.Knock]: Icons.HashLock,
+      [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,
+      [JoinRule.Restricted]: Icons.Space,
+      [JoinRule.Public]: Icons.SpaceGlobe,
+      [JoinRule.Private]: Icons.SpaceLock,
+    }),
+    []
+  );
+
+type JoinRuleLabels = Record<JoinRule, string>;
+export const useRoomJoinRuleLabel = (): JoinRuleLabels =>
+  useMemo(
+    () => ({
+      [JoinRule.Invite]: 'Invite Only',
+      [JoinRule.Knock]: 'Knock & Invite',
+      [JoinRule.Restricted]: 'Space Members',
+      [JoinRule.Public]: 'Public',
+      [JoinRule.Private]: 'Invite Only',
+    }),
+    []
+  );
+
+type JoinRulesSwitcherProps<T extends JoinRule[]> = {
+  icons: JoinRuleIcons;
+  labels: JoinRuleLabels;
+  rules: T;
+  value: T[number];
+  onChange: (value: T[number]) => void;
+  disabled?: boolean;
+  changing?: boolean;
+};
+export function JoinRulesSwitcher<T extends JoinRule[]>({
+  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: JoinRule) => {
+      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]} />}
+        after={
+          changing ? (
+            <Spinner size="100" variant="Secondary" fill="Soft" />
+          ) : (
+            <Icon size="100" src={Icons.ChevronBottom} />
+          )
+        }
+        onClick={handleOpenMenu}
+        disabled={disabled}
+      >
+        <Text size="B300">{labels[value]}</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,
@@ -73,6 +74,7 @@ export function RenderMessageContent({
     if (content.filename && content.filename !== content.body) {
       return (
         <MText
+          style={{ marginTop: config.space.S200 }}
           edited={edited}
           content={content}
           renderBody={(props) => (

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/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/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) {
-        addRecentEmoji(mx, emojiInfo.data);
+        if (addToRecentEmoji) {
+          addRecentEmoji(mx, emojiInfo.data);
+        }
         requestClose();
       }
     }

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/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';
@@ -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,

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 { GetPowerLevelTag } from '../../hooks/usePowerLevelTags';
+import colorMXID from '../../../util/colorMXID';
 
 type ReplyLayoutProps = {
   userColor?: string;
@@ -49,10 +50,28 @@ type ReplyProps = {
   replyEventId: string;
   threadRootId?: string | undefined;
   onClick?: MouseEventHandler | undefined;
+  getPowerLevel?: (userId: string) => number;
+  getPowerLevelTag?: GetPowerLevelTag;
+  accessibleTagColors?: Map<string, string>;
+  legacyUsernameColor?: boolean;
 };
 
 export const Reply = as<'div', ReplyProps>(
-  ({ room, timelineSet, replyEventId, threadRootId, onClick, ...props }, ref) => {
+  (
+    {
+      room,
+      timelineSet,
+      replyEventId,
+      threadRootId,
+      onClick,
+      getPowerLevel,
+      getPowerLevelTag,
+      accessibleTagColors,
+      legacyUsernameColor,
+      ...props
+    },
+    ref
+  ) => {
     const placeholderWidth = useMemo(() => randomNumberBetween(40, 400), []);
     const getFromLocalTimeline = useCallback(
       () => timelineSet?.findEventById(replyEventId),
@@ -62,6 +81,11 @@ export const Reply = as<'div', ReplyProps>(
 
     const { body } = replyEvent?.getContent() ?? {};
     const sender = replyEvent?.getSender();
+    const senderPL = sender && getPowerLevel?.(sender);
+    const powerTag = typeof senderPL === 'number' ? getPowerLevelTag?.(senderPL) : undefined;
+    const tagColor = powerTag?.color ? accessibleTagColors?.get(powerTag.color) : undefined;
+
+    const usernameColor = legacyUsernameColor ? colorMXID(sender ?? replyEventId) : tagColor;
 
     const fallbackBody = replyEvent?.isRedacted() ? (
       <MessageDeletedContent />
@@ -79,7 +103,7 @@ export const Reply = as<'div', ReplyProps>(
         )}
         <ReplyLayout
           as="button"
-          userColor={sender ? colorMXID(sender) : undefined}
+          userColor={usernameColor}
           username={
             sender && (
               <Text size="T300" truncate>

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

@@ -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/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/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/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,298 @@
+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, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
+import { useTextAreaCodeEditor } from '../../../hooks/useTextAreaCodeEditor';
+
+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 { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
+  const canEdit = canSendStateEvent(type, getPowerLevel(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,349 @@
+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, usePowerLevelsAPI } 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';
+
+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 { canSendStateEvent, getPowerLevel } = usePowerLevelsAPI(powerLevels);
+  const canEdit = canSendStateEvent(StateEvent.PoniesRoomEmotes, getPowerLevel(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,438 @@
+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 { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
+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';
+
+type RoomPublishedAddressesProps = {
+  powerLevels: IPowerLevels;
+};
+
+export function RoomPublishedAddresses({ powerLevels }: RoomPublishedAddressesProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
+  const canEditCanonical = powerLevelAPI.canSendStateEvent(
+    powerLevels,
+    StateEvent.RoomCanonicalAlias,
+    userPowerLevel
+  );
+
+  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({ powerLevels }: { powerLevels: IPowerLevels }) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
+  const canEditCanonical = powerLevelAPI.canSendStateEvent(
+    powerLevels,
+    StateEvent.RoomCanonicalAlias,
+    userPowerLevel
+  );
+
+  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,150 @@
+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 { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
+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';
+
+const ROOM_ENC_ALGO = 'm.megolm.v1.aes-sha2';
+
+type RoomEncryptionProps = {
+  powerLevels: IPowerLevels;
+};
+export function RoomEncryption({ powerLevels }: RoomEncryptionProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
+  const canEnable = powerLevelAPI.canSendStateEvent(
+    powerLevels,
+    StateEvent.RoomEncryption,
+    userPowerLevel
+  );
+  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,169 @@
+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 { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
+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';
+
+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 = {
+  powerLevels: IPowerLevels;
+};
+export function RoomHistoryVisibility({ powerLevels }: RoomHistoryVisibilityProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
+  const canEdit = powerLevelAPI.canSendStateEvent(
+    powerLevels,
+    StateEvent.RoomHistoryVisibility,
+    userPowerLevel
+  );
+
+  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>
+  );
+}

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

@@ -0,0 +1,130 @@
+import React, { useCallback, useMemo } from 'react';
+import { color, Text } from 'folds';
+import { JoinRule, MatrixError, RestrictedAllowType } from 'matrix-js-sdk';
+import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
+import { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
+import {
+  JoinRulesSwitcher,
+  useRoomJoinRuleIcon,
+  useRoomJoinRuleLabel,
+  useSpaceJoinRuleIcon,
+} from '../../../components/JoinRulesSwitcher';
+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 { useStateEvent } from '../../../hooks/useStateEvent';
+import { useSpaceOptionally } from '../../../hooks/useSpace';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { getStateEvents } from '../../../utils/room';
+
+type RestrictedRoomAllowContent = {
+  room_id: string;
+  type: RestrictedAllowType;
+};
+
+type RoomJoinRulesProps = {
+  powerLevels: IPowerLevels;
+};
+export function RoomJoinRules({ powerLevels }: RoomJoinRulesProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const roomVersion = parseInt(room.getVersion(), 10);
+  const allowRestricted = roomVersion >= 8;
+  const allowKnock = roomVersion >= 7;
+  const space = useSpaceOptionally();
+
+  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
+  const canEdit = powerLevelAPI.canSendStateEvent(
+    powerLevels,
+    StateEvent.RoomHistoryVisibility,
+    userPowerLevel
+  );
+
+  const joinRuleEvent = useStateEvent(room, StateEvent.RoomJoinRules);
+  const content = joinRuleEvent?.getContent<RoomJoinRulesEventContent>();
+  const rule: JoinRule = content?.join_rule ?? JoinRule.Invite;
+
+  const joinRules: Array<JoinRule> = useMemo(() => {
+    const r: JoinRule[] = [JoinRule.Invite];
+    if (allowKnock) {
+      r.push(JoinRule.Knock);
+    }
+    if (allowRestricted && space) {
+      r.push(JoinRule.Restricted);
+    }
+    r.push(JoinRule.Public);
+
+    return r;
+  }, [allowRestricted, allowKnock, space]);
+
+  const icons = useRoomJoinRuleIcon();
+  const spaceIcons = useSpaceJoinRuleIcon();
+  const labels = useRoomJoinRuleLabel();
+
+  const [submitState, submit] = useAsyncCallback(
+    useCallback(
+      async (joinRule: JoinRule) => {
+        const allow: RestrictedRoomAllowContent[] = [];
+        if (joinRule === JoinRule.Restricted) {
+          const parents = getStateEvents(room, StateEvent.SpaceParent).map((event) =>
+            event.getStateKey()
+          );
+          parents.forEach((parentRoomId) => {
+            if (!parentRoomId) return;
+            allow.push({
+              type: RestrictedAllowType.RoomMembership,
+              room_id: parentRoomId,
+            });
+          });
+        }
+
+        const c: RoomJoinRulesEventContent = {
+          join_rule: joinRule,
+        };
+        if (allow.length > 0) c.allow = allow;
+        await mx.sendStateEvent(room.roomId, StateEvent.RoomJoinRules as any, c);
+      },
+      [mx, room]
+    )
+  );
+
+  const submitting = submitState.status === AsyncStatus.Loading;
+
+  return (
+    <SequenceCard
+      className={SequenceCardStyle}
+      variant="SurfaceVariant"
+      direction="Column"
+      gap="400"
+    >
+      <SettingTile
+        title={room.isSpaceRoom() ? 'Space Access' : 'Room Access'}
+        description={
+          room.isSpaceRoom()
+            ? 'Change how people can join the space.'
+            : 'Change how people can join the room.'
+        }
+        after={
+          <JoinRulesSwitcher
+            icons={room.isSpaceRoom() ? spaceIcons : icons}
+            labels={labels}
+            rules={joinRules}
+            value={rule}
+            onChange={submit}
+            disabled={!canEdit || submitting}
+            changing={submitting}
+          />
+        }
+      >
+        {submitState.status === AsyncStatus.Error && (
+          <Text style={{ color: color.Critical.Main }} size="T200">
+            {(submitState.error as MatrixError).message}
+          </Text>
+        )}
+      </SettingTile>
+    </SequenceCard>
+  );
+}

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

@@ -0,0 +1,361 @@
+import {
+  Avatar,
+  Box,
+  Button,
+  Chip,
+  color,
+  Icon,
+  Icons,
+  Input,
+  Spinner,
+  Text,
+  TextArea,
+} from 'folds';
+import React, { FormEventHandler, useCallback, useMemo, useState } from 'react';
+import { useAtomValue } from 'jotai';
+import Linkify from 'linkify-react';
+import classNames from 'classnames';
+import { JoinRule, MatrixError } from 'matrix-js-sdk';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../../room-settings/styles.css';
+import { useRoom } from '../../../hooks/useRoom';
+import {
+  useRoomAvatar,
+  useRoomJoinRule,
+  useRoomName,
+  useRoomTopic,
+} from '../../../hooks/useRoomMeta';
+import { mDirectAtom } from '../../../state/mDirectList';
+import { BreakWord, LineClamp3 } from '../../../styles/Text.css';
+import { LINKIFY_OPTS } from '../../../plugins/react-custom-html-parser';
+import { RoomAvatar, RoomIcon } from '../../../components/room-avatar';
+import { mxcUrlToHttp } from '../../../utils/matrix';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { IPowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
+import { StateEvent } from '../../../../types/matrix/room';
+import { CompactUploadCardRenderer } from '../../../components/upload-card';
+import { useObjectURL } from '../../../hooks/useObjectURL';
+import { createUploadAtom, UploadSuccess } from '../../../state/upload';
+import { useFilePicker } from '../../../hooks/useFilePicker';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { useAlive } from '../../../hooks/useAlive';
+
+type RoomProfileEditProps = {
+  canEditAvatar: boolean;
+  canEditName: boolean;
+  canEditTopic: boolean;
+  avatar?: string;
+  name: string;
+  topic: string;
+  onClose: () => void;
+};
+export function RoomProfileEdit({
+  canEditAvatar,
+  canEditName,
+  canEditTopic,
+  avatar,
+  name,
+  topic,
+  onClose,
+}: RoomProfileEditProps) {
+  const room = useRoom();
+  const mx = useMatrixClient();
+  const alive = useAlive();
+  const useAuthentication = useMediaAuthentication();
+  const joinRule = useRoomJoinRule(room);
+  const [roomAvatar, setRoomAvatar] = useState(avatar);
+
+  const avatarUrl = roomAvatar
+    ? mxcUrlToHttp(mx, roomAvatar, useAuthentication) ?? undefined
+    : undefined;
+
+  const [imageFile, setImageFile] = useState<File>();
+  const avatarFileUrl = useObjectURL(imageFile);
+  const uploadingAvatar = avatarFileUrl ? roomAvatar === avatar : false;
+  const uploadAtom = useMemo(() => {
+    if (imageFile) return createUploadAtom(imageFile);
+    return undefined;
+  }, [imageFile]);
+
+  const pickFile = useFilePicker(setImageFile, false);
+
+  const handleRemoveUpload = useCallback(() => {
+    setImageFile(undefined);
+    setRoomAvatar(avatar);
+  }, [avatar]);
+
+  const handleUploaded = useCallback((upload: UploadSuccess) => {
+    setRoomAvatar(upload.mxc);
+  }, []);
+
+  const [submitState, submit] = useAsyncCallback(
+    useCallback(
+      async (roomAvatarMxc?: string | null, roomName?: string, roomTopic?: string) => {
+        if (roomAvatarMxc !== undefined) {
+          await mx.sendStateEvent(room.roomId, StateEvent.RoomAvatar as any, {
+            url: roomAvatarMxc,
+          });
+        }
+        if (roomName !== undefined) {
+          await mx.sendStateEvent(room.roomId, StateEvent.RoomName as any, { name: roomName });
+        }
+        if (roomTopic !== undefined) {
+          await mx.sendStateEvent(room.roomId, StateEvent.RoomTopic as any, { topic: roomTopic });
+        }
+      },
+      [mx, room.roomId]
+    )
+  );
+  const submitting = submitState.status === AsyncStatus.Loading;
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    if (uploadingAvatar) return;
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const nameInput = target?.nameInput as HTMLInputElement | undefined;
+    const topicTextArea = target?.topicTextArea as HTMLTextAreaElement | undefined;
+    if (!nameInput || !topicTextArea) return;
+
+    const roomName = nameInput.value.trim();
+    const roomTopic = topicTextArea.value.trim();
+
+    if (roomAvatar === avatar && roomName === name && roomTopic === topic) {
+      return;
+    }
+
+    submit(
+      roomAvatar === avatar ? undefined : roomAvatar || null,
+      roomName === name ? undefined : roomName,
+      roomTopic === topic ? undefined : roomTopic
+    ).then(() => {
+      if (alive()) {
+        onClose();
+      }
+    });
+  };
+
+  return (
+    <Box as="form" onSubmit={handleSubmit} direction="Column" gap="400">
+      <Box gap="400">
+        <Box grow="Yes" direction="Column" gap="100">
+          <Text size="L400">Avatar</Text>
+          {uploadAtom ? (
+            <Box gap="200" direction="Column">
+              <CompactUploadCardRenderer
+                uploadAtom={uploadAtom}
+                onRemove={handleRemoveUpload}
+                onComplete={handleUploaded}
+              />
+            </Box>
+          ) : (
+            <Box gap="200">
+              <Button
+                type="button"
+                size="300"
+                variant="Secondary"
+                fill="Soft"
+                radii="300"
+                disabled={!canEditAvatar || submitting}
+                onClick={() => pickFile('image/*')}
+              >
+                <Text size="B300">Upload</Text>
+              </Button>
+              {!roomAvatar && avatar && (
+                <Button
+                  type="button"
+                  size="300"
+                  variant="Success"
+                  fill="None"
+                  radii="300"
+                  disabled={!canEditAvatar || submitting}
+                  onClick={() => setRoomAvatar(avatar)}
+                >
+                  <Text size="B300">Reset</Text>
+                </Button>
+              )}
+              {roomAvatar && (
+                <Button
+                  type="button"
+                  size="300"
+                  variant="Critical"
+                  fill="None"
+                  radii="300"
+                  disabled={!canEditAvatar || submitting}
+                  onClick={() => setRoomAvatar(undefined)}
+                >
+                  <Text size="B300">Remove</Text>
+                </Button>
+              )}
+            </Box>
+          )}
+        </Box>
+        <Box shrink="No">
+          <Avatar size="500" radii="300">
+            <RoomAvatar
+              roomId={room.roomId}
+              src={avatarUrl}
+              alt={name}
+              renderFallback={() => (
+                <RoomIcon
+                  space={room.isSpaceRoom()}
+                  size="400"
+                  joinRule={joinRule?.join_rule ?? JoinRule.Invite}
+                  filled
+                />
+              )}
+            />
+          </Avatar>
+        </Box>
+      </Box>
+      <Box direction="Inherit" gap="100">
+        <Text size="L400">Name</Text>
+        <Input
+          name="nameInput"
+          defaultValue={name}
+          variant="Secondary"
+          radii="300"
+          readOnly={!canEditName || submitting}
+        />
+      </Box>
+      <Box direction="Inherit" gap="100">
+        <Text size="L400">Topic</Text>
+        <TextArea
+          name="topicTextArea"
+          defaultValue={topic}
+          variant="Secondary"
+          radii="300"
+          readOnly={!canEditTopic || submitting}
+        />
+      </Box>
+      {submitState.status === AsyncStatus.Error && (
+        <Text size="T200" style={{ color: color.Critical.Main }}>
+          {(submitState.error as MatrixError).message}
+        </Text>
+      )}
+      <Box gap="300">
+        <Button
+          type="submit"
+          variant="Success"
+          size="300"
+          radii="300"
+          disabled={uploadingAvatar || submitting}
+          before={submitting && <Spinner size="100" variant="Success" fill="Solid" />}
+        >
+          <Text size="B300">Save</Text>
+        </Button>
+        <Button
+          type="reset"
+          onClick={onClose}
+          variant="Secondary"
+          fill="Soft"
+          size="300"
+          radii="300"
+        >
+          <Text size="B300">Cancel</Text>
+        </Button>
+      </Box>
+    </Box>
+  );
+}
+
+type RoomProfileProps = {
+  powerLevels: IPowerLevels;
+};
+export function RoomProfile({ powerLevels }: RoomProfileProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const room = useRoom();
+  const directs = useAtomValue(mDirectAtom);
+  const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
+  const userPowerLevel = getPowerLevel(mx.getSafeUserId());
+
+  const avatar = useRoomAvatar(room, directs.has(room.roomId));
+  const name = useRoomName(room);
+  const topic = useRoomTopic(room);
+  const joinRule = useRoomJoinRule(room);
+
+  const canEditAvatar = canSendStateEvent(StateEvent.RoomAvatar, userPowerLevel);
+  const canEditName = canSendStateEvent(StateEvent.RoomName, userPowerLevel);
+  const canEditTopic = canSendStateEvent(StateEvent.RoomTopic, userPowerLevel);
+  const canEdit = canEditAvatar || canEditName || canEditTopic;
+
+  const avatarUrl = avatar
+    ? mxcUrlToHttp(mx, avatar, useAuthentication, 96, 96, 'crop') ?? undefined
+    : undefined;
+
+  const [edit, setEdit] = useState(false);
+
+  const handleCloseEdit = useCallback(() => setEdit(false), []);
+
+  return (
+    <Box direction="Column" gap="100">
+      <Text size="L400">Profile</Text>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="400"
+      >
+        {edit ? (
+          <RoomProfileEdit
+            canEditAvatar={canEditAvatar}
+            canEditName={canEditName}
+            canEditTopic={canEditTopic}
+            avatar={avatar}
+            name={name ?? ''}
+            topic={topic ?? ''}
+            onClose={handleCloseEdit}
+          />
+        ) : (
+          <Box gap="400">
+            <Box grow="Yes" direction="Column" gap="300">
+              <Box direction="Column" gap="100">
+                <Text className={BreakWord} size="H5">
+                  {name ?? 'Unknown'}
+                </Text>
+                {topic && (
+                  <Text className={classNames(BreakWord, LineClamp3)} size="T200">
+                    <Linkify options={LINKIFY_OPTS}>{topic}</Linkify>
+                  </Text>
+                )}
+              </Box>
+              {canEdit && (
+                <Box gap="200">
+                  <Chip
+                    variant="Secondary"
+                    fill="Soft"
+                    radii="300"
+                    before={<Icon size="50" src={Icons.Pencil} />}
+                    onClick={() => setEdit(true)}
+                    outlined
+                  >
+                    <Text size="B300">Edit</Text>
+                  </Chip>
+                </Box>
+              )}
+            </Box>
+            <Box shrink="No">
+              <Avatar size="500" radii="300">
+                <RoomAvatar
+                  roomId={room.roomId}
+                  src={avatarUrl}
+                  alt={name}
+                  renderFallback={() => (
+                    <RoomIcon
+                      space={room.isSpaceRoom()}
+                      size="400"
+                      joinRule={joinRule?.join_rule ?? JoinRule.Invite}
+                      filled
+                    />
+                  )}
+                />
+              </Avatar>
+            </Box>
+          </Box>
+        )}
+      </SequenceCard>
+    </Box>
+  );
+}

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Box, color, Spinner, Switch, Text } from 'folds';
+import { MatrixError } from 'matrix-js-sdk';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../../room-settings/styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+import { useRoom } from '../../../hooks/useRoom';
+import { useRoomDirectoryVisibility } from '../../../hooks/useRoomDirectoryVisibility';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
+import { StateEvent } from '../../../../types/matrix/room';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+
+type RoomPublishProps = {
+  powerLevels: IPowerLevels;
+};
+export function RoomPublish({ powerLevels }: RoomPublishProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
+  const canEditCanonical = powerLevelAPI.canSendStateEvent(
+    powerLevels,
+    StateEvent.RoomCanonicalAlias,
+    userPowerLevel
+  );
+
+  const { visibilityState, setVisibility } = useRoomDirectoryVisibility(room.roomId);
+
+  const [toggleState, toggleVisibility] = useAsyncCallback(setVisibility);
+
+  const loading =
+    visibilityState.status === AsyncStatus.Loading || toggleState.status === AsyncStatus.Loading;
+
+  return (
+    <SequenceCard
+      className={SequenceCardStyle}
+      variant="SurfaceVariant"
+      direction="Column"
+      gap="400"
+    >
+      <SettingTile
+        title="Publish To Directory"
+        after={
+          <Box gap="200" alignItems="Center">
+            {loading && <Spinner variant="Secondary" />}
+            {!loading && visibilityState.status === AsyncStatus.Success && (
+              <Switch
+                value={visibilityState.data}
+                onChange={toggleVisibility}
+                disabled={!canEditCanonical}
+              />
+            )}
+          </Box>
+        }
+      >
+        {visibilityState.status === AsyncStatus.Error && (
+          <Text style={{ color: color.Critical.Main }} size="T200">
+            {(visibilityState.error as MatrixError).message}
+          </Text>
+        )}
+
+        {toggleState.status === AsyncStatus.Error && (
+          <Text style={{ color: color.Critical.Main }} size="T200">
+            {(toggleState.error as MatrixError).message}
+          </Text>
+        )}
+      </SettingTile>
+    </SequenceCard>
+  );
+}

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

@@ -0,0 +1,228 @@
+import React, { FormEventHandler, useCallback, useState } from 'react';
+import {
+  Button,
+  color,
+  Spinner,
+  Text,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Dialog,
+  Header,
+  config,
+  Box,
+  IconButton,
+  Icon,
+  Icons,
+  Input,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { MatrixError } from 'matrix-js-sdk';
+import { RoomCreateEventContent, RoomTombstoneEventContent } from 'matrix-js-sdk/lib/types';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../../room-settings/styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+import { useRoom } from '../../../hooks/useRoom';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
+import { StateEvent } from '../../../../types/matrix/room';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useStateEvent } from '../../../hooks/useStateEvent';
+import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
+import { useCapabilities } from '../../../hooks/useCapabilities';
+import { stopPropagation } from '../../../utils/keyboard';
+
+type RoomUpgradeProps = {
+  powerLevels: IPowerLevels;
+  requestClose: () => void;
+};
+export function RoomUpgrade({ powerLevels, requestClose }: RoomUpgradeProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const { navigateRoom, navigateSpace } = useRoomNavigate();
+  const createContent = useStateEvent(
+    room,
+    StateEvent.RoomCreate
+  )?.getContent<RoomCreateEventContent>();
+  const roomVersion = createContent?.room_version ?? 1;
+  const predecessorRoomId = createContent?.predecessor?.room_id;
+
+  const capabilities = useCapabilities();
+  const defaultRoomVersion = capabilities['m.room_versions']?.default;
+
+  const tombstoneContent = useStateEvent(
+    room,
+    StateEvent.RoomTombstone
+  )?.getContent<RoomTombstoneEventContent>();
+  const replacementRoom = tombstoneContent?.replacement_room;
+
+  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
+  const canUpgrade = powerLevelAPI.canSendStateEvent(
+    powerLevels,
+    StateEvent.RoomTombstone,
+    userPowerLevel
+  );
+
+  const handleOpenRoom = () => {
+    if (replacementRoom) {
+      requestClose();
+      if (room.isSpaceRoom()) {
+        navigateSpace(replacementRoom);
+      } else {
+        navigateRoom(replacementRoom);
+      }
+    }
+  };
+
+  const handleOpenOldRoom = () => {
+    if (predecessorRoomId) {
+      requestClose();
+      if (room.isSpaceRoom()) {
+        navigateSpace(predecessorRoomId);
+      } else {
+        navigateRoom(predecessorRoomId, createContent.predecessor?.event_id);
+      }
+    }
+  };
+
+  const [upgradeState, upgrade] = useAsyncCallback(
+    useCallback(
+      async (version: string) => {
+        await mx.upgradeRoom(room.roomId, version);
+      },
+      [mx, room]
+    )
+  );
+
+  const upgrading = upgradeState.status === AsyncStatus.Loading;
+
+  const [prompt, setPrompt] = useState(false);
+
+  const handleSubmitUpgrade: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const versionInput = target?.versionInput as HTMLInputElement | undefined;
+    const version = versionInput?.value.trim();
+    if (!version) return;
+
+    upgrade(version);
+    setPrompt(false);
+  };
+
+  return (
+    <SequenceCard
+      className={SequenceCardStyle}
+      variant="SurfaceVariant"
+      direction="Column"
+      gap="400"
+    >
+      <SettingTile
+        title={room.isSpaceRoom() ? 'Upgrade Space' : 'Upgrade Room'}
+        description={
+          replacementRoom
+            ? tombstoneContent.body ||
+              `This ${room.isSpaceRoom() ? 'space' : 'room'} has been replaced!`
+            : `Current room version: ${roomVersion}.`
+        }
+        after={
+          <Box alignItems="Center" gap="200">
+            {predecessorRoomId && (
+              <Button
+                size="300"
+                variant="Secondary"
+                fill="Soft"
+                outlined
+                radii="300"
+                onClick={handleOpenOldRoom}
+              >
+                <Text size="B300">{room.isSpaceRoom() ? 'Old Space' : 'Old Room'}</Text>
+              </Button>
+            )}
+            {replacementRoom ? (
+              <Button
+                size="300"
+                variant="Success"
+                fill="Solid"
+                radii="300"
+                onClick={handleOpenRoom}
+              >
+                <Text size="B300">{room.isSpaceRoom() ? 'Open New Space' : 'Open New Room'}</Text>
+              </Button>
+            ) : (
+              <Button
+                size="300"
+                variant="Secondary"
+                fill="Solid"
+                radii="300"
+                disabled={upgrading || !canUpgrade}
+                before={upgrading && <Spinner size="100" variant="Secondary" fill="Solid" />}
+                onClick={() => setPrompt(true)}
+              >
+                <Text size="B300">Upgrade</Text>
+              </Button>
+            )}
+          </Box>
+        }
+      >
+        {upgradeState.status === AsyncStatus.Error && (
+          <Text style={{ color: color.Critical.Main }} size="T200">
+            {(upgradeState.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" as="form" onSubmit={handleSubmitUpgrade}>
+                  <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">{room.isSpaceRoom() ? 'Space Upgrade' : 'Room Upgrade'}</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" style={{ color: color.Critical.Main }}>
+                      <b>This action is irreversible!</b>
+                    </Text>
+                    <Box direction="Column" gap="100">
+                      <Text size="L400">Version</Text>
+                      <Input
+                        defaultValue={defaultRoomVersion}
+                        name="versionInput"
+                        variant="Background"
+                        required
+                      />
+                    </Box>
+                    <Button type="submit" variant="Secondary">
+                      <Text size="B400">
+                        {room.isSpaceRoom() ? 'Upgrade Space' : 'Upgrade Room'}
+                      </Text>
+                    </Button>
+                  </Box>
+                </Dialog>
+              </FocusTrap>
+            </OverlayCenter>
+          </Overlay>
+        )}
+      </SettingTile>
+    </SequenceCard>
+  );
+}

src/app/features/common-settings/general/index.ts

@@ -0,0 +1,7 @@
+export * from './RoomAddress';
+export * from './RoomEncryption';
+export * from './RoomHistoryVisibility';
+export * from './RoomJoinRules';
+export * from './RoomProfile';
+export * from './RoomPublish';
+export * from './RoomUpgrade';

src/app/features/common-settings/members/Members.tsx

@@ -0,0 +1,360 @@
+import React, {
+  ChangeEventHandler,
+  MouseEventHandler,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Box,
+  Chip,
+  config,
+  Icon,
+  IconButton,
+  Icons,
+  Input,
+  PopOut,
+  RectCords,
+  Scroll,
+  Spinner,
+  Text,
+  toRem,
+} from 'folds';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { RoomMember } from 'matrix-js-sdk';
+import { Page, PageContent, PageHeader } from '../../../components/page';
+import { useRoom } from '../../../hooks/useRoom';
+import { useRoomMembers } from '../../../hooks/useRoomMembers';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
+import {
+  useFlattenPowerLevelTagMembers,
+  usePowerLevelTags,
+} from '../../../hooks/usePowerLevelTags';
+import { VirtualTile } from '../../../components/virtualizer';
+import { MemberTile } from '../../../components/member-tile';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { getMxIdLocalPart, getMxIdServer } from '../../../utils/matrix';
+import { ServerBadge } from '../../../components/server-badge';
+import { openProfileViewer } from '../../../../client/action/navigation';
+import { useDebounce } from '../../../hooks/useDebounce';
+import {
+  SearchItemStrGetter,
+  useAsyncSearch,
+  UseAsyncSearchOptions,
+} from '../../../hooks/useAsyncSearch';
+import { getMemberSearchStr } from '../../../utils/room';
+import { useMembershipFilter, useMembershipFilterMenu } from '../../../hooks/useMemberFilter';
+import { useMemberSort, useMemberSortMenu } from '../../../hooks/useMemberSort';
+import { settingsAtom } from '../../../state/settings';
+import { useSetting } from '../../../state/hooks/settings';
+import { UseStateProvider } from '../../../components/UseStateProvider';
+import { MembershipFilterMenu } from '../../../components/MembershipFilterMenu';
+import { MemberSortMenu } from '../../../components/MemberSortMenu';
+import { ScrollTopContainer } from '../../../components/scroll-top-container';
+
+const SEARCH_OPTIONS: UseAsyncSearchOptions = {
+  limit: 1000,
+  matchOptions: {
+    contain: true,
+  },
+  normalizeOptions: {
+    ignoreWhitespace: false,
+  },
+};
+
+const mxIdToName = (mxId: string) => getMxIdLocalPart(mxId) ?? mxId;
+const getRoomMemberStr: SearchItemStrGetter<RoomMember> = (m, query) =>
+  getMemberSearchStr(m, query, mxIdToName);
+
+type MembersProps = {
+  requestClose: () => void;
+};
+export function Members({ requestClose }: MembersProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const room = useRoom();
+  const members = useRoomMembers(mx, room.roomId);
+  const fetchingMembers = members.length < room.getJoinedMemberCount();
+
+  const powerLevels = usePowerLevels(room);
+  const { getPowerLevel } = usePowerLevelsAPI(powerLevels);
+  const [, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
+
+  const [membershipFilterIndex, setMembershipFilterIndex] = useState(0);
+  const [sortFilterIndex, setSortFilterIndex] = useSetting(settingsAtom, 'memberSortFilterIndex');
+  const membershipFilter = useMembershipFilter(membershipFilterIndex, useMembershipFilterMenu());
+  const memberSort = useMemberSort(sortFilterIndex, useMemberSortMenu());
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
+
+  const sortedMembers = useMemo(
+    () =>
+      Array.from(members)
+        .filter(membershipFilter.filterFn)
+        .sort(memberSort.sortFn)
+        .sort((a, b) => b.powerLevel - a.powerLevel),
+    [members, membershipFilter, memberSort]
+  );
+
+  const [result, search, resetSearch] = useAsyncSearch(
+    sortedMembers,
+    getRoomMemberStr,
+    SEARCH_OPTIONS
+  );
+  if (!result && searchInputRef.current?.value) search(searchInputRef.current.value);
+
+  const flattenTagMembers = useFlattenPowerLevelTagMembers(
+    result?.items ?? sortedMembers,
+    getPowerLevel,
+    getPowerLevelTag
+  );
+
+  const virtualizer = useVirtualizer({
+    count: flattenTagMembers.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 40,
+    overscan: 10,
+  });
+
+  const handleSearchChange: ChangeEventHandler<HTMLInputElement> = useDebounce(
+    useCallback(
+      (evt) => {
+        if (evt.target.value) search(evt.target.value);
+        else resetSearch();
+      },
+      [search, resetSearch]
+    ),
+    { wait: 200 }
+  );
+
+  const handleSearchReset = () => {
+    if (searchInputRef.current) {
+      searchInputRef.current.value = '';
+      searchInputRef.current.focus();
+    }
+    resetSearch();
+  };
+
+  const handleMemberClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    const btn = evt.currentTarget as HTMLButtonElement;
+    const userId = btn.getAttribute('data-user-id');
+    openProfileViewer(userId, room.roomId);
+    requestClose();
+  };
+
+  return (
+    <Page>
+      <PageHeader outlined={false}>
+        <Box grow="Yes" gap="200">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <Text size="H3" truncate>
+              {room.getJoinedMemberCount()} Members
+            </Text>
+          </Box>
+          <Box shrink="No">
+            <IconButton onClick={requestClose} variant="Surface">
+              <Icon src={Icons.Cross} />
+            </IconButton>
+          </Box>
+        </Box>
+      </PageHeader>
+      <Box grow="Yes" style={{ position: 'relative' }}>
+        <Scroll ref={scrollRef} hideTrack visibility="Hover">
+          <PageContent>
+            <Box direction="Column" gap="200">
+              <Box
+                style={{ position: 'sticky', top: config.space.S100, zIndex: 1 }}
+                direction="Column"
+                gap="100"
+              >
+                <Input
+                  ref={searchInputRef}
+                  onChange={handleSearchChange}
+                  before={<Icon size="200" src={Icons.Search} />}
+                  variant="SurfaceVariant"
+                  size="500"
+                  placeholder="Search"
+                  outlined
+                  after={
+                    result && (
+                      <Chip
+                        variant={result.items.length > 0 ? 'Success' : 'Critical'}
+                        outlined
+                        size="400"
+                        radii="Pill"
+                        aria-pressed
+                        onClick={handleSearchReset}
+                        after={<Icon size="50" src={Icons.Cross} />}
+                      >
+                        <Text size="B300">
+                          {result.items.length === 0
+                            ? 'No Results'
+                            : `${result.items.length} Results`}
+                        </Text>
+                      </Chip>
+                    )
+                  }
+                />
+              </Box>
+              <Box ref={scrollTopAnchorRef} alignItems="Center" justifyContent="End" gap="200">
+                <UseStateProvider initial={undefined}>
+                  {(anchor: RectCords | undefined, setAnchor) => (
+                    <PopOut
+                      anchor={anchor}
+                      position="Bottom"
+                      align="Start"
+                      offset={4}
+                      content={
+                        <MembershipFilterMenu
+                          selected={membershipFilterIndex}
+                          onSelect={setMembershipFilterIndex}
+                          requestClose={() => setAnchor(undefined)}
+                        />
+                      }
+                    >
+                      <Chip
+                        onClick={
+                          ((evt) =>
+                            setAnchor(
+                              evt.currentTarget.getBoundingClientRect()
+                            )) as MouseEventHandler<HTMLButtonElement>
+                        }
+                        variant="SurfaceVariant"
+                        size="400"
+                        radii="300"
+                        before={<Icon src={Icons.Filter} size="50" />}
+                      >
+                        <Text size="T200">{membershipFilter.name}</Text>
+                      </Chip>
+                    </PopOut>
+                  )}
+                </UseStateProvider>
+                <UseStateProvider initial={undefined}>
+                  {(anchor: RectCords | undefined, setAnchor) => (
+                    <PopOut
+                      anchor={anchor}
+                      position="Bottom"
+                      align="End"
+                      offset={4}
+                      content={
+                        <MemberSortMenu
+                          selected={sortFilterIndex}
+                          onSelect={setSortFilterIndex}
+                          requestClose={() => setAnchor(undefined)}
+                        />
+                      }
+                    >
+                      <Chip
+                        onClick={
+                          ((evt) =>
+                            setAnchor(
+                              evt.currentTarget.getBoundingClientRect()
+                            )) as MouseEventHandler<HTMLButtonElement>
+                        }
+                        variant="SurfaceVariant"
+                        size="400"
+                        radii="300"
+                        after={<Icon src={Icons.Sort} size="50" />}
+                      >
+                        <Text size="T200">{memberSort.name}</Text>
+                      </Chip>
+                    </PopOut>
+                  )}
+                </UseStateProvider>
+              </Box>
+              <ScrollTopContainer
+                style={{ top: toRem(64) }}
+                scrollRef={scrollRef}
+                anchorRef={scrollTopAnchorRef}
+              >
+                <IconButton
+                  onClick={() => virtualizer.scrollToOffset(0)}
+                  variant="Surface"
+                  radii="Pill"
+                  outlined
+                  size="300"
+                  aria-label="Scroll to Top"
+                >
+                  <Icon src={Icons.ChevronTop} size="300" />
+                </IconButton>
+              </ScrollTopContainer>
+              {fetchingMembers && (
+                <Box justifyContent="Center">
+                  <Spinner />
+                </Box>
+              )}
+
+              {!fetchingMembers && !result && flattenTagMembers.length === 0 && (
+                <Text style={{ padding: config.space.S300 }} align="Center">
+                  {`No "${membershipFilter.name}" Members`}
+                </Text>
+              )}
+
+              <Box
+                style={{
+                  position: 'relative',
+                  height: virtualizer.getTotalSize(),
+                }}
+                direction="Column"
+                gap="100"
+              >
+                {virtualizer.getVirtualItems().map((vItem) => {
+                  const tagOrMember = flattenTagMembers[vItem.index];
+
+                  if ('userId' in tagOrMember) {
+                    const server = getMxIdServer(tagOrMember.userId);
+                    return (
+                      <VirtualTile
+                        virtualItem={vItem}
+                        key={`${tagOrMember.userId}-${vItem.index}`}
+                        ref={virtualizer.measureElement}
+                      >
+                        <div style={{ paddingTop: config.space.S200 }}>
+                          <MemberTile
+                            data-user-id={tagOrMember.userId}
+                            onClick={handleMemberClick}
+                            mx={mx}
+                            room={room}
+                            member={tagOrMember}
+                            useAuthentication={useAuthentication}
+                            after={
+                              server && (
+                                <Box as="span" shrink="No" alignSelf="End">
+                                  <ServerBadge server={server} fill="None" />
+                                </Box>
+                              )
+                            }
+                          />
+                        </div>
+                      </VirtualTile>
+                    );
+                  }
+
+                  return (
+                    <VirtualTile
+                      virtualItem={vItem}
+                      key={vItem.index}
+                      ref={virtualizer.measureElement}
+                    >
+                      <div
+                        style={{
+                          paddingTop: vItem.index === 0 ? 0 : config.space.S500,
+                        }}
+                      >
+                        <Text size="L400">{tagOrMember.name}</Text>
+                      </div>
+                    </VirtualTile>
+                  );
+                })}
+              </Box>
+            </Box>
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}

src/app/features/common-settings/members/index.ts

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

src/app/features/common-settings/permissions/PermissionGroups.tsx

@@ -0,0 +1,286 @@
+/* eslint-disable react/no-array-index-key */
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Badge, Box, Button, Chip, config, Icon, Icons, Menu, Spinner, Text } from 'folds';
+import produce from 'immer';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+import {
+  applyPermissionPower,
+  getPermissionPower,
+  IPowerLevels,
+  PermissionLocation,
+  usePowerLevelsAPI,
+} from '../../../hooks/usePowerLevels';
+import { PermissionGroup } from './types';
+import { getPowers, usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
+import { useRoom } from '../../../hooks/useRoom';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { StateEvent } from '../../../../types/matrix/room';
+import { PowerSwitcher } from '../../../components/power';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { useAlive } from '../../../hooks/useAlive';
+
+const USER_DEFAULT_LOCATION: PermissionLocation = {
+  user: true,
+};
+
+type PermissionGroupsProps = {
+  powerLevels: IPowerLevels;
+  permissionGroups: PermissionGroup[];
+};
+export function PermissionGroups({ powerLevels, permissionGroups }: PermissionGroupsProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const alive = useAlive();
+  const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
+  const canChangePermission = canSendStateEvent(
+    StateEvent.RoomPowerLevels,
+    getPowerLevel(mx.getSafeUserId())
+  );
+  const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
+  const maxPower = useMemo(() => Math.max(...getPowers(powerLevelTags)), [powerLevelTags]);
+
+  const [permissionUpdate, setPermissionUpdate] = useState<Map<PermissionLocation, number>>(
+    new Map()
+  );
+
+  useEffect(() => {
+    // reset permission update if component rerender
+    // as permission location object reference has changed
+    setPermissionUpdate(new Map());
+  }, [permissionGroups]);
+
+  const handleChangePermission = (
+    location: PermissionLocation,
+    newPower: number,
+    currentPower: number
+  ) => {
+    setPermissionUpdate((p) => {
+      const up: typeof p = new Map();
+      p.forEach((value, key) => {
+        up.set(key, value);
+      });
+      if (newPower === currentPower) {
+        up.delete(location);
+      } else {
+        up.set(location, newPower);
+      }
+      return up;
+    });
+  };
+
+  const [applyState, applyChanges] = useAsyncCallback(
+    useCallback(async () => {
+      const editedPowerLevels = produce(powerLevels, (draftPowerLevels) => {
+        permissionGroups.forEach((group) =>
+          group.items.forEach((item) => {
+            const power = getPermissionPower(powerLevels, item.location);
+            applyPermissionPower(draftPowerLevels, item.location, power);
+          })
+        );
+        permissionUpdate.forEach((power, location) =>
+          applyPermissionPower(draftPowerLevels, location, power)
+        );
+        return draftPowerLevels;
+      });
+      await mx.sendStateEvent(room.roomId, StateEvent.RoomPowerLevels as any, editedPowerLevels);
+    }, [mx, room, powerLevels, permissionUpdate, permissionGroups])
+  );
+
+  const resetChanges = useCallback(() => {
+    setPermissionUpdate(new Map());
+  }, []);
+
+  const handleApplyChanges = () => {
+    applyChanges().then(() => {
+      if (alive()) {
+        resetChanges();
+      }
+    });
+  };
+
+  const applyingChanges = applyState.status === AsyncStatus.Loading;
+  const hasChanges = permissionUpdate.size > 0;
+
+  const renderUserGroup = () => {
+    const power = getPermissionPower(powerLevels, USER_DEFAULT_LOCATION);
+    const powerUpdate = permissionUpdate.get(USER_DEFAULT_LOCATION);
+    const value = powerUpdate ?? power;
+
+    const tag = getPowerLevelTag(value);
+    const powerChanges = value !== power;
+
+    return (
+      <Box direction="Column" gap="100">
+        <Text size="L400">Users</Text>
+        <SequenceCard
+          variant="SurfaceVariant"
+          className={SequenceCardStyle}
+          direction="Column"
+          gap="400"
+        >
+          <SettingTile
+            title="Default Power"
+            description="Default power level for all users."
+            after={
+              <PowerSwitcher
+                powerLevelTags={powerLevelTags}
+                value={value}
+                onChange={(v) => handleChangePermission(USER_DEFAULT_LOCATION, v, power)}
+              >
+                {(handleOpen, opened) => (
+                  <Chip
+                    variant={powerChanges ? 'Success' : 'Secondary'}
+                    outlined={powerChanges}
+                    fill="Soft"
+                    radii="Pill"
+                    aria-selected={opened}
+                    disabled={!canChangePermission || applyingChanges}
+                    after={
+                      powerChanges && (
+                        <Badge size="200" variant="Success" fill="Solid" radii="Pill" />
+                      )
+                    }
+                    before={
+                      canChangePermission && (
+                        <Icon size="50" src={opened ? Icons.ChevronTop : Icons.ChevronBottom} />
+                      )
+                    }
+                    onClick={handleOpen}
+                  >
+                    <Text size="B300" truncate>
+                      {tag.name}
+                    </Text>
+                  </Chip>
+                )}
+              </PowerSwitcher>
+            }
+          />
+        </SequenceCard>
+      </Box>
+    );
+  };
+
+  return (
+    <>
+      {renderUserGroup()}
+      {permissionGroups.map((group, groupIndex) => (
+        <Box key={groupIndex} direction="Column" gap="100">
+          <Text size="L400">{group.name}</Text>
+          {group.items.map((item, itemIndex) => {
+            const power = getPermissionPower(powerLevels, item.location);
+            const powerUpdate = permissionUpdate.get(item.location);
+            const value = powerUpdate ?? power;
+
+            const tag = getPowerLevelTag(value);
+            const powerChanges = value !== power;
+
+            return (
+              <SequenceCard
+                key={itemIndex}
+                variant="SurfaceVariant"
+                className={SequenceCardStyle}
+                direction="Column"
+                gap="400"
+              >
+                <SettingTile
+                  title={item.name}
+                  description={item.description}
+                  after={
+                    <PowerSwitcher
+                      powerLevelTags={powerLevelTags}
+                      value={value}
+                      onChange={(v) => handleChangePermission(item.location, v, power)}
+                    >
+                      {(handleOpen, opened) => (
+                        <Chip
+                          variant={powerChanges ? 'Success' : 'Secondary'}
+                          outlined={powerChanges}
+                          fill="Soft"
+                          radii="Pill"
+                          aria-selected={opened}
+                          disabled={!canChangePermission || applyingChanges}
+                          after={
+                            powerChanges && (
+                              <Badge size="200" variant="Success" fill="Solid" radii="Pill" />
+                            )
+                          }
+                          before={
+                            canChangePermission && (
+                              <Icon
+                                size="50"
+                                src={opened ? Icons.ChevronTop : Icons.ChevronBottom}
+                              />
+                            )
+                          }
+                          onClick={handleOpen}
+                        >
+                          <Text size="B300" truncate>
+                            {tag.name}
+                          </Text>
+                          {value < maxPower && <Text size="T200">& Above</Text>}
+                        </Chip>
+                      )}
+                    </PowerSwitcher>
+                  }
+                />
+              </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="Success"
+        >
+          <Box alignItems="Center" gap="400">
+            <Box grow="Yes" direction="Column">
+              {applyState.status === AsyncStatus.Error ? (
+                <Text size="T200">
+                  <b>Failed to apply changes! Please try again.</b>
+                </Text>
+              ) : (
+                <Text size="T200">
+                  <b>Changes saved! Apply when ready.</b>
+                </Text>
+              )}
+            </Box>
+            <Box shrink="No" gap="200">
+              <Button
+                size="300"
+                variant="Success"
+                fill="None"
+                radii="300"
+                disabled={applyingChanges}
+                onClick={resetChanges}
+              >
+                <Text size="B300">Reset</Text>
+              </Button>
+              <Button
+                size="300"
+                variant="Success"
+                radii="300"
+                disabled={applyingChanges}
+                before={applyingChanges && <Spinner variant="Success" fill="Solid" size="100" />}
+                onClick={handleApplyChanges}
+              >
+                <Text size="B300">Apply Changes</Text>
+              </Button>
+            </Box>
+          </Box>
+        </Menu>
+      )}
+    </>
+  );
+}

src/app/features/common-settings/permissions/Powers.tsx

@@ -0,0 +1,176 @@
+/* eslint-disable react/no-array-index-key */
+import React, { useState, MouseEventHandler, ReactNode } from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+  Box,
+  Button,
+  Chip,
+  Text,
+  RectCords,
+  PopOut,
+  Menu,
+  Scroll,
+  toRem,
+  config,
+  color,
+} from 'folds';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../styles.css';
+import { getPowers, getTagIconSrc, usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
+import { SettingTile } from '../../../components/setting-tile';
+import { getPermissionPower, IPowerLevels } from '../../../hooks/usePowerLevels';
+import { useRoom } from '../../../hooks/useRoom';
+import { PowerColorBadge, PowerIcon } from '../../../components/power';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { stopPropagation } from '../../../utils/keyboard';
+import { PermissionGroup } from './types';
+
+type PeekPermissionsProps = {
+  powerLevels: IPowerLevels;
+  power: number;
+  permissionGroups: PermissionGroup[];
+  children: (handleOpen: MouseEventHandler<HTMLButtonElement>, opened: boolean) => ReactNode;
+};
+function PeekPermissions({ powerLevels, power, permissionGroups, children }: PeekPermissionsProps) {
+  const [menuCords, setMenuCords] = useState<RectCords>();
+
+  const handleOpen: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  return (
+    <PopOut
+      anchor={menuCords}
+      offset={5}
+      position="Bottom"
+      align="Center"
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: () => setMenuCords(undefined),
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Menu
+            style={{
+              maxHeight: '75vh',
+              maxWidth: toRem(300),
+              display: 'flex',
+            }}
+          >
+            <Box grow="Yes" tabIndex={0}>
+              <Scroll size="0" hideTrack visibility="Hover">
+                <Box style={{ padding: config.space.S200 }} direction="Column" gap="400">
+                  {permissionGroups.map((group, groupIndex) => (
+                    <Box key={groupIndex} direction="Column" gap="100">
+                      <Text size="L400">{group.name}</Text>
+                      <div>
+                        {group.items.map((item, itemIndex) => {
+                          const requiredPower = getPermissionPower(powerLevels, item.location);
+                          const hasPower = requiredPower <= power;
+
+                          return (
+                            <Text
+                              key={itemIndex}
+                              size="T200"
+                              style={{
+                                color: hasPower ? undefined : color.Critical.Main,
+                              }}
+                            >
+                              {hasPower ? '✅' : '❌'} {item.name}
+                            </Text>
+                          );
+                        })}
+                      </div>
+                    </Box>
+                  ))}
+                </Box>
+              </Scroll>
+            </Box>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      {children(handleOpen, !!menuCords)}
+    </PopOut>
+  );
+}
+
+type PowersProps = {
+  powerLevels: IPowerLevels;
+  permissionGroups: PermissionGroup[];
+  onEdit?: () => void;
+};
+export function Powers({ powerLevels, permissionGroups, onEdit }: PowersProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const room = useRoom();
+  const [powerLevelTags] = usePowerLevelTags(room, powerLevels);
+
+  return (
+    <Box direction="Column" gap="100">
+      <SequenceCard
+        variant="SurfaceVariant"
+        className={SequenceCardStyle}
+        direction="Column"
+        gap="400"
+      >
+        <SettingTile
+          title="Power Levels"
+          description="Manage and customize incremental power levels for users."
+          after={
+            onEdit && (
+              <Box gap="200">
+                <Button
+                  variant="Secondary"
+                  fill="Soft"
+                  size="300"
+                  radii="300"
+                  outlined
+                  onClick={onEdit}
+                >
+                  <Text size="B300">Edit</Text>
+                </Button>
+              </Box>
+            )
+          }
+        />
+        <SettingTile>
+          <Box gap="200" wrap="Wrap">
+            {getPowers(powerLevelTags).map((power) => {
+              const tag = powerLevelTags[power];
+              const tagIconSrc = tag.icon && getTagIconSrc(mx, useAuthentication, tag.icon);
+
+              return (
+                <PeekPermissions
+                  key={power}
+                  powerLevels={powerLevels}
+                  power={power}
+                  permissionGroups={permissionGroups}
+                >
+                  {(openMenu, opened) => (
+                    <Chip
+                      onClick={openMenu}
+                      variant="Secondary"
+                      aria-pressed={opened}
+                      radii="300"
+                      before={<PowerColorBadge color={tag.color} />}
+                      after={tagIconSrc && <PowerIcon size="50" iconSrc={tagIconSrc} />}
+                    >
+                      <Text size="T300" truncate>
+                        <b>{tag.name}</b>
+                      </Text>
+                    </Chip>
+                  )}
+                </PeekPermissions>
+              );
+            })}
+          </Box>
+        </SettingTile>
+      </SequenceCard>
+    </Box>
+  );
+}

src/app/features/common-settings/permissions/PowersEditor.tsx

@@ -0,0 +1,579 @@
+import React, { FormEventHandler, MouseEventHandler, useCallback, useMemo, useState } from 'react';
+import {
+  Box,
+  Text,
+  Chip,
+  Icon,
+  Icons,
+  IconButton,
+  Scroll,
+  Button,
+  Input,
+  RectCords,
+  PopOut,
+  Menu,
+  config,
+  Spinner,
+  toRem,
+  TooltipProvider,
+  Tooltip,
+} from 'folds';
+import { HexColorPicker } from 'react-colorful';
+import { useAtomValue } from 'jotai';
+import { Page, PageContent, PageHeader } from '../../../components/page';
+import { IPowerLevels } from '../../../hooks/usePowerLevels';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+import {
+  getPowers,
+  getTagIconSrc,
+  getUsedPowers,
+  PowerLevelTag,
+  PowerLevelTagIcon,
+  PowerLevelTags,
+  usePowerLevelTags,
+} from '../../../hooks/usePowerLevelTags';
+import { useRoom } from '../../../hooks/useRoom';
+import { HexColorPickerPopOut } from '../../../components/HexColorPickerPopOut';
+import { PowerColorBadge, PowerIcon } from '../../../components/power';
+import { UseStateProvider } from '../../../components/UseStateProvider';
+import { EmojiBoard } from '../../../components/emoji-board';
+import { useImagePackRooms } from '../../../hooks/useImagePackRooms';
+import { roomToParentsAtom } from '../../../state/room/roomToParents';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useFilePicker } from '../../../hooks/useFilePicker';
+import { CompactUploadCardRenderer } from '../../../components/upload-card';
+import { createUploadAtom, UploadSuccess } from '../../../state/upload';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { StateEvent } from '../../../../types/matrix/room';
+import { useAlive } from '../../../hooks/useAlive';
+import { BetaNoticeBadge } from '../../../components/BetaNoticeBadge';
+
+type EditPowerProps = {
+  maxPower: number;
+  power?: number;
+  tag?: PowerLevelTag;
+  onSave: (power: number, tag: PowerLevelTag) => void;
+  onClose: () => void;
+};
+function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const roomToParents = useAtomValue(roomToParentsAtom);
+  const useAuthentication = useMediaAuthentication();
+
+  const imagePackRooms = useImagePackRooms(room.roomId, roomToParents);
+
+  const [iconFile, setIconFile] = useState<File>();
+  const pickFile = useFilePicker(setIconFile, false);
+
+  const [tagColor, setTagColor] = useState<string | undefined>(tag?.color);
+  const [tagIcon, setTagIcon] = useState<PowerLevelTagIcon | undefined>(tag?.icon);
+  const uploadingIcon = iconFile && !tagIcon;
+  const tagIconSrc = tagIcon && getTagIconSrc(mx, useAuthentication, tagIcon);
+
+  const iconUploadAtom = useMemo(() => {
+    if (iconFile) return createUploadAtom(iconFile);
+    return undefined;
+  }, [iconFile]);
+
+  const handleRemoveIconUpload = useCallback(() => {
+    setIconFile(undefined);
+  }, []);
+
+  const handleIconUploaded = useCallback((upload: UploadSuccess) => {
+    setTagIcon({
+      key: upload.mxc,
+    });
+    setIconFile(undefined);
+  }, []);
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    if (uploadingIcon) return;
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const powerInput = target?.powerInput as HTMLInputElement | undefined;
+    const nameInput = target?.nameInput as HTMLInputElement | undefined;
+    if (!powerInput || !nameInput) return;
+
+    const tagPower = parseInt(powerInput.value, 10);
+    if (Number.isNaN(tagPower)) return;
+    if (tagPower > maxPower) return;
+    const tagName = nameInput.value.trim();
+    if (!tagName) return;
+
+    const editedTag: PowerLevelTag = {
+      name: tagName,
+      color: tagColor,
+      icon: tagIcon,
+    };
+
+    onSave(power ?? tagPower, editedTag);
+    onClose();
+  };
+
+  return (
+    <Box onSubmit={handleSubmit} as="form" direction="Column" gap="400">
+      <Box direction="Column" gap="300">
+        <Box gap="200">
+          <Box shrink="No" direction="Column" gap="100">
+            <Text size="L400">Color</Text>
+            <Box gap="200">
+              <HexColorPickerPopOut
+                picker={<HexColorPicker color={tagColor} onChange={setTagColor} />}
+                onRemove={() => setTagColor(undefined)}
+              >
+                {(openPicker, opened) => (
+                  <Button
+                    aria-pressed={opened}
+                    onClick={openPicker}
+                    size="300"
+                    type="button"
+                    variant="Secondary"
+                    fill="Soft"
+                    radii="300"
+                    before={<PowerColorBadge color={tagColor} />}
+                  >
+                    <Text size="B300">Pick</Text>
+                  </Button>
+                )}
+              </HexColorPickerPopOut>
+            </Box>
+          </Box>
+          <Box grow="Yes" direction="Column" gap="100">
+            <Text size="L400">Name</Text>
+            <Input
+              name="nameInput"
+              defaultValue={tag?.name}
+              placeholder="Bot"
+              size="300"
+              variant="Secondary"
+              radii="300"
+              required
+            />
+          </Box>
+          <Box style={{ maxWidth: toRem(74) }} grow="Yes" direction="Column" gap="100">
+            <Text size="L400">Power</Text>
+            <Input
+              defaultValue={power}
+              name="powerInput"
+              size="300"
+              variant={typeof power === 'number' ? 'SurfaceVariant' : 'Secondary'}
+              radii="300"
+              type="number"
+              placeholder="75"
+              max={maxPower}
+              outlined={typeof power === 'number'}
+              readOnly={typeof power === 'number'}
+              required
+            />
+          </Box>
+        </Box>
+      </Box>
+      <Box direction="Column" gap="100">
+        <Text size="L400">Icon</Text>
+        {iconUploadAtom && !tagIconSrc ? (
+          <CompactUploadCardRenderer
+            uploadAtom={iconUploadAtom}
+            onRemove={handleRemoveIconUpload}
+            onComplete={handleIconUploaded}
+          />
+        ) : (
+          <Box gap="200" alignItems="Center">
+            {tagIconSrc ? (
+              <>
+                <PowerIcon size="500" iconSrc={tagIconSrc} />
+                <Button
+                  onClick={() => setTagIcon(undefined)}
+                  type="button"
+                  size="300"
+                  variant="Critical"
+                  fill="None"
+                  radii="300"
+                >
+                  <Text size="B300">Remove</Text>
+                </Button>
+              </>
+            ) : (
+              <>
+                <UseStateProvider initial={undefined}>
+                  {(cords: RectCords | undefined, setCords) => (
+                    <PopOut
+                      position="Bottom"
+                      anchor={cords}
+                      content={
+                        <EmojiBoard
+                          imagePackRooms={imagePackRooms}
+                          returnFocusOnDeactivate={false}
+                          allowTextCustomEmoji={false}
+                          addToRecentEmoji={false}
+                          onEmojiSelect={(key) => {
+                            setTagIcon({ key });
+                            setCords(undefined);
+                          }}
+                          onCustomEmojiSelect={(mxc) => {
+                            setTagIcon({ key: mxc });
+                            setCords(undefined);
+                          }}
+                          requestClose={() => {
+                            setCords(undefined);
+                          }}
+                        />
+                      }
+                    >
+                      <Button
+                        onClick={
+                          ((evt) =>
+                            setCords(
+                              evt.currentTarget.getBoundingClientRect()
+                            )) as MouseEventHandler<HTMLButtonElement>
+                        }
+                        type="button"
+                        size="300"
+                        variant="Secondary"
+                        fill="Soft"
+                        radii="300"
+                        before={<Icon size="50" src={Icons.SmilePlus} />}
+                      >
+                        <Text size="B300">Pick</Text>
+                      </Button>
+                    </PopOut>
+                  )}
+                </UseStateProvider>
+                <Button
+                  onClick={() => pickFile('image/*')}
+                  type="button"
+                  size="300"
+                  variant="Secondary"
+                  fill="None"
+                  radii="300"
+                >
+                  <Text size="B300">Import</Text>
+                </Button>
+              </>
+            )}
+          </Box>
+        )}
+      </Box>
+      <Box direction="Row" gap="200" justifyContent="Start">
+        <Button
+          style={{ minWidth: toRem(64) }}
+          type="submit"
+          size="300"
+          variant="Success"
+          radii="300"
+          disabled={uploadingIcon}
+        >
+          <Text size="B300">Save</Text>
+        </Button>
+        <Button
+          type="button"
+          size="300"
+          variant="Secondary"
+          fill="Soft"
+          radii="300"
+          onClick={onClose}
+        >
+          <Text size="B300">Cancel</Text>
+        </Button>
+      </Box>
+    </Box>
+  );
+}
+
+type PowersEditorProps = {
+  powerLevels: IPowerLevels;
+  requestClose: () => void;
+};
+export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const room = useRoom();
+  const alive = useAlive();
+  const [usedPowers, maxPower] = useMemo(() => {
+    const up = getUsedPowers(powerLevels);
+    return [up, Math.max(...Array.from(up))];
+  }, [powerLevels]);
+
+  const [powerLevelTags] = usePowerLevelTags(room, powerLevels);
+  const [editedPowerTags, setEditedPowerTags] = useState<PowerLevelTags>();
+  const [deleted, setDeleted] = useState<Set<number>>(new Set());
+
+  const [createTag, setCreateTag] = useState(false);
+
+  const handleToggleDelete = useCallback((power: number) => {
+    setDeleted((powers) => {
+      const newIds = new Set(powers);
+      if (newIds.has(power)) {
+        newIds.delete(power);
+      } else {
+        newIds.add(power);
+      }
+      return newIds;
+    });
+  }, []);
+
+  const handleSaveTag = useCallback(
+    (power: number, tag: PowerLevelTag) => {
+      setEditedPowerTags((tags) => {
+        const editedTags = { ...(tags ?? powerLevelTags) };
+        editedTags[power] = tag;
+        return editedTags;
+      });
+    },
+    [powerLevelTags]
+  );
+
+  const [applyState, applyChanges] = useAsyncCallback(
+    useCallback(async () => {
+      const content: PowerLevelTags = { ...(editedPowerTags ?? powerLevelTags) };
+      deleted.forEach((power) => {
+        delete content[power];
+      });
+      await mx.sendStateEvent(room.roomId, StateEvent.PowerLevelTags as any, content);
+    }, [mx, room, powerLevelTags, editedPowerTags, deleted])
+  );
+
+  const resetChanges = useCallback(() => {
+    setEditedPowerTags(undefined);
+    setDeleted(new Set());
+  }, []);
+
+  const handleApplyChanges = () => {
+    applyChanges().then(() => {
+      if (alive()) {
+        resetChanges();
+      }
+    });
+  };
+
+  const applyingChanges = applyState.status === AsyncStatus.Loading;
+  const hasChanges = editedPowerTags || deleted.size > 0;
+
+  const powerTags = editedPowerTags ?? powerLevelTags;
+  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">Permissions</Text>
+            </Chip>
+          </Box>
+          <Box shrink="No">
+            <IconButton onClick={requestClose} variant="Surface">
+              <Icon src={Icons.Cross} />
+            </IconButton>
+          </Box>
+        </Box>
+      </PageHeader>
+      <Box grow="Yes">
+        <Scroll hideTrack visibility="Hover">
+          <PageContent>
+            <Box direction="Column" gap="700">
+              <Box direction="Column" gap="100">
+                <Box alignItems="Baseline" gap="200" justifyContent="SpaceBetween">
+                  <Text size="L400">Power Levels</Text>
+                  <BetaNoticeBadge />
+                </Box>
+                <SequenceCard
+                  variant="SurfaceVariant"
+                  className={SequenceCardStyle}
+                  direction="Column"
+                  gap="400"
+                >
+                  <SettingTile
+                    title="New Power Level"
+                    description="Create a new power level."
+                    after={
+                      !createTag && (
+                        <Button
+                          onClick={() => setCreateTag(true)}
+                          variant="Secondary"
+                          fill="Soft"
+                          size="300"
+                          radii="300"
+                          outlined
+                          disabled={applyingChanges}
+                        >
+                          <Text size="B300">Create</Text>
+                        </Button>
+                      )
+                    }
+                  />
+                  {createTag && (
+                    <EditPower
+                      maxPower={maxPower}
+                      onSave={handleSaveTag}
+                      onClose={() => setCreateTag(false)}
+                    />
+                  )}
+                </SequenceCard>
+                {getPowers(powerTags).map((power) => {
+                  const tag = powerTags[power];
+                  const tagIconSrc = tag.icon && getTagIconSrc(mx, useAuthentication, tag.icon);
+
+                  return (
+                    <SequenceCard
+                      key={power}
+                      variant={deleted.has(power) ? 'Critical' : 'SurfaceVariant'}
+                      className={SequenceCardStyle}
+                      direction="Column"
+                      gap="400"
+                    >
+                      <UseStateProvider initial={false}>
+                        {(edit, setEdit) =>
+                          edit ? (
+                            <EditPower
+                              maxPower={maxPower}
+                              power={power}
+                              tag={tag}
+                              onSave={handleSaveTag}
+                              onClose={() => setEdit(false)}
+                            />
+                          ) : (
+                            <SettingTile
+                              before={<PowerColorBadge color={tag.color} />}
+                              title={
+                                <Box as="span" alignItems="Center" gap="200">
+                                  <b>{deleted.has(power) ? <s>{tag.name}</s> : tag.name}</b>
+                                  <Box as="span" shrink="No" alignItems="Inherit" gap="Inherit">
+                                    {tagIconSrc && <PowerIcon size="50" iconSrc={tagIconSrc} />}
+                                    <Text as="span" size="T200" priority="300">
+                                      ({power})
+                                    </Text>
+                                  </Box>
+                                </Box>
+                              }
+                              after={
+                                deleted.has(power) ? (
+                                  <Chip
+                                    variant="Critical"
+                                    radii="Pill"
+                                    disabled={applyingChanges}
+                                    onClick={() => handleToggleDelete(power)}
+                                  >
+                                    <Text size="B300">Undo</Text>
+                                  </Chip>
+                                ) : (
+                                  <Box shrink="No" alignItems="Center" gap="200">
+                                    <TooltipProvider
+                                      tooltip={
+                                        <Tooltip style={{ maxWidth: toRem(200) }}>
+                                          {usedPowers.has(power) ? (
+                                            <Box direction="Column">
+                                              <Text size="L400">Used Power Level</Text>
+                                              <Text size="T200">
+                                                You have to remove its use before you can delete it.
+                                              </Text>
+                                            </Box>
+                                          ) : (
+                                            <Text>Delete</Text>
+                                          )}
+                                        </Tooltip>
+                                      }
+                                    >
+                                      {(triggerRef) => (
+                                        <Chip
+                                          ref={triggerRef}
+                                          variant="Secondary"
+                                          fill="None"
+                                          radii="Pill"
+                                          disabled={applyingChanges}
+                                          aria-disabled={usedPowers.has(power)}
+                                          onClick={
+                                            usedPowers.has(power)
+                                              ? undefined
+                                              : () => handleToggleDelete(power)
+                                          }
+                                        >
+                                          <Icon size="50" src={Icons.Delete} />
+                                        </Chip>
+                                      )}
+                                    </TooltipProvider>
+                                    <Chip
+                                      variant="Secondary"
+                                      radii="Pill"
+                                      disabled={applyingChanges}
+                                      onClick={() => setEdit(true)}
+                                    >
+                                      <Text size="B300">Edit</Text>
+                                    </Chip>
+                                  </Box>
+                                )
+                              }
+                            />
+                          )
+                        }
+                      </UseStateProvider>
+                    </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="Success"
+                >
+                  <Box alignItems="Center" gap="400">
+                    <Box grow="Yes" direction="Column">
+                      {applyState.status === AsyncStatus.Error ? (
+                        <Text size="T200">
+                          <b>Failed to apply changes! Please try again.</b>
+                        </Text>
+                      ) : (
+                        <Text size="T200">
+                          <b>Changes saved! Apply when ready.</b>
+                        </Text>
+                      )}
+                    </Box>
+                    <Box shrink="No" gap="200">
+                      <Button
+                        size="300"
+                        variant="Success"
+                        fill="None"
+                        radii="300"
+                        disabled={applyingChanges}
+                        onClick={resetChanges}
+                      >
+                        <Text size="B300">Reset</Text>
+                      </Button>
+                      <Button
+                        size="300"
+                        variant="Success"
+                        radii="300"
+                        disabled={applyingChanges}
+                        before={
+                          applyingChanges && <Spinner variant="Success" fill="Solid" size="100" />
+                        }
+                        onClick={handleApplyChanges}
+                      >
+                        <Text size="B300">Apply Changes</Text>
+                      </Button>
+                    </Box>
+                  </Box>
+                </Menu>
+              )}
+            </Box>
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}

src/app/features/common-settings/permissions/index.ts

@@ -0,0 +1,4 @@
+export * from './PermissionGroups';
+export * from './Powers';
+export * from './PowersEditor';
+export * from './types';

src/app/features/common-settings/permissions/types.ts

@@ -0,0 +1,12 @@
+import { PermissionLocation } from '../../../hooks/usePowerLevels';
+
+export type PermissionItem = {
+  location: PermissionLocation;
+  name: string;
+  description?: string;
+};
+
+export type PermissionGroup = {
+  name: string;
+  items: PermissionItem[];
+};

src/app/features/common-settings/styles.css.ts

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+import { config } from 'folds';
+
+export const SequenceCardStyle = style({
+  padding: config.space.S300,
+});

src/app/features/lobby/HierarchyItemMenu.tsx

@@ -18,16 +18,15 @@ import {
 import { HierarchyItem } from '../../hooks/useSpaceHierarchy';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { MSpaceChildContent, StateEvent } from '../../../types/matrix/room';
-import {
+import { openInviteUser } from '../../../client/action/navigation';
-  openInviteUser,
-  openSpaceSettings,
-  toggleRoomSettings,
-} from '../../../client/action/navigation';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveSpacePrompt } from '../../components/leave-space-prompt';
 import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
 import { stopPropagation } from '../../utils/keyboard';
+import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
+import { useSpaceOptionally } from '../../hooks/useSpace';
+import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
 
 type HierarchyItemWithParent = HierarchyItem & {
   parentId: string;
@@ -154,11 +153,15 @@ function SettingsMenuItem({
   requestClose: () => void;
   disabled?: boolean;
 }) {
+  const openRoomSettings = useOpenRoomSettings();
+  const openSpaceSettings = useOpenSpaceSettings();
+  const space = useSpaceOptionally();
+
   const handleSettings = () => {
     if ('space' in item) {
-      openSpaceSettings(item.roomId);
+      openSpaceSettings(item.roomId, item.parentId);
     } else {
-      toggleRoomSettings(item.roomId);
+      openRoomSettings(item.roomId, space?.roomId);
     }
     requestClose();
   };

src/app/features/lobby/LobbyHeader.tsx

@@ -26,7 +26,7 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { RoomAvatar } from '../../components/room-avatar';
 import { nameInitials } from '../../utils/common';
 import * as css from './LobbyHeader.css';
-import { openInviteUser, openSpaceSettings } from '../../../client/action/navigation';
+import { openInviteUser } from '../../../client/action/navigation';
 import { IPowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveSpacePrompt } from '../../components/leave-space-prompt';
@@ -35,6 +35,7 @@ import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../components/BackRouteHandler';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
 
 type LobbyMenuProps = {
   roomId: string;
@@ -46,6 +47,7 @@ const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
     const mx = useMatrixClient();
     const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
     const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
+    const openSpaceSettings = useOpenSpaceSettings();
 
     const handleInvite = () => {
       openInviteUser(roomId);
@@ -132,7 +134,9 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
 
   const name = useRoomName(space);
   const avatarMxc = useRoomAvatar(space);
-  const avatarUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined : undefined;
+  const avatarUrl = avatarMxc
+    ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined
+    : undefined;
 
   const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
     setMenuAnchor(evt.currentTarget.getBoundingClientRect());

src/app/features/message-search/MessageSearch.tsx

@@ -55,6 +55,8 @@ export function MessageSearch({
   const allRooms = useRooms(mx, allRoomsAtom, mDirects);
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
+  const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
+
   const searchInputRef = useRef<HTMLInputElement>(null);
   const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
   const [searchParams, setSearchParams] = useSearchParams();
@@ -297,6 +299,7 @@ export function MessageSearch({
                     mediaAutoLoad={mediaAutoLoad}
                     urlPreview={urlPreview}
                     onOpen={navigateRoom}
+                    legacyUsernameColor={legacyUsernameColor || mDirects.has(groupRoom.roomId)}
                   />
                 </VirtualTile>
               );

src/app/features/message-search/SearchResultGroup.tsx

@@ -25,6 +25,7 @@ import {
   Reply,
   Time,
   Username,
+  UsernameBold,
 } from '../../components/message';
 import { RenderMessageContent } from '../../components/RenderMessageContent';
 import { Image } from '../../components/media';
@@ -32,13 +33,21 @@ import { ImageViewer } from '../../components/image-viewer';
 import * as customHtmlCss from '../../styles/CustomHtml.css';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { getMemberAvatarMxc, getMemberDisplayName, getRoomAvatarUrl } from '../../utils/room';
-import colorMXID from '../../../util/colorMXID';
 import { ResultItem } from './useMessageSearch';
 import { SequenceCard } from '../../components/sequence-card';
 import { UserAvatar } from '../../components/user-avatar';
 import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
 import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { usePowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
+import {
+  getTagIconSrc,
+  useAccessibleTagColors,
+  usePowerLevelTags,
+} from '../../hooks/usePowerLevelTags';
+import { useTheme } from '../../hooks/useTheme';
+import { PowerIcon } from '../../components/power';
+import colorMXID from '../../../util/colorMXID';
 
 type SearchResultGroupProps = {
   room: Room;
@@ -47,6 +56,7 @@ type SearchResultGroupProps = {
   mediaAutoLoad?: boolean;
   urlPreview?: boolean;
   onOpen: (roomId: string, eventId: string) => void;
+  legacyUsernameColor?: boolean;
 };
 export function SearchResultGroup({
   room,
@@ -55,11 +65,18 @@ export function SearchResultGroup({
   mediaAutoLoad,
   urlPreview,
   onOpen,
+  legacyUsernameColor,
 }: SearchResultGroupProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const highlightRegex = useMemo(() => makeHighlightRegex(highlights), [highlights]);
 
+  const powerLevels = usePowerLevels(room);
+  const { getPowerLevel } = usePowerLevelsAPI(powerLevels);
+  const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
+  const theme = useTheme();
+  const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
+
   const mentionClickHandler = useMentionClickHandler(room.roomId);
   const spoilerClickHandler = useSpoilerClickHandler();
 
@@ -81,7 +98,15 @@ export function SearchResultGroup({
         handleSpoilerClick: spoilerClickHandler,
         handleMentionClick: mentionClickHandler,
       }),
-    [mx, room, linkifyOpts, highlightRegex, mentionClickHandler, spoilerClickHandler, useAuthentication]
+    [
+      mx,
+      room,
+      linkifyOpts,
+      highlightRegex,
+      mentionClickHandler,
+      spoilerClickHandler,
+      useAuthentication,
+    ]
   );
 
   const renderMatrixEvent = useMatrixEventRenderer<[IEventWithRoomId, string, GetContentCallback]>(
@@ -197,6 +222,17 @@ export function SearchResultGroup({
           const threadRootId =
             relation?.rel_type === RelationType.Thread ? relation.event_id : undefined;
 
+          const senderPowerLevel = getPowerLevel(event.sender);
+          const powerLevelTag = getPowerLevelTag(senderPowerLevel);
+          const tagColor = powerLevelTag?.color
+            ? accessibleTagColors?.get(powerLevelTag.color)
+            : undefined;
+          const tagIconSrc = powerLevelTag?.icon
+            ? getTagIconSrc(mx, useAuthentication, powerLevelTag.icon)
+            : undefined;
+
+          const usernameColor = legacyUsernameColor ? colorMXID(event.sender) : tagColor;
+
           return (
             <SequenceCard
               key={event.event_id}
@@ -212,7 +248,14 @@ export function SearchResultGroup({
                         userId={event.sender}
                         src={
                           senderAvatarMxc
-                            ? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ?? undefined
+                            ? mxcUrlToHttp(
+                                mx,
+                                senderAvatarMxc,
+                                useAuthentication,
+                                48,
+                                48,
+                                'crop'
+                              ) ?? undefined
                             : undefined
                         }
                         alt={displayName}
@@ -224,11 +267,14 @@ export function SearchResultGroup({
               >
                 <Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
                   <Box gap="200" alignItems="Baseline">
-                    <Username style={{ color: colorMXID(event.sender) }}>
+                    <Box alignItems="Center" gap="200">
-                      <Text as="span" truncate>
+                      <Username style={{ color: usernameColor }}>
-                        <b>{displayName}</b>
+                        <Text as="span" truncate>
-                      </Text>
+                          <UsernameBold>{displayName}</UsernameBold>
-                    </Username>
+                        </Text>
+                      </Username>
+                      {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
+                    </Box>
                     <Time ts={event.origin_server_ts} />
                   </Box>
                   <Box shrink="No" gap="200" alignItems="Center">
@@ -244,11 +290,14 @@ export function SearchResultGroup({
                 </Box>
                 {replyEventId && (
                   <Reply
-                    mx={mx}
                     room={room}
                     replyEventId={replyEventId}
                     threadRootId={threadRootId}
                     onClick={handleOpenClick}
+                    getPowerLevel={getPowerLevel}
+                    getPowerLevelTag={getPowerLevelTag}
+                    accessibleTagColors={accessibleTagColors}
+                    legacyUsernameColor={legacyUsernameColor}
                   />
                 )}
                 {renderMatrixEvent(event.type, false, event, displayName, getContent)}

src/app/features/room-nav/RoomNavItem.tsx

@@ -15,6 +15,7 @@ import {
   Line,
   RectCords,
   Badge,
+  Spinner,
 } from 'folds';
 import { useFocusWithin, useHover } from 'react-aria';
 import FocusTrap from 'focus-trap-react';
@@ -29,7 +30,7 @@ import { roomToUnreadAtom } from '../../state/room/roomToUnread';
 import { usePowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
 import { copyToClipboard } from '../../utils/dom';
 import { markAsRead } from '../../../client/action/notifications';
-import { openInviteUser, toggleRoomSettings } from '../../../client/action/navigation';
+import { openInviteUser } from '../../../client/action/navigation';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
 import { useRoomTypingMember } from '../../hooks/useRoomTypingMembers';
@@ -41,19 +42,29 @@ import { getViaServers } from '../../plugins/via-servers';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
+import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
+import { useSpaceOptionally } from '../../hooks/useSpace';
+import {
+  getRoomNotificationModeIcon,
+  RoomNotificationMode,
+} from '../../hooks/useRoomsNotificationPreferences';
+import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
 
 type RoomNavItemMenuProps = {
   room: Room;
   requestClose: () => void;
+  notificationMode?: RoomNotificationMode;
 };
 const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
-  ({ room, requestClose }, ref) => {
+  ({ room, requestClose, notificationMode }, ref) => {
     const mx = useMatrixClient();
     const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
     const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
     const powerLevels = usePowerLevels(room);
     const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
     const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
+    const openRoomSettings = useOpenRoomSettings();
+    const space = useSpaceOptionally();
 
     const handleMarkAsRead = () => {
       markAsRead(mx, room.roomId, hideActivity);
@@ -73,7 +84,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
     };
 
     const handleRoomSettings = () => {
-      toggleRoomSettings(room.roomId);
+      openRoomSettings(room.roomId, space?.roomId);
       requestClose();
     };
 
@@ -91,6 +102,27 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
               Mark as Read
             </Text>
           </MenuItem>
+          <RoomNotificationModeSwitcher roomId={room.roomId} value={notificationMode}>
+            {(handleOpen, opened, changing) => (
+              <MenuItem
+                size="300"
+                after={
+                  changing ? (
+                    <Spinner size="100" variant="Secondary" />
+                  ) : (
+                    <Icon size="100" src={getRoomNotificationModeIcon(notificationMode)} />
+                  )
+                }
+                radii="300"
+                aria-pressed={opened}
+                onClick={handleOpen}
+              >
+                <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+                  Notifications
+                </Text>
+              </MenuItem>
+            )}
+          </RoomNotificationModeSwitcher>
         </Box>
         <Line variant="Surface" size="300" />
         <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
@@ -166,7 +198,7 @@ type RoomNavItemProps = {
   room: Room;
   selected: boolean;
   linkPath: string;
-  muted?: boolean;
+  notificationMode?: RoomNotificationMode;
   showAvatar?: boolean;
   direct?: boolean;
 };
@@ -175,7 +207,7 @@ export function RoomNavItem({
   selected,
   showAvatar,
   direct,
-  muted,
+  notificationMode,
   linkPath,
 }: RoomNavItemProps) {
   const mx = useMatrixClient();
@@ -259,7 +291,9 @@ export function RoomNavItem({
                 <UnreadBadge highlight={unread.highlight > 0} count={unread.total} />
               </UnreadBadgeCenter>
             )}
-            {muted && !optionsVisible && <Icon size="50" src={Icons.BellMute} />}
+            {!optionsVisible && notificationMode !== RoomNotificationMode.Unset && (
+              <Icon size="50" src={getRoomNotificationModeIcon(notificationMode)} />
+            )}
           </Box>
         </NavItemContent>
       </NavLink>
@@ -283,7 +317,11 @@ export function RoomNavItem({
                   escapeDeactivates: stopPropagation,
                 }}
               >
-                <RoomNavItemMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
+                <RoomNavItemMenu
+                  room={room}
+                  requestClose={() => setMenuAnchor(undefined)}
+                  notificationMode={notificationMode}
+                />
               </FocusTrap>
             }
           >

src/app/features/room-settings/RoomSettings.tsx

@@ -0,0 +1,172 @@
+import React, { useMemo, useState } from 'react';
+import { useAtomValue } from 'jotai';
+import { Avatar, Box, config, Icon, IconButton, Icons, IconSrc, MenuItem, Text } from 'folds';
+import { JoinRule } from 'matrix-js-sdk';
+import { PageNav, PageNavContent, PageNavHeader, PageRoot } from '../../components/page';
+import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { mxcUrlToHttp } from '../../utils/matrix';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useRoomAvatar, useRoomJoinRule, useRoomName } from '../../hooks/useRoomMeta';
+import { mDirectAtom } from '../../state/mDirectList';
+import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
+import { General } from './general';
+import { Members } from '../common-settings/members';
+import { EmojisStickers } from '../common-settings/emojis-stickers';
+import { Permissions } from './permissions';
+import { RoomSettingsPage } from '../../state/roomSettings';
+import { useRoom } from '../../hooks/useRoom';
+import { DeveloperTools } from '../common-settings/developer-tools';
+
+type RoomSettingsMenuItem = {
+  page: RoomSettingsPage;
+  name: string;
+  icon: IconSrc;
+};
+
+const useRoomSettingsMenuItems = (): RoomSettingsMenuItem[] =>
+  useMemo(
+    () => [
+      {
+        page: RoomSettingsPage.GeneralPage,
+        name: 'General',
+        icon: Icons.Setting,
+      },
+      {
+        page: RoomSettingsPage.MembersPage,
+        name: 'Members',
+        icon: Icons.User,
+      },
+      {
+        page: RoomSettingsPage.PermissionsPage,
+        name: 'Permissions',
+        icon: Icons.Lock,
+      },
+      {
+        page: RoomSettingsPage.EmojisStickersPage,
+        name: 'Emojis & Stickers',
+        icon: Icons.Smile,
+      },
+      {
+        page: RoomSettingsPage.DeveloperToolsPage,
+        name: 'Developer Tools',
+        icon: Icons.Terminal,
+      },
+    ],
+    []
+  );
+
+type RoomSettingsProps = {
+  initialPage?: RoomSettingsPage;
+  requestClose: () => void;
+};
+export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) {
+  const room = useRoom();
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const mDirects = useAtomValue(mDirectAtom);
+
+  const roomAvatar = useRoomAvatar(room, mDirects.has(room.roomId));
+  const roomName = useRoomName(room);
+  const joinRuleContent = useRoomJoinRule(room);
+
+  const avatarUrl = roomAvatar
+    ? mxcUrlToHttp(mx, roomAvatar, useAuthentication, 96, 96, 'crop') ?? undefined
+    : undefined;
+
+  const screenSize = useScreenSizeContext();
+  const [activePage, setActivePage] = useState<RoomSettingsPage | undefined>(() => {
+    if (initialPage) return initialPage;
+    return screenSize === ScreenSize.Mobile ? undefined : RoomSettingsPage.GeneralPage;
+  });
+  const menuItems = useRoomSettingsMenuItems();
+
+  const handlePageRequestClose = () => {
+    if (screenSize === ScreenSize.Mobile) {
+      setActivePage(undefined);
+      return;
+    }
+    requestClose();
+  };
+
+  return (
+    <PageRoot
+      nav={
+        screenSize === ScreenSize.Mobile && activePage !== undefined ? undefined : (
+          <PageNav size="300">
+            <PageNavHeader outlined={false}>
+              <Box grow="Yes" gap="200">
+                <Avatar size="200" radii="300">
+                  <RoomAvatar
+                    roomId={room.roomId}
+                    src={avatarUrl}
+                    alt={roomName}
+                    renderFallback={() => (
+                      <RoomIcon
+                        size="50"
+                        joinRule={joinRuleContent?.join_rule ?? JoinRule.Invite}
+                        filled
+                      />
+                    )}
+                  />
+                </Avatar>
+                <Text size="H4" truncate>
+                  {roomName}
+                </Text>
+              </Box>
+              <Box shrink="No">
+                {screenSize === ScreenSize.Mobile && (
+                  <IconButton onClick={requestClose} variant="Background">
+                    <Icon src={Icons.Cross} />
+                  </IconButton>
+                )}
+              </Box>
+            </PageNavHeader>
+            <Box grow="Yes" direction="Column">
+              <PageNavContent>
+                <div style={{ flexGrow: 1 }}>
+                  {menuItems.map((item) => (
+                    <MenuItem
+                      key={item.name}
+                      variant="Background"
+                      radii="400"
+                      aria-pressed={activePage === item.page}
+                      before={<Icon src={item.icon} size="100" filled={activePage === item.page} />}
+                      onClick={() => setActivePage(item.page)}
+                    >
+                      <Text
+                        style={{
+                          fontWeight: activePage === item.page ? config.fontWeight.W600 : undefined,
+                        }}
+                        size="T300"
+                        truncate
+                      >
+                        {item.name}
+                      </Text>
+                    </MenuItem>
+                  ))}
+                </div>
+              </PageNavContent>
+            </Box>
+          </PageNav>
+        )
+      }
+    >
+      {activePage === RoomSettingsPage.GeneralPage && (
+        <General requestClose={handlePageRequestClose} />
+      )}
+      {activePage === RoomSettingsPage.MembersPage && (
+        <Members requestClose={handlePageRequestClose} />
+      )}
+      {activePage === RoomSettingsPage.PermissionsPage && (
+        <Permissions requestClose={handlePageRequestClose} />
+      )}
+      {activePage === RoomSettingsPage.EmojisStickersPage && (
+        <EmojisStickers requestClose={handlePageRequestClose} />
+      )}
+      {activePage === RoomSettingsPage.DeveloperToolsPage && (
+        <DeveloperTools requestClose={handlePageRequestClose} />
+      )}
+    </PageRoot>
+  );
+}

src/app/features/room-settings/RoomSettingsRenderer.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { RoomSettings } from './RoomSettings';
+import { Modal500 } from '../../components/Modal500';
+import { useCloseRoomSettings, useRoomSettingsState } from '../../state/hooks/roomSettings';
+import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
+import { RoomSettingsState } from '../../state/roomSettings';
+import { RoomProvider } from '../../hooks/useRoom';
+import { SpaceProvider } from '../../hooks/useSpace';
+
+type RenderSettingsProps = {
+  state: RoomSettingsState;
+};
+function RenderSettings({ state }: RenderSettingsProps) {
+  const { roomId, spaceId, page } = state;
+  const closeSettings = useCloseRoomSettings();
+  const allJoinedRooms = useAllJoinedRoomsSet();
+  const getRoom = useGetRoom(allJoinedRooms);
+  const room = getRoom(roomId);
+  const space = spaceId ? getRoom(spaceId) : undefined;
+
+  if (!room) return null;
+
+  return (
+    <Modal500 requestClose={closeSettings}>
+      <SpaceProvider value={space ?? null}>
+        <RoomProvider value={room}>
+          <RoomSettings initialPage={page} requestClose={closeSettings} />
+        </RoomProvider>
+      </SpaceProvider>
+    </Modal500>
+  );
+}
+
+export function RoomSettingsRenderer() {
+  const state = useRoomSettingsState();
+
+  if (!state) return null;
+  return <RenderSettings state={state} />;
+}

src/app/features/room-settings/general/General.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
+import { Page, PageContent, PageHeader } from '../../../components/page';
+import { usePowerLevels } from '../../../hooks/usePowerLevels';
+import { useRoom } from '../../../hooks/useRoom';
+import {
+  RoomProfile,
+  RoomEncryption,
+  RoomHistoryVisibility,
+  RoomJoinRules,
+  RoomLocalAddresses,
+  RoomPublishedAddresses,
+  RoomPublish,
+  RoomUpgrade,
+} from '../../common-settings/general';
+
+type GeneralProps = {
+  requestClose: () => void;
+};
+export function General({ requestClose }: GeneralProps) {
+  const room = useRoom();
+  const powerLevels = usePowerLevels(room);
+
+  return (
+    <Page>
+      <PageHeader outlined={false}>
+        <Box grow="Yes" gap="200">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <Text size="H3" truncate>
+              General
+            </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">
+              <RoomProfile powerLevels={powerLevels} />
+              <Box direction="Column" gap="100">
+                <Text size="L400">Options</Text>
+                <RoomJoinRules powerLevels={powerLevels} />
+                <RoomHistoryVisibility powerLevels={powerLevels} />
+                <RoomEncryption powerLevels={powerLevels} />
+                <RoomPublish powerLevels={powerLevels} />
+              </Box>
+              <Box direction="Column" gap="100">
+                <Text size="L400">Addresses</Text>
+                <RoomPublishedAddresses powerLevels={powerLevels} />
+                <RoomLocalAddresses powerLevels={powerLevels} />
+              </Box>
+              <Box direction="Column" gap="100">
+                <Text size="L400">Advance Options</Text>
+                <RoomUpgrade powerLevels={powerLevels} requestClose={requestClose} />
+              </Box>
+            </Box>
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}

src/app/features/room-settings/general/index.ts

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

src/app/features/room-settings/index.ts

@@ -0,0 +1,2 @@
+export * from './RoomSettings';
+export * from './RoomSettingsRenderer';

src/app/features/room-settings/permissions/Permissions.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
+import { Page, PageContent, PageHeader } from '../../../components/page';
+import { useRoom } from '../../../hooks/useRoom';
+import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { StateEvent } from '../../../../types/matrix/room';
+import { usePermissionGroups } from './usePermissionItems';
+import { PermissionGroups, Powers, PowersEditor } from '../../common-settings/permissions';
+
+type PermissionsProps = {
+  requestClose: () => void;
+};
+export function Permissions({ requestClose }: PermissionsProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const powerLevels = usePowerLevels(room);
+  const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
+  const canEditPowers = canSendStateEvent(
+    StateEvent.PowerLevelTags,
+    getPowerLevel(mx.getSafeUserId())
+  );
+  const permissionGroups = usePermissionGroups();
+
+  const [powerEditor, setPowerEditor] = useState(false);
+
+  const handleEditPowers = () => {
+    setPowerEditor(true);
+  };
+
+  if (canEditPowers && powerEditor) {
+    return <PowersEditor powerLevels={powerLevels} requestClose={() => setPowerEditor(false)} />;
+  }
+
+  return (
+    <Page>
+      <PageHeader outlined={false}>
+        <Box grow="Yes" gap="200">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <Text size="H3" truncate>
+              Permissions
+            </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">
+              <Powers
+                powerLevels={powerLevels}
+                onEdit={canEditPowers ? handleEditPowers : undefined}
+                permissionGroups={permissionGroups}
+              />
+              <PermissionGroups powerLevels={powerLevels} permissionGroups={permissionGroups} />
+            </Box>
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}

src/app/features/room-settings/permissions/index.ts

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

src/app/features/room-settings/permissions/usePermissionItems.ts

@@ -0,0 +1,207 @@
+import { useMemo } from 'react';
+import { MessageEvent, StateEvent } from '../../../../types/matrix/room';
+import { PermissionGroup } from '../../common-settings/permissions';
+
+export const usePermissionGroups = (): PermissionGroup[] => {
+  const groups: PermissionGroup[] = useMemo(() => {
+    const messagesGroup: PermissionGroup = {
+      name: 'Messages',
+      items: [
+        {
+          location: {
+            key: MessageEvent.RoomMessage,
+          },
+          name: 'Send Messages',
+        },
+        {
+          location: {
+            key: MessageEvent.Sticker,
+          },
+          name: 'Send Stickers',
+        },
+        {
+          location: {
+            key: MessageEvent.Reaction,
+          },
+          name: 'Send Reactions',
+        },
+        {
+          location: {
+            notification: true,
+            key: 'room',
+          },
+          name: 'Ping @room',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomPinnedEvents,
+          },
+          name: 'Pin Messages',
+        },
+        {
+          location: {},
+          name: 'Other Message Events',
+        },
+      ],
+    };
+
+    const moderationGroup: PermissionGroup = {
+      name: 'Moderation',
+      items: [
+        {
+          location: {
+            action: true,
+            key: 'invite',
+          },
+          name: 'Invite',
+        },
+        {
+          location: {
+            action: true,
+            key: 'kick',
+          },
+          name: 'Kick',
+        },
+        {
+          location: {
+            action: true,
+            key: 'ban',
+          },
+          name: 'Ban',
+        },
+        {
+          location: {
+            action: true,
+            key: 'redact',
+          },
+          name: 'Delete Others Messages',
+        },
+        {
+          location: {
+            key: MessageEvent.RoomRedaction,
+          },
+          name: 'Delete Self Messages',
+        },
+      ],
+    };
+
+    const roomOverviewGroup: PermissionGroup = {
+      name: 'Room Overview',
+      items: [
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomAvatar,
+          },
+          name: 'Room Avatar',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomName,
+          },
+          name: 'Room Name',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomTopic,
+          },
+          name: 'Room Topic',
+        },
+      ],
+    };
+
+    const roomSettingsGroup: PermissionGroup = {
+      name: 'Settings',
+      items: [
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomJoinRules,
+          },
+          name: 'Change Room Access',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomCanonicalAlias,
+          },
+          name: 'Publish Address',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomPowerLevels,
+          },
+          name: 'Change All Permission',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.PowerLevelTags,
+          },
+          name: 'Edit Power Levels',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomEncryption,
+          },
+          name: 'Enable Encryption',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomHistoryVisibility,
+          },
+          name: 'History Visibility',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomTombstone,
+          },
+          name: 'Upgrade Room',
+        },
+        {
+          location: {
+            state: true,
+          },
+          name: 'Other Settings',
+        },
+      ],
+    };
+
+    const otherSettingsGroup: PermissionGroup = {
+      name: 'Other',
+      items: [
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomServerAcl,
+          },
+          name: 'Change Server ACLs',
+        },
+        {
+          location: {
+            state: true,
+            key: 'im.vector.modular.widgets',
+          },
+          name: 'Modify Widgets',
+        },
+      ],
+    };
+
+    return [
+      messagesGroup,
+      moderationGroup,
+      roomOverviewGroup,
+      roomSettingsGroup,
+      otherSettingsGroup,
+    ];
+  }, []);
+
+  return groups;
+};

src/app/features/room-settings/styles.css.ts

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+import { config } from 'folds';
+
+export const SequenceCardStyle = style({
+  padding: config.space.S300,
+});

src/app/features/room/MembersDrawer.tsx

@@ -11,13 +11,11 @@ import {
   Badge,
   Box,
   Chip,
-  ContainerColor,
   Header,
   Icon,
   IconButton,
   Icons,
   Input,
-  Menu,
   MenuItem,
   PopOut,
   RectCords,
@@ -30,13 +28,11 @@ import {
 } from 'folds';
 import { Room, RoomMember } from 'matrix-js-sdk';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import FocusTrap from 'focus-trap-react';
 import classNames from 'classnames';
 
 import { openProfileViewer } from '../../../client/action/navigation';
 import * as css from './MembersDrawer.css';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { Membership } from '../../../types/matrix/room';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import {
   SearchItemStrGetter,
@@ -44,7 +40,7 @@ import {
   useAsyncSearch,
 } from '../../hooks/useAsyncSearch';
 import { useDebounce } from '../../hooks/useDebounce';
-import { usePowerLevelTags, PowerLevelTag } from '../../hooks/usePowerLevelTags';
+import { usePowerLevelTags, useFlattenPowerLevelTagMembers } from '../../hooks/usePowerLevelTags';
 import { TypingIndicator } from '../../components/typing-indicator';
 import { getMemberDisplayName, getMemberSearchStr } from '../../utils/room';
 import { getMxIdLocalPart } from '../../utils/matrix';
@@ -54,106 +50,12 @@ import { millify } from '../../plugins/millify';
 import { ScrollTopContainer } from '../../components/scroll-top-container';
 import { UserAvatar } from '../../components/user-avatar';
 import { useRoomTypingMember } from '../../hooks/useRoomTypingMembers';
-import { stopPropagation } from '../../utils/keyboard';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-
+import { useMembershipFilter, useMembershipFilterMenu } from '../../hooks/useMemberFilter';
-export const MembershipFilters = {
+import { useMemberSort, useMemberSortMenu } from '../../hooks/useMemberSort';
-  filterJoined: (m: RoomMember) => m.membership === Membership.Join,
+import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
-  filterInvited: (m: RoomMember) => m.membership === Membership.Invite,
+import { MembershipFilterMenu } from '../../components/MembershipFilterMenu';
-  filterLeaved: (m: RoomMember) =>
+import { MemberSortMenu } from '../../components/MemberSortMenu';
-    m.membership === Membership.Leave &&
-    m.events.member?.getStateKey() === m.events.member?.getSender(),
-  filterKicked: (m: RoomMember) =>
-    m.membership === Membership.Leave &&
-    m.events.member?.getStateKey() !== m.events.member?.getSender(),
-  filterBanned: (m: RoomMember) => m.membership === Membership.Ban,
-};
-
-export type MembershipFilterFn = (m: RoomMember) => boolean;
-
-export type MembershipFilter = {
-  name: string;
-  filterFn: MembershipFilterFn;
-  color: ContainerColor;
-};
-
-const useMembershipFilterMenu = (): MembershipFilter[] =>
-  useMemo(
-    () => [
-      {
-        name: 'Joined',
-        filterFn: MembershipFilters.filterJoined,
-        color: 'Background',
-      },
-      {
-        name: 'Invited',
-        filterFn: MembershipFilters.filterInvited,
-        color: 'Success',
-      },
-      {
-        name: 'Left',
-        filterFn: MembershipFilters.filterLeaved,
-        color: 'Secondary',
-      },
-      {
-        name: 'Kicked',
-        filterFn: MembershipFilters.filterKicked,
-        color: 'Warning',
-      },
-      {
-        name: 'Banned',
-        filterFn: MembershipFilters.filterBanned,
-        color: 'Critical',
-      },
-    ],
-    []
-  );
-
-export const SortFilters = {
-  filterAscending: (a: RoomMember, b: RoomMember) =>
-    a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1,
-  filterDescending: (a: RoomMember, b: RoomMember) =>
-    a.name.toLowerCase() > b.name.toLowerCase() ? -1 : 1,
-  filterNewestFirst: (a: RoomMember, b: RoomMember) =>
-    (b.events.member?.getTs() ?? 0) - (a.events.member?.getTs() ?? 0),
-  filterOldest: (a: RoomMember, b: RoomMember) =>
-    (a.events.member?.getTs() ?? 0) - (b.events.member?.getTs() ?? 0),
-};
-
-export type SortFilterFn = (a: RoomMember, b: RoomMember) => number;
-
-export type SortFilter = {
-  name: string;
-  filterFn: SortFilterFn;
-};
-
-const useSortFilterMenu = (): SortFilter[] =>
-  useMemo(
-    () => [
-      {
-        name: 'A to Z',
-        filterFn: SortFilters.filterAscending,
-      },
-      {
-        name: 'Z to A',
-        filterFn: SortFilters.filterDescending,
-      },
-      {
-        name: 'Newest',
-        filterFn: SortFilters.filterNewestFirst,
-      },
-      {
-        name: 'Oldest',
-        filterFn: SortFilters.filterOldest,
-      },
-    ],
-    []
-  );
-
-export type MembersFilterOptions = {
-  membershipFilter: MembershipFilter;
-  sortFilter: SortFilter;
-};
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   limit: 1000,
@@ -176,17 +78,19 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
-  const getPowerLevelTag = usePowerLevelTags();
+  const powerLevels = usePowerLevelsContext();
+  const [, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
   const fetchingMembers = members.length < room.getJoinedMemberCount();
   const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
 
   const membershipFilterMenu = useMembershipFilterMenu();
-  const sortFilterMenu = useSortFilterMenu();
+  const sortFilterMenu = useMemberSortMenu();
   const [sortFilterIndex, setSortFilterIndex] = useSetting(settingsAtom, 'memberSortFilterIndex');
   const [membershipFilterIndex, setMembershipFilterIndex] = useState(0);
+  const { getPowerLevel } = usePowerLevelsAPI(powerLevels);
 
-  const membershipFilter = membershipFilterMenu[membershipFilterIndex] ?? membershipFilterMenu[0];
+  const membershipFilter = useMembershipFilter(membershipFilterIndex, membershipFilterMenu);
-  const sortFilter = sortFilterMenu[sortFilterIndex] ?? sortFilterMenu[0];
+  const memberSort = useMemberSort(sortFilterIndex, sortFilterMenu);
 
   const typingMembers = useRoomTypingMember(room.roomId);
 
@@ -194,9 +98,9 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
     () =>
       members
         .filter(membershipFilter.filterFn)
-        .sort(sortFilter.filterFn)
+        .sort(memberSort.sortFn)
         .sort((a, b) => b.powerLevel - a.powerLevel),
-    [members, membershipFilter, sortFilter]
+    [members, membershipFilter, memberSort]
   );
 
   const [result, search, resetSearch] = useAsyncSearch(
@@ -208,19 +112,11 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
 
   const processMembers = result ? result.items : filteredMembers;
 
-  const PLTagOrRoomMember = useMemo(() => {
+  const PLTagOrRoomMember = useFlattenPowerLevelTagMembers(
-    let prevTag: PowerLevelTag | undefined;
+    processMembers,
-    const tagOrMember: Array<PowerLevelTag | RoomMember> = [];
+    getPowerLevel,
-    processMembers.forEach((m) => {
+    getPowerLevelTag
-      const plTag = getPowerLevelTag(m.powerLevel);
+  );
-      if (plTag !== prevTag) {
-        prevTag = plTag;
-        tagOrMember.push(plTag);
-      }
-      tagOrMember.push(m);
-    });
-    return tagOrMember;
-  }, [processMembers, getPowerLevelTag]);
 
   const virtualizer = useVirtualizer({
     count: PLTagOrRoomMember.length,
@@ -295,38 +191,11 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                       align="Start"
                       offset={4}
                       content={
-                        <FocusTrap
+                        <MembershipFilterMenu
-                          focusTrapOptions={{
+                          selected={membershipFilterIndex}
-                            initialFocus: false,
+                          onSelect={setMembershipFilterIndex}
-                            onDeactivate: () => setAnchor(undefined),
+                          requestClose={() => setAnchor(undefined)}
-                            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={
-                                  menuItem.name === membershipFilter.name
-                                    ? menuItem.color
-                                    : 'Surface'
-                                }
-                                aria-pressed={menuItem.name === membershipFilter.name}
-                                size="300"
-                                radii="300"
-                                onClick={() => {
-                                  setMembershipFilterIndex(index);
-                                  setAnchor(undefined);
-                                }}
-                              >
-                                <Text size="T300">{menuItem.name}</Text>
-                              </MenuItem>
-                            ))}
-                          </Menu>
-                        </FocusTrap>
                       }
                     >
                       <Chip
@@ -336,7 +205,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                               evt.currentTarget.getBoundingClientRect()
                             )) as MouseEventHandler<HTMLButtonElement>
                         }
-                        variant={membershipFilter.color}
+                        variant="Background"
                         size="400"
                         radii="300"
                         before={<Icon src={Icons.Filter} size="50" />}
@@ -354,34 +223,11 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                       align="End"
                       offset={4}
                       content={
-                        <FocusTrap
+                        <MemberSortMenu
-                          focusTrapOptions={{
+                          selected={sortFilterIndex}
-                            initialFocus: false,
+                          onSelect={setSortFilterIndex}
-                            onDeactivate: () => setAnchor(undefined),
+                          requestClose={() => setAnchor(undefined)}
-                            clickOutsideDeactivates: true,
+                        />
-                            isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-                            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-                            escapeDeactivates: stopPropagation,
-                          }}
-                        >
-                          <Menu style={{ padding: config.space.S100 }}>
-                            {sortFilterMenu.map((menuItem, index) => (
-                              <MenuItem
-                                key={menuItem.name}
-                                variant="Surface"
-                                aria-pressed={menuItem.name === sortFilter.name}
-                                size="300"
-                                radii="300"
-                                onClick={() => {
-                                  setSortFilterIndex(index);
-                                  setAnchor(undefined);
-                                }}
-                              >
-                                <Text size="T300">{menuItem.name}</Text>
-                              </MenuItem>
-                            ))}
-                          </Menu>
-                        </FocusTrap>
                       }
                     >
                       <Chip
@@ -396,7 +242,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                         radii="300"
                         after={<Icon src={Icons.Sort} size="50" />}
                       >
-                        <Text size="T200">{sortFilter.name}</Text>
+                        <Text size="T200">{memberSort.name}</Text>
                       </Chip>
                     </PopOut>
                   )}

src/app/features/room/RoomInput.tsx

@@ -4,7 +4,6 @@ import React, {
   forwardRef,
   useCallback,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -100,13 +99,7 @@ import {
   getImageMsgContent,
   getVideoMsgContent,
 } from './msgContent';
-import colorMXID from '../../../util/colorMXID';
+import { getMemberDisplayName, getMentionContent, trimReplyFromBody } from '../../utils/room';
-import {
-  getAllParents,
-  getMemberDisplayName,
-  getMentionContent,
-  trimReplyFromBody,
-} from '../../utils/room';
 import { CommandAutocomplete } from './CommandAutocomplete';
 import { Command, SHRUG, TABLEFLIP, UNFLIP, useCommands } from '../../hooks/useCommands';
 import { mobileOrTablet } from '../../utils/user-agent';
@@ -114,26 +107,45 @@ import { useElementSizeObserver } from '../../hooks/useElementSizeObserver';
 import { ReplyLayout, ThreadIndicator } from '../../components/message';
 import { roomToParentsAtom } from '../../state/room/roomToParents';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useImagePackRooms } from '../../hooks/useImagePackRooms';
+import { GetPowerLevelTag } from '../../hooks/usePowerLevelTags';
+import { powerLevelAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
+import colorMXID from '../../../util/colorMXID';
+import { useIsDirectRoom } from '../../hooks/useRoom';
 
 interface RoomInputProps {
   editor: Editor;
   fileDropContainerRef: RefObject<HTMLElement>;
   roomId: string;
   room: Room;
+  getPowerLevelTag: GetPowerLevelTag;
+  accessibleTagColors: Map<string, string>;
 }
 export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
-  ({ editor, fileDropContainerRef, roomId, room }, ref) => {
+  ({ editor, fileDropContainerRef, roomId, room, getPowerLevelTag, accessibleTagColors }, ref) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
     const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
     const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
     const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+    const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
+    const direct = useIsDirectRoom();
     const commands = useCommands(mx, room);
     const emojiBtnRef = useRef<HTMLButtonElement>(null);
     const roomToParents = useAtomValue(roomToParentsAtom);
+    const powerLevels = usePowerLevelsContext();
 
     const [msgDraft, setMsgDraft] = useAtom(roomIdToMsgDraftAtomFamily(roomId));
     const [replyDraft, setReplyDraft] = useAtom(roomIdToReplyDraftAtomFamily(roomId));
+    const replyUserID = replyDraft?.userId;
+
+    const replyPowerTag = getPowerLevelTag(powerLevelAPI.getPowerLevel(powerLevels, replyUserID));
+    const replyPowerColor = replyPowerTag.color
+      ? accessibleTagColors.get(replyPowerTag.color)
+      : undefined;
+    const replyUsernameColor =
+      legacyUsernameColor || direct ? colorMXID(replyUserID ?? '') : replyPowerColor;
+
     const [uploadBoard, setUploadBoard] = useState(true);
     const [selectedFiles, setSelectedFiles] = useAtom(roomIdToUploadItemsAtomFamily(roomId));
     const uploadFamilyObserverAtom = createUploadFamilyObserverAtom(
@@ -142,14 +154,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     );
     const uploadBoardHandlers = useRef<UploadBoardImperativeHandlers>();
 
-    const imagePackRooms: Room[] = useMemo(() => {
+    const imagePackRooms: Room[] = useImagePackRooms(roomId, roomToParents);
-      const allParentSpaces = [roomId].concat(Array.from(getAllParents(roomToParents, roomId)));
-      return allParentSpaces.reduce<Room[]>((list, rId) => {
-        const r = mx.getRoom(rId);
-        if (r) list.push(r);
-        return list;
-      }, []);
-    }, [mx, roomId, roomToParents]);
 
     const [toolbar, setToolbar] = useSetting(settingsAtom, 'editorToolbar');
     const [autocompleteQuery, setAutocompleteQuery] =
@@ -360,7 +365,10 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
 
     const handleKeyDown: KeyboardEventHandler = useCallback(
       (evt) => {
-        if (isKeyHotkey('mod+enter', evt) || (!enterForNewline && isKeyHotkey('enter', evt))) {
+        if (
+          (isKeyHotkey('mod+enter', evt) || (!enterForNewline && isKeyHotkey('enter', evt))) &&
+          !evt.nativeEvent.isComposing
+        ) {
           evt.preventDefault();
           submit();
         }
@@ -538,7 +546,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   <Box direction="Column">
                     {replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />}
                     <ReplyLayout
-                      userColor={colorMXID(replyDraft.userId)}
+                      userColor={replyUsernameColor}
                       username={
                         <Text size="T300" truncate>
                           <b>

src/app/features/room/RoomTimeline.tsx

@@ -75,7 +75,6 @@ import {
 import {
   canEditEvent,
   decryptAllTimelineEvent,
-  getAllParents,
   getEditedEvent,
   getEventReactions,
   getLatestEditableEvt,
@@ -118,6 +117,9 @@ import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
+import { useImagePackRooms } from '../../hooks/useImagePackRooms';
+import { GetPowerLevelTag } from '../../hooks/usePowerLevelTags';
+import { useIsDirectRoom } from '../../hooks/useRoom';
 
 const TimelineFloat = as<'div', css.TimelineFloatVariants>(
   ({ position, className, ...props }, ref) => (
@@ -220,6 +222,8 @@ type RoomTimelineProps = {
   eventId?: string;
   roomInputRef: RefObject<HTMLElement>;
   editor: Editor;
+  getPowerLevelTag: GetPowerLevelTag;
+  accessibleTagColors: Map<string, string>;
 };
 
 const PAGINATION_LIMIT = 80;
@@ -422,12 +426,21 @@ const getRoomUnreadInfo = (room: Room, scrollTo = false) => {
   };
 };
 
-export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimelineProps) {
+export function RoomTimeline({
+  room,
+  eventId,
+  roomInputRef,
+  editor,
+  getPowerLevelTag,
+  accessibleTagColors,
+}: RoomTimelineProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
   const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing');
+  const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
+  const direct = useIsDirectRoom();
   const [hideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
   const [hideNickAvatarEvents] = useSetting(settingsAtom, 'hideNickAvatarEvents');
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
@@ -443,27 +456,20 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const powerLevels = usePowerLevelsContext();
   const { canDoAction, canSendEvent, canSendStateEvent, getPowerLevel } =
     usePowerLevelsAPI(powerLevels);
+
   const myPowerLevel = getPowerLevel(mx.getUserId() ?? '');
   const canRedact = canDoAction('redact', myPowerLevel);
   const canSendReaction = canSendEvent(MessageEvent.Reaction, myPowerLevel);
   const canPinEvent = canSendStateEvent(StateEvent.RoomPinnedEvents, myPowerLevel);
   const [editId, setEditId] = useState<string>();
+
   const roomToParents = useAtomValue(roomToParentsAtom);
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
   const { navigateRoom } = useRoomNavigate();
   const mentionClickHandler = useMentionClickHandler(room.roomId);
   const spoilerClickHandler = useSpoilerClickHandler();
 
-  const imagePackRooms: Room[] = useMemo(() => {
+  const imagePackRooms: Room[] = useImagePackRooms(room.roomId, roomToParents);
-    const allParentSpaces = [room.roomId].concat(
-      Array.from(getAllParents(roomToParents, room.roomId))
-    );
-    return allParentSpaces.reduce<Room[]>((list, rId) => {
-      const r = mx.getRoom(rId);
-      if (r) list.push(r);
-      return list;
-    }, []);
-  }, [mx, room, roomToParents]);
 
   const [unreadInfo, setUnreadInfo] = useState(() => getRoomUnreadInfo(room, true));
   const readUptoEventIdRef = useRef<string>();
@@ -1005,6 +1011,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           editedEvent?.getContent()['m.new_content'] ?? mEvent.getContent()) as GetContentCallback;
 
         const senderId = mEvent.getSender() ?? '';
+        const senderPowerLevel = getPowerLevel(mEvent.getSender());
         const senderDisplayName =
           getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
 
@@ -1038,6 +1045,10 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                   replyEventId={replyEventId}
                   threadRootId={threadRootId}
                   onClick={handleOpenReply}
+                  getPowerLevel={getPowerLevel}
+                  getPowerLevelTag={getPowerLevelTag}
+                  accessibleTagColors={accessibleTagColors}
+                  legacyUsernameColor={legacyUsernameColor || direct}
                 />
               )
             }
@@ -1054,6 +1065,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
               )
             }
             hideReadReceipts={hideActivity}
+            powerLevelTag={getPowerLevelTag(senderPowerLevel)}
+            accessibleTagColors={accessibleTagColors}
+            legacyUsernameColor={legacyUsernameColor || direct}
           >
             {mEvent.isRedacted() ? (
               <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
@@ -1080,6 +1094,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const hasReactions = reactions && reactions.length > 0;
         const { replyEventId, threadRootId } = mEvent;
         const highlighted = focusItem?.index === item && focusItem.highlight;
+        const senderPowerLevel = getPowerLevel(mEvent.getSender());
 
         return (
           <Message
@@ -1111,6 +1126,10 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                   replyEventId={replyEventId}
                   threadRootId={threadRootId}
                   onClick={handleOpenReply}
+                  getPowerLevel={getPowerLevel}
+                  getPowerLevelTag={getPowerLevelTag}
+                  accessibleTagColors={accessibleTagColors}
+                  legacyUsernameColor={legacyUsernameColor || direct}
                 />
               )
             }
@@ -1127,6 +1146,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
               )
             }
             hideReadReceipts={hideActivity}
+            powerLevelTag={getPowerLevelTag(senderPowerLevel)}
+            accessibleTagColors={accessibleTagColors}
+            legacyUsernameColor={legacyUsernameColor || direct}
           >
             <EncryptedContent mEvent={mEvent}>
               {() => {
@@ -1190,6 +1212,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const reactions = reactionRelations && reactionRelations.getSortedAnnotationsByKey();
         const hasReactions = reactions && reactions.length > 0;
         const highlighted = focusItem?.index === item && focusItem.highlight;
+        const senderPowerLevel = getPowerLevel(mEvent.getSender());
 
         return (
           <Message
@@ -1224,6 +1247,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
               )
             }
             hideReadReceipts={hideActivity}
+            powerLevelTag={getPowerLevelTag(senderPowerLevel)}
+            accessibleTagColors={accessibleTagColors}
+            legacyUsernameColor={legacyUsernameColor || direct}
           >
             {mEvent.isRedacted() ? (
               <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />

src/app/features/room/RoomView.tsx

@@ -21,6 +21,8 @@ import { editableActiveElement } from '../../utils/dom';
 import navigation from '../../../client/state/navigation';
 import { settingsAtom } from '../../state/settings';
 import { useSetting } from '../../state/hooks/settings';
+import { useAccessibleTagColors, usePowerLevelTags } from '../../hooks/usePowerLevelTags';
+import { useTheme } from '../../hooks/useTheme';
 
 const FN_KEYS_REGEX = /^F\d+$/;
 const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
@@ -74,6 +76,10 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
     ? canSendEvent(EventType.RoomMessage, getPowerLevel(myUserId))
     : false;
 
+  const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
+  const theme = useTheme();
+  const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
+
   useKeyDown(
     window,
     useCallback(
@@ -103,6 +109,8 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
           eventId={eventId}
           roomInputRef={roomInputRef}
           editor={editor}
+          getPowerLevelTag={getPowerLevelTag}
+          accessibleTagColors={accessibleTagColors}
         />
         <RoomViewTyping room={room} />
       </Box>
@@ -123,6 +131,8 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
                   roomId={roomId}
                   fileDropContainerRef={roomViewRef}
                   ref={roomInputRef}
+                  getPowerLevelTag={getPowerLevelTag}
+                  accessibleTagColors={accessibleTagColors}
                 />
               )}
               {!canMessage && (

src/app/features/room/RoomViewHeader.tsx

@@ -20,6 +20,7 @@ import {
   PopOut,
   RectCords,
   Badge,
+  Spinner,
 } from 'folds';
 import { useNavigate } from 'react-router-dom';
 import { JoinRule, Room } from 'matrix-js-sdk';
@@ -44,7 +45,7 @@ import { useRoomUnread } from '../../state/hooks/unread';
 import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { markAsRead } from '../../../client/action/notifications';
 import { roomToUnreadAtom } from '../../state/room/roomToUnread';
-import { openInviteUser, toggleRoomSettings } from '../../../client/action/navigation';
+import { openInviteUser } from '../../../client/action/navigation';
 import { copyToClipboard } from '../../utils/dom';
 import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
 import { useRoomAvatar, useRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
@@ -57,6 +58,13 @@ import { BackRouteHandler } from '../../components/BackRouteHandler';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useRoomPinnedEvents } from '../../hooks/useRoomPinnedEvents';
 import { RoomPinMenu } from './room-pin-menu';
+import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
+import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
+import {
+  getRoomNotificationMode,
+  getRoomNotificationModeIcon,
+  useRoomsNotificationPreferencesContext,
+} from '../../hooks/useRoomsNotificationPreferences';
 
 type RoomMenuProps = {
   room: Room;
@@ -69,6 +77,8 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
   const powerLevels = usePowerLevelsContext();
   const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
   const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
+  const notificationPreferences = useRoomsNotificationPreferencesContext();
+  const notificationMode = getRoomNotificationMode(notificationPreferences, room.roomId);
 
   const handleMarkAsRead = () => {
     markAsRead(mx, room.roomId, hideActivity);
@@ -87,8 +97,10 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
     requestClose();
   };
 
-  const handleRoomSettings = () => {
+  const openSettings = useOpenRoomSettings();
-    toggleRoomSettings(room.roomId);
+  const parentSpace = useSpaceOptionally();
+  const handleOpenSettings = () => {
+    openSettings(room.roomId, parentSpace?.roomId);
     requestClose();
   };
 
@@ -106,6 +118,27 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
             Mark as Read
           </Text>
         </MenuItem>
+        <RoomNotificationModeSwitcher roomId={room.roomId} value={notificationMode}>
+          {(handleOpen, opened, changing) => (
+            <MenuItem
+              size="300"
+              after={
+                changing ? (
+                  <Spinner size="100" variant="Secondary" />
+                ) : (
+                  <Icon size="100" src={getRoomNotificationModeIcon(notificationMode)} />
+                )
+              }
+              radii="300"
+              aria-pressed={opened}
+              onClick={handleOpen}
+            >
+              <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+                Notifications
+              </Text>
+            </MenuItem>
+          )}
+        </RoomNotificationModeSwitcher>
       </Box>
       <Line variant="Surface" size="300" />
       <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
@@ -133,7 +166,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
           </Text>
         </MenuItem>
         <MenuItem
-          onClick={handleRoomSettings}
+          onClick={handleOpenSettings}
           size="300"
           after={<Icon size="100" src={Icons.Setting} />}
           radii="300"

src/app/features/room/message/Message.tsx

@@ -44,8 +44,8 @@ import {
   ModernLayout,
   Time,
   Username,
+  UsernameBold,
 } from '../../../components/message';
-import colorMXID from '../../../../util/colorMXID';
 import {
   canEditEvent,
   getEventEdits,
@@ -76,6 +76,9 @@ import { getViaServers } from '../../../plugins/via-servers';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { useRoomPinnedEvents } from '../../../hooks/useRoomPinnedEvents';
 import { StateEvent } from '../../../../types/matrix/room';
+import { getTagIconSrc, PowerLevelTag } from '../../../hooks/usePowerLevelTags';
+import { PowerIcon } from '../../../components/power';
+import colorMXID from '../../../../util/colorMXID';
 
 export type ReactionHandler = (keyOrMxc: string, shortcode: string) => void;
 
@@ -672,6 +675,9 @@ export type MessageProps = {
   reply?: ReactNode;
   reactions?: ReactNode;
   hideReadReceipts?: boolean;
+  powerLevelTag?: PowerLevelTag;
+  accessibleTagColors?: Map<string, string>;
+  legacyUsernameColor?: boolean;
 };
 export const Message = as<'div', MessageProps>(
   (
@@ -697,6 +703,9 @@ export const Message = as<'div', MessageProps>(
       reply,
       reactions,
       hideReadReceipts,
+      powerLevelTag,
+      accessibleTagColors,
+      legacyUsernameColor,
       children,
       ...props
     },
@@ -715,6 +724,15 @@ export const Message = as<'div', MessageProps>(
       getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
     const senderAvatarMxc = getMemberAvatarMxc(room, senderId);
 
+    const tagColor = powerLevelTag?.color
+      ? accessibleTagColors?.get(powerLevelTag.color)
+      : undefined;
+    const tagIconSrc = powerLevelTag?.icon
+      ? getTagIconSrc(mx, useAuthentication, powerLevelTag.icon)
+      : undefined;
+
+    const usernameColor = legacyUsernameColor ? colorMXID(senderId) : tagColor;
+
     const headerJSX = !collapse && (
       <Box
         gap="300"
@@ -723,17 +741,24 @@ export const Message = as<'div', MessageProps>(
         alignItems="Baseline"
         grow="Yes"
       >
-        <Username
+        <Box alignItems="Center" gap="200">
-          as="button"
+          <Username
-          style={{ color: colorMXID(senderId) }}
+            as="button"
-          data-user-id={senderId}
+            style={{ color: usernameColor }}
-          onContextMenu={onUserClick}
+            data-user-id={senderId}
-          onClick={onUsernameClick}
+            onContextMenu={onUserClick}
-        >
+            onClick={onUsernameClick}
-          <Text as="span" size={messageLayout === MessageLayout.Bubble ? 'T300' : 'T400'} truncate>
+          >
-            <b>{senderDisplayName}</b>
+            <Text
-          </Text>
+              as="span"
-        </Username>
+              size={messageLayout === MessageLayout.Bubble ? 'T300' : 'T400'}
+              truncate
+            >
+              <UsernameBold>{senderDisplayName}</UsernameBold>
+            </Text>
+          </Username>
+          {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
+        </Box>
         <Box shrink="No" gap="100">
           {messageLayout === MessageLayout.Modern && hover && (
             <>

src/app/features/room/message/MessageEditor.tsx

@@ -163,7 +163,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
 
     const handleKeyDown: KeyboardEventHandler = useCallback(
       (evt) => {
-        if (isKeyHotkey('mod+enter', evt) || (!enterForNewline && isKeyHotkey('enter', evt))) {
+        if ((isKeyHotkey('mod+enter', evt) || (!enterForNewline && isKeyHotkey('enter', evt))) && !evt.nativeEvent.isComposing) {
           evt.preventDefault();
           handleSave();
         }

src/app/features/room/room-pin-menu/RoomPinMenu.tsx

@@ -38,6 +38,7 @@ import {
   Reply,
   Time,
   Username,
+  UsernameBold,
 } from '../../../components/message';
 import { UserAvatar } from '../../../components/user-avatar';
 import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
@@ -49,7 +50,6 @@ import {
   getStateEvent,
 } from '../../../utils/room';
 import { GetContentCallback, MessageEvent, StateEvent } from '../../../../types/matrix/room';
-import colorMXID from '../../../../util/colorMXID';
 import { useMentionClickHandler } from '../../../hooks/useMentionClickHandler';
 import { useSpoilerClickHandler } from '../../../hooks/useSpoilerClickHandler';
 import {
@@ -72,6 +72,15 @@ import { VirtualTile } from '../../../components/virtualizer';
 import { usePowerLevelsAPI, usePowerLevelsContext } from '../../../hooks/usePowerLevels';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { ContainerColor } from '../../../styles/ContainerColor.css';
+import {
+  getTagIconSrc,
+  useAccessibleTagColors,
+  usePowerLevelTags,
+} from '../../../hooks/usePowerLevelTags';
+import { useTheme } from '../../../hooks/useTheme';
+import { PowerIcon } from '../../../components/power';
+import colorMXID from '../../../../util/colorMXID';
+import { useIsDirectRoom } from '../../../hooks/useRoom';
 
 type PinnedMessageProps = {
   room: Room;
@@ -84,6 +93,14 @@ function PinnedMessage({ room, eventId, renderContent, onOpen, canPinEvent }: Pi
   const pinnedEvent = useRoomEvent(room, eventId);
   const useAuthentication = useMediaAuthentication();
   const mx = useMatrixClient();
+  const direct = useIsDirectRoom();
+  const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
+
+  const powerLevels = usePowerLevelsContext();
+  const { getPowerLevel } = usePowerLevelsAPI(powerLevels);
+  const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
+  const theme = useTheme();
+  const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
 
   const [unpinState, unpin] = useAsyncCallback(
     useCallback(() => {
@@ -93,7 +110,7 @@ function PinnedMessage({ room, eventId, renderContent, onOpen, canPinEvent }: Pi
         pinned: content.pinned.filter((id) => id !== eventId),
       };
 
-      return mx.sendStateEvent(room.roomId, StateEvent.RoomPinnedEvents, newContent);
+      return mx.sendStateEvent(room.roomId, StateEvent.RoomPinnedEvents as any, newContent);
     }, [room, eventId, mx])
   );
 
@@ -148,6 +165,16 @@ function PinnedMessage({ room, eventId, renderContent, onOpen, canPinEvent }: Pi
   const displayName = getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender) ?? sender;
   const senderAvatarMxc = getMemberAvatarMxc(room, sender);
   const getContent = (() => pinnedEvent.getContent()) as GetContentCallback;
+
+  const senderPowerLevel = getPowerLevel(sender);
+  const powerLevelTag = getPowerLevelTag(senderPowerLevel);
+  const tagColor = powerLevelTag?.color ? accessibleTagColors?.get(powerLevelTag.color) : undefined;
+  const tagIconSrc = powerLevelTag?.icon
+    ? getTagIconSrc(mx, useAuthentication, powerLevelTag.icon)
+    : undefined;
+
+  const usernameColor = legacyUsernameColor || direct ? colorMXID(sender) : tagColor;
+
   return (
     <ModernLayout
       before={
@@ -170,11 +197,14 @@ function PinnedMessage({ room, eventId, renderContent, onOpen, canPinEvent }: Pi
     >
       <Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
         <Box gap="200" alignItems="Baseline">
-          <Username style={{ color: colorMXID(sender) }}>
+          <Box alignItems="Center" gap="200">
-            <Text as="span" truncate>
+            <Username style={{ color: usernameColor }}>
-              <b>{displayName}</b>
+              <Text as="span" truncate>
-            </Text>
+                <UsernameBold>{displayName}</UsernameBold>
-          </Username>
+              </Text>
+            </Username>
+            {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
+          </Box>
           <Time ts={pinnedEvent.getTs()} />
         </Box>
         {renderOptions()}
@@ -185,6 +215,10 @@ function PinnedMessage({ room, eventId, renderContent, onOpen, canPinEvent }: Pi
           replyEventId={pinnedEvent.replyEventId}
           threadRootId={pinnedEvent.threadRootId}
           onClick={handleOpenClick}
+          getPowerLevel={getPowerLevel}
+          getPowerLevelTag={getPowerLevelTag}
+          accessibleTagColors={accessibleTagColors}
+          legacyUsernameColor={legacyUsernameColor}
         />
       )}
       {renderContent(pinnedEvent.getType(), false, pinnedEvent, displayName, getContent)}

src/app/features/settings/account/Account.tsx

@@ -241,7 +241,7 @@ function ProfileDisplayName({ profile, userId }: ProfileProps) {
   const disableSetDisplayname = capabilities['m.set_displayname']?.enabled === false;
 
   const defaultDisplayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
-  const [displayName, setDisplayName] = useState<string>();
+  const [displayName, setDisplayName] = useState<string>(defaultDisplayName);
 
   const [changeState, changeDisplayName] = useAsyncCallback(
     useCallback((name: string) => mx.setDisplayName(name), [mx])

src/app/features/settings/developer-tools/AccountData.tsx

@@ -1,10 +1,11 @@
 import React, { useCallback, useState } from 'react';
-import { Box, Text, Icon, Icons, Chip, Button } from 'folds';
+import { Box, Text, Icon, Icons, Button, MenuItem } from 'folds';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useAccountDataCallback } from '../../../hooks/useAccountDataCallback';
+import { CutoutCard } from '../../../components/cutout-card';
 
 type AccountDataProps = {
   expand: boolean;
@@ -13,14 +14,15 @@ type AccountDataProps = {
 };
 export function AccountData({ expand, onExpandToggle, onSelect }: AccountDataProps) {
   const mx = useMatrixClient();
-  const [accountData, setAccountData] = useState(() => Array.from(mx.store.accountData.values()));
+  const [accountDataTypes, setAccountDataKeys] = useState(() =>
+    Array.from(mx.store.accountData.keys())
+  );
 
   useAccountDataCallback(
     mx,
-    useCallback(
+    useCallback(() => {
-      () => setAccountData(Array.from(mx.store.accountData.values())),
+      setAccountDataKeys(Array.from(mx.store.accountData.keys()));
-      [mx, setAccountData]
+    }, [mx])
-    )
   );
 
   return (
@@ -52,37 +54,45 @@ export function AccountData({ expand, onExpandToggle, onSelect }: AccountDataPro
           }
         />
         {expand && (
-          <SettingTile>
+          <Box direction="Column" gap="100">
-            <Box direction="Column" gap="200">
+            <Box justifyContent="SpaceBetween">
-              <Text size="L400">Types</Text>
+              <Text size="L400">Events</Text>
-              <Box gap="200" wrap="Wrap">
+              <Text size="L400">Total: {accountDataTypes.length}</Text>
-                <Chip
+            </Box>
-                  variant="Secondary"
+            <CutoutCard>
-                  fill="Soft"
+              <MenuItem
-                  radii="Pill"
+                variant="Surface"
-                  before={<Icon size="50" src={Icons.Plus} />}
+                fill="None"
-                  onClick={() => onSelect(null)}
+                size="300"
-                >
+                radii="0"
+                before={<Icon size="50" src={Icons.Plus} />}
+                onClick={() => onSelect(null)}
+              >
+                <Box grow="Yes">
                   <Text size="T200" truncate>
                     Add New
                   </Text>
-                </Chip>
+                </Box>
-                {accountData.map((mEvent) => (
+              </MenuItem>
-                  <Chip
+              {accountDataTypes.sort().map((type) => (
-                    key={mEvent.getType()}
+                <MenuItem
-                    variant="Secondary"
+                  key={type}
-                    fill="Soft"
+                  variant="Surface"
-                    radii="Pill"
+                  fill="None"
-                    onClick={() => onSelect(mEvent.getType())}
+                  size="300"
-                  >
+                  radii="0"
+                  after={<Icon size="50" src={Icons.ChevronRight} />}
+                  onClick={() => onSelect(type)}
+                >
+                  <Box grow="Yes">
                     <Text size="T200" truncate>
-                      {mEvent.getType()}
+                      {type}
                     </Text>
-                  </Chip>
+                  </Box>
-                ))}
+                </MenuItem>
-              </Box>
+              ))}
-            </Box>
+            </CutoutCard>
-          </SettingTile>
+          </Box>
         )}
       </SequenceCard>
     </Box>

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Box, Text, IconButton, Icon, Icons, Scroll, Switch, Button } from 'folds';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
@@ -7,7 +7,10 @@ import { SettingTile } from '../../../components/setting-tile';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { AccountDataEditor } from './AccountDataEditor';
+import {
+  AccountDataEditor,
+  AccountDataSubmitCallback,
+} from '../../../components/AccountDataEditor';
 import { copyToClipboard } from '../../../utils/dom';
 import { AccountData } from './AccountData';
 
@@ -20,10 +23,19 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
   const [expand, setExpend] = useState(false);
   const [accountDataType, setAccountDataType] = useState<string | null>();
 
+  const submitAccountData: AccountDataSubmitCallback = useCallback(
+    async (type, content) => {
+      await mx.setAccountData(type, content);
+    },
+    [mx]
+  );
+
   if (accountDataType !== undefined) {
     return (
       <AccountDataEditor
         type={accountDataType ?? undefined}
+        content={accountDataType ? mx.getAccountData(accountDataType)?.getContent() : undefined}
+        submitChange={submitAccountData}
         requestClose={() => setAccountDataType(undefined)}
       />
     );

src/app/features/settings/developer-tools/styles.css.ts

@@ -1,24 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { DefaultReset, config } from 'folds';
-
-export const EditorHeader = style([
-  DefaultReset,
-  {
-    paddingLeft: config.space.S400,
-    paddingRight: config.space.S200,
-    borderBottomWidth: config.borderWidth.B300,
-    flexShrink: 0,
-    gap: config.space.S200,
-  },
-]);
-
-export const EditorContent = style([
-  DefaultReset,
-  {
-    padding: config.space.S400,
-  },
-]);
-
-export const EditorTextArea = style({
-  fontFamily: 'monospace',
-});

src/app/features/settings/general/General.tsx

@@ -514,6 +514,10 @@ function SelectMessageSpacing() {
 }
 
 function Messages() {
+  const [legacyUsernameColor, setLegacyUsernameColor] = useSetting(
+    settingsAtom,
+    'legacyUsernameColor'
+  );
   const [hideMembershipEvents, setHideMembershipEvents] = useSetting(
     settingsAtom,
     'hideMembershipEvents'
@@ -536,6 +540,18 @@ function Messages() {
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile title="Message Spacing" after={<SelectMessageSpacing />} />
       </SequenceCard>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Legacy Username Color"
+          after={
+            <Switch
+              variant="Primary"
+              value={legacyUsernameColor}
+              onChange={setLegacyUsernameColor}
+            />
+          }
+        />
+      </SequenceCard>
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
           title="Hide Membership Change"

src/app/features/space-settings/SpaceSettings.tsx

@@ -0,0 +1,173 @@
+import React, { useMemo, useState } from 'react';
+import { useAtomValue } from 'jotai';
+import { Avatar, Box, config, Icon, IconButton, Icons, IconSrc, MenuItem, Text } from 'folds';
+import { JoinRule } from 'matrix-js-sdk';
+import { PageNav, PageNavContent, PageNavHeader, PageRoot } from '../../components/page';
+import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { mxcUrlToHttp } from '../../utils/matrix';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useRoomAvatar, useRoomJoinRule, useRoomName } from '../../hooks/useRoomMeta';
+import { mDirectAtom } from '../../state/mDirectList';
+import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
+import { SpaceSettingsPage } from '../../state/spaceSettings';
+import { useRoom } from '../../hooks/useRoom';
+import { EmojisStickers } from '../common-settings/emojis-stickers';
+import { Members } from '../common-settings/members';
+import { DeveloperTools } from '../common-settings/developer-tools';
+import { General } from './general';
+import { Permissions } from './permissions';
+
+type SpaceSettingsMenuItem = {
+  page: SpaceSettingsPage;
+  name: string;
+  icon: IconSrc;
+};
+
+const useSpaceSettingsMenuItems = (): SpaceSettingsMenuItem[] =>
+  useMemo(
+    () => [
+      {
+        page: SpaceSettingsPage.GeneralPage,
+        name: 'General',
+        icon: Icons.Setting,
+      },
+      {
+        page: SpaceSettingsPage.MembersPage,
+        name: 'Members',
+        icon: Icons.User,
+      },
+      {
+        page: SpaceSettingsPage.PermissionsPage,
+        name: 'Permissions',
+        icon: Icons.Lock,
+      },
+      {
+        page: SpaceSettingsPage.EmojisStickersPage,
+        name: 'Emojis & Stickers',
+        icon: Icons.Smile,
+      },
+      {
+        page: SpaceSettingsPage.DeveloperToolsPage,
+        name: 'Developer Tools',
+        icon: Icons.Terminal,
+      },
+    ],
+    []
+  );
+
+type SpaceSettingsProps = {
+  initialPage?: SpaceSettingsPage;
+  requestClose: () => void;
+};
+export function SpaceSettings({ initialPage, requestClose }: SpaceSettingsProps) {
+  const room = useRoom();
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const mDirects = useAtomValue(mDirectAtom);
+
+  const roomAvatar = useRoomAvatar(room, mDirects.has(room.roomId));
+  const roomName = useRoomName(room);
+  const joinRuleContent = useRoomJoinRule(room);
+
+  const avatarUrl = roomAvatar
+    ? mxcUrlToHttp(mx, roomAvatar, useAuthentication, 96, 96, 'crop') ?? undefined
+    : undefined;
+
+  const screenSize = useScreenSizeContext();
+  const [activePage, setActivePage] = useState<SpaceSettingsPage | undefined>(() => {
+    if (initialPage) return initialPage;
+    return screenSize === ScreenSize.Mobile ? undefined : SpaceSettingsPage.GeneralPage;
+  });
+  const menuItems = useSpaceSettingsMenuItems();
+
+  const handlePageRequestClose = () => {
+    if (screenSize === ScreenSize.Mobile) {
+      setActivePage(undefined);
+      return;
+    }
+    requestClose();
+  };
+
+  return (
+    <PageRoot
+      nav={
+        screenSize === ScreenSize.Mobile && activePage !== undefined ? undefined : (
+          <PageNav size="300">
+            <PageNavHeader outlined={false}>
+              <Box grow="Yes" gap="200">
+                <Avatar size="200" radii="300">
+                  <RoomAvatar
+                    roomId={room.roomId}
+                    src={avatarUrl}
+                    alt={roomName}
+                    renderFallback={() => (
+                      <RoomIcon
+                        space
+                        size="50"
+                        joinRule={joinRuleContent?.join_rule ?? JoinRule.Invite}
+                        filled
+                      />
+                    )}
+                  />
+                </Avatar>
+                <Text size="H4" truncate>
+                  {roomName}
+                </Text>
+              </Box>
+              <Box shrink="No">
+                {screenSize === ScreenSize.Mobile && (
+                  <IconButton onClick={requestClose} variant="Background">
+                    <Icon src={Icons.Cross} />
+                  </IconButton>
+                )}
+              </Box>
+            </PageNavHeader>
+            <Box grow="Yes" direction="Column">
+              <PageNavContent>
+                <div style={{ flexGrow: 1 }}>
+                  {menuItems.map((item) => (
+                    <MenuItem
+                      key={item.name}
+                      variant="Background"
+                      radii="400"
+                      aria-pressed={activePage === item.page}
+                      before={<Icon src={item.icon} size="100" filled={activePage === item.page} />}
+                      onClick={() => setActivePage(item.page)}
+                    >
+                      <Text
+                        style={{
+                          fontWeight: activePage === item.page ? config.fontWeight.W600 : undefined,
+                        }}
+                        size="T300"
+                        truncate
+                      >
+                        {item.name}
+                      </Text>
+                    </MenuItem>
+                  ))}
+                </div>
+              </PageNavContent>
+            </Box>
+          </PageNav>
+        )
+      }
+    >
+      {activePage === SpaceSettingsPage.GeneralPage && (
+        <General requestClose={handlePageRequestClose} />
+      )}
+      {activePage === SpaceSettingsPage.MembersPage && (
+        <Members requestClose={handlePageRequestClose} />
+      )}
+      {activePage === SpaceSettingsPage.PermissionsPage && (
+        <Permissions requestClose={handlePageRequestClose} />
+      )}
+      {activePage === SpaceSettingsPage.EmojisStickersPage && (
+        <EmojisStickers requestClose={handlePageRequestClose} />
+      )}
+      {activePage === SpaceSettingsPage.DeveloperToolsPage && (
+        <DeveloperTools requestClose={handlePageRequestClose} />
+      )}
+    </PageRoot>
+  );
+}

src/app/features/space-settings/SpaceSettingsRenderer.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { SpaceSettings } from './SpaceSettings';
+import { Modal500 } from '../../components/Modal500';
+import { useCloseSpaceSettings, useSpaceSettingsState } from '../../state/hooks/spaceSettings';
+import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
+import { SpaceSettingsState } from '../../state/spaceSettings';
+import { RoomProvider } from '../../hooks/useRoom';
+import { SpaceProvider } from '../../hooks/useSpace';
+
+type RenderSettingsProps = {
+  state: SpaceSettingsState;
+};
+function RenderSettings({ state }: RenderSettingsProps) {
+  const { roomId, spaceId, page } = state;
+  const closeSettings = useCloseSpaceSettings();
+  const allJoinedRooms = useAllJoinedRoomsSet();
+  const getRoom = useGetRoom(allJoinedRooms);
+  const room = getRoom(roomId);
+  const space = spaceId ? getRoom(spaceId) : undefined;
+
+  if (!room) return null;
+
+  return (
+    <Modal500 requestClose={closeSettings}>
+      <SpaceProvider value={space ?? null}>
+        <RoomProvider value={room}>
+          <SpaceSettings initialPage={page} requestClose={closeSettings} />
+        </RoomProvider>
+      </SpaceProvider>
+    </Modal500>
+  );
+}
+
+export function SpaceSettingsRenderer() {
+  const state = useSpaceSettingsState();
+
+  if (!state) return null;
+  return <RenderSettings state={state} />;
+}

src/app/features/space-settings/general/General.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
+import { Page, PageContent, PageHeader } from '../../../components/page';
+import { usePowerLevels } from '../../../hooks/usePowerLevels';
+import { useRoom } from '../../../hooks/useRoom';
+import {
+  RoomProfile,
+  RoomJoinRules,
+  RoomLocalAddresses,
+  RoomPublishedAddresses,
+  RoomPublish,
+  RoomUpgrade,
+} from '../../common-settings/general';
+
+type GeneralProps = {
+  requestClose: () => void;
+};
+export function General({ requestClose }: GeneralProps) {
+  const room = useRoom();
+  const powerLevels = usePowerLevels(room);
+
+  return (
+    <Page>
+      <PageHeader outlined={false}>
+        <Box grow="Yes" gap="200">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <Text size="H3" truncate>
+              General
+            </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">
+              <RoomProfile powerLevels={powerLevels} />
+              <Box direction="Column" gap="100">
+                <Text size="L400">Options</Text>
+                <RoomJoinRules powerLevels={powerLevels} />
+                <RoomPublish powerLevels={powerLevels} />
+              </Box>
+              <Box direction="Column" gap="100">
+                <Text size="L400">Addresses</Text>
+                <RoomPublishedAddresses powerLevels={powerLevels} />
+                <RoomLocalAddresses powerLevels={powerLevels} />
+              </Box>
+              <Box direction="Column" gap="100">
+                <Text size="L400">Advance Options</Text>
+                <RoomUpgrade powerLevels={powerLevels} requestClose={requestClose} />
+              </Box>
+            </Box>
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}

src/app/features/space-settings/general/index.ts

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

src/app/features/space-settings/index.ts

@@ -0,0 +1,2 @@
+export * from './SpaceSettings';
+export * from './SpaceSettingsRenderer';

src/app/features/space-settings/permissions/Permissions.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
+import { Page, PageContent, PageHeader } from '../../../components/page';
+import { useRoom } from '../../../hooks/useRoom';
+import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { StateEvent } from '../../../../types/matrix/room';
+import { usePermissionGroups } from './usePermissionItems';
+import { PermissionGroups, Powers, PowersEditor } from '../../common-settings/permissions';
+
+type PermissionsProps = {
+  requestClose: () => void;
+};
+export function Permissions({ requestClose }: PermissionsProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const powerLevels = usePowerLevels(room);
+  const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
+  const canEditPowers = canSendStateEvent(
+    StateEvent.PowerLevelTags,
+    getPowerLevel(mx.getSafeUserId())
+  );
+  const permissionGroups = usePermissionGroups();
+
+  const [powerEditor, setPowerEditor] = useState(false);
+
+  const handleEditPowers = () => {
+    setPowerEditor(true);
+  };
+
+  if (canEditPowers && powerEditor) {
+    return <PowersEditor powerLevels={powerLevels} requestClose={() => setPowerEditor(false)} />;
+  }
+
+  return (
+    <Page>
+      <PageHeader outlined={false}>
+        <Box grow="Yes" gap="200">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <Text size="H3" truncate>
+              Permissions
+            </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">
+              <Powers
+                powerLevels={powerLevels}
+                onEdit={canEditPowers ? handleEditPowers : undefined}
+                permissionGroups={permissionGroups}
+              />
+              <PermissionGroups powerLevels={powerLevels} permissionGroups={permissionGroups} />
+            </Box>
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}

src/app/features/space-settings/permissions/index.ts

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

src/app/features/space-settings/permissions/usePermissionItems.ts

@@ -0,0 +1,148 @@
+import { useMemo } from 'react';
+import { StateEvent } from '../../../../types/matrix/room';
+import { PermissionGroup } from '../../common-settings/permissions';
+
+export const usePermissionGroups = (): PermissionGroup[] => {
+  const groups: PermissionGroup[] = useMemo(() => {
+    const messagesGroup: PermissionGroup = {
+      name: 'Manage',
+      items: [
+        {
+          location: {
+            state: true,
+            key: StateEvent.SpaceChild,
+          },
+          name: 'Manage space rooms',
+        },
+        {
+          location: {},
+          name: 'Message Events',
+        },
+      ],
+    };
+
+    const moderationGroup: PermissionGroup = {
+      name: 'Moderation',
+      items: [
+        {
+          location: {
+            action: true,
+            key: 'invite',
+          },
+          name: 'Invite',
+        },
+        {
+          location: {
+            action: true,
+            key: 'kick',
+          },
+          name: 'Kick',
+        },
+        {
+          location: {
+            action: true,
+            key: 'ban',
+          },
+          name: 'Ban',
+        },
+      ],
+    };
+
+    const roomOverviewGroup: PermissionGroup = {
+      name: 'Space Overview',
+      items: [
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomAvatar,
+          },
+          name: 'Space Avatar',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomName,
+          },
+          name: 'Space Name',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomTopic,
+          },
+          name: 'Space Topic',
+        },
+      ],
+    };
+
+    const roomSettingsGroup: PermissionGroup = {
+      name: 'Settings',
+      items: [
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomJoinRules,
+          },
+          name: 'Change Space Access',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomCanonicalAlias,
+          },
+          name: 'Publish Address',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomPowerLevels,
+          },
+          name: 'Change All Permission',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.PowerLevelTags,
+          },
+          name: 'Edit Power Levels',
+        },
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomTombstone,
+          },
+          name: 'Upgrade Space',
+        },
+        {
+          location: {
+            state: true,
+          },
+          name: 'Other Settings',
+        },
+      ],
+    };
+
+    const otherSettingsGroup: PermissionGroup = {
+      name: 'Other',
+      items: [
+        {
+          location: {
+            state: true,
+            key: StateEvent.RoomServerAcl,
+          },
+          name: 'Change Server ACLs',
+        },
+      ],
+    };
+
+    return [
+      messagesGroup,
+      moderationGroup,
+      roomOverviewGroup,
+      roomSettingsGroup,
+      otherSettingsGroup,
+    ];
+  }, []);
+
+  return groups;
+};

src/app/features/space-settings/styles.css.ts

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+import { config } from 'folds';
+
+export const SequenceCardStyle = style({
+  padding: config.space.S300,
+});

src/app/hooks/useGetRoom.ts

@@ -0,0 +1,29 @@
+import { Room } from 'matrix-js-sdk';
+import { useAtomValue } from 'jotai';
+import { useCallback, useMemo } from 'react';
+import { allRoomsAtom } from '../state/room-list/roomList';
+import { useMatrixClient } from './useMatrixClient';
+
+export const useAllJoinedRoomsSet = () => {
+  const allRooms = useAtomValue(allRoomsAtom);
+  const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]);
+
+  return allJoinedRooms;
+};
+
+export type GetRoomCallback = (roomId: string) => Room | undefined;
+export const useGetRoom = (rooms: Set<string>): GetRoomCallback => {
+  const mx = useMatrixClient();
+
+  const getRoom: GetRoomCallback = useCallback(
+    (rId: string) => {
+      if (rooms.has(rId)) {
+        return mx.getRoom(rId) ?? undefined;
+      }
+      return undefined;
+    },
+    [mx, rooms]
+  );
+
+  return getRoom;
+};

src/app/hooks/useImagePackRooms.ts

@@ -0,0 +1,22 @@
+import { Room } from 'matrix-js-sdk';
+import { useMemo } from 'react';
+import { getAllParents } from '../utils/room';
+import { useMatrixClient } from './useMatrixClient';
+
+export const useImagePackRooms = (
+  roomId: string,
+  roomToParents: Map<string, Set<string>>
+): Room[] => {
+  const mx = useMatrixClient();
+
+  const imagePackRooms: Room[] = useMemo(() => {
+    const allParentSpaces = [roomId].concat(Array.from(getAllParents(roomToParents, roomId)));
+    return allParentSpaces.reduce<Room[]>((list, rId) => {
+      const r = mx.getRoom(rId);
+      if (r) list.push(r);
+      return list;
+    }, []);
+  }, [mx, roomId, roomToParents]);
+
+  return imagePackRooms;
+};

src/app/hooks/useMemberFilter.ts

@@ -0,0 +1,57 @@
+import { useMemo } from 'react';
+import { RoomMember } from 'matrix-js-sdk';
+import { Membership } from '../../types/matrix/room';
+
+export const MembershipFilter = {
+  filterJoined: (m: RoomMember) => m.membership === Membership.Join,
+  filterInvited: (m: RoomMember) => m.membership === Membership.Invite,
+  filterLeaved: (m: RoomMember) =>
+    m.membership === Membership.Leave &&
+    m.events.member?.getStateKey() === m.events.member?.getSender(),
+  filterKicked: (m: RoomMember) =>
+    m.membership === Membership.Leave &&
+    m.events.member?.getStateKey() !== m.events.member?.getSender(),
+  filterBanned: (m: RoomMember) => m.membership === Membership.Ban,
+};
+
+export type MembershipFilterFn = (m: RoomMember) => boolean;
+
+export type MembershipFilterItem = {
+  name: string;
+  filterFn: MembershipFilterFn;
+};
+
+export const useMembershipFilterMenu = (): MembershipFilterItem[] =>
+  useMemo(
+    () => [
+      {
+        name: 'Joined',
+        filterFn: MembershipFilter.filterJoined,
+      },
+      {
+        name: 'Invited',
+        filterFn: MembershipFilter.filterInvited,
+      },
+      {
+        name: 'Left',
+        filterFn: MembershipFilter.filterLeaved,
+      },
+      {
+        name: 'Kicked',
+        filterFn: MembershipFilter.filterKicked,
+      },
+      {
+        name: 'Banned',
+        filterFn: MembershipFilter.filterBanned,
+      },
+    ],
+    []
+  );
+
+export const useMembershipFilter = (
+  index: number,
+  membershipFilter: MembershipFilterItem[]
+): MembershipFilterItem => {
+  const filter = membershipFilter[index] ?? membershipFilter[0];
+  return filter;
+};

src/app/hooks/useMemberSort.ts

@@ -0,0 +1,48 @@
+import { RoomMember } from 'matrix-js-sdk';
+import { useMemo } from 'react';
+
+export const MemberSort = {
+  Ascending: (a: RoomMember, b: RoomMember) =>
+    a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1,
+  Descending: (a: RoomMember, b: RoomMember) =>
+    a.name.toLowerCase() > b.name.toLowerCase() ? -1 : 1,
+  NewestFirst: (a: RoomMember, b: RoomMember) =>
+    (b.events.member?.getTs() ?? 0) - (a.events.member?.getTs() ?? 0),
+  Oldest: (a: RoomMember, b: RoomMember) =>
+    (a.events.member?.getTs() ?? 0) - (b.events.member?.getTs() ?? 0),
+};
+
+export type MemberSortFn = (a: RoomMember, b: RoomMember) => number;
+
+export type MemberSortItem = {
+  name: string;
+  sortFn: MemberSortFn;
+};
+
+export const useMemberSortMenu = (): MemberSortItem[] =>
+  useMemo(
+    () => [
+      {
+        name: 'A to Z',
+        sortFn: MemberSort.Ascending,
+      },
+      {
+        name: 'Z to A',
+        sortFn: MemberSort.Descending,
+      },
+      {
+        name: 'Newest',
+        sortFn: MemberSort.NewestFirst,
+      },
+      {
+        name: 'Oldest',
+        sortFn: MemberSort.Oldest,
+      },
+    ],
+    []
+  );
+
+export const useMemberSort = (index: number, memberSort: MemberSortItem[]): MemberSortItem => {
+  const item = memberSort[index] ?? memberSort[0];
+  return item;
+};

src/app/hooks/useNotificationMode.ts

@@ -7,6 +7,19 @@ export enum NotificationMode {
   NotifyLoud = 'NotifyLoud',
 }
 
+export const getNotificationMode = (actions: PushRuleAction[]): NotificationMode => {
+  const soundTweak = actions.find(
+    (action) => typeof action === 'object' && action.set_tweak === TweakName.Sound
+  );
+  const notify = actions.find(
+    (action) => typeof action === 'string' && action === PushRuleActionName.Notify
+  );
+
+  if (notify && soundTweak) return NotificationMode.NotifyLoud;
+  if (notify) return NotificationMode.Notify;
+  return NotificationMode.OFF;
+};
+
 export type NotificationModeOptions = {
   soundValue?: string;
   highlight?: boolean;
@@ -49,18 +62,7 @@ export const useNotificationModeActions = (
 };
 
 export const useNotificationActionsMode = (actions: PushRuleAction[]): NotificationMode => {
-  const mode: NotificationMode = useMemo(() => {
+  const mode: NotificationMode = useMemo(() => getNotificationMode(actions), [actions]);
-    const soundTweak = actions.find(
-      (action) => typeof action === 'object' && action.set_tweak === TweakName.Sound
-    );
-    const notify = actions.find(
-      (action) => typeof action === 'string' && action === PushRuleActionName.Notify
-    );
-
-    if (notify && soundTweak) return NotificationMode.NotifyLoud;
-    if (notify) return NotificationMode.Notify;
-    return NotificationMode.OFF;
-  }, [actions]);
 
   return mode;
 };

src/app/hooks/usePowerLevelTags.ts

@@ -1,38 +1,179 @@
+import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
 import { useCallback, useMemo } from 'react';
+import { IPowerLevels } from './usePowerLevels';
+import { useStateEvent } from './useStateEvent';
+import { StateEvent } from '../../types/matrix/room';
+import { IImageInfo } from '../../types/matrix/common';
+import { ThemeKind } from './useTheme';
+import { accessibleColor } from '../plugins/color';
 
+export type PowerLevelTagIcon = {
+  key?: string;
+  info?: IImageInfo;
+};
 export type PowerLevelTag = {
   name: string;
+  color?: string;
+  icon?: PowerLevelTagIcon;
 };
-export const usePowerLevelTags = () => {
-  const powerLevelTags = useMemo(
-    () => ({
-      9000: {
-        name: 'Goku',
-      },
-      101: {
-        name: 'Founder',
-      },
-      100: {
-        name: 'Admin',
-      },
-      50: {
-        name: 'Moderator',
-      },
-      0: {
-        name: 'Default',
-      },
-    }),
-    []
-  );
 
-  return useCallback(
+export type PowerLevelTags = Record<number, PowerLevelTag>;
-    (powerLevel: number): PowerLevelTag => {
+
-      if (powerLevel >= 9000) return powerLevelTags[9000];
+export const powerSortFn = (a: number, b: number) => b - a;
-      if (powerLevel >= 101) return powerLevelTags[101];
+export const sortPowers = (powers: number[]): number[] => powers.sort(powerSortFn);
-      if (powerLevel === 100) return powerLevelTags[100];
+
-      if (powerLevel >= 50) return powerLevelTags[50];
+export const getPowers = (tags: PowerLevelTags): number[] => {
-      return powerLevelTags[0];
+  const powers: number[] = Object.keys(tags).map((p) => parseInt(p, 10));
+
+  return sortPowers(powers);
+};
+
+export const getUsedPowers = (powerLevels: IPowerLevels): Set<number> => {
+  const powers: Set<number> = new Set();
+
+  const findAndAddPower = (data: Record<string, unknown>) => {
+    Object.keys(data).forEach((key) => {
+      const powerOrAny: unknown = data[key];
+
+      if (typeof powerOrAny === 'number') {
+        powers.add(powerOrAny);
+        return;
+      }
+      if (powerOrAny && typeof powerOrAny === 'object') {
+        findAndAddPower(powerOrAny as Record<string, unknown>);
+      }
+    });
+  };
+
+  findAndAddPower(powerLevels);
+
+  return powers;
+};
+
+const DEFAULT_TAGS: PowerLevelTags = {
+  9001: {
+    name: 'Goku',
+    color: '#ff6a00',
+  },
+  102: {
+    name: 'Goku Reborn',
+    color: '#ff6a7f',
+  },
+  101: {
+    name: 'Founder',
+    color: '#0000ff',
+  },
+  100: {
+    name: 'Admin',
+    color: '#0088ff',
+  },
+  50: {
+    name: 'Moderator',
+    color: '#1fd81f',
+  },
+  0: {
+    name: 'Member',
+    color: '#91cfdf',
+  },
+  [-1]: {
+    name: 'Muted',
+    color: '#888888',
+  },
+};
+
+const generateFallbackTag = (powerLevelTags: PowerLevelTags, power: number): PowerLevelTag => {
+  const highToLow = sortPowers(getPowers(powerLevelTags));
+
+  const tagPower = highToLow.find((p) => p < power);
+  const tag = typeof tagPower === 'number' ? powerLevelTags[tagPower] : undefined;
+
+  return {
+    name: tag ? `${tag.name} ${power}` : `Team ${power}`,
+  };
+};
+
+export type GetPowerLevelTag = (powerLevel: number) => PowerLevelTag;
+
+export const usePowerLevelTags = (
+  room: Room,
+  powerLevels: IPowerLevels
+): [PowerLevelTags, GetPowerLevelTag] => {
+  const tagsEvent = useStateEvent(room, StateEvent.PowerLevelTags);
+
+  const powerLevelTags: PowerLevelTags = useMemo(() => {
+    const content = tagsEvent?.getContent<PowerLevelTags>();
+    const powerToTags: PowerLevelTags = { ...content };
+
+    const powers = getUsedPowers(powerLevels);
+    Array.from(powers).forEach((power) => {
+      if (powerToTags[power]?.name === undefined) {
+        powerToTags[power] = DEFAULT_TAGS[power] ?? generateFallbackTag(DEFAULT_TAGS, power);
+      }
+    });
+
+    return powerToTags;
+  }, [powerLevels, tagsEvent]);
+
+  const getTag: GetPowerLevelTag = useCallback(
+    (power) => {
+      const tag: PowerLevelTag | undefined = powerLevelTags[power];
+      return tag ?? generateFallbackTag(DEFAULT_TAGS, power);
     },
     [powerLevelTags]
   );
+
+  return [powerLevelTags, getTag];
+};
+
+export const useFlattenPowerLevelTagMembers = (
+  members: RoomMember[],
+  getPowerLevel: (userId: string) => number,
+  getTag: GetPowerLevelTag
+): Array<PowerLevelTag | RoomMember> => {
+  const PLTagOrRoomMember = useMemo(() => {
+    let prevTag: PowerLevelTag | undefined;
+    const tagOrMember: Array<PowerLevelTag | RoomMember> = [];
+    members.forEach((member) => {
+      const memberPL = getPowerLevel(member.userId);
+      const tag = getTag(memberPL);
+      if (tag !== prevTag) {
+        prevTag = tag;
+        tagOrMember.push(tag);
+      }
+      tagOrMember.push(member);
+    });
+    return tagOrMember;
+  }, [members, getTag, getPowerLevel]);
+
+  return PLTagOrRoomMember;
+};
+
+export const getTagIconSrc = (
+  mx: MatrixClient,
+  useAuthentication: boolean,
+  icon: PowerLevelTagIcon
+): string | undefined =>
+  icon?.key?.startsWith('mxc://')
+    ? mx.mxcUrlToHttp(icon.key, 96, 96, 'scale', undefined, undefined, useAuthentication) ?? '🌻'
+    : icon?.key;
+
+export const useAccessibleTagColors = (
+  themeKind: ThemeKind,
+  powerLevelTags: PowerLevelTags
+): Map<string, string> => {
+  const accessibleColors: Map<string, string> = useMemo(() => {
+    const colors: Map<string, string> = new Map();
+
+    getPowers(powerLevelTags).forEach((power) => {
+      const tag = powerLevelTags[power];
+      const { color } = tag;
+      if (!color) return;
+
+      colors.set(color, accessibleColor(themeKind, color));
+    });
+
+    return colors;
+  }, [powerLevelTags, themeKind]);
+
+  return accessibleColors;
 };

src/app/hooks/usePowerLevels.ts

@@ -1,26 +1,16 @@
-import { Room } from 'matrix-js-sdk';
+import { MatrixEvent, Room } from 'matrix-js-sdk';
-import { createContext, useCallback, useContext, useMemo } from 'react';
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import produce from 'immer';
 import { useStateEvent } from './useStateEvent';
 import { StateEvent } from '../../types/matrix/room';
-import { useForceUpdate } from './useForceUpdate';
 import { useStateEventCallback } from './useStateEventCallback';
 import { useMatrixClient } from './useMatrixClient';
 import { getStateEvent } from '../utils/room';
 
 export type PowerLevelActions = 'invite' | 'redact' | 'kick' | 'ban' | 'historical';
+export type PowerLevelNotificationsAction = 'room';
 
-enum DefaultPowerLevels {
+export type IPowerLevels = {
-  usersDefault = 0,
-  stateDefault = 50,
-  eventsDefault = 0,
-  invite = 0,
-  redact = 50,
-  kick = 50,
-  ban = 50,
-  historical = 0,
-}
-
-export interface IPowerLevels {
   users_default?: number;
   state_default?: number;
   events_default?: number;
@@ -33,12 +23,53 @@ export interface IPowerLevels {
   events?: Record<string, number>;
   users?: Record<string, number>;
   notifications?: Record<string, number>;
-}
+};
+
+const DEFAULT_POWER_LEVELS: Required<IPowerLevels> = {
+  users_default: 0,
+  state_default: 50,
+  events_default: 0,
+  invite: 0,
+  redact: 50,
+  kick: 50,
+  ban: 50,
+  historical: 0,
+  events: {},
+  users: {},
+  notifications: {
+    room: 50,
+  },
+};
+
+const fillMissingPowers = (powerLevels: IPowerLevels): IPowerLevels =>
+  produce(powerLevels, (draftPl: IPowerLevels) => {
+    const keys = Object.keys(DEFAULT_POWER_LEVELS) as unknown as (keyof IPowerLevels)[];
+    keys.forEach((key) => {
+      if (draftPl[key] === undefined) {
+        // eslint-disable-next-line no-param-reassign
+        draftPl[key] = DEFAULT_POWER_LEVELS[key] as any;
+      }
+    });
+    if (draftPl.notifications && typeof draftPl.notifications.room !== 'number') {
+      // eslint-disable-next-line no-param-reassign
+      draftPl.notifications.room = DEFAULT_POWER_LEVELS.notifications.room;
+    }
+    return draftPl;
+  });
+
+const getPowersLevelFromMatrixEvent = (mEvent?: MatrixEvent): IPowerLevels => {
+  const pl = mEvent?.getContent<IPowerLevels>();
+  if (!pl) return DEFAULT_POWER_LEVELS;
+
+  return fillMissingPowers(pl);
+};
 
 export function usePowerLevels(room: Room): IPowerLevels {
   const powerLevelsEvent = useStateEvent(room, StateEvent.RoomPowerLevels);
-  const powerLevels: IPowerLevels =
+  const powerLevels: IPowerLevels = useMemo(
-    powerLevelsEvent?.getContent<IPowerLevels>() ?? DefaultPowerLevels;
+    () => getPowersLevelFromMatrixEvent(powerLevelsEvent),
+    [powerLevelsEvent]
+  );
 
   return powerLevels;
 }
@@ -55,7 +86,18 @@ export const usePowerLevelsContext = (): IPowerLevels => {
 
 export const useRoomsPowerLevels = (rooms: Room[]): Map<string, IPowerLevels> => {
   const mx = useMatrixClient();
-  const [updateCount, forceUpdate] = useForceUpdate();
+  const getRoomsPowerLevels = useCallback(() => {
+    const rToPl = new Map<string, IPowerLevels>();
+
+    rooms.forEach((room) => {
+      const mEvent = getStateEvent(room, StateEvent.RoomPowerLevels, '');
+      rToPl.set(room.roomId, getPowersLevelFromMatrixEvent(mEvent));
+    });
+
+    return rToPl;
+  }, [rooms]);
+
+  const [roomToPowerLevels, setRoomToPowerLevels] = useState(() => getRoomsPowerLevels());
 
   useStateEventCallback(
     mx,
@@ -68,28 +110,13 @@ export const useRoomsPowerLevels = (rooms: Room[]): Map<string, IPowerLevels> =>
           event.getStateKey() === '' &&
           rooms.find((r) => r.roomId === roomId)
         ) {
-          forceUpdate();
+          setRoomToPowerLevels(getRoomsPowerLevels());
         }
       },
-      [rooms, forceUpdate]
+      [rooms, getRoomsPowerLevels]
     )
   );
 
-  const roomToPowerLevels = useMemo(
-    () => {
-      const rToPl = new Map<string, IPowerLevels>();
-
-      rooms.forEach((room) => {
-        const pl = getStateEvent(room, StateEvent.RoomPowerLevels, '')?.getContent<IPowerLevels>();
-        if (pl) rToPl.set(room.roomId, pl);
-      });
-
-      return rToPl;
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [rooms, updateCount]
-  );
-
   return roomToPowerLevels;
 };
 
@@ -104,42 +131,83 @@ export type CanDoAction = (
   action: PowerLevelActions,
   powerLevel: number
 ) => boolean;
+export type CanDoNotificationAction = (
+  powerLevels: IPowerLevels,
+  action: PowerLevelNotificationsAction,
+  powerLevel: number
+) => boolean;
 
 export type PowerLevelsAPI = {
   getPowerLevel: GetPowerLevel;
   canSendEvent: CanSend;
   canSendStateEvent: CanSend;
   canDoAction: CanDoAction;
+  canDoNotificationAction: CanDoNotificationAction;
 };
 
-export const powerLevelAPI: PowerLevelsAPI = {
+export type ReadPowerLevelAPI = {
-  getPowerLevel: (powerLevels, userId) => {
+  user: GetPowerLevel;
+  event: (powerLevels: IPowerLevels, eventType: string | undefined) => number;
+  state: (powerLevels: IPowerLevels, eventType: string | undefined) => number;
+  action: (powerLevels: IPowerLevels, action: PowerLevelActions) => number;
+  notification: (powerLevels: IPowerLevels, action: PowerLevelNotificationsAction) => number;
+};
+
+export const readPowerLevel: ReadPowerLevelAPI = {
+  user: (powerLevels, userId) => {
     const { users_default: usersDefault, users } = powerLevels;
     if (userId && users && typeof users[userId] === 'number') {
       return users[userId];
     }
-    return usersDefault ?? DefaultPowerLevels.usersDefault;
+    return usersDefault ?? DEFAULT_POWER_LEVELS.users_default;
   },
-  canSendEvent: (powerLevels, eventType, powerLevel) => {
+  event: (powerLevels, eventType) => {
     const { events, events_default: eventsDefault } = powerLevels;
     if (events && eventType && typeof events[eventType] === 'number') {
-      return powerLevel >= events[eventType];
+      return events[eventType];
     }
-    return powerLevel >= (eventsDefault ?? DefaultPowerLevels.eventsDefault);
+    return eventsDefault ?? DEFAULT_POWER_LEVELS.events_default;
   },
-  canSendStateEvent: (powerLevels, eventType, powerLevel) => {
+  state: (powerLevels, eventType) => {
     const { events, state_default: stateDefault } = powerLevels;
     if (events && eventType && typeof events[eventType] === 'number') {
-      return powerLevel >= events[eventType];
+      return events[eventType];
     }
-    return powerLevel >= (stateDefault ?? DefaultPowerLevels.stateDefault);
+    return stateDefault ?? DEFAULT_POWER_LEVELS.state_default;
+  },
+  action: (powerLevels, action) => {
+    const powerLevel = powerLevels[action];
+    if (typeof powerLevel === 'number') {
+      return powerLevel;
+    }
+    return DEFAULT_POWER_LEVELS[action];
+  },
+  notification: (powerLevels, action) => {
+    const powerLevel = powerLevels.notifications?.[action];
+    if (typeof powerLevel === 'number') {
+      return powerLevel;
+    }
+    return DEFAULT_POWER_LEVELS.notifications[action];
+  },
+};
+
+export const powerLevelAPI: PowerLevelsAPI = {
+  getPowerLevel: (powerLevels, userId) => readPowerLevel.user(powerLevels, userId),
+  canSendEvent: (powerLevels, eventType, powerLevel) => {
+    const requiredPL = readPowerLevel.event(powerLevels, eventType);
+    return powerLevel >= requiredPL;
+  },
+  canSendStateEvent: (powerLevels, eventType, powerLevel) => {
+    const requiredPL = readPowerLevel.state(powerLevels, eventType);
+    return powerLevel >= requiredPL;
   },
   canDoAction: (powerLevels, action, powerLevel) => {
-    const requiredPL = powerLevels[action];
+    const requiredPL = readPowerLevel.action(powerLevels, action);
-    if (typeof requiredPL === 'number') {
+    return powerLevel >= requiredPL;
-      return powerLevel >= requiredPL;
+  },
-    }
+  canDoNotificationAction: (powerLevels, action, powerLevel) => {
-    return powerLevel >= DefaultPowerLevels[action];
+    const requiredPL = readPowerLevel.notification(powerLevels, action);
+    return powerLevel >= requiredPL;
   },
 };
 
@@ -167,10 +235,121 @@ export const usePowerLevelsAPI = (powerLevels: IPowerLevels) => {
     [powerLevels]
   );
 
+  const canDoNotificationAction = useCallback(
+    (action: PowerLevelNotificationsAction, powerLevel: number) =>
+      powerLevelAPI.canDoNotificationAction(powerLevels, action, powerLevel),
+    [powerLevels]
+  );
+
   return {
     getPowerLevel,
     canSendEvent,
     canSendStateEvent,
     canDoAction,
+    canDoNotificationAction,
   };
 };
+
+/**
+ * Permissions
+ */
+
+type DefaultPermissionLocation = {
+  user: true;
+  key?: string;
+};
+
+type ActionPermissionLocation = {
+  action: true;
+  key: PowerLevelActions;
+};
+
+type EventPermissionLocation = {
+  state?: true;
+  key?: string;
+};
+
+type NotificationPermissionLocation = {
+  notification: true;
+  key: PowerLevelNotificationsAction;
+};
+
+export type PermissionLocation =
+  | DefaultPermissionLocation
+  | ActionPermissionLocation
+  | EventPermissionLocation
+  | NotificationPermissionLocation;
+
+export const getPermissionPower = (
+  powerLevels: IPowerLevels,
+  location: PermissionLocation
+): number => {
+  if ('user' in location) {
+    return readPowerLevel.user(powerLevels, location.key);
+  }
+  if ('action' in location) {
+    return readPowerLevel.action(powerLevels, location.key);
+  }
+  if ('notification' in location) {
+    return readPowerLevel.notification(powerLevels, location.key);
+  }
+  if ('state' in location) {
+    return readPowerLevel.state(powerLevels, location.key);
+  }
+
+  return readPowerLevel.event(powerLevels, location.key);
+};
+
+export const applyPermissionPower = (
+  powerLevels: IPowerLevels,
+  location: PermissionLocation,
+  power: number
+): IPowerLevels => {
+  if ('user' in location) {
+    if (typeof location.key === 'string') {
+      const users = powerLevels.users ?? {};
+      users[location.key] = power;
+      // eslint-disable-next-line no-param-reassign
+      powerLevels.users = users;
+      return powerLevels;
+    }
+    // eslint-disable-next-line no-param-reassign
+    powerLevels.users_default = power;
+    return powerLevels;
+  }
+  if ('action' in location) {
+    // eslint-disable-next-line no-param-reassign
+    powerLevels[location.key] = power;
+    return powerLevels;
+  }
+  if ('notification' in location) {
+    const notifications = powerLevels.notifications ?? {};
+    notifications[location.key] = power;
+    // eslint-disable-next-line no-param-reassign
+    powerLevels.notifications = notifications;
+    return powerLevels;
+  }
+  if ('state' in location) {
+    if (typeof location.key === 'string') {
+      const events = powerLevels.events ?? {};
+      events[location.key] = power;
+      // eslint-disable-next-line no-param-reassign
+      powerLevels.events = events;
+      return powerLevels;
+    }
+    // eslint-disable-next-line no-param-reassign
+    powerLevels.state_default = power;
+    return powerLevels;
+  }
+
+  if (typeof location.key === 'string') {
+    const events = powerLevels.events ?? {};
+    events[location.key] = power;
+    // eslint-disable-next-line no-param-reassign
+    powerLevels.events = events;
+    return powerLevels;
+  }
+  // eslint-disable-next-line no-param-reassign
+  powerLevels.events_default = power;
+  return powerLevels;
+};

src/app/hooks/useRoom.ts

@@ -10,3 +10,13 @@ export function useRoom(): Room {
   if (!room) throw new Error('Room not provided!');
   return room;
 }
+
+const IsDirectRoomContext = createContext<boolean>(false);
+
+export const IsDirectRoomProvider = IsDirectRoomContext.Provider;
+
+export const useIsDirectRoom = () => {
+  const direct = useContext(IsDirectRoomContext);
+
+  return direct;
+};