Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
19cf700d61 | ||
|
0c5ff65639 | ||
|
|
1206ffced2 | ||
|
|
5fbd0c13db | ||
|
36a8ce5561 | ||
|
|
dbadbe34b3 | ||
|
|
2b8b0dcffd | ||
|
|
b7e5e0db3e | ||
|
|
5c94471956 | ||
|
|
ccfe30cd68 | ||
|
2c7038cd1f |
13
.github/renovate.json
vendored
13
.github/renovate.json
vendored
@@ -1,15 +1,14 @@
|
|||||||
{
|
{
|
||||||
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
||||||
"extends": [
|
"extends": ["config:recommended", ":dependencyDashboardApproval"],
|
||||||
"config:base",
|
"labels": ["Dependencies"],
|
||||||
":dependencyDashboardApproval"
|
|
||||||
],
|
|
||||||
"labels": [ "Dependencies" ],
|
|
||||||
"packageRules": [
|
"packageRules": [
|
||||||
{
|
{
|
||||||
"matchUpdateTypes": [ "lockFileMaintenance" ]
|
"matchUpdateTypes": ["lockFileMaintenance"]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"lockFileMaintenance": { "enabled": true },
|
"lockFileMaintenance": {
|
||||||
|
"enabled": true
|
||||||
|
},
|
||||||
"dependencyDashboard": true
|
"dependencyDashboard": true
|
||||||
}
|
}
|
||||||
33
README.md
33
README.md
@@ -19,27 +19,22 @@ A Matrix client focusing primarily on simple, elegant and secure interface. The
|
|||||||
<img align="center" src="https://raw.githubusercontent.com/cinnyapp/cinny-site/main/assets/preview2-light.png" height="380">
|
<img align="center" src="https://raw.githubusercontent.com/cinnyapp/cinny-site/main/assets/preview2-light.png" height="380">
|
||||||
|
|
||||||
## Getting started
|
## Getting started
|
||||||
* Web app is available at https://app.cinny.in and gets updated on each new release. The `dev` branch is continuously deployed at https://dev.cinny.in but keep in mind that it could have things broken.
|
The web app is available at [app.cinny.in](https://app.cinny.in/) and gets updated on each new release. The `dev` branch is continuously deployed at [dev.cinny.in](https://dev.cinny.in) but keep in mind that it could have things broken.
|
||||||
|
|
||||||
* You can also download our desktop app from [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).
|
You can also download our desktop app from the [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).
|
||||||
|
|
||||||
* To host Cinny on your own, download tarball of the app from [GitHub release](https://github.com/cinnyapp/cinny/releases/latest).
|
## Self-hosting
|
||||||
You can serve the application with a webserver of your choice by simply copying `dist/` directory to the webroot.
|
To host Cinny on your own, simply download the tarball from [GitHub releases](https://github.com/cinnyapp/cinny/releases/latest), and serve the files from `dist/` using your preferred webserver. Alternatively, you can just pull the docker image from [DockerHub](https://hub.docker.com/r/ajbura/cinny) or [GitHub Container Registry](https://github.com/cinnyapp/cinny/pkgs/container/cinny).
|
||||||
To set default Homeserver on login, register and Explore Community page, place a customized [`config.json`](config.json) in webroot of your choice.
|
|
||||||
You will also need to setup redirects to serve the assests. An example setting of redirects for netlify is done in [`netlify.toml`](netlify.toml). You can also set `hashRouter.enabled = true` in [`config.json`](config.json) if you have trouble setting redirects.
|
|
||||||
To deploy on subdirectory, you need to rebuild the app youself after updating the `base` path in [`build.config.ts`](build.config.ts). For example, if you want to deploy on `https://cinny.in/app`, then change `base: '/app'`.
|
|
||||||
|
|
||||||
* Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by:
|
* The default homeservers and explore pages are defined in [`config.json`](config.json).
|
||||||
```
|
|
||||||
docker pull ajbura/cinny
|
|
||||||
```
|
|
||||||
or [ghcr image](https://github.com/cinnyapp/cinny/pkgs/container/cinny) by:
|
|
||||||
```
|
|
||||||
docker pull ghcr.io/cinnyapp/cinny:latest
|
|
||||||
```
|
|
||||||
|
|
||||||
<details>
|
* You need to set up redirects to serve the assests. Example configurations; [netlify](netlify.toml), [nginx](contrib/nginx/cinny.domain.tld.conf), [caddy](contrib/caddy/caddyfile).
|
||||||
<summary>PGP Public Key to verify tarball</summary>
|
* If you have trouble configuring redirects you can [enable hash routing](config.json#L35) — the url in the browser will have a `/#/` between the domain and open channel (ie. `app.cinny.in/#/home/` instead of `app.cinny.in/home/`) but you won't have to configure your webserver.
|
||||||
|
|
||||||
|
* To deploy on subdirectory, you need to rebuild the app youself after updating the `base` path in [`build.config.ts`](build.config.ts).
|
||||||
|
* For example, if you want to deploy on `https://cinny.in/app`, then set `base: '/app'`.
|
||||||
|
|
||||||
|
<details><summary><b>PGP Public Key to verify tarball</b></summary>
|
||||||
|
|
||||||
```
|
```
|
||||||
-----BEGIN PGP PUBLIC KEY BLOCK-----
|
-----BEGIN PGP PUBLIC KEY BLOCK-----
|
||||||
@@ -87,8 +82,8 @@ mxFo+ioe/ABCufSmyqFye0psX3Sp
|
|||||||
</details>
|
</details>
|
||||||
|
|
||||||
## Local development
|
## Local development
|
||||||
> We recommend using a version manager as versions change very quickly. You will likely need to switch
|
> [!TIP]
|
||||||
between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Recommended nodejs version is Iron LTS (v20).
|
> We recommend using a version manager as versions change very quickly. You will likely need to switch between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Recommended nodejs version is Iron LTS (v20).
|
||||||
|
|
||||||
Execute the following commands to start a development server:
|
Execute the following commands to start a development server:
|
||||||
```sh
|
```sh
|
||||||
|
|||||||
6
contrib/caddy/caddyfile
Normal file
6
contrib/caddy/caddyfile
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
cinny.domain.tld {
|
||||||
|
@nativeRouter not file {path} /
|
||||||
|
rewrite @nativeRouter {http.matchers.file.relative}
|
||||||
|
root * /path/to/caddy/dist
|
||||||
|
file_server
|
||||||
|
}
|
||||||
120
package-lock.json
generated
120
package-lock.json
generated
@@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "cinny",
|
"name": "cinny",
|
||||||
"version": "4.4.0",
|
"version": "4.5.0",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "cinny",
|
"name": "cinny",
|
||||||
"version": "4.4.0",
|
"version": "4.5.0",
|
||||||
"license": "AGPL-3.0-only",
|
"license": "AGPL-3.0-only",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@atlaskit/pragmatic-drag-and-drop": "1.1.6",
|
"@atlaskit/pragmatic-drag-and-drop": "1.1.6",
|
||||||
@@ -62,9 +62,10 @@
|
|||||||
"react-range": "1.8.14",
|
"react-range": "1.8.14",
|
||||||
"react-router-dom": "6.20.0",
|
"react-router-dom": "6.20.0",
|
||||||
"sanitize-html": "2.12.1",
|
"sanitize-html": "2.12.1",
|
||||||
"slate": "0.94.1",
|
"slate": "0.112.0",
|
||||||
"slate-history": "0.93.0",
|
"slate-dom": "0.112.2",
|
||||||
"slate-react": "0.98.4",
|
"slate-history": "0.110.3",
|
||||||
|
"slate-react": "0.112.1",
|
||||||
"tippy.js": "6.3.7",
|
"tippy.js": "6.3.7",
|
||||||
"ua-parser-js": "1.0.35"
|
"ua-parser-js": "1.0.35"
|
||||||
},
|
},
|
||||||
@@ -73,6 +74,7 @@
|
|||||||
"@rollup/plugin-inject": "5.0.3",
|
"@rollup/plugin-inject": "5.0.3",
|
||||||
"@rollup/plugin-wasm": "6.1.1",
|
"@rollup/plugin-wasm": "6.1.1",
|
||||||
"@types/file-saver": "2.0.5",
|
"@types/file-saver": "2.0.5",
|
||||||
|
"@types/is-hotkey": "0.1.10",
|
||||||
"@types/node": "18.11.18",
|
"@types/node": "18.11.18",
|
||||||
"@types/prismjs": "1.26.0",
|
"@types/prismjs": "1.26.0",
|
||||||
"@types/react": "18.2.39",
|
"@types/react": "18.2.39",
|
||||||
@@ -4598,7 +4600,9 @@
|
|||||||
"node_modules/@types/is-hotkey": {
|
"node_modules/@types/is-hotkey": {
|
||||||
"version": "0.1.10",
|
"version": "0.1.10",
|
||||||
"resolved": "https://registry.npmjs.org/@types/is-hotkey/-/is-hotkey-0.1.10.tgz",
|
"resolved": "https://registry.npmjs.org/@types/is-hotkey/-/is-hotkey-0.1.10.tgz",
|
||||||
"integrity": "sha512-RvC8KMw5BCac1NvRRyaHgMMEtBaZ6wh0pyPTBu7izn4Sj/AX9Y4aXU5c7rX8PnM/knsuUpC1IeoBkANtxBypsQ=="
|
"integrity": "sha512-RvC8KMw5BCac1NvRRyaHgMMEtBaZ6wh0pyPTBu7izn4Sj/AX9Y4aXU5c7rX8PnM/knsuUpC1IeoBkANtxBypsQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/@types/json-schema": {
|
"node_modules/@types/json-schema": {
|
||||||
"version": "7.0.15",
|
"version": "7.0.15",
|
||||||
@@ -4612,11 +4616,6 @@
|
|||||||
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
|
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/@types/lodash": {
|
|
||||||
"version": "4.17.14",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.14.tgz",
|
|
||||||
"integrity": "sha512-jsxagdikDiDBeIRaPYtArcT8my4tN1og7MtMRquFT3XNA6axxyHDRUemqDz/taRDdOUn0GnGHRCuff4q48sW9A=="
|
|
||||||
},
|
|
||||||
"node_modules/@types/node": {
|
"node_modules/@types/node": {
|
||||||
"version": "18.11.18",
|
"version": "18.11.18",
|
||||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
|
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
|
||||||
@@ -5797,9 +5796,10 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/compute-scroll-into-view": {
|
"node_modules/compute-scroll-into-view": {
|
||||||
"version": "1.0.20",
|
"version": "3.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
|
"resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.1.tgz",
|
||||||
"integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg=="
|
"integrity": "sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==",
|
||||||
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/computed-style": {
|
"node_modules/computed-style": {
|
||||||
"version": "0.1.4",
|
"version": "0.1.4",
|
||||||
@@ -8145,7 +8145,8 @@
|
|||||||
"node_modules/is-hotkey": {
|
"node_modules/is-hotkey": {
|
||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.2.0.tgz",
|
||||||
"integrity": "sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw=="
|
"integrity": "sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==",
|
||||||
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/is-map": {
|
"node_modules/is-map": {
|
||||||
"version": "2.0.3",
|
"version": "2.0.3",
|
||||||
@@ -10225,11 +10226,12 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/scroll-into-view-if-needed": {
|
"node_modules/scroll-into-view-if-needed": {
|
||||||
"version": "2.2.31",
|
"version": "3.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
|
"resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
|
||||||
"integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
|
"integrity": "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==",
|
||||||
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"compute-scroll-into-view": "^1.0.20"
|
"compute-scroll-into-view": "^3.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/sdp-transform": {
|
"node_modules/sdp-transform": {
|
||||||
@@ -10458,19 +10460,39 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/slate": {
|
"node_modules/slate": {
|
||||||
"version": "0.94.1",
|
"version": "0.112.0",
|
||||||
"resolved": "https://registry.npmjs.org/slate/-/slate-0.94.1.tgz",
|
"resolved": "https://registry.npmjs.org/slate/-/slate-0.112.0.tgz",
|
||||||
"integrity": "sha512-GH/yizXr1ceBoZ9P9uebIaHe3dC/g6Plpf9nlUwnvoyf6V1UOYrRwkabtOCd3ZfIGxomY4P7lfgLr7FPH8/BKA==",
|
"integrity": "sha512-PRnfFgDA3tSop4OH47zu4M1R4Uuhm/AmASu29Qp7sGghVFb713kPBKEnSf1op7Lx/nCHkRlCa3ThfHtCBy+5Yw==",
|
||||||
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"immer": "^9.0.6",
|
"immer": "^10.0.3",
|
||||||
"is-plain-object": "^5.0.0",
|
"is-plain-object": "^5.0.0",
|
||||||
"tiny-warning": "^1.0.3"
|
"tiny-warning": "^1.0.3"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/slate-dom": {
|
||||||
|
"version": "0.112.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/slate-dom/-/slate-dom-0.112.2.tgz",
|
||||||
|
"integrity": "sha512-cozITMlpcBxrov854reM6+TooiHiqpfM/nZPrnjpN1wSiDsAQmYbWUyftC+jlwcpFj80vywfDHzlG6hXIc5h6A==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@juggle/resize-observer": "^3.4.0",
|
||||||
|
"direction": "^1.0.4",
|
||||||
|
"is-hotkey": "^0.2.0",
|
||||||
|
"is-plain-object": "^5.0.0",
|
||||||
|
"lodash": "^4.17.21",
|
||||||
|
"scroll-into-view-if-needed": "^3.1.0",
|
||||||
|
"tiny-invariant": "1.3.1"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"slate": ">=0.99.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/slate-history": {
|
"node_modules/slate-history": {
|
||||||
"version": "0.93.0",
|
"version": "0.110.3",
|
||||||
"resolved": "https://registry.npmjs.org/slate-history/-/slate-history-0.93.0.tgz",
|
"resolved": "https://registry.npmjs.org/slate-history/-/slate-history-0.110.3.tgz",
|
||||||
"integrity": "sha512-Gr1GMGPipRuxIz41jD2/rbvzPj8eyar56TVMyJBvBeIpQSSjNISssvGNDYfJlSWM8eaRqf6DAcxMKzsLCYeX6g==",
|
"integrity": "sha512-sgdff4Usdflmw5ZUbhDkxFwCBQ2qlDKMMkF93w66KdV48vHOgN2BmLrf+2H8SdX8PYIpP/cTB0w8qWC2GwhDVA==",
|
||||||
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"is-plain-object": "^5.0.0"
|
"is-plain-object": "^5.0.0"
|
||||||
},
|
},
|
||||||
@@ -10479,30 +10501,35 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/slate-react": {
|
"node_modules/slate-react": {
|
||||||
"version": "0.98.4",
|
"version": "0.112.1",
|
||||||
"resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.98.4.tgz",
|
"resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.112.1.tgz",
|
||||||
"integrity": "sha512-8Of3v9hFuX8rIRc86LuuBhU9t8ps+9ARKL4yyhCrKQYZ93Ep/LFA3GvPGvtf3zYuVadZ8tkhRH8tbHOGNAndLw==",
|
"integrity": "sha512-V9b+waxPweXqAkSQmKQ1afG4Me6nVQACPpxQtHPIX02N7MXa5f5WilYv+bKt7vKKw+IZC2F0Gjzhv5BekVgP/A==",
|
||||||
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@juggle/resize-observer": "^3.4.0",
|
"@juggle/resize-observer": "^3.4.0",
|
||||||
"@types/is-hotkey": "^0.1.1",
|
"direction": "^1.0.4",
|
||||||
"@types/lodash": "^4.14.149",
|
"is-hotkey": "^0.2.0",
|
||||||
"direction": "^1.0.3",
|
|
||||||
"is-hotkey": "^0.1.6",
|
|
||||||
"is-plain-object": "^5.0.0",
|
"is-plain-object": "^5.0.0",
|
||||||
"lodash": "^4.17.4",
|
"lodash": "^4.17.21",
|
||||||
"scroll-into-view-if-needed": "^2.2.20",
|
"scroll-into-view-if-needed": "^3.1.0",
|
||||||
"tiny-invariant": "1.0.6"
|
"tiny-invariant": "1.3.1"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=16.8.0",
|
"react": ">=18.2.0",
|
||||||
"react-dom": ">=16.8.0",
|
"react-dom": ">=18.2.0",
|
||||||
"slate": ">=0.65.3"
|
"slate": ">=0.99.0",
|
||||||
|
"slate-dom": ">=0.110.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/slate-react/node_modules/is-hotkey": {
|
"node_modules/slate/node_modules/immer": {
|
||||||
"version": "0.1.8",
|
"version": "10.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.1.8.tgz",
|
"resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
|
||||||
"integrity": "sha512-qs3NZ1INIS+H+yeo7cD9pDfwYV/jqRh1JG9S9zYrNudkoUQg7OL7ziXqRKu+InFjUIDoP2o6HIkLYMh1pcWgyQ=="
|
"integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/immer"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"node_modules/smob": {
|
"node_modules/smob": {
|
||||||
"version": "1.5.0",
|
"version": "1.5.0",
|
||||||
@@ -10866,9 +10893,10 @@
|
|||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/tiny-invariant": {
|
"node_modules/tiny-invariant": {
|
||||||
"version": "1.0.6",
|
"version": "1.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
|
||||||
"integrity": "sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA=="
|
"integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
|
||||||
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/tiny-warning": {
|
"node_modules/tiny-warning": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
|
|||||||
10
package.json
10
package.json
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "cinny",
|
"name": "cinny",
|
||||||
"version": "4.4.0",
|
"version": "4.5.0",
|
||||||
"description": "Yet another matrix client",
|
"description": "Yet another matrix client",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
@@ -73,9 +73,10 @@
|
|||||||
"react-range": "1.8.14",
|
"react-range": "1.8.14",
|
||||||
"react-router-dom": "6.20.0",
|
"react-router-dom": "6.20.0",
|
||||||
"sanitize-html": "2.12.1",
|
"sanitize-html": "2.12.1",
|
||||||
"slate": "0.94.1",
|
"slate": "0.112.0",
|
||||||
"slate-history": "0.93.0",
|
"slate-dom": "0.112.2",
|
||||||
"slate-react": "0.98.4",
|
"slate-history": "0.110.3",
|
||||||
|
"slate-react": "0.112.1",
|
||||||
"tippy.js": "6.3.7",
|
"tippy.js": "6.3.7",
|
||||||
"ua-parser-js": "1.0.35"
|
"ua-parser-js": "1.0.35"
|
||||||
},
|
},
|
||||||
@@ -84,6 +85,7 @@
|
|||||||
"@rollup/plugin-inject": "5.0.3",
|
"@rollup/plugin-inject": "5.0.3",
|
||||||
"@rollup/plugin-wasm": "6.1.1",
|
"@rollup/plugin-wasm": "6.1.1",
|
||||||
"@types/file-saver": "2.0.5",
|
"@types/file-saver": "2.0.5",
|
||||||
|
"@types/is-hotkey": "0.1.10",
|
||||||
"@types/node": "18.11.18",
|
"@types/node": "18.11.18",
|
||||||
"@types/prismjs": "1.26.0",
|
"@types/prismjs": "1.26.0",
|
||||||
"@types/react": "18.2.39",
|
"@types/react": "18.2.39",
|
||||||
|
|||||||
@@ -31,8 +31,11 @@ export const TextViewerContent = style([
|
|||||||
export const TextViewerPre = style([
|
export const TextViewerPre = style([
|
||||||
DefaultReset,
|
DefaultReset,
|
||||||
{
|
{
|
||||||
padding: config.space.S600,
|
|
||||||
whiteSpace: 'pre-wrap',
|
whiteSpace: 'pre-wrap',
|
||||||
wordBreak: 'break-word',
|
wordBreak: 'break-word',
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
export const TextViewerPrePadding = style({
|
||||||
|
padding: config.space.S600,
|
||||||
|
});
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
|
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
|
||||||
import React, { Suspense, lazy } from 'react';
|
import React, { ComponentProps, HTMLAttributes, Suspense, forwardRef, lazy } from 'react';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { Box, Chip, Header, Icon, IconButton, Icons, Scroll, Text, as } from 'folds';
|
import { Box, Chip, Header, Icon, IconButton, Icons, Scroll, Text, as } from 'folds';
|
||||||
import { ErrorBoundary } from 'react-error-boundary';
|
import { ErrorBoundary } from 'react-error-boundary';
|
||||||
@@ -8,6 +8,29 @@ import { copyToClipboard } from '../../utils/dom';
|
|||||||
|
|
||||||
const ReactPrism = lazy(() => import('../../plugins/react-prism/ReactPrism'));
|
const ReactPrism = lazy(() => import('../../plugins/react-prism/ReactPrism'));
|
||||||
|
|
||||||
|
type TextViewerContentProps = {
|
||||||
|
text: string;
|
||||||
|
langName: string;
|
||||||
|
size?: ComponentProps<typeof Text>['size'];
|
||||||
|
} & HTMLAttributes<HTMLPreElement>;
|
||||||
|
export const TextViewerContent = forwardRef<HTMLPreElement, TextViewerContentProps>(
|
||||||
|
({ text, langName, size, className, ...props }, ref) => (
|
||||||
|
<Text
|
||||||
|
as="pre"
|
||||||
|
size={size}
|
||||||
|
className={classNames(css.TextViewerPre, `language-${langName}`, className)}
|
||||||
|
{...props}
|
||||||
|
ref={ref}
|
||||||
|
>
|
||||||
|
<ErrorBoundary fallback={<code>{text}</code>}>
|
||||||
|
<Suspense fallback={<code>{text}</code>}>
|
||||||
|
<ReactPrism>{(codeRef) => <code ref={codeRef}>{text}</code>}</ReactPrism>
|
||||||
|
</Suspense>
|
||||||
|
</ErrorBoundary>
|
||||||
|
</Text>
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
export type TextViewerProps = {
|
export type TextViewerProps = {
|
||||||
name: string;
|
name: string;
|
||||||
text: string;
|
text: string;
|
||||||
@@ -43,6 +66,7 @@ export const TextViewer = as<'div', TextViewerProps>(
|
|||||||
</Chip>
|
</Chip>
|
||||||
</Box>
|
</Box>
|
||||||
</Header>
|
</Header>
|
||||||
|
|
||||||
<Box
|
<Box
|
||||||
grow="Yes"
|
grow="Yes"
|
||||||
className={css.TextViewerContent}
|
className={css.TextViewerContent}
|
||||||
@@ -50,13 +74,11 @@ export const TextViewer = as<'div', TextViewerProps>(
|
|||||||
alignItems="Center"
|
alignItems="Center"
|
||||||
>
|
>
|
||||||
<Scroll hideTrack variant="Background" visibility="Hover">
|
<Scroll hideTrack variant="Background" visibility="Hover">
|
||||||
<Text as="pre" className={classNames(css.TextViewerPre, `language-${langName}`)}>
|
<TextViewerContent
|
||||||
<ErrorBoundary fallback={<code>{text}</code>}>
|
className={css.TextViewerPrePadding}
|
||||||
<Suspense fallback={<code>{text}</code>}>
|
text={text}
|
||||||
<ReactPrism>{(codeRef) => <code ref={codeRef}>{text}</code>}</ReactPrism>
|
langName={langName}
|
||||||
</Suspense>
|
/>
|
||||||
</ErrorBoundary>
|
|
||||||
</Text>
|
|
||||||
</Scroll>
|
</Scroll>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import React, { useCallback, useEffect } from 'react';
|
import React, { useEffect } from 'react';
|
||||||
import { Chip, Icon, IconButton, Icons, Text, Tooltip, TooltipProvider, color } from 'folds';
|
import { Box, Chip, Icon, IconButton, Icons, Text, color, config, toRem } from 'folds';
|
||||||
import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard';
|
import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard';
|
||||||
import { UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
|
import { UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
|
||||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||||
@@ -10,11 +10,60 @@ import {
|
|||||||
TUploadItem,
|
TUploadItem,
|
||||||
TUploadMetadata,
|
TUploadMetadata,
|
||||||
} from '../../state/room/roomInputDrafts';
|
} from '../../state/room/roomInputDrafts';
|
||||||
|
import { useObjectURL } from '../../hooks/useObjectURL';
|
||||||
|
|
||||||
|
type ImagePreviewProps = { fileItem: TUploadItem; onSpoiler: (marked: boolean) => void };
|
||||||
|
function ImagePreview({ fileItem, onSpoiler }: ImagePreviewProps) {
|
||||||
|
const { originalFile, metadata } = fileItem;
|
||||||
|
const fileUrl = useObjectURL(originalFile);
|
||||||
|
|
||||||
|
return fileUrl ? (
|
||||||
|
<Box
|
||||||
|
style={{
|
||||||
|
borderRadius: config.radii.R300,
|
||||||
|
overflow: 'hidden',
|
||||||
|
backgroundColor: 'black',
|
||||||
|
position: 'relative',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
style={{
|
||||||
|
objectFit: 'contain',
|
||||||
|
width: '100%',
|
||||||
|
height: toRem(152),
|
||||||
|
filter: fileItem.metadata.markedAsSpoiler ? 'blur(44px)' : undefined,
|
||||||
|
}}
|
||||||
|
src={fileUrl}
|
||||||
|
alt={originalFile.name}
|
||||||
|
/>
|
||||||
|
<Box
|
||||||
|
justifyContent="End"
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: config.space.S100,
|
||||||
|
left: config.space.S100,
|
||||||
|
right: config.space.S100,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Chip
|
||||||
|
variant={metadata.markedAsSpoiler ? 'Warning' : 'Secondary'}
|
||||||
|
fill="Soft"
|
||||||
|
radii="Pill"
|
||||||
|
aria-pressed={metadata.markedAsSpoiler}
|
||||||
|
before={<Icon src={Icons.EyeBlind} size="50" />}
|
||||||
|
onClick={() => onSpoiler(!metadata.markedAsSpoiler)}
|
||||||
|
>
|
||||||
|
<Text size="B300">Spoiler</Text>
|
||||||
|
</Chip>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
) : null;
|
||||||
|
}
|
||||||
|
|
||||||
type UploadCardRendererProps = {
|
type UploadCardRendererProps = {
|
||||||
isEncrypted?: boolean;
|
isEncrypted?: boolean;
|
||||||
fileItem: TUploadItem;
|
fileItem: TUploadItem;
|
||||||
setMetadata: (metadata: TUploadMetadata) => void;
|
setMetadata: (fileItem: TUploadItem, metadata: TUploadMetadata) => void;
|
||||||
onRemove: (file: TUploadContent) => void;
|
onRemove: (file: TUploadContent) => void;
|
||||||
onComplete?: (upload: UploadSuccess) => void;
|
onComplete?: (upload: UploadSuccess) => void;
|
||||||
};
|
};
|
||||||
@@ -33,9 +82,9 @@ export function UploadCardRenderer({
|
|||||||
|
|
||||||
if (upload.status === UploadStatus.Idle) startUpload();
|
if (upload.status === UploadStatus.Idle) startUpload();
|
||||||
|
|
||||||
const toggleSpoiler = useCallback(() => {
|
const handleSpoiler = (marked: boolean) => {
|
||||||
setMetadata({ ...metadata, markedAsSpoiler: !metadata.markedAsSpoiler });
|
setMetadata(fileItem, { ...metadata, markedAsSpoiler: marked });
|
||||||
}, [setMetadata, metadata]);
|
};
|
||||||
|
|
||||||
const removeUpload = () => {
|
const removeUpload = () => {
|
||||||
cancelUpload();
|
cancelUpload();
|
||||||
@@ -66,31 +115,6 @@ export function UploadCardRenderer({
|
|||||||
<Text size="B300">Retry</Text>
|
<Text size="B300">Retry</Text>
|
||||||
</Chip>
|
</Chip>
|
||||||
)}
|
)}
|
||||||
{file.type.startsWith('image') && (
|
|
||||||
<TooltipProvider
|
|
||||||
tooltip={
|
|
||||||
<Tooltip variant="SurfaceVariant">
|
|
||||||
<Text>Mark as Spoiler</Text>
|
|
||||||
</Tooltip>
|
|
||||||
}
|
|
||||||
position="Top"
|
|
||||||
align="Center"
|
|
||||||
>
|
|
||||||
{(triggerRef) => (
|
|
||||||
<IconButton
|
|
||||||
ref={triggerRef}
|
|
||||||
onClick={toggleSpoiler}
|
|
||||||
aria-label="Mark as Spoiler"
|
|
||||||
variant="SurfaceVariant"
|
|
||||||
radii="Pill"
|
|
||||||
size="300"
|
|
||||||
aria-pressed={metadata.markedAsSpoiler}
|
|
||||||
>
|
|
||||||
<Icon src={Icons.EyeBlind} size="200" />
|
|
||||||
</IconButton>
|
|
||||||
)}
|
|
||||||
</TooltipProvider>
|
|
||||||
)}
|
|
||||||
<IconButton
|
<IconButton
|
||||||
onClick={removeUpload}
|
onClick={removeUpload}
|
||||||
aria-label="Cancel Upload"
|
aria-label="Cancel Upload"
|
||||||
@@ -104,6 +128,9 @@ export function UploadCardRenderer({
|
|||||||
}
|
}
|
||||||
bottom={
|
bottom={
|
||||||
<>
|
<>
|
||||||
|
{fileItem.originalFile.type.startsWith('image') && (
|
||||||
|
<ImagePreview fileItem={fileItem} onSpoiler={handleSpoiler} />
|
||||||
|
)}
|
||||||
{upload.status === UploadStatus.Idle && (
|
{upload.status === UploadStatus.Idle && (
|
||||||
<UploadCardProgress sentBytes={0} totalBytes={file.size} />
|
<UploadCardProgress sentBytes={0} totalBytes={file.size} />
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -39,6 +39,8 @@ import { getMatrixToRoom } from '../../plugins/matrix-to';
|
|||||||
import { getCanonicalAliasOrRoomId, isRoomAlias } from '../../utils/matrix';
|
import { getCanonicalAliasOrRoomId, isRoomAlias } from '../../utils/matrix';
|
||||||
import { getViaServers } from '../../plugins/via-servers';
|
import { getViaServers } from '../../plugins/via-servers';
|
||||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||||
|
import { useSetting } from '../../state/hooks/settings';
|
||||||
|
import { settingsAtom } from '../../state/settings';
|
||||||
|
|
||||||
type RoomNavItemMenuProps = {
|
type RoomNavItemMenuProps = {
|
||||||
room: Room;
|
room: Room;
|
||||||
@@ -47,13 +49,14 @@ type RoomNavItemMenuProps = {
|
|||||||
const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
|
const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
|
||||||
({ room, requestClose }, ref) => {
|
({ room, requestClose }, ref) => {
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
|
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||||
const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
|
const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
|
||||||
const powerLevels = usePowerLevels(room);
|
const powerLevels = usePowerLevels(room);
|
||||||
const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
|
const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
|
||||||
const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
|
const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
|
||||||
|
|
||||||
const handleMarkAsRead = () => {
|
const handleMarkAsRead = () => {
|
||||||
markAsRead(mx, room.roomId);
|
markAsRead(mx, room.roomId, hideActivity);
|
||||||
requestClose();
|
requestClose();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -20,6 +20,7 @@ export function Room() {
|
|||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
|
|
||||||
const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
|
const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
|
||||||
|
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||||
const screenSize = useScreenSizeContext();
|
const screenSize = useScreenSizeContext();
|
||||||
const powerLevels = usePowerLevels(room);
|
const powerLevels = usePowerLevels(room);
|
||||||
const members = useRoomMembers(mx, room.roomId);
|
const members = useRoomMembers(mx, room.roomId);
|
||||||
@@ -29,10 +30,10 @@ export function Room() {
|
|||||||
useCallback(
|
useCallback(
|
||||||
(evt) => {
|
(evt) => {
|
||||||
if (isKeyHotkey('escape', evt)) {
|
if (isKeyHotkey('escape', evt)) {
|
||||||
markAsRead(mx, room.roomId);
|
markAsRead(mx, room.roomId, hideActivity);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[mx, room.roomId]
|
[mx, room.roomId, hideActivity]
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@@ -70,6 +70,7 @@ import { useFilePasteHandler } from '../../hooks/useFilePasteHandler';
|
|||||||
import { useFileDropZone } from '../../hooks/useFileDrop';
|
import { useFileDropZone } from '../../hooks/useFileDrop';
|
||||||
import {
|
import {
|
||||||
TUploadItem,
|
TUploadItem,
|
||||||
|
TUploadMetadata,
|
||||||
roomIdToMsgDraftAtomFamily,
|
roomIdToMsgDraftAtomFamily,
|
||||||
roomIdToReplyDraftAtomFamily,
|
roomIdToReplyDraftAtomFamily,
|
||||||
roomIdToUploadItemsAtomFamily,
|
roomIdToUploadItemsAtomFamily,
|
||||||
@@ -126,6 +127,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
|||||||
const useAuthentication = useMediaAuthentication();
|
const useAuthentication = useMediaAuthentication();
|
||||||
const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
|
const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
|
||||||
const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
|
const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
|
||||||
|
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||||
const commands = useCommands(mx, room);
|
const commands = useCommands(mx, room);
|
||||||
const emojiBtnRef = useRef<HTMLButtonElement>(null);
|
const emojiBtnRef = useRef<HTMLButtonElement>(null);
|
||||||
const roomToParents = useAtomValue(roomToParentsAtom);
|
const roomToParents = useAtomValue(roomToParentsAtom);
|
||||||
@@ -220,6 +222,17 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
|||||||
[roomId, editor, setMsgDraft]
|
[roomId, editor, setMsgDraft]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const handleFileMetadata = useCallback(
|
||||||
|
(fileItem: TUploadItem, metadata: TUploadMetadata) => {
|
||||||
|
setSelectedFiles({
|
||||||
|
type: 'REPLACE',
|
||||||
|
item: fileItem,
|
||||||
|
replacement: { ...fileItem, metadata },
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[setSelectedFiles]
|
||||||
|
);
|
||||||
|
|
||||||
const handleRemoveUpload = useCallback(
|
const handleRemoveUpload = useCallback(
|
||||||
(upload: TUploadContent | TUploadContent[]) => {
|
(upload: TUploadContent | TUploadContent[]) => {
|
||||||
const uploads = Array.isArray(upload) ? upload : [upload];
|
const uploads = Array.isArray(upload) ? upload : [upload];
|
||||||
@@ -353,10 +366,14 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
|||||||
}
|
}
|
||||||
if (isKeyHotkey('escape', evt)) {
|
if (isKeyHotkey('escape', evt)) {
|
||||||
evt.preventDefault();
|
evt.preventDefault();
|
||||||
|
if (autocompleteQuery) {
|
||||||
|
setAutocompleteQuery(undefined);
|
||||||
|
return;
|
||||||
|
}
|
||||||
setReplyDraft(undefined);
|
setReplyDraft(undefined);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[submit, setReplyDraft, enterForNewline]
|
[submit, setReplyDraft, enterForNewline, autocompleteQuery]
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleKeyUp: KeyboardEventHandler = useCallback(
|
const handleKeyUp: KeyboardEventHandler = useCallback(
|
||||||
@@ -366,7 +383,9 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
sendTypingStatus(!isEmptyEditor(editor));
|
if (!hideActivity) {
|
||||||
|
sendTypingStatus(!isEmptyEditor(editor));
|
||||||
|
}
|
||||||
|
|
||||||
const prevWordRange = getPrevWorldRange(editor);
|
const prevWordRange = getPrevWorldRange(editor);
|
||||||
const query = prevWordRange
|
const query = prevWordRange
|
||||||
@@ -374,7 +393,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
|||||||
: undefined;
|
: undefined;
|
||||||
setAutocompleteQuery(query);
|
setAutocompleteQuery(query);
|
||||||
},
|
},
|
||||||
[editor, sendTypingStatus]
|
[editor, sendTypingStatus, hideActivity]
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleCloseAutocomplete = useCallback(() => {
|
const handleCloseAutocomplete = useCallback(() => {
|
||||||
@@ -429,13 +448,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
|||||||
key={index}
|
key={index}
|
||||||
isEncrypted={!!fileItem.encInfo}
|
isEncrypted={!!fileItem.encInfo}
|
||||||
fileItem={fileItem}
|
fileItem={fileItem}
|
||||||
setMetadata={(metadata) =>
|
setMetadata={handleFileMetadata}
|
||||||
setSelectedFiles({
|
|
||||||
type: 'REPLACE',
|
|
||||||
item: fileItem,
|
|
||||||
replacement: { ...fileItem, metadata },
|
|
||||||
})
|
|
||||||
}
|
|
||||||
onRemove={handleRemoveUpload}
|
onRemove={handleRemoveUpload}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@@ -117,6 +117,7 @@ import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
|
|||||||
import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
|
import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
|
||||||
import { useRoomNavigate } from '../../hooks/useRoomNavigate';
|
import { useRoomNavigate } from '../../hooks/useRoomNavigate';
|
||||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||||
|
import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
|
||||||
|
|
||||||
const TimelineFloat = as<'div', css.TimelineFloatVariants>(
|
const TimelineFloat = as<'div', css.TimelineFloatVariants>(
|
||||||
({ position, className, ...props }, ref) => (
|
({ position, className, ...props }, ref) => (
|
||||||
@@ -424,6 +425,7 @@ const getRoomUnreadInfo = (room: Room, scrollTo = false) => {
|
|||||||
export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimelineProps) {
|
export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimelineProps) {
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
const useAuthentication = useMediaAuthentication();
|
const useAuthentication = useMediaAuthentication();
|
||||||
|
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||||
const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
|
const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
|
||||||
const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing');
|
const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing');
|
||||||
const [hideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
|
const [hideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
|
||||||
@@ -433,6 +435,10 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||||||
const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
|
const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
|
||||||
const showUrlPreview = room.hasEncryptionStateEvent() ? encUrlPreview : urlPreview;
|
const showUrlPreview = room.hasEncryptionStateEvent() ? encUrlPreview : urlPreview;
|
||||||
const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
|
const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
|
||||||
|
|
||||||
|
const ignoredUsersList = useIgnoredUsers();
|
||||||
|
const ignoredUsersSet = useMemo(() => new Set(ignoredUsersList), [ignoredUsersList]);
|
||||||
|
|
||||||
const setReplyDraft = useSetAtom(roomIdToReplyDraftAtomFamily(room.roomId));
|
const setReplyDraft = useSetAtom(roomIdToReplyDraftAtomFamily(room.roomId));
|
||||||
const powerLevels = usePowerLevelsContext();
|
const powerLevels = usePowerLevelsContext();
|
||||||
const { canDoAction, canSendEvent, canSendStateEvent, getPowerLevel } =
|
const { canDoAction, canSendEvent, canSendStateEvent, getPowerLevel } =
|
||||||
@@ -589,7 +595,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||||||
// Check if the document is in focus (user is actively viewing the app),
|
// Check if the document is in focus (user is actively viewing the app),
|
||||||
// and either there are no unread messages or the latest message is from the current user.
|
// and either there are no unread messages or the latest message is from the current user.
|
||||||
// If either condition is met, trigger the markAsRead function to send a read receipt.
|
// If either condition is met, trigger the markAsRead function to send a read receipt.
|
||||||
requestAnimationFrame(() => markAsRead(mx, mEvt.getRoomId()!));
|
requestAnimationFrame(() => markAsRead(mx, mEvt.getRoomId()!, hideActivity));
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!document.hasFocus() && !unreadInfo) {
|
if (!document.hasFocus() && !unreadInfo) {
|
||||||
@@ -613,7 +619,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||||||
setUnreadInfo(getRoomUnreadInfo(room));
|
setUnreadInfo(getRoomUnreadInfo(room));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[mx, room, unreadInfo]
|
[mx, room, unreadInfo, hideActivity]
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -682,15 +688,15 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||||||
const tryAutoMarkAsRead = useCallback(() => {
|
const tryAutoMarkAsRead = useCallback(() => {
|
||||||
const readUptoEventId = readUptoEventIdRef.current;
|
const readUptoEventId = readUptoEventIdRef.current;
|
||||||
if (!readUptoEventId) {
|
if (!readUptoEventId) {
|
||||||
requestAnimationFrame(() => markAsRead(mx, room.roomId));
|
requestAnimationFrame(() => markAsRead(mx, room.roomId, hideActivity));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const evtTimeline = getEventTimeline(room, readUptoEventId);
|
const evtTimeline = getEventTimeline(room, readUptoEventId);
|
||||||
const latestTimeline = evtTimeline && getFirstLinkedTimeline(evtTimeline, Direction.Forward);
|
const latestTimeline = evtTimeline && getFirstLinkedTimeline(evtTimeline, Direction.Forward);
|
||||||
if (latestTimeline === room.getLiveTimeline()) {
|
if (latestTimeline === room.getLiveTimeline()) {
|
||||||
requestAnimationFrame(() => markAsRead(mx, room.roomId));
|
requestAnimationFrame(() => markAsRead(mx, room.roomId, hideActivity));
|
||||||
}
|
}
|
||||||
}, [mx, room]);
|
}, [mx, room, hideActivity]);
|
||||||
|
|
||||||
const debounceSetAtBottom = useDebounce(
|
const debounceSetAtBottom = useDebounce(
|
||||||
useCallback((entry: IntersectionObserverEntry) => {
|
useCallback((entry: IntersectionObserverEntry) => {
|
||||||
@@ -872,7 +878,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleMarkAsRead = () => {
|
const handleMarkAsRead = () => {
|
||||||
markAsRead(mx, room.roomId);
|
markAsRead(mx, room.roomId, hideActivity);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleOpenReply: MouseEventHandler = useCallback(
|
const handleOpenReply: MouseEventHandler = useCallback(
|
||||||
@@ -1047,6 +1053,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
hideReadReceipts={hideActivity}
|
||||||
>
|
>
|
||||||
{mEvent.isRedacted() ? (
|
{mEvent.isRedacted() ? (
|
||||||
<RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
|
<RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
|
||||||
@@ -1119,6 +1126,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
hideReadReceipts={hideActivity}
|
||||||
>
|
>
|
||||||
<EncryptedContent mEvent={mEvent}>
|
<EncryptedContent mEvent={mEvent}>
|
||||||
{() => {
|
{() => {
|
||||||
@@ -1215,6 +1223,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
hideReadReceipts={hideActivity}
|
||||||
>
|
>
|
||||||
{mEvent.isRedacted() ? (
|
{mEvent.isRedacted() ? (
|
||||||
<RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
|
<RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
|
||||||
@@ -1256,6 +1265,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||||||
highlight={highlighted}
|
highlight={highlighted}
|
||||||
messageSpacing={messageSpacing}
|
messageSpacing={messageSpacing}
|
||||||
canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
|
canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
|
||||||
|
hideReadReceipts={hideActivity}
|
||||||
>
|
>
|
||||||
<EventContent
|
<EventContent
|
||||||
messageLayout={messageLayout}
|
messageLayout={messageLayout}
|
||||||
@@ -1291,6 +1301,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||||||
highlight={highlighted}
|
highlight={highlighted}
|
||||||
messageSpacing={messageSpacing}
|
messageSpacing={messageSpacing}
|
||||||
canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
|
canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
|
||||||
|
hideReadReceipts={hideActivity}
|
||||||
>
|
>
|
||||||
<EventContent
|
<EventContent
|
||||||
messageLayout={messageLayout}
|
messageLayout={messageLayout}
|
||||||
@@ -1327,6 +1338,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||||||
highlight={highlighted}
|
highlight={highlighted}
|
||||||
messageSpacing={messageSpacing}
|
messageSpacing={messageSpacing}
|
||||||
canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
|
canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
|
||||||
|
hideReadReceipts={hideActivity}
|
||||||
>
|
>
|
||||||
<EventContent
|
<EventContent
|
||||||
messageLayout={messageLayout}
|
messageLayout={messageLayout}
|
||||||
@@ -1363,6 +1375,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||||||
highlight={highlighted}
|
highlight={highlighted}
|
||||||
messageSpacing={messageSpacing}
|
messageSpacing={messageSpacing}
|
||||||
canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
|
canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
|
||||||
|
hideReadReceipts={hideActivity}
|
||||||
>
|
>
|
||||||
<EventContent
|
<EventContent
|
||||||
messageLayout={messageLayout}
|
messageLayout={messageLayout}
|
||||||
@@ -1401,6 +1414,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||||||
highlight={highlighted}
|
highlight={highlighted}
|
||||||
messageSpacing={messageSpacing}
|
messageSpacing={messageSpacing}
|
||||||
canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
|
canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
|
||||||
|
hideReadReceipts={hideActivity}
|
||||||
>
|
>
|
||||||
<EventContent
|
<EventContent
|
||||||
messageLayout={messageLayout}
|
messageLayout={messageLayout}
|
||||||
@@ -1444,6 +1458,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||||||
highlight={highlighted}
|
highlight={highlighted}
|
||||||
messageSpacing={messageSpacing}
|
messageSpacing={messageSpacing}
|
||||||
canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
|
canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
|
||||||
|
hideReadReceipts={hideActivity}
|
||||||
>
|
>
|
||||||
<EventContent
|
<EventContent
|
||||||
messageLayout={messageLayout}
|
messageLayout={messageLayout}
|
||||||
@@ -1478,6 +1493,14 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||||||
|
|
||||||
if (!mEvent || !mEventId) return null;
|
if (!mEvent || !mEventId) return null;
|
||||||
|
|
||||||
|
const eventSender = mEvent.getSender();
|
||||||
|
if (eventSender && ignoredUsersSet.has(eventSender)) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (mEvent.isRedacted() && !showHiddenEvents) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
if (!newDivider && readUptoEventIdRef.current) {
|
if (!newDivider && readUptoEventIdRef.current) {
|
||||||
newDivider = prevEvent?.getId() === readUptoEventIdRef.current;
|
newDivider = prevEvent?.getId() === readUptoEventIdRef.current;
|
||||||
}
|
}
|
||||||
@@ -1488,9 +1511,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||||||
const collapsed =
|
const collapsed =
|
||||||
isPrevRendered &&
|
isPrevRendered &&
|
||||||
!dayDivider &&
|
!dayDivider &&
|
||||||
(!newDivider || mEvent.getSender() === mx.getUserId()) &&
|
(!newDivider || eventSender === mx.getUserId()) &&
|
||||||
prevEvent !== undefined &&
|
prevEvent !== undefined &&
|
||||||
prevEvent.getSender() === mEvent.getSender() &&
|
prevEvent.getSender() === eventSender &&
|
||||||
prevEvent.getType() === mEvent.getType() &&
|
prevEvent.getType() === mEvent.getType() &&
|
||||||
minuteDifference(prevEvent.getTs(), mEvent.getTs()) < 2;
|
minuteDifference(prevEvent.getTs(), mEvent.getTs()) < 2;
|
||||||
|
|
||||||
@@ -1509,7 +1532,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||||||
isPrevRendered = !!eventJSX;
|
isPrevRendered = !!eventJSX;
|
||||||
|
|
||||||
const newDividerJSX =
|
const newDividerJSX =
|
||||||
newDivider && eventJSX && mEvent.getSender() !== mx.getUserId() ? (
|
newDivider && eventJSX && eventSender !== mx.getUserId() ? (
|
||||||
<MessageBase space={messageSpacing}>
|
<MessageBase space={messageSpacing}>
|
||||||
<TimelineDivider style={{ color: color.Success.Main }} variant="Inherit">
|
<TimelineDivider style={{ color: color.Success.Main }} variant="Inherit">
|
||||||
<Badge as="span" size="500" variant="Success" fill="Solid" radii="300">
|
<Badge as="span" size="500" variant="Success" fill="Solid" radii="300">
|
||||||
|
|||||||
@@ -13,13 +13,16 @@ import { RoomTimeline } from './RoomTimeline';
|
|||||||
import { RoomViewTyping } from './RoomViewTyping';
|
import { RoomViewTyping } from './RoomViewTyping';
|
||||||
import { RoomTombstone } from './RoomTombstone';
|
import { RoomTombstone } from './RoomTombstone';
|
||||||
import { RoomInput } from './RoomInput';
|
import { RoomInput } from './RoomInput';
|
||||||
import { RoomViewFollowing } from './RoomViewFollowing';
|
import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
|
||||||
import { Page } from '../../components/page';
|
import { Page } from '../../components/page';
|
||||||
import { RoomViewHeader } from './RoomViewHeader';
|
import { RoomViewHeader } from './RoomViewHeader';
|
||||||
import { useKeyDown } from '../../hooks/useKeyDown';
|
import { useKeyDown } from '../../hooks/useKeyDown';
|
||||||
import { editableActiveElement } from '../../utils/dom';
|
import { editableActiveElement } from '../../utils/dom';
|
||||||
import navigation from '../../../client/state/navigation';
|
import navigation from '../../../client/state/navigation';
|
||||||
|
import { settingsAtom } from '../../state/settings';
|
||||||
|
import { useSetting } from '../../state/hooks/settings';
|
||||||
|
|
||||||
|
const FN_KEYS_REGEX = /^F\d+$/;
|
||||||
const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
|
const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
|
||||||
const { code } = evt;
|
const { code } = evt;
|
||||||
if (evt.metaKey || evt.altKey || evt.ctrlKey) {
|
if (evt.metaKey || evt.altKey || evt.ctrlKey) {
|
||||||
@@ -27,7 +30,7 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// do not focus on F keys
|
// do not focus on F keys
|
||||||
if (/^F\d+$/.test(code)) return false;
|
if (FN_KEYS_REGEX.test(code)) return false;
|
||||||
|
|
||||||
// do not focus on numlock/scroll lock
|
// do not focus on numlock/scroll lock
|
||||||
if (
|
if (
|
||||||
@@ -56,6 +59,8 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
|
|||||||
const roomInputRef = useRef<HTMLDivElement>(null);
|
const roomInputRef = useRef<HTMLDivElement>(null);
|
||||||
const roomViewRef = useRef<HTMLDivElement>(null);
|
const roomViewRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||||
|
|
||||||
const { roomId } = room;
|
const { roomId } = room;
|
||||||
const editor = useEditor();
|
const editor = useEditor();
|
||||||
|
|
||||||
@@ -132,7 +137,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<RoomViewFollowing room={room} />
|
{hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
|
||||||
</Box>
|
</Box>
|
||||||
</Page>
|
</Page>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,6 +1,14 @@
|
|||||||
|
import { style } from '@vanilla-extract/css';
|
||||||
import { recipe } from '@vanilla-extract/recipes';
|
import { recipe } from '@vanilla-extract/recipes';
|
||||||
import { DefaultReset, color, config, toRem } from 'folds';
|
import { DefaultReset, color, config, toRem } from 'folds';
|
||||||
|
|
||||||
|
export const RoomViewFollowingPlaceholder = style([
|
||||||
|
DefaultReset,
|
||||||
|
{
|
||||||
|
height: toRem(28),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
export const RoomViewFollowing = recipe({
|
export const RoomViewFollowing = recipe({
|
||||||
base: [
|
base: [
|
||||||
DefaultReset,
|
DefaultReset,
|
||||||
|
|||||||
@@ -24,6 +24,10 @@ import { useRoomEventReaders } from '../../hooks/useRoomEventReaders';
|
|||||||
import { EventReaders } from '../../components/event-readers';
|
import { EventReaders } from '../../components/event-readers';
|
||||||
import { stopPropagation } from '../../utils/keyboard';
|
import { stopPropagation } from '../../utils/keyboard';
|
||||||
|
|
||||||
|
export function RoomViewFollowingPlaceholder() {
|
||||||
|
return <div className={css.RoomViewFollowingPlaceholder} />;
|
||||||
|
}
|
||||||
|
|
||||||
export type RoomViewFollowingProps = {
|
export type RoomViewFollowingProps = {
|
||||||
room: Room;
|
room: Room;
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ import { RoomTopicViewer } from '../../components/room-topic-viewer';
|
|||||||
import { StateEvent } from '../../../types/matrix/room';
|
import { StateEvent } from '../../../types/matrix/room';
|
||||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||||
import { useRoom } from '../../hooks/useRoom';
|
import { useRoom } from '../../hooks/useRoom';
|
||||||
import { useSetSetting } from '../../state/hooks/settings';
|
import { useSetSetting, useSetting } from '../../state/hooks/settings';
|
||||||
import { settingsAtom } from '../../state/settings';
|
import { settingsAtom } from '../../state/settings';
|
||||||
import { useSpaceOptionally } from '../../hooks/useSpace';
|
import { useSpaceOptionally } from '../../hooks/useSpace';
|
||||||
import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils';
|
import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils';
|
||||||
@@ -64,13 +64,14 @@ type RoomMenuProps = {
|
|||||||
};
|
};
|
||||||
const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose }, ref) => {
|
const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose }, ref) => {
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
|
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||||
const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
|
const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
|
||||||
const powerLevels = usePowerLevelsContext();
|
const powerLevels = usePowerLevelsContext();
|
||||||
const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
|
const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
|
||||||
const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
|
const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
|
||||||
|
|
||||||
const handleMarkAsRead = () => {
|
const handleMarkAsRead = () => {
|
||||||
markAsRead(mx, room.roomId);
|
markAsRead(mx, room.roomId, hideActivity);
|
||||||
requestClose();
|
requestClose();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -671,6 +671,7 @@ export type MessageProps = {
|
|||||||
onReactionToggle: (targetEventId: string, key: string, shortcode?: string) => void;
|
onReactionToggle: (targetEventId: string, key: string, shortcode?: string) => void;
|
||||||
reply?: ReactNode;
|
reply?: ReactNode;
|
||||||
reactions?: ReactNode;
|
reactions?: ReactNode;
|
||||||
|
hideReadReceipts?: boolean;
|
||||||
};
|
};
|
||||||
export const Message = as<'div', MessageProps>(
|
export const Message = as<'div', MessageProps>(
|
||||||
(
|
(
|
||||||
@@ -695,6 +696,7 @@ export const Message = as<'div', MessageProps>(
|
|||||||
onEditId,
|
onEditId,
|
||||||
reply,
|
reply,
|
||||||
reactions,
|
reactions,
|
||||||
|
hideReadReceipts,
|
||||||
children,
|
children,
|
||||||
...props
|
...props
|
||||||
},
|
},
|
||||||
@@ -992,11 +994,13 @@ export const Message = as<'div', MessageProps>(
|
|||||||
</Text>
|
</Text>
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
)}
|
)}
|
||||||
<MessageReadReceiptItem
|
{!hideReadReceipts && (
|
||||||
room={room}
|
<MessageReadReceiptItem
|
||||||
eventId={mEvent.getId() ?? ''}
|
room={room}
|
||||||
onClose={closeMenu}
|
eventId={mEvent.getId() ?? ''}
|
||||||
/>
|
onClose={closeMenu}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
<MessageSourceCodeItem room={room} mEvent={mEvent} onClose={closeMenu} />
|
<MessageSourceCodeItem room={room} mEvent={mEvent} onClose={closeMenu} />
|
||||||
<MessageCopyLinkItem room={room} mEvent={mEvent} onClose={closeMenu} />
|
<MessageCopyLinkItem room={room} mEvent={mEvent} onClose={closeMenu} />
|
||||||
{canPinEvent && (
|
{canPinEvent && (
|
||||||
@@ -1071,9 +1075,23 @@ export type EventProps = {
|
|||||||
highlight: boolean;
|
highlight: boolean;
|
||||||
canDelete?: boolean;
|
canDelete?: boolean;
|
||||||
messageSpacing: MessageSpacing;
|
messageSpacing: MessageSpacing;
|
||||||
|
hideReadReceipts?: boolean;
|
||||||
};
|
};
|
||||||
export const Event = as<'div', EventProps>(
|
export const Event = as<'div', EventProps>(
|
||||||
({ className, room, mEvent, highlight, canDelete, messageSpacing, children, ...props }, ref) => {
|
(
|
||||||
|
{
|
||||||
|
className,
|
||||||
|
room,
|
||||||
|
mEvent,
|
||||||
|
highlight,
|
||||||
|
canDelete,
|
||||||
|
messageSpacing,
|
||||||
|
hideReadReceipts,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
},
|
||||||
|
ref
|
||||||
|
) => {
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
const [hover, setHover] = useState(false);
|
const [hover, setHover] = useState(false);
|
||||||
const { hoverProps } = useHover({ onHoverChange: setHover });
|
const { hoverProps } = useHover({ onHoverChange: setHover });
|
||||||
@@ -1138,11 +1156,13 @@ export const Event = as<'div', EventProps>(
|
|||||||
>
|
>
|
||||||
<Menu {...props} ref={ref}>
|
<Menu {...props} ref={ref}>
|
||||||
<Box direction="Column" gap="100" className={css.MessageMenuGroup}>
|
<Box direction="Column" gap="100" className={css.MessageMenuGroup}>
|
||||||
<MessageReadReceiptItem
|
{!hideReadReceipts && (
|
||||||
room={room}
|
<MessageReadReceiptItem
|
||||||
eventId={mEvent.getId() ?? ''}
|
room={room}
|
||||||
onClose={closeMenu}
|
eventId={mEvent.getId() ?? ''}
|
||||||
/>
|
onClose={closeMenu}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
<MessageSourceCodeItem room={room} mEvent={mEvent} onClose={closeMenu} />
|
<MessageSourceCodeItem room={room} mEvent={mEvent} onClose={closeMenu} />
|
||||||
<MessageCopyLinkItem room={room} mEvent={mEvent} onClose={closeMenu} />
|
<MessageCopyLinkItem room={room} mEvent={mEvent} onClose={closeMenu} />
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
90
src/app/features/settings/developer-tools/AccountData.tsx
Normal file
90
src/app/features/settings/developer-tools/AccountData.tsx
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
import React, { useCallback, useState } from 'react';
|
||||||
|
import { Box, Text, Icon, Icons, Chip, Button } from 'folds';
|
||||||
|
import { SequenceCard } from '../../../components/sequence-card';
|
||||||
|
import { SequenceCardStyle } from '../styles.css';
|
||||||
|
import { SettingTile } from '../../../components/setting-tile';
|
||||||
|
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||||
|
import { useAccountDataCallback } from '../../../hooks/useAccountDataCallback';
|
||||||
|
|
||||||
|
type AccountDataProps = {
|
||||||
|
expand: boolean;
|
||||||
|
onExpandToggle: (expand: boolean) => void;
|
||||||
|
onSelect: (type: string | null) => void;
|
||||||
|
};
|
||||||
|
export function AccountData({ expand, onExpandToggle, onSelect }: AccountDataProps) {
|
||||||
|
const mx = useMatrixClient();
|
||||||
|
const [accountData, setAccountData] = useState(() => Array.from(mx.store.accountData.values()));
|
||||||
|
|
||||||
|
useAccountDataCallback(
|
||||||
|
mx,
|
||||||
|
useCallback(
|
||||||
|
() => setAccountData(Array.from(mx.store.accountData.values())),
|
||||||
|
[mx, setAccountData]
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box direction="Column" gap="100">
|
||||||
|
<Text size="L400">Account Data</Text>
|
||||||
|
<SequenceCard
|
||||||
|
className={SequenceCardStyle}
|
||||||
|
variant="SurfaceVariant"
|
||||||
|
direction="Column"
|
||||||
|
gap="400"
|
||||||
|
>
|
||||||
|
<SettingTile
|
||||||
|
title="Global"
|
||||||
|
description="Data stored in your global account data."
|
||||||
|
after={
|
||||||
|
<Button
|
||||||
|
onClick={() => onExpandToggle(!expand)}
|
||||||
|
variant="Secondary"
|
||||||
|
fill="Soft"
|
||||||
|
size="300"
|
||||||
|
radii="300"
|
||||||
|
outlined
|
||||||
|
before={
|
||||||
|
<Icon src={expand ? Icons.ChevronTop : Icons.ChevronBottom} size="100" filled />
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text size="B300">{expand ? 'Collapse' : 'Expand'}</Text>
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{expand && (
|
||||||
|
<SettingTile>
|
||||||
|
<Box direction="Column" gap="200">
|
||||||
|
<Text size="L400">Types</Text>
|
||||||
|
<Box gap="200" wrap="Wrap">
|
||||||
|
<Chip
|
||||||
|
variant="Secondary"
|
||||||
|
fill="Soft"
|
||||||
|
radii="Pill"
|
||||||
|
before={<Icon size="50" src={Icons.Plus} />}
|
||||||
|
onClick={() => onSelect(null)}
|
||||||
|
>
|
||||||
|
<Text size="T200" truncate>
|
||||||
|
Add New
|
||||||
|
</Text>
|
||||||
|
</Chip>
|
||||||
|
{accountData.map((mEvent) => (
|
||||||
|
<Chip
|
||||||
|
key={mEvent.getType()}
|
||||||
|
variant="Secondary"
|
||||||
|
fill="Soft"
|
||||||
|
radii="Pill"
|
||||||
|
onClick={() => onSelect(mEvent.getType())}
|
||||||
|
>
|
||||||
|
<Text size="T200" truncate>
|
||||||
|
{mEvent.getType()}
|
||||||
|
</Text>
|
||||||
|
</Chip>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</SettingTile>
|
||||||
|
)}
|
||||||
|
</SequenceCard>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -8,9 +8,7 @@ import React, {
|
|||||||
useState,
|
useState,
|
||||||
} from 'react';
|
} from 'react';
|
||||||
import {
|
import {
|
||||||
as,
|
|
||||||
Box,
|
Box,
|
||||||
Header,
|
|
||||||
Text,
|
Text,
|
||||||
Icon,
|
Icon,
|
||||||
Icons,
|
Icons,
|
||||||
@@ -20,6 +18,9 @@ import {
|
|||||||
TextArea as TextAreaComponent,
|
TextArea as TextAreaComponent,
|
||||||
color,
|
color,
|
||||||
Spinner,
|
Spinner,
|
||||||
|
Chip,
|
||||||
|
Scroll,
|
||||||
|
config,
|
||||||
} from 'folds';
|
} from 'folds';
|
||||||
import { isKeyHotkey } from 'is-hotkey';
|
import { isKeyHotkey } from 'is-hotkey';
|
||||||
import { MatrixError } from 'matrix-js-sdk';
|
import { MatrixError } from 'matrix-js-sdk';
|
||||||
@@ -30,182 +31,302 @@ import { GetTarget } from '../../../plugins/text-area/type';
|
|||||||
import { syntaxErrorPosition } from '../../../utils/dom';
|
import { syntaxErrorPosition } from '../../../utils/dom';
|
||||||
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
|
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
|
||||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||||
|
import { Page, PageHeader } from '../../../components/page';
|
||||||
|
import { useAlive } from '../../../hooks/useAlive';
|
||||||
|
import { SequenceCard } from '../../../components/sequence-card';
|
||||||
|
import { TextViewerContent } from '../../../components/text-viewer';
|
||||||
|
|
||||||
const EDITOR_INTENT_SPACE_COUNT = 2;
|
const EDITOR_INTENT_SPACE_COUNT = 2;
|
||||||
|
|
||||||
|
type AccountDataInfo = {
|
||||||
|
type: string;
|
||||||
|
content: object;
|
||||||
|
};
|
||||||
|
|
||||||
|
type AccountDataEditProps = {
|
||||||
|
type: string;
|
||||||
|
defaultContent: string;
|
||||||
|
onCancel: () => void;
|
||||||
|
onSave: (info: AccountDataInfo) => void;
|
||||||
|
};
|
||||||
|
function AccountDataEdit({ type, defaultContent, onCancel, onSave }: AccountDataEditProps) {
|
||||||
|
const mx = useMatrixClient();
|
||||||
|
const alive = useAlive();
|
||||||
|
|
||||||
|
const textAreaRef = useRef<HTMLTextAreaElement>(null);
|
||||||
|
const [jsonError, setJSONError] = useState<SyntaxError>();
|
||||||
|
|
||||||
|
const getTarget: GetTarget = useCallback(() => {
|
||||||
|
const target = textAreaRef.current;
|
||||||
|
if (!target) throw new Error('TextArea element not found!');
|
||||||
|
return target;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const { textArea, operations, intent } = useMemo(() => {
|
||||||
|
const ta = new TextArea(getTarget);
|
||||||
|
const op = new TextAreaOperations(getTarget);
|
||||||
|
return {
|
||||||
|
textArea: ta,
|
||||||
|
operations: op,
|
||||||
|
intent: new Intent(EDITOR_INTENT_SPACE_COUNT, ta, op),
|
||||||
|
};
|
||||||
|
}, [getTarget]);
|
||||||
|
|
||||||
|
const intentHandler = useTextAreaIntentHandler(textArea, operations, intent);
|
||||||
|
|
||||||
|
const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (evt) => {
|
||||||
|
intentHandler(evt);
|
||||||
|
if (isKeyHotkey('escape', evt)) {
|
||||||
|
const cursor = Cursor.fromTextAreaElement(getTarget());
|
||||||
|
operations.deselect(cursor);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const [submitState, submit] = useAsyncCallback<object, MatrixError, [string, object]>(
|
||||||
|
useCallback((dataType, data) => mx.setAccountData(dataType, data), [mx])
|
||||||
|
);
|
||||||
|
const submitting = submitState.status === AsyncStatus.Loading;
|
||||||
|
|
||||||
|
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
||||||
|
evt.preventDefault();
|
||||||
|
if (submitting) return;
|
||||||
|
|
||||||
|
const target = evt.target as HTMLFormElement | undefined;
|
||||||
|
const typeInput = target?.typeInput as HTMLInputElement | undefined;
|
||||||
|
const contentTextArea = target?.contentTextArea as HTMLTextAreaElement | undefined;
|
||||||
|
if (!typeInput || !contentTextArea) return;
|
||||||
|
|
||||||
|
const typeStr = typeInput.value.trim();
|
||||||
|
const contentStr = contentTextArea.value.trim();
|
||||||
|
|
||||||
|
let parsedContent: object;
|
||||||
|
try {
|
||||||
|
parsedContent = JSON.parse(contentStr);
|
||||||
|
} catch (e) {
|
||||||
|
setJSONError(e as SyntaxError);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setJSONError(undefined);
|
||||||
|
|
||||||
|
if (
|
||||||
|
!typeStr ||
|
||||||
|
parsedContent === null ||
|
||||||
|
defaultContent === JSON.stringify(parsedContent, null, EDITOR_INTENT_SPACE_COUNT)
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
submit(typeStr, parsedContent).then(() => {
|
||||||
|
if (alive()) {
|
||||||
|
onSave({
|
||||||
|
type: typeStr,
|
||||||
|
content: parsedContent,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (jsonError) {
|
||||||
|
const errorPosition = syntaxErrorPosition(jsonError) ?? 0;
|
||||||
|
const cursor = new Cursor(errorPosition, errorPosition, 'none');
|
||||||
|
operations.select(cursor);
|
||||||
|
getTarget()?.focus();
|
||||||
|
}
|
||||||
|
}, [jsonError, operations, getTarget]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
as="form"
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
grow="Yes"
|
||||||
|
className={css.EditorContent}
|
||||||
|
direction="Column"
|
||||||
|
gap="400"
|
||||||
|
aria-disabled={submitting}
|
||||||
|
>
|
||||||
|
<Box shrink="No" direction="Column" gap="100">
|
||||||
|
<Text size="L400">Account Data</Text>
|
||||||
|
<Box gap="300">
|
||||||
|
<Box grow="Yes" direction="Column">
|
||||||
|
<Input
|
||||||
|
variant={type.length > 0 || submitting ? 'SurfaceVariant' : 'Background'}
|
||||||
|
name="typeInput"
|
||||||
|
size="400"
|
||||||
|
radii="300"
|
||||||
|
readOnly={type.length > 0 || submitting}
|
||||||
|
defaultValue={type}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
<Button
|
||||||
|
variant="Success"
|
||||||
|
size="400"
|
||||||
|
radii="300"
|
||||||
|
type="submit"
|
||||||
|
disabled={submitting}
|
||||||
|
before={submitting && <Spinner variant="Primary" fill="Solid" size="300" />}
|
||||||
|
>
|
||||||
|
<Text size="B400">Save</Text>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="Secondary"
|
||||||
|
fill="Soft"
|
||||||
|
size="400"
|
||||||
|
radii="300"
|
||||||
|
onClick={onCancel}
|
||||||
|
disabled={submitting}
|
||||||
|
>
|
||||||
|
<Text size="B400">Cancel</Text>
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{submitState.status === AsyncStatus.Error && (
|
||||||
|
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||||
|
<b>{submitState.error.message}</b>
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
<Box grow="Yes" direction="Column" gap="100">
|
||||||
|
<Box shrink="No">
|
||||||
|
<Text size="L400">JSON Content</Text>
|
||||||
|
</Box>
|
||||||
|
<TextAreaComponent
|
||||||
|
ref={textAreaRef}
|
||||||
|
name="contentTextArea"
|
||||||
|
className={css.EditorTextArea}
|
||||||
|
onKeyDown={handleKeyDown}
|
||||||
|
defaultValue={defaultContent}
|
||||||
|
resize="None"
|
||||||
|
spellCheck="false"
|
||||||
|
required
|
||||||
|
readOnly={submitting}
|
||||||
|
/>
|
||||||
|
{jsonError && (
|
||||||
|
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||||
|
<b>
|
||||||
|
{jsonError.name}: {jsonError.message}
|
||||||
|
</b>
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
type AccountDataViewProps = {
|
||||||
|
type: string;
|
||||||
|
defaultContent: string;
|
||||||
|
onEdit: () => void;
|
||||||
|
};
|
||||||
|
function AccountDataView({ type, defaultContent, onEdit }: AccountDataViewProps) {
|
||||||
|
return (
|
||||||
|
<Box direction="Column" className={css.EditorContent} gap="400">
|
||||||
|
<Box shrink="No" gap="300" alignItems="End">
|
||||||
|
<Box grow="Yes" direction="Column" gap="100">
|
||||||
|
<Text size="L400">Account Data</Text>
|
||||||
|
<Input
|
||||||
|
variant="SurfaceVariant"
|
||||||
|
size="400"
|
||||||
|
radii="300"
|
||||||
|
readOnly
|
||||||
|
defaultValue={type}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
<Button variant="Secondary" size="400" radii="300" onClick={onEdit}>
|
||||||
|
<Text size="B400">Edit</Text>
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
<Box grow="Yes" direction="Column" gap="100">
|
||||||
|
<Text size="L400">JSON Content</Text>
|
||||||
|
<SequenceCard variant="SurfaceVariant">
|
||||||
|
<Scroll visibility="Always" size="300" hideTrack>
|
||||||
|
<TextViewerContent
|
||||||
|
size="T300"
|
||||||
|
style={{
|
||||||
|
padding: `${config.space.S300} ${config.space.S100} ${config.space.S300} ${config.space.S300}`,
|
||||||
|
}}
|
||||||
|
text={defaultContent}
|
||||||
|
langName="JSON"
|
||||||
|
/>
|
||||||
|
</Scroll>
|
||||||
|
</SequenceCard>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export type AccountDataEditorProps = {
|
export type AccountDataEditorProps = {
|
||||||
type?: string;
|
type?: string;
|
||||||
content?: object;
|
|
||||||
requestClose: () => void;
|
requestClose: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const AccountDataEditor = as<'div', AccountDataEditorProps>(
|
export function AccountDataEditor({ type, requestClose }: AccountDataEditorProps) {
|
||||||
({ type, content, requestClose, ...props }, ref) => {
|
const mx = useMatrixClient();
|
||||||
const mx = useMatrixClient();
|
|
||||||
const defaultContent = useMemo(
|
|
||||||
() => JSON.stringify(content, null, EDITOR_INTENT_SPACE_COUNT),
|
|
||||||
[content]
|
|
||||||
);
|
|
||||||
const textAreaRef = useRef<HTMLTextAreaElement>(null);
|
|
||||||
const [jsonError, setJSONError] = useState<SyntaxError>();
|
|
||||||
|
|
||||||
const getTarget: GetTarget = useCallback(() => {
|
const [data, setData] = useState<AccountDataInfo>({
|
||||||
const target = textAreaRef.current;
|
type: type ?? '',
|
||||||
if (!target) throw new Error('TextArea element not found!');
|
content: mx.getAccountData(type ?? '')?.getContent() ?? {},
|
||||||
return target;
|
});
|
||||||
}, []);
|
|
||||||
|
|
||||||
const { textArea, operations, intent } = useMemo(() => {
|
const [edit, setEdit] = useState(!type);
|
||||||
const ta = new TextArea(getTarget);
|
|
||||||
const op = new TextAreaOperations(getTarget);
|
|
||||||
return {
|
|
||||||
textArea: ta,
|
|
||||||
operations: op,
|
|
||||||
intent: new Intent(EDITOR_INTENT_SPACE_COUNT, ta, op),
|
|
||||||
};
|
|
||||||
}, [getTarget]);
|
|
||||||
|
|
||||||
const intentHandler = useTextAreaIntentHandler(textArea, operations, intent);
|
const closeEdit = useCallback(() => {
|
||||||
|
if (!type) {
|
||||||
|
requestClose();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setEdit(false);
|
||||||
|
}, [type, requestClose]);
|
||||||
|
|
||||||
const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (evt) => {
|
const handleSave = useCallback((info: AccountDataInfo) => {
|
||||||
intentHandler(evt);
|
setData(info);
|
||||||
if (isKeyHotkey('escape', evt)) {
|
setEdit(false);
|
||||||
const cursor = Cursor.fromTextAreaElement(getTarget());
|
}, []);
|
||||||
operations.deselect(cursor);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const [submitState, submit] = useAsyncCallback<object, MatrixError, [string, object]>(
|
const contentJSONStr = useMemo(
|
||||||
useCallback((dataType, data) => mx.setAccountData(dataType, data), [mx])
|
() => JSON.stringify(data.content, null, EDITOR_INTENT_SPACE_COUNT),
|
||||||
);
|
[data.content]
|
||||||
const submitting = submitState.status === AsyncStatus.Loading;
|
);
|
||||||
|
|
||||||
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
return (
|
||||||
evt.preventDefault();
|
<Page>
|
||||||
if (submitting) return;
|
<PageHeader outlined={false} balance>
|
||||||
|
<Box alignItems="Center" grow="Yes" gap="200">
|
||||||
const target = evt.target as HTMLFormElement | undefined;
|
<Box alignItems="Inherit" grow="Yes" gap="200">
|
||||||
const typeInput = target?.typeInput as HTMLInputElement | undefined;
|
<Chip
|
||||||
const contentTextArea = target?.contentTextArea as HTMLTextAreaElement | undefined;
|
size="500"
|
||||||
if (!typeInput || !contentTextArea) return;
|
radii="Pill"
|
||||||
|
onClick={requestClose}
|
||||||
const typeStr = typeInput.value.trim();
|
before={<Icon size="100" src={Icons.ArrowLeft} />}
|
||||||
const contentStr = contentTextArea.value.trim();
|
>
|
||||||
|
<Text size="T300">Developer Tools</Text>
|
||||||
let parsedContent: object;
|
</Chip>
|
||||||
try {
|
|
||||||
parsedContent = JSON.parse(contentStr);
|
|
||||||
} catch (e) {
|
|
||||||
setJSONError(e as SyntaxError);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setJSONError(undefined);
|
|
||||||
|
|
||||||
if (
|
|
||||||
!typeStr ||
|
|
||||||
parsedContent === null ||
|
|
||||||
defaultContent === JSON.stringify(parsedContent, null, EDITOR_INTENT_SPACE_COUNT)
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
submit(typeStr, parsedContent);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (jsonError) {
|
|
||||||
const errorPosition = syntaxErrorPosition(jsonError) ?? 0;
|
|
||||||
const cursor = new Cursor(errorPosition, errorPosition, 'none');
|
|
||||||
operations.select(cursor);
|
|
||||||
getTarget()?.focus();
|
|
||||||
}
|
|
||||||
}, [jsonError, operations, getTarget]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (submitState.status === AsyncStatus.Success) {
|
|
||||||
requestClose();
|
|
||||||
}
|
|
||||||
}, [submitState, requestClose]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box grow="Yes" direction="Column" {...props} ref={ref}>
|
|
||||||
<Header className={css.EditorHeader} size="600">
|
|
||||||
<Box grow="Yes" gap="200">
|
|
||||||
<Box grow="Yes" alignItems="Center" gap="200">
|
|
||||||
<Text size="H3" truncate>
|
|
||||||
Account Data
|
|
||||||
</Text>
|
|
||||||
</Box>
|
|
||||||
<Box shrink="No">
|
|
||||||
<IconButton onClick={requestClose} variant="Surface">
|
|
||||||
<Icon src={Icons.Cross} />
|
|
||||||
</IconButton>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
</Box>
|
||||||
</Header>
|
<Box shrink="No">
|
||||||
<Box
|
<IconButton onClick={requestClose} variant="Surface">
|
||||||
as="form"
|
<Icon src={Icons.Cross} />
|
||||||
onSubmit={handleSubmit}
|
</IconButton>
|
||||||
grow="Yes"
|
|
||||||
className={css.EditorContent}
|
|
||||||
direction="Column"
|
|
||||||
gap="400"
|
|
||||||
aria-disabled={submitting}
|
|
||||||
>
|
|
||||||
<Box shrink="No" direction="Column" gap="100">
|
|
||||||
<Text size="L400">Type</Text>
|
|
||||||
<Box gap="300">
|
|
||||||
<Box grow="Yes" direction="Column">
|
|
||||||
<Input
|
|
||||||
name="typeInput"
|
|
||||||
size="400"
|
|
||||||
readOnly={!!type || submitting}
|
|
||||||
defaultValue={type}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
<Button
|
|
||||||
variant="Primary"
|
|
||||||
size="400"
|
|
||||||
type="submit"
|
|
||||||
disabled={submitting}
|
|
||||||
before={submitting && <Spinner variant="Primary" fill="Solid" size="300" />}
|
|
||||||
>
|
|
||||||
<Text size="B400">Save</Text>
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{submitState.status === AsyncStatus.Error && (
|
|
||||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
|
||||||
<b>{submitState.error.message}</b>
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
<Box grow="Yes" direction="Column" gap="100">
|
|
||||||
<Box shrink="No">
|
|
||||||
<Text size="L400">JSON Content</Text>
|
|
||||||
</Box>
|
|
||||||
<TextAreaComponent
|
|
||||||
ref={textAreaRef}
|
|
||||||
name="contentTextArea"
|
|
||||||
className={css.EditorTextArea}
|
|
||||||
onKeyDown={handleKeyDown}
|
|
||||||
defaultValue={defaultContent}
|
|
||||||
resize="None"
|
|
||||||
spellCheck="false"
|
|
||||||
required
|
|
||||||
readOnly={submitting}
|
|
||||||
/>
|
|
||||||
{jsonError && (
|
|
||||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
|
||||||
<b>
|
|
||||||
{jsonError.name}: {jsonError.message}
|
|
||||||
</b>
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
</PageHeader>
|
||||||
|
<Box grow="Yes" direction="Column">
|
||||||
|
{edit ? (
|
||||||
|
<AccountDataEdit
|
||||||
|
type={data.type}
|
||||||
|
defaultContent={contentJSONStr}
|
||||||
|
onCancel={closeEdit}
|
||||||
|
onSave={handleSave}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<AccountDataView
|
||||||
|
type={data.type}
|
||||||
|
defaultContent={contentJSONStr}
|
||||||
|
onEdit={() => setEdit(true)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
);
|
</Page>
|
||||||
}
|
);
|
||||||
);
|
}
|
||||||
|
|||||||
@@ -1,26 +1,5 @@
|
|||||||
import React, { MouseEventHandler, useCallback, useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import {
|
import { Box, Text, IconButton, Icon, Icons, Scroll, Switch, Button } from 'folds';
|
||||||
Box,
|
|
||||||
Text,
|
|
||||||
IconButton,
|
|
||||||
Icon,
|
|
||||||
Icons,
|
|
||||||
Scroll,
|
|
||||||
Switch,
|
|
||||||
Overlay,
|
|
||||||
OverlayBackdrop,
|
|
||||||
OverlayCenter,
|
|
||||||
Modal,
|
|
||||||
Chip,
|
|
||||||
Button,
|
|
||||||
PopOut,
|
|
||||||
RectCords,
|
|
||||||
Menu,
|
|
||||||
config,
|
|
||||||
MenuItem,
|
|
||||||
} from 'folds';
|
|
||||||
import { MatrixEvent } from 'matrix-js-sdk';
|
|
||||||
import FocusTrap from 'focus-trap-react';
|
|
||||||
import { Page, PageContent, PageHeader } from '../../../components/page';
|
import { Page, PageContent, PageHeader } from '../../../components/page';
|
||||||
import { SequenceCard } from '../../../components/sequence-card';
|
import { SequenceCard } from '../../../components/sequence-card';
|
||||||
import { SequenceCardStyle } from '../styles.css';
|
import { SequenceCardStyle } from '../styles.css';
|
||||||
@@ -28,195 +7,9 @@ import { SettingTile } from '../../../components/setting-tile';
|
|||||||
import { useSetting } from '../../../state/hooks/settings';
|
import { useSetting } from '../../../state/hooks/settings';
|
||||||
import { settingsAtom } from '../../../state/settings';
|
import { settingsAtom } from '../../../state/settings';
|
||||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||||
import { useAccountDataCallback } from '../../../hooks/useAccountDataCallback';
|
|
||||||
import { TextViewer } from '../../../components/text-viewer';
|
|
||||||
import { stopPropagation } from '../../../utils/keyboard';
|
|
||||||
import { AccountDataEditor } from './AccountDataEditor';
|
import { AccountDataEditor } from './AccountDataEditor';
|
||||||
import { copyToClipboard } from '../../../utils/dom';
|
import { copyToClipboard } from '../../../utils/dom';
|
||||||
|
import { AccountData } from './AccountData';
|
||||||
function AccountData() {
|
|
||||||
const mx = useMatrixClient();
|
|
||||||
const [view, setView] = useState(false);
|
|
||||||
const [accountData, setAccountData] = useState(() => Array.from(mx.store.accountData.values()));
|
|
||||||
const [selectedEvent, selectEvent] = useState<MatrixEvent>();
|
|
||||||
const [menuCords, setMenuCords] = useState<RectCords>();
|
|
||||||
const [selectedOption, selectOption] = useState<'edit' | 'inspect'>();
|
|
||||||
|
|
||||||
useAccountDataCallback(
|
|
||||||
mx,
|
|
||||||
useCallback(
|
|
||||||
() => setAccountData(Array.from(mx.store.accountData.values())),
|
|
||||||
[mx, setAccountData]
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
|
||||||
const target = evt.currentTarget;
|
|
||||||
const eventType = target.getAttribute('data-event-type');
|
|
||||||
if (eventType) {
|
|
||||||
const mEvent = accountData.find((mEvt) => mEvt.getType() === eventType);
|
|
||||||
setMenuCords(evt.currentTarget.getBoundingClientRect());
|
|
||||||
selectEvent(mEvent);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMenuClose = () => setMenuCords(undefined);
|
|
||||||
|
|
||||||
const handleEdit = () => {
|
|
||||||
selectOption('edit');
|
|
||||||
setMenuCords(undefined);
|
|
||||||
};
|
|
||||||
const handleInspect = () => {
|
|
||||||
selectOption('inspect');
|
|
||||||
setMenuCords(undefined);
|
|
||||||
};
|
|
||||||
const handleClose = useCallback(() => {
|
|
||||||
selectEvent(undefined);
|
|
||||||
selectOption(undefined);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box direction="Column" gap="100">
|
|
||||||
<Text size="L400">Account Data</Text>
|
|
||||||
<SequenceCard
|
|
||||||
className={SequenceCardStyle}
|
|
||||||
variant="SurfaceVariant"
|
|
||||||
direction="Column"
|
|
||||||
gap="400"
|
|
||||||
>
|
|
||||||
<SettingTile
|
|
||||||
title="Global"
|
|
||||||
description="Data stored in your global account data."
|
|
||||||
after={
|
|
||||||
<Button
|
|
||||||
onClick={() => setView(!view)}
|
|
||||||
variant="Secondary"
|
|
||||||
fill="Soft"
|
|
||||||
size="300"
|
|
||||||
radii="300"
|
|
||||||
outlined
|
|
||||||
before={
|
|
||||||
<Icon src={view ? Icons.ChevronTop : Icons.ChevronBottom} size="100" filled />
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Text size="B300">{view ? 'Collapse' : 'Expand'}</Text>
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
{view && (
|
|
||||||
<SettingTile>
|
|
||||||
<Box direction="Column" gap="200">
|
|
||||||
<Text size="L400">Types</Text>
|
|
||||||
<Box gap="200" wrap="Wrap">
|
|
||||||
<Chip
|
|
||||||
variant="Secondary"
|
|
||||||
fill="Soft"
|
|
||||||
radii="Pill"
|
|
||||||
onClick={handleEdit}
|
|
||||||
before={<Icon size="50" src={Icons.Plus} />}
|
|
||||||
>
|
|
||||||
<Text size="T200" truncate>
|
|
||||||
Add New
|
|
||||||
</Text>
|
|
||||||
</Chip>
|
|
||||||
{accountData.map((mEvent) => (
|
|
||||||
<Chip
|
|
||||||
key={mEvent.getType()}
|
|
||||||
variant="Secondary"
|
|
||||||
fill="Soft"
|
|
||||||
radii="Pill"
|
|
||||||
aria-pressed={menuCords && selectedEvent?.getType() === mEvent.getType()}
|
|
||||||
onClick={handleMenu}
|
|
||||||
data-event-type={mEvent.getType()}
|
|
||||||
>
|
|
||||||
<Text size="T200" truncate>
|
|
||||||
{mEvent.getType()}
|
|
||||||
</Text>
|
|
||||||
</Chip>
|
|
||||||
))}
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
</SettingTile>
|
|
||||||
)}
|
|
||||||
<PopOut
|
|
||||||
anchor={menuCords}
|
|
||||||
offset={5}
|
|
||||||
position="Bottom"
|
|
||||||
content={
|
|
||||||
<FocusTrap
|
|
||||||
focusTrapOptions={{
|
|
||||||
initialFocus: false,
|
|
||||||
onDeactivate: handleMenuClose,
|
|
||||||
clickOutsideDeactivates: true,
|
|
||||||
isKeyForward: (evt: KeyboardEvent) =>
|
|
||||||
evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
|
|
||||||
isKeyBackward: (evt: KeyboardEvent) =>
|
|
||||||
evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
|
|
||||||
escapeDeactivates: stopPropagation,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Menu>
|
|
||||||
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
|
|
||||||
<MenuItem size="300" variant="Surface" radii="300" onClick={handleInspect}>
|
|
||||||
<Text size="T300">Inspect</Text>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem size="300" variant="Surface" radii="300" onClick={handleEdit}>
|
|
||||||
<Text size="T300">Edit</Text>
|
|
||||||
</MenuItem>
|
|
||||||
</Box>
|
|
||||||
</Menu>
|
|
||||||
</FocusTrap>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</SequenceCard>
|
|
||||||
{selectedEvent && selectedOption === 'inspect' && (
|
|
||||||
<Overlay open backdrop={<OverlayBackdrop />}>
|
|
||||||
<OverlayCenter>
|
|
||||||
<FocusTrap
|
|
||||||
focusTrapOptions={{
|
|
||||||
initialFocus: false,
|
|
||||||
onDeactivate: handleClose,
|
|
||||||
clickOutsideDeactivates: true,
|
|
||||||
escapeDeactivates: stopPropagation,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Modal variant="Surface" size="500">
|
|
||||||
<TextViewer
|
|
||||||
name={selectedEvent.getType() ?? 'Source Code'}
|
|
||||||
langName="json"
|
|
||||||
text={JSON.stringify(selectedEvent.getContent(), null, 2)}
|
|
||||||
requestClose={handleClose}
|
|
||||||
/>
|
|
||||||
</Modal>
|
|
||||||
</FocusTrap>
|
|
||||||
</OverlayCenter>
|
|
||||||
</Overlay>
|
|
||||||
)}
|
|
||||||
{selectedOption === 'edit' && (
|
|
||||||
<Overlay open backdrop={<OverlayBackdrop />}>
|
|
||||||
<OverlayCenter>
|
|
||||||
<FocusTrap
|
|
||||||
focusTrapOptions={{
|
|
||||||
initialFocus: false,
|
|
||||||
onDeactivate: handleClose,
|
|
||||||
clickOutsideDeactivates: true,
|
|
||||||
escapeDeactivates: stopPropagation,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Modal variant="Surface" size="500">
|
|
||||||
<AccountDataEditor
|
|
||||||
type={selectedEvent?.getType()}
|
|
||||||
content={selectedEvent?.getContent()}
|
|
||||||
requestClose={handleClose}
|
|
||||||
/>
|
|
||||||
</Modal>
|
|
||||||
</FocusTrap>
|
|
||||||
</OverlayCenter>
|
|
||||||
</Overlay>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
type DeveloperToolsProps = {
|
type DeveloperToolsProps = {
|
||||||
requestClose: () => void;
|
requestClose: () => void;
|
||||||
@@ -224,6 +17,17 @@ type DeveloperToolsProps = {
|
|||||||
export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
|
export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
const [developerTools, setDeveloperTools] = useSetting(settingsAtom, 'developerTools');
|
const [developerTools, setDeveloperTools] = useSetting(settingsAtom, 'developerTools');
|
||||||
|
const [expand, setExpend] = useState(false);
|
||||||
|
const [accountDataType, setAccountDataType] = useState<string | null>();
|
||||||
|
|
||||||
|
if (accountDataType !== undefined) {
|
||||||
|
return (
|
||||||
|
<AccountDataEditor
|
||||||
|
type={accountDataType ?? undefined}
|
||||||
|
requestClose={() => setAccountDataType(undefined)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Page>
|
<Page>
|
||||||
@@ -292,7 +96,13 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
|
|||||||
</SequenceCard>
|
</SequenceCard>
|
||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
{developerTools && <AccountData />}
|
{developerTools && (
|
||||||
|
<AccountData
|
||||||
|
expand={expand}
|
||||||
|
onExpandToggle={setExpend}
|
||||||
|
onSelect={setAccountDataType}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
</PageContent>
|
</PageContent>
|
||||||
</Scroll>
|
</Scroll>
|
||||||
|
|||||||
@@ -344,6 +344,7 @@ function Appearance() {
|
|||||||
function Editor() {
|
function Editor() {
|
||||||
const [enterForNewline, setEnterForNewline] = useSetting(settingsAtom, 'enterForNewline');
|
const [enterForNewline, setEnterForNewline] = useSetting(settingsAtom, 'enterForNewline');
|
||||||
const [isMarkdown, setIsMarkdown] = useSetting(settingsAtom, 'isMarkdown');
|
const [isMarkdown, setIsMarkdown] = useSetting(settingsAtom, 'isMarkdown');
|
||||||
|
const [hideActivity, setHideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box direction="Column" gap="100">
|
<Box direction="Column" gap="100">
|
||||||
@@ -363,6 +364,13 @@ function Editor() {
|
|||||||
after={<Switch variant="Primary" value={isMarkdown} onChange={setIsMarkdown} />}
|
after={<Switch variant="Primary" value={isMarkdown} onChange={setIsMarkdown} />}
|
||||||
/>
|
/>
|
||||||
</SequenceCard>
|
</SequenceCard>
|
||||||
|
<SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
|
||||||
|
<SettingTile
|
||||||
|
title="Hide Typing & Read Receipts"
|
||||||
|
description="Turn off both typing status and read receipts to keep your activity private."
|
||||||
|
after={<Switch variant="Primary" value={hideActivity} onChange={setHideActivity} />}
|
||||||
|
/>
|
||||||
|
</SequenceCard>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -555,7 +563,13 @@ function Messages() {
|
|||||||
<SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
|
<SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
|
||||||
<SettingTile
|
<SettingTile
|
||||||
title="Disable Media Auto Load"
|
title="Disable Media Auto Load"
|
||||||
after={<Switch variant="Primary" value={!mediaAutoLoad} onChange={(v) => setMediaAutoLoad(!v)} />}
|
after={
|
||||||
|
<Switch
|
||||||
|
variant="Primary"
|
||||||
|
value={!mediaAutoLoad}
|
||||||
|
onChange={(v) => setMediaAutoLoad(!v)}
|
||||||
|
/>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
</SequenceCard>
|
</SequenceCard>
|
||||||
<SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
|
<SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
|
||||||
|
|||||||
@@ -1,17 +1,12 @@
|
|||||||
import React, { ChangeEventHandler, FormEventHandler, useCallback, useMemo, useState } from 'react';
|
import React, { ChangeEventHandler, FormEventHandler, useCallback, useState } from 'react';
|
||||||
import { Box, Button, Chip, Icon, IconButton, Icons, Input, Spinner, Text, config } from 'folds';
|
import { Box, Button, Chip, Icon, IconButton, Icons, Input, Spinner, Text, config } from 'folds';
|
||||||
import { useAccountData } from '../../../hooks/useAccountData';
|
|
||||||
import { AccountDataEvent } from '../../../../types/matrix/accountData';
|
|
||||||
import { SequenceCard } from '../../../components/sequence-card';
|
import { SequenceCard } from '../../../components/sequence-card';
|
||||||
import { SequenceCardStyle } from '../styles.css';
|
import { SequenceCardStyle } from '../styles.css';
|
||||||
import { SettingTile } from '../../../components/setting-tile';
|
import { SettingTile } from '../../../components/setting-tile';
|
||||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||||
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
|
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
|
||||||
import { isUserId } from '../../../utils/matrix';
|
import { isUserId } from '../../../utils/matrix';
|
||||||
|
import { useIgnoredUsers } from '../../../hooks/useIgnoredUsers';
|
||||||
type IgnoredUserListContent = {
|
|
||||||
ignored_users?: Record<string, object>;
|
|
||||||
};
|
|
||||||
|
|
||||||
function IgnoreUserInput({ userList }: { userList: string[] }) {
|
function IgnoreUserInput({ userList }: { userList: string[] }) {
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
@@ -129,12 +124,7 @@ function IgnoredUserChip({ userId, userList }: { userId: string; userList: strin
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function IgnoredUserList() {
|
export function IgnoredUserList() {
|
||||||
const ignoredUserListEvt = useAccountData(AccountDataEvent.IgnoredUserList);
|
const ignoredUsers = useIgnoredUsers();
|
||||||
const ignoredUsers = useMemo(() => {
|
|
||||||
const ignoredUsersRecord =
|
|
||||||
ignoredUserListEvt?.getContent<IgnoredUserListContent>().ignored_users ?? {};
|
|
||||||
return Object.keys(ignoredUsersRecord);
|
|
||||||
}, [ignoredUserListEvt]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box direction="Column" gap="100">
|
<Box direction="Column" gap="100">
|
||||||
|
|||||||
18
src/app/hooks/useIgnoredUsers.ts
Normal file
18
src/app/hooks/useIgnoredUsers.ts
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import { useMemo } from 'react';
|
||||||
|
import { useAccountData } from './useAccountData';
|
||||||
|
import { AccountDataEvent } from '../../types/matrix/accountData';
|
||||||
|
|
||||||
|
export type IgnoredUserListContent = {
|
||||||
|
ignored_users?: Record<string, object>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useIgnoredUsers = (): string[] => {
|
||||||
|
const ignoredUserListEvt = useAccountData(AccountDataEvent.IgnoredUserList);
|
||||||
|
const ignoredUsers = useMemo(() => {
|
||||||
|
const ignoredUsersRecord =
|
||||||
|
ignoredUserListEvt?.getContent<IgnoredUserListContent>().ignored_users ?? {};
|
||||||
|
return Object.keys(ignoredUsersRecord);
|
||||||
|
}, [ignoredUserListEvt]);
|
||||||
|
|
||||||
|
return ignoredUsers;
|
||||||
|
};
|
||||||
@@ -15,7 +15,7 @@ export function AuthFooter() {
|
|||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
>
|
>
|
||||||
v4.4.0
|
v4.5.0
|
||||||
</Text>
|
</Text>
|
||||||
<Text as="a" size="T300" href="https://twitter.com/cinnyapp" target="_blank" rel="noreferrer">
|
<Text as="a" size="T300" href="https://twitter.com/cinnyapp" target="_blank" rel="noreferrer">
|
||||||
Twitter
|
Twitter
|
||||||
|
|||||||
@@ -24,7 +24,7 @@ export function WelcomePage() {
|
|||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer noopener"
|
rel="noreferrer noopener"
|
||||||
>
|
>
|
||||||
v4.4.0
|
v4.5.0
|
||||||
</a>
|
</a>
|
||||||
</span>
|
</span>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -45,18 +45,21 @@ import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCatego
|
|||||||
import { useRoomsUnread } from '../../../state/hooks/unread';
|
import { useRoomsUnread } from '../../../state/hooks/unread';
|
||||||
import { markAsRead } from '../../../../client/action/notifications';
|
import { markAsRead } from '../../../../client/action/notifications';
|
||||||
import { stopPropagation } from '../../../utils/keyboard';
|
import { stopPropagation } from '../../../utils/keyboard';
|
||||||
|
import { useSetting } from '../../../state/hooks/settings';
|
||||||
|
import { settingsAtom } from '../../../state/settings';
|
||||||
|
|
||||||
type DirectMenuProps = {
|
type DirectMenuProps = {
|
||||||
requestClose: () => void;
|
requestClose: () => void;
|
||||||
};
|
};
|
||||||
const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(({ requestClose }, ref) => {
|
const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(({ requestClose }, ref) => {
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
|
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||||
const orphanRooms = useDirectRooms();
|
const orphanRooms = useDirectRooms();
|
||||||
const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
|
const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
|
||||||
|
|
||||||
const handleMarkAsRead = () => {
|
const handleMarkAsRead = () => {
|
||||||
if (!unread) return;
|
if (!unread) return;
|
||||||
orphanRooms.forEach((rId) => markAsRead(mx, rId));
|
orphanRooms.forEach((rId) => markAsRead(mx, rId, hideActivity));
|
||||||
requestClose();
|
requestClose();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -48,18 +48,21 @@ import { useRoomsUnread } from '../../../state/hooks/unread';
|
|||||||
import { markAsRead } from '../../../../client/action/notifications';
|
import { markAsRead } from '../../../../client/action/notifications';
|
||||||
import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCategories';
|
import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCategories';
|
||||||
import { stopPropagation } from '../../../utils/keyboard';
|
import { stopPropagation } from '../../../utils/keyboard';
|
||||||
|
import { useSetting } from '../../../state/hooks/settings';
|
||||||
|
import { settingsAtom } from '../../../state/settings';
|
||||||
|
|
||||||
type HomeMenuProps = {
|
type HomeMenuProps = {
|
||||||
requestClose: () => void;
|
requestClose: () => void;
|
||||||
};
|
};
|
||||||
const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, ref) => {
|
const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, ref) => {
|
||||||
const orphanRooms = useHomeRooms();
|
const orphanRooms = useHomeRooms();
|
||||||
|
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||||
const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
|
const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
|
|
||||||
const handleMarkAsRead = () => {
|
const handleMarkAsRead = () => {
|
||||||
if (!unread) return;
|
if (!unread) return;
|
||||||
orphanRooms.forEach((rId) => markAsRead(mx, rId));
|
orphanRooms.forEach((rId) => markAsRead(mx, rId, hideActivity));
|
||||||
requestClose();
|
requestClose();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -182,6 +182,7 @@ type RoomNotificationsGroupProps = {
|
|||||||
notifications: INotification[];
|
notifications: INotification[];
|
||||||
mediaAutoLoad?: boolean;
|
mediaAutoLoad?: boolean;
|
||||||
urlPreview?: boolean;
|
urlPreview?: boolean;
|
||||||
|
hideActivity: boolean;
|
||||||
onOpen: (roomId: string, eventId: string) => void;
|
onOpen: (roomId: string, eventId: string) => void;
|
||||||
};
|
};
|
||||||
function RoomNotificationsGroupComp({
|
function RoomNotificationsGroupComp({
|
||||||
@@ -189,6 +190,7 @@ function RoomNotificationsGroupComp({
|
|||||||
notifications,
|
notifications,
|
||||||
mediaAutoLoad,
|
mediaAutoLoad,
|
||||||
urlPreview,
|
urlPreview,
|
||||||
|
hideActivity,
|
||||||
onOpen,
|
onOpen,
|
||||||
}: RoomNotificationsGroupProps) {
|
}: RoomNotificationsGroupProps) {
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
@@ -362,7 +364,7 @@ function RoomNotificationsGroupComp({
|
|||||||
onOpen(room.roomId, eventId);
|
onOpen(room.roomId, eventId);
|
||||||
};
|
};
|
||||||
const handleMarkAsRead = () => {
|
const handleMarkAsRead = () => {
|
||||||
markAsRead(mx, room.roomId);
|
markAsRead(mx, room.roomId, hideActivity);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -496,6 +498,7 @@ const DEFAULT_REFRESH_MS = 7000;
|
|||||||
|
|
||||||
export function Notifications() {
|
export function Notifications() {
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
|
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||||
const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
|
const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
|
||||||
const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
|
const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
|
||||||
const screenSize = useScreenSizeContext();
|
const screenSize = useScreenSizeContext();
|
||||||
@@ -656,6 +659,7 @@ export function Notifications() {
|
|||||||
notifications={group.notifications}
|
notifications={group.notifications}
|
||||||
mediaAutoLoad={mediaAutoLoad}
|
mediaAutoLoad={mediaAutoLoad}
|
||||||
urlPreview={urlPreview}
|
urlPreview={urlPreview}
|
||||||
|
hideActivity={hideActivity}
|
||||||
onOpen={navigateRoom}
|
onOpen={navigateRoom}
|
||||||
/>
|
/>
|
||||||
</VirtualTile>
|
</VirtualTile>
|
||||||
|
|||||||
@@ -23,18 +23,21 @@ import { useNavToActivePathAtom } from '../../../state/hooks/navToActivePath';
|
|||||||
import { useDirectRooms } from '../direct/useDirectRooms';
|
import { useDirectRooms } from '../direct/useDirectRooms';
|
||||||
import { markAsRead } from '../../../../client/action/notifications';
|
import { markAsRead } from '../../../../client/action/notifications';
|
||||||
import { stopPropagation } from '../../../utils/keyboard';
|
import { stopPropagation } from '../../../utils/keyboard';
|
||||||
|
import { settingsAtom } from '../../../state/settings';
|
||||||
|
import { useSetting } from '../../../state/hooks/settings';
|
||||||
|
|
||||||
type DirectMenuProps = {
|
type DirectMenuProps = {
|
||||||
requestClose: () => void;
|
requestClose: () => void;
|
||||||
};
|
};
|
||||||
const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(({ requestClose }, ref) => {
|
const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(({ requestClose }, ref) => {
|
||||||
const orphanRooms = useDirectRooms();
|
const orphanRooms = useDirectRooms();
|
||||||
|
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||||
const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
|
const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
|
|
||||||
const handleMarkAsRead = () => {
|
const handleMarkAsRead = () => {
|
||||||
if (!unread) return;
|
if (!unread) return;
|
||||||
orphanRooms.forEach((rId) => markAsRead(mx, rId));
|
orphanRooms.forEach((rId) => markAsRead(mx, rId, hideActivity));
|
||||||
requestClose();
|
requestClose();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -24,18 +24,21 @@ import { useNavToActivePathAtom } from '../../../state/hooks/navToActivePath';
|
|||||||
import { useHomeRooms } from '../home/useHomeRooms';
|
import { useHomeRooms } from '../home/useHomeRooms';
|
||||||
import { markAsRead } from '../../../../client/action/notifications';
|
import { markAsRead } from '../../../../client/action/notifications';
|
||||||
import { stopPropagation } from '../../../utils/keyboard';
|
import { stopPropagation } from '../../../utils/keyboard';
|
||||||
|
import { useSetting } from '../../../state/hooks/settings';
|
||||||
|
import { settingsAtom } from '../../../state/settings';
|
||||||
|
|
||||||
type HomeMenuProps = {
|
type HomeMenuProps = {
|
||||||
requestClose: () => void;
|
requestClose: () => void;
|
||||||
};
|
};
|
||||||
const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, ref) => {
|
const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, ref) => {
|
||||||
const orphanRooms = useHomeRooms();
|
const orphanRooms = useHomeRooms();
|
||||||
|
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||||
const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
|
const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
|
|
||||||
const handleMarkAsRead = () => {
|
const handleMarkAsRead = () => {
|
||||||
if (!unread) return;
|
if (!unread) return;
|
||||||
orphanRooms.forEach((rId) => markAsRead(mx, rId));
|
orphanRooms.forEach((rId) => markAsRead(mx, rId, hideActivity));
|
||||||
requestClose();
|
requestClose();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -88,6 +88,8 @@ import { getMatrixToRoom } from '../../../plugins/matrix-to';
|
|||||||
import { getViaServers } from '../../../plugins/via-servers';
|
import { getViaServers } from '../../../plugins/via-servers';
|
||||||
import { getRoomAvatarUrl } from '../../../utils/room';
|
import { getRoomAvatarUrl } from '../../../utils/room';
|
||||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
||||||
|
import { useSetting } from '../../../state/hooks/settings';
|
||||||
|
import { settingsAtom } from '../../../state/settings';
|
||||||
|
|
||||||
type SpaceMenuProps = {
|
type SpaceMenuProps = {
|
||||||
room: Room;
|
room: Room;
|
||||||
@@ -97,6 +99,7 @@ type SpaceMenuProps = {
|
|||||||
const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
|
const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
|
||||||
({ room, requestClose, onUnpin }, ref) => {
|
({ room, requestClose, onUnpin }, ref) => {
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
|
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||||
const roomToParents = useAtomValue(roomToParentsAtom);
|
const roomToParents = useAtomValue(roomToParentsAtom);
|
||||||
const powerLevels = usePowerLevels(room);
|
const powerLevels = usePowerLevels(room);
|
||||||
const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
|
const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
|
||||||
@@ -110,7 +113,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
|
|||||||
const unread = useRoomsUnread(allChild, roomToUnreadAtom);
|
const unread = useRoomsUnread(allChild, roomToUnreadAtom);
|
||||||
|
|
||||||
const handleMarkAsRead = () => {
|
const handleMarkAsRead = () => {
|
||||||
allChild.forEach((childRoomId) => markAsRead(mx, childRoomId));
|
allChild.forEach((childRoomId) => markAsRead(mx, childRoomId, hideActivity));
|
||||||
requestClose();
|
requestClose();
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -227,18 +230,18 @@ const useDraggableItem = (
|
|||||||
return !target
|
return !target
|
||||||
? undefined
|
? undefined
|
||||||
: draggable({
|
: draggable({
|
||||||
element: target,
|
element: target,
|
||||||
dragHandle,
|
dragHandle,
|
||||||
getInitialData: () => ({ item }),
|
getInitialData: () => ({ item }),
|
||||||
onDragStart: () => {
|
onDragStart: () => {
|
||||||
setDragging(true);
|
setDragging(true);
|
||||||
onDragging?.(item);
|
onDragging?.(item);
|
||||||
},
|
},
|
||||||
onDrop: () => {
|
onDrop: () => {
|
||||||
setDragging(false);
|
setDragging(false);
|
||||||
onDragging?.(undefined);
|
onDragging?.(undefined);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}, [targetRef, dragHandleRef, item, onDragging]);
|
}, [targetRef, dragHandleRef, item, onDragging]);
|
||||||
|
|
||||||
return dragging;
|
return dragging;
|
||||||
@@ -388,9 +391,9 @@ function SpaceTab({
|
|||||||
() =>
|
() =>
|
||||||
folder
|
folder
|
||||||
? {
|
? {
|
||||||
folder,
|
folder,
|
||||||
spaceId: space.roomId,
|
spaceId: space.roomId,
|
||||||
}
|
}
|
||||||
: space.roomId,
|
: space.roomId,
|
||||||
[folder, space]
|
[folder, space]
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -69,6 +69,8 @@ import { StateEvent } from '../../../../types/matrix/room';
|
|||||||
import { stopPropagation } from '../../../utils/keyboard';
|
import { stopPropagation } from '../../../utils/keyboard';
|
||||||
import { getMatrixToRoom } from '../../../plugins/matrix-to';
|
import { getMatrixToRoom } from '../../../plugins/matrix-to';
|
||||||
import { getViaServers } from '../../../plugins/via-servers';
|
import { getViaServers } from '../../../plugins/via-servers';
|
||||||
|
import { useSetting } from '../../../state/hooks/settings';
|
||||||
|
import { settingsAtom } from '../../../state/settings';
|
||||||
|
|
||||||
type SpaceMenuProps = {
|
type SpaceMenuProps = {
|
||||||
room: Room;
|
room: Room;
|
||||||
@@ -76,6 +78,7 @@ type SpaceMenuProps = {
|
|||||||
};
|
};
|
||||||
const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClose }, ref) => {
|
const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClose }, ref) => {
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
|
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||||
const roomToParents = useAtomValue(roomToParentsAtom);
|
const roomToParents = useAtomValue(roomToParentsAtom);
|
||||||
const powerLevels = usePowerLevels(room);
|
const powerLevels = usePowerLevels(room);
|
||||||
const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
|
const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
|
||||||
@@ -89,7 +92,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
|
|||||||
const unread = useRoomsUnread(allChild, roomToUnreadAtom);
|
const unread = useRoomsUnread(allChild, roomToUnreadAtom);
|
||||||
|
|
||||||
const handleMarkAsRead = () => {
|
const handleMarkAsRead = () => {
|
||||||
allChild.forEach((childRoomId) => markAsRead(mx, childRoomId));
|
allChild.forEach((childRoomId) => markAsRead(mx, childRoomId, hideActivity));
|
||||||
requestClose();
|
requestClose();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -112,6 +112,7 @@ export const LinkRule: InlineMDRule = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const INLINE_SEQUENCE_SET = '[*_~`|]';
|
export const INLINE_SEQUENCE_SET = '[*_~`|]';
|
||||||
|
export const CAP_INLINE_SEQ = `${URL_NEG_LB}${INLINE_SEQUENCE_SET}`;
|
||||||
const ESC_SEQ_1 = `\\\\(${INLINE_SEQUENCE_SET})`;
|
const ESC_SEQ_1 = `\\\\(${INLINE_SEQUENCE_SET})`;
|
||||||
const ESC_REG_1 = new RegExp(`${URL_NEG_LB}${ESC_SEQ_1}`);
|
const ESC_REG_1 = new RegExp(`${URL_NEG_LB}${ESC_SEQ_1}`);
|
||||||
export const EscapeRule: InlineMDRule = {
|
export const EscapeRule: InlineMDRule = {
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { findAndReplace } from '../../utils/findAndReplace';
|
import { findAndReplace } from '../../utils/findAndReplace';
|
||||||
import { ESC_BLOCK_SEQ, UN_ESC_BLOCK_SEQ } from './block/rules';
|
import { ESC_BLOCK_SEQ, UN_ESC_BLOCK_SEQ } from './block/rules';
|
||||||
import { EscapeRule, INLINE_SEQUENCE_SET } from './inline/rules';
|
import { EscapeRule, CAP_INLINE_SEQ } from './inline/rules';
|
||||||
import { runInlineRule } from './inline/runner';
|
import { runInlineRule } from './inline/runner';
|
||||||
import { replaceMatch } from './internal';
|
import { replaceMatch } from './internal';
|
||||||
|
|
||||||
@@ -27,7 +27,7 @@ export const unescapeMarkdownInlineSequences = (text: string): string =>
|
|||||||
* @returns The plain-text with markdown escape sequences added (e.g., `"some \*italic\*"`)
|
* @returns The plain-text with markdown escape sequences added (e.g., `"some \*italic\*"`)
|
||||||
*/
|
*/
|
||||||
export const escapeMarkdownInlineSequences = (text: string): string => {
|
export const escapeMarkdownInlineSequences = (text: string): string => {
|
||||||
const regex = new RegExp(`(${INLINE_SEQUENCE_SET})`, 'g');
|
const regex = new RegExp(`(${CAP_INLINE_SEQ})`, 'g');
|
||||||
const parts = findAndReplace(
|
const parts = findAndReplace(
|
||||||
text,
|
text,
|
||||||
regex,
|
regex,
|
||||||
|
|||||||
@@ -228,20 +228,18 @@ export const useBindRoomToUnreadAtom = (
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleReceipt = (mEvent: MatrixEvent, room: Room) => {
|
const handleReceipt = (mEvent: MatrixEvent, room: Room) => {
|
||||||
if (mEvent.getType() === 'm.receipt') {
|
const myUserId = mx.getUserId();
|
||||||
const myUserId = mx.getUserId();
|
if (!myUserId) return;
|
||||||
if (!myUserId) return;
|
if (room.isSpaceRoom()) return;
|
||||||
if (room.isSpaceRoom()) return;
|
const content = mEvent.getContent<ReceiptContent>();
|
||||||
const content = mEvent.getContent<ReceiptContent>();
|
|
||||||
|
|
||||||
const isMyReceipt = Object.keys(content).find((eventId) =>
|
const isMyReceipt = Object.keys(content).find((eventId) =>
|
||||||
(Object.keys(content[eventId]) as ReceiptType[]).find(
|
(Object.keys(content[eventId]) as ReceiptType[]).find(
|
||||||
(receiptType) => content[eventId][receiptType][myUserId]
|
(receiptType) => content[eventId][receiptType][myUserId]
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
if (isMyReceipt) {
|
if (isMyReceipt) {
|
||||||
setUnreadAtom({ type: 'DELETE', roomId: room.roomId });
|
setUnreadAtom({ type: 'DELETE', roomId: room.roomId });
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
mx.on(RoomEvent.Receipt, handleReceipt);
|
mx.on(RoomEvent.Receipt, handleReceipt);
|
||||||
|
|||||||
@@ -17,6 +17,7 @@ export interface Settings {
|
|||||||
editorToolbar: boolean;
|
editorToolbar: boolean;
|
||||||
twitterEmoji: boolean;
|
twitterEmoji: boolean;
|
||||||
pageZoom: number;
|
pageZoom: number;
|
||||||
|
hideActivity: boolean;
|
||||||
|
|
||||||
isPeopleDrawer: boolean;
|
isPeopleDrawer: boolean;
|
||||||
memberSortFilterIndex: number;
|
memberSortFilterIndex: number;
|
||||||
@@ -45,6 +46,7 @@ const defaultSettings: Settings = {
|
|||||||
editorToolbar: false,
|
editorToolbar: false,
|
||||||
twitterEmoji: false,
|
twitterEmoji: false,
|
||||||
pageZoom: 100,
|
pageZoom: 100,
|
||||||
|
hideActivity: false,
|
||||||
|
|
||||||
isPeopleDrawer: true,
|
isPeopleDrawer: true,
|
||||||
memberSortFilterIndex: 0,
|
memberSortFilterIndex: 0,
|
||||||
|
|||||||
@@ -2,6 +2,8 @@ import produce from 'immer';
|
|||||||
import { atom, useSetAtom } from 'jotai';
|
import { atom, useSetAtom } from 'jotai';
|
||||||
import { MatrixClient, RoomMemberEvent, RoomMemberEventHandlerMap } from 'matrix-js-sdk';
|
import { MatrixClient, RoomMemberEvent, RoomMemberEventHandlerMap } from 'matrix-js-sdk';
|
||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
|
import { useSetting } from './hooks/settings';
|
||||||
|
import { settingsAtom } from './settings';
|
||||||
|
|
||||||
export const TYPING_TIMEOUT_MS = 5000; // 5 seconds
|
export const TYPING_TIMEOUT_MS = 5000; // 5 seconds
|
||||||
|
|
||||||
@@ -127,12 +129,16 @@ export const useBindRoomIdToTypingMembersAtom = (
|
|||||||
typingMembersAtom: typeof roomIdToTypingMembersAtom
|
typingMembersAtom: typeof roomIdToTypingMembersAtom
|
||||||
) => {
|
) => {
|
||||||
const setTypingMembers = useSetAtom(typingMembersAtom);
|
const setTypingMembers = useSetAtom(typingMembersAtom);
|
||||||
|
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleTypingEvent: RoomMemberEventHandlerMap[RoomMemberEvent.Typing] = (
|
const handleTypingEvent: RoomMemberEventHandlerMap[RoomMemberEvent.Typing] = (
|
||||||
event,
|
event,
|
||||||
member
|
member
|
||||||
) => {
|
) => {
|
||||||
|
if (hideActivity) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
setTypingMembers({
|
setTypingMembers({
|
||||||
type: member.typing ? 'PUT' : 'DELETE',
|
type: member.typing ? 'PUT' : 'DELETE',
|
||||||
roomId: member.roomId,
|
roomId: member.roomId,
|
||||||
@@ -145,5 +151,5 @@ export const useBindRoomIdToTypingMembersAtom = (
|
|||||||
return () => {
|
return () => {
|
||||||
mx.removeListener(RoomMemberEvent.Typing, handleTypingEvent);
|
mx.removeListener(RoomMemberEvent.Typing, handleTypingEvent);
|
||||||
};
|
};
|
||||||
}, [mx, setTypingMembers]);
|
}, [mx, setTypingMembers, hideActivity]);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { MatrixClient } from "matrix-js-sdk";
|
import { MatrixClient, ReceiptType } from 'matrix-js-sdk';
|
||||||
|
|
||||||
export async function markAsRead(mx: MatrixClient, roomId: string) {
|
export async function markAsRead(mx: MatrixClient, roomId: string, privateReceipt: boolean) {
|
||||||
const room = mx.getRoom(roomId);
|
const room = mx.getRoom(roomId);
|
||||||
if (!room) return;
|
if (!room) return;
|
||||||
|
|
||||||
@@ -19,5 +19,8 @@ export async function markAsRead(mx: MatrixClient, roomId: string) {
|
|||||||
const latestEvent = getLatestValidEvent();
|
const latestEvent = getLatestValidEvent();
|
||||||
if (latestEvent === null) return;
|
if (latestEvent === null) return;
|
||||||
|
|
||||||
await mx.sendReadReceipt(latestEvent);
|
await mx.sendReadReceipt(
|
||||||
|
latestEvent,
|
||||||
|
privateReceipt ? ReceiptType.ReadPrivate : ReceiptType.Read
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
const cons = {
|
const cons = {
|
||||||
version: '4.4.0',
|
version: '4.5.0',
|
||||||
secretKey: {
|
secretKey: {
|
||||||
ACCESS_TOKEN: 'cinny_access_token',
|
ACCESS_TOKEN: 'cinny_access_token',
|
||||||
DEVICE_ID: 'cinny_device_id',
|
DEVICE_ID: 'cinny_device_id',
|
||||||
|
|||||||
Reference in New Issue
Block a user