tezlm/cinny
1
0
Fork 0
forked from mirror/cinny
Code Pull requests Activity

Merge upstream into custom

Browse source
This commit is contained in:
tezlm 2024-07-26 19:53:37 -07:00
commit ad4ccb6512
Signed by: tezlm
GPG key ID: 649733FCD94AFBBA
467 changed files with 34587 additions and 23187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
.eslintrc.js → .eslintrc.cjs
View file

@ -61,4 +61,12 @@ module.exports = {
"@typescript-eslint/no-unused-vars": "error",
"@typescript-eslint/no-shadow": "error"
},
overrides: [
{
files: ['*.ts'],
rules: {
'no-undef': 'off',
},
},
],
};

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

@ -12,20 +12,20 @@ jobs:
PR_NUMBER: ${{github.event.number}}
steps:
- name: Checkout repository
uses: actions/checkout@v3.5.3
uses: actions/checkout@v4.1.7
- name: Setup node
uses: actions/setup-node@v3.8.1
uses: actions/setup-node@v4.0.3
with:
node-version: 18.12.1
cache: "npm"
node-version: 20.12.2
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build app
env:
NODE_OPTIONS: "--max_old_space_size=4096"
NODE_OPTIONS: '--max_old_space_size=4096'
run: npm run build
- name: Upload artifact
uses: actions/upload-artifact@v3.1.2
uses: actions/upload-artifact@v4.3.4
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@v3.1.2
uses: actions/upload-artifact@v4.3.4
with:
name: pr
path: ./pr.txt

2
.github/workflows/cla.yml vendored
View file

@ -12,7 +12,7 @@ jobs:
- name: 'CLA Assistant'
if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
# Beta Release
uses: cla-assistant/github-action@v2.3.0
uses: cla-assistant/github-action@v2.4.0
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
# the below token should have repo scope and must be manually added by you in the repository's secret

8
.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@246dbf436b23d7c49e21a7ab8204ca9ecd1fe615
uses: dawidd6/action-download-artifact@bf251b5aa9c2f7eeb574a96ee720e24f801b7c11
with:
workflow: ${{ github.event.workflow.id }}
run_id: ${{ github.event.workflow_run.id }}
@ -24,7 +24,7 @@ jobs:
id: pr
run: echo "id=$(<pr.txt)" >> $GITHUB_OUTPUT
- name: Download artifact
uses: dawidd6/action-download-artifact@246dbf436b23d7c49e21a7ab8204ca9ecd1fe615
uses: dawidd6/action-download-artifact@bf251b5aa9c2f7eeb574a96ee720e24f801b7c11
with:
workflow: ${{ github.event.workflow.id }}
run_id: ${{ github.event.workflow_run.id }}
@ -32,7 +32,7 @@ jobs:
path: dist
- name: Deploy to Netlify
id: netlify
uses: nwtgck/actions-netlify@7a92f00dde8c92a5a9e8385ec2919775f7647352
uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
with:
publish-dir: dist
deploy-message: "Deploy PR ${{ steps.pr.outputs.id }}"
@ -45,7 +45,7 @@ jobs:
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_PR_CINNY }}
timeout-minutes: 1
- name: Comment preview on PR
uses: thollander/actions-comment-pull-request@1d3973dc4b8e1399c0620d3f2b1aa5e795465308
uses: thollander/actions-comment-pull-request@fabd468d3a1a0b97feee5f6b9e499eab0dd903f6
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:

4
.github/workflows/docker-pr.yml vendored
View file

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

2
.github/workflows/lockfile.yml vendored
View file

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

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

@ -3,7 +3,7 @@ name: Deploy to Netlify (dev)
on:
push:
branches:
- dev
- dev
jobs:
deploy-to-netlify:
@ -11,23 +11,23 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v3.5.3
uses: actions/checkout@v4.1.7
- name: Setup node
uses: actions/setup-node@v3.8.1
uses: actions/setup-node@v4.0.3
with:
node-version: 18.12.1
cache: "npm"
node-version: 20.12.2
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build app
env:
NODE_OPTIONS: "--max_old_space_size=4096"
NODE_OPTIONS: '--max_old_space_size=4096'
run: npm run build
- name: Deploy to Netlify
uses: nwtgck/actions-netlify@7a92f00dde8c92a5a9e8385ec2919775f7647352
uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
with:
publish-dir: dist
deploy-message: "Dev deploy ${{ github.sha }}"
deploy-message: 'Dev deploy ${{ github.sha }}'
enable-commit-comment: false
github-token: ${{ secrets.GITHUB_TOKEN }}
production-deploy: true

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

@ -10,23 +10,23 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v3.5.3
uses: actions/checkout@v4.1.7
- name: Setup node
uses: actions/setup-node@v3.8.1
uses: actions/setup-node@v4.0.3
with:
node-version: 18.12.1
cache: "npm"
node-version: 20.12.2
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build app
env:
NODE_OPTIONS: "--max_old_space_size=4096"
NODE_OPTIONS: '--max_old_space_size=4096'
run: npm run build
- name: Deploy to Netlify
uses: nwtgck/actions-netlify@7a92f00dde8c92a5a9e8385ec2919775f7647352
uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
with:
publish-dir: dist
deploy-message: "Prod deploy ${{ github.ref_name }}"
deploy-message: 'Prod deploy ${{ github.ref_name }}'
enable-commit-comment: false
github-token: ${{ secrets.GITHUB_TOKEN }}
production-deploy: true
@ -52,7 +52,7 @@ jobs:
gpg --export | xxd -p
echo '${{ secrets.GNUPG_PASSPHRASE }}' | gpg --batch --yes --pinentry-mode loopback --passphrase-fd 0 --armor --detach-sign cinny-${{ steps.vars.outputs.tag }}.tar.gz
- name: Upload tagged release
uses: softprops/action-gh-release@de2c0eb89ae2a093876385947365aca7b0e5f844
uses: softprops/action-gh-release@c062e08bd532815e2082a85e87e3ef29c3e6d191
with:
files: |
cinny-${{ steps.vars.outputs.tag }}.tar.gz
@ -66,31 +66,31 @@ jobs:
packages: write
steps:
- name: Checkout repository
uses: actions/checkout@v3.5.3
uses: actions/checkout@v4.1.7
- name: Set up QEMU
uses: docker/setup-qemu-action@v2.2.0
uses: docker/setup-qemu-action@v3.2.0
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v2.7.0
uses: docker/setup-buildx-action@v3.5.0
- name: Login to Docker Hub
uses: docker/login-action@v2.2.0
uses: docker/login-action@v3.3.0
with:
username: ${{ secrets.DOCKER_USERNAME }}
password: ${{ secrets.DOCKER_PASSWORD }}
- name: Login to the Container registry
uses: docker/login-action@v2.2.0
uses: docker/login-action@v3.3.0
with:
registry: ghcr.io
username: ${{ github.actor }}
password: ${{ secrets.GITHUB_TOKEN }}
- name: Extract metadata (tags, labels) for Docker
id: meta
uses: docker/metadata-action@v4.6.0
uses: docker/metadata-action@v5.5.1
with:
images: |
${{ secrets.DOCKER_USERNAME }}/cinny
ghcr.io/${{ github.repository }}
- name: Build and push Docker image
uses: docker/build-push-action@v4.1.1
uses: docker/build-push-action@v6.5.0
with:
context: .
platforms: linux/amd64,linux/arm64

1
.gitignore vendored
View file

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

5
Dockerfile
View file

@ -1,5 +1,5 @@
## Builder
FROM node:18.12.1-alpine3.15 as builder
FROM node:20.12.2-alpine3.18 as builder
WORKDIR /src
@ -11,9 +11,10 @@ RUN npm run build
## App
FROM nginx:1.25.1-alpine
FROM nginx:1.27.0-alpine
COPY --from=builder /src/dist /app
COPY --from=builder /src/docker-nginx.conf /etc/nginx/conf.d/default.conf
RUN rm -rf /usr/share/nginx/html \
&& ln -s /app /usr/share/nginx/html

44
README.md
View file

@ -51,16 +51,16 @@ Frn9ttCEzV55Y+so4X2e4ZnB+5gOnNw+ecifGVdj/+UyWnqvqqDvLrEjjK890nLb
Pil4siecNMEpiwAN6WSmKpWaCwQAHEGDVeZCc/kT0iYfj5FBcsTVqWiO6eaxkUlm
jnulqWqRrlB8CJQQvih/g//uSEBdzIibo+ro+3Jpe120U/XVUH62i9HoRQEm6ADG
4zS5hIq4xyA8fL8AEQEAAbQdQ2lubnlBcHAgPGNpbm55YXBwQGdtYWlsLmNvbT6J
AdQEEwEIAD4WIQSRri2MHidaaZv+vvuUMwx6UK/M8wUCYnD+DQIbAwUJA8JnAAUL
CQgHAgYVCgkICwIEFgIDAQIeAQIXgAAKCRCUMwx6UK/M88ApC/9HAdbum1lYBC0s
1k7GwP2A7B4sQtBWjy771BzybWlHeaeG+BGJwg4YiuowXZMm5dubFJFoI/CfeY07
B5aK40/bmT6Xcfkp0VA74c1wUpubBUEJN7tH5HG/OGd9BKeq9E/HHtVaJLVT1k3w
Rhv9VuHO6nR30EEp7IDthftotl5S4lio3+W0pKk4TAKV8vjaCNp3y/lAHzoP1BU9
bUSao+7GXVeArKBjuqxN+t1uuiaxPH4L0oe2pMVjTig04zGJM5fTVoly859MEcC/
R7Taq9RWGfXFmgCXy8Dviz3eOD90vqpCzhX4+ypK0cp2X0UwhMH4dpKUzExmdbhl
eBO5GcHB4VxvloRBNf9/Lr7YOTgWejMUw+MlhZE2RE8unfW1LnM/cjL4dhXzO/XB
FUHHNq8d6d4e02rfWqw7mZo2/NVJgFRcvzw2rgx7w7CKtCNwF4lNjUetB2waZzDb
fAE0kwhK4Iuwvy12JOBzL0Yy9MxANtwUryr/LQz9AmdT4Rwnp0S5AY0EYnD+DQEM
AdQEEwEIAD4CGwMFCwkIBwIGFQoJCAsCBBYCAwECHgECF4AWIQSRri2MHidaaZv+
vvuUMwx6UK/M8wUCZqEDwAUJFvwIswAKCRCUMwx6UK/M877qC/4lxXOQIoWnLLkK
YiRCTkGsH6NdxgeYr6wpXT4xuQ45ZxCytwHpOGQmO/5up5961TxWW8D1frRIJHjj
AZGoRCL3EKEuY8nt3D99fpf3DvZrs1uoVAhiyn737hRlZAg+QsJheeGCmdSJ0hX5
Yud8SE+9zxLS1+CEjMrsUd/RGre/phme+wNXfaHfREAC9ewolgVChPIbMxG2f+vs
K8Xv52BFng7ta9fgsl1XuOjpuaSbQv6g+4ONk/lxKF0SmnhEGM3dmIYPONxW47Yf
atnIjRra/YhPTNwrNBGMmG4IFKaOsMbjW/eakjWTWOVKKJNBMoDdRcYYWIMCpLy8
AQUrMtQEsHSnqCwrw818S5A6rrhcfVGk36RGm0nOy6LS5g5jmqaYsvbCcBGY9B2c
SUAVNm17oo7TtEajk8hcSXoZod1t++pyjcVKEmSn3nFK7v5m3V+cPhNTxZMK459P
3x1Ucqj/kTqrxKw6s2Uknuk0ajmw0ljV+BQwgL6maguo9BKgCNW5AY0EYnD+DQEM
ANOu/d6ZMF8bW+Df9RDCUQKytbaZfa+ZbIHBus7whCD/SQMOhPKntv3HX7SmMCs+
5i27kJMu4YN623JCS7hdCoXVO1R5kXCEcneW/rPBMDutaM472YvIWMIqK9Wwl5+0
Piu2N+uTkKhe9uS2u7eN+Khef3d7xfjGRxoppM+xI9dZO+jhYiy8LuC0oBohTjJq
@ -69,24 +69,24 @@ s1+eh00n/tVpi2Jj9pCm7S0csSXvXj8v2OTdK1jt4YjpzR0/rwh4+/xlOjDjZEqH
vMPhpzpbgnwkxZ3X8BFne9dJ3maC5zQ3LAeCP5m1W0hXzagYhfyjo74slJgD1O8c
LDf2Oxc5MyM8Y/UK497zfqSPfgT3NhQmhHzk83DjXw3I6Z3A3U+Jp61w0eBRI1nx
H1UIG+gldcAKUTcfwL0lghoT3nmi9JAbvek0Smhz00Bbo8/dx8vwQRxDUxlt7Exx
NwARAQABiQG8BBgBCAAmFiEEka4tjB4nWmmb/r77lDMMelCvzPMFAmJw/g0CGwwF
CQPCZwAACgkQlDMMelCvzPPT7Qv8CjXUEhphZFLwpBfaNOzRNfIXJST9aDit8zHW
IMmfSpORVfpU71IyIB3o/DtTUPwCeb8nvNJs7aj1QT1ZUSsqFa3yY2S16V/g8+WN
sHca6oDSc1J+A0eEpEL1HbG1b5OPBC0AeGvvMOoqrbqThBZVKg1Jc/0SD3cvKElv
aHeCZCNNmfcZ2Ib4HYhhc8//ZtC9TeI+5J/YesctY1M12EoWMxMrc27Y3P5Pa0BI
Uc3qxWggPq1vOFYsEshL0w99HyJvREJmQA7Fa0crV+rICxyrBxJeNnEvjH/0KCBU
LCkEonLY1QwrxyeeV3VpxGE3zHHE3azOdAjTIoAdzX5f/qhbgYlM68GL2f8xdDkp
O0igSGHWhO4F8BfmE7IOTx1Bi7daczp8nCFxh73cKpKB0RUsd9xxrqYpovjmEAlo
w7aHpdzt64NQcsrbK10OSVDF3gFa9Vz20/NQvdUrp8jGmAb/8+nYqI94Jsc28H36
UeGsouhyuITLwEhScounZDqop+Dx
=Zg+6
NwARAQABiQG8BBgBCAAmAhsMFiEEka4tjB4nWmmb/r77lDMMelCvzPMFAmahA9IF
CRb8CMUACgkQlDMMelCvzPPQgQv/d5/z+fxgKqgfhQX+V49X4WgTVxZ/CzztDoJ1
XAq1dzTNEy8AFguXIo6eVXPSpMxec7ZreN3+UPQBnCf3eR5YxWNYOYKmk0G4E8D2
KGUJept7TSA42/8N2ov6tToXFg4CgzKZj0fYLwgutly7K8eiWmSU6ptaO8aEQBHB
gTGIOO3h6vJMGVycmoeRnHjv4wV84YWSVFSoJ7cY0he4Z9UznJBbE/KHZjrkXsPo
N+Gg5lDuOP5xjKzM5SogV9lhxBAhMWAg3URUF15yruZBiA8uV1FOK8sal/9C1G7V
M6ygA6uOZqXlZtcdA94RoSsW2pZ9eLVPsxz2B3Zko7tu11MpNP/wYmfGTI3KxZBj
n/eodvwjJSgHpGOFSmbNzvPJo3to5nNlp7wH1KxIMc6Uuu9hgfDfwkFZgV2bnFIa
Q6gyF548Ub48z7Dz83+WwLgbX19ve4oZx+dqSdczP6ILHRQomtrzrkkP2LU52oI5
mxFo+ioe/ABCufSmyqFye0psX3Sp
=WtqZ
-----END PGP PUBLIC KEY BLOCK-----
```
</details>
## Local development
> We recommend using a version manager as versions change very quickly. You will likely need to switch
between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Also recommended nodejs version Hydrogen LTS (v18).
between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Recommended nodejs version is Iron LTS (v20).
Execute the following commands to start a development server:
```sh

20
config.json
View file

@ -8,6 +8,26 @@
"mozilla.org"
],
"allowCustomHomeservers": true,
"featuredCommunities": {
"openAsDefault": false,
"spaces": [
"#cinny-space:matrix.org",
"#community:matrix.org",
"#space:envs.net",
"#science-space:matrix.org",
"#libregaming-games:tchncs.de",
"#mathematics-on:matrix.org"
],
"rooms": [
"#cinny:matrix.org",
"#freesoftware:matrix.org",
"#pcapdroid:matrix.org",
"#gentoo:matrix.org",
"#PrivSec.dev:arcticfoxes.net",
"#disroot:aria-net.org"
],
"servers": ["envs.net", "matrix.org", "monero.social", "mozilla.org"]
},
"hashRouter": {
"enabled": false,
"basename": "/"

15
contrib/nginx/cinny.domain.tld.conf
View file

@ -19,9 +19,16 @@ server {
location / {
root /opt/cinny/dist/;
index index.html;
}
location ~* ^\/(login|register) {
try_files $uri $uri/ /index.html;
rewrite ^/config.json$ /config.json break;
rewrite ^/manifest.json$ /manifest.json break;
rewrite ^.*/olm.wasm$ /olm.wasm break;
rewrite ^/pdf.worker.min.js$ /pdf.worker.min.js break;
rewrite ^/public/(.*)$ /public/$1 break;
rewrite ^/assets/(.*)$ /assets/$1 break;
rewrite ^(.+)$ /index.html break;
}
}

16
docker-nginx.conf Normal file
View file

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

8
index.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Cinny</title>
<meta name="name" content="Cinny" />
<meta name="author" content="Ajay Bura" />
@ -90,12 +90,6 @@
window.global ||= window;
</script>
<div id="root"></div>
<audio id="notificationSound">
<source src="./public/sound/notification.ogg" type="audio/ogg" />
</audio>
<audio id="inviteSound">
<source src="./public/sound/invite.ogg" type="audio/ogg" />
</audio>
<script type="module" src="./src/index.tsx"></script>
</body>
</html>

6
netlify.toml
View file

@ -9,9 +9,10 @@
status = 200
[[redirects]]
from = "/olm.wasm"
from = "*/olm.wasm"
to = "/olm.wasm"
status = 200
force = true
[[redirects]]
from = "/pdf.worker.min.js"
@ -31,4 +32,5 @@
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
status = 200
force = true

9498
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

38
package.json
View file

@ -1,8 +1,9 @@
{
"name": "cinny",
"version": "3.2.0",
"version": "4.0.3",
"description": "Yet another matrix client",
"main": "index.js",
"type": "module",
"engines": {
"node": ">=16.0.0"
},
@ -19,10 +20,14 @@
"author": "Ajay Bura",
"license": "AGPL-3.0-only",
"dependencies": {
"@atlaskit/pragmatic-drag-and-drop": "1.1.6",
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
"@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
"@fontsource/inter": "4.5.14",
"@khanacademy/simple-markdown": "0.8.6",
"@matrix-org/olm": "3.2.14",
"@tanstack/react-virtual": "3.0.0-beta.54",
"@tanstack/react-query": "5.24.1",
"@tanstack/react-query-devtools": "5.24.1",
"@tanstack/react-virtual": "3.2.0",
"@tippyjs/react": "4.2.6",
"@vanilla-extract/css": "1.9.3",
"@vanilla-extract/recipes": "0.3.0",
@ -40,40 +45,35 @@
"file-saver": "2.0.5",
"flux": "4.0.3",
"focus-trap-react": "10.0.2",
"folds": "1.5.1",
"formik": "2.2.9",
"folds": "2.0.0",
"formik": "2.4.6",
"html-dom-parser": "4.0.0",
"html-react-parser": "4.2.0",
"immer": "9.0.16",
"is-hotkey": "0.2.0",
"jotai": "2.6.0",
"katex": "0.16.4",
"linkify-html": "4.0.2",
"linkify-react": "4.1.1",
"linkifyjs": "4.0.2",
"linkify-react": "4.1.3",
"linkifyjs": "4.1.3",
"matrix-js-sdk": "29.1.0",
"millify": "6.1.0",
"pdfjs-dist": "3.10.111",
"pdfjs-dist": "4.2.67",
"prismjs": "1.29.0",
"prop-types": "15.8.1",
"react": "18.2.0",
"react-aria": "3.29.1",
"react-autosize-textarea": "7.1.0",
"react-blurhash": "0.2.0",
"react-dnd": "16.0.1",
"react-dnd-html5-backend": "16.0.1",
"react-dom": "18.2.0",
"react-error-boundary": "4.0.10",
"react-error-boundary": "4.0.13",
"react-google-recaptcha": "2.1.0",
"react-modal": "3.16.1",
"react-range": "1.8.14",
"react-router-dom": "6.20.0",
"sanitize-html": "2.8.0",
"sanitize-html": "2.12.1",
"slate": "0.94.1",
"slate-history": "0.93.0",
"slate-react": "0.98.4",
"tippy.js": "6.3.7",
"twemoji": "14.0.2",
"ua-parser-js": "1.0.35"
},
"devDependencies": {
@ -95,15 +95,15 @@
"eslint": "8.29.0",
"eslint-config-airbnb": "19.0.4",
"eslint-config-prettier": "8.5.0",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-import": "2.29.1",
"eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-react": "7.31.11",
"eslint-plugin-react-hooks": "4.6.0",
"mini-svg-data-uri": "1.4.4",
"prettier": "2.8.1",
"sass": "1.56.2",
"typescript": "4.9.4",
"vite": "5.0.8",
"vite-plugin-static-copy": "0.13.0"
"vite": "5.0.13",
"vite-plugin-static-copy": "1.0.4",
"vite-plugin-top-level-await": "1.4.1"
}
}

9031
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

62
src/app/atoms/avatar/Avatar.jsx
View file

@ -2,17 +2,13 @@ import React from 'react';
import PropTypes from 'prop-types';
import './Avatar.scss';
import { twemojify } from '../../../util/twemojify';
import Text from '../text/Text';
import RawIcon from '../system-icons/RawIcon';
import ImageBrokenSVG from '../../../../public/res/svg/image-broken.svg';
import { avatarInitials } from '../../../util/common';
const Avatar = React.forwardRef(({
text, bgColor, iconSrc, iconColor, imageSrc, size,
}, ref) => {
const Avatar = React.forwardRef(({ text, bgColor, iconSrc, iconColor, imageSrc, size }, ref) => {
let textSize = 's1';
if (size === 'large') textSize = 'h1';
if (size === 'small') textSize = 'b1';
@ -20,34 +16,34 @@ const Avatar = React.forwardRef(({
return (
<div ref={ref} className={`avatar-container avatar-container__${size} noselect`}>
{
imageSrc !== null
? (
<img
draggable="false"
src={imageSrc}
onLoad={(e) => { e.target.style.backgroundColor = 'transparent'; }}
onError={(e) => { e.target.src = ImageBrokenSVG; }}
alt=""
/>
)
: (
<span
style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
>
{
iconSrc !== null
? <RawIcon size={size} src={iconSrc} color={iconColor} />
: text !== null && (
<Text variant={textSize} primary>
{twemojify(avatarInitials(text))}
</Text>
)
}
</span>
)
}
{imageSrc !== null ? (
<img
draggable="false"
src={imageSrc}
onLoad={(e) => {
e.target.style.backgroundColor = 'transparent';
}}
onError={(e) => {
e.target.src = ImageBrokenSVG;
}}
alt=""
/>
) : (
<span
style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
>
{iconSrc !== null ? (
<RawIcon size={size} src={iconSrc} color={iconColor} />
) : (
text !== null && (
<Text variant={textSize} primary>
{avatarInitials(text)}
</Text>
)
)}
</span>
)}
</div>
);
});

7
src/app/atoms/button/Toggle.scss
View file

@ -22,8 +22,7 @@
height: 16px;
background-color: var(--tc-surface-low);
border-radius: calc(var(--bo-radius) / 2);
transition: transform 200ms ease-in-out,
opacity 200ms ease-in-out;
transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
opacity: 0.6;
}
@ -36,8 +35,8 @@
@include dir.prop(transform, var(--ltr), var(--rtl));
transform: translateX(calc(125%));
background-color: white;
background-color: var(--bg-surface);
opacity: 1;
}
}
}
}

33
src/app/atoms/math/Math.jsx
View file

@ -1,33 +0,0 @@
import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import './Math.scss';
import katex from 'katex';
import 'katex/dist/katex.min.css';
import 'katex/dist/contrib/copy-tex';
const Math = React.memo(({
content, throwOnError, errorColor, displayMode,
}) => {
const ref = useRef(null);
useEffect(() => {
katex.render(content, ref.current, { throwOnError, errorColor, displayMode });
}, [content, throwOnError, errorColor, displayMode]);
return <span ref={ref} />;
});
Math.defaultProps = {
throwOnError: null,
errorColor: null,
displayMode: null,
};
Math.propTypes = {
content: PropTypes.string.isRequired,
throwOnError: PropTypes.bool,
errorColor: PropTypes.string,
displayMode: PropTypes.bool,
};
export default Math;

3
src/app/atoms/math/Math.scss
View file

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

5
src/app/atoms/tabs/Tabs.jsx
View file

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

36
src/app/components/CapabilitiesAndMediaConfigLoader.tsx Normal file
View file

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

19
src/app/components/CapabilitiesLoader.tsx Normal file
View file

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

19
src/app/components/MediaConfigLoader.tsx Normal file
View file

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

36
src/app/components/Pdf-viewer/PdfViewer.tsx
View file

@ -1,6 +1,6 @@
/* eslint-disable no-param-reassign */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
import React, { FormEventHandler, useEffect, useRef, useState } from 'react';
import React, { FormEventHandler, MouseEventHandler, useEffect, useRef, useState } from 'react';
import classNames from 'classnames';
import {
Box,
@ -13,6 +13,7 @@ import {
Input,
Menu,
PopOut,
RectCords,
Scroll,
Spinner,
Text,
@ -25,6 +26,7 @@ import * as css from './PdfViewer.css';
import { AsyncStatus } from '../../hooks/useAsyncCallback';
import { useZoom } from '../../hooks/useZoom';
import { createPage, usePdfDocumentLoader, usePdfJSLoader } from '../../plugins/pdfjs-dist';
import { stopPropagation } from '../../utils/keyboard';
export type PdfViewerProps = {
name: string;
@ -48,7 +50,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
const isError =
pdfJSState.status === AsyncStatus.Error || docState.status === AsyncStatus.Error;
const [pageNo, setPageNo] = useState(1);
const [openJump, setOpenJump] = useState(false);
const [jumpAnchor, setJumpAnchor] = useState<RectCords>();
useEffect(() => {
loadPdfJS();
@ -86,7 +88,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
if (!jumpInput) return;
const jumpTo = parseInt(jumpInput.value, 10);
setPageNo(Math.max(1, Math.min(docState.data.numPages, jumpTo)));
setOpenJump(false);
setJumpAnchor(undefined);
};
const handlePrevPage = () => {
@ -98,6 +100,10 @@ export const PdfViewer = as<'div', PdfViewerProps>(
setPageNo((n) => Math.min(n + 1, docState.data.numPages));
};
const handleOpenJump: MouseEventHandler<HTMLButtonElement> = (evt) => {
setJumpAnchor(evt.currentTarget.getBoundingClientRect());
};
return (
<Box className={classNames(css.PdfViewer, className)} direction="Column" {...props} ref={ref}>
<Header className={css.PdfViewerHeader} size="400">
@ -187,15 +193,16 @@ export const PdfViewer = as<'div', PdfViewerProps>(
</Chip>
<Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
<PopOut
open={openJump}
anchor={jumpAnchor}
align="Center"
position="Top"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setOpenJump(false),
onDeactivate: () => setJumpAnchor(undefined),
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Menu variant="Surface">
@ -227,17 +234,14 @@ export const PdfViewer = as<'div', PdfViewerProps>(
</FocusTrap>
}
>
{(anchorRef) => (
<Chip
onClick={() => setOpenJump(!openJump)}
ref={anchorRef}
variant="SurfaceVariant"
radii="300"
aria-pressed={openJump}
>
<Text size="B300">{`${pageNo}/${docState.data.numPages}`}</Text>
</Chip>
)}
<Chip
onClick={handleOpenJump}
variant="SurfaceVariant"
radii="300"
aria-pressed={jumpAnchor !== undefined}
>
<Text size="B300">{`${pageNo}/${docState.data.numPages}`}</Text>
</Chip>
</PopOut>
</Box>
<Chip

245
src/app/components/RenderMessageContent.tsx Normal file
View file

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

90
src/app/components/RoomSummaryLoader.tsx Normal file
View file

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

24
src/app/components/RoomUnreadProvider.tsx Normal file
View file

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

28
src/app/components/SpaceChildDirectsProvider.tsx Normal file
View file

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

28
src/app/components/SpaceChildRoomsProvider.tsx Normal file
View file

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

31
src/app/components/SpecVersionsLoader.tsx
View file

@ -1,20 +1,25 @@
import { ReactNode, useCallback, useEffect } from 'react';
import { ReactNode, useCallback, useEffect, useState } from 'react';
import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
import { SpecVersions, specVersions } from '../cs-api';
import { useAutoDiscoveryInfo } from '../hooks/useAutoDiscoveryInfo';
type SpecVersionsLoaderProps = {
baseUrl: string;
fallback?: () => ReactNode;
error?: (err: unknown) => ReactNode;
error?: (err: unknown, retry: () => void, ignore: () => void) => ReactNode;
children: (versions: SpecVersions) => ReactNode;
};
export function SpecVersionsLoader({ fallback, error, children }: SpecVersionsLoaderProps) {
const autoDiscoveryInfo = useAutoDiscoveryInfo();
const baseUrl = autoDiscoveryInfo['m.homeserver'].base_url;
export function SpecVersionsLoader({
baseUrl,
fallback,
error,
children,
}: SpecVersionsLoaderProps) {
const [state, load] = useAsyncCallback(
useCallback(() => specVersions(fetch, baseUrl), [baseUrl])
);
const [ignoreError, setIgnoreError] = useState(false);
const ignoreCallback = useCallback(() => setIgnoreError(true), []);
useEffect(() => {
load();
@ -24,9 +29,15 @@ export function SpecVersionsLoader({ fallback, error, children }: SpecVersionsLo
return fallback?.();
}
if (state.status === AsyncStatus.Error) {
return error?.(state.error);
if (!ignoreError && state.status === AsyncStatus.Error) {
return error?.(state.error, load, ignoreCallback);
}
return children(state.data);
return children(
state.status === AsyncStatus.Success
? state.data
: {
versions: [],
}
);
}

3
src/app/components/UIAFlowOverlay.tsx
View file

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

2
src/app/components/editor/Editor.preview.tsx
View file

@ -14,6 +14,7 @@ import {
import { CustomEditor, useEditor } from './Editor';
import { Toolbar } from './Toolbar';
import { stopPropagation } from '../../utils/keyboard';
export function EditorPreview() {
const [open, setOpen] = useState(false);
@ -32,6 +33,7 @@ export function EditorPreview() {
initialFocus: false,
onDeactivate: () => setOpen(false),
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Modal size="500">

45
src/app/components/editor/Toolbar.tsx
View file

@ -10,13 +10,14 @@ import {
Line,
Menu,
PopOut,
RectCords,
Scroll,
Text,
Tooltip,
TooltipProvider,
toRem,
} from 'folds';
import React, { ReactNode, useState } from 'react';
import React, { MouseEventHandler, ReactNode, useState } from 'react';
import { ReactEditor, useSlate } from 'slate-react';
import {
headingLevel,
@ -34,6 +35,7 @@ import { isMacOS } from '../../utils/user-agent';
import { KeySymbol } from '../../utils/key-symbol';
import { useSetting } from '../../state/hooks/settings';
import { settingsAtom } from '../../state/settings';
import { stopPropagation } from '../../utils/keyboard';
function BtnTooltip({ text, shortCode }: { text: string; shortCode?: string }) {
return (
@ -119,30 +121,38 @@ export function BlockButton({ format, icon, tooltip }: BlockButtonProps) {
export function HeadingBlockButton() {
const editor = useSlate();
const level = headingLevel(editor);
const [open, setOpen] = useState(false);
const [anchor, setAnchor] = useState<RectCords>();
const isActive = isBlockActive(editor, BlockType.Heading);
const modKey = isMacOS() ? KeySymbol.Command : 'Ctrl';
const handleMenuSelect = (selectedLevel: HeadingLevel) => {
setOpen(false);
setAnchor(undefined);
toggleBlock(editor, BlockType.Heading, { level: selectedLevel });
ReactEditor.focus(editor);
};
const handleMenuOpen: MouseEventHandler<HTMLButtonElement> = (evt) => {
if (isActive) {
toggleBlock(editor, BlockType.Heading);
return;
}
setAnchor(evt.currentTarget.getBoundingClientRect());
};
return (
<PopOut
open={open}
anchor={anchor}
offset={5}
position="Top"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setOpen(false),
onDeactivate: () => setAnchor(undefined),
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) =>
evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
escapeDeactivates: stopPropagation,
}}
>
<Menu style={{ padding: config.space.S100 }}>
@ -197,20 +207,17 @@ export function HeadingBlockButton() {
</FocusTrap>
}
>
{(ref) => (
<IconButton
style={{ width: 'unset' }}
ref={ref}
variant="SurfaceVariant"
onClick={() => (isActive ? toggleBlock(editor, BlockType.Heading) : setOpen(!open))}
aria-pressed={isActive}
size="400"
radii="300"
>
<Icon size="200" src={level ? Icons[`Heading${level}`] : Icons.Heading1} />
<Icon size="200" src={isActive ? Icons.Cross : Icons.ChevronBottom} />
</IconButton>
)}
<IconButton
style={{ width: 'unset' }}
variant="SurfaceVariant"
onClick={handleMenuOpen}
aria-pressed={isActive}
size="400"
radii="300"
>
<Icon size="200" src={level ? Icons[`Heading${level}`] : Icons.Heading1} />
<Icon size="200" src={isActive ? Icons.Cross : Icons.ChevronBottom} />
</IconButton>
</PopOut>
);
}

3
src/app/components/editor/autocomplete/AutocompleteMenu.tsx
View file

@ -4,7 +4,7 @@ import { isKeyHotkey } from 'is-hotkey';
import { Header, Menu, Scroll, config } from 'folds';
import * as css from './AutocompleteMenu.css';
import { preventScrollWithArrowKey } from '../../../utils/keyboard';
import { preventScrollWithArrowKey, stopPropagation } from '../../../utils/keyboard';
type AutocompleteMenuProps = {
requestClose: () => void;
@ -24,6 +24,7 @@ export function AutocompleteMenu({ headerContent, requestClose, children }: Auto
allowOutsideClick: true,
isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
escapeDeactivates: stopPropagation,
}}
>
<Menu className={css.AutocompleteMenu}>

56
src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
View file

@ -1,12 +1,11 @@
import React, { KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useMemo } from 'react';
import React, { KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect } from 'react';
import { Editor } from 'slate';
import { Avatar, AvatarFallback, AvatarImage, Icon, Icons, MenuItem, Text, color } from 'folds';
import { MatrixClient } from 'matrix-js-sdk';
import { Avatar, Icon, Icons, MenuItem, Text } from 'folds';
import { JoinRule, MatrixClient } from 'matrix-js-sdk';
import { useAtomValue } from 'jotai';
import { createMentionElement, moveCursor, replaceWithElement } from '../utils';
import { getRoomAvatarUrl, joinRuleToIconSrc } from '../../../utils/room';
import { roomIdByActivity } from '../../../../util/sort';
import initMatrix from '../../../../client/initMatrix';
import { getDirectRoomAvatarUrl } from '../../../utils/room';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { AutocompleteQuery } from './autocompleteQuery';
import { AutocompleteMenu } from './AutocompleteMenu';
@ -14,6 +13,10 @@ import { getMxIdServer, validMxId } from '../../../utils/matrix';
import { UseAsyncSearchOptions, useAsyncSearch } from '../../../hooks/useAsyncSearch';
import { onTabPress } from '../../../utils/keyboard';
import { useKeyDown } from '../../../hooks/useKeyDown';
import { mDirectAtom } from '../../../state/mDirectList';
import { allRoomsAtom } from '../../../state/room-list/roomList';
import { factoryRoomIdByActivity } from '../../../utils/sort';
import { RoomAvatar, RoomIcon } from '../../room-avatar';
type MentionAutoCompleteHandler = (roomAliasOrId: string, name: string) => void;
@ -74,15 +77,12 @@ export function RoomMentionAutocomplete({
requestClose,
}: RoomMentionAutocompleteProps) {
const mx = useMatrixClient();
const dms: Set<string> = initMatrix.roomList?.directs ?? new Set();
const mDirects = useAtomValue(mDirectAtom);
const allRoomId: string[] = useMemo(() => {
const { spaces = [], rooms = [], directs = [] } = initMatrix.roomList ?? {};
return [...spaces, ...rooms, ...directs].sort(roomIdByActivity);
}, []);
const allRooms = useAtomValue(allRoomsAtom).sort(factoryRoomIdByActivity(mx));
const [result, search, resetSearch] = useAsyncSearch(
allRoomId,
allRooms,
useCallback(
(rId) => {
const r = mx.getRoom(rId);
@ -96,7 +96,7 @@ export function RoomMentionAutocomplete({
SEARCH_OPTIONS
);
const autoCompleteRoomIds = result ? result.items : allRoomId.slice(0, 20);
const autoCompleteRoomIds = result ? result.items : allRooms.slice(0, 20);
useEffect(() => {
if (query.text) search(query.text);
@ -136,9 +136,7 @@ export function RoomMentionAutocomplete({
autoCompleteRoomIds.map((rId) => {
const room = mx.getRoom(rId);
if (!room) return null;
const dm = dms.has(room.roomId);
const avatarUrl = getRoomAvatarUrl(mx, room);
const iconSrc = !dm && joinRuleToIconSrc(Icons, room.getJoinRule(), room.isSpaceRoom());
const dm = mDirects.has(room.roomId);
const handleSelect = () => handleAutocomplete(room.getCanonicalAlias() ?? rId, room.name);
@ -158,17 +156,21 @@ export function RoomMentionAutocomplete({
}
before={
<Avatar size="200">
{iconSrc && <Icon src={iconSrc} size="100" />}
{avatarUrl && !iconSrc && <AvatarImage src={avatarUrl} alt={room.name} />}
{!avatarUrl && !iconSrc && (
<AvatarFallback
style={{
backgroundColor: color.Secondary.Container,
color: color.Secondary.OnContainer,
}}
>
<Text size="H6">{room.name[0]}</Text>
</AvatarFallback>
{dm ? (
<RoomAvatar
roomId={room.roomId}
src={getDirectRoomAvatarUrl(mx, room)}
alt={room.name}
renderFallback={() => (
<RoomIcon
size="50"
joinRule={room.getJoinRule() ?? JoinRule.Restricted}
filled
/>
)}
/>
) : (
<RoomIcon size="100" joinRule={room.getJoinRule()} space={room.isSpaceRoom()} />
)}
</Avatar>
}

37
src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx
View file

@ -1,6 +1,6 @@
import React, { useEffect, KeyboardEvent as ReactKeyboardEvent } from 'react';
import { Editor } from 'slate';
import { Avatar, AvatarFallback, AvatarImage, MenuItem, Text, color } from 'folds';
import { Avatar, Icon, Icons, MenuItem, Text } from 'folds';
import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
import { AutocompleteQuery } from './autocompleteQuery';
@ -17,6 +17,7 @@ import { createMentionElement, moveCursor, replaceWithElement } from '../utils';
import { useKeyDown } from '../../../hooks/useKeyDown';
import { getMxIdLocalPart, getMxIdServer, validMxId } from '../../../utils/matrix';
import { getMemberDisplayName, getMemberSearchStr } from '../../../utils/room';
import { UserAvatar } from '../../user-avatar';
type MentionAutoCompleteHandler = (userId: string, name: string) => void;
@ -26,12 +27,10 @@ const userIdFromQueryText = (mx: MatrixClient, text: string) =>
: `@${text}${text.endsWith(':') ? '' : ':'}${getMxIdServer(mx.getUserId() ?? '')}`;
function UnknownMentionItem({
query,
userId,
name,
handleAutocomplete,
}: {
query: AutocompleteQuery<string>;
userId: string;
name: string;
handleAutocomplete: MentionAutoCompleteHandler;
@ -46,14 +45,10 @@ function UnknownMentionItem({
onClick={() => handleAutocomplete(userId, name)}
before={
<Avatar size="200">
<AvatarFallback
style={{
backgroundColor: color.Secondary.Container,
color: color.Secondary.OnContainer,
}}
>
<Text size="H6">{query.text[0]}</Text>
</AvatarFallback>
<UserAvatar
userId={userId}
renderFallback={() => <Icon size="50" src={Icons.User} filled />}
/>
</Avatar>
}
>
@ -135,7 +130,6 @@ export function UserMentionAutocomplete({
<AutocompleteMenu headerContent={<Text size="L400">Mentions</Text>} requestClose={requestClose}>
{query.text === 'room' && (
<UnknownMentionItem
query={query}
userId={roomAliasOrId}
name="@room"
handleAutocomplete={handleAutocomplete}
@ -143,7 +137,6 @@ export function UserMentionAutocomplete({
)}
{autoCompleteMembers.length === 0 ? (
<UnknownMentionItem
query={query}
userId={userIdFromQueryText(mx, query.text)}
name={userIdFromQueryText(mx, query.text)}
handleAutocomplete={handleAutocomplete}
@ -167,18 +160,12 @@ export function UserMentionAutocomplete({
}
before={
<Avatar size="200">
{avatarUrl ? (
<AvatarImage src={avatarUrl} alt={getName(roomMember)} />
) : (
<AvatarFallback
style={{
backgroundColor: color.Secondary.Container,
color: color.Secondary.OnContainer,
}}
>
<Text size="H6">{getName(roomMember)[0]}</Text>
</AvatarFallback>
)}
<UserAvatar
userId={roomMember.userId}
src={avatarUrl ?? undefined}
alt={getName(roomMember)}
renderFallback={() => <Icon size="50" src={Icons.User} filled />}
/>
</Avatar>
}
>

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

@ -37,7 +37,7 @@ import * as css from './EmojiBoard.css';
import { EmojiGroupId, IEmoji, IEmojiGroup, emojiGroups, emojis } from '../../plugins/emoji';
import { IEmojiGroupLabels, useEmojiGroupLabels } from './useEmojiGroupLabels';
import { IEmojiGroupIcons, useEmojiGroupIcons } from './useEmojiGroupIcons';
import { preventScrollWithArrowKey } from '../../utils/keyboard';
import { preventScrollWithArrowKey, stopPropagation } from '../../utils/keyboard';
import { useRelevantImagePacks } from '../../hooks/useImagePacks';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { useRecentEmoji } from '../../hooks/useRecentEmoji';
@ -174,18 +174,6 @@ function EmojiBoardTabs({
}) {
return (
<Box gap="100">
<Badge
className={css.EmojiBoardTab}
as="button"
variant="Secondary"
fill={tab === EmojiBoardTab.Emoji ? 'Solid' : 'None'}
size="500"
onClick={() => onTabChange(EmojiBoardTab.Emoji)}
>
<Text as="span" size="L400">
Emoji
</Text>
</Badge>
<Badge
className={css.EmojiBoardTab}
as="button"
@ -198,6 +186,18 @@ function EmojiBoardTabs({
Sticker
</Text>
</Badge>
<Badge
className={css.EmojiBoardTab}
as="button"
variant="Secondary"
fill={tab === EmojiBoardTab.Emoji ? 'Solid' : 'None'}
size="500"
onClick={() => onTabChange(EmojiBoardTab.Emoji)}
>
<Text as="span" size="L400">
Emoji
</Text>
</Badge>
</Box>
);
}
@ -775,6 +775,7 @@ export function EmojiBoard({
!editableActiveElement() && isKeyHotkey(['arrowdown', 'arrowright'], evt),
isKeyBackward: (evt: KeyboardEvent) =>
!editableActiveElement() && isKeyHotkey(['arrowup', 'arrowleft'], evt),
escapeDeactivates: stopPropagation,
}}
>
<EmojiBoardLayout

22
src/app/components/event-readers/EventReaders.tsx
View file

@ -2,8 +2,6 @@ import React from 'react';
import classNames from 'classnames';
import {
Avatar,
AvatarFallback,
AvatarImage,
Box,
Header,
Icon,
@ -21,8 +19,8 @@ import { getMemberDisplayName } from '../../utils/room';
import { getMxIdLocalPart } from '../../utils/matrix';
import * as css from './EventReaders.css';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import colorMXID from '../../../util/colorMXID';
import { openProfileViewer } from '../../../client/action/navigation';
import { UserAvatar } from '../user-avatar';
export type EventReadersProps = {
room: Room;
@ -72,18 +70,12 @@ export const EventReaders = as<'div', EventReadersProps>(
}}
before={
<Avatar size="200">
{avatarUrl ? (
<AvatarImage src={avatarUrl} />
) : (
<AvatarFallback
style={{
background: colorMXID(readerId),
color: 'white',
}}
>
<Text size="H6">{name[0]}</Text>
</AvatarFallback>
)}
<UserAvatar
userId={readerId}
src={avatarUrl ?? undefined}
alt={name}
renderFallback={() => <Icon size="50" src={Icons.User} filled />}
/>
</Avatar>
}
>

108
src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx Normal file
View file

@ -0,0 +1,108 @@
import React, { useCallback, useEffect } from 'react';
import FocusTrap from 'focus-trap-react';
import {
Dialog,
Overlay,
OverlayCenter,
OverlayBackdrop,
Header,
config,
Box,
Text,
IconButton,
Icon,
Icons,
color,
Button,
Spinner,
} from 'folds';
import { MatrixError } from 'matrix-js-sdk';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
import { stopPropagation } from '../../utils/keyboard';
type LeaveRoomPromptProps = {
roomId: string;
onDone: () => void;
onCancel: () => void;
};
export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptProps) {
const mx = useMatrixClient();
const [leaveState, leaveRoom] = useAsyncCallback<undefined, MatrixError, []>(
useCallback(async () => {
mx.leave(roomId);
}, [mx, roomId])
);
const handleLeave = () => {
leaveRoom();
};
useEffect(() => {
if (leaveState.status === AsyncStatus.Success) {
onDone();
}
}, [leaveState, onDone]);
return (
<Overlay open backdrop={<OverlayBackdrop />}>
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: onCancel,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface">
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
borderBottomWidth: config.borderWidth.B300,
}}
variant="Surface"
size="500"
>
<Box grow="Yes">
<Text size="H4">Leave Room</Text>
</Box>
<IconButton size="300" onClick={onCancel} radii="300">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
<Box direction="Column" gap="200">
<Text priority="400">Are you sure you want to leave this room?</Text>
{leaveState.status === AsyncStatus.Error && (
<Text style={{ color: color.Critical.Main }} size="T300">
Failed to leave room! {leaveState.error.message}
</Text>
)}
</Box>
<Button
type="submit"
variant="Critical"
onClick={handleLeave}
before={
leaveState.status === AsyncStatus.Loading ? (
<Spinner fill="Solid" variant="Critical" size="200" />
) : undefined
}
aria-disabled={
leaveState.status === AsyncStatus.Loading ||
leaveState.status === AsyncStatus.Success
}
>
<Text size="B400">
{leaveState.status === AsyncStatus.Loading ? 'Leaving...' : 'Leave'}
</Text>
</Button>
</Box>
</Dialog>
</FocusTrap>
</OverlayCenter>
</Overlay>
);
}

1
src/app/components/leave-room-prompt/index.ts Normal file
View file

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

108
src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx Normal file
View file

@ -0,0 +1,108 @@
import React, { useCallback, useEffect } from 'react';
import FocusTrap from 'focus-trap-react';
import {
Dialog,
Overlay,
OverlayCenter,
OverlayBackdrop,
Header,
config,
Box,
Text,
IconButton,
Icon,
Icons,
color,
Button,
Spinner,
} from 'folds';
import { MatrixError } from 'matrix-js-sdk';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
import { stopPropagation } from '../../utils/keyboard';
type LeaveSpacePromptProps = {
roomId: string;
onDone: () => void;
onCancel: () => void;
};
export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptProps) {
const mx = useMatrixClient();
const [leaveState, leaveRoom] = useAsyncCallback<undefined, MatrixError, []>(
useCallback(async () => {
mx.leave(roomId);
}, [mx, roomId])
);
const handleLeave = () => {
leaveRoom();
};
useEffect(() => {
if (leaveState.status === AsyncStatus.Success) {
onDone();
}
}, [leaveState, onDone]);
return (
<Overlay open backdrop={<OverlayBackdrop />}>
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: onCancel,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface">
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
borderBottomWidth: config.borderWidth.B300,
}}
variant="Surface"
size="500"
>
<Box grow="Yes">
<Text size="H4">Leave Space</Text>
</Box>
<IconButton size="300" onClick={onCancel} radii="300">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
<Box direction="Column" gap="200">
<Text priority="400">Are you sure you want to leave this space?</Text>
{leaveState.status === AsyncStatus.Error && (
<Text style={{ color: color.Critical.Main }} size="T300">
Failed to leave space! {leaveState.error.message}
</Text>
)}
</Box>
<Button
type="submit"
variant="Critical"
onClick={handleLeave}
before={
leaveState.status === AsyncStatus.Loading ? (
<Spinner fill="Solid" variant="Critical" size="200" />
) : undefined
}
aria-disabled={
leaveState.status === AsyncStatus.Loading ||
leaveState.status === AsyncStatus.Success
}
>
<Text size="B400">
{leaveState.status === AsyncStatus.Loading ? 'Leaving...' : 'Leave'}
</Text>
</Button>
</Box>
</Dialog>
</FocusTrap>
</OverlayCenter>
</Overlay>
);
}

1
src/app/components/leave-space-prompt/index.ts Normal file
View file

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

2
src/app/organisms/room/message/FileHeader.tsx → src/app/components/message/FileHeader.tsx
View file

@ -1,6 +1,6 @@
import { Badge, Box, Text, as, toRem } from 'folds';
import React from 'react';
import { mimeTypeToExt } from '../../../utils/mimeTypes';
import { mimeTypeToExt } from '../../utils/mimeTypes';
const badgeStyles = { maxWidth: toRem(100) };

398
src/app/components/message/MsgTypeRenderers.tsx Normal file
View file

@ -0,0 +1,398 @@
import React, { ReactNode } from 'react';
import { Box, Chip, Icon, Icons, Text, toRem } from 'folds';
import { IContent } from 'matrix-js-sdk';
import { JUMBO_EMOJI_REG, URL_REG } from '../../utils/regex';
import { trimReplyFromBody } from '../../utils/room';
import { MessageTextBody } from './layout';
import {
MessageBadEncryptedContent,
MessageBrokenContent,
MessageDeletedContent,
MessageEditedContent,
MessageUnsupportedContent,
} from './content';
import {
IAudioContent,
IAudioInfo,
IEncryptedFile,
IFileContent,
IFileInfo,
IImageContent,
IImageInfo,
IThumbnailContent,
IVideoContent,
IVideoInfo,
} from '../../../types/matrix/common';
import { FALLBACK_MIMETYPE, getBlobSafeMimeType } from '../../utils/mimeTypes';
import { parseGeoUri, scaleYDimension } from '../../utils/common';
import { Attachment, AttachmentBox, AttachmentContent, AttachmentHeader } from './attachment';
import { FileHeader } from './FileHeader';
export function MBadEncrypted() {
return (
<Text>
<MessageBadEncryptedContent />
</Text>
);
}
type RedactedContentProps = {
reason?: string;
};
export function RedactedContent({ reason }: RedactedContentProps) {
return (
<Text>
<MessageDeletedContent reason={reason} />
</Text>
);
}
export function UnsupportedContent() {
return (
<Text>
<MessageUnsupportedContent />
</Text>
);
}
export function BrokenContent() {
return (
<Text>
<MessageBrokenContent />
</Text>
);
}
type RenderBodyProps = {
body: string;
customBody?: string;
};
type MTextProps = {
edited?: boolean;
content: Record<string, unknown>;
renderBody: (props: RenderBodyProps) => ReactNode;
renderUrlsPreview?: (urls: string[]) => ReactNode;
};
export function MText({ edited, content, renderBody, renderUrlsPreview }: MTextProps) {
const { body, formatted_body: customBody } = content;
if (typeof body !== 'string') return <BrokenContent />;
const trimmedBody = trimReplyFromBody(body);
const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
return (
<>
<MessageTextBody
preWrap={typeof customBody !== 'string'}
jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
>
{renderBody({
body: trimmedBody,
customBody: typeof customBody === 'string' ? customBody : undefined,
})}
{edited && <MessageEditedContent />}
</MessageTextBody>
{renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
</>
);
}
type MEmoteProps = {
displayName: string;
edited?: boolean;
content: Record<string, unknown>;
renderBody: (props: RenderBodyProps) => ReactNode;
renderUrlsPreview?: (urls: string[]) => ReactNode;
};
export function MEmote({
displayName,
edited,
content,
renderBody,
renderUrlsPreview,
}: MEmoteProps) {
const { body, formatted_body: customBody } = content;
if (typeof body !== 'string') return <BrokenContent />;
const trimmedBody = trimReplyFromBody(body);
const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
return (
<>
<MessageTextBody
emote
preWrap={typeof customBody !== 'string'}
jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
>
<b>{`${displayName} `}</b>
{renderBody({
body: trimmedBody,
customBody: typeof customBody === 'string' ? customBody : undefined,
})}
{edited && <MessageEditedContent />}
</MessageTextBody>
{renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
</>
);
}
type MNoticeProps = {
edited?: boolean;
content: Record<string, unknown>;
renderBody: (props: RenderBodyProps) => ReactNode;
renderUrlsPreview?: (urls: string[]) => ReactNode;
};
export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNoticeProps) {
const { body, formatted_body: customBody } = content;
if (typeof body !== 'string') return <BrokenContent />;
const trimmedBody = trimReplyFromBody(body);
const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
return (
<>
<MessageTextBody
notice
preWrap={typeof customBody !== 'string'}
jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
>
{renderBody({
body: trimmedBody,
customBody: typeof customBody === 'string' ? customBody : undefined,
})}
{edited && <MessageEditedContent />}
</MessageTextBody>
{renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
</>
);
}
type RenderImageContentProps = {
body: string;
info?: IImageInfo & IThumbnailContent;
mimeType?: string;
url: string;
encInfo?: IEncryptedFile;
};
type MImageProps = {
content: IImageContent;
renderImageContent: (props: RenderImageContentProps) => ReactNode;
outlined?: boolean;
};
export function MImage({ content, renderImageContent, outlined }: MImageProps) {
const imgInfo = content?.info;
const mxcUrl = content.file?.url ?? content.url;
if (typeof mxcUrl !== 'string') {
return <BrokenContent />;
}
const height = scaleYDimension(imgInfo?.w || 400, 400, imgInfo?.h || 400);
return (
<Attachment outlined={outlined}>
<AttachmentBox
style={{
height: toRem(height < 48 ? 48 : height),
}}
>
{renderImageContent({
body: content.body || 'Image',
info: imgInfo,
mimeType: imgInfo?.mimetype,
url: mxcUrl,
encInfo: content.file,
})}
</AttachmentBox>
</Attachment>
);
}
type RenderVideoContentProps = {
body: string;
info: IVideoInfo & IThumbnailContent;
mimeType: string;
url: string;
encInfo?: IEncryptedFile;
};
type MVideoProps = {
content: IVideoContent;
renderAsFile: () => ReactNode;
renderVideoContent: (props: RenderVideoContentProps) => ReactNode;
outlined?: boolean;
};
export function MVideo({ content, renderAsFile, renderVideoContent, outlined }: MVideoProps) {
const videoInfo = content?.info;
const mxcUrl = content.file?.url ?? content.url;
const safeMimeType = getBlobSafeMimeType(videoInfo?.mimetype ?? '');
if (!videoInfo || !safeMimeType.startsWith('video') || typeof mxcUrl !== 'string') {
if (mxcUrl) {
return renderAsFile();
}
return <BrokenContent />;
}
const height = scaleYDimension(videoInfo.w || 400, 400, videoInfo.h || 400);
return (
<Attachment outlined={outlined}>
<AttachmentBox
style={{
height: toRem(height < 48 ? 48 : height),
}}
>
{renderVideoContent({
body: content.body || 'Video',
info: videoInfo,
mimeType: safeMimeType,
url: mxcUrl,
encInfo: content.file,
})}
</AttachmentBox>
</Attachment>
);
}
type RenderAudioContentProps = {
info: IAudioInfo;
mimeType: string;
url: string;
encInfo?: IEncryptedFile;
};
type MAudioProps = {
content: IAudioContent;
renderAsFile: () => ReactNode;
renderAudioContent: (props: RenderAudioContentProps) => ReactNode;
outlined?: boolean;
};
export function MAudio({ content, renderAsFile, renderAudioContent, outlined }: MAudioProps) {
const audioInfo = content?.info;
const mxcUrl = content.file?.url ?? content.url;
const safeMimeType = getBlobSafeMimeType(audioInfo?.mimetype ?? '');
if (!audioInfo || !safeMimeType.startsWith('audio') || typeof mxcUrl !== 'string') {
if (mxcUrl) {
return renderAsFile();
}
return <BrokenContent />;
}
return (
<Attachment outlined={outlined}>
<AttachmentHeader>
<FileHeader body={content.body ?? 'Audio'} mimeType={safeMimeType} />
</AttachmentHeader>
<AttachmentBox>
<AttachmentContent>
{renderAudioContent({
info: audioInfo,
mimeType: safeMimeType,
url: mxcUrl,
encInfo: content.file,
})}
</AttachmentContent>
</AttachmentBox>
</Attachment>
);
}
type RenderFileContentProps = {
body: string;
info: IFileInfo & IThumbnailContent;
mimeType: string;
url: string;
encInfo?: IEncryptedFile;
};
type MFileProps = {
content: IFileContent;
renderFileContent: (props: RenderFileContentProps) => ReactNode;
outlined?: boolean;
};
export function MFile({ content, renderFileContent, outlined }: MFileProps) {
const fileInfo = content?.info;
const mxcUrl = content.file?.url ?? content.url;
if (typeof mxcUrl !== 'string') {
return <BrokenContent />;
}
return (
<Attachment outlined={outlined}>
<AttachmentHeader>
<FileHeader
body={content.body ?? 'Unnamed File'}
mimeType={fileInfo?.mimetype ?? FALLBACK_MIMETYPE}
/>
</AttachmentHeader>
<AttachmentBox>
<AttachmentContent>
{renderFileContent({
body: content.body ?? 'File',
info: fileInfo ?? {},
mimeType: fileInfo?.mimetype ?? FALLBACK_MIMETYPE,
url: mxcUrl,
encInfo: content.file,
})}
</AttachmentContent>
</AttachmentBox>
</Attachment>
);
}
type MLocationProps = {
content: IContent;
};
export function MLocation({ content }: MLocationProps) {
const geoUri = content.geo_uri;
if (typeof geoUri !== 'string') return <BrokenContent />;
const location = parseGeoUri(geoUri);
return (
<Box direction="Column" alignItems="Start" gap="100">
<Text size="T400">{geoUri}</Text>
<Chip
as="a"
size="400"
href={`https://www.openstreetmap.org/?mlat=${location.latitude}&mlon=${location.longitude}#map=16/${location.latitude}/${location.longitude}`}
target="_blank"
rel="noreferrer noopener"
variant="Primary"
radii="Pill"
before={<Icon src={Icons.External} size="50" />}
>
<Text size="B300">Open Location</Text>
</Chip>
</Box>
);
}
type MStickerProps = {
content: IImageContent;
renderImageContent: (props: RenderImageContentProps) => ReactNode;
};
export function MSticker({ content, renderImageContent }: MStickerProps) {
const imgInfo = content?.info;
const mxcUrl = content.file?.url ?? content.url;
if (typeof mxcUrl !== 'string') {
return <MessageBrokenContent />;
}
const height = scaleYDimension(imgInfo?.w || 152, 152, imgInfo?.h || 152);
return (
<AttachmentBox
style={{
height: toRem(height < 48 ? 48 : height),
width: toRem(152),
}}
>
{renderImageContent({
body: content.body || 'Sticker',
info: imgInfo,
mimeType: imgInfo?.mimetype,
url: mxcUrl,
encInfo: content.file,
})}
</AttachmentBox>
);
}

37
src/app/components/message/RenderBody.tsx Normal file
View file

@ -0,0 +1,37 @@
import React from 'react';
import parse, { HTMLReactParserOptions } from 'html-react-parser';
import Linkify from 'linkify-react';
import { MessageEmptyContent } from './content';
import { sanitizeCustomHtml } from '../../utils/sanitize';
import {
LINKIFY_OPTS,
highlightText,
scaleSystemEmoji,
} from '../../plugins/react-custom-html-parser';
type RenderBodyProps = {
body: string;
customBody?: string;
highlightRegex?: RegExp;
htmlReactParserOptions: HTMLReactParserOptions;
};
export function RenderBody({
body,
customBody,
highlightRegex,
htmlReactParserOptions,
}: RenderBodyProps) {
if (body === '') <MessageEmptyContent />;
if (customBody) {
if (customBody === '') <MessageEmptyContent />;
return parse(sanitizeCustomHtml(customBody), htmlReactParserOptions);
}
return (
<Linkify options={LINKIFY_OPTS}>
{highlightRegex
? highlightText(highlightRegex, scaleSystemEmoji(body))
: scaleSystemEmoji(body)}
</Linkify>
);
}

15
src/app/components/message/Reply.css.ts
View file

@ -1,13 +1,20 @@
import { style } from '@vanilla-extract/css';
import { config, toRem } from 'folds';
export const ReplyBend = style({
flexShrink: 0,
});
export const Reply = style({
padding: `0 ${config.space.S100}`,
marginBottom: toRem(1),
cursor: 'pointer',
minWidth: 0,
maxWidth: '100%',
minHeight: config.lineHeight.T300,
selectors: {
'button&': {
cursor: 'pointer',
},
},
});
export const ReplyContent = style({
@ -19,7 +26,3 @@ export const ReplyContent = style({
},
},
});
export const ReplyContentText = style({
paddingRight: config.space.S100,
});

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

@ -1,7 +1,7 @@
import { Box, Icon, Icons, Text, as, color, toRem } from 'folds';
import { EventTimelineSet, MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
import React, { useEffect, useState } from 'react';
import React, { ReactNode, useEffect, useMemo, useState } from 'react';
import to from 'await-to-js';
import classNames from 'classnames';
import colorMXID from '../../../util/colorMXID';
@ -10,94 +10,105 @@ import { getMxIdLocalPart } from '../../utils/matrix';
import { LinePlaceholder } from './placeholder';
import { randomNumberBetween } from '../../utils/common';
import * as css from './Reply.css';
import {
MessageBadEncryptedContent,
MessageDeletedContent,
MessageFailedContent,
} from './MessageContentFallback';
import { MessageBadEncryptedContent, MessageDeletedContent, MessageFailedContent } from './content';
import { scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
type ReplyLayoutProps = {
userColor?: string;
username?: ReactNode;
};
export const ReplyLayout = as<'div', ReplyLayoutProps>(
({ username, userColor, className, children, ...props }, ref) => (
<Box
className={classNames(css.Reply, className)}
alignItems="Center"
gap="100"
{...props}
ref={ref}
>
<Box style={{ color: userColor, maxWidth: toRem(200) }} alignItems="Center" shrink="No">
<Icon size="100" src={Icons.ReplyArrow} />
{username}
</Box>
<Box grow="Yes" className={css.ReplyContent}>
{children}
</Box>
</Box>
)
);
type ReplyProps = {
mx: MatrixClient;
room: Room;
timelineSet: EventTimelineSet;
timelineSet?: EventTimelineSet;
eventId: string;
};
export const Reply = as<'div', ReplyProps>(
({ className, mx, room, timelineSet, eventId, ...props }, ref) => {
const [replyEvent, setReplyEvent] = useState<MatrixEvent | null | undefined>(
timelineSet.findEventById(eventId)
);
export const Reply = as<'div', ReplyProps>(({ mx, room, timelineSet, eventId, ...props }, ref) => {
const [replyEvent, setReplyEvent] = useState<MatrixEvent | null | undefined>(
timelineSet?.findEventById(eventId)
);
const placeholderWidth = useMemo(() => randomNumberBetween(40, 400), []);
const { body } = replyEvent?.getContent() ?? {};
const sender = replyEvent?.getSender();
const { body } = replyEvent?.getContent() ?? {};
const sender = replyEvent?.getSender();
const fallbackBody = replyEvent?.isRedacted() ? (
<MessageDeletedContent />
) : (
<MessageFailedContent />
);
const fallbackBody = replyEvent?.isRedacted() ? (
<MessageDeletedContent />
) : (
<MessageFailedContent />
);
useEffect(() => {
let disposed = false;
const loadEvent = async () => {
const [err, evt] = await to(mx.fetchRoomEvent(room.roomId, eventId));
const mEvent = new MatrixEvent(evt);
if (disposed) return;
if (err) {
setReplyEvent(null);
return;
}
if (mEvent.isEncrypted() && mx.getCrypto()) {
await to(mEvent.attemptDecryption(mx.getCrypto() as CryptoBackend));
}
setReplyEvent(mEvent);
};
if (replyEvent === undefined) loadEvent();
return () => {
disposed = true;
};
}, [replyEvent, mx, room, eventId]);
useEffect(() => {
let disposed = false;
const loadEvent = async () => {
const [err, evt] = await to(mx.fetchRoomEvent(room.roomId, eventId));
const mEvent = new MatrixEvent(evt);
if (disposed) return;
if (err) {
setReplyEvent(null);
return;
}
if (mEvent.isEncrypted() && mx.getCrypto()) {
await to(mEvent.attemptDecryption(mx.getCrypto() as CryptoBackend));
}
setReplyEvent(mEvent);
};
if (replyEvent === undefined) loadEvent();
return () => {
disposed = true;
};
}, [replyEvent, mx, room, eventId]);
const badEncryption = replyEvent?.getContent().msgtype === 'm.bad.encrypted';
const bodyJSX = body ? trimReplyFromBody(body) : fallbackBody;
const badEncryption = replyEvent?.getContent().msgtype === 'm.bad.encrypted';
const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody;
return (
<Box
className={classNames(css.Reply, className)}
alignItems="Center"
gap="100"
{...props}
ref={ref}
>
<Box
style={{ color: colorMXID(sender ?? eventId), maxWidth: '50%' }}
alignItems="Center"
shrink="No"
>
<Icon src={Icons.ReplyArrow} size="50" />
{sender && (
<Text size="T300" truncate>
{getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender)}
</Text>
)}
</Box>
<Box grow="Yes" className={css.ReplyContent}>
{replyEvent !== undefined ? (
<Text className={css.ReplyContentText} size="T300" truncate>
{badEncryption ? <MessageBadEncryptedContent /> : bodyJSX}
</Text>
) : (
<LinePlaceholder
style={{
backgroundColor: color.SurfaceVariant.ContainerActive,
maxWidth: toRem(randomNumberBetween(40, 400)),
width: '100%',
}}
/>
)}
</Box>
</Box>
);
}
);
return (
<ReplyLayout
userColor={sender ? colorMXID(sender) : undefined}
username={
sender && (
<Text size="T300" truncate>
<b>{getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender)}</b>
</Text>
)
}
{...props}
ref={ref}
>
{replyEvent !== undefined ? (
<Text size="T300" truncate>
{badEncryption ? <MessageBadEncryptedContent /> : bodyJSX}
</Text>
) : (
<LinePlaceholder
style={{
backgroundColor: color.SurfaceVariant.ContainerActive,
maxWidth: toRem(placeholderWidth),
width: '100%',
}}
/>
)}
</ReplyLayout>
);
});

38
src/app/components/message/Time.tsx
View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { ComponentProps } from 'react';
import { Text, as } from 'folds';
import { timeDayMonYear, timeHourMinute, today, yesterday } from '../../utils/time';
@ -7,21 +7,23 @@ export type TimeProps = {
ts: number;
};
export const Time = as<'span', TimeProps>(({ compact, ts, ...props }, ref) => {
let time = '';
if (compact) {
time = timeHourMinute(ts);
} else if (today(ts)) {
time = timeHourMinute(ts);
} else if (yesterday(ts)) {
time = `Yesterday ${timeHourMinute(ts)}`;
} else {
time = `${timeDayMonYear(ts)} ${timeHourMinute(ts)}`;
}
export const Time = as<'span', TimeProps & ComponentProps<typeof Text>>(
({ compact, ts, ...props }, ref) => {
let time = '';
if (compact) {
time = timeHourMinute(ts);
} else if (today(ts)) {
time = timeHourMinute(ts);
} else if (yesterday(ts)) {
time = `Yesterday ${timeHourMinute(ts)}`;
} else {
time = `${timeDayMonYear(ts)} ${timeHourMinute(ts)}`;
}
return (
<Text as="time" style={{ flexShrink: 0 }} size="T200" priority="300" {...props} ref={ref}>
{time}
</Text>
);
});
return (
<Text as="time" style={{ flexShrink: 0 }} size="T200" priority="300" {...props} ref={ref}>
{time}
</Text>
);
}
);

199
src/app/components/message/content/AudioContent.tsx Normal file
View file

@ -0,0 +1,199 @@
/* eslint-disable jsx-a11y/media-has-caption */
import React, { ReactNode, useCallback, useRef, useState } from 'react';
import { Badge, Chip, Icon, IconButton, Icons, ProgressBar, Spinner, Text, toRem } from 'folds';
import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
import { Range } from 'react-range';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
import { getFileSrcUrl } from './util';
import { IAudioInfo } from '../../../../types/matrix/common';
import {
PlayTimeCallback,
useMediaLoading,
useMediaPlay,
useMediaPlayTimeCallback,
useMediaSeek,
useMediaVolume,
} from '../../../hooks/media';
import { useThrottle } from '../../../hooks/useThrottle';
import { secondsToMinutesAndSeconds } from '../../../utils/common';
const PLAY_TIME_THROTTLE_OPS = {
wait: 500,
immediate: true,
};
type RenderMediaControlProps = {
after: ReactNode;
leftControl: ReactNode;
rightControl: ReactNode;
children: ReactNode;
};
export type AudioContentProps = {
mimeType: string;
url: string;
info: IAudioInfo;
encInfo?: EncryptedAttachmentInfo;
renderMediaControl: (props: RenderMediaControlProps) => ReactNode;
};
export function AudioContent({
mimeType,
url,
info,
encInfo,
renderMediaControl,
}: AudioContentProps) {
const mx = useMatrixClient();
const [srcState, loadSrc] = useAsyncCallback(
useCallback(
() => getFileSrcUrl(mx.mxcUrlToHttp(url) ?? '', mimeType, encInfo),
[mx, url, mimeType, encInfo]
)
);
const audioRef = useRef<HTMLAudioElement | null>(null);
const [currentTime, setCurrentTime] = useState(0);
// duration in seconds. (NOTE: info.duration is in milliseconds)
const infoDuration = info.duration ?? 0;
const [duration, setDuration] = useState((infoDuration >= 0 ? infoDuration : 0) / 1000);
const getAudioRef = useCallback(() => audioRef.current, []);
const { loading } = useMediaLoading(getAudioRef);
const { playing, setPlaying } = useMediaPlay(getAudioRef);
const { seek } = useMediaSeek(getAudioRef);
const { volume, mute, setMute, setVolume } = useMediaVolume(getAudioRef);
const handlePlayTimeCallback: PlayTimeCallback = useCallback((d, ct) => {
setDuration(d);
setCurrentTime(ct);
}, []);
useMediaPlayTimeCallback(
getAudioRef,
useThrottle(handlePlayTimeCallback, PLAY_TIME_THROTTLE_OPS)
);
const handlePlay = () => {
if (srcState.status === AsyncStatus.Success) {
setPlaying(!playing);
} else if (srcState.status !== AsyncStatus.Loading) {
loadSrc();
}
};
return renderMediaControl({
after: (
<Range
step={1}
min={0}
max={duration || 1}
values={[currentTime]}
onChange={(values) => seek(values[0])}
renderTrack={(params) => (
<div {...params.props}>
{params.children}
<ProgressBar
as="div"
variant="Secondary"
size="300"
min={0}
max={duration}
value={currentTime}
radii="300"
/>
</div>
)}
renderThumb={(params) => (
<Badge
size="300"
variant="Secondary"
fill="Solid"
radii="Pill"
outlined
{...params.props}
style={{
...params.props.style,
zIndex: 0,
}}
/>
)}
/>
),
leftControl: (
<>
<Chip
onClick={handlePlay}
variant="Secondary"
radii="300"
disabled={srcState.status === AsyncStatus.Loading}
before={
srcState.status === AsyncStatus.Loading || loading ? (
<Spinner variant="Secondary" size="50" />
) : (
<Icon src={playing ? Icons.Pause : Icons.Play} size="50" filled={playing} />
)
}
>
<Text size="B300">{playing ? 'Pause' : 'Play'}</Text>
</Chip>
<Text size="T200">{`${secondsToMinutesAndSeconds(
currentTime
)} / ${secondsToMinutesAndSeconds(duration)}`}</Text>
</>
),
rightControl: (
<>
<IconButton
variant="SurfaceVariant"
size="300"
radii="Pill"
onClick={() => setMute(!mute)}
aria-pressed={mute}
>
<Icon src={mute ? Icons.VolumeMute : Icons.VolumeHigh} size="50" />
</IconButton>
<Range
step={0.1}
min={0}
max={1}
values={[volume]}
onChange={(values) => setVolume(values[0])}
renderTrack={(params) => (
<div {...params.props}>
{params.children}
<ProgressBar
style={{ width: toRem(48) }}
variant="Secondary"
size="300"
min={0}
max={1}
value={volume}
radii="300"
/>
</div>
)}
renderThumb={(params) => (
<Badge
size="300"
variant="Secondary"
fill="Solid"
radii="Pill"
outlined
{...params.props}
style={{
...params.props.style,
zIndex: 0,
}}
/>
)}
/>
</>
),
children: (
<audio controls={false} autoPlay ref={audioRef}>
{srcState.status === AsyncStatus.Success && <source src={srcState.data} type={mimeType} />}
</audio>
),
});
}

2
src/app/organisms/room/message/EventContent.tsx → src/app/components/message/content/EventContent.tsx
View file

@ -1,6 +1,6 @@
import { Box, Icon, IconSrc } from 'folds';
import React, { ReactNode } from 'react';
import { CompactLayout, ModernLayout } from '../../../components/message';
import { CompactLayout, ModernLayout } from '..';
export type EventContentProps = {
messageLayout: number;

0
src/app/components/message/MessageContentFallback.tsx → src/app/components/message/content/FallbackContent.tsx
View file

102
src/app/organisms/room/message/FileContent.tsx → src/app/components/message/content/FileContent.tsx
View file

@ -1,4 +1,4 @@
import React, { useCallback, useState } from 'react';
import React, { ReactNode, useCallback, useState } from 'react';
import {
Box,
Button,
@ -22,23 +22,14 @@ import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { getFileSrcUrl, getSrcFile } from './util';
import { bytesToSize } from '../../../utils/common';
import { TextViewer } from '../../../components/text-viewer';
import {
READABLE_EXT_TO_MIME_TYPE,
READABLE_TEXT_MIME_TYPES,
getFileNameExt,
mimeTypeToExt,
} from '../../../utils/mimeTypes';
import { PdfViewer } from '../../../components/Pdf-viewer';
import * as css from './styles.css';
export type FileContentProps = {
body: string;
mimeType: string;
url: string;
info: IFileInfo;
encInfo?: EncryptedAttachmentInfo;
};
import * as css from './style.css';
import { stopPropagation } from '../../../utils/keyboard';
const renderErrorButton = (retry: () => void, text: string) => (
<TooltipProvider
@ -69,7 +60,20 @@ const renderErrorButton = (retry: () => void, text: string) => (
</TooltipProvider>
);
function ReadTextFile({ body, mimeType, url, encInfo }: Omit<FileContentProps, 'info'>) {
type RenderTextViewerProps = {
name: string;
text: string;
langName: string;
requestClose: () => void;
};
type ReadTextFileProps = {
body: string;
mimeType: string;
url: string;
encInfo?: EncryptedAttachmentInfo;
renderViewer: (props: RenderTextViewerProps) => ReactNode;
};
export function ReadTextFile({ body, mimeType, url, encInfo, renderViewer }: ReadTextFileProps) {
const mx = useMatrixClient();
const [textViewer, setTextViewer] = useState(false);
@ -98,6 +102,7 @@ function ReadTextFile({ body, mimeType, url, encInfo }: Omit<FileContentProps, '
initialFocus: false,
onDeactivate: () => setTextViewer(false),
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Modal
@ -105,16 +110,14 @@ function ReadTextFile({ body, mimeType, url, encInfo }: Omit<FileContentProps, '
size="500"
onContextMenu={(evt: any) => evt.stopPropagation()}
>
<TextViewer
name={body}
text={textState.data}
langName={
READABLE_TEXT_MIME_TYPES.includes(mimeType)
? mimeTypeToExt(mimeType)
: mimeTypeToExt(READABLE_EXT_TO_MIME_TYPE[getFileNameExt(body)] ?? mimeType)
}
requestClose={() => setTextViewer(false)}
/>
{renderViewer({
name: body,
text: textState.data,
langName: READABLE_TEXT_MIME_TYPES.includes(mimeType)
? mimeTypeToExt(mimeType)
: mimeTypeToExt(READABLE_EXT_TO_MIME_TYPE[getFileNameExt(body)] ?? mimeType),
requestClose: () => setTextViewer(false),
})}
</Modal>
</FocusTrap>
</OverlayCenter>
@ -149,7 +152,19 @@ function ReadTextFile({ body, mimeType, url, encInfo }: Omit<FileContentProps, '
);
}
function ReadPdfFile({ body, mimeType, url, encInfo }: Omit<FileContentProps, 'info'>) {
type RenderPdfViewerProps = {
name: string;
src: string;
requestClose: () => void;
};
export type ReadPdfFileProps = {
body: string;
mimeType: string;
url: string;
encInfo?: EncryptedAttachmentInfo;
renderViewer: (props: RenderPdfViewerProps) => ReactNode;
};
export function ReadPdfFile({ body, mimeType, url, encInfo, renderViewer }: ReadPdfFileProps) {
const mx = useMatrixClient();
const [pdfViewer, setPdfViewer] = useState(false);
@ -171,6 +186,7 @@ function ReadPdfFile({ body, mimeType, url, encInfo }: Omit<FileContentProps, 'i
initialFocus: false,
onDeactivate: () => setPdfViewer(false),
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Modal
@ -178,11 +194,11 @@ function ReadPdfFile({ body, mimeType, url, encInfo }: Omit<FileContentProps, 'i
size="500"
onContextMenu={(evt: any) => evt.stopPropagation()}
>
<PdfViewer
name={body}
src={pdfState.data}
requestClose={() => setPdfViewer(false)}
/>
{renderViewer({
name: body,
src: pdfState.data,
requestClose: () => setPdfViewer(false),
})}
</Modal>
</FocusTrap>
</OverlayCenter>
@ -215,7 +231,14 @@ function ReadPdfFile({ body, mimeType, url, encInfo }: Omit<FileContentProps, 'i
);
}
function DownloadFile({ body, mimeType, url, info, encInfo }: FileContentProps) {
export type DownloadFileProps = {
body: string;
mimeType: string;
url: string;
info: IFileInfo;
encInfo?: EncryptedAttachmentInfo;
};
export function DownloadFile({ body, mimeType, url, info, encInfo }: DownloadFileProps) {
const mx = useMatrixClient();
const [downloadState, download] = useAsyncCallback(
@ -253,17 +276,20 @@ function DownloadFile({ body, mimeType, url, info, encInfo }: FileContentProps)
);
}
type FileContentProps = {
body: string;
mimeType: string;
renderAsTextFile: () => ReactNode;
renderAsPdfFile: () => ReactNode;
};
export const FileContent = as<'div', FileContentProps>(
({ body, mimeType, url, info, encInfo, ...props }, ref) => (
({ body, mimeType, renderAsTextFile, renderAsPdfFile, children, ...props }, ref) => (
<Box direction="Column" gap="300" {...props} ref={ref}>
{(READABLE_TEXT_MIME_TYPES.includes(mimeType) ||
READABLE_EXT_TO_MIME_TYPE[getFileNameExt(body)]) && (
<ReadTextFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} />
)}
{mimeType === 'application/pdf' && (
<ReadPdfFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} />
)}
<DownloadFile body={body} mimeType={mimeType} url={url} info={info} encInfo={encInfo} />
READABLE_EXT_TO_MIME_TYPE[getFileNameExt(body)]) &&
renderAsTextFile()}
{mimeType === 'application/pdf' && renderAsPdfFile()}
{children}
</Box>
)
);

69
src/app/organisms/room/message/ImageContent.tsx → src/app/components/message/content/ImageContent.tsx
View file

@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useState } from 'react';
import React, { ReactNode, useCallback, useEffect, useState } from 'react';
import {
Badge,
Box,
@ -23,12 +23,25 @@ import { IImageInfo, MATRIX_BLUR_HASH_PROPERTY_NAME } from '../../../../types/ma
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { getFileSrcUrl } from './util';
import { Image } from '../../../components/media';
import * as css from './styles.css';
import * as css from './style.css';
import { bytesToSize } from '../../../utils/common';
import { ImageViewer } from '../../../components/image-viewer';
import { FALLBACK_MIMETYPE } from '../../../utils/mimeTypes';
import { stopPropagation } from '../../../utils/keyboard';
type RenderViewerProps = {
src: string;
alt: string;
requestClose: () => void;
};
type RenderImageProps = {
alt: string;
title: string;
src: string;
onLoad: () => void;
onError: () => void;
onClick: () => void;
tabIndex: number;
};
export type ImageContentProps = {
body: string;
mimeType?: string;
@ -36,9 +49,25 @@ export type ImageContentProps = {
info?: IImageInfo;
encInfo?: EncryptedAttachmentInfo;
autoPlay?: boolean;
renderViewer: (props: RenderViewerProps) => ReactNode;
renderImage: (props: RenderImageProps) => ReactNode;
};
export const ImageContent = as<'div', ImageContentProps>(
({ className, body, mimeType, url, info, encInfo, autoPlay, ...props }, ref) => {
(
{
className,
body,
mimeType,
url,
info,
encInfo,
autoPlay,
renderViewer,
renderImage,
...props
},
ref
) => {
const mx = useMatrixClient();
const blurHash = info?.[MATRIX_BLUR_HASH_PROPERTY_NAME];
@ -80,6 +109,7 @@ export const ImageContent = as<'div', ImageContentProps>(
initialFocus: false,
onDeactivate: () => setViewer(false),
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Modal
@ -87,11 +117,11 @@ export const ImageContent = as<'div', ImageContentProps>(
size="500"
onContextMenu={(evt: any) => evt.stopPropagation()}
>
<ImageViewer
src={srcState.data}
alt={body}
requestClose={() => setViewer(false)}
/>
{renderViewer({
src: srcState.data,
alt: body,
requestClose: () => setViewer(false),
})}
</Modal>
</FocusTrap>
</OverlayCenter>
@ -122,16 +152,15 @@ export const ImageContent = as<'div', ImageContentProps>(
)}
{srcState.status === AsyncStatus.Success && (
<Box className={css.AbsoluteContainer}>
<Image
alt={body}
title={body}
src={srcState.data}
loading="lazy"
onLoad={handleLoad}
onError={handleError}
onClick={() => setViewer(true)}
tabIndex={0}
/>
{renderImage({
alt: body,
title: body,
src: srcState.data,
onLoad: handleLoad,
onError: handleError,
onClick: () => setViewer(true),
tabIndex: 0,
})}
</Box>
)}
{(srcState.status === AsyncStatus.Loading || srcState.status === AsyncStatus.Success) &&

34
src/app/components/message/content/ThumbnailContent.tsx Normal file
View file

@ -0,0 +1,34 @@
import { ReactNode, useCallback, useEffect } from 'react';
import { IThumbnailContent } from '../../../../types/matrix/common';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
import { getFileSrcUrl } from './util';
export type ThumbnailContentProps = {
info: IThumbnailContent;
renderImage: (src: string) => ReactNode;
};
export function ThumbnailContent({ info, renderImage }: ThumbnailContentProps) {
const mx = useMatrixClient();
const [thumbSrcState, loadThumbSrc] = useAsyncCallback(
useCallback(() => {
const thumbInfo = info.thumbnail_info;
const thumbMxcUrl = info.thumbnail_file?.url ?? info.thumbnail_url;
if (typeof thumbMxcUrl !== 'string' || typeof thumbInfo?.mimetype !== 'string') {
throw new Error('Failed to load thumbnail');
}
return getFileSrcUrl(
mx.mxcUrlToHttp(thumbMxcUrl) ?? '',
thumbInfo.mimetype,
info.thumbnail_file
);
}, [mx, info])
);
useEffect(() => {
loadThumbSrc();
}, [loadThumbSrc]);
return thumbSrcState.status === AsyncStatus.Success ? renderImage(thumbSrcState.data) : null;
}

71
src/app/organisms/room/message/VideoContent.tsx → src/app/components/message/content/VideoContent.tsx
View file

@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useState } from 'react';
import React, { ReactNode, useCallback, useEffect, useState } from 'react';
import {
Badge,
Box,
@ -19,25 +19,47 @@ import {
IVideoInfo,
MATRIX_BLUR_HASH_PROPERTY_NAME,
} from '../../../../types/matrix/common';
import * as css from './styles.css';
import * as css from './style.css';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
import { getFileSrcUrl } from './util';
import { Image, Video } from '../../../components/media';
import { bytesToSize } from '../../../../util/common';
import { millisecondsToMinutesAndSeconds } from '../../../utils/common';
export type VideoContentProps = {
type RenderVideoProps = {
title: string;
src: string;
onLoadedMetadata: () => void;
onError: () => void;
autoPlay: boolean;
controls: boolean;
};
type VideoContentProps = {
body: string;
mimeType: string;
url: string;
info: IVideoInfo & IThumbnailContent;
encInfo?: EncryptedAttachmentInfo;
autoPlay?: boolean;
loadThumbnail?: boolean;
renderThumbnail?: () => ReactNode;
renderVideo: (props: RenderVideoProps) => ReactNode;
};
export const VideoContent = as<'div', VideoContentProps>(
({ className, body, mimeType, url, info, encInfo, autoPlay, loadThumbnail, ...props }, ref) => {
(
{
className,
body,
mimeType,
url,
info,
encInfo,
autoPlay,
renderThumbnail,
renderVideo,
...props
},
ref
) => {
const mx = useMatrixClient();
const blurHash = info.thumbnail_info?.[MATRIX_BLUR_HASH_PROPERTY_NAME];
@ -50,20 +72,6 @@ export const VideoContent = as<'div', VideoContentProps>(
[mx, url, mimeType, encInfo]
)
);
const [thumbSrcState, loadThumbSrc] = useAsyncCallback(
useCallback(() => {
const thumbInfo = info.thumbnail_info;
const thumbMxcUrl = info.thumbnail_file?.url ?? info.thumbnail_url;
if (typeof thumbMxcUrl !== 'string' || typeof thumbInfo?.mimetype !== 'string') {
throw new Error('Failed to load thumbnail');
}
return getFileSrcUrl(
mx.mxcUrlToHttp(thumbMxcUrl) ?? '',
thumbInfo.mimetype,
info.thumbnail_file
);
}, [mx, info])
);
const handleLoad = () => {
setLoad(true);
@ -81,9 +89,6 @@ export const VideoContent = as<'div', VideoContentProps>(
useEffect(() => {
if (autoPlay) loadSrc();
}, [autoPlay, loadSrc]);
useEffect(() => {
if (loadThumbnail) loadThumbSrc();
}, [loadThumbnail, loadThumbSrc]);
return (
<Box className={classNames(css.RelativeBase, className)} {...props} ref={ref}>
@ -96,9 +101,9 @@ export const VideoContent = as<'div', VideoContentProps>(
punch={1}
/>
)}
{thumbSrcState.status === AsyncStatus.Success && !load && (
{renderThumbnail && !load && (
<Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
<Image alt={body} title={body} src={thumbSrcState.data} loading="lazy" />
{renderThumbnail()}
</Box>
)}
{!autoPlay && srcState.status === AsyncStatus.Idle && (
@ -117,14 +122,14 @@ export const VideoContent = as<'div', VideoContentProps>(
)}
{srcState.status === AsyncStatus.Success && (
<Box className={css.AbsoluteContainer}>
<Video
title={body}
src={srcState.data}
onLoadedMetadata={handleLoad}
onError={handleError}
autoPlay
controls
/>
{renderVideo({
title: body,
src: srcState.data,
onLoadedMetadata: handleLoad,
onError: handleError,
autoPlay: true,
controls: true,
})}
</Box>
)}
{(srcState.status === AsyncStatus.Loading || srcState.status === AsyncStatus.Success) &&

7
src/app/components/message/content/index.ts Normal file
View file

@ -0,0 +1,7 @@
export * from './ThumbnailContent';
export * from './ImageContent';
export * from './VideoContent';
export * from './AudioContent';
export * from './FileContent';
export * from './FallbackContent';
export * from './EventContent';

37
src/app/components/message/content/style.css.ts Normal file
View file

@ -0,0 +1,37 @@
import { style } from '@vanilla-extract/css';
import { DefaultReset, config } from 'folds';
export const RelativeBase = style([
DefaultReset,
{
position: 'relative',
width: '100%',
height: '100%',
},
]);
export const AbsoluteContainer = style([
DefaultReset,
{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
},
]);
export const AbsoluteFooter = style([
DefaultReset,
{
position: 'absolute',
bottom: config.space.S100,
left: config.space.S100,
right: config.space.S100,
},
]);
export const ModalWide = style({
minWidth: '85vw',
minHeight: '90vh',
});

0
src/app/organisms/room/message/util.ts → src/app/components/message/content/util.ts
View file

5
src/app/components/message/index.ts
View file

@ -3,5 +3,8 @@ export * from './placeholder';
export * from './Reaction';
export * from './attachment';
export * from './Reply';
export * from './MessageContentFallback';
export * from './content';
export * from './Time';
export * from './MsgTypeRenderers';
export * from './FileHeader';
export * from './RenderBody';

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

@ -61,6 +61,7 @@ const highlightAnime = keyframes({
const HighlightVariant = styleVariants({
true: {
animation: `${highlightAnime} 2000ms ease-in-out`,
animationIterationCount: 'infinite',
},
});
@ -143,12 +144,14 @@ export const BubbleContent = style({
});
export const Username = style({
cursor: 'pointer',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
selectors: {
'&:hover, &:focus-visible': {
'button&': {
cursor: 'pointer',
},
'button&:hover, button&:focus-visible': {
textDecoration: 'underline',
},
},

11
src/app/components/nav/NavCategory.tsx Normal file
View file

@ -0,0 +1,11 @@
import React, { ReactNode } from 'react';
import { as } from 'folds';
import classNames from 'classnames';
import * as css from './styles.css';
type NavCategoryProps = {
children: ReactNode;
};
export const NavCategory = as<'div', NavCategoryProps>(({ className, ...props }, ref) => (
<div className={classNames(css.NavCategory, className)} {...props} ref={ref} />
));

19
src/app/components/nav/NavCategoryHeader.tsx Normal file
View file

@ -0,0 +1,19 @@
import React, { ReactNode } from 'react';
import classNames from 'classnames';
import { Header, as } from 'folds';
import * as css from './styles.css';
export type NavCategoryHeaderProps = {
children: ReactNode;
};
export const NavCategoryHeader = as<'div', NavCategoryHeaderProps>(
({ className, ...props }, ref) => (
<Header
className={classNames(css.NavCategoryHeader, className)}
variant="Background"
size="300"
{...props}
ref={ref}
/>
)
);

40
src/app/components/nav/NavEmptyLayout.tsx Normal file
View file

@ -0,0 +1,40 @@
import { Box, config } from 'folds';
import React, { ReactNode } from 'react';
export function NavEmptyCenter({ children }: { children: ReactNode }) {
return (
<Box
style={{
padding: config.space.S500,
}}
grow="Yes"
direction="Column"
justifyContent="Center"
>
{children}
</Box>
);
}
type NavEmptyLayoutProps = {
icon?: ReactNode;
title?: ReactNode;
content?: ReactNode;
options?: ReactNode;
};
export function NavEmptyLayout({ icon, title, content, options }: NavEmptyLayoutProps) {
return (
<Box direction="Column" gap="400">
<Box direction="Column" alignItems="Center" gap="200">
{icon}
</Box>
<Box direction="Column" gap="100" alignItems="Center">
{title}
{content}
</Box>
<Box direction="Column" gap="200">
{options}
</Box>
</Box>
);
}

33
src/app/components/nav/NavItem.tsx Normal file
View file

@ -0,0 +1,33 @@
import classNames from 'classnames';
import React, { ComponentProps, forwardRef } from 'react';
import { Link } from 'react-router-dom';
import { as } from 'folds';
import * as css from './styles.css';
export const NavItem = as<
'div',
{
highlight?: boolean;
} & css.RoomSelectorVariants
>(({ as: AsNavItem = 'div', className, highlight, variant, radii, children, ...props }, ref) => (
<AsNavItem
className={classNames(css.NavItem({ variant, radii }), className)}
data-highlight={highlight}
{...props}
ref={ref}
>
{children}
</AsNavItem>
));
export const NavLink = forwardRef<HTMLAnchorElement, ComponentProps<typeof Link>>(
({ className, ...props }, ref) => (
<Link className={classNames(css.NavLink, className)} {...props} ref={ref} />
)
);
export const NavButton = as<'button'>(
({ as: AsNavButton = 'button', className, ...props }, ref) => (
<AsNavButton className={classNames(css.NavLink, className)} {...props} ref={ref} />
)
);

10
src/app/components/nav/NavItemContent.tsx Normal file
View file

@ -0,0 +1,10 @@
import React, { ComponentProps } from 'react';
import { Text, as } from 'folds';
import classNames from 'classnames';
import * as css from './styles.css';
export const NavItemContent = as<'p', ComponentProps<typeof Text>>(
({ className, ...props }, ref) => (
<Text className={classNames(css.NavItemContent, className)} size="T300" {...props} ref={ref} />
)
);

17
src/app/components/nav/NavItemOptions.tsx Normal file
View file

@ -0,0 +1,17 @@
import React, { ComponentProps } from 'react';
import { Box, as } from 'folds';
import classNames from 'classnames';
import * as css from './styles.css';
export const NavItemOptions = as<'div', ComponentProps<typeof Box>>(
({ className, ...props }, ref) => (
<Box
className={classNames(css.NavItemOptions, className)}
alignItems="Center"
shrink="No"
gap="0"
{...props}
ref={ref}
/>
)
);

6
src/app/components/nav/index.ts Normal file
View file

@ -0,0 +1,6 @@
export * from './NavCategory';
export * from './NavCategoryHeader';
export * from './NavEmptyLayout';
export * from './NavItem';
export * from './NavItemContent';
export * from './NavItemOptions';

128
src/app/components/nav/styles.css.ts Normal file
View file

@ -0,0 +1,128 @@
import { ComplexStyleRule, createVar, style } from '@vanilla-extract/css';
import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
import { ContainerColor, DefaultReset, Disabled, RadiiVariant, color, config, toRem } from 'folds';
export const NavCategory = style([
DefaultReset,
{
position: 'relative',
},
]);
export const NavCategoryHeader = style({
gap: config.space.S100,
});
export const NavLink = style({
color: 'inherit',
minWidth: 0,
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
flexGrow: 1,
':hover': {
textDecoration: 'unset',
},
':focus': {
outline: 'none',
},
});
const Container = createVar();
const ContainerHover = createVar();
const ContainerActive = createVar();
const ContainerLine = createVar();
const OnContainer = createVar();
const getVariant = (variant: ContainerColor): ComplexStyleRule => ({
vars: {
[Container]: color[variant].Container,
[ContainerHover]: color[variant].ContainerHover,
[ContainerActive]: color[variant].ContainerActive,
[ContainerLine]: color[variant].ContainerLine,
[OnContainer]: color[variant].OnContainer,
},
});
const NavItemBase = style({
width: '100%',
display: 'flex',
justifyContent: 'start',
cursor: 'pointer',
backgroundColor: Container,
color: OnContainer,
outline: 'none',
minHeight: toRem(36),
selectors: {
'&:hover, &:focus-visible': {
backgroundColor: ContainerHover,
},
'&[data-hover=true]': {
backgroundColor: ContainerHover,
},
[`&:has(.${NavLink}:active)`]: {
backgroundColor: ContainerActive,
},
'&[aria-selected=true]': {
backgroundColor: ContainerActive,
},
[`&:has(.${NavLink}:focus-visible)`]: {
outline: `${config.borderWidth.B600} solid ${ContainerLine}`,
outlineOffset: `calc(-1 * ${config.borderWidth.B600})`,
},
},
'@supports': {
[`not selector(:has(.${NavLink}:focus-visible))`]: {
':focus-within': {
outline: `${config.borderWidth.B600} solid ${ContainerLine}`,
outlineOffset: `calc(-1 * ${config.borderWidth.B600})`,
},
},
},
});
export const NavItem = recipe({
base: [DefaultReset, NavItemBase, Disabled],
variants: {
variant: {
Background: getVariant('Background'),
Surface: getVariant('Surface'),
SurfaceVariant: getVariant('SurfaceVariant'),
Primary: getVariant('Primary'),
Secondary: getVariant('Secondary'),
Success: getVariant('Success'),
Warning: getVariant('Warning'),
Critical: getVariant('Critical'),
},
radii: RadiiVariant,
},
defaultVariants: {
variant: 'Surface',
radii: '400',
},
});
export type RoomSelectorVariants = RecipeVariants<typeof NavItem>;
export const NavItemContent = style({
paddingLeft: config.space.S200,
paddingRight: config.space.S300,
height: 'inherit',
minWidth: 0,
flexGrow: 1,
display: 'flex',
alignItems: 'center',
fontWeight: config.fontWeight.W500,
selectors: {
'&:hover': {
textDecoration: 'unset',
},
[`.${NavItemBase}[data-highlight=true] &`]: {
fontWeight: config.fontWeight.W600,
},
},
});
export const NavItemOptions = style({
paddingRight: config.space.S200,
});

146
src/app/components/page/Page.tsx Normal file
View file

@ -0,0 +1,146 @@
import React, { ComponentProps, MutableRefObject, ReactNode } from 'react';
import { Box, Header, Line, Scroll, Text, as } from 'folds';
import classNames from 'classnames';
import { ContainerColor } from '../../styles/ContainerColor.css';
import * as css from './style.css';
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
type PageRootProps = {
nav: ReactNode;
children: ReactNode;
};
export function PageRoot({ nav, children }: PageRootProps) {
const screenSize = useScreenSizeContext();
return (
<Box grow="Yes" className={ContainerColor({ variant: 'Background' })}>
{nav}
{screenSize !== ScreenSize.Mobile && (
<Line variant="Background" size="300" direction="Vertical" />
)}
{children}
</Box>
);
}
type ClientDrawerLayoutProps = {
children: ReactNode;
};
export function PageNav({ children }: ClientDrawerLayoutProps) {
const screenSize = useScreenSizeContext();
const isMobile = screenSize === ScreenSize.Mobile;
return (
<Box
grow={isMobile ? 'Yes' : undefined}
className={css.PageNav}
shrink={isMobile ? 'Yes' : 'No'}
>
<Box grow="Yes" direction="Column">
{children}
</Box>
</Box>
);
}
export const PageNavHeader = as<'header'>(({ className, ...props }, ref) => (
<Header
className={classNames(css.PageNavHeader, className)}
variant="Background"
size="600"
{...props}
ref={ref}
/>
));
export function PageNavContent({
scrollRef,
children,
}: {
children: ReactNode;
scrollRef?: MutableRefObject<HTMLDivElement | null>;
}) {
return (
<Box grow="Yes" direction="Column">
<Scroll
ref={scrollRef}
variant="Background"
direction="Vertical"
size="300"
hideTrack
visibility="Hover"
>
<div className={css.PageNavContent}>{children}</div>
</Scroll>
</Box>
);
}
export const Page = as<'div'>(({ className, ...props }, ref) => (
<Box
grow="Yes"
direction="Column"
className={classNames(ContainerColor({ variant: 'Surface' }), className)}
{...props}
ref={ref}
/>
));
export const PageHeader = as<'div'>(({ className, ...props }, ref) => (
<Header
as="header"
size="600"
className={classNames(css.PageHeader, className)}
{...props}
ref={ref}
/>
));
export const PageContent = as<'div'>(({ className, ...props }, ref) => (
<div className={classNames(css.PageContent, className)} {...props} ref={ref} />
));
export const PageHeroSection = as<'div', ComponentProps<typeof Box>>(
({ className, ...props }, ref) => (
<Box
direction="Column"
className={classNames(css.PageHeroSection, className)}
{...props}
ref={ref}
/>
)
);
export function PageHero({
icon,
title,
subTitle,
children,
}: {
icon: ReactNode;
title: ReactNode;
subTitle: ReactNode;
children?: ReactNode;
}) {
return (
<Box direction="Column" gap="400">
<Box direction="Column" alignItems="Center" gap="200">
{icon}
</Box>
<Box as="h2" direction="Column" gap="200" alignItems="Center">
<Text align="Center" size="H2">
{title}
</Text>
<Text align="Center" priority="400">
{subTitle}
</Text>
</Box>
{children}
</Box>
);
}
export const PageContentCenter = as<'div'>(({ className, ...props }, ref) => (
<div className={classNames(css.PageContentCenter, className)} {...props} ref={ref} />
));

1
src/app/components/page/index.tsx Normal file
View file

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

69
src/app/components/page/style.css.ts Normal file
View file

@ -0,0 +1,69 @@
import { style } from '@vanilla-extract/css';
import { DefaultReset, color, config, toRem } from 'folds';
export const PageNav = style({
width: toRem(256),
});
export const PageNavHeader = style({
padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
flexShrink: 0,
borderBottomWidth: 1,
selectors: {
'button&': {
cursor: 'pointer',
},
'button&[aria-pressed=true]': {
backgroundColor: color.Background.ContainerActive,
},
'button&:hover, button&:focus-visible': {
backgroundColor: color.Background.ContainerHover,
},
'button&:active': {
backgroundColor: color.Background.ContainerActive,
},
},
});
export const PageNavContent = style({
minHeight: '100%',
padding: config.space.S200,
paddingRight: 0,
paddingBottom: config.space.S700,
});
export const PageHeader = style({
paddingLeft: config.space.S400,
paddingRight: config.space.S200,
borderBottomWidth: config.borderWidth.B300,
});
export const PageContent = style([
DefaultReset,
{
paddingTop: config.space.S400,
paddingLeft: config.space.S400,
paddingRight: 0,
paddingBottom: toRem(100),
},
]);
export const PageHeroSection = style([
DefaultReset,
{
padding: '40px 0',
maxWidth: toRem(466),
width: '100%',
margin: 'auto',
},
]);
export const PageContentCenter = style([
DefaultReset,
{
maxWidth: toRem(964),
width: '100%',
margin: 'auto',
},
]);

14
src/app/components/room-avatar/RoomAvatar.css.ts Normal file
View file

@ -0,0 +1,14 @@
import { style } from '@vanilla-extract/css';
import { color } from 'folds';
export const RoomAvatar = style({
backgroundColor: color.Secondary.Container,
color: color.Secondary.OnContainer,
textTransform: 'capitalize',
selectors: {
'&[data-image-loaded="true"]': {
backgroundColor: 'transparent',
},
},
});

56
src/app/components/room-avatar/RoomAvatar.tsx Normal file
View file

@ -0,0 +1,56 @@
import { JoinRule } from 'matrix-js-sdk';
import { AvatarFallback, AvatarImage, Icon, Icons, color } from 'folds';
import React, { ComponentProps, ReactEventHandler, ReactNode, forwardRef, useState } from 'react';
import * as css from './RoomAvatar.css';
import { joinRuleToIconSrc } from '../../utils/room';
import colorMXID from '../../../util/colorMXID';
type RoomAvatarProps = {
roomId: string;
src?: string;
alt?: string;
renderFallback: () => ReactNode;
};
export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps) {
const [error, setError] = useState(false);
const handleLoad: ReactEventHandler<HTMLImageElement> = (evt) => {
evt.currentTarget.setAttribute('data-image-loaded', 'true');
};
if (!src || error) {
return (
<AvatarFallback
style={{ backgroundColor: colorMXID(roomId ?? ''), color: color.Surface.Container }}
className={css.RoomAvatar}
>
{renderFallback()}
</AvatarFallback>
);
}
return (
<AvatarImage
className={css.RoomAvatar}
src={src}
alt={alt}
onError={() => setError(true)}
onLoad={handleLoad}
draggable={false}
/>
);
}
export const RoomIcon = forwardRef<
SVGSVGElement,
Omit<ComponentProps<typeof Icon>, 'src'> & {
joinRule: JoinRule;
space?: boolean;
}
>(({ joinRule, space, ...props }, ref) => (
<Icon
src={joinRuleToIconSrc(Icons, joinRule, space || false) ?? Icons.Hash}
{...props}
ref={ref}
/>
));

1
src/app/components/room-avatar/index.ts Normal file
View file

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

316
src/app/components/room-card/RoomCard.tsx Normal file
View file

@ -0,0 +1,316 @@
import React, { ReactNode, useCallback, useRef, useState } from 'react';
import { MatrixError, Room } from 'matrix-js-sdk';
import {
Avatar,
Badge,
Box,
Button,
Dialog,
Icon,
Icons,
Overlay,
OverlayBackdrop,
OverlayCenter,
Spinner,
Text,
as,
color,
config,
} from 'folds';
import classNames from 'classnames';
import FocusTrap from 'focus-trap-react';
import * as css from './style.css';
import { RoomAvatar } from '../room-avatar';
import { getMxIdLocalPart } from '../../utils/matrix';
import { nameInitials } from '../../utils/common';
import { millify } from '../../plugins/millify';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
import { onEnterOrSpace, stopPropagation } from '../../utils/keyboard';
import { RoomType, StateEvent } from '../../../types/matrix/room';
import { useJoinedRoomId } from '../../hooks/useJoinedRoomId';
import { useElementSizeObserver } from '../../hooks/useElementSizeObserver';
import { getRoomAvatarUrl, getStateEvent } from '../../utils/room';
import { useStateEventCallback } from '../../hooks/useStateEventCallback';
type GridColumnCount = '1' | '2' | '3';
const getGridColumnCount = (gridWidth: number): GridColumnCount => {
if (gridWidth <= 498) return '1';
if (gridWidth <= 748) return '2';
return '3';
};
const setGridColumnCount = (grid: HTMLElement, count: GridColumnCount): void => {
grid.style.setProperty('grid-template-columns', `repeat(${count}, 1fr)`);
};
export function RoomCardGrid({ children }: { children: ReactNode }) {
const gridRef = useRef<HTMLDivElement>(null);
useElementSizeObserver(
useCallback(() => gridRef.current, []),
useCallback((width, _, target) => setGridColumnCount(target, getGridColumnCount(width)), [])
);
return (
<Box className={css.CardGrid} direction="Row" gap="400" wrap="Wrap" ref={gridRef}>
{children}
</Box>
);
}
export const RoomCardBase = as<'div'>(({ className, ...props }, ref) => (
<Box
direction="Column"
gap="300"
className={classNames(css.RoomCardBase, className)}
{...props}
ref={ref}
/>
));
export const RoomCardName = as<'h6'>(({ ...props }, ref) => (
<Text as="h6" size="H6" truncate {...props} ref={ref} />
));
export const RoomCardTopic = as<'p'>(({ className, ...props }, ref) => (
<Text
as="p"
size="T200"
className={classNames(css.RoomCardTopic, className)}
{...props}
priority="400"
ref={ref}
/>
));
function ErrorDialog({
title,
message,
children,
}: {
title: string;
message: string;
children: (openError: () => void) => ReactNode;
}) {
const [viewError, setViewError] = useState(false);
const closeError = () => setViewError(false);
const openError = () => setViewError(true);
return (
<>
{children(openError)}
<Overlay open={viewError} backdrop={<OverlayBackdrop />}>
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
clickOutsideDeactivates: true,
onDeactivate: closeError,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface">
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
<Box direction="Column" gap="100">
<Text>{title}</Text>
<Text style={{ color: color.Critical.Main }} size="T300" priority="400">
{message}
</Text>
</Box>
<Button size="400" variant="Secondary" fill="Soft" onClick={closeError}>
<Text size="B400">Cancel</Text>
</Button>
</Box>
</Dialog>
</FocusTrap>
</OverlayCenter>
</Overlay>
</>
);
}
type RoomCardProps = {
roomIdOrAlias: string;
allRooms: string[];
avatarUrl?: string;
name?: string;
topic?: string;
memberCount?: number;
roomType?: string;
onView?: (roomId: string) => void;
renderTopicViewer: (name: string, topic: string, requestClose: () => void) => ReactNode;
};
export const RoomCard = as<'div', RoomCardProps>(
(
{
roomIdOrAlias,
allRooms,
avatarUrl,
name,
topic,
memberCount,
roomType,
onView,
renderTopicViewer,
...props
},
ref
) => {
const mx = useMatrixClient();
const joinedRoomId = useJoinedRoomId(allRooms, roomIdOrAlias);
const joinedRoom = mx.getRoom(joinedRoomId);
const [topicEvent, setTopicEvent] = useState(() =>
joinedRoom ? getStateEvent(joinedRoom, StateEvent.RoomTopic) : undefined
);
const fallbackName = getMxIdLocalPart(roomIdOrAlias) ?? roomIdOrAlias;
const fallbackTopic = roomIdOrAlias;
const avatar = joinedRoom
? getRoomAvatarUrl(mx, joinedRoom, 96)
: avatarUrl && mx.mxcUrlToHttp(avatarUrl, 96, 96, 'crop');
const roomName = joinedRoom?.name || name || fallbackName;
const roomTopic =
(topicEvent?.getContent().topic as string) || undefined || topic || fallbackTopic;
const joinedMemberCount = joinedRoom?.getJoinedMemberCount() ?? memberCount;
useStateEventCallback(
mx,
useCallback(
(event) => {
if (
joinedRoom &&
event.getRoomId() === joinedRoom.roomId &&
event.getType() === StateEvent.RoomTopic
) {
setTopicEvent(getStateEvent(joinedRoom, StateEvent.RoomTopic));
}
},
[joinedRoom]
)
);
const [joinState, join] = useAsyncCallback<Room, MatrixError, []>(
useCallback(() => mx.joinRoom(roomIdOrAlias), [mx, roomIdOrAlias])
);
const joining =
joinState.status === AsyncStatus.Loading || joinState.status === AsyncStatus.Success;
const [viewTopic, setViewTopic] = useState(false);
const closeTopic = () => setViewTopic(false);
const openTopic = () => setViewTopic(true);
return (
<RoomCardBase {...props} ref={ref}>
<Box gap="200" justifyContent="SpaceBetween">
<Avatar size="500">
<RoomAvatar
roomId={roomIdOrAlias}
src={avatar ?? undefined}
alt={roomIdOrAlias}
renderFallback={() => (
<Text as="span" size="H3">
{nameInitials(roomName)}
</Text>
)}
/>
</Avatar>
{(roomType === RoomType.Space || joinedRoom?.isSpaceRoom()) && (
<Badge variant="Secondary" fill="Soft" outlined>
<Text size="L400">Space</Text>
</Badge>
)}
</Box>
<Box grow="Yes" direction="Column" gap="100">
<RoomCardName>{roomName}</RoomCardName>
<RoomCardTopic onClick={openTopic} onKeyDown={onEnterOrSpace(openTopic)} tabIndex={0}>
{roomTopic}
</RoomCardTopic>
<Overlay open={viewTopic} backdrop={<OverlayBackdrop />}>
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
clickOutsideDeactivates: true,
onDeactivate: closeTopic,
escapeDeactivates: stopPropagation,
}}
>
{renderTopicViewer(roomName, roomTopic, closeTopic)}
</FocusTrap>
</OverlayCenter>
</Overlay>
</Box>
{typeof joinedMemberCount === 'number' && (
<Box gap="100">
<Icon size="50" src={Icons.User} />
<Text size="T200">{`${millify(joinedMemberCount)} Members`}</Text>
</Box>
)}
{typeof joinedRoomId === 'string' && (
<Button
onClick={onView ? () => onView(joinedRoomId) : undefined}
variant="Secondary"
fill="Soft"
size="300"
>
<Text size="B300" truncate>
View
</Text>
</Button>
)}
{typeof joinedRoomId !== 'string' && joinState.status !== AsyncStatus.Error && (
<Button
onClick={join}
variant="Secondary"
size="300"
disabled={joining}
before={joining && <Spinner size="50" variant="Secondary" fill="Soft" />}
>
<Text size="B300" truncate>
{joining ? 'Joining' : 'Join'}
</Text>
</Button>
)}
{typeof joinedRoomId !== 'string' && joinState.status === AsyncStatus.Error && (
<Box gap="200">
<Button
onClick={join}
className={css.ActionButton}
variant="Critical"
fill="Solid"
size="300"
>
<Text size="B300" truncate>
Retry
</Text>
</Button>
<ErrorDialog
title="Join Error"
message={joinState.error.message || 'Failed to join. Unknown Error.'}
>
{(openError) => (
<Button
onClick={openError}
className={css.ActionButton}
variant="Critical"
fill="Soft"
outlined
size="300"
>
<Text size="B300" truncate>
View Error
</Text>
</Button>
)}
</ErrorDialog>
</Box>
)}
</RoomCardBase>
);
}
);

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

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

36
src/app/components/room-card/style.css.ts Normal file
View file

@ -0,0 +1,36 @@
import { style } from '@vanilla-extract/css';
import { DefaultReset, config } from 'folds';
import { ContainerColor } from '../../styles/ContainerColor.css';
export const CardGrid = style({
display: 'grid',
gridTemplateColumns: 'repeat(3, 1fr)',
gap: config.space.S400,
});
export const RoomCardBase = style([
DefaultReset,
ContainerColor({ variant: 'SurfaceVariant' }),
{
padding: config.space.S500,
borderRadius: config.radii.R500,
},
]);
export const RoomCardTopic = style({
minHeight: `calc(3 * ${config.lineHeight.T200})`,
display: '-webkit-box',
WebkitLineClamp: 3,
WebkitBoxOrient: 'vertical',
overflow: 'hidden',
cursor: 'pointer',
':hover': {
textDecoration: 'underline',
},
});
export const ActionButton = style({
flex: '1 1 0',
minWidth: 1,
});

49
src/app/components/room-intro/RoomIntro.tsx
View file

@ -1,14 +1,19 @@
import React, { useCallback } from 'react';
import { Avatar, AvatarFallback, AvatarImage, Box, Button, Spinner, Text, as, color } from 'folds';
import { Avatar, Box, Button, Spinner, Text, as } from 'folds';
import { Room } from 'matrix-js-sdk';
import { openInviteUser, selectRoom } from '../../../client/action/navigation';
import { useStateEvent } from '../../hooks/useStateEvent';
import { useAtomValue } from 'jotai';
import { openInviteUser } from '../../../client/action/navigation';
import { IRoomCreateContent, Membership, StateEvent } from '../../../types/matrix/room';
import { getMemberDisplayName, getStateEvent } from '../../utils/room';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { getMxIdLocalPart } from '../../utils/matrix';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
import { timeDayMonthYear, timeHourMinute } from '../../utils/time';
import { useRoomNavigate } from '../../hooks/useRoomNavigate';
import { RoomAvatar } from '../room-avatar';
import { nameInitials } from '../../utils/common';
import { useRoomAvatar, useRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
import { mDirectAtom } from '../../state/mDirectList';
export type RoomIntroProps = {
room: Room;
@ -16,21 +21,21 @@ export type RoomIntroProps = {
export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) => {
const mx = useMatrixClient();
const createEvent = getStateEvent(room, StateEvent.RoomCreate);
const avatarEvent = useStateEvent(room, StateEvent.RoomAvatar);
const nameEvent = useStateEvent(room, StateEvent.RoomName);
const topicEvent = useStateEvent(room, StateEvent.RoomTopic);
const createContent = createEvent?.getContent<IRoomCreateContent>();
const { navigateRoom } = useRoomNavigate();
const mDirects = useAtomValue(mDirectAtom);
const createEvent = getStateEvent(room, StateEvent.RoomCreate);
const avatarMxc = useRoomAvatar(room, mDirects.has(room.roomId));
const name = useRoomName(room);
const topic = useRoomTopic(room);
const avatarHttpUrl = avatarMxc ? mx.mxcUrlToHttp(avatarMxc) : undefined;
const createContent = createEvent?.getContent<IRoomCreateContent>();
const ts = createEvent?.getTs();
const creatorId = createEvent?.getSender();
const creatorName =
creatorId && (getMemberDisplayName(room, creatorId) ?? getMxIdLocalPart(creatorId));
const prevRoomId = createContent?.predecessor?.room_id;
const avatarMxc = (avatarEvent?.getContent().url as string) || undefined;
const avatarHttpUrl = avatarMxc ? mx.mxcUrlToHttp(avatarMxc) : undefined;
const name = (nameEvent?.getContent().name || room.name) as string;
const topic = (topicEvent?.getContent().topic as string) || undefined;
const [prevRoomState, joinPrevRoom] = useAsyncCallback(
useCallback(async (roomId: string) => mx.joinRoom(roomId), [mx])
@ -40,18 +45,12 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
<Box direction="Column" grow="Yes" gap="500" {...props} ref={ref}>
<Box>
<Avatar size="500">
{avatarHttpUrl ? (
<AvatarImage src={avatarHttpUrl} alt={name} />
) : (
<AvatarFallback
style={{
backgroundColor: color.SurfaceVariant.Container,
color: color.SurfaceVariant.OnContainer,
}}
>
<Text size="H2">{name[0]}</Text>
</AvatarFallback>
)}
<RoomAvatar
roomId={room.roomId}
src={avatarHttpUrl ?? undefined}
alt={name}
renderFallback={() => <Text size="H2">{nameInitials(name)}</Text>}
/>
</Avatar>
</Box>
<Box direction="Column" gap="300">
@ -82,7 +81,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
{typeof prevRoomId === 'string' &&
(mx.getRoom(prevRoomId)?.getMyMembership() === Membership.Join ? (
<Button
onClick={() => selectRoom(prevRoomId)}
onClick={() => navigateRoom(prevRoomId)}
variant="Success"
size="300"
fill="Soft"

41
src/app/components/room-topic-viewer/RoomTopicViewer.tsx Normal file
View file

@ -0,0 +1,41 @@
import React from 'react';
import { as, Box, Header, Icon, IconButton, Icons, Modal, Scroll, Text } from 'folds';
import classNames from 'classnames';
import Linkify from 'linkify-react';
import * as css from './style.css';
import { LINKIFY_OPTS, scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
export const RoomTopicViewer = as<
'div',
{
name: string;
topic: string;
requestClose: () => void;
}
>(({ name, topic, requestClose, className, ...props }, ref) => (
<Modal
size="300"
flexHeight
className={classNames(css.ModalFlex, className)}
{...props}
ref={ref}
>
<Header className={css.ModalHeader} variant="Surface" size="500">
<Box grow="Yes">
<Text size="H4" truncate>
{name}
</Text>
</Box>
<IconButton size="300" onClick={requestClose} radii="300">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
<Scroll className={css.ModalScroll} size="300" hideTrack>
<Box className={css.ModalContent} direction="Column" gap="100">
<Text size="T300" className={css.ModalTopic} priority="400">
<Linkify options={LINKIFY_OPTS}>{scaleSystemEmoji(topic)}</Linkify>
</Text>
</Box>
</Scroll>
</Modal>
));

1
src/app/components/room-topic-viewer/index.ts Normal file
View file

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

23
src/app/components/room-topic-viewer/style.css.ts Normal file
View file

@ -0,0 +1,23 @@
import { style } from '@vanilla-extract/css';
import { config } from 'folds';
export const ModalFlex = style({
display: 'flex',
flexDirection: 'column',
});
export const ModalHeader = style({
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
borderBottomWidth: config.borderWidth.B300,
});
export const ModalScroll = style({
flexGrow: 1,
});
export const ModalContent = style({
padding: config.space.S400,
paddingRight: config.space.S200,
paddingBottom: config.space.S700,
});
export const ModalTopic = style({
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
});

39
src/app/components/scroll-top-container/ScrollTopContainer.tsx Normal file
View file

@ -0,0 +1,39 @@
import React, { RefObject, useCallback, useState } from 'react';
import { Box, as } from 'folds';
import classNames from 'classnames';
import * as css from './style.css';
import {
getIntersectionObserverEntry,
useIntersectionObserver,
} from '../../hooks/useIntersectionObserver';
export const ScrollTopContainer = as<
'div',
{
scrollRef?: RefObject<HTMLElement>;
anchorRef: RefObject<HTMLElement>;
onVisibilityChange?: (onTop: boolean) => void;
}
>(({ className, scrollRef, anchorRef, onVisibilityChange, ...props }, ref) => {
const [onTop, setOnTop] = useState(true);
useIntersectionObserver(
useCallback(
(intersectionEntries) => {
if (!anchorRef.current) return;
const entry = getIntersectionObserverEntry(anchorRef.current, intersectionEntries);
if (entry) {
setOnTop(entry.isIntersecting);
onVisibilityChange?.(entry.isIntersecting);
}
},
[anchorRef, onVisibilityChange]
),
useCallback(() => ({ root: scrollRef?.current }), [scrollRef]),
useCallback(() => anchorRef.current, [anchorRef])
);
if (onTop) return null;
return <Box className={classNames(css.ScrollTopContainer, className)} {...props} ref={ref} />;
});

1
src/app/components/scroll-top-container/index.ts Normal file
View file

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

20
src/app/components/scroll-top-container/style.css.ts Normal file
View file

@ -0,0 +1,20 @@
import { keyframes, style } from '@vanilla-extract/css';
import { config } from 'folds';
const ScrollContainerAnime = keyframes({
'0%': {
transform: `translate(-50%, -100%) scale(0)`,
},
'100%': {
transform: `translate(-50%, 0) scale(1)`,
},
});
export const ScrollTopContainer = style({
position: 'absolute',
top: config.space.S200,
left: '50%',
transform: 'translateX(-50%)',
zIndex: config.zIndex.Z100,
animation: `${ScrollContainerAnime} 100ms`,
});

18
src/app/components/sequence-card/SequenceCard.tsx Normal file
View file

@ -0,0 +1,18 @@
import React, { ComponentProps } from 'react';
import { Box, as } from 'folds';
import classNames from 'classnames';
import { ContainerColor, ContainerColorVariants } from '../../styles/ContainerColor.css';
import * as css from './style.css';
export const SequenceCard = as<
'div',
ComponentProps<typeof Box> & ContainerColorVariants & css.SequenceCardVariants
>(({ className, variant, firstChild, lastChild, outlined, ...props }, ref) => (
<Box
className={classNames(css.SequenceCard({ outlined }), ContainerColor({ variant }), className)}
data-first-child={firstChild}
data-last-child={lastChild}
{...props}
ref={ref}
/>
));

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

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

52
src/app/components/sequence-card/style.css.ts Normal file
View file

@ -0,0 +1,52 @@
import { createVar } from '@vanilla-extract/css';
import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
import { config } from 'folds';
const outlinedWidth = createVar('0');
export const SequenceCard = recipe({
base: {
vars: {
[outlinedWidth]: '0',
},
borderStyle: 'solid',
borderWidth: outlinedWidth,
borderBottomWidth: 0,
selectors: {
'&:first-child, :not(&) + &': {
borderTopLeftRadius: config.radii.R400,
borderTopRightRadius: config.radii.R400,
},
'&:last-child, &:not(:has(+&))': {
borderBottomLeftRadius: config.radii.R400,
borderBottomRightRadius: config.radii.R400,
borderBottomWidth: outlinedWidth,
},
[`&[data-first-child="true"]`]: {
borderTopLeftRadius: config.radii.R400,
borderTopRightRadius: config.radii.R400,
},
[`&[data-first-child="false"]`]: {
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
},
[`&[data-last-child="true"]`]: {
borderBottomLeftRadius: config.radii.R400,
borderBottomRightRadius: config.radii.R400,
},
[`&[data-last-child="false"]`]: {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
},
},
},
variants: {
outlined: {
true: {
vars: {
[outlinedWidth]: config.borderWidth.B300,
},
},
},
},
});
export type SequenceCardVariants = RecipeVariants<typeof SequenceCard>;

162
src/app/components/sidebar/Sidebar.css.ts
View file

@ -1,6 +1,7 @@
import { style } from '@vanilla-extract/css';
import { createVar, style } from '@vanilla-extract/css';
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
import { color, config, DefaultReset, toRem } from 'folds';
import { color, config, DefaultReset, Disabled, FocusOutline, toRem } from 'folds';
import { ContainerColor } from '../../styles/ContainerColor.css';
export const Sidebar = style([
DefaultReset,
@ -28,13 +29,49 @@ export const SidebarStack = style([
},
]);
const DropLineDist = createVar();
export const DropTarget = style({
vars: {
[DropLineDist]: toRem(-8),
},
selectors: {
'&[data-inside-folder=true]': {
vars: {
[DropLineDist]: toRem(-6),
},
},
'&[data-drop-child=true]': {
outline: `${config.borderWidth.B700} solid ${color.Success.Main}`,
borderRadius: config.radii.R400,
},
'&[data-drop-above=true]::after, &[data-drop-below=true]::after': {
content: '',
display: 'block',
position: 'absolute',
left: toRem(0),
width: '100%',
height: config.borderWidth.B700,
backgroundColor: color.Success.Main,
},
'&[data-drop-above=true]::after': {
top: DropLineDist,
},
'&[data-drop-below=true]::after': {
bottom: DropLineDist,
},
},
});
const PUSH_X = 2;
export const SidebarAvatarBox = recipe({
export const SidebarItem = recipe({
base: [
DefaultReset,
{
minWidth: toRem(42),
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
transition: 'transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97)',
@ -59,6 +96,8 @@ export const SidebarAvatarBox = recipe({
},
},
},
Disabled,
DropTarget,
],
variants: {
active: {
@ -76,26 +115,27 @@ export const SidebarAvatarBox = recipe({
},
},
});
export type SidebarItemVariants = RecipeVariants<typeof SidebarItem>;
export type SidebarAvatarBoxVariants = RecipeVariants<typeof SidebarAvatarBox>;
export const SidebarBadgeBox = recipe({
export const SidebarItemBadge = recipe({
base: [
DefaultReset,
{
pointerEvents: 'none',
position: 'absolute',
zIndex: 1,
lineHeight: 0,
},
],
variants: {
hasCount: {
true: {
top: toRem(-6),
right: toRem(-6),
left: toRem(-6),
},
false: {
top: toRem(-2),
right: toRem(-2),
left: toRem(-2),
},
},
},
@ -103,9 +143,107 @@ export const SidebarBadgeBox = recipe({
hasCount: false,
},
});
export type SidebarItemBadgeVariants = RecipeVariants<typeof SidebarItemBadge>;
export type SidebarBadgeBoxVariants = RecipeVariants<typeof SidebarBadgeBox>;
export const SidebarBadgeOutline = style({
boxShadow: `0 0 0 ${config.borderWidth.B500} ${color.Background.Container}`,
export const SidebarAvatar = recipe({
base: [
{
selectors: {
'button&': {
cursor: 'pointer',
},
},
},
],
variants: {
size: {
'200': {
width: toRem(16),
height: toRem(16),
fontSize: toRem(10),
lineHeight: config.lineHeight.T200,
letterSpacing: config.letterSpacing.T200,
},
'300': {
width: toRem(34),
height: toRem(34),
},
'400': {
width: toRem(42),
height: toRem(42),
},
},
outlined: {
true: {
border: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
},
},
},
defaultVariants: {
size: '400',
},
});
export type SidebarAvatarVariants = RecipeVariants<typeof SidebarAvatar>;
export const SidebarFolder = recipe({
base: [
ContainerColor({ variant: 'Background' }),
{
padding: config.space.S100,
width: toRem(42),
minHeight: toRem(42),
display: 'flex',
flexWrap: 'wrap',
outline: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
position: 'relative',
selectors: {
'button&': {
cursor: 'pointer',
},
},
},
FocusOutline,
DropTarget,
],
variants: {
state: {
Close: {
gap: toRem(2),
borderRadius: config.radii.R400,
},
Open: {
paddingLeft: 0,
paddingRight: 0,
flexDirection: 'column',
alignItems: 'center',
gap: config.space.S200,
borderRadius: config.radii.R500,
},
},
},
defaultVariants: {
state: 'Close',
},
});
export type SidebarFolderVariants = RecipeVariants<typeof SidebarFolder>;
export const SidebarFolderDropTarget = recipe({
base: {
width: '100%',
height: toRem(8),
position: 'absolute',
left: 0,
},
variants: {
position: {
Top: {
top: toRem(-4),
},
Bottom: {
bottom: toRem(-4),
},
},
},
});
export type SidebarFolderDropTargetVariants = RecipeVariants<typeof SidebarFolderDropTarget>;

75
src/app/components/sidebar/SidebarAvatar.tsx
View file

@ -1,75 +0,0 @@
import classNames from 'classnames';
import { as, Avatar, Box, color, config, Text, Tooltip, TooltipProvider } from 'folds';
import React, { forwardRef, MouseEventHandler, ReactNode } from 'react';
import * as css from './Sidebar.css';
const SidebarAvatarBox = as<'div', css.SidebarAvatarBoxVariants>(
({ as: AsSidebarAvatarBox = 'div', className, active, ...props }, ref) => (
<AsSidebarAvatarBox
className={classNames(css.SidebarAvatarBox({ active }), className)}
{...props}
ref={ref}
/>
)
);
export const SidebarAvatar = forwardRef<
HTMLDivElement,
css.SidebarAvatarBoxVariants &
css.SidebarBadgeBoxVariants & {
outlined?: boolean;
avatarChildren: ReactNode;
tooltip: ReactNode | string;
notificationBadge?: (badgeClassName: string) => ReactNode;
onClick?: MouseEventHandler<HTMLButtonElement>;
onContextMenu?: MouseEventHandler<HTMLButtonElement>;
}
>(
(
{
active,
hasCount,
outlined,
avatarChildren,
tooltip,
notificationBadge,
onClick,
onContextMenu,
},
ref
) => (
<SidebarAvatarBox active={active} ref={ref}>
<TooltipProvider
delay={0}
position="Right"
tooltip={
<Tooltip>
<Text size="T300">{tooltip}</Text>
</Tooltip>
}
>
{(avRef) => (
<Avatar
ref={avRef}
as="button"
onClick={onClick}
onContextMenu={onContextMenu}
style={{
border: outlined
? `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`
: undefined,
cursor: 'pointer',
}}
>
{avatarChildren}
</Avatar>
)}
</TooltipProvider>
{notificationBadge && (
<Box className={css.SidebarBadgeBox({ hasCount })}>
{notificationBadge(css.SidebarBadgeOutline)}
</Box>
)}
</SidebarAvatarBox>
)
);

6
src/app/components/sidebar/SidebarContent.tsx
View file

@ -1,5 +1,5 @@
import React, { ReactNode } from 'react';
import { Box, Scroll } from 'folds';
import { Box } from 'folds';
type SidebarContentProps = {
scrollable: ReactNode;
@ -9,9 +9,7 @@ export function SidebarContent({ scrollable, sticky }: SidebarContentProps) {
return (
<>
<Box direction="Column" grow="Yes">
<Scroll variant="Background" size="0">
{scrollable}
</Scroll>
{scrollable}
</Box>
<Box direction="Column" shrink="No">
{sticky}

81
src/app/components/sidebar/SidebarItem.tsx Normal file
View file

@ -0,0 +1,81 @@
import classNames from 'classnames';
import { as, Avatar, Text, Tooltip, TooltipProvider, toRem } from 'folds';
import React, { ComponentProps, ReactNode, RefCallback } from 'react';
import * as css from './Sidebar.css';
export const SidebarItem = as<'div', css.SidebarItemVariants>(
({ as: AsSidebarAvatarBox = 'div', className, active, ...props }, ref) => (
<AsSidebarAvatarBox
className={classNames(css.SidebarItem({ active }), className)}
{...props}
ref={ref}
/>
)
);
export const SidebarItemBadge = as<'div', css.SidebarItemBadgeVariants>(
({ as: AsSidebarBadgeBox = 'div', className, hasCount, ...props }, ref) => (
<AsSidebarBadgeBox
className={classNames(css.SidebarItemBadge({ hasCount }), className)}
{...props}
ref={ref}
/>
)
);
export function SidebarItemTooltip({
tooltip,
children,
}: {
tooltip?: ReactNode | string;
children: (triggerRef: RefCallback<HTMLElement | SVGElement>) => ReactNode;
}) {
if (!tooltip) {
return children(() => undefined);
}
return (
<TooltipProvider
delay={400}
position="Right"
tooltip={
<Tooltip style={{ maxWidth: toRem(280) }}>
<Text size="H5">{tooltip}</Text>
</Tooltip>
}
>
{children}
</TooltipProvider>
);
}
export const SidebarAvatar = as<'div', css.SidebarAvatarVariants & ComponentProps<typeof Avatar>>(
({ className, size, outlined, radii, ...props }, ref) => (
<Avatar
className={classNames(css.SidebarAvatar({ size, outlined }), className)}
radii={radii}
{...props}
ref={ref}
/>
)
);
export const SidebarFolder = as<'div', css.SidebarFolderVariants>(
({ as: AsSidebarFolder = 'div', className, state, ...props }, ref) => (
<AsSidebarFolder
className={classNames(css.SidebarFolder({ state }), className)}
{...props}
ref={ref}
/>
)
);
export const SidebarFolderDropTarget = as<'div', css.SidebarFolderDropTargetVariants>(
({ as: AsSidebarFolderDropTarget = 'div', className, position, ...props }, ref) => (
<AsSidebarFolderDropTarget
className={classNames(css.SidebarFolderDropTarget({ position }), className)}
{...props}
ref={ref}
/>
)
);

2
src/app/components/sidebar/index.ts
View file

@ -1,5 +1,5 @@
export * from './Sidebar';
export * from './SidebarAvatar';
export * from './SidebarItem';
export * from './SidebarContent';
export * from './SidebarStack';
export * from './SidebarStackSeparator';

7
src/app/components/typing-indicator/TypingIndicator.css.ts
View file

@ -17,10 +17,14 @@ export const TypingDot = recipe({
backgroundColor: 'currentColor',
borderRadius: '50%',
transform: 'translateY(15%)',
animation: `${TypingDotAnime} 0.6s infinite alternate`,
},
],
variants: {
animated: {
true: {
animation: `${TypingDotAnime} 0.6s infinite alternate`,
},
},
size: {
'300': {
width: toRem(4),
@ -45,5 +49,6 @@ export const TypingDot = recipe({
},
defaultVariants: {
size: '400',
animated: true,
},
});

31
src/app/components/typing-indicator/TypingIndicator.tsx
View file

@ -4,19 +4,22 @@ import * as css from './TypingIndicator.css';
export type TypingIndicatorProps = {
size?: '300' | '400';
disableAnimation?: boolean;
};
export const TypingIndicator = as<'div', TypingIndicatorProps>(({ size, style, ...props }, ref) => (
<Box
as="span"
alignItems="Center"
shrink="No"
style={{ gap: toRem(size === '300' ? 1 : 2), ...style }}
{...props}
ref={ref}
>
<span className={css.TypingDot({ size, index: '0' })} />
<span className={css.TypingDot({ size, index: '1' })} />
<span className={css.TypingDot({ size, index: '2' })} />
</Box>
));
export const TypingIndicator = as<'div', TypingIndicatorProps>(
({ size, disableAnimation, style, ...props }, ref) => (
<Box
as="span"
alignItems="Center"
shrink="No"
style={{ gap: toRem(size === '300' ? 1 : 2), ...style }}
{...props}
ref={ref}
>
<span className={css.TypingDot({ size, index: '0', animated: !disableAnimation })} />
<span className={css.TypingDot({ size, index: '1', animated: !disableAnimation })} />
<span className={css.TypingDot({ size, index: '2', animated: !disableAnimation })} />
</Box>
)
);

36
src/app/components/unread-badge/UnreadBadge.tsx Normal file
View file

@ -0,0 +1,36 @@
import React, { CSSProperties, ReactNode } from 'react';
import { Box, Badge, toRem, Text } from 'folds';
import { millify } from '../../plugins/millify';
type UnreadBadgeProps = {
highlight?: boolean;
count: number;
};
const styles: CSSProperties = {
minWidth: toRem(16),
};
export function UnreadBadgeCenter({ children }: { children: ReactNode }) {
return (
<Box as="span" style={styles} shrink="No" alignItems="Center" justifyContent="Center">
{children}
</Box>
);
}
export function UnreadBadge({ highlight, count }: UnreadBadgeProps) {
return (
<Badge
variant={highlight ? 'Success' : 'Secondary'}
size={count > 0 ? '400' : '200'}
fill="Solid"
radii="Pill"
outlined={false}
>
{count > 0 && (
<Text as="span" size="L400">
{millify(count)}
</Text>
)}
</Badge>
);
}

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

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

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