mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-06 15:30:27 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge branch 'dev' into dev

Browse source
This commit is contained in:
Ginger 2025-03-28 10:53:01 -04:00 • committed by GitHub
commit 6718dd4347
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
168 changed files with 8515 additions and 4181 deletions
Download patch file Download diff file Expand all files Collapse all files

6
.github/workflows/build-pull-request.yml vendored
View file

@ -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

4
.github/workflows/deploy-pull-request.yml vendored
View file

@ -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 }}

2
.github/workflows/netlify-dev.yml vendored
View file

@ -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'

6
.github/workflows/prod-deploy.yml vendored
View file

@ -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 }}

6
contrib/caddy/caddyfile
View file

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

460
package-lock.json generated
View file

@ -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",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
"integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
"version": "1.30.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
"integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
"license": "MIT",
"engines": {
"node": ">=6"
}
@ -9654,6 +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",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.0.13.tgz",
"integrity": "sha512-/9ovhv2M2dGTuA+dY93B9trfyWMDRQw2jdVBhHNP6wr0oF34wG2i/N55801iZIpgUpnHDm4F/FabGQLyc+eOgg==",
"version": "5.4.15",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.15.tgz",
"integrity": "sha512-6ANcZRivqL/4WtwPGTKNaosuNJr5tWiftOC7liM7G9+rMb8+oeJeyzymDu4rTN93seySBmbjSfsS3Vzr19KNtA==",
"license": "MIT",
"dependencies": {
"esbuild": "^0.19.3",
"postcss": "^8.4.32",
"rollup": "^4.2.0"
"esbuild": "^0.21.3",
"postcss": "^8.4.43",
"rollup": "^4.20.0"
},
"bin": {
"vite": "bin/vite.js"
@ -11302,6 +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",

7
package.json
View file

@ -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"

106
src/app/features/settings/developer-tools/AccountDataEditor.tsx → src/app/components/AccountDataEditor.tsx
View file

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

25
src/app/components/BetaNoticeBadge.tsx Normal file
View file

@ -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>
);
}

59
src/app/components/HexColorPickerPopOut.tsx Normal file
View file

@ -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>
);
}

149
src/app/components/JoinRulesSwitcher.tsx Normal file
View file

@ -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>
);
}

45
src/app/components/MemberSortMenu.tsx Normal file
View file

@ -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>
);
}

49
src/app/components/MembershipFilterMenu.tsx Normal file
View file

@ -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>
);
}

2
src/app/components/RenderMessageContent.tsx
View file

@ -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) => (

120
src/app/components/RoomNotificationSwitcher.tsx Normal file
View file

@ -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>
);
}

8
src/app/components/cutout-card/CutoutCard.css.ts Normal file
View file

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

15
src/app/components/cutout-card/CutoutCard.tsx Normal file
View file

@ -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}
/>
)
);

1
src/app/components/cutout-card/index.ts Normal file
View file

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

6
src/app/components/emoji-board/EmojiBoard.tsx
View file

@ -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();
}
}

53
src/app/components/member-tile/MemberTile.tsx Normal file
View file

@ -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>
);
}
);

1
src/app/components/member-tile/index.ts Normal file
View file

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

32
src/app/components/member-tile/style.css.ts Normal file
View file

@ -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,
]);

6
src/app/components/message/MsgTypeRenderers.tsx
View file

@ -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,

30
src/app/components/message/Reply.tsx
View file

@ -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>

4
src/app/components/message/layout/Base.tsx
View file

@ -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

4
src/app/components/message/layout/layout.css.ts
View file

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

21
src/app/components/power/PowerColorBadge.tsx Normal file
View file

@ -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}
/>
)
);

15
src/app/components/power/PowerIcon.tsx Normal file
View file

@ -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} />
);
}

94
src/app/components/power/PowerSelector.tsx Normal file
View file

@ -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>
);
}

3
src/app/components/power/index.ts Normal file
View file

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

90
src/app/components/power/style.css.ts Normal file
View file

@ -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>;

16
src/app/components/server-badge/ServerBadge.tsx Normal file
View file

@ -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>
));

1
src/app/components/server-badge/index.ts Normal file
View file

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

396
src/app/features/common-settings/developer-tools/DevelopTools.tsx Normal file
View file

@ -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>
);
}

208
src/app/features/common-settings/developer-tools/SendRoomEvent.tsx Normal file
View file

@ -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>
);
}

298
src/app/features/common-settings/developer-tools/StateEventEditor.tsx Normal file
View file

@ -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>
);
}

1
src/app/features/common-settings/developer-tools/index.ts Normal file
View file

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

49
src/app/features/common-settings/emojis-stickers/EmojisStickers.tsx Normal file
View file

@ -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>
);
}

349
src/app/features/common-settings/emojis-stickers/RoomPacks.tsx Normal file
View file

@ -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>
)}
</>
);
}

1
src/app/features/common-settings/emojis-stickers/index.ts Normal file
View file

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

438
src/app/features/common-settings/general/RoomAddress.tsx Normal file
View file

@ -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>
);
}

150
src/app/features/common-settings/general/RoomEncryption.tsx Normal file
View file

@ -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>
);
}

169
src/app/features/common-settings/general/RoomHistoryVisibility.tsx Normal file
View file

@ -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>
);
}

130
src/app/features/common-settings/general/RoomJoinRules.tsx Normal file
View file

@ -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>
);
}

361
src/app/features/common-settings/general/RoomProfile.tsx Normal file
View file

@ -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>
);
}

70
src/app/features/common-settings/general/RoomPublish.tsx Normal file
View file

@ -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>
);
}

228
src/app/features/common-settings/general/RoomUpgrade.tsx Normal file
View file

@ -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>
);
}

7
src/app/features/common-settings/general/index.ts Normal file
View file

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

360
src/app/features/common-settings/members/Members.tsx Normal file
View file

@ -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>
);
}

1
src/app/features/common-settings/members/index.ts Normal file
View file

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

286
src/app/features/common-settings/permissions/PermissionGroups.tsx Normal file
View file

@ -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>
)}
</>
);
}

176
src/app/features/common-settings/permissions/Powers.tsx Normal file
View file

@ -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>
);
}

579
src/app/features/common-settings/permissions/PowersEditor.tsx Normal file
View file

@ -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>
);
}

4
src/app/features/common-settings/permissions/index.ts Normal file
View file

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

12
src/app/features/common-settings/permissions/types.ts Normal file
View file

@ -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[];
};

6
src/app/features/common-settings/styles.css.ts Normal file
View file

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

17
src/app/features/lobby/HierarchyItemMenu.tsx
View file

@ -18,16 +18,15 @@ import {
import { HierarchyItem } from '../../hooks/useSpaceHierarchy';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { MSpaceChildContent, StateEvent } from '../../../types/matrix/room';
import {
openInviteUser,
openSpaceSettings,
toggleRoomSettings,
} from '../../../client/action/navigation';
import { openInviteUser } 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();
};

8
src/app/features/lobby/LobbyHeader.tsx
View file

@ -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());

3
src/app/features/message-search/MessageSearch.tsx
View file

@ -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>
);

67
src/app/features/message-search/SearchResultGroup.tsx
View file

@ -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) }}>
<Text as="span" truncate>
<b>{displayName}</b>
</Text>
</Username>
<Box alignItems="Center" gap="200">
<Username style={{ color: usernameColor }}>
<Text as="span" truncate>
<UsernameBold>{displayName}</UsernameBold>
</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)}

52
src/app/features/room-nav/RoomNavItem.tsx
View file

@ -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>
}
>

172
src/app/features/room-settings/RoomSettings.tsx Normal file
View file

@ -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>
);
}

39
src/app/features/room-settings/RoomSettingsRenderer.tsx Normal file
View file

@ -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} />;
}

67
src/app/features/room-settings/general/General.tsx Normal file
View file

@ -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>
);
}

1
src/app/features/room-settings/general/index.ts Normal file
View file

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

2
src/app/features/room-settings/index.ts Normal file
View file

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

67
src/app/features/room-settings/permissions/Permissions.tsx Normal file
View file

@ -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>
);
}

1
src/app/features/room-settings/permissions/index.ts Normal file
View file

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

207
src/app/features/room-settings/permissions/usePermissionItems.ts Normal file
View file

@ -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;
};

6
src/app/features/room-settings/styles.css.ts Normal file
View file

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

216
src/app/features/room/MembersDrawer.tsx
View file

@ -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';
export const MembershipFilters = {
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 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;
};
import { useMembershipFilter, useMembershipFilterMenu } from '../../hooks/useMemberFilter';
import { useMemberSort, useMemberSortMenu } from '../../hooks/useMemberSort';
import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
import { MembershipFilterMenu } from '../../components/MembershipFilterMenu';
import { MemberSortMenu } from '../../components/MemberSortMenu';
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 sortFilter = sortFilterMenu[sortFilterIndex] ?? sortFilterMenu[0];
const membershipFilter = useMembershipFilter(membershipFilterIndex, membershipFilterMenu);
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(() => {
let prevTag: PowerLevelTag | undefined;
const tagOrMember: Array<PowerLevelTag | RoomMember> = [];
processMembers.forEach((m) => {
const plTag = getPowerLevelTag(m.powerLevel);
if (plTag !== prevTag) {
prevTag = plTag;
tagOrMember.push(plTag);
}
tagOrMember.push(m);
});
return tagOrMember;
}, [processMembers, getPowerLevelTag]);
const PLTagOrRoomMember = useFlattenPowerLevelTagMembers(
processMembers,
getPowerLevel,
getPowerLevelTag
);
const virtualizer = useVirtualizer({
count: PLTagOrRoomMember.length,
@ -295,38 +191,11 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
align="Start"
offset={4}
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => 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>
<MembershipFilterMenu
selected={membershipFilterIndex}
onSelect={setMembershipFilterIndex}
requestClose={() => setAnchor(undefined)}
/>
}
>
<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
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => 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>
<MemberSortMenu
selected={sortFilterIndex}
onSelect={setSortFilterIndex}
requestClose={() => setAnchor(undefined)}
/>
}
>
<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>
)}

46
src/app/features/room/RoomInput.tsx
View file

@ -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 {
getAllParents,
getMemberDisplayName,
getMentionContent,
trimReplyFromBody,
} from '../../utils/room';
import { 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 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 imagePackRooms: Room[] = useImagePackRooms(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>

50
src/app/features/room/RoomTimeline.tsx
View file

@ -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 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 imagePackRooms: Room[] = useImagePackRooms(room.roomId, 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} />

10
src/app/features/room/RoomView.tsx
View file

@ -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 && (

41
src/app/features/room/RoomViewHeader.tsx
View file

@ -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 = () => {
toggleRoomSettings(room.roomId);
const openSettings = useOpenRoomSettings();
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"

49
src/app/features/room/message/Message.tsx
View file

@ -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
as="button"
style={{ color: colorMXID(senderId) }}
data-user-id={senderId}
onContextMenu={onUserClick}
onClick={onUsernameClick}
>
<Text as="span" size={messageLayout === MessageLayout.Bubble ? 'T300' : 'T400'} truncate>
<b>{senderDisplayName}</b>
</Text>
</Username>
<Box alignItems="Center" gap="200">
<Username
as="button"
style={{ color: usernameColor }}
data-user-id={senderId}
onContextMenu={onUserClick}
onClick={onUsernameClick}
>
<Text
as="span"
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 && (
<>

2
src/app/features/room/message/MessageEditor.tsx
View file

@ -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();
}

48
src/app/features/room/room-pin-menu/RoomPinMenu.tsx
View file

@ -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) }}>
<Text as="span" truncate>
<b>{displayName}</b>
</Text>
</Username>
<Box alignItems="Center" gap="200">
<Username style={{ color: usernameColor }}>
<Text as="span" truncate>
<UsernameBold>{displayName}</UsernameBold>
</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)}

2
src/app/features/settings/account/Account.tsx
View file

@ -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])

74
src/app/features/settings/developer-tools/AccountData.tsx
View file

@ -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(
() => setAccountData(Array.from(mx.store.accountData.values())),
[mx, setAccountData]
)
useCallback(() => {
setAccountDataKeys(Array.from(mx.store.accountData.keys()));
}, [mx])
);
return (
@ -52,37 +54,45 @@ export function AccountData({ expand, onExpandToggle, onSelect }: AccountDataPro
}
/>
{expand && (
<SettingTile>
<Box direction="Column" gap="200">
<Text size="L400">Types</Text>
<Box gap="200" wrap="Wrap">
<Chip
variant="Secondary"
fill="Soft"
radii="Pill"
before={<Icon size="50" src={Icons.Plus} />}
onClick={() => onSelect(null)}
>
<Box direction="Column" gap="100">
<Box justifyContent="SpaceBetween">
<Text size="L400">Events</Text>
<Text size="L400">Total: {accountDataTypes.length}</Text>
</Box>
<CutoutCard>
<MenuItem
variant="Surface"
fill="None"
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>
{accountData.map((mEvent) => (
<Chip
key={mEvent.getType()}
variant="Secondary"
fill="Soft"
radii="Pill"
onClick={() => onSelect(mEvent.getType())}
>
</Box>
</MenuItem>
{accountDataTypes.sort().map((type) => (
<MenuItem
key={type}
variant="Surface"
fill="None"
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>
</Box>
</SettingTile>
</Box>
</MenuItem>
))}
</CutoutCard>
</Box>
)}
</SequenceCard>
</Box>

16
src/app/features/settings/developer-tools/DevelopTools.tsx
View file

@ -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)}
/>
);

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

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

16
src/app/features/settings/general/General.tsx
View file

@ -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"

173
src/app/features/space-settings/SpaceSettings.tsx Normal file
View file

@ -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>
);
}

39
src/app/features/space-settings/SpaceSettingsRenderer.tsx Normal file
View file

@ -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} />;
}

63
src/app/features/space-settings/general/General.tsx Normal file
View file

@ -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>
);
}

1
src/app/features/space-settings/general/index.ts Normal file
View file

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

2
src/app/features/space-settings/index.ts Normal file
View file

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

67
src/app/features/space-settings/permissions/Permissions.tsx Normal file
View file

@ -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>
);
}

1
src/app/features/space-settings/permissions/index.ts Normal file
View file

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

148
src/app/features/space-settings/permissions/usePermissionItems.ts Normal file
View file

@ -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;
};

6
src/app/features/space-settings/styles.css.ts Normal file
View file

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

29
src/app/hooks/useGetRoom.ts Normal file
View file

@ -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;
};

22
src/app/hooks/useImagePackRooms.ts Normal file
View file

@ -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;
};

57
src/app/hooks/useMemberFilter.ts Normal file
View file

@ -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;
};

48
src/app/hooks/useMemberSort.ts Normal file
View file

@ -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;
};

26
src/app/hooks/useNotificationMode.ts
View file

@ -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 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]);
const mode: NotificationMode = useMemo(() => getNotificationMode(actions), [actions]);
return mode;
};

197
src/app/hooks/usePowerLevelTags.ts
View file

@ -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(
(powerLevel: number): PowerLevelTag => {
if (powerLevel >= 9000) return powerLevelTags[9000];
if (powerLevel >= 101) return powerLevelTags[101];
if (powerLevel === 100) return powerLevelTags[100];
if (powerLevel >= 50) return powerLevelTags[50];
return powerLevelTags[0];
export type PowerLevelTags = Record<number, PowerLevelTag>;
export const powerSortFn = (a: number, b: number) => b - a;
export const sortPowers = (powers: number[]): number[] => powers.sort(powerSortFn);
export const getPowers = (tags: PowerLevelTags): number[] => {
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;
};

279
src/app/hooks/usePowerLevels.ts
View file

@ -1,26 +1,16 @@
import { Room } from 'matrix-js-sdk';
import { createContext, useCallback, useContext, useMemo } from 'react';
import { MatrixEvent, Room } from 'matrix-js-sdk';
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 {
usersDefault = 0,
stateDefault = 50,
eventsDefault = 0,
invite = 0,
redact = 50,
kick = 50,
ban = 50,
historical = 0,
}
export interface IPowerLevels {
export type 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 =
powerLevelsEvent?.getContent<IPowerLevels>() ?? DefaultPowerLevels;
const powerLevels: IPowerLevels = useMemo(
() => 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 = {
getPowerLevel: (powerLevels, userId) => {
export type ReadPowerLevelAPI = {
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];
if (typeof requiredPL === 'number') {
return powerLevel >= requiredPL;
}
return powerLevel >= DefaultPowerLevels[action];
const requiredPL = readPowerLevel.action(powerLevels, action);
return powerLevel >= requiredPL;
},
canDoNotificationAction: (powerLevels, action, powerLevel) => {
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;
};

10
src/app/hooks/useRoom.ts
View file

@ -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;
};

Some files were not shown because too many files have changed in this diff Show more