commit
29896dfe0e
1
.github/ISSUE_TEMPLATE/bug_report.md
vendored
1
.github/ISSUE_TEMPLATE/bug_report.md
vendored
|
@ -9,6 +9,7 @@ assignees: ''
|
|||
|
||||
**Describe the bug**
|
||||
A clear and concise description of what the bug is.
|
||||
- Which site: [e.g. dev.phanpy.social OR phanpy.social]
|
||||
|
||||
**To Reproduce**
|
||||
Steps to reproduce the behavior:
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"importOrder": [
|
||||
"^[^.].*.css$",
|
||||
"index.css$",
|
||||
".css$",
|
||||
"<THIRD_PARTY_MODULES>",
|
||||
|
|
516
package-lock.json
generated
516
package-lock.json
generated
|
@ -9,20 +9,20 @@
|
|||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@github/text-expander-element": "~2.3.0",
|
||||
"@iconify-icons/mingcute": "~1.2.3",
|
||||
"@szhsin/react-menu": "~3.4.0",
|
||||
"@iconify-icons/mingcute": "~1.2.4",
|
||||
"@szhsin/react-menu": "~3.4.1",
|
||||
"dayjs": "~1.11.7",
|
||||
"dayjs-twitter": "~0.5.0",
|
||||
"fast-blurhash": "~1.1.2",
|
||||
"fast-deep-equal": "~3.1.3",
|
||||
"idb-keyval": "~6.2.0",
|
||||
"just-debounce-it": "~3.2.0",
|
||||
"masto": "~5.7.0",
|
||||
"masto": "~5.10.0",
|
||||
"mem": "~9.0.2",
|
||||
"p-retry": "~5.1.2",
|
||||
"preact": "~10.11.3",
|
||||
"react-hotkeys-hook": "~4.3.3",
|
||||
"react-intersection-observer": "~9.4.1",
|
||||
"preact": "~10.12.1",
|
||||
"react-hotkeys-hook": "~4.3.5",
|
||||
"react-intersection-observer": "~9.4.2",
|
||||
"react-router-dom": "6.6.2",
|
||||
"string-length": "~5.0.1",
|
||||
"swiped-events": "~1.1.7",
|
||||
|
@ -30,7 +30,7 @@
|
|||
"uid": "~2.0.1",
|
||||
"use-debounce": "~9.0.3",
|
||||
"use-resize-observer": "~9.1.0",
|
||||
"valtio": "~1.9.0"
|
||||
"valtio": "1.9.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@preact/preset-vite": "~2.5.0",
|
||||
|
@ -39,11 +39,11 @@
|
|||
"postcss-dark-theme-class": "~0.7.3",
|
||||
"postcss-preset-env": "~8.0.1",
|
||||
"twitter-text": "~3.1.0",
|
||||
"vite": "~4.0.4",
|
||||
"vite": "~4.1.2",
|
||||
"vite-plugin-html-config": "~1.0.11",
|
||||
"vite-plugin-html-env": "~1.2.7",
|
||||
"vite-plugin-pwa": "~0.14.1",
|
||||
"vite-plugin-remove-console": "~1.3.0",
|
||||
"vite-plugin-pwa": "~0.14.4",
|
||||
"vite-plugin-remove-console": "~2.0.0",
|
||||
"workbox-cacheable-response": "~6.5.4",
|
||||
"workbox-expiration": "~6.5.4",
|
||||
"workbox-routing": "~6.5.4",
|
||||
|
@ -2155,9 +2155,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/android-arm": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.16.7.tgz",
|
||||
"integrity": "sha512-yhzDbiVcmq6T1/XEvdcJIVcXHdLjDJ5cQ0Dp9R9p9ERMBTeO1dR5tc8YYv8zwDeBw1xZm+Eo3MRo8cwclhBS0g==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.16.17.tgz",
|
||||
"integrity": "sha512-N9x1CMXVhtWEAMS7pNNONyA14f71VPQN9Cnavj1XQh6T7bskqiLLrSca4O0Vr8Wdcga943eThxnVp3JLnBMYtw==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
|
@ -2171,9 +2171,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/android-arm64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.16.7.tgz",
|
||||
"integrity": "sha512-tYFw0lBJSEvLoGzzYh1kXuzoX1iPkbOk3O29VqzQb0HbOy7t/yw1hGkvwoJhXHwzQUPsShyYcTgRf6bDBcfnTw==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.16.17.tgz",
|
||||
"integrity": "sha512-MIGl6p5sc3RDTLLkYL1MyL8BMRN4tLMRCn+yRJJmEDvYZ2M7tmAf80hx1kbNEUX2KJ50RRtxZ4JHLvCfuB6kBg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
|
@ -2187,9 +2187,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/android-x64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.16.7.tgz",
|
||||
"integrity": "sha512-3P2OuTxwAtM3k/yEWTNUJRjMPG1ce8rXs51GTtvEC5z1j8fC1plHeVVczdeHECU7aM2/Buc0MwZ6ciM/zysnWg==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.16.17.tgz",
|
||||
"integrity": "sha512-a3kTv3m0Ghh4z1DaFEuEDfz3OLONKuFvI4Xqczqx4BqLyuFaFkuaG4j2MtA6fuWEFeC5x9IvqnX7drmRq/fyAQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
|
@ -2203,9 +2203,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/darwin-arm64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.16.7.tgz",
|
||||
"integrity": "sha512-VUb9GK23z8jkosHU9yJNUgQpsfJn+7ZyBm6adi2Ec5/U241eR1tAn82QicnUzaFDaffeixiHwikjmnec/YXEZg==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.16.17.tgz",
|
||||
"integrity": "sha512-/2agbUEfmxWHi9ARTX6OQ/KgXnOWfsNlTeLcoV7HSuSTv63E4DqtAc+2XqGw1KHxKMHGZgbVCZge7HXWX9Vn+w==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
|
@ -2219,9 +2219,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/darwin-x64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.16.7.tgz",
|
||||
"integrity": "sha512-duterlv3tit3HI9vhzMWnSVaB1B6YsXpFq1Ntd6Fou82BB1l4tucYy3FI9dHv3tvtDuS0NiGf/k6XsdBqPZ01w==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.16.17.tgz",
|
||||
"integrity": "sha512-2By45OBHulkd9Svy5IOCZt376Aa2oOkiE9QWUK9fe6Tb+WDr8hXL3dpqi+DeLiMed8tVXspzsTAvd0jUl96wmg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
|
@ -2235,9 +2235,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/freebsd-arm64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.16.7.tgz",
|
||||
"integrity": "sha512-9kkycpBFes/vhi7B7o0cf+q2WdJi+EpVzpVTqtWFNiutARWDFFLcB93J8PR1cG228sucsl3B+7Ts27izE6qiaQ==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.16.17.tgz",
|
||||
"integrity": "sha512-mt+cxZe1tVx489VTb4mBAOo2aKSnJ33L9fr25JXpqQqzbUIw/yzIzi+NHwAXK2qYV1lEFp4OoVeThGjUbmWmdw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
|
@ -2251,9 +2251,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/freebsd-x64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.16.7.tgz",
|
||||
"integrity": "sha512-5Ahf6jzWXJ4J2uh9dpy5DKOO+PeRUE/9DMys6VuYfwgQzd6n5+pVFm58L2Z2gRe611RX6SdydnNaiIKM3svY7g==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.16.17.tgz",
|
||||
"integrity": "sha512-8ScTdNJl5idAKjH8zGAsN7RuWcyHG3BAvMNpKOBaqqR7EbUhhVHOqXRdL7oZvz8WNHL2pr5+eIT5c65kA6NHug==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
|
@ -2267,9 +2267,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-arm": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.16.7.tgz",
|
||||
"integrity": "sha512-QqJnyCfu5OF78Olt7JJSZ7OSv/B4Hf+ZJWp4kkq9xwMsgu7yWq3crIic8gGOpDYTqVKKMDAVDgRXy5Wd/nWZyQ==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.16.17.tgz",
|
||||
"integrity": "sha512-iihzrWbD4gIT7j3caMzKb/RsFFHCwqqbrbH9SqUSRrdXkXaygSZCZg1FybsZz57Ju7N/SHEgPyaR0LZ8Zbe9gQ==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
|
@ -2283,9 +2283,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-arm64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.16.7.tgz",
|
||||
"integrity": "sha512-2wv0xYDskk2+MzIm/AEprDip39a23Chptc4mL7hsHg26P0gD8RUhzmDu0KCH2vMThUI1sChXXoK9uH0KYQKaDg==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.16.17.tgz",
|
||||
"integrity": "sha512-7S8gJnSlqKGVJunnMCrXHU9Q8Q/tQIxk/xL8BqAP64wchPCTzuM6W3Ra8cIa1HIflAvDnNOt2jaL17vaW+1V0g==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
|
@ -2299,9 +2299,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-ia32": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.16.7.tgz",
|
||||
"integrity": "sha512-APVYbEilKbD5ptmKdnIcXej2/+GdV65TfTjxR2Uk8t1EsOk49t6HapZW6DS/Bwlvh5hDwtLapdSumIVNGxgqLg==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.16.17.tgz",
|
||||
"integrity": "sha512-kiX69+wcPAdgl3Lonh1VI7MBr16nktEvOfViszBSxygRQqSpzv7BffMKRPMFwzeJGPxcio0pdD3kYQGpqQ2SSg==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
|
@ -2315,9 +2315,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-loong64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.16.7.tgz",
|
||||
"integrity": "sha512-5wPUAGclplQrAW7EFr3F84Y/d++7G0KykohaF4p54+iNWhUnMVU8Bh2sxiEOXUy4zKIdpHByMgJ5/Ko6QhtTUw==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.16.17.tgz",
|
||||
"integrity": "sha512-dTzNnQwembNDhd654cA4QhbS9uDdXC3TKqMJjgOWsC0yNCbpzfWoXdZvp0mY7HU6nzk5E0zpRGGx3qoQg8T2DQ==",
|
||||
"cpu": [
|
||||
"loong64"
|
||||
],
|
||||
|
@ -2331,9 +2331,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-mips64el": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.16.7.tgz",
|
||||
"integrity": "sha512-hxzlXtWF6yWfkE/SMTscNiVqLOAn7fOuIF3q/kiZaXxftz1DhZW/HpnTmTTWrzrS7zJWQxHHT4QSxyAj33COmA==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.16.17.tgz",
|
||||
"integrity": "sha512-ezbDkp2nDl0PfIUn0CsQ30kxfcLTlcx4Foz2kYv8qdC6ia2oX5Q3E/8m6lq84Dj/6b0FrkgD582fJMIfHhJfSw==",
|
||||
"cpu": [
|
||||
"mips64el"
|
||||
],
|
||||
|
@ -2347,9 +2347,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-ppc64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.16.7.tgz",
|
||||
"integrity": "sha512-WM83Dac0LdXty5xPhlOuCD5Egfk1xLND/oRLYeB7Jb/tY4kzFSDgLlq91wYbHua/s03tQGA9iXvyjgymMw62Vw==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.16.17.tgz",
|
||||
"integrity": "sha512-dzS678gYD1lJsW73zrFhDApLVdM3cUF2MvAa1D8K8KtcSKdLBPP4zZSLy6LFZ0jYqQdQ29bjAHJDgz0rVbLB3g==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
|
@ -2363,9 +2363,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-riscv64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.16.7.tgz",
|
||||
"integrity": "sha512-3nkNnNg4Ax6MS/l8O8Ynq2lGEVJYyJ2EoY3PHjNJ4PuZ80EYLMrFTFZ4L/Hc16AxgtXKwmNP9TM0YKNiBzBiJQ==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.16.17.tgz",
|
||||
"integrity": "sha512-ylNlVsxuFjZK8DQtNUwiMskh6nT0vI7kYl/4fZgV1llP5d6+HIeL/vmmm3jpuoo8+NuXjQVZxmKuhDApK0/cKw==",
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
|
@ -2379,9 +2379,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-s390x": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.16.7.tgz",
|
||||
"integrity": "sha512-3SA/2VJuv0o1uD7zuqxEP+RrAyRxnkGddq0bwHQ98v1KNlzXD/JvxwTO3T6GM5RH6JUd29RTVQTOJfyzMkkppA==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.16.17.tgz",
|
||||
"integrity": "sha512-gzy7nUTO4UA4oZ2wAMXPNBGTzZFP7mss3aKR2hH+/4UUkCOyqmjXiKpzGrY2TlEUhbbejzXVKKGazYcQTZWA/w==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
|
@ -2395,9 +2395,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-x64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.16.7.tgz",
|
||||
"integrity": "sha512-xi/tbqCqvPIzU+zJVyrpz12xqciTAPMi2fXEWGnapZymoGhuL2GIWIRXg4O2v5BXaYA5TSaiKYE14L0QhUTuQg==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.16.17.tgz",
|
||||
"integrity": "sha512-mdPjPxfnmoqhgpiEArqi4egmBAMYvaObgn4poorpUaqmvzzbvqbowRllQ+ZgzGVMGKaPkqUmPDOOFQRUFDmeUw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
|
@ -2411,9 +2411,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/netbsd-x64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.16.7.tgz",
|
||||
"integrity": "sha512-NUsYbq3B+JdNKn8SXkItFvdes9qTwEoS3aLALtiWciW/ystiCKM20Fgv9XQBOXfhUHyh5CLEeZDXzLOrwBXuCQ==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.16.17.tgz",
|
||||
"integrity": "sha512-/PzmzD/zyAeTUsduZa32bn0ORug+Jd1EGGAUJvqfeixoEISYpGnAezN6lnJoskauoai0Jrs+XSyvDhppCPoKOA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
|
@ -2427,9 +2427,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/openbsd-x64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.16.7.tgz",
|
||||
"integrity": "sha512-qjwzsgeve9I8Tbsko2FEkdSk2iiezuNGFgipQxY/736NePXDaDZRodIejYGWOlbYXugdxb0nif5yvypH6lKBmA==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.16.17.tgz",
|
||||
"integrity": "sha512-2yaWJhvxGEz2RiftSk0UObqJa/b+rIAjnODJgv2GbGGpRwAfpgzyrg1WLK8rqA24mfZa9GvpjLcBBg8JHkoodg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
|
@ -2443,9 +2443,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/sunos-x64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.16.7.tgz",
|
||||
"integrity": "sha512-mFWDz4RoBTzPphTCkM7Kc7Qpa0o/Z01acajR+Ai7LdfKgcP/C6jYOaKwv7nKzD0+MjOT20j7You9g4ozYy1dKQ==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.16.17.tgz",
|
||||
"integrity": "sha512-xtVUiev38tN0R3g8VhRfN7Zl42YCJvyBhRKw1RJjwE1d2emWTVToPLNEQj/5Qxc6lVFATDiy6LjVHYhIPrLxzw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
|
@ -2459,9 +2459,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/win32-arm64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.16.7.tgz",
|
||||
"integrity": "sha512-m39UmX19RvEIuC8sYZ0M+eQtdXw4IePDSZ78ZQmYyFaXY9krq4YzQCK2XWIJomNLtg4q+W5aXr8bW3AbqWNoVg==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.16.17.tgz",
|
||||
"integrity": "sha512-ga8+JqBDHY4b6fQAmOgtJJue36scANy4l/rL97W+0wYmijhxKetzZdKOJI7olaBaMhWt8Pac2McJdZLxXWUEQw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
|
@ -2475,9 +2475,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/win32-ia32": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.16.7.tgz",
|
||||
"integrity": "sha512-1cbzSEZA1fANwmT6rjJ4G1qQXHxCxGIcNYFYR9ctI82/prT38lnwSRZ0i5p/MVXksw9eMlHlet6pGu2/qkXFCg==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.16.17.tgz",
|
||||
"integrity": "sha512-WnsKaf46uSSF/sZhwnqE4L/F89AYNMiD4YtEcYekBt9Q7nj0DiId2XH2Ng2PHM54qi5oPrQ8luuzGszqi/veig==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
|
@ -2491,9 +2491,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@esbuild/win32-x64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.16.7.tgz",
|
||||
"integrity": "sha512-QaQ8IH0JLacfGf5cf0HCCPnQuCTd/dAI257vXBgb/cccKGbH/6pVtI1gwhdAQ0Y48QSpTIFrh9etVyNdZY+zzw==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.16.17.tgz",
|
||||
"integrity": "sha512-y+EHuSchhL7FjHgvQL/0fnnFmO4T1bhvWANX6gcnqTjtnKWbTvUMCpGnv2+t+31d7RzyEAYAd4u2fnIhHL6N/Q==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
|
@ -2520,9 +2520,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@iconify-icons/mingcute": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@iconify-icons/mingcute/-/mingcute-1.2.3.tgz",
|
||||
"integrity": "sha512-yZyioZhNy61SkLxQoyHThsfuyaOej9n84PUS+K69qaS1Dyj7/wHwYhWXseFCnzyzicaEHkCpt6H/hYV8fwmMLg==",
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/@iconify-icons/mingcute/-/mingcute-1.2.4.tgz",
|
||||
"integrity": "sha512-4aaWYa6GxSdYmJg8iBVx6VDuKUcTDEbio929+GrswoxfyTsPUkOOgw2wffUDHjE3JDUAnrWj9teQTnBkFm7Gyg==",
|
||||
"dependencies": {
|
||||
"@iconify/types": "*"
|
||||
}
|
||||
|
@ -2810,9 +2810,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@szhsin/react-menu": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@szhsin/react-menu/-/react-menu-3.4.0.tgz",
|
||||
"integrity": "sha512-BRxUF3BNmaQzL1z8UkS/eNFj+5ZPjBOpsYWP/ZtrzHNkkP6hUc+tYerBV4dwFiGYmWzkxyOP44ISn+EujwPpUw==",
|
||||
"version": "3.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@szhsin/react-menu/-/react-menu-3.4.1.tgz",
|
||||
"integrity": "sha512-Pxt7Kyp3yuX7zkT5tjdLRJGNFMa5Tx4BP+01gJ/dnMmHQpI1H2or9gEC0X+t3cLldO3LGmm4ViGypNCmQLv/4A==",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.7.2",
|
||||
"react-transition-state": "^1.1.5"
|
||||
|
@ -3719,9 +3719,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.16.7.tgz",
|
||||
"integrity": "sha512-P6OBFYFSQOGzfApqCeYKqfKRRbCIRsdppTXFo4aAvtiW3o8TTyiIplBvHJI171saPAiy3WlawJHCveJVIOIx1A==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.16.17.tgz",
|
||||
"integrity": "sha512-G8LEkV0XzDMNwXKgM0Jwu3nY3lSTwSGY6XbxM9cr9+s0T/qSV1q1JVPBGzm3dcjhCic9+emZDmMffkwgPeOeLg==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
|
@ -3731,28 +3731,28 @@
|
|||
"node": ">=12"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@esbuild/android-arm": "0.16.7",
|
||||
"@esbuild/android-arm64": "0.16.7",
|
||||
"@esbuild/android-x64": "0.16.7",
|
||||
"@esbuild/darwin-arm64": "0.16.7",
|
||||
"@esbuild/darwin-x64": "0.16.7",
|
||||
"@esbuild/freebsd-arm64": "0.16.7",
|
||||
"@esbuild/freebsd-x64": "0.16.7",
|
||||
"@esbuild/linux-arm": "0.16.7",
|
||||
"@esbuild/linux-arm64": "0.16.7",
|
||||
"@esbuild/linux-ia32": "0.16.7",
|
||||
"@esbuild/linux-loong64": "0.16.7",
|
||||
"@esbuild/linux-mips64el": "0.16.7",
|
||||
"@esbuild/linux-ppc64": "0.16.7",
|
||||
"@esbuild/linux-riscv64": "0.16.7",
|
||||
"@esbuild/linux-s390x": "0.16.7",
|
||||
"@esbuild/linux-x64": "0.16.7",
|
||||
"@esbuild/netbsd-x64": "0.16.7",
|
||||
"@esbuild/openbsd-x64": "0.16.7",
|
||||
"@esbuild/sunos-x64": "0.16.7",
|
||||
"@esbuild/win32-arm64": "0.16.7",
|
||||
"@esbuild/win32-ia32": "0.16.7",
|
||||
"@esbuild/win32-x64": "0.16.7"
|
||||
"@esbuild/android-arm": "0.16.17",
|
||||
"@esbuild/android-arm64": "0.16.17",
|
||||
"@esbuild/android-x64": "0.16.17",
|
||||
"@esbuild/darwin-arm64": "0.16.17",
|
||||
"@esbuild/darwin-x64": "0.16.17",
|
||||
"@esbuild/freebsd-arm64": "0.16.17",
|
||||
"@esbuild/freebsd-x64": "0.16.17",
|
||||
"@esbuild/linux-arm": "0.16.17",
|
||||
"@esbuild/linux-arm64": "0.16.17",
|
||||
"@esbuild/linux-ia32": "0.16.17",
|
||||
"@esbuild/linux-loong64": "0.16.17",
|
||||
"@esbuild/linux-mips64el": "0.16.17",
|
||||
"@esbuild/linux-ppc64": "0.16.17",
|
||||
"@esbuild/linux-riscv64": "0.16.17",
|
||||
"@esbuild/linux-s390x": "0.16.17",
|
||||
"@esbuild/linux-x64": "0.16.17",
|
||||
"@esbuild/netbsd-x64": "0.16.17",
|
||||
"@esbuild/openbsd-x64": "0.16.17",
|
||||
"@esbuild/sunos-x64": "0.16.17",
|
||||
"@esbuild/win32-arm64": "0.16.17",
|
||||
"@esbuild/win32-ia32": "0.16.17",
|
||||
"@esbuild/win32-x64": "0.16.17"
|
||||
}
|
||||
},
|
||||
"node_modules/escalade": {
|
||||
|
@ -4718,9 +4718,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/masto": {
|
||||
"version": "5.7.0",
|
||||
"resolved": "https://registry.npmjs.org/masto/-/masto-5.7.0.tgz",
|
||||
"integrity": "sha512-oCVReGLR9AoBSkShVgWrPb69xzfCpogiPH9wVT9AnPbM+CvjIqJuSaD1xgaEUi6jo66XGbhTC6UerSCVqq9emg==",
|
||||
"version": "5.10.0",
|
||||
"resolved": "https://registry.npmjs.org/masto/-/masto-5.10.0.tgz",
|
||||
"integrity": "sha512-RlTw3X2b2ipkcgsgoKEWKKFNYkpAlUtJhNOFKwBKWEBv+we/ZupQbnerGOJssB5rs7ig4HWWsZZHLtNeFdYQTQ==",
|
||||
"dependencies": {
|
||||
"@mastojs/ponyfills": "^1.0.4",
|
||||
"change-case": "^4.1.2",
|
||||
|
@ -5650,9 +5650,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/preact": {
|
||||
"version": "10.11.3",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.11.3.tgz",
|
||||
"integrity": "sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg==",
|
||||
"version": "10.12.1",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
|
||||
"integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/preact"
|
||||
|
@ -5779,18 +5779,18 @@
|
|||
}
|
||||
},
|
||||
"node_modules/react-hotkeys-hook": {
|
||||
"version": "4.3.3",
|
||||
"resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.3.3.tgz",
|
||||
"integrity": "sha512-OYZCG2G+xLeiH0TkrW+v6eKFPvYq9iCA5sh9pwvnbGQaK86Lw/kWJDjjzSksFJoCk4K78OLe3MR1afNZH6+cLg==",
|
||||
"version": "4.3.5",
|
||||
"resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.3.5.tgz",
|
||||
"integrity": "sha512-tfwTwKP3ga7n4naNS/JOByaEwEkTCoXYCepDuhXpj8mBx+sFszV5JecRWM2dv+PbOowmmBpHAFtTXTnG/p8UkQ==",
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.1",
|
||||
"react-dom": ">=16.8.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-intersection-observer": {
|
||||
"version": "9.4.1",
|
||||
"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.1.tgz",
|
||||
"integrity": "sha512-IXpIsPe6BleFOEHKzKh5UjwRUaz/JYS0lT/HPsupWEQou2hDqjhLMStc5zyE3eQVT4Fk3FufM8Fw33qW1uyeiw==",
|
||||
"version": "9.4.2",
|
||||
"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.2.tgz",
|
||||
"integrity": "sha512-AdK+ryzZ7U9ZJYttDUZ8q2Am3nqE0exg5Ryl5Y124KeVsix/1hGZPbdu58EqA98TwnzwDNWHxg/kwNawmIiUig==",
|
||||
"peerDependencies": {
|
||||
"react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
|
@ -5978,9 +5978,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "3.7.4",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.7.4.tgz",
|
||||
"integrity": "sha512-jN9rx3k5pfg9H9al0r0y1EYKSeiRANZRYX32SuNXAnKzh6cVyf4LZVto1KAuDnbHT03E1CpsgqDKaqQ8FZtgxw==",
|
||||
"version": "3.12.1",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.12.1.tgz",
|
||||
"integrity": "sha512-t9elERrz2i4UU9z7AwISj3CQcXP39cWxgRWLdf4Tm6aKm1eYrqHIgjzXBgb67GNY1sZckTFFi0oMozh3/S++Ig==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"rollup": "dist/bin/rollup"
|
||||
|
@ -6603,15 +6603,15 @@
|
|||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.0.4.tgz",
|
||||
"integrity": "sha512-xevPU7M8FU0i/80DMR+YhgrzR5KS2ORy1B4xcX/cXLsvnUWvfHuqMmVU6N0YiJ4JWGRJJsLCgjEzKjG9/GKoSw==",
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.1.2.tgz",
|
||||
"integrity": "sha512-MWDb9Rfy3DI8omDQySbMK93nQqStwbsQWejXRY2EBzEWKmLAXWb1mkI9Yw2IJrc+oCvPCI1Os5xSSIBYY6DEAw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.16.3",
|
||||
"postcss": "^8.4.20",
|
||||
"esbuild": "^0.16.14",
|
||||
"postcss": "^8.4.21",
|
||||
"resolve": "^1.22.1",
|
||||
"rollup": "^3.7.0"
|
||||
"rollup": "^3.10.0"
|
||||
},
|
||||
"bin": {
|
||||
"vite": "bin/vite.js"
|
||||
|
@ -6676,9 +6676,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/vite-plugin-pwa": {
|
||||
"version": "0.14.1",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.14.1.tgz",
|
||||
"integrity": "sha512-5zx7yhQ8RTLwV71+GA9YsQQ63ALKG8XXIMqRJDdZkR8ZYftFcRgnzM7wOWmQZ/DATspyhPih5wCdcZnAIsM+mA==",
|
||||
"version": "0.14.4",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.14.4.tgz",
|
||||
"integrity": "sha512-M7Ct0so8OlouMkTWgXnl8W1xU95glITSKIe7qswZf1tniAstO2idElGCnsrTJ5NPNSx1XqfTCOUj8j94S6FD7Q==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@rollup/plugin-replace": "^5.0.1",
|
||||
|
@ -6699,9 +6699,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/vite-plugin-remove-console": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-remove-console/-/vite-plugin-remove-console-1.3.0.tgz",
|
||||
"integrity": "sha512-5a/OLYB6yNRHMuHj9rBQRYMQ1NBKffxA8BaD77urUBLcGOWMHFHALjh6C26wZfZd41KytSwLp6DhvNKU78mNJg==",
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-remove-console/-/vite-plugin-remove-console-2.0.0.tgz",
|
||||
"integrity": "sha512-bEsyShSacsunbm0X1zaVliwgmWlsaBPLk7FN4wr2xQMs8zSZPSwpRNTT5UZiF0+cfMEkN4VVnofITawmT3pjgQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/webidl-conversions": {
|
||||
|
@ -8460,156 +8460,156 @@
|
|||
"requires": {}
|
||||
},
|
||||
"@esbuild/android-arm": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.16.7.tgz",
|
||||
"integrity": "sha512-yhzDbiVcmq6T1/XEvdcJIVcXHdLjDJ5cQ0Dp9R9p9ERMBTeO1dR5tc8YYv8zwDeBw1xZm+Eo3MRo8cwclhBS0g==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.16.17.tgz",
|
||||
"integrity": "sha512-N9x1CMXVhtWEAMS7pNNONyA14f71VPQN9Cnavj1XQh6T7bskqiLLrSca4O0Vr8Wdcga943eThxnVp3JLnBMYtw==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/android-arm64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.16.7.tgz",
|
||||
"integrity": "sha512-tYFw0lBJSEvLoGzzYh1kXuzoX1iPkbOk3O29VqzQb0HbOy7t/yw1hGkvwoJhXHwzQUPsShyYcTgRf6bDBcfnTw==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.16.17.tgz",
|
||||
"integrity": "sha512-MIGl6p5sc3RDTLLkYL1MyL8BMRN4tLMRCn+yRJJmEDvYZ2M7tmAf80hx1kbNEUX2KJ50RRtxZ4JHLvCfuB6kBg==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/android-x64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.16.7.tgz",
|
||||
"integrity": "sha512-3P2OuTxwAtM3k/yEWTNUJRjMPG1ce8rXs51GTtvEC5z1j8fC1plHeVVczdeHECU7aM2/Buc0MwZ6ciM/zysnWg==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.16.17.tgz",
|
||||
"integrity": "sha512-a3kTv3m0Ghh4z1DaFEuEDfz3OLONKuFvI4Xqczqx4BqLyuFaFkuaG4j2MtA6fuWEFeC5x9IvqnX7drmRq/fyAQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/darwin-arm64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.16.7.tgz",
|
||||
"integrity": "sha512-VUb9GK23z8jkosHU9yJNUgQpsfJn+7ZyBm6adi2Ec5/U241eR1tAn82QicnUzaFDaffeixiHwikjmnec/YXEZg==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.16.17.tgz",
|
||||
"integrity": "sha512-/2agbUEfmxWHi9ARTX6OQ/KgXnOWfsNlTeLcoV7HSuSTv63E4DqtAc+2XqGw1KHxKMHGZgbVCZge7HXWX9Vn+w==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/darwin-x64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.16.7.tgz",
|
||||
"integrity": "sha512-duterlv3tit3HI9vhzMWnSVaB1B6YsXpFq1Ntd6Fou82BB1l4tucYy3FI9dHv3tvtDuS0NiGf/k6XsdBqPZ01w==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.16.17.tgz",
|
||||
"integrity": "sha512-2By45OBHulkd9Svy5IOCZt376Aa2oOkiE9QWUK9fe6Tb+WDr8hXL3dpqi+DeLiMed8tVXspzsTAvd0jUl96wmg==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/freebsd-arm64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.16.7.tgz",
|
||||
"integrity": "sha512-9kkycpBFes/vhi7B7o0cf+q2WdJi+EpVzpVTqtWFNiutARWDFFLcB93J8PR1cG228sucsl3B+7Ts27izE6qiaQ==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.16.17.tgz",
|
||||
"integrity": "sha512-mt+cxZe1tVx489VTb4mBAOo2aKSnJ33L9fr25JXpqQqzbUIw/yzIzi+NHwAXK2qYV1lEFp4OoVeThGjUbmWmdw==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/freebsd-x64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.16.7.tgz",
|
||||
"integrity": "sha512-5Ahf6jzWXJ4J2uh9dpy5DKOO+PeRUE/9DMys6VuYfwgQzd6n5+pVFm58L2Z2gRe611RX6SdydnNaiIKM3svY7g==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.16.17.tgz",
|
||||
"integrity": "sha512-8ScTdNJl5idAKjH8zGAsN7RuWcyHG3BAvMNpKOBaqqR7EbUhhVHOqXRdL7oZvz8WNHL2pr5+eIT5c65kA6NHug==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/linux-arm": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.16.7.tgz",
|
||||
"integrity": "sha512-QqJnyCfu5OF78Olt7JJSZ7OSv/B4Hf+ZJWp4kkq9xwMsgu7yWq3crIic8gGOpDYTqVKKMDAVDgRXy5Wd/nWZyQ==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.16.17.tgz",
|
||||
"integrity": "sha512-iihzrWbD4gIT7j3caMzKb/RsFFHCwqqbrbH9SqUSRrdXkXaygSZCZg1FybsZz57Ju7N/SHEgPyaR0LZ8Zbe9gQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/linux-arm64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.16.7.tgz",
|
||||
"integrity": "sha512-2wv0xYDskk2+MzIm/AEprDip39a23Chptc4mL7hsHg26P0gD8RUhzmDu0KCH2vMThUI1sChXXoK9uH0KYQKaDg==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.16.17.tgz",
|
||||
"integrity": "sha512-7S8gJnSlqKGVJunnMCrXHU9Q8Q/tQIxk/xL8BqAP64wchPCTzuM6W3Ra8cIa1HIflAvDnNOt2jaL17vaW+1V0g==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/linux-ia32": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.16.7.tgz",
|
||||
"integrity": "sha512-APVYbEilKbD5ptmKdnIcXej2/+GdV65TfTjxR2Uk8t1EsOk49t6HapZW6DS/Bwlvh5hDwtLapdSumIVNGxgqLg==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.16.17.tgz",
|
||||
"integrity": "sha512-kiX69+wcPAdgl3Lonh1VI7MBr16nktEvOfViszBSxygRQqSpzv7BffMKRPMFwzeJGPxcio0pdD3kYQGpqQ2SSg==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/linux-loong64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.16.7.tgz",
|
||||
"integrity": "sha512-5wPUAGclplQrAW7EFr3F84Y/d++7G0KykohaF4p54+iNWhUnMVU8Bh2sxiEOXUy4zKIdpHByMgJ5/Ko6QhtTUw==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.16.17.tgz",
|
||||
"integrity": "sha512-dTzNnQwembNDhd654cA4QhbS9uDdXC3TKqMJjgOWsC0yNCbpzfWoXdZvp0mY7HU6nzk5E0zpRGGx3qoQg8T2DQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/linux-mips64el": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.16.7.tgz",
|
||||
"integrity": "sha512-hxzlXtWF6yWfkE/SMTscNiVqLOAn7fOuIF3q/kiZaXxftz1DhZW/HpnTmTTWrzrS7zJWQxHHT4QSxyAj33COmA==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.16.17.tgz",
|
||||
"integrity": "sha512-ezbDkp2nDl0PfIUn0CsQ30kxfcLTlcx4Foz2kYv8qdC6ia2oX5Q3E/8m6lq84Dj/6b0FrkgD582fJMIfHhJfSw==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/linux-ppc64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.16.7.tgz",
|
||||
"integrity": "sha512-WM83Dac0LdXty5xPhlOuCD5Egfk1xLND/oRLYeB7Jb/tY4kzFSDgLlq91wYbHua/s03tQGA9iXvyjgymMw62Vw==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.16.17.tgz",
|
||||
"integrity": "sha512-dzS678gYD1lJsW73zrFhDApLVdM3cUF2MvAa1D8K8KtcSKdLBPP4zZSLy6LFZ0jYqQdQ29bjAHJDgz0rVbLB3g==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/linux-riscv64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.16.7.tgz",
|
||||
"integrity": "sha512-3nkNnNg4Ax6MS/l8O8Ynq2lGEVJYyJ2EoY3PHjNJ4PuZ80EYLMrFTFZ4L/Hc16AxgtXKwmNP9TM0YKNiBzBiJQ==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.16.17.tgz",
|
||||
"integrity": "sha512-ylNlVsxuFjZK8DQtNUwiMskh6nT0vI7kYl/4fZgV1llP5d6+HIeL/vmmm3jpuoo8+NuXjQVZxmKuhDApK0/cKw==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/linux-s390x": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.16.7.tgz",
|
||||
"integrity": "sha512-3SA/2VJuv0o1uD7zuqxEP+RrAyRxnkGddq0bwHQ98v1KNlzXD/JvxwTO3T6GM5RH6JUd29RTVQTOJfyzMkkppA==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.16.17.tgz",
|
||||
"integrity": "sha512-gzy7nUTO4UA4oZ2wAMXPNBGTzZFP7mss3aKR2hH+/4UUkCOyqmjXiKpzGrY2TlEUhbbejzXVKKGazYcQTZWA/w==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/linux-x64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.16.7.tgz",
|
||||
"integrity": "sha512-xi/tbqCqvPIzU+zJVyrpz12xqciTAPMi2fXEWGnapZymoGhuL2GIWIRXg4O2v5BXaYA5TSaiKYE14L0QhUTuQg==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.16.17.tgz",
|
||||
"integrity": "sha512-mdPjPxfnmoqhgpiEArqi4egmBAMYvaObgn4poorpUaqmvzzbvqbowRllQ+ZgzGVMGKaPkqUmPDOOFQRUFDmeUw==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/netbsd-x64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.16.7.tgz",
|
||||
"integrity": "sha512-NUsYbq3B+JdNKn8SXkItFvdes9qTwEoS3aLALtiWciW/ystiCKM20Fgv9XQBOXfhUHyh5CLEeZDXzLOrwBXuCQ==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.16.17.tgz",
|
||||
"integrity": "sha512-/PzmzD/zyAeTUsduZa32bn0ORug+Jd1EGGAUJvqfeixoEISYpGnAezN6lnJoskauoai0Jrs+XSyvDhppCPoKOA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/openbsd-x64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.16.7.tgz",
|
||||
"integrity": "sha512-qjwzsgeve9I8Tbsko2FEkdSk2iiezuNGFgipQxY/736NePXDaDZRodIejYGWOlbYXugdxb0nif5yvypH6lKBmA==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.16.17.tgz",
|
||||
"integrity": "sha512-2yaWJhvxGEz2RiftSk0UObqJa/b+rIAjnODJgv2GbGGpRwAfpgzyrg1WLK8rqA24mfZa9GvpjLcBBg8JHkoodg==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/sunos-x64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.16.7.tgz",
|
||||
"integrity": "sha512-mFWDz4RoBTzPphTCkM7Kc7Qpa0o/Z01acajR+Ai7LdfKgcP/C6jYOaKwv7nKzD0+MjOT20j7You9g4ozYy1dKQ==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.16.17.tgz",
|
||||
"integrity": "sha512-xtVUiev38tN0R3g8VhRfN7Zl42YCJvyBhRKw1RJjwE1d2emWTVToPLNEQj/5Qxc6lVFATDiy6LjVHYhIPrLxzw==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/win32-arm64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.16.7.tgz",
|
||||
"integrity": "sha512-m39UmX19RvEIuC8sYZ0M+eQtdXw4IePDSZ78ZQmYyFaXY9krq4YzQCK2XWIJomNLtg4q+W5aXr8bW3AbqWNoVg==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.16.17.tgz",
|
||||
"integrity": "sha512-ga8+JqBDHY4b6fQAmOgtJJue36scANy4l/rL97W+0wYmijhxKetzZdKOJI7olaBaMhWt8Pac2McJdZLxXWUEQw==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/win32-ia32": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.16.7.tgz",
|
||||
"integrity": "sha512-1cbzSEZA1fANwmT6rjJ4G1qQXHxCxGIcNYFYR9ctI82/prT38lnwSRZ0i5p/MVXksw9eMlHlet6pGu2/qkXFCg==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.16.17.tgz",
|
||||
"integrity": "sha512-WnsKaf46uSSF/sZhwnqE4L/F89AYNMiD4YtEcYekBt9Q7nj0DiId2XH2Ng2PHM54qi5oPrQ8luuzGszqi/veig==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@esbuild/win32-x64": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.16.7.tgz",
|
||||
"integrity": "sha512-QaQ8IH0JLacfGf5cf0HCCPnQuCTd/dAI257vXBgb/cccKGbH/6pVtI1gwhdAQ0Y48QSpTIFrh9etVyNdZY+zzw==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.16.17.tgz",
|
||||
"integrity": "sha512-y+EHuSchhL7FjHgvQL/0fnnFmO4T1bhvWANX6gcnqTjtnKWbTvUMCpGnv2+t+31d7RzyEAYAd4u2fnIhHL6N/Q==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
|
@ -8627,9 +8627,9 @@
|
|||
}
|
||||
},
|
||||
"@iconify-icons/mingcute": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@iconify-icons/mingcute/-/mingcute-1.2.3.tgz",
|
||||
"integrity": "sha512-yZyioZhNy61SkLxQoyHThsfuyaOej9n84PUS+K69qaS1Dyj7/wHwYhWXseFCnzyzicaEHkCpt6H/hYV8fwmMLg==",
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/@iconify-icons/mingcute/-/mingcute-1.2.4.tgz",
|
||||
"integrity": "sha512-4aaWYa6GxSdYmJg8iBVx6VDuKUcTDEbio929+GrswoxfyTsPUkOOgw2wffUDHjE3JDUAnrWj9teQTnBkFm7Gyg==",
|
||||
"requires": {
|
||||
"@iconify/types": "*"
|
||||
}
|
||||
|
@ -8856,9 +8856,9 @@
|
|||
}
|
||||
},
|
||||
"@szhsin/react-menu": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@szhsin/react-menu/-/react-menu-3.4.0.tgz",
|
||||
"integrity": "sha512-BRxUF3BNmaQzL1z8UkS/eNFj+5ZPjBOpsYWP/ZtrzHNkkP6hUc+tYerBV4dwFiGYmWzkxyOP44ISn+EujwPpUw==",
|
||||
"version": "3.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@szhsin/react-menu/-/react-menu-3.4.1.tgz",
|
||||
"integrity": "sha512-Pxt7Kyp3yuX7zkT5tjdLRJGNFMa5Tx4BP+01gJ/dnMmHQpI1H2or9gEC0X+t3cLldO3LGmm4ViGypNCmQLv/4A==",
|
||||
"requires": {
|
||||
"prop-types": "^15.7.2",
|
||||
"react-transition-state": "^1.1.5"
|
||||
|
@ -9542,33 +9542,33 @@
|
|||
}
|
||||
},
|
||||
"esbuild": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.16.7.tgz",
|
||||
"integrity": "sha512-P6OBFYFSQOGzfApqCeYKqfKRRbCIRsdppTXFo4aAvtiW3o8TTyiIplBvHJI171saPAiy3WlawJHCveJVIOIx1A==",
|
||||
"version": "0.16.17",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.16.17.tgz",
|
||||
"integrity": "sha512-G8LEkV0XzDMNwXKgM0Jwu3nY3lSTwSGY6XbxM9cr9+s0T/qSV1q1JVPBGzm3dcjhCic9+emZDmMffkwgPeOeLg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@esbuild/android-arm": "0.16.7",
|
||||
"@esbuild/android-arm64": "0.16.7",
|
||||
"@esbuild/android-x64": "0.16.7",
|
||||
"@esbuild/darwin-arm64": "0.16.7",
|
||||
"@esbuild/darwin-x64": "0.16.7",
|
||||
"@esbuild/freebsd-arm64": "0.16.7",
|
||||
"@esbuild/freebsd-x64": "0.16.7",
|
||||
"@esbuild/linux-arm": "0.16.7",
|
||||
"@esbuild/linux-arm64": "0.16.7",
|
||||
"@esbuild/linux-ia32": "0.16.7",
|
||||
"@esbuild/linux-loong64": "0.16.7",
|
||||
"@esbuild/linux-mips64el": "0.16.7",
|
||||
"@esbuild/linux-ppc64": "0.16.7",
|
||||
"@esbuild/linux-riscv64": "0.16.7",
|
||||
"@esbuild/linux-s390x": "0.16.7",
|
||||
"@esbuild/linux-x64": "0.16.7",
|
||||
"@esbuild/netbsd-x64": "0.16.7",
|
||||
"@esbuild/openbsd-x64": "0.16.7",
|
||||
"@esbuild/sunos-x64": "0.16.7",
|
||||
"@esbuild/win32-arm64": "0.16.7",
|
||||
"@esbuild/win32-ia32": "0.16.7",
|
||||
"@esbuild/win32-x64": "0.16.7"
|
||||
"@esbuild/android-arm": "0.16.17",
|
||||
"@esbuild/android-arm64": "0.16.17",
|
||||
"@esbuild/android-x64": "0.16.17",
|
||||
"@esbuild/darwin-arm64": "0.16.17",
|
||||
"@esbuild/darwin-x64": "0.16.17",
|
||||
"@esbuild/freebsd-arm64": "0.16.17",
|
||||
"@esbuild/freebsd-x64": "0.16.17",
|
||||
"@esbuild/linux-arm": "0.16.17",
|
||||
"@esbuild/linux-arm64": "0.16.17",
|
||||
"@esbuild/linux-ia32": "0.16.17",
|
||||
"@esbuild/linux-loong64": "0.16.17",
|
||||
"@esbuild/linux-mips64el": "0.16.17",
|
||||
"@esbuild/linux-ppc64": "0.16.17",
|
||||
"@esbuild/linux-riscv64": "0.16.17",
|
||||
"@esbuild/linux-s390x": "0.16.17",
|
||||
"@esbuild/linux-x64": "0.16.17",
|
||||
"@esbuild/netbsd-x64": "0.16.17",
|
||||
"@esbuild/openbsd-x64": "0.16.17",
|
||||
"@esbuild/sunos-x64": "0.16.17",
|
||||
"@esbuild/win32-arm64": "0.16.17",
|
||||
"@esbuild/win32-ia32": "0.16.17",
|
||||
"@esbuild/win32-x64": "0.16.17"
|
||||
}
|
||||
},
|
||||
"escalade": {
|
||||
|
@ -10288,9 +10288,9 @@
|
|||
}
|
||||
},
|
||||
"masto": {
|
||||
"version": "5.7.0",
|
||||
"resolved": "https://registry.npmjs.org/masto/-/masto-5.7.0.tgz",
|
||||
"integrity": "sha512-oCVReGLR9AoBSkShVgWrPb69xzfCpogiPH9wVT9AnPbM+CvjIqJuSaD1xgaEUi6jo66XGbhTC6UerSCVqq9emg==",
|
||||
"version": "5.10.0",
|
||||
"resolved": "https://registry.npmjs.org/masto/-/masto-5.10.0.tgz",
|
||||
"integrity": "sha512-RlTw3X2b2ipkcgsgoKEWKKFNYkpAlUtJhNOFKwBKWEBv+we/ZupQbnerGOJssB5rs7ig4HWWsZZHLtNeFdYQTQ==",
|
||||
"requires": {
|
||||
"@mastojs/ponyfills": "^1.0.4",
|
||||
"change-case": "^4.1.2",
|
||||
|
@ -10870,9 +10870,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"preact": {
|
||||
"version": "10.11.3",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.11.3.tgz",
|
||||
"integrity": "sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg=="
|
||||
"version": "10.12.1",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
|
||||
"integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg=="
|
||||
},
|
||||
"prettier": {
|
||||
"version": "2.8.0",
|
||||
|
@ -10951,15 +10951,15 @@
|
|||
}
|
||||
},
|
||||
"react-hotkeys-hook": {
|
||||
"version": "4.3.3",
|
||||
"resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.3.3.tgz",
|
||||
"integrity": "sha512-OYZCG2G+xLeiH0TkrW+v6eKFPvYq9iCA5sh9pwvnbGQaK86Lw/kWJDjjzSksFJoCk4K78OLe3MR1afNZH6+cLg==",
|
||||
"version": "4.3.5",
|
||||
"resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.3.5.tgz",
|
||||
"integrity": "sha512-tfwTwKP3ga7n4naNS/JOByaEwEkTCoXYCepDuhXpj8mBx+sFszV5JecRWM2dv+PbOowmmBpHAFtTXTnG/p8UkQ==",
|
||||
"requires": {}
|
||||
},
|
||||
"react-intersection-observer": {
|
||||
"version": "9.4.1",
|
||||
"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.1.tgz",
|
||||
"integrity": "sha512-IXpIsPe6BleFOEHKzKh5UjwRUaz/JYS0lT/HPsupWEQou2hDqjhLMStc5zyE3eQVT4Fk3FufM8Fw33qW1uyeiw==",
|
||||
"version": "9.4.2",
|
||||
"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.2.tgz",
|
||||
"integrity": "sha512-AdK+ryzZ7U9ZJYttDUZ8q2Am3nqE0exg5Ryl5Y124KeVsix/1hGZPbdu58EqA98TwnzwDNWHxg/kwNawmIiUig==",
|
||||
"requires": {}
|
||||
},
|
||||
"react-is": {
|
||||
|
@ -11097,9 +11097,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"rollup": {
|
||||
"version": "3.7.4",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.7.4.tgz",
|
||||
"integrity": "sha512-jN9rx3k5pfg9H9al0r0y1EYKSeiRANZRYX32SuNXAnKzh6cVyf4LZVto1KAuDnbHT03E1CpsgqDKaqQ8FZtgxw==",
|
||||
"version": "3.12.1",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.12.1.tgz",
|
||||
"integrity": "sha512-t9elERrz2i4UU9z7AwISj3CQcXP39cWxgRWLdf4Tm6aKm1eYrqHIgjzXBgb67GNY1sZckTFFi0oMozh3/S++Ig==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fsevents": "~2.3.2"
|
||||
|
@ -11545,16 +11545,16 @@
|
|||
}
|
||||
},
|
||||
"vite": {
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.0.4.tgz",
|
||||
"integrity": "sha512-xevPU7M8FU0i/80DMR+YhgrzR5KS2ORy1B4xcX/cXLsvnUWvfHuqMmVU6N0YiJ4JWGRJJsLCgjEzKjG9/GKoSw==",
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.1.2.tgz",
|
||||
"integrity": "sha512-MWDb9Rfy3DI8omDQySbMK93nQqStwbsQWejXRY2EBzEWKmLAXWb1mkI9Yw2IJrc+oCvPCI1Os5xSSIBYY6DEAw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"esbuild": "^0.16.3",
|
||||
"esbuild": "^0.16.14",
|
||||
"fsevents": "~2.3.2",
|
||||
"postcss": "^8.4.20",
|
||||
"postcss": "^8.4.21",
|
||||
"resolve": "^1.22.1",
|
||||
"rollup": "^3.7.0"
|
||||
"rollup": "^3.10.0"
|
||||
}
|
||||
},
|
||||
"vite-plugin-html-config": {
|
||||
|
@ -11572,9 +11572,9 @@
|
|||
"requires": {}
|
||||
},
|
||||
"vite-plugin-pwa": {
|
||||
"version": "0.14.1",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.14.1.tgz",
|
||||
"integrity": "sha512-5zx7yhQ8RTLwV71+GA9YsQQ63ALKG8XXIMqRJDdZkR8ZYftFcRgnzM7wOWmQZ/DATspyhPih5wCdcZnAIsM+mA==",
|
||||
"version": "0.14.4",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.14.4.tgz",
|
||||
"integrity": "sha512-M7Ct0so8OlouMkTWgXnl8W1xU95glITSKIe7qswZf1tniAstO2idElGCnsrTJ5NPNSx1XqfTCOUj8j94S6FD7Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@rollup/plugin-replace": "^5.0.1",
|
||||
|
@ -11587,9 +11587,9 @@
|
|||
}
|
||||
},
|
||||
"vite-plugin-remove-console": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-remove-console/-/vite-plugin-remove-console-1.3.0.tgz",
|
||||
"integrity": "sha512-5a/OLYB6yNRHMuHj9rBQRYMQ1NBKffxA8BaD77urUBLcGOWMHFHALjh6C26wZfZd41KytSwLp6DhvNKU78mNJg==",
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-remove-console/-/vite-plugin-remove-console-2.0.0.tgz",
|
||||
"integrity": "sha512-bEsyShSacsunbm0X1zaVliwgmWlsaBPLk7FN4wr2xQMs8zSZPSwpRNTT5UZiF0+cfMEkN4VVnofITawmT3pjgQ==",
|
||||
"dev": true
|
||||
},
|
||||
"webidl-conversions": {
|
||||
|
|
20
package.json
20
package.json
|
@ -11,20 +11,20 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@github/text-expander-element": "~2.3.0",
|
||||
"@iconify-icons/mingcute": "~1.2.3",
|
||||
"@szhsin/react-menu": "~3.4.0",
|
||||
"@iconify-icons/mingcute": "~1.2.4",
|
||||
"@szhsin/react-menu": "~3.4.1",
|
||||
"dayjs": "~1.11.7",
|
||||
"dayjs-twitter": "~0.5.0",
|
||||
"fast-blurhash": "~1.1.2",
|
||||
"fast-deep-equal": "~3.1.3",
|
||||
"idb-keyval": "~6.2.0",
|
||||
"just-debounce-it": "~3.2.0",
|
||||
"masto": "~5.7.0",
|
||||
"masto": "~5.10.0",
|
||||
"mem": "~9.0.2",
|
||||
"p-retry": "~5.1.2",
|
||||
"preact": "~10.11.3",
|
||||
"react-hotkeys-hook": "~4.3.3",
|
||||
"react-intersection-observer": "~9.4.1",
|
||||
"preact": "~10.12.1",
|
||||
"react-hotkeys-hook": "~4.3.5",
|
||||
"react-intersection-observer": "~9.4.2",
|
||||
"react-router-dom": "6.6.2",
|
||||
"string-length": "~5.0.1",
|
||||
"swiped-events": "~1.1.7",
|
||||
|
@ -32,7 +32,7 @@
|
|||
"uid": "~2.0.1",
|
||||
"use-debounce": "~9.0.3",
|
||||
"use-resize-observer": "~9.1.0",
|
||||
"valtio": "~1.9.0"
|
||||
"valtio": "1.9.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@preact/preset-vite": "~2.5.0",
|
||||
|
@ -41,11 +41,11 @@
|
|||
"postcss-dark-theme-class": "~0.7.3",
|
||||
"postcss-preset-env": "~8.0.1",
|
||||
"twitter-text": "~3.1.0",
|
||||
"vite": "~4.0.4",
|
||||
"vite": "~4.1.2",
|
||||
"vite-plugin-html-config": "~1.0.11",
|
||||
"vite-plugin-html-env": "~1.2.7",
|
||||
"vite-plugin-pwa": "~0.14.1",
|
||||
"vite-plugin-remove-console": "~1.3.0",
|
||||
"vite-plugin-pwa": "~0.14.4",
|
||||
"vite-plugin-remove-console": "~2.0.0",
|
||||
"workbox-cacheable-response": "~6.5.4",
|
||||
"workbox-expiration": "~6.5.4",
|
||||
"workbox-routing": "~6.5.4",
|
||||
|
|
|
@ -33,7 +33,7 @@ const imageRoute = new Route(
|
|||
);
|
||||
registerRoute(imageRoute);
|
||||
|
||||
// Cache /instance because masto.js has to keep calling it while initializing
|
||||
// 1-day cache for /api/v1/instance and /api/v1/custom_emojis
|
||||
const apiExtendedRoute = new RegExpRoute(
|
||||
/^https?:\/\/[^\/]+\/api\/v\d+\/(instance|custom_emojis)/,
|
||||
new StaleWhileRevalidate({
|
||||
|
|
396
src/app.css
396
src/app.css
|
@ -1,3 +1,6 @@
|
|||
@import url('@szhsin/react-menu/dist/core.css');
|
||||
@import url('toastify-js/src/toastify.css');
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
|
@ -69,7 +72,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
margin: auto;
|
||||
width: 40em;
|
||||
width: var(--main-width);
|
||||
max-width: 100%;
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.1);
|
||||
|
@ -84,46 +87,65 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
}
|
||||
|
||||
.deck > header {
|
||||
min-height: 3em;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--bg-blur-color);
|
||||
background-image: linear-gradient(to bottom, var(--bg-color), transparent);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
border-bottom: var(--hairline-width) solid var(--divider-color);
|
||||
z-index: 1;
|
||||
cursor: default;
|
||||
z-index: 10;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
user-select: none;
|
||||
}
|
||||
.deck > header[hidden] {
|
||||
display: block;
|
||||
transform: translateY(-100%);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
.deck > header > .header-side:last-of-type {
|
||||
.deck > header .header-grid {
|
||||
background-color: var(--bg-blur-color);
|
||||
background-image: linear-gradient(to bottom, var(--bg-color), transparent);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
border-bottom: var(--hairline-width) solid var(--divider-color);
|
||||
min-height: 3em;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr max-content 1fr;
|
||||
align-items: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.deck > header .header-grid > .header-side:last-of-type {
|
||||
text-align: right;
|
||||
grid-column: 3;
|
||||
}
|
||||
.deck > header :is(button, .button).plain {
|
||||
.deck > header .header-grid :is(button, .button).plain {
|
||||
backdrop-filter: none;
|
||||
}
|
||||
.deck > header h1 {
|
||||
.deck > header .header-grid h1 {
|
||||
margin: 0 8px;
|
||||
padding: 0;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.deck > header h1:first-child {
|
||||
.deck > header .header-grid.header-grid-2 {
|
||||
grid-template-columns: 1fr max-content;
|
||||
}
|
||||
.deck > header .header-grid-2 h1 {
|
||||
text-align: left;
|
||||
padding-left: 8px;
|
||||
}
|
||||
.deck > header .header-grid h1:has(.ancestors-indicator) {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
max-width: fit-content;
|
||||
}
|
||||
.deck > header .header-grid h1:has(.ancestors-indicator) .hero-heading {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.deck h2 {
|
||||
font-size: 1.45em;
|
||||
}
|
||||
|
@ -528,46 +550,44 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
filter: brightness(0.95);
|
||||
}
|
||||
|
||||
.boost-carousel {
|
||||
.status-carousel {
|
||||
--carousel-faded-color: var(--bg-faded-color);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
var(--reblog-faded-color),
|
||||
var(--carousel-faded-color),
|
||||
transparent 150%
|
||||
);
|
||||
position: relative;
|
||||
}
|
||||
.boost-carousel:after {
|
||||
.status-carousel:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image: radial-gradient(
|
||||
ellipse 50% 32px at bottom center,
|
||||
var(--reblog-faded-color),
|
||||
var(--carousel-faded-color),
|
||||
transparent
|
||||
),
|
||||
linear-gradient(to top, var(--bg-color), transparent 64px);
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom center;
|
||||
}
|
||||
.boost-carousel .status-reblog {
|
||||
background-image: none;
|
||||
}
|
||||
.boost-carousel header {
|
||||
.status-carousel header {
|
||||
padding: 8px 16px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.boost-carousel h3 {
|
||||
.status-carousel h3 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
color: var(--reblog-color);
|
||||
color: var(--carousel-color);
|
||||
text-shadow: 0 1px var(--bg-color);
|
||||
}
|
||||
.boost-carousel ul {
|
||||
.status-carousel ul {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
|
@ -579,7 +599,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
align-items: flex-start;
|
||||
counter-reset: index;
|
||||
}
|
||||
.boost-carousel ul > li {
|
||||
.status-carousel ul > li {
|
||||
scroll-snap-align: center;
|
||||
scroll-snap-stop: always;
|
||||
flex-shrink: 0;
|
||||
|
@ -594,12 +614,33 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
counter-increment: index;
|
||||
position: relative;
|
||||
}
|
||||
.boost-carousel ul > li:before {
|
||||
.status-carousel .content-container .content:only-child {
|
||||
font-size: calc(100% + 25% * max(2 - var(--content-text-weight), 0));
|
||||
}
|
||||
.status-carousel
|
||||
.content-container:is(
|
||||
[style*='content-text-weight:1'],
|
||||
[style*='content-text-weight: 1']
|
||||
)
|
||||
.media-container.media-eq1 {
|
||||
/* LOL, this is madness, reading a value from the style attribute */
|
||||
height: auto;
|
||||
min-height: 160px;
|
||||
max-height: max(160px, 50vh);
|
||||
}
|
||||
.status-carousel.boosts-carousel {
|
||||
--carousel-color: var(--reblog-color);
|
||||
--carousel-faded-color: var(--reblog-faded-color);
|
||||
}
|
||||
.status-carousel.boosts-carousel .status-reblog {
|
||||
background-image: none;
|
||||
}
|
||||
.status-carousel.boosts-carousel ul > li:before {
|
||||
content: counter(index);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-size: 10px;
|
||||
color: var(--reblog-color);
|
||||
color: var(--carousel-color);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
|
@ -608,7 +649,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.status-boost-link {
|
||||
.status-carousel-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-decoration-line: none;
|
||||
|
@ -623,15 +664,15 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
overflow: hidden;
|
||||
box-shadow: 0 1px var(--bg-color);
|
||||
}
|
||||
.status-boost-link::focus {
|
||||
.status-carousel-link::focus {
|
||||
background-color: var(--link-bg-hover-color);
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.status-boost-link:hover {
|
||||
.status-carousel-link:hover {
|
||||
background-color: var(--link-bg-hover-color);
|
||||
}
|
||||
}
|
||||
.status-boost-link:active:not(:has(:is(.media, button):active)) {
|
||||
.status-carousel-link:active:not(:has(:is(.media, button):active)) {
|
||||
filter: brightness(0.95);
|
||||
}
|
||||
|
||||
|
@ -659,14 +700,14 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
}
|
||||
}
|
||||
.deck-backdrop .deck {
|
||||
width: 40em;
|
||||
width: var(--main-width);
|
||||
max-width: 100vw;
|
||||
background-color: var(--bg-color);
|
||||
animation: slide-in 0.5s var(--timing-function);
|
||||
box-shadow: -1px 0 var(--bg-color);
|
||||
}
|
||||
.deck-backdrop .deck .status {
|
||||
max-width: 40em;
|
||||
max-width: var(--main-width);
|
||||
}
|
||||
|
||||
.deck-close {
|
||||
|
@ -701,18 +742,19 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
.updates-button {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
animation: fade-from-top 0.3s ease-out;
|
||||
top: 3em;
|
||||
animation: fade-from-top 0.3s var(--timing-function);
|
||||
left: 50%;
|
||||
margin-top: 8px;
|
||||
margin-top: 16px;
|
||||
transform: translate(-50%, 0);
|
||||
font-size: 90%;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
var(--button-bg-blur-color),
|
||||
var(--button-bg-color)
|
||||
background-color: var(--button-bg-color);
|
||||
background-image: linear-gradient(
|
||||
160deg,
|
||||
rgba(255, 255, 255, 0.5),
|
||||
rgba(255, 255, 255, 0) 50%
|
||||
);
|
||||
backdrop-filter: blur(16px);
|
||||
box-shadow: 0 3px 8px -1px var(--bg-faded-blur-color),
|
||||
box-shadow: 0 3px 8px -1px var(--drop-shadow-color),
|
||||
0 10px 36px -4px var(--button-bg-blur-color);
|
||||
}
|
||||
.updates-button .icon {
|
||||
|
@ -722,7 +764,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
/* BOX */
|
||||
|
||||
.box {
|
||||
width: 40em;
|
||||
width: var(--main-width);
|
||||
max-width: 100vw;
|
||||
padding: 16px;
|
||||
}
|
||||
|
@ -853,6 +895,9 @@ button.carousel-dot:is(.active, [disabled].active) {
|
|||
.media-post-link .button-label {
|
||||
display: none;
|
||||
}
|
||||
body:has(.status-deck) .media-post-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: calc(40em + 350px)) {
|
||||
.media-post-link .button-label {
|
||||
|
@ -889,10 +934,11 @@ button.carousel-dot:is(.active, [disabled].active) {
|
|||
background-color: var(--button-bg-blur-color);
|
||||
backdrop-filter: blur(16px);
|
||||
z-index: 1;
|
||||
box-shadow: 0 3px 8px -1px var(--bg-faded-blur-color),
|
||||
box-shadow: 0 3px 8px -1px var(--drop-shadow-color),
|
||||
0 10px 36px -4px var(--button-bg-blur-color);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
#home-page:has(header[hidden]) ~ #compose-button,
|
||||
#compose-button[hidden] {
|
||||
transform: translateY(200%);
|
||||
pointer-events: none;
|
||||
|
@ -902,14 +948,15 @@ button.carousel-dot:is(.active, [disabled].active) {
|
|||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
#compose-button[hidden] .icon {
|
||||
transform: rotate3d(0, 1, 0, 180deg);
|
||||
transform: rotate3d(0, 0, 1, -25deg);
|
||||
}
|
||||
#compose-button:is(:hover, :focus) {
|
||||
background-color: var(--button-bg-color);
|
||||
filter: none;
|
||||
}
|
||||
#compose-button:active {
|
||||
filter: brightness(0.75);
|
||||
transform: scale(0.95);
|
||||
transition: none;
|
||||
}
|
||||
#compose-button .icon {
|
||||
filter: drop-shadow(0 1px 2px var(--button-bg-color));
|
||||
|
@ -926,7 +973,7 @@ button.carousel-dot:is(.active, [disabled].active) {
|
|||
overflow: hidden;
|
||||
background-color: var(--bg-color);
|
||||
width: 100%;
|
||||
max-width: calc(40em - 50px - 16px);
|
||||
max-width: calc(var(--main-width) - 50px - 16px);
|
||||
border-radius: 16px 16px 0 0;
|
||||
box-shadow: 0 -1px 32px var(--divider-color);
|
||||
animation: slide-up 0.3s var(--timing-function);
|
||||
|
@ -962,6 +1009,12 @@ button.carousel-dot:is(.active, [disabled].active) {
|
|||
mask-image: linear-gradient(to bottom, transparent 0%, black 10px);
|
||||
}
|
||||
|
||||
/* ICON */
|
||||
|
||||
.icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* TAG */
|
||||
|
||||
.tag {
|
||||
|
@ -981,22 +1034,48 @@ button.carousel-dot:is(.active, [disabled].active) {
|
|||
/* MENU POPUP */
|
||||
|
||||
.szh-menu {
|
||||
padding: 8px 0 !important;
|
||||
padding: 8px 0;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
background-color: var(--bg-color) !important;
|
||||
border: 1px solid var(--outline-color) !important;
|
||||
background-color: var(--bg-color);
|
||||
border: 1px solid var(--outline-color);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 6px var(--drop-shadow-color);
|
||||
text-align: left;
|
||||
animation: appear 0.15s ease-in-out;
|
||||
animation: appear-smooth 0.15s ease-in-out;
|
||||
width: 16em;
|
||||
max-width: 90vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
.szh-menu__item--focusable {
|
||||
background-color: transparent;
|
||||
}
|
||||
.szh-menu .szh-menu__item {
|
||||
padding: 8px 16px !important;
|
||||
transition: all 0.1s ease-in-out;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.szh-menu .szh-menu__item * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.szh-menu .szh-menu__item a {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: 8px 16px !important;
|
||||
margin: -8px -16px !important;
|
||||
gap: 8px;
|
||||
}
|
||||
.szh-menu .szh-menu__item a.is-active {
|
||||
font-weight: bold;
|
||||
}
|
||||
.szh-menu .szh-menu__item .icon {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.szh-menu
|
||||
.szh-menu__item:not(.szh-menu__item--disabled, .szh-menu__item--hover) {
|
||||
color: var(--text-color);
|
||||
|
@ -1005,6 +1084,28 @@ button.carousel-dot:is(.active, [disabled].active) {
|
|||
color: var(--button-text-color);
|
||||
background-color: var(--button-bg-color);
|
||||
}
|
||||
.szh-menu__divider {
|
||||
background-color: var(--divider-color);
|
||||
}
|
||||
.szh-menu .szh-menu__item .menu-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.szh-menu .szh-menu__item .menu-shortcut {
|
||||
opacity: 0.5;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* GLASS MENU */
|
||||
|
||||
.glass-menu {
|
||||
background-color: var(--bg-blur-color);
|
||||
backdrop-filter: blur(8px) saturate(3);
|
||||
border: var(--hairline-width) solid var(--bg-color);
|
||||
box-shadow: 0 3px 8px -1px var(--drop-shadow-color);
|
||||
}
|
||||
.glass-menu .szh-menu__item--hover {
|
||||
background-color: var(--button-bg-blur-color);
|
||||
}
|
||||
|
||||
/* DONUT METER */
|
||||
|
||||
|
@ -1064,16 +1165,16 @@ meter.donut:is(.danger, .explode):after {
|
|||
/* TOAST */
|
||||
|
||||
:root .toastify {
|
||||
background-color: var(--button-bg-color);
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
var(--button-bg-blur-color),
|
||||
var(--button-bg-color)
|
||||
160deg,
|
||||
rgba(255, 255, 255, 0.5),
|
||||
rgba(255, 255, 255, 0) 50%
|
||||
);
|
||||
backdrop-filter: blur(16px);
|
||||
color: var(--button-text-color);
|
||||
border-radius: 10em;
|
||||
padding: 8px 16px;
|
||||
box-shadow: 0 3px 8px -1px var(--bg-faded-blur-color),
|
||||
box-shadow: 0 3px 8px -1px var(--drop-shadow-color),
|
||||
0 10px 36px -4px var(--button-bg-blur-color);
|
||||
}
|
||||
.toastify-bottom {
|
||||
|
@ -1110,18 +1211,19 @@ meter.donut:is(.danger, .explode):after {
|
|||
width: 100%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
#home-page ~ .deck-container {
|
||||
:is(#home-page, #welcome, #columns) ~ .deck-container {
|
||||
z-index: 10;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
}
|
||||
#home-page:has(~ .deck-container) {
|
||||
:is(#home-page, #welcome, #columns):has(~ .deck-container) {
|
||||
display: block;
|
||||
position: absolute;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
content-visibility: hidden;
|
||||
/* This causes scrollTop to be reset to 0 when the page is hidden */
|
||||
/* content-visibility: hidden; */
|
||||
}
|
||||
|
||||
/* TAB BAR */
|
||||
|
@ -1131,7 +1233,7 @@ meter.donut:is(.danger, .explode):after {
|
|||
bottom: 16px;
|
||||
bottom: max(16px, env(safe-area-inset-bottom));
|
||||
width: calc(100% - 32px);
|
||||
max-width: calc(40em - 32px);
|
||||
max-width: calc(var(--main-width) - 32px);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
background-color: var(--bg-blur-color);
|
||||
|
@ -1150,6 +1252,15 @@ meter.donut:is(.danger, .explode):after {
|
|||
text-align: center;
|
||||
padding: 16px 0;
|
||||
display: block;
|
||||
color: var(--text-insignificant-color);
|
||||
}
|
||||
#tab-bar li a.is-active {
|
||||
color: var(--link-color);
|
||||
background-image: radial-gradient(
|
||||
closest-side at 50% 50%,
|
||||
var(--bg-blur-color),
|
||||
transparent 75%
|
||||
);
|
||||
}
|
||||
|
||||
/* 404 */
|
||||
|
@ -1181,6 +1292,145 @@ meter.donut:is(.danger, .explode):after {
|
|||
color: var(--text-insignificant-color);
|
||||
}
|
||||
|
||||
/* LINK LISTS? */
|
||||
|
||||
ul.link-list {
|
||||
list-style: none;
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
ul.link-list li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
ul.link-list li a {
|
||||
--radius: 8px;
|
||||
display: block;
|
||||
background-color: var(--bg-faded-color);
|
||||
line-height: 1.25;
|
||||
padding: 12px;
|
||||
text-decoration: none;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
ul.link-list li:first-child a {
|
||||
border-top-left-radius: var(--radius);
|
||||
border-top-right-radius: var(--radius);
|
||||
}
|
||||
ul.link-list li:last-child a {
|
||||
border-bottom-left-radius: var(--radius);
|
||||
border-bottom-right-radius: var(--radius);
|
||||
}
|
||||
ul.link-list li a:is(:hover, :focus) {
|
||||
color: var(--text-color);
|
||||
}
|
||||
ul.link-list li a:active {
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
ul.link-list li a * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
ul.link-list li a .icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 40em) {
|
||||
ul.link-list li a {
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* COLUMNS */
|
||||
|
||||
#columns {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
/* scrollbar-width: none; */
|
||||
overscroll-behavior: contain;
|
||||
overscroll-behavior-x: contain;
|
||||
}
|
||||
/* #columns::-webkit-scrollbar {
|
||||
display: none;
|
||||
} */
|
||||
#columns > * {
|
||||
overscroll-behavior: auto;
|
||||
scroll-snap-align: left;
|
||||
scroll-snap-stop: always;
|
||||
overscroll-behavior: auto;
|
||||
flex-basis: min(100vw, 360px);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#columns .header-grid input {
|
||||
pointer-events: none;
|
||||
}
|
||||
#columns
|
||||
.header-grid
|
||||
.header-side:first-of-type
|
||||
:is(button, .button)
|
||||
~ :is(button, .button),
|
||||
#columns .deck-container:not(:first-of-type) .header-grid .header-side > * {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 40em) {
|
||||
#columns {
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background-color: var(--bg-blur-color);
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
}
|
||||
#columns > * {
|
||||
padding: 0 16px;
|
||||
border: var(--hairline-width) solid var(--outline-color);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 16px var(--drop-shadow-color);
|
||||
height: unset;
|
||||
background-image: linear-gradient(
|
||||
160deg,
|
||||
transparent 20%,
|
||||
var(--bg-color),
|
||||
transparent 75%
|
||||
);
|
||||
}
|
||||
#columns > *:focus-visible,
|
||||
#columns > *:has(:focus-visible) {
|
||||
box-shadow: 0 4px 16px var(--drop-shadow-color),
|
||||
0 4px 16px var(--drop-shadow-color);
|
||||
border-color: var(--outline-hover-color);
|
||||
}
|
||||
#columns .timeline:not(.flat) > li:has(.status-link.is-active),
|
||||
#columns
|
||||
.timeline:not(.flat)
|
||||
> li:not(:has(.status-carousel)):has(+ li .status-link.is-active),
|
||||
#columns
|
||||
.timeline:not(.flat)
|
||||
> li:not(:has(.status-carousel)):has(.status-link.is-active)
|
||||
+ li {
|
||||
transform: none;
|
||||
}
|
||||
#columns .timeline-deck > header {
|
||||
margin: 0;
|
||||
}
|
||||
#columns li:has(.status-carousel) {
|
||||
width: auto;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* OTHERS */
|
||||
|
||||
@media (min-width: 40em) {
|
||||
html,
|
||||
body {
|
||||
|
@ -1201,7 +1451,7 @@ meter.donut:is(.danger, .explode):after {
|
|||
}
|
||||
.deck-backdrop .deck {
|
||||
width: 50%;
|
||||
min-width: 40em;
|
||||
min-width: var(--main-width);
|
||||
border-left: 1px solid var(--divider-color);
|
||||
}
|
||||
.timeline-deck {
|
||||
|
@ -1210,14 +1460,16 @@ meter.donut:is(.danger, .explode):after {
|
|||
}
|
||||
.timeline-deck > header {
|
||||
--margin-top: 8px;
|
||||
min-height: 4em;
|
||||
top: var(--margin-top);
|
||||
border-bottom: 0;
|
||||
background-color: var(--bg-faded-blur-color);
|
||||
background-image: none;
|
||||
margin-inline: 8px;
|
||||
}
|
||||
.timeline-deck > header .header-grid {
|
||||
border-bottom: 0;
|
||||
border-radius: 16px;
|
||||
margin-inline: 8px;
|
||||
background-color: var(--bg-faded-blur-color);
|
||||
background-image: none;
|
||||
border-radius: 16px;
|
||||
min-height: 4em;
|
||||
}
|
||||
.timeline-deck > header[hidden] {
|
||||
transform: translate3d(0, calc((100% + var(--margin-top)) * -1), 0);
|
||||
|
@ -1228,7 +1480,7 @@ meter.donut:is(.danger, .explode):after {
|
|||
.updates-button {
|
||||
margin-top: 24px;
|
||||
}
|
||||
.timeline-deck .timeline:not(.flat) > li {
|
||||
.timeline:not(.flat) > li {
|
||||
border: 1px solid var(--divider-color);
|
||||
margin: 16px 0;
|
||||
background-color: var(--bg-color);
|
||||
|
@ -1238,16 +1490,14 @@ meter.donut:is(.danger, .explode):after {
|
|||
transition: transform 0.4s var(--timing-function);
|
||||
--back-transition: transform 0.4s ease-out;
|
||||
}
|
||||
.timeline-deck .timeline:not(.flat) > li:has(.status-link.is-active) {
|
||||
.timeline:not(.flat) > li:has(.status-link.is-active) {
|
||||
transition: var(--back-transition);
|
||||
transform: translate3d(-2.5vw, 0, 0);
|
||||
}
|
||||
.timeline-deck
|
||||
.timeline:not(.flat)
|
||||
> li:not(:has(.boost-carousel)):has(+ li .status-link.is-active),
|
||||
.timeline-deck
|
||||
> li:not(:has(.status-carousel)):has(+ li .status-link.is-active),
|
||||
.timeline:not(.flat)
|
||||
> li:not(:has(.boost-carousel)):has(.status-link.is-active)
|
||||
> li:not(:has(.status-carousel)):has(.status-link.is-active)
|
||||
+ li {
|
||||
transition: var(--back-transition);
|
||||
transform: translate3d(-1.25vw, 0, 0);
|
||||
|
@ -1258,7 +1508,7 @@ meter.donut:is(.danger, .explode):after {
|
|||
/* :is(.carousel-top-controls, .carousel-controls) {
|
||||
padding: 32px;
|
||||
} */
|
||||
li:has(.boost-carousel) {
|
||||
li:has(.status-carousel) {
|
||||
width: 95vw;
|
||||
max-width: calc(320px * 3.3);
|
||||
transform: translateX(calc(-50% + 20em));
|
||||
|
|
556
src/app.jsx
556
src/app.jsx
|
@ -1,8 +1,5 @@
|
|||
import './app.css';
|
||||
import 'toastify-js/src/toastify.css';
|
||||
|
||||
import debounce from 'just-debounce-it';
|
||||
import { createClient } from 'masto';
|
||||
import {
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
|
@ -10,7 +7,13 @@ import {
|
|||
useRef,
|
||||
useState,
|
||||
} from 'preact/hooks';
|
||||
import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
matchPath,
|
||||
Route,
|
||||
Routes,
|
||||
useLocation,
|
||||
useNavigate,
|
||||
} from 'react-router-dom';
|
||||
import Toastify from 'toastify-js';
|
||||
import { useSnapshot } from 'valtio';
|
||||
|
||||
|
@ -22,22 +25,38 @@ import Link from './components/link';
|
|||
import Loader from './components/loader';
|
||||
import MediaModal from './components/media-modal';
|
||||
import Modal from './components/modal';
|
||||
import Shortcuts from './components/shortcuts';
|
||||
import ShortcutsSettings from './components/shortcuts-settings';
|
||||
import NotFound from './pages/404';
|
||||
import AccountStatuses from './pages/account-statuses';
|
||||
import Bookmarks from './pages/bookmarks';
|
||||
import Favourites from './pages/favourites';
|
||||
import Hashtags from './pages/hashtags';
|
||||
import FollowedHashtags from './pages/followed-hashtags';
|
||||
import Following from './pages/following';
|
||||
import Hashtag from './pages/hashtag';
|
||||
import Home from './pages/home';
|
||||
import HomeV1 from './pages/home-v1';
|
||||
import List from './pages/list';
|
||||
import Lists from './pages/lists';
|
||||
import Login from './pages/login';
|
||||
import Notifications from './pages/notifications';
|
||||
import Public from './pages/public';
|
||||
import Search from './pages/search';
|
||||
import Settings from './pages/settings';
|
||||
import Status from './pages/status';
|
||||
import Welcome from './pages/welcome';
|
||||
import {
|
||||
api,
|
||||
initAccount,
|
||||
initClient,
|
||||
initInstance,
|
||||
initPreferences,
|
||||
} from './utils/api';
|
||||
import { getAccessToken } from './utils/auth';
|
||||
import states, { saveStatus } from './utils/states';
|
||||
import states, { getStatus, saveStatus } from './utils/states';
|
||||
import store from './utils/store';
|
||||
import { getCurrentAccount } from './utils/store-utils';
|
||||
import usePageVisibility from './utils/usePageVisibility';
|
||||
|
||||
window.__STATES__ = states;
|
||||
|
||||
|
@ -53,13 +72,12 @@ function App() {
|
|||
document.documentElement.classList.add(`is-${theme}`);
|
||||
document
|
||||
.querySelector('meta[name="color-scheme"]')
|
||||
.setAttribute('content', theme);
|
||||
.setAttribute('content', theme === 'auto' ? 'dark light' : theme);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const instanceURL = store.local.get('instanceURL');
|
||||
const accounts = store.local.getJSON('accounts') || [];
|
||||
const code = (window.location.search.match(/code=([^&]+)/) || [])[1];
|
||||
|
||||
if (code) {
|
||||
|
@ -72,60 +90,44 @@ function App() {
|
|||
|
||||
(async () => {
|
||||
setUIState('loading');
|
||||
const tokenJSON = await getAccessToken({
|
||||
const { access_token: accessToken } = await getAccessToken({
|
||||
instanceURL,
|
||||
client_id: clientID,
|
||||
client_secret: clientSecret,
|
||||
code,
|
||||
});
|
||||
const { access_token: accessToken } = tokenJSON;
|
||||
store.session.set('accessToken', accessToken);
|
||||
|
||||
initMasto({
|
||||
url: `https://${instanceURL}`,
|
||||
accessToken,
|
||||
});
|
||||
|
||||
const mastoAccount = await masto.v1.accounts.verifyCredentials();
|
||||
|
||||
// console.log({ tokenJSON, mastoAccount });
|
||||
|
||||
let account = accounts.find((a) => a.info.id === mastoAccount.id);
|
||||
if (account) {
|
||||
account.info = mastoAccount;
|
||||
account.instanceURL = instanceURL.toLowerCase();
|
||||
account.accessToken = accessToken;
|
||||
} else {
|
||||
account = {
|
||||
info: mastoAccount,
|
||||
instanceURL,
|
||||
accessToken,
|
||||
};
|
||||
accounts.push(account);
|
||||
}
|
||||
|
||||
store.local.setJSON('accounts', accounts);
|
||||
store.session.set('currentAccount', account.info.id);
|
||||
const masto = initClient({ instance: instanceURL, accessToken });
|
||||
await Promise.allSettled([
|
||||
initInstance(masto),
|
||||
initAccount(masto, instanceURL, accessToken),
|
||||
]);
|
||||
initPreferences(masto);
|
||||
|
||||
setIsLoggedIn(true);
|
||||
setUIState('default');
|
||||
})();
|
||||
} else if (accounts.length) {
|
||||
const currentAccount = store.session.get('currentAccount');
|
||||
const account =
|
||||
accounts.find((a) => a.info.id === currentAccount) || accounts[0];
|
||||
const instanceURL = account.instanceURL;
|
||||
const accessToken = account.accessToken;
|
||||
} else {
|
||||
const account = getCurrentAccount();
|
||||
if (account) {
|
||||
store.session.set('currentAccount', account.info.id);
|
||||
if (accessToken) setIsLoggedIn(true);
|
||||
|
||||
initMasto({
|
||||
url: `https://${instanceURL}`,
|
||||
accessToken,
|
||||
});
|
||||
const { masto } = api({ account });
|
||||
console.log('masto', masto);
|
||||
initPreferences(masto);
|
||||
setUIState('loading');
|
||||
(async () => {
|
||||
try {
|
||||
await initInstance(masto);
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setIsLoggedIn(true);
|
||||
setUIState('default');
|
||||
}
|
||||
})();
|
||||
} else {
|
||||
setUIState('default');
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
let location = useLocation();
|
||||
|
@ -146,28 +148,79 @@ function App() {
|
|||
return () => clearTimeout(timer);
|
||||
};
|
||||
useEffect(focusDeck, [location]);
|
||||
const showModal =
|
||||
snapStates.showCompose ||
|
||||
snapStates.showSettings ||
|
||||
snapStates.showAccount ||
|
||||
snapStates.showDrafts ||
|
||||
snapStates.showMediaModal ||
|
||||
snapStates.showShortcutsSettings;
|
||||
useEffect(() => {
|
||||
if (
|
||||
!snapStates.showCompose &&
|
||||
!snapStates.showSettings &&
|
||||
!snapStates.showAccount
|
||||
) {
|
||||
focusDeck();
|
||||
}
|
||||
}, [snapStates.showCompose, snapStates.showSettings, snapStates.showAccount]);
|
||||
if (!showModal) focusDeck();
|
||||
}, [showModal]);
|
||||
|
||||
// useEffect(() => {
|
||||
// // HACK: prevent this from running again due to HMR
|
||||
// if (states.init) return;
|
||||
// if (isLoggedIn) {
|
||||
// requestAnimationFrame(startVisibility);
|
||||
// states.init = true;
|
||||
// }
|
||||
// }, [isLoggedIn]);
|
||||
|
||||
// Notifications service
|
||||
// - WebSocket to receive notifications when page is visible
|
||||
const [visible, setVisible] = useState(true);
|
||||
usePageVisibility(setVisible);
|
||||
const notificationStream = useRef();
|
||||
useEffect(() => {
|
||||
// HACK: prevent this from running again due to HMR
|
||||
if (states.init) return;
|
||||
if (isLoggedIn) {
|
||||
requestAnimationFrame(startVisibility);
|
||||
states.init = true;
|
||||
if (isLoggedIn && visible) {
|
||||
const { masto } = api();
|
||||
(async () => {
|
||||
// 1. Get the latest notification
|
||||
if (states.notificationsLast) {
|
||||
const notificationsIterator = masto.v1.notifications.list({
|
||||
limit: 1,
|
||||
since_id: states.notificationsLast.id,
|
||||
});
|
||||
const { value: notifications } = await notificationsIterator.next();
|
||||
if (notifications?.length) {
|
||||
states.notificationsShowNew = true;
|
||||
}
|
||||
}, [isLoggedIn]);
|
||||
}
|
||||
|
||||
// 2. Start streaming
|
||||
notificationStream.current = await masto.ws.stream(
|
||||
'/api/v1/streaming',
|
||||
{
|
||||
stream: 'user:notification',
|
||||
},
|
||||
);
|
||||
console.log('🎏 Streaming notification', notificationStream.current);
|
||||
|
||||
notificationStream.current.on('notification', (notification) => {
|
||||
console.log('🔔🔔 Notification', notification);
|
||||
states.notificationsShowNew = true;
|
||||
});
|
||||
|
||||
notificationStream.current.ws.onclose = () => {
|
||||
console.log('🔔🔔 Notification stream closed');
|
||||
};
|
||||
})();
|
||||
}
|
||||
return () => {
|
||||
if (notificationStream.current) {
|
||||
notificationStream.current.ws.close();
|
||||
notificationStream.current = null;
|
||||
}
|
||||
};
|
||||
}, [visible, isLoggedIn]);
|
||||
|
||||
const { prevLocation } = snapStates;
|
||||
const backgroundLocation = useRef(prevLocation || null);
|
||||
const isModalPage = /^\/s\//i.test(location.pathname);
|
||||
const isModalPage =
|
||||
matchPath('/:instance/s/:id', location.pathname) ||
|
||||
matchPath('/s/:id', location.pathname);
|
||||
if (isModalPage) {
|
||||
if (!backgroundLocation.current) backgroundLocation.current = prevLocation;
|
||||
} else {
|
||||
|
@ -180,7 +233,7 @@ function App() {
|
|||
|
||||
const nonRootLocation = useMemo(() => {
|
||||
const { pathname } = location;
|
||||
return !/^\/(login|welcome|p)/.test(pathname);
|
||||
return !/^\/(login|welcome)/.test(pathname);
|
||||
}, [location]);
|
||||
|
||||
return (
|
||||
|
@ -205,16 +258,28 @@ function App() {
|
|||
{isLoggedIn && (
|
||||
<Route path="/notifications" element={<Notifications />} />
|
||||
)}
|
||||
{isLoggedIn && <Route path="/following" element={<Following />} />}
|
||||
{isLoggedIn && <Route path="/homev1" element={<HomeV1 />} />}
|
||||
{isLoggedIn && <Route path="/b" element={<Bookmarks />} />}
|
||||
{isLoggedIn && <Route path="/f" element={<Favourites />} />}
|
||||
{isLoggedIn && <Route path="/l/:id" element={<Lists />} />}
|
||||
{isLoggedIn && <Route path="/t/:hashtag" element={<Hashtags />} />}
|
||||
{isLoggedIn && <Route path="/a/:id" element={<AccountStatuses />} />}
|
||||
<Route path="/p/l?/:instance" element={<Public />} />
|
||||
{isLoggedIn && (
|
||||
<Route path="/l">
|
||||
<Route index element={<Lists />} />
|
||||
<Route path=":id" element={<List />} />
|
||||
</Route>
|
||||
)}
|
||||
{isLoggedIn && <Route path="/ft" element={<FollowedHashtags />} />}
|
||||
<Route path="/:instance?/t/:hashtag" element={<Hashtag />} />
|
||||
<Route path="/:instance?/a/:id" element={<AccountStatuses />} />
|
||||
<Route path="/:instance?/p">
|
||||
<Route index element={<Public />} />
|
||||
<Route path="l" element={<Public local />} />
|
||||
</Route>
|
||||
<Route path="/:instance?/search" element={<Search />} />
|
||||
{/* <Route path="/:anything" element={<NotFound />} /> */}
|
||||
</Routes>
|
||||
<Routes>
|
||||
{isLoggedIn && <Route path="/s/:id" element={<Status />} />}
|
||||
<Route path="/:instance?/s/:id" element={<Status />} />
|
||||
</Routes>
|
||||
<nav id="tab-bar" hidden>
|
||||
<li>
|
||||
|
@ -233,6 +298,7 @@ function App() {
|
|||
</Link>
|
||||
</li>
|
||||
</nav>
|
||||
{!snapStates.settings.shortcutsColumnsMode && <Shortcuts />}
|
||||
{!!snapStates.showCompose && (
|
||||
<Modal>
|
||||
<Compose
|
||||
|
@ -302,7 +368,8 @@ function App() {
|
|||
}}
|
||||
>
|
||||
<Account
|
||||
account={snapStates.showAccount}
|
||||
account={snapStates.showAccount?.account || snapStates.showAccount}
|
||||
instance={snapStates.showAccount?.instance}
|
||||
onClose={() => {
|
||||
states.showAccount = false;
|
||||
}}
|
||||
|
@ -333,6 +400,7 @@ function App() {
|
|||
>
|
||||
<MediaModal
|
||||
mediaAttachments={snapStates.showMediaModal.mediaAttachments}
|
||||
instance={snapStates.showMediaModal.instance}
|
||||
index={snapStates.showMediaModal.index}
|
||||
statusID={snapStates.showMediaModal.statusID}
|
||||
onClose={() => {
|
||||
|
@ -341,213 +409,179 @@ function App() {
|
|||
/>
|
||||
</Modal>
|
||||
)}
|
||||
{!!snapStates.showShortcutsSettings && (
|
||||
<Modal
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
states.showShortcutsSettings = false;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ShortcutsSettings />
|
||||
</Modal>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function initMasto(params) {
|
||||
const clientParams = {
|
||||
url: params.url || 'https://mastodon.social',
|
||||
accessToken: params.accessToken || null,
|
||||
disableVersionCheck: true,
|
||||
timeout: 30_000,
|
||||
};
|
||||
window.masto = createClient(clientParams);
|
||||
// let ws;
|
||||
// async function startStream() {
|
||||
// const { masto, instance } = api();
|
||||
// if (
|
||||
// ws &&
|
||||
// (ws.readyState === WebSocket.CONNECTING || ws.readyState === WebSocket.OPEN)
|
||||
// ) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
(async () => {
|
||||
// Request v2, fallback to v1 if fail
|
||||
let info;
|
||||
try {
|
||||
info = await masto.v2.instance.fetch();
|
||||
} catch (e) {}
|
||||
if (!info) {
|
||||
try {
|
||||
info = await masto.v1.instances.fetch();
|
||||
} catch (e) {}
|
||||
}
|
||||
if (!info) return;
|
||||
console.log(info);
|
||||
const {
|
||||
// v1
|
||||
uri,
|
||||
urls: { streamingApi } = {},
|
||||
// v2
|
||||
domain,
|
||||
configuration: { urls: { streaming } = {} } = {},
|
||||
} = info;
|
||||
if (uri || domain) {
|
||||
const instances = store.local.getJSON('instances') || {};
|
||||
instances[
|
||||
(domain || uri)
|
||||
.replace(/^https?:\/\//, '')
|
||||
.replace(/\/+$/, '')
|
||||
.toLowerCase()
|
||||
] = info;
|
||||
store.local.setJSON('instances', instances);
|
||||
}
|
||||
if (streamingApi || streaming) {
|
||||
window.masto = createClient({
|
||||
...clientParams,
|
||||
streamingApiUrl: streaming || streamingApi,
|
||||
});
|
||||
}
|
||||
})();
|
||||
}
|
||||
// const stream = await masto.v1.stream.streamUser();
|
||||
// console.log('STREAM START', { stream });
|
||||
// ws = stream.ws;
|
||||
|
||||
let ws;
|
||||
async function startStream() {
|
||||
if (
|
||||
ws &&
|
||||
(ws.readyState === WebSocket.CONNECTING || ws.readyState === WebSocket.OPEN)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
// const handleNewStatus = debounce((status) => {
|
||||
// console.log('UPDATE', status);
|
||||
// if (document.visibilityState === 'hidden') return;
|
||||
|
||||
const stream = await masto.v1.stream.streamUser();
|
||||
console.log('STREAM START', { stream });
|
||||
ws = stream.ws;
|
||||
// const inHomeNew = states.homeNew.find((s) => s.id === status.id);
|
||||
// const inHome = status.id === states.homeLast?.id;
|
||||
// if (!inHomeNew && !inHome) {
|
||||
// if (states.settings.boostsCarousel && status.reblog) {
|
||||
// // do nothing
|
||||
// } else {
|
||||
// states.homeNew.unshift({
|
||||
// id: status.id,
|
||||
// reblog: status.reblog?.id,
|
||||
// reply: !!status.inReplyToAccountId,
|
||||
// });
|
||||
// console.log('homeNew 1', [...states.homeNew]);
|
||||
// }
|
||||
// }
|
||||
|
||||
const handleNewStatus = debounce((status) => {
|
||||
console.log('UPDATE', status);
|
||||
// saveStatus(status, instance);
|
||||
// }, 5000);
|
||||
// stream.on('update', handleNewStatus);
|
||||
// stream.on('status.update', (status) => {
|
||||
// console.log('STATUS.UPDATE', status);
|
||||
// saveStatus(status, instance);
|
||||
// });
|
||||
// stream.on('delete', (statusID) => {
|
||||
// console.log('DELETE', statusID);
|
||||
// // delete states.statuses[statusID];
|
||||
// const s = getStatus(statusID);
|
||||
// if (s) s._deleted = true;
|
||||
// });
|
||||
// stream.on('notification', (notification) => {
|
||||
// console.log('NOTIFICATION', notification);
|
||||
|
||||
const inHomeNew = states.homeNew.find((s) => s.id === status.id);
|
||||
const inHome = status.id === states.homeLast?.id;
|
||||
if (!inHomeNew && !inHome) {
|
||||
if (states.settings.boostsCarousel && status.reblog) {
|
||||
// do nothing
|
||||
} else {
|
||||
states.homeNew.unshift({
|
||||
id: status.id,
|
||||
reblog: status.reblog?.id,
|
||||
reply: !!status.inReplyToAccountId,
|
||||
});
|
||||
console.log('homeNew 1', [...states.homeNew]);
|
||||
}
|
||||
}
|
||||
// const inNotificationsNew = states.notificationsNew.find(
|
||||
// (n) => n.id === notification.id,
|
||||
// );
|
||||
// const inNotifications = notification.id === states.notificationsLast?.id;
|
||||
// if (!inNotificationsNew && !inNotifications) {
|
||||
// states.notificationsNew.unshift(notification);
|
||||
// }
|
||||
|
||||
saveStatus(status);
|
||||
}, 5000);
|
||||
stream.on('update', handleNewStatus);
|
||||
stream.on('status.update', (status) => {
|
||||
console.log('STATUS.UPDATE', status);
|
||||
saveStatus(status);
|
||||
});
|
||||
stream.on('delete', (statusID) => {
|
||||
console.log('DELETE', statusID);
|
||||
// delete states.statuses[statusID];
|
||||
const s = states.statuses[statusID];
|
||||
if (s) s._deleted = true;
|
||||
});
|
||||
stream.on('notification', (notification) => {
|
||||
console.log('NOTIFICATION', notification);
|
||||
// saveStatus(notification.status, instance, { override: false });
|
||||
// });
|
||||
|
||||
const inNotificationsNew = states.notificationsNew.find(
|
||||
(n) => n.id === notification.id,
|
||||
);
|
||||
const inNotifications = notification.id === states.notificationLast?.id;
|
||||
if (!inNotificationsNew && !inNotifications) {
|
||||
states.notificationsNew.unshift(notification);
|
||||
}
|
||||
// stream.ws.onclose = () => {
|
||||
// console.log('STREAM CLOSED!');
|
||||
// if (document.visibilityState !== 'hidden') {
|
||||
// startStream();
|
||||
// }
|
||||
// };
|
||||
|
||||
saveStatus(notification.status, { override: false });
|
||||
});
|
||||
// return {
|
||||
// stream,
|
||||
// stopStream: () => {
|
||||
// stream.ws.close();
|
||||
// },
|
||||
// };
|
||||
// }
|
||||
|
||||
stream.ws.onclose = () => {
|
||||
console.log('STREAM CLOSED!');
|
||||
if (document.visibilityState !== 'hidden') {
|
||||
startStream();
|
||||
}
|
||||
};
|
||||
// let lastHidden;
|
||||
// function startVisibility() {
|
||||
// const { masto, instance } = api();
|
||||
// const handleVisible = (visible) => {
|
||||
// if (!visible) {
|
||||
// const timestamp = Date.now();
|
||||
// lastHidden = timestamp;
|
||||
// } else {
|
||||
// const timestamp = Date.now();
|
||||
// const diff = timestamp - lastHidden;
|
||||
// const diffMins = Math.round(diff / 1000 / 60);
|
||||
// console.log(`visible: ${visible}`, { lastHidden, diffMins });
|
||||
// if (!lastHidden || diffMins > 1) {
|
||||
// (async () => {
|
||||
// try {
|
||||
// const firstStatusID = states.homeLast?.id;
|
||||
// const firstNotificationID = states.notificationsLast?.id;
|
||||
// console.log({ states, firstNotificationID, firstStatusID });
|
||||
// const fetchHome = masto.v1.timelines.listHome({
|
||||
// limit: 5,
|
||||
// ...(firstStatusID && { sinceId: firstStatusID }),
|
||||
// });
|
||||
// const fetchNotifications = masto.v1.notifications.list({
|
||||
// limit: 1,
|
||||
// ...(firstNotificationID && { sinceId: firstNotificationID }),
|
||||
// });
|
||||
|
||||
return {
|
||||
stream,
|
||||
stopStream: () => {
|
||||
stream.ws.close();
|
||||
},
|
||||
};
|
||||
}
|
||||
// const newStatuses = await fetchHome;
|
||||
// const hasOneAndReblog =
|
||||
// newStatuses.length === 1 && newStatuses?.[0]?.reblog;
|
||||
// if (newStatuses.length) {
|
||||
// if (states.settings.boostsCarousel && hasOneAndReblog) {
|
||||
// // do nothing
|
||||
// } else {
|
||||
// states.homeNew = newStatuses.map((status) => {
|
||||
// saveStatus(status, instance);
|
||||
// return {
|
||||
// id: status.id,
|
||||
// reblog: status.reblog?.id,
|
||||
// reply: !!status.inReplyToAccountId,
|
||||
// };
|
||||
// });
|
||||
// console.log('homeNew 2', [...states.homeNew]);
|
||||
// }
|
||||
// }
|
||||
|
||||
let lastHidden;
|
||||
function startVisibility() {
|
||||
const handleVisible = (visible) => {
|
||||
if (!visible) {
|
||||
const timestamp = Date.now();
|
||||
lastHidden = timestamp;
|
||||
} else {
|
||||
const timestamp = Date.now();
|
||||
const diff = timestamp - lastHidden;
|
||||
const diffMins = Math.round(diff / 1000 / 60);
|
||||
console.log(`visible: ${visible}`, { lastHidden, diffMins });
|
||||
if (!lastHidden || diffMins > 1) {
|
||||
(async () => {
|
||||
try {
|
||||
const firstStatusID = states.homeLast?.id;
|
||||
const firstNotificationID = states.notificationsLast?.id;
|
||||
const fetchHome = masto.v1.timelines.listHome({
|
||||
limit: 5,
|
||||
...(firstStatusID && { sinceId: firstStatusID }),
|
||||
});
|
||||
const fetchNotifications = masto.v1.notifications.list({
|
||||
limit: 1,
|
||||
...(firstNotificationID && { sinceId: firstNotificationID }),
|
||||
});
|
||||
// const newNotifications = await fetchNotifications;
|
||||
// if (newNotifications.length) {
|
||||
// const notification = newNotifications[0];
|
||||
// const inNotificationsNew = states.notificationsNew.find(
|
||||
// (n) => n.id === notification.id,
|
||||
// );
|
||||
// const inNotifications =
|
||||
// notification.id === states.notificationsLast?.id;
|
||||
// if (!inNotificationsNew && !inNotifications) {
|
||||
// states.notificationsNew.unshift(notification);
|
||||
// }
|
||||
|
||||
const newStatuses = await fetchHome;
|
||||
const hasOneAndReblog =
|
||||
newStatuses.length === 1 && newStatuses?.[0]?.reblog;
|
||||
if (newStatuses.length) {
|
||||
if (states.settings.boostsCarousel && hasOneAndReblog) {
|
||||
// do nothing
|
||||
} else {
|
||||
states.homeNew = newStatuses.map((status) => {
|
||||
saveStatus(status);
|
||||
return {
|
||||
id: status.id,
|
||||
reblog: status.reblog?.id,
|
||||
reply: !!status.inReplyToAccountId,
|
||||
};
|
||||
});
|
||||
console.log('homeNew 2', [...states.homeNew]);
|
||||
}
|
||||
}
|
||||
// saveStatus(notification.status, instance, { override: false });
|
||||
// }
|
||||
// } catch (e) {
|
||||
// // Silently fail
|
||||
// console.error(e);
|
||||
// } finally {
|
||||
// startStream();
|
||||
// }
|
||||
// })();
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
|
||||
const newNotifications = await fetchNotifications;
|
||||
if (newNotifications.length) {
|
||||
const notification = newNotifications[0];
|
||||
const inNotificationsNew = states.notificationsNew.find(
|
||||
(n) => n.id === notification.id,
|
||||
);
|
||||
const inNotifications =
|
||||
notification.id === states.notificationLast?.id;
|
||||
if (!inNotificationsNew && !inNotifications) {
|
||||
states.notificationsNew.unshift(notification);
|
||||
}
|
||||
|
||||
saveStatus(notification.status, { override: false });
|
||||
}
|
||||
} catch (e) {
|
||||
// Silently fail
|
||||
console.error(e);
|
||||
} finally {
|
||||
startStream();
|
||||
}
|
||||
})();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleVisibilityChange = () => {
|
||||
const hidden = document.visibilityState === 'hidden';
|
||||
handleVisible(!hidden);
|
||||
console.log('VISIBILITY: ' + (hidden ? 'hidden' : 'visible'));
|
||||
};
|
||||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||||
requestAnimationFrame(handleVisibilityChange);
|
||||
return {
|
||||
stop: () => {
|
||||
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||||
},
|
||||
};
|
||||
}
|
||||
// const handleVisibilityChange = () => {
|
||||
// const hidden = document.visibilityState === 'hidden';
|
||||
// handleVisible(!hidden);
|
||||
// console.log('VISIBILITY: ' + (hidden ? 'hidden' : 'visible'));
|
||||
// };
|
||||
// document.addEventListener('visibilitychange', handleVisibilityChange);
|
||||
// requestAnimationFrame(handleVisibilityChange);
|
||||
// return {
|
||||
// stop: () => {
|
||||
// document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||||
// },
|
||||
// };
|
||||
// }
|
||||
|
||||
export { App };
|
||||
|
|
12
src/components/AsyncText.jsx
Normal file
12
src/components/AsyncText.jsx
Normal file
|
@ -0,0 +1,12 @@
|
|||
import { useEffect, useState } from 'preact/hooks';
|
||||
|
||||
function AsyncText({ children }) {
|
||||
if (typeof children === 'string') return children;
|
||||
const [text, setText] = useState('');
|
||||
useEffect(() => {
|
||||
Promise.resolve(children).then(setText);
|
||||
}, [children]);
|
||||
return text;
|
||||
}
|
||||
|
||||
export default AsyncText;
|
21
src/components/MenuLink.jsx
Normal file
21
src/components/MenuLink.jsx
Normal file
|
@ -0,0 +1,21 @@
|
|||
import { FocusableItem } from '@szhsin/react-menu';
|
||||
|
||||
import Link from './link';
|
||||
|
||||
function MenuLink(props) {
|
||||
return (
|
||||
<FocusableItem>
|
||||
{({ ref, closeMenu }) => (
|
||||
<Link
|
||||
{...props}
|
||||
ref={ref}
|
||||
onClick={({ detail }) =>
|
||||
closeMenu(detail === 0 ? 'Enter' : undefined)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</FocusableItem>
|
||||
);
|
||||
}
|
||||
|
||||
export default MenuLink;
|
14
src/components/account-block.css
Normal file
14
src/components/account-block.css
Normal file
|
@ -0,0 +1,14 @@
|
|||
.account-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
.account-block:hover b {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.account-block.skeleton {
|
||||
color: var(--bg-faded-color);
|
||||
}
|
66
src/components/account-block.jsx
Normal file
66
src/components/account-block.jsx
Normal file
|
@ -0,0 +1,66 @@
|
|||
import './account-block.css';
|
||||
|
||||
import emojifyText from '../utils/emojify-text';
|
||||
import states from '../utils/states';
|
||||
|
||||
import Avatar from './avatar';
|
||||
|
||||
function AccountBlock({
|
||||
skeleton,
|
||||
account,
|
||||
avatarSize = 'xl',
|
||||
instance,
|
||||
external,
|
||||
onClick,
|
||||
}) {
|
||||
if (skeleton) {
|
||||
return (
|
||||
<div class="account-block skeleton">
|
||||
<Avatar size={avatarSize} />
|
||||
<span>
|
||||
<b>████████</b>
|
||||
<br />
|
||||
@██████
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const { acct, avatar, avatarStatic, displayName, username, emojis, url } =
|
||||
account;
|
||||
const displayNameWithEmoji = emojifyText(displayName, emojis);
|
||||
|
||||
return (
|
||||
<a
|
||||
class="account-block"
|
||||
href={url}
|
||||
target={external ? '_blank' : null}
|
||||
title={`@${acct}`}
|
||||
onClick={(e) => {
|
||||
if (external) return;
|
||||
e.preventDefault();
|
||||
if (onClick) return onClick(e);
|
||||
states.showAccount = {
|
||||
account,
|
||||
instance,
|
||||
};
|
||||
}}
|
||||
>
|
||||
<Avatar url={avatar} size={avatarSize} />
|
||||
<span>
|
||||
{displayName ? (
|
||||
<b
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: displayNameWithEmoji,
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<b>{username}</b>
|
||||
)}
|
||||
<br />@{acct}
|
||||
</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
export default AccountBlock;
|
|
@ -2,19 +2,27 @@ import './account.css';
|
|||
|
||||
import { useEffect, useState } from 'preact/hooks';
|
||||
|
||||
import { api } from '../utils/api';
|
||||
import emojifyText from '../utils/emojify-text';
|
||||
import enhanceContent from '../utils/enhance-content';
|
||||
import handleContentLinks from '../utils/handle-content-links';
|
||||
import shortenNumber from '../utils/shorten-number';
|
||||
import states from '../utils/states';
|
||||
import states, { hideAllModals } from '../utils/states';
|
||||
import store from '../utils/store';
|
||||
|
||||
import AccountBlock from './account-block';
|
||||
import Avatar from './avatar';
|
||||
import Icon from './icon';
|
||||
import Link from './link';
|
||||
import NameText from './name-text';
|
||||
|
||||
function Account({ account, onClose }) {
|
||||
function Account({ account, instance: propInstance, onClose }) {
|
||||
const { masto, instance, authenticated } = api({ instance: propInstance });
|
||||
const {
|
||||
masto: currentMasto,
|
||||
instance: currentInstance,
|
||||
authenticated: currentAuthenticated,
|
||||
} = api();
|
||||
const sameInstance = instance === currentInstance;
|
||||
const [uiState, setUIState] = useState('default');
|
||||
const isString = typeof account === 'string';
|
||||
const [info, setInfo] = useState(isString ? null : account);
|
||||
|
@ -36,16 +44,18 @@ function Account({ account, onClose }) {
|
|||
q: account,
|
||||
type: 'accounts',
|
||||
limit: 1,
|
||||
resolve: true,
|
||||
resolve: authenticated,
|
||||
});
|
||||
if (result.accounts.length) {
|
||||
setInfo(result.accounts[0]);
|
||||
setUIState('default');
|
||||
return;
|
||||
}
|
||||
setInfo(null);
|
||||
setUIState('error');
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setInfo(null);
|
||||
setUIState('error');
|
||||
}
|
||||
}
|
||||
|
@ -84,17 +94,42 @@ function Account({ account, onClose }) {
|
|||
useEffect(() => {
|
||||
if (info) {
|
||||
const currentAccount = store.session.get('currentAccount');
|
||||
if (currentAccount === id) {
|
||||
let accountID;
|
||||
(async () => {
|
||||
if (sameInstance && authenticated) {
|
||||
accountID = id;
|
||||
} else if (!sameInstance && currentAuthenticated) {
|
||||
// Grab this account from my logged-in instance
|
||||
const acctHasInstance = info.acct.includes('@');
|
||||
try {
|
||||
const results = await currentMasto.v2.search({
|
||||
q: acctHasInstance ? info.acct : `${info.username}@${instance}`,
|
||||
type: 'accounts',
|
||||
limit: 1,
|
||||
resolve: true,
|
||||
});
|
||||
console.log('🥏 Fetched account from logged-in instance', results);
|
||||
accountID = results.accounts[0].id;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
if (!accountID) return;
|
||||
|
||||
if (currentAccount === accountID) {
|
||||
// It's myself!
|
||||
return;
|
||||
}
|
||||
|
||||
setRelationshipUIState('loading');
|
||||
setFamiliarFollowers([]);
|
||||
|
||||
(async () => {
|
||||
const fetchRelationships = masto.v1.accounts.fetchRelationships([id]);
|
||||
const fetchRelationships = currentMasto.v1.accounts.fetchRelationships([
|
||||
accountID,
|
||||
]);
|
||||
const fetchFamiliarFollowers =
|
||||
masto.v1.accounts.fetchFamiliarFollowers(id);
|
||||
currentMasto.v1.accounts.fetchFamiliarFollowers(accountID);
|
||||
|
||||
try {
|
||||
const relationships = await fetchRelationships;
|
||||
|
@ -120,7 +155,7 @@ function Account({ account, onClose }) {
|
|||
}
|
||||
})();
|
||||
}
|
||||
}, [info]);
|
||||
}, [info, authenticated]);
|
||||
|
||||
const {
|
||||
following,
|
||||
|
@ -154,8 +189,7 @@ function Account({ account, onClose }) {
|
|||
{uiState === 'loading' ? (
|
||||
<>
|
||||
<header>
|
||||
<Avatar size="xxxl" />
|
||||
███ ████████████
|
||||
<AccountBlock avatarSize="xxxl" skeleton />
|
||||
</header>
|
||||
<main>
|
||||
<div class="note">
|
||||
|
@ -173,8 +207,12 @@ function Account({ account, onClose }) {
|
|||
info && (
|
||||
<>
|
||||
<header>
|
||||
<Avatar url={avatar} size="xxxl" />
|
||||
<NameText account={info} showAcct external />
|
||||
<AccountBlock
|
||||
account={info}
|
||||
instance={instance}
|
||||
avatarSize="xxxl"
|
||||
external
|
||||
/>
|
||||
</header>
|
||||
<main tabIndex="-1">
|
||||
{bot && (
|
||||
|
@ -186,7 +224,9 @@ function Account({ account, onClose }) {
|
|||
)}
|
||||
<div
|
||||
class="note"
|
||||
onClick={handleContentLinks()}
|
||||
onClick={handleContentLinks({
|
||||
instance,
|
||||
})}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: enhanceContent(note, { emojis }),
|
||||
}}
|
||||
|
@ -218,7 +258,12 @@ function Account({ account, onClose }) {
|
|||
</div>
|
||||
)}
|
||||
<p class="stats">
|
||||
<Link to={`/a/${id}`} onClick={onClose}>
|
||||
<Link
|
||||
to={instance ? `/${instance}/a/${id}` : `/a/${id}`}
|
||||
onClick={() => {
|
||||
hideAllModals();
|
||||
}}
|
||||
>
|
||||
Posts
|
||||
<br />
|
||||
<b title={statusesCount}>
|
||||
|
@ -265,7 +310,10 @@ function Account({ account, onClose }) {
|
|||
rel="noopener noreferrer"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
states.showAccount = follower;
|
||||
states.showAccount = {
|
||||
account: follower,
|
||||
instance,
|
||||
};
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
|
@ -294,17 +342,16 @@ function Account({ account, onClose }) {
|
|||
if (following || requested) {
|
||||
const yes = confirm(
|
||||
requested
|
||||
? 'Are you sure that you want to withdraw follow request?'
|
||||
: 'Are you sure that you want to unfollow this account?',
|
||||
? 'Withdraw follow request?'
|
||||
: `Unfollow @${info.acct || info.username}?`,
|
||||
);
|
||||
if (yes) {
|
||||
newRelationship =
|
||||
await masto.v1.accounts.unfollow(id);
|
||||
await currentMasto.v1.accounts.unfollow(id);
|
||||
}
|
||||
} else {
|
||||
newRelationship = await masto.v1.accounts.follow(
|
||||
id,
|
||||
);
|
||||
newRelationship =
|
||||
await currentMasto.v1.accounts.follow(id);
|
||||
}
|
||||
if (newRelationship) setRelationship(newRelationship);
|
||||
setRelationshipUIState('default');
|
||||
|
|
46
src/components/columns.jsx
Normal file
46
src/components/columns.jsx
Normal file
|
@ -0,0 +1,46 @@
|
|||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { useSnapshot } from 'valtio';
|
||||
|
||||
import Bookmarks from '../pages/bookmarks';
|
||||
import Favourites from '../pages/favourites';
|
||||
import Following from '../pages/following';
|
||||
import Hashtag from '../pages/hashtag';
|
||||
import List from '../pages/list';
|
||||
import Notifications from '../pages/notifications';
|
||||
import Public from '../pages/public';
|
||||
import states from '../utils/states';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
||||
function Columns() {
|
||||
useTitle('Home', '/');
|
||||
const snapStates = useSnapshot(states);
|
||||
const { shortcuts } = snapStates;
|
||||
|
||||
const components = shortcuts.map((shortcut) => {
|
||||
const { type, ...params } = shortcut;
|
||||
const Component = {
|
||||
following: Following,
|
||||
notifications: Notifications,
|
||||
list: List,
|
||||
public: Public,
|
||||
bookmarks: Bookmarks,
|
||||
favourites: Favourites,
|
||||
hashtag: Hashtag,
|
||||
}[type];
|
||||
if (!Component) return null;
|
||||
return <Component {...params} />;
|
||||
});
|
||||
|
||||
useHotkeys(['1', '2', '3', '4', '5', '6', '7', '8', '9'], (e, handler) => {
|
||||
try {
|
||||
const index = parseInt(handler.keys[0], 10) - 1;
|
||||
document.querySelectorAll('#columns > *')[index].focus();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
|
||||
return <div id="columns">{components}</div>;
|
||||
}
|
||||
|
||||
export default Columns;
|
|
@ -1,5 +1,5 @@
|
|||
#compose-container {
|
||||
width: 40em;
|
||||
width: var(--main-width);
|
||||
max-width: 100vw;
|
||||
align-self: stretch;
|
||||
animation: fade-in 0.2s ease-out;
|
||||
|
@ -60,6 +60,11 @@
|
|||
animation: appear-up 1s ease-in-out;
|
||||
overflow: auto;
|
||||
}
|
||||
#compose-container .status-preview .hashtag {
|
||||
/* Prevent hashtags from being clickable */
|
||||
/* TODO: maybe use a different solution? */
|
||||
pointer-events: none;
|
||||
}
|
||||
#compose-container.standalone .status-preview * {
|
||||
/*
|
||||
For standalone mode (new window), prevent interacting with the status preview for now
|
||||
|
@ -164,7 +169,7 @@
|
|||
left: -100vw !important;
|
||||
}
|
||||
#compose-container .toolbar-button select {
|
||||
background-color: transparent;
|
||||
background-color: inherit;
|
||||
border: 0;
|
||||
padding: 0 0 0 8px;
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@ import './compose.css';
|
|||
import '@github/text-expander-element';
|
||||
import equal from 'fast-deep-equal';
|
||||
import { forwardRef } from 'preact/compat';
|
||||
import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import stringLength from 'string-length';
|
||||
import { uid } from 'uid/single';
|
||||
|
@ -12,12 +12,18 @@ import { useSnapshot } from 'valtio';
|
|||
|
||||
import supportedLanguages from '../data/status-supported-languages';
|
||||
import urlRegex from '../data/url-regex';
|
||||
import { api } from '../utils/api';
|
||||
import db from '../utils/db';
|
||||
import emojifyText from '../utils/emojify-text';
|
||||
import openCompose from '../utils/open-compose';
|
||||
import states from '../utils/states';
|
||||
import states, { saveStatus } from '../utils/states';
|
||||
import store from '../utils/store';
|
||||
import { getCurrentAccount, getCurrentAccountNS } from '../utils/store-utils';
|
||||
import {
|
||||
getCurrentAccount,
|
||||
getCurrentAccountNS,
|
||||
getCurrentInstance,
|
||||
} from '../utils/store-utils';
|
||||
import supports from '../utils/supports';
|
||||
import useInterval from '../utils/useInterval';
|
||||
import visibilityIconsMap from '../utils/visibility-icons-map';
|
||||
|
||||
|
@ -99,6 +105,7 @@ function Compose({
|
|||
hasOpener,
|
||||
}) {
|
||||
console.warn('RENDER COMPOSER');
|
||||
const { masto } = api();
|
||||
const [uiState, setUIState] = useState('default');
|
||||
const UID = useRef(draftStatus?.uid || uid());
|
||||
console.log('Compose UID', UID.current);
|
||||
|
@ -106,22 +113,8 @@ function Compose({
|
|||
const currentAccount = getCurrentAccount();
|
||||
const currentAccountInfo = currentAccount.info;
|
||||
|
||||
const configuration = useMemo(() => {
|
||||
try {
|
||||
const instances = store.local.getJSON('instances');
|
||||
const currentInstance = currentAccount.instanceURL.toLowerCase();
|
||||
const config = instances[currentInstance].configuration;
|
||||
console.log(config);
|
||||
return config;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
alert('Failed to load instance configuration. Please try again.');
|
||||
// Temporary fix for corrupted data
|
||||
store.local.del('instances');
|
||||
location.reload();
|
||||
return {};
|
||||
}
|
||||
}, []);
|
||||
const { configuration } = getCurrentInstance();
|
||||
console.log('⚙️ Configuration', configuration);
|
||||
|
||||
const {
|
||||
statuses: { maxCharacters, maxMediaAttachments, charactersReservedPerUrl },
|
||||
|
@ -146,6 +139,8 @@ function Compose({
|
|||
const [mediaAttachments, setMediaAttachments] = useState([]);
|
||||
const [poll, setPoll] = useState(null);
|
||||
|
||||
const prefs = store.account.get('preferences') || {};
|
||||
|
||||
const customEmojis = useRef();
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
|
@ -192,7 +187,7 @@ function Compose({
|
|||
}
|
||||
focusTextarea();
|
||||
setVisibility(visibility);
|
||||
setLanguage(language || DEFAULT_LANG);
|
||||
setLanguage(language || prefs.postingDefaultLanguage || DEFAULT_LANG);
|
||||
setSensitive(sensitive);
|
||||
}
|
||||
if (draftStatus) {
|
||||
|
@ -215,7 +210,7 @@ function Compose({
|
|||
focusTextarea();
|
||||
spoilerTextRef.current.value = spoilerText;
|
||||
setVisibility(visibility);
|
||||
setLanguage(language || DEFAULT_LANG);
|
||||
setLanguage(language || prefs.postingDefaultLanguage || DEFAULT_LANG);
|
||||
setSensitive(sensitive);
|
||||
setPoll(composablePoll);
|
||||
setMediaAttachments(mediaAttachments);
|
||||
|
@ -241,7 +236,7 @@ function Compose({
|
|||
focusTextarea();
|
||||
spoilerTextRef.current.value = spoilerText;
|
||||
setVisibility(visibility);
|
||||
setLanguage(language || DEFAULT_LANG);
|
||||
setLanguage(language || presf.postingDefaultLanguage || DEFAULT_LANG);
|
||||
setSensitive(sensitive);
|
||||
setPoll(composablePoll);
|
||||
setMediaAttachments(mediaAttachments);
|
||||
|
@ -254,13 +249,22 @@ function Compose({
|
|||
})();
|
||||
} else {
|
||||
focusTextarea();
|
||||
console.log('Apply prefs', prefs);
|
||||
if (prefs.postingDefaultVisibility) {
|
||||
setVisibility(prefs.postingDefaultVisibility);
|
||||
}
|
||||
if (prefs.postingDefaultLanguage) {
|
||||
setLanguage(prefs.postingDefaultLanguage);
|
||||
}
|
||||
if (prefs.postingDefaultSensitive) {
|
||||
setSensitive(prefs.postingDefaultSensitive);
|
||||
}
|
||||
}
|
||||
}, [draftStatus, editStatus, replyToStatus]);
|
||||
|
||||
const formRef = useRef();
|
||||
|
||||
const beforeUnloadCopy =
|
||||
'You have unsaved changes. Are you sure you want to discard this post?';
|
||||
const beforeUnloadCopy = 'You have unsaved changes. Discard this post?';
|
||||
const canClose = () => {
|
||||
const { value, dataset } = textareaRef.current;
|
||||
|
||||
|
@ -362,6 +366,8 @@ function Compose({
|
|||
},
|
||||
{
|
||||
enableOnFormTags: true,
|
||||
// Use keyup because Esc keydown will close the confirm dialog on Safari
|
||||
keyup: true,
|
||||
},
|
||||
);
|
||||
|
||||
|
@ -757,7 +763,16 @@ function Compose({
|
|||
// mediaIds: mediaAttachments.map((attachment) => attachment.id),
|
||||
media_ids: mediaAttachments.map((attachment) => attachment.id),
|
||||
};
|
||||
if (!editStatus) {
|
||||
if (editStatus && supports('@mastodon/edit-media-attributes')) {
|
||||
params.media_attributes = mediaAttachments.map((attachment) => {
|
||||
return {
|
||||
id: attachment.id,
|
||||
description: attachment.description,
|
||||
// focus
|
||||
// thumbnail
|
||||
};
|
||||
});
|
||||
} else if (!editStatus) {
|
||||
params.visibility = visibility;
|
||||
// params.inReplyToId = replyToStatus?.id || undefined;
|
||||
params.in_reply_to_id = replyToStatus?.id || undefined;
|
||||
|
@ -771,6 +786,9 @@ function Compose({
|
|||
editStatus.id,
|
||||
params,
|
||||
);
|
||||
saveStatus(newStatus, {
|
||||
skipThreading: true,
|
||||
});
|
||||
} else {
|
||||
newStatus = await masto.v1.statuses.create(params, {
|
||||
idempotencyKey: UID.current,
|
||||
|
@ -799,6 +817,7 @@ function Compose({
|
|||
disabled={uiState === 'loading'}
|
||||
class="spoiler-text-field"
|
||||
lang={language}
|
||||
spellCheck="true"
|
||||
style={{
|
||||
opacity: sensitive ? 1 : 0,
|
||||
pointerEvents: sensitive ? 'auto' : 'none',
|
||||
|
@ -868,6 +887,9 @@ function Compose({
|
|||
updateCharCount();
|
||||
}}
|
||||
maxCharacters={maxCharacters}
|
||||
performSearch={(params) => {
|
||||
return masto.v2.search(params);
|
||||
}}
|
||||
/>
|
||||
{mediaAttachments.length > 0 && (
|
||||
<div class="media-attachments">
|
||||
|
@ -1031,7 +1053,7 @@ function Compose({
|
|||
|
||||
const Textarea = forwardRef((props, ref) => {
|
||||
const [text, setText] = useState(ref.current?.value || '');
|
||||
const { maxCharacters, ...textareaProps } = props;
|
||||
const { maxCharacters, performSearch = () => {}, ...textareaProps } = props;
|
||||
const snapStates = useSnapshot(states);
|
||||
const charCount = snapStates.composerCharacterCount;
|
||||
|
||||
|
@ -1087,7 +1109,7 @@ const Textarea = forwardRef((props, ref) => {
|
|||
}[key];
|
||||
provide(
|
||||
new Promise((resolve) => {
|
||||
const searchResults = masto.v2.search({
|
||||
const searchResults = performSearch({
|
||||
type,
|
||||
q: text,
|
||||
limit: 5,
|
||||
|
@ -1258,6 +1280,7 @@ function MediaAttachment({
|
|||
onDescriptionChange = () => {},
|
||||
onRemove = () => {},
|
||||
}) {
|
||||
const supportsEdit = supports('@mastodon/edit-media-attributes');
|
||||
const { url, type, id } = attachment;
|
||||
console.log({ attachment });
|
||||
const [description, setDescription] = useState(attachment.description);
|
||||
|
@ -1283,7 +1306,7 @@ function MediaAttachment({
|
|||
|
||||
const descTextarea = (
|
||||
<>
|
||||
{!!id ? (
|
||||
{!!id && !supportsEdit ? (
|
||||
<div class="media-desc">
|
||||
<span class="tag">Uploaded</span>
|
||||
<p title={description}>
|
||||
|
@ -1413,6 +1436,7 @@ function Poll({
|
|||
maxlength={maxCharactersPerOption}
|
||||
placeholder={`Choice ${i + 1}`}
|
||||
lang={lang}
|
||||
spellCheck="true"
|
||||
onInput={(e) => {
|
||||
const { value } = e.target;
|
||||
options[i] = value;
|
||||
|
|
|
@ -2,6 +2,7 @@ import './drafts.css';
|
|||
|
||||
import { useEffect, useMemo, useReducer, useState } from 'react';
|
||||
|
||||
import { api } from '../utils/api';
|
||||
import db from '../utils/db';
|
||||
import states from '../utils/states';
|
||||
import { getCurrentAccountNS } from '../utils/store-utils';
|
||||
|
@ -10,6 +11,7 @@ import Icon from './icon';
|
|||
import Loader from './loader';
|
||||
|
||||
function Drafts() {
|
||||
const { masto } = api();
|
||||
const [uiState, setUIState] = useState('default');
|
||||
const [drafts, setDrafts] = useState([]);
|
||||
const [reloadCount, reload] = useReducer((c) => c + 1, 0);
|
||||
|
@ -101,9 +103,7 @@ function Drafts() {
|
|||
onClick={() => {
|
||||
(async () => {
|
||||
try {
|
||||
const yes = confirm(
|
||||
'Are you sure you want to delete this draft?',
|
||||
);
|
||||
const yes = confirm('Delete this draft?');
|
||||
if (yes) {
|
||||
await db.drafts.del(key);
|
||||
reload();
|
||||
|
@ -159,9 +159,7 @@ function Drafts() {
|
|||
disabled={uiState === 'loading'}
|
||||
onClick={() => {
|
||||
(async () => {
|
||||
const yes = confirm(
|
||||
'Are you sure you want to delete all drafts?',
|
||||
);
|
||||
const yes = confirm('Delete all drafts?');
|
||||
if (yes) {
|
||||
setUIState('loading');
|
||||
try {
|
||||
|
|
|
@ -26,7 +26,7 @@ const ICONS = {
|
|||
'eye-open': 'mingcute:eye-2-line',
|
||||
message: 'mingcute:mail-line',
|
||||
comment: 'mingcute:chat-3-line',
|
||||
home: 'mingcute:home-5-line',
|
||||
home: 'mingcute:home-3-line',
|
||||
notification: 'mingcute:notification-line',
|
||||
follow: 'mingcute:user-follow-line',
|
||||
'follow-add': 'mingcute:user-add-line',
|
||||
|
@ -48,6 +48,15 @@ const ICONS = {
|
|||
thread: 'mingcute:route-line',
|
||||
group: 'mingcute:group-line',
|
||||
bot: 'mingcute:android-2-line',
|
||||
menu: 'mingcute:rows-4-line',
|
||||
list: 'mingcute:list-check-line',
|
||||
search: 'mingcute:search-2-line',
|
||||
hashtag: 'mingcute:hashtag-line',
|
||||
info: 'mingcute:information-line',
|
||||
shortcut: 'mingcute:lightning-line',
|
||||
user: 'mingcute:user-4-line',
|
||||
following: 'mingcute:walk-line',
|
||||
pin: 'mingcute:pin-line',
|
||||
};
|
||||
|
||||
const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import { forwardRef } from 'preact/compat';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
import states from '../utils/states';
|
||||
|
@ -10,7 +11,7 @@ import states from '../utils/states';
|
|||
3. Not using <Link state/> because it modifies history.state that *persists* across page reloads. I don't need that, so using valtio's states instead.
|
||||
*/
|
||||
|
||||
const Link = (props) => {
|
||||
const Link = forwardRef((props, ref) => {
|
||||
let routerLocation;
|
||||
try {
|
||||
routerLocation = useLocation();
|
||||
|
@ -21,6 +22,7 @@ const Link = (props) => {
|
|||
const isActive = hash === to;
|
||||
return (
|
||||
<a
|
||||
ref={ref}
|
||||
href={`#${to}`}
|
||||
{...restProps}
|
||||
class={`${props.class || ''} ${isActive ? 'is-active' : ''}`}
|
||||
|
@ -30,6 +32,6 @@ const Link = (props) => {
|
|||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default Link;
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import { getBlurHashAverageColor } from 'fast-blurhash';
|
||||
import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { useMatch } from 'react-router-dom';
|
||||
|
||||
import Icon from './icon';
|
||||
import Link from './link';
|
||||
|
@ -11,11 +10,11 @@ import Modal from './modal';
|
|||
function MediaModal({
|
||||
mediaAttachments,
|
||||
statusID,
|
||||
instance,
|
||||
index = 0,
|
||||
onClose = () => {},
|
||||
}) {
|
||||
const carouselRef = useRef(null);
|
||||
const isStatusLocation = useMatch('/s/:id');
|
||||
|
||||
const [currentIndex, setCurrentIndex] = useState(index);
|
||||
const carouselFocusItem = useRef(null);
|
||||
|
@ -119,7 +118,7 @@ function MediaModal({
|
|||
setShowMediaAlt(media.description);
|
||||
}}
|
||||
>
|
||||
<span class="tag">ALT</span>{' '}
|
||||
<Icon icon="info" />
|
||||
<span class="media-alt-desc">{media.description}</span>
|
||||
</button>
|
||||
)}
|
||||
|
@ -165,9 +164,8 @@ function MediaModal({
|
|||
<span />
|
||||
)}
|
||||
<span>
|
||||
{!isStatusLocation && (
|
||||
<Link
|
||||
to={`/s/${statusID}`}
|
||||
to={instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`}
|
||||
class="button carousel-button media-post-link plain3"
|
||||
onClick={() => {
|
||||
// if small screen (not media query min-width 40em + 350px), run onClose
|
||||
|
@ -179,8 +177,7 @@ function MediaModal({
|
|||
}}
|
||||
>
|
||||
<span class="button-label">See post </span>»
|
||||
</Link>
|
||||
)}{' '}
|
||||
</Link>{' '}
|
||||
<a
|
||||
href={
|
||||
mediaAttachments[currentIndex]?.remoteUrl ||
|
||||
|
|
105
src/components/menu.jsx
Normal file
105
src/components/menu.jsx
Normal file
|
@ -0,0 +1,105 @@
|
|||
import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
|
||||
import { useSnapshot } from 'valtio';
|
||||
|
||||
import { api } from '../utils/api';
|
||||
import states from '../utils/states';
|
||||
|
||||
import Icon from './icon';
|
||||
import MenuLink from './MenuLink';
|
||||
|
||||
function NavMenu(props) {
|
||||
const snapStates = useSnapshot(states);
|
||||
const { instance, authenticated } = api();
|
||||
|
||||
// Home = Following
|
||||
// But when in multi-column mode, Home becomes columns of anything
|
||||
// User may choose pin or not to pin Following
|
||||
// If user doesn't pin Following, we show it in the menu
|
||||
const showFollowing =
|
||||
snapStates.settings.shortcutsColumnsMode &&
|
||||
!snapStates.shortcuts.find((pin) => pin.type === 'following');
|
||||
|
||||
return (
|
||||
<Menu
|
||||
portal={{
|
||||
target: document.body,
|
||||
}}
|
||||
{...props}
|
||||
overflow="auto"
|
||||
viewScroll="close"
|
||||
boundingBoxPadding="8 8 8 8"
|
||||
menuButton={
|
||||
<button type="button" class="button plain">
|
||||
<Icon icon="menu" size="l" />
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<MenuLink to="/">
|
||||
<Icon icon="home" size="l" /> <span>Home</span>
|
||||
</MenuLink>
|
||||
{authenticated && (
|
||||
<>
|
||||
{showFollowing && (
|
||||
<MenuLink to="/following">
|
||||
<Icon icon="following" size="l" /> <span>Following</span>
|
||||
</MenuLink>
|
||||
)}
|
||||
<MenuLink to="/notifications">
|
||||
<Icon icon="notification" size="l" /> <span>Notifications</span>
|
||||
{snapStates.notificationsShowNew && (
|
||||
<sup title="New" style={{ opacity: 0.5 }}>
|
||||
{' '}
|
||||
•
|
||||
</sup>
|
||||
)}
|
||||
</MenuLink>
|
||||
<MenuDivider />
|
||||
<MenuLink to="/l">
|
||||
<Icon icon="list" size="l" /> <span>Lists</span>
|
||||
</MenuLink>
|
||||
<MenuLink to="/ft">
|
||||
<Icon icon="hashtag" size="l" /> <span>Followed Hashtags</span>
|
||||
</MenuLink>
|
||||
<MenuLink to="/b">
|
||||
<Icon icon="bookmark" size="l" /> <span>Bookmarks</span>
|
||||
</MenuLink>
|
||||
<MenuLink to="/f">
|
||||
<Icon icon="heart" size="l" /> <span>Favourites</span>
|
||||
</MenuLink>
|
||||
</>
|
||||
)}
|
||||
<MenuDivider />
|
||||
<MenuLink to={`/search`}>
|
||||
<Icon icon="search" size="l" /> <span>Search</span>
|
||||
</MenuLink>
|
||||
<MenuLink to={`/${instance}/p/l`}>
|
||||
<Icon icon="group" size="l" /> <span>Local</span>
|
||||
</MenuLink>
|
||||
<MenuLink to={`/${instance}/p`}>
|
||||
<Icon icon="earth" size="l" /> <span>Federated</span>
|
||||
</MenuLink>
|
||||
{authenticated && (
|
||||
<>
|
||||
<MenuDivider />
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
states.showShortcutsSettings = true;
|
||||
}}
|
||||
>
|
||||
<Icon icon="shortcut" size="l" />{' '}
|
||||
<span>Shortcuts Settings…</span>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
states.showSettings = true;
|
||||
}}
|
||||
>
|
||||
<Icon icon="gear" size="l" /> <span>Settings…</span>
|
||||
</MenuItem>
|
||||
</>
|
||||
)}
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
export default NavMenu;
|
|
@ -5,21 +5,31 @@ import states from '../utils/states';
|
|||
|
||||
import Avatar from './avatar';
|
||||
|
||||
function NameText({ account, showAvatar, showAcct, short, external, onClick }) {
|
||||
function NameText({
|
||||
account,
|
||||
instance,
|
||||
showAvatar,
|
||||
showAcct,
|
||||
short,
|
||||
external,
|
||||
onClick,
|
||||
}) {
|
||||
const { acct, avatar, avatarStatic, id, url, displayName, emojis } = account;
|
||||
let { username } = account;
|
||||
|
||||
const displayNameWithEmoji = emojifyText(displayName, emojis);
|
||||
|
||||
if (
|
||||
!short &&
|
||||
username.toLowerCase().trim() ===
|
||||
(displayName || '')
|
||||
const trimmedUsername = username.toLowerCase().trim();
|
||||
const trimmedDisplayName = (displayName || '').toLowerCase().trim();
|
||||
const shortenedDisplayName = trimmedDisplayName
|
||||
.replace(/(\:(\w|\+|\-)+\:)(?=|[\!\.\?]|$)/g, '') // Remove shortcodes, regex from https://regex101.com/r/iE9uV0/1
|
||||
.replace(/\s+/g, '') // E.g. "My name" === "myname"
|
||||
.replace(/[^a-z0-9]/gi, '') // Remove non-alphanumeric characters
|
||||
.toLowerCase()
|
||||
.trim()
|
||||
.replace(/[^a-z0-9]/gi, ''); // Remove non-alphanumeric characters
|
||||
|
||||
if (
|
||||
!short &&
|
||||
(trimmedUsername === trimmedDisplayName ||
|
||||
trimmedUsername === shortenedDisplayName)
|
||||
) {
|
||||
username = null;
|
||||
}
|
||||
|
@ -34,7 +44,10 @@ function NameText({ account, showAvatar, showAcct, short, external, onClick }) {
|
|||
if (external) return;
|
||||
e.preventDefault();
|
||||
if (onClick) return onClick(e);
|
||||
states.showAccount = account;
|
||||
states.showAccount = {
|
||||
account,
|
||||
instance,
|
||||
};
|
||||
}}
|
||||
>
|
||||
{showAvatar && (
|
||||
|
|
73
src/components/shortcuts-settings.css
Normal file
73
src/components/shortcuts-settings.css
Normal file
|
@ -0,0 +1,73 @@
|
|||
#shortcuts-settings-container .shortcuts-list {
|
||||
line-height: 1.5;
|
||||
padding: 0;
|
||||
margin: 8px 0 0;
|
||||
counter-reset: index;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#shortcuts-settings-container .shortcuts-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
gap: 4px;
|
||||
background-color: var(--bg-faded-color);
|
||||
}
|
||||
#shortcuts-settings-container .shortcuts-list li::before {
|
||||
content: counter(index);
|
||||
counter-increment: index;
|
||||
display: inline-block;
|
||||
width: 1.2em;
|
||||
text-align: right;
|
||||
margin-right: 8px;
|
||||
color: var(--text-insignificant-color);
|
||||
font-size: 90%;
|
||||
}
|
||||
#shortcuts-settings-container .shortcuts-list li .shortcut-text {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#shortcuts-settings-container summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#shortcuts-settings-container form {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background-color: var(--bg-faded-color);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
#shortcuts-settings-container form header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#shortcuts-settings-container form > * {
|
||||
flex-basis: max(320px, 100%);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#shortcuts-settings-container form label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
#shortcuts-settings-container form label > span:first-child {
|
||||
flex-basis: 5em;
|
||||
text-align: right;
|
||||
}
|
||||
#shortcuts-settings-container form :is(input[type='text'], select) {
|
||||
flex-grow: 1;
|
||||
flex-basis: 70%;
|
||||
flex-shrink: 1;
|
||||
/* width: calc(100% - 32px); */
|
||||
min-width: 0;
|
||||
max-width: 320px;
|
||||
}
|
387
src/components/shortcuts-settings.jsx
Normal file
387
src/components/shortcuts-settings.jsx
Normal file
|
@ -0,0 +1,387 @@
|
|||
import './shortcuts-settings.css';
|
||||
|
||||
import { useEffect, useState } from 'preact/hooks';
|
||||
import { useSnapshot } from 'valtio';
|
||||
|
||||
import { api } from '../utils/api';
|
||||
import states from '../utils/states';
|
||||
|
||||
import AsyncText from './AsyncText';
|
||||
import Icon from './icon';
|
||||
|
||||
const SHORTCUTS_LIMIT = 9;
|
||||
|
||||
const TYPES = [
|
||||
'following',
|
||||
'notifications',
|
||||
'list',
|
||||
'public',
|
||||
// NOTE: Hide for now
|
||||
// 'search', // Search on Mastodon ain't great
|
||||
// 'account-statuses', // Need @acct search first
|
||||
'bookmarks',
|
||||
'favourites',
|
||||
'hashtag',
|
||||
];
|
||||
const TYPE_TEXT = {
|
||||
following: 'Home / Following',
|
||||
notifications: 'Notifications',
|
||||
list: 'List',
|
||||
public: 'Public',
|
||||
search: 'Search',
|
||||
'account-statuses': 'Account',
|
||||
bookmarks: 'Bookmarks',
|
||||
favourites: 'Favourites',
|
||||
hashtag: 'Hashtag',
|
||||
};
|
||||
const TYPE_PARAMS = {
|
||||
list: [
|
||||
{
|
||||
text: 'List ID',
|
||||
name: 'id',
|
||||
},
|
||||
],
|
||||
public: [
|
||||
{
|
||||
text: 'Local only',
|
||||
name: 'local',
|
||||
type: 'checkbox',
|
||||
},
|
||||
{
|
||||
text: 'Instance',
|
||||
name: 'instance',
|
||||
type: 'text',
|
||||
placeholder: 'e.g. mastodon.social',
|
||||
},
|
||||
],
|
||||
search: [
|
||||
{
|
||||
text: 'Search term',
|
||||
name: 'query',
|
||||
type: 'text',
|
||||
},
|
||||
],
|
||||
'account-statuses': [
|
||||
{
|
||||
text: '@',
|
||||
name: 'id',
|
||||
type: 'text',
|
||||
placeholder: 'cheeaun@mastodon.social',
|
||||
},
|
||||
],
|
||||
hashtag: [
|
||||
{
|
||||
text: '#',
|
||||
name: 'hashtag',
|
||||
type: 'text',
|
||||
placeholder: 'e.g PixelArt',
|
||||
},
|
||||
],
|
||||
};
|
||||
export const SHORTCUTS_META = {
|
||||
following: {
|
||||
title: 'Home / Following',
|
||||
path: (_, index) => (index === 0 ? '/' : '/following'),
|
||||
icon: 'home',
|
||||
},
|
||||
notifications: {
|
||||
title: 'Notifications',
|
||||
path: '/notifications',
|
||||
icon: 'notification',
|
||||
},
|
||||
list: {
|
||||
title: async ({ id }) => {
|
||||
const list = await api().masto.v1.lists.fetch(id);
|
||||
return list.title;
|
||||
},
|
||||
path: ({ id }) => `/l/${id}`,
|
||||
icon: 'list',
|
||||
},
|
||||
public: {
|
||||
title: ({ local, instance }) =>
|
||||
`${local ? 'Local' : 'Federated'} (${instance})`,
|
||||
path: ({ local, instance }) => `/${instance}/p${local ? '/l' : ''}`,
|
||||
icon: ({ local }) => (local ? 'group' : 'earth'),
|
||||
},
|
||||
search: {
|
||||
title: ({ query }) => query,
|
||||
path: ({ query }) => `/search?q=${query}`,
|
||||
icon: 'search',
|
||||
},
|
||||
'account-statuses': {
|
||||
title: async ({ id }) => {
|
||||
const account = await api().masto.v1.accounts.fetch(id);
|
||||
return account.username || account.acct || account.displayName;
|
||||
},
|
||||
path: ({ id }) => `/a/${id}`,
|
||||
icon: 'user',
|
||||
},
|
||||
bookmarks: {
|
||||
title: 'Bookmarks',
|
||||
path: '/b',
|
||||
icon: 'bookmark',
|
||||
},
|
||||
favourites: {
|
||||
title: 'Favourites',
|
||||
path: '/f',
|
||||
icon: 'heart',
|
||||
},
|
||||
hashtag: {
|
||||
title: ({ hashtag }) => hashtag,
|
||||
path: ({ hashtag }) => `/t/${hashtag}`,
|
||||
icon: 'hashtag',
|
||||
},
|
||||
};
|
||||
|
||||
function ShortcutsSettings() {
|
||||
const snapStates = useSnapshot(states);
|
||||
const { masto } = api();
|
||||
const { shortcuts } = snapStates;
|
||||
|
||||
const [lists, setLists] = useState([]);
|
||||
const [followedHashtags, setFollowedHashtags] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const lists = await masto.v1.lists.list();
|
||||
setLists(lists);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
})();
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const iterator = masto.v1.followedTags.list();
|
||||
const tags = [];
|
||||
do {
|
||||
const { value, done } = await iterator.next();
|
||||
if (done || value?.length === 0) break;
|
||||
tags.push(...value);
|
||||
} while (true);
|
||||
setFollowedHashtags(tags);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div id="shortcuts-settings-container" class="sheet" tabindex="-1">
|
||||
<header>
|
||||
<h2>
|
||||
<Icon icon="shortcut" /> Shortcuts{' '}
|
||||
<sup
|
||||
style={{
|
||||
fontSize: 12,
|
||||
opacity: 0.5,
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
beta
|
||||
</sup>
|
||||
</h2>
|
||||
</header>
|
||||
<main>
|
||||
<p>
|
||||
Specify a list of shortcuts that'll appear in the floating Shortcuts
|
||||
button.
|
||||
</p>
|
||||
<p>
|
||||
<details>
|
||||
<summary class="insignificant">
|
||||
Experimental Multi-column mode
|
||||
</summary>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={snapStates.settings.shortcutsColumnsMode}
|
||||
onChange={(e) => {
|
||||
states.settings.shortcutsColumnsMode = e.target.checked;
|
||||
}}
|
||||
/>{' '}
|
||||
Show shortcuts in multiple columns instead of the floating button.
|
||||
</label>
|
||||
</details>
|
||||
</p>
|
||||
{shortcuts.length > 0 ? (
|
||||
<ol class="shortcuts-list">
|
||||
{shortcuts.map((shortcut, i) => {
|
||||
const key = i + Object.values(shortcut);
|
||||
const { type } = shortcut;
|
||||
if (!SHORTCUTS_META[type]) return null;
|
||||
let { icon, title } = SHORTCUTS_META[type];
|
||||
if (typeof title === 'function') {
|
||||
title = title(shortcut);
|
||||
}
|
||||
if (typeof icon === 'function') {
|
||||
icon = icon(shortcut);
|
||||
}
|
||||
return (
|
||||
<li key={key}>
|
||||
<Icon icon={icon} />
|
||||
<span class="shortcut-text">
|
||||
<AsyncText>{title}</AsyncText>
|
||||
</span>
|
||||
<span>
|
||||
<button
|
||||
type="button"
|
||||
class="plain small"
|
||||
disabled={i === 0}
|
||||
onClick={() => {
|
||||
const shortcutsArr = Array.from(states.shortcuts);
|
||||
if (i > 0) {
|
||||
const temp = states.shortcuts[i - 1];
|
||||
shortcutsArr[i - 1] = shortcut;
|
||||
shortcutsArr[i] = temp;
|
||||
states.shortcuts = shortcutsArr;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon icon="arrow-up" alt="Move up" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="plain small"
|
||||
disabled={i === shortcuts.length - 1}
|
||||
onClick={() => {
|
||||
const shortcutsArr = Array.from(states.shortcuts);
|
||||
if (i < states.shortcuts.length - 1) {
|
||||
const temp = states.shortcuts[i + 1];
|
||||
shortcutsArr[i + 1] = shortcut;
|
||||
shortcutsArr[i] = temp;
|
||||
states.shortcuts = shortcutsArr;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon icon="arrow-down" alt="Move down" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="plain small"
|
||||
onClick={() => {
|
||||
states.shortcuts.splice(i, 1);
|
||||
}}
|
||||
>
|
||||
<Icon icon="x" alt="Remove" />
|
||||
</button>
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
) : (
|
||||
<p class="ui-state insignificant">
|
||||
No shortcuts yet. Add one from the form below.
|
||||
</p>
|
||||
)}
|
||||
<hr />
|
||||
<ShortcutForm
|
||||
disabled={shortcuts.length >= SHORTCUTS_LIMIT}
|
||||
lists={lists}
|
||||
followedHashtags={followedHashtags}
|
||||
onSubmit={(data) => {
|
||||
console.log('onSubmit', data);
|
||||
states.shortcuts.push(data);
|
||||
}}
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ShortcutsSettings;
|
||||
function ShortcutForm({ type, lists, followedHashtags, onSubmit, disabled }) {
|
||||
const [currentType, setCurrentType] = useState(type);
|
||||
return (
|
||||
<>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
// Construct a nice object from form
|
||||
e.preventDefault();
|
||||
const data = new FormData(e.target);
|
||||
const result = {};
|
||||
data.forEach((value, key) => {
|
||||
result[key] = value;
|
||||
});
|
||||
if (!result.type) return;
|
||||
onSubmit(result);
|
||||
// Reset
|
||||
e.target.reset();
|
||||
setCurrentType(null);
|
||||
}}
|
||||
>
|
||||
<header>
|
||||
<h3>Add a shortcut</h3>
|
||||
<button type="submit" disabled={disabled}>
|
||||
Add
|
||||
</button>
|
||||
</header>
|
||||
<p>
|
||||
<label>
|
||||
<span>Timeline</span>
|
||||
<select
|
||||
required
|
||||
disabled={disabled}
|
||||
onChange={(e) => {
|
||||
setCurrentType(e.target.value);
|
||||
}}
|
||||
name="type"
|
||||
>
|
||||
<option></option>
|
||||
{TYPES.map((type) => (
|
||||
<option value={type}>{TYPE_TEXT[type]}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</p>
|
||||
{TYPE_PARAMS[currentType]?.map?.(
|
||||
({ text, name, type, placeholder }) => {
|
||||
if (currentType === 'list') {
|
||||
return (
|
||||
<p>
|
||||
<label>
|
||||
<span>List</span>
|
||||
<select name="id" required disabled={disabled}>
|
||||
{lists.map((list) => (
|
||||
<option value={list.id}>{list.title}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<p>
|
||||
<label>
|
||||
<span>{text}</span>{' '}
|
||||
<input
|
||||
type={type}
|
||||
name={name}
|
||||
placeholder={placeholder}
|
||||
required={type === 'text'}
|
||||
disabled={disabled}
|
||||
list={
|
||||
currentType === 'hashtag'
|
||||
? 'followed-hashtags-datalist'
|
||||
: null
|
||||
}
|
||||
/>
|
||||
{currentType === 'hashtag' && followedHashtags.length > 0 && (
|
||||
<datalist id="followed-hashtags-datalist">
|
||||
{followedHashtags.map((tag) => (
|
||||
<option value={tag.name} />
|
||||
))}
|
||||
</datalist>
|
||||
)}
|
||||
</label>
|
||||
</p>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
46
src/components/shortcuts.css
Normal file
46
src/components/shortcuts.css
Normal file
|
@ -0,0 +1,46 @@
|
|||
#shortcuts-button {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
bottom: max(16px, env(safe-area-inset-bottom));
|
||||
left: 16px;
|
||||
left: max(16px, env(safe-area-inset-left));
|
||||
padding: 16px;
|
||||
background-color: var(--bg-faded-blur-color);
|
||||
z-index: 101;
|
||||
transition: all 0.3s ease-in-out;
|
||||
border: var(--hairline-width) solid var(--bg-color);
|
||||
box-shadow: inset 0 -4px 16px -8px var(--button-bg-blur-color),
|
||||
0 3px 8px -1px var(--drop-shadow-color);
|
||||
}
|
||||
#shortcuts-button .icon {
|
||||
transform: translateY(2px); /* Balance the icon's vertical alignment */
|
||||
}
|
||||
#app:has(header[hidden]) #shortcuts-button,
|
||||
#shortcuts-button[hidden] {
|
||||
transform: translateY(200%);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
#shortcuts-button:is(:hover, :focus) {
|
||||
background-color: var(--bg-color);
|
||||
filter: none;
|
||||
}
|
||||
#shortcuts-button:active {
|
||||
transform: scale(0.95);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
@media (min-width: calc(40em + 56px + 8px)) {
|
||||
#shortcuts-button {
|
||||
right: 16px;
|
||||
right: max(16px, env(safe-area-inset-right));
|
||||
left: auto;
|
||||
top: 16px;
|
||||
top: max(16px, env(safe-area-inset-top));
|
||||
bottom: auto;
|
||||
}
|
||||
#app:has(header[hidden]) #shortcuts-button,
|
||||
#shortcuts-button[hidden] {
|
||||
transform: translateY(-200%);
|
||||
}
|
||||
}
|
109
src/components/shortcuts.jsx
Normal file
109
src/components/shortcuts.jsx
Normal file
|
@ -0,0 +1,109 @@
|
|||
import './shortcuts.css';
|
||||
|
||||
import { Menu, MenuItem } from '@szhsin/react-menu';
|
||||
import { useRef } from 'preact/hooks';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useSnapshot } from 'valtio';
|
||||
|
||||
import { SHORTCUTS_META } from '../components/shortcuts-settings';
|
||||
import states from '../utils/states';
|
||||
|
||||
import AsyncText from './AsyncText';
|
||||
import Icon from './icon';
|
||||
import MenuLink from './MenuLink';
|
||||
|
||||
function Shortcuts() {
|
||||
const snapStates = useSnapshot(states);
|
||||
const { shortcuts } = snapStates;
|
||||
|
||||
if (!shortcuts.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const menuRef = useRef();
|
||||
|
||||
const formattedShortcuts = shortcuts
|
||||
.map((pin, i) => {
|
||||
const { type, ...data } = pin;
|
||||
if (!SHORTCUTS_META[type]) return null;
|
||||
let { path, title, icon } = SHORTCUTS_META[type];
|
||||
|
||||
if (typeof path === 'function') {
|
||||
path = path(data, i);
|
||||
}
|
||||
if (typeof title === 'function') {
|
||||
title = title(data);
|
||||
}
|
||||
if (typeof icon === 'function') {
|
||||
icon = icon(data);
|
||||
}
|
||||
|
||||
return {
|
||||
path,
|
||||
title,
|
||||
icon,
|
||||
};
|
||||
})
|
||||
.filter(Boolean);
|
||||
|
||||
const navigate = useNavigate();
|
||||
useHotkeys(['1', '2', '3', '4', '5', '6', '7', '8', '9'], (e, handler) => {
|
||||
const index = parseInt(handler.keys[0], 10) - 1;
|
||||
if (index < formattedShortcuts.length) {
|
||||
const { path } = formattedShortcuts[index];
|
||||
if (path) {
|
||||
navigate(path);
|
||||
menuRef.current?.closeMenu?.();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div id="shortcuts">
|
||||
<Menu
|
||||
instanceRef={menuRef}
|
||||
overflow="auto"
|
||||
viewScroll="close"
|
||||
boundingBoxPadding="8 8 8 8"
|
||||
menuClassName="glass-menu shortcuts-menu"
|
||||
offsetY={8}
|
||||
position="anchor"
|
||||
menuButton={
|
||||
<button
|
||||
type="button"
|
||||
id="shortcuts-button"
|
||||
class="plain"
|
||||
onTransitionStart={(e) => {
|
||||
// Close menu if the button disappears
|
||||
try {
|
||||
const { target } = e;
|
||||
if (getComputedStyle(target).pointerEvents === 'none') {
|
||||
menuRef.current?.closeMenu?.();
|
||||
}
|
||||
} catch (e) {}
|
||||
}}
|
||||
>
|
||||
<Icon icon="shortcut" size="xl" alt="Shortcuts" />
|
||||
</button>
|
||||
}
|
||||
>
|
||||
{formattedShortcuts.map(({ path, title, icon }, i) => {
|
||||
return (
|
||||
<MenuLink to={path} key={i + title} class="glass-menu-item">
|
||||
<Icon icon={icon} size="l" />{' '}
|
||||
<span class="menu-grow">
|
||||
<AsyncText>{title}</AsyncText>
|
||||
</span>
|
||||
<span class="menu-shortcut hide-until-focus-visible">
|
||||
{i + 1}
|
||||
</span>
|
||||
</MenuLink>
|
||||
);
|
||||
})}
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Shortcuts;
|
|
@ -286,6 +286,8 @@
|
|||
.status .content p {
|
||||
/* 12px = 75% of 16px */
|
||||
margin-block: min(0.75em, 12px);
|
||||
white-space: pre-wrap;
|
||||
tab-size: 2;
|
||||
}
|
||||
.status .content p:first-child {
|
||||
margin-block-start: 0;
|
||||
|
@ -422,6 +424,9 @@
|
|||
.status .media img:hover {
|
||||
animation: position-object 5s ease-in-out 1s 5;
|
||||
}
|
||||
body:has(#modal-container .carousel) .status .media img:hover {
|
||||
animation: none;
|
||||
}
|
||||
.status .media video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
@ -443,7 +448,7 @@
|
|||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: var(--text-insignificant-color);
|
||||
background-color: var(--backdrop-color);
|
||||
background-color: var(--bg-faded-blur-color);
|
||||
backdrop-filter: blur(6px) saturate(3) invert(0.2);
|
||||
display: flex;
|
||||
place-content: center;
|
||||
|
@ -532,23 +537,17 @@
|
|||
text-align: left;
|
||||
border-radius: 8px;
|
||||
color: var(--text-color);
|
||||
padding: 4px 8px 4px 4px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--outline-color);
|
||||
box-shadow: 0 4px 16px var(--outline-color);
|
||||
max-width: min(40em, calc(100% - 32px));
|
||||
max-width: min(var(--main-width), calc(100% - 32px));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: 8px;
|
||||
font-size: 90%;
|
||||
}
|
||||
.carousel-item button.media-alt .media-alt-desc {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@media (min-width: 40em) {
|
||||
.carousel-item button.media-alt .media-alt-desc {
|
||||
white-space: normal;
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
|
@ -556,7 +555,7 @@
|
|||
box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
}
|
||||
line-height: 1.4;
|
||||
}
|
||||
.carousel-item button.media-alt[hidden] {
|
||||
opacity: 0;
|
||||
|
@ -897,6 +896,7 @@ a.card:is(:hover, :focus) {
|
|||
transparent 160px
|
||||
);
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.status .content p code {
|
||||
|
@ -922,6 +922,9 @@ a.card:is(:hover, :focus) {
|
|||
.status-badge .bookmark {
|
||||
color: var(--link-color);
|
||||
}
|
||||
.status-badge .pin {
|
||||
color: var(--red-color);
|
||||
}
|
||||
|
||||
/* MISC */
|
||||
|
||||
|
@ -949,7 +952,8 @@ a.card:is(:hover, :focus) {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
#edit-history :is(ol, ol li) {
|
||||
#edit-history ol,
|
||||
#edit-history ol li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
|
@ -1,17 +1,9 @@
|
|||
import './status.css';
|
||||
|
||||
import { Menu, MenuItem } from '@szhsin/react-menu';
|
||||
import { getBlurHashAverageColor } from 'fast-blurhash';
|
||||
import mem from 'mem';
|
||||
import { memo } from 'preact/compat';
|
||||
import {
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'preact/hooks';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
|
||||
import 'swiped-events';
|
||||
import useResizeObserver from 'use-resize-observer';
|
||||
import { useSnapshot } from 'valtio';
|
||||
|
@ -19,11 +11,12 @@ import { useSnapshot } from 'valtio';
|
|||
import Loader from '../components/loader';
|
||||
import Modal from '../components/modal';
|
||||
import NameText from '../components/name-text';
|
||||
import { api } from '../utils/api';
|
||||
import enhanceContent from '../utils/enhance-content';
|
||||
import handleContentLinks from '../utils/handle-content-links';
|
||||
import htmlContentLength from '../utils/html-content-length';
|
||||
import shortenNumber from '../utils/shorten-number';
|
||||
import states, { saveStatus } from '../utils/states';
|
||||
import states, { saveStatus, statusKey } from '../utils/states';
|
||||
import store from '../utils/store';
|
||||
import visibilityIconsMap from '../utils/visibility-icons-map';
|
||||
|
||||
|
@ -33,7 +26,7 @@ import Link from './link';
|
|||
import Media from './media';
|
||||
import RelativeTime from './relative-time';
|
||||
|
||||
function fetchAccount(id) {
|
||||
function fetchAccount(id, masto) {
|
||||
try {
|
||||
return masto.v1.accounts.fetch(id);
|
||||
} catch (e) {
|
||||
|
@ -45,30 +38,36 @@ const memFetchAccount = mem(fetchAccount);
|
|||
function Status({
|
||||
statusID,
|
||||
status,
|
||||
instance: propInstance,
|
||||
withinContext,
|
||||
size = 'm',
|
||||
skeleton,
|
||||
readOnly,
|
||||
contentTextWeight,
|
||||
}) {
|
||||
if (skeleton) {
|
||||
return (
|
||||
<div class="status skeleton">
|
||||
<Avatar size="xxl" />
|
||||
<div class="container">
|
||||
<div class="meta">███ ████████████</div>
|
||||
<div class="meta">███ ████████</div>
|
||||
<div class="content-container">
|
||||
<div class="content">
|
||||
<p>████ ████████████</p>
|
||||
<p>████ ████████</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const { masto, instance, authenticated } = api({ instance: propInstance });
|
||||
const { instance: currentInstance } = api();
|
||||
const sameInstance = instance === currentInstance;
|
||||
|
||||
const sKey = statusKey(statusID, instance);
|
||||
const snapStates = useSnapshot(states);
|
||||
if (!status) {
|
||||
status = snapStates.statuses[statusID];
|
||||
status = snapStates.statuses[sKey] || snapStates.statuses[statusID];
|
||||
}
|
||||
if (!status) {
|
||||
return null;
|
||||
|
@ -110,7 +109,9 @@ function Status({
|
|||
reblog,
|
||||
uri,
|
||||
emojis,
|
||||
// Non-API props
|
||||
_deleted,
|
||||
_pinned,
|
||||
} = status;
|
||||
|
||||
console.debug('RENDER Status', id, status?.account.displayName);
|
||||
|
@ -135,7 +136,7 @@ function Status({
|
|||
if (account) {
|
||||
setInReplyToAccount(account);
|
||||
} else {
|
||||
memFetchAccount(inReplyToAccountId)
|
||||
memFetchAccount(inReplyToAccountId, masto)
|
||||
.then((account) => {
|
||||
setInReplyToAccount(account);
|
||||
states.accounts[account.id] = account;
|
||||
|
@ -157,9 +158,15 @@ function Status({
|
|||
<div class="status-reblog" onMouseEnter={debugHover}>
|
||||
<div class="status-pre-meta">
|
||||
<Icon icon="rocket" size="l" />{' '}
|
||||
<NameText account={status.account} showAvatar /> boosted
|
||||
<NameText account={status.account} instance={instance} showAvatar />{' '}
|
||||
boosted
|
||||
</div>
|
||||
<Status status={reblog} size={size} />
|
||||
<Status
|
||||
status={reblog}
|
||||
instance={instance}
|
||||
size={size}
|
||||
contentTextWeight={contentTextWeight}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -198,13 +205,15 @@ function Status({
|
|||
|
||||
const statusRef = useRef(null);
|
||||
|
||||
const unauthInteractionErrorMessage = `Sorry, your current logged-in instance can't interact with this status from another instance.`;
|
||||
|
||||
return (
|
||||
<article
|
||||
ref={statusRef}
|
||||
tabindex="-1"
|
||||
class={`status ${
|
||||
!withinContext && inReplyToAccount ? 'status-reply-to' : ''
|
||||
} visibility-${visibility} ${
|
||||
} visibility-${visibility} ${_pinned ? 'status-pinned' : ''} ${
|
||||
{
|
||||
s: 'small',
|
||||
m: 'medium',
|
||||
|
@ -218,6 +227,7 @@ function Status({
|
|||
{reblogged && <Icon class="reblog" icon="rocket" size="s" />}
|
||||
{favourited && <Icon class="favourite" icon="heart" size="s" />}
|
||||
{bookmarked && <Icon class="bookmark" icon="bookmark" size="s" />}
|
||||
{_pinned && <Icon class="pin" icon="pin" size="s" />}
|
||||
</div>
|
||||
)}
|
||||
{size !== 's' && (
|
||||
|
@ -229,7 +239,10 @@ function Status({
|
|||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
states.showAccount = status.account;
|
||||
states.showAccount = {
|
||||
account: status.account,
|
||||
instance,
|
||||
};
|
||||
}}
|
||||
>
|
||||
<Avatar url={avatarStatic} size="xxl" />
|
||||
|
@ -240,6 +253,7 @@ function Status({
|
|||
{/* <span> */}
|
||||
<NameText
|
||||
account={status.account}
|
||||
instance={instance}
|
||||
showAvatar={size === 's'}
|
||||
showAcct={size === 'l'}
|
||||
/>
|
||||
|
@ -248,14 +262,17 @@ function Status({
|
|||
{' '}
|
||||
<span class="ib">
|
||||
<Icon icon="arrow-right" class="arrow" />{' '}
|
||||
<NameText account={inReplyToAccount} short />
|
||||
<NameText account={inReplyToAccount} instance={instance} short />
|
||||
</span>
|
||||
</>
|
||||
)} */}
|
||||
{/* </span> */}{' '}
|
||||
{size !== 'l' &&
|
||||
(uri ? (
|
||||
<Link to={`/s/${id}`} class="time">
|
||||
<Link
|
||||
to={instance ? `/${instance}/s/${id}` : `/s/${id}`}
|
||||
class="time"
|
||||
>
|
||||
<Icon
|
||||
icon={visibilityIconsMap[visibility]}
|
||||
alt={visibility}
|
||||
|
@ -277,12 +294,12 @@ function Status({
|
|||
{!withinContext && (
|
||||
<>
|
||||
{inReplyToAccountId === status.account?.id ||
|
||||
!!snapStates.statusThreadNumber[id] ? (
|
||||
!!snapStates.statusThreadNumber[sKey] ? (
|
||||
<div class="status-thread-badge">
|
||||
<Icon icon="thread" size="s" />
|
||||
Thread
|
||||
{snapStates.statusThreadNumber[id]
|
||||
? ` ${snapStates.statusThreadNumber[id]}/X`
|
||||
{snapStates.statusThreadNumber[sKey]
|
||||
? ` ${snapStates.statusThreadNumber[sKey]}/X`
|
||||
: ''}
|
||||
</div>
|
||||
) : (
|
||||
|
@ -294,7 +311,11 @@ function Status({
|
|||
})) && (
|
||||
<div class="status-reply-badge">
|
||||
<Icon icon="reply" />{' '}
|
||||
<NameText account={inReplyToAccount} short />
|
||||
<NameText
|
||||
account={inReplyToAccount}
|
||||
instance={instance}
|
||||
short
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
@ -302,10 +323,10 @@ function Status({
|
|||
)}
|
||||
<div
|
||||
class={`content-container ${
|
||||
sensitive || spoilerText ? 'has-spoiler' : ''
|
||||
spoilerText || sensitive ? 'has-spoiler' : ''
|
||||
} ${showSpoiler ? 'show-spoiler' : ''}`}
|
||||
style={
|
||||
size === 'l' && {
|
||||
(size === 'l' || contentTextWeight) && {
|
||||
'--content-text-weight':
|
||||
Math.round(
|
||||
(spoilerText.length + htmlContentLength(content)) / 140,
|
||||
|
@ -313,7 +334,7 @@ function Status({
|
|||
}
|
||||
}
|
||||
>
|
||||
{!!spoilerText && sensitive && (
|
||||
{!!spoilerText && (
|
||||
<>
|
||||
<div
|
||||
class="content"
|
||||
|
@ -346,7 +367,7 @@ function Status({
|
|||
lang={language}
|
||||
ref={contentRef}
|
||||
data-read-more={readMoreText}
|
||||
onClick={handleContentLinks({ mentions })}
|
||||
onClick={handleContentLinks({ mentions, instance })}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: enhanceContent(content, {
|
||||
emojis,
|
||||
|
@ -367,9 +388,27 @@ function Status({
|
|||
<Poll
|
||||
lang={language}
|
||||
poll={poll}
|
||||
readOnly={readOnly}
|
||||
readOnly={readOnly || !sameInstance || !authenticated}
|
||||
onUpdate={(newPoll) => {
|
||||
states.statuses[id].poll = newPoll;
|
||||
states.statuses[sKey].poll = newPoll;
|
||||
}}
|
||||
refresh={() => {
|
||||
return masto.v1.polls
|
||||
.fetch(poll.id)
|
||||
.then((pollResponse) => {
|
||||
states.statuses[sKey].poll = pollResponse;
|
||||
})
|
||||
.catch((e) => {}); // Silently fail
|
||||
}}
|
||||
votePoll={(choices) => {
|
||||
return masto.v1.polls
|
||||
.vote(poll.id, {
|
||||
choices,
|
||||
})
|
||||
.then((pollResponse) => {
|
||||
states.statuses[sKey].poll = pollResponse;
|
||||
})
|
||||
.catch((e) => {}); // Silently fail
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
@ -410,6 +449,7 @@ function Status({
|
|||
states.showMediaModal = {
|
||||
mediaAttachments,
|
||||
index: i,
|
||||
instance,
|
||||
statusID: readOnly ? null : id,
|
||||
};
|
||||
}}
|
||||
|
@ -477,6 +517,9 @@ function Status({
|
|||
icon="comment"
|
||||
count={repliesCount}
|
||||
onClick={() => {
|
||||
if (!sameInstance || !authenticated) {
|
||||
return alert(unauthInteractionErrorMessage);
|
||||
}
|
||||
states.showCompose = {
|
||||
replyToStatus: status,
|
||||
};
|
||||
|
@ -494,17 +537,18 @@ function Status({
|
|||
icon="rocket"
|
||||
count={reblogsCount}
|
||||
onClick={async () => {
|
||||
if (!sameInstance || !authenticated) {
|
||||
return alert(unauthInteractionErrorMessage);
|
||||
}
|
||||
try {
|
||||
if (!reblogged) {
|
||||
const yes = confirm(
|
||||
'Are you sure that you want to boost this post?',
|
||||
);
|
||||
const yes = confirm('Boost this post?');
|
||||
if (!yes) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
// Optimistic
|
||||
states.statuses[id] = {
|
||||
states.statuses[sKey] = {
|
||||
...status,
|
||||
reblogged: !reblogged,
|
||||
reblogsCount: reblogsCount + (reblogged ? -1 : 1),
|
||||
|
@ -513,15 +557,15 @@ function Status({
|
|||
const newStatus = await masto.v1.statuses.unreblog(
|
||||
id,
|
||||
);
|
||||
saveStatus(newStatus);
|
||||
saveStatus(newStatus, instance);
|
||||
} else {
|
||||
const newStatus = await masto.v1.statuses.reblog(id);
|
||||
saveStatus(newStatus);
|
||||
saveStatus(newStatus, instance);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
// Revert optimistism
|
||||
states.statuses[id] = status;
|
||||
states.statuses[sKey] = status;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
@ -536,9 +580,12 @@ function Status({
|
|||
icon="heart"
|
||||
count={favouritesCount}
|
||||
onClick={async () => {
|
||||
if (!sameInstance || !authenticated) {
|
||||
return alert(unauthInteractionErrorMessage);
|
||||
}
|
||||
try {
|
||||
// Optimistic
|
||||
states.statuses[statusID] = {
|
||||
states.statuses[sKey] = {
|
||||
...status,
|
||||
favourited: !favourited,
|
||||
favouritesCount:
|
||||
|
@ -548,15 +595,15 @@ function Status({
|
|||
const newStatus = await masto.v1.statuses.unfavourite(
|
||||
id,
|
||||
);
|
||||
saveStatus(newStatus);
|
||||
saveStatus(newStatus, instance);
|
||||
} else {
|
||||
const newStatus = await masto.v1.statuses.favourite(id);
|
||||
saveStatus(newStatus);
|
||||
saveStatus(newStatus, instance);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
// Revert optimistism
|
||||
states.statuses[statusID] = status;
|
||||
states.statuses[sKey] = status;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
@ -569,9 +616,12 @@ function Status({
|
|||
class="bookmark-button"
|
||||
icon="bookmark"
|
||||
onClick={async () => {
|
||||
if (!sameInstance || !authenticated) {
|
||||
return alert(unauthInteractionErrorMessage);
|
||||
}
|
||||
try {
|
||||
// Optimistic
|
||||
states.statuses[statusID] = {
|
||||
states.statuses[sKey] = {
|
||||
...status,
|
||||
bookmarked: !bookmarked,
|
||||
};
|
||||
|
@ -579,15 +629,15 @@ function Status({
|
|||
const newStatus = await masto.v1.statuses.unbookmark(
|
||||
id,
|
||||
);
|
||||
saveStatus(newStatus);
|
||||
saveStatus(newStatus, instance);
|
||||
} else {
|
||||
const newStatus = await masto.v1.statuses.bookmark(id);
|
||||
saveStatus(newStatus);
|
||||
saveStatus(newStatus, instance);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
// Revert optimistism
|
||||
states.statuses[statusID] = status;
|
||||
states.statuses[sKey] = status;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
@ -615,7 +665,7 @@ function Status({
|
|||
};
|
||||
}}
|
||||
>
|
||||
Edit…
|
||||
<Icon icon="pencil" /> <span>Edit…</span>
|
||||
</MenuItem>
|
||||
)}
|
||||
</Menu>
|
||||
|
@ -635,6 +685,10 @@ function Status({
|
|||
>
|
||||
<EditedAtModal
|
||||
statusID={showEdited}
|
||||
instance={instance}
|
||||
fetchStatusHistory={() => {
|
||||
return masto.v1.statuses.listHistory(showEdited);
|
||||
}}
|
||||
onClose={() => {
|
||||
setShowEdited(false);
|
||||
statusRef.current?.focus();
|
||||
|
@ -698,12 +752,7 @@ function Card({ card }) {
|
|||
</div>
|
||||
<div class="meta-container">
|
||||
<p class="meta domain">{domain}</p>
|
||||
<p
|
||||
class="title"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: title,
|
||||
}}
|
||||
/>
|
||||
<p class="title">{title}</p>
|
||||
<p class="meta">{description || providerName || authorName}</p>
|
||||
</div>
|
||||
</a>
|
||||
|
@ -742,7 +791,13 @@ function Card({ card }) {
|
|||
}
|
||||
}
|
||||
|
||||
function Poll({ poll, lang, readOnly, onUpdate = () => {} }) {
|
||||
function Poll({
|
||||
poll,
|
||||
lang,
|
||||
readOnly,
|
||||
refresh = () => {},
|
||||
votePoll = () => {},
|
||||
}) {
|
||||
const [uiState, setUIState] = useState('default');
|
||||
|
||||
const {
|
||||
|
@ -768,12 +823,7 @@ function Poll({ poll, lang, readOnly, onUpdate = () => {} }) {
|
|||
timeout = setTimeout(() => {
|
||||
setUIState('loading');
|
||||
(async () => {
|
||||
try {
|
||||
const pollResponse = await masto.v1.polls.fetch(id);
|
||||
onUpdate(pollResponse);
|
||||
} catch (e) {
|
||||
// Silent fail
|
||||
}
|
||||
await refresh();
|
||||
setUIState('default');
|
||||
})();
|
||||
}, ms);
|
||||
|
@ -847,19 +897,14 @@ function Poll({ poll, lang, readOnly, onUpdate = () => {} }) {
|
|||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const formData = new FormData(form);
|
||||
const votes = [];
|
||||
const choices = [];
|
||||
formData.forEach((value, key) => {
|
||||
if (key === 'poll') {
|
||||
votes.push(value);
|
||||
choices.push(value);
|
||||
}
|
||||
});
|
||||
console.log(votes);
|
||||
setUIState('loading');
|
||||
const pollResponse = await masto.v1.polls.vote(id, {
|
||||
choices: votes,
|
||||
});
|
||||
console.log(pollResponse);
|
||||
onUpdate(pollResponse);
|
||||
await votePoll(choices);
|
||||
setUIState('default');
|
||||
}}
|
||||
>
|
||||
|
@ -903,12 +948,7 @@ function Poll({ poll, lang, readOnly, onUpdate = () => {} }) {
|
|||
e.preventDefault();
|
||||
setUIState('loading');
|
||||
(async () => {
|
||||
try {
|
||||
const pollResponse = await masto.v1.polls.fetch(id);
|
||||
onUpdate(pollResponse);
|
||||
} catch (e) {
|
||||
// Silent fail
|
||||
}
|
||||
await refresh();
|
||||
setUIState('default');
|
||||
})();
|
||||
}}
|
||||
|
@ -937,7 +977,12 @@ function Poll({ poll, lang, readOnly, onUpdate = () => {} }) {
|
|||
);
|
||||
}
|
||||
|
||||
function EditedAtModal({ statusID, onClose = () => {} }) {
|
||||
function EditedAtModal({
|
||||
statusID,
|
||||
instance,
|
||||
fetchStatusHistory = () => {},
|
||||
onClose = () => {},
|
||||
}) {
|
||||
const [uiState, setUIState] = useState('default');
|
||||
const [editHistory, setEditHistory] = useState([]);
|
||||
|
||||
|
@ -945,7 +990,7 @@ function EditedAtModal({ statusID, onClose = () => {} }) {
|
|||
setUIState('loading');
|
||||
(async () => {
|
||||
try {
|
||||
const editHistory = await masto.v1.statuses.listHistory(statusID);
|
||||
const editHistory = await fetchStatusHistory();
|
||||
console.log(editHistory);
|
||||
setEditHistory(editHistory);
|
||||
setUIState('default');
|
||||
|
@ -997,7 +1042,13 @@ function EditedAtModal({ statusID, onClose = () => {} }) {
|
|||
}).format(createdAtDate)}
|
||||
</time>
|
||||
</h3>
|
||||
<Status status={status} size="s" withinContext readOnly />
|
||||
<Status
|
||||
status={status}
|
||||
instance={instance}
|
||||
size="s"
|
||||
withinContext
|
||||
readOnly
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
|
|
|
@ -1,39 +1,52 @@
|
|||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { useDebouncedCallback } from 'use-debounce';
|
||||
|
||||
import useInterval from '../utils/useInterval';
|
||||
import usePageVisibility from '../utils/usePageVisibility';
|
||||
import useScroll from '../utils/useScroll';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
||||
import Icon from './icon';
|
||||
import Link from './link';
|
||||
import Loader from './loader';
|
||||
import Menu from './menu';
|
||||
import Status from './status';
|
||||
|
||||
function Timeline({
|
||||
title,
|
||||
titleComponent,
|
||||
path,
|
||||
id,
|
||||
instance,
|
||||
emptyText,
|
||||
errorText,
|
||||
useItemID, // use statusID instead of status object, assuming it's already in states
|
||||
boostsCarousel,
|
||||
fetchItems = () => {},
|
||||
checkForUpdates = () => {},
|
||||
checkForUpdatesInterval = 60_000, // 1 minute
|
||||
headerStart,
|
||||
headerEnd,
|
||||
}) {
|
||||
if (title) {
|
||||
useTitle(title, path);
|
||||
}
|
||||
const [items, setItems] = useState([]);
|
||||
const [uiState, setUIState] = useState('default');
|
||||
const [showMore, setShowMore] = useState(false);
|
||||
const scrollableRef = useRef(null);
|
||||
const { nearReachEnd, reachStart } = useScroll({
|
||||
scrollableElement: scrollableRef.current,
|
||||
});
|
||||
const [showNew, setShowNew] = useState(false);
|
||||
const [visible, setVisible] = useState(true);
|
||||
const scrollableRef = useRef();
|
||||
|
||||
const loadItems = (firstLoad) => {
|
||||
const loadItems = useDebouncedCallback(
|
||||
(firstLoad) => {
|
||||
setShowNew(false);
|
||||
if (uiState === 'loading') return;
|
||||
setUIState('loading');
|
||||
(async () => {
|
||||
try {
|
||||
const { done, value } = await fetchItems(firstLoad);
|
||||
let { done, value } = await fetchItems(firstLoad);
|
||||
if (value?.length) {
|
||||
if (boostsCarousel) {
|
||||
value = groupBoosts(value);
|
||||
}
|
||||
console.log(value);
|
||||
if (firstLoad) {
|
||||
setItems(value);
|
||||
} else {
|
||||
|
@ -49,7 +62,113 @@ function Timeline({
|
|||
setUIState('error');
|
||||
}
|
||||
})();
|
||||
};
|
||||
},
|
||||
1500,
|
||||
{
|
||||
leading: true,
|
||||
trailing: false,
|
||||
},
|
||||
);
|
||||
|
||||
const itemsSelector = '.timeline-item, .timeline-item-alt';
|
||||
|
||||
const jRef = useHotkeys('j, shift+j', (_, handler) => {
|
||||
// focus on next status after active item
|
||||
const activeItem = document.activeElement.closest(itemsSelector);
|
||||
const activeItemRect = activeItem?.getBoundingClientRect();
|
||||
const allItems = Array.from(
|
||||
scrollableRef.current.querySelectorAll(itemsSelector),
|
||||
);
|
||||
if (
|
||||
activeItem &&
|
||||
activeItemRect.top < scrollableRef.current.clientHeight &&
|
||||
activeItemRect.bottom > 0
|
||||
) {
|
||||
const activeItemIndex = allItems.indexOf(activeItem);
|
||||
let nextItem = allItems[activeItemIndex + 1];
|
||||
if (handler.shift) {
|
||||
// get next status that's not .timeline-item-alt
|
||||
nextItem = allItems.find(
|
||||
(item, index) =>
|
||||
index > activeItemIndex &&
|
||||
!item.classList.contains('timeline-item-alt'),
|
||||
);
|
||||
}
|
||||
if (nextItem) {
|
||||
nextItem.focus();
|
||||
nextItem.scrollIntoViewIfNeeded?.();
|
||||
}
|
||||
} else {
|
||||
// If active status is not in viewport, get the topmost status-link in viewport
|
||||
const topmostItem = allItems.find((item) => {
|
||||
const itemRect = item.getBoundingClientRect();
|
||||
return itemRect.top >= 44 && itemRect.left >= 0; // 44 is the magic number for header height, not real
|
||||
});
|
||||
if (topmostItem) {
|
||||
topmostItem.focus();
|
||||
topmostItem.scrollIntoViewIfNeeded?.();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const kRef = useHotkeys('k, shift+k', (_, handler) => {
|
||||
// focus on previous status after active item
|
||||
const activeItem = document.activeElement.closest(itemsSelector);
|
||||
const activeItemRect = activeItem?.getBoundingClientRect();
|
||||
const allItems = Array.from(
|
||||
scrollableRef.current.querySelectorAll(itemsSelector),
|
||||
);
|
||||
if (
|
||||
activeItem &&
|
||||
activeItemRect.top < scrollableRef.current.clientHeight &&
|
||||
activeItemRect.bottom > 0
|
||||
) {
|
||||
const activeItemIndex = allItems.indexOf(activeItem);
|
||||
let prevItem = allItems[activeItemIndex - 1];
|
||||
if (handler.shift) {
|
||||
// get prev status that's not .timeline-item-alt
|
||||
prevItem = allItems.findLast(
|
||||
(item, index) =>
|
||||
index < activeItemIndex &&
|
||||
!item.classList.contains('timeline-item-alt'),
|
||||
);
|
||||
}
|
||||
if (prevItem) {
|
||||
prevItem.focus();
|
||||
prevItem.scrollIntoViewIfNeeded?.();
|
||||
}
|
||||
} else {
|
||||
// If active status is not in viewport, get the topmost status-link in viewport
|
||||
const topmostItem = allItems.find((item) => {
|
||||
const itemRect = item.getBoundingClientRect();
|
||||
return itemRect.top >= 44 && itemRect.left >= 0; // 44 is the magic number for header height, not real
|
||||
});
|
||||
if (topmostItem) {
|
||||
topmostItem.focus();
|
||||
topmostItem.scrollIntoViewIfNeeded?.();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const oRef = useHotkeys(['enter', 'o'], () => {
|
||||
// open active status
|
||||
const activeItem = document.activeElement.closest(itemsSelector);
|
||||
if (activeItem) {
|
||||
activeItem.click();
|
||||
}
|
||||
});
|
||||
|
||||
const {
|
||||
scrollDirection,
|
||||
nearReachStart,
|
||||
nearReachEnd,
|
||||
reachStart,
|
||||
reachEnd,
|
||||
} = useScroll({
|
||||
scrollableElement: scrollableRef.current,
|
||||
distanceFromEnd: 2,
|
||||
scrollThresholdStart: 44,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
scrollableRef.current?.scrollTo({ top: 0 });
|
||||
|
@ -63,69 +182,211 @@ function Timeline({
|
|||
}, [reachStart]);
|
||||
|
||||
useEffect(() => {
|
||||
if (nearReachEnd && showMore) {
|
||||
if (nearReachEnd || (reachEnd && showMore)) {
|
||||
loadItems();
|
||||
}
|
||||
}, [nearReachEnd, showMore]);
|
||||
|
||||
const lastHiddenTime = useRef();
|
||||
usePageVisibility((visible) => {
|
||||
if (visible) {
|
||||
const timeDiff = Date.now() - lastHiddenTime.current;
|
||||
if (!lastHiddenTime.current || timeDiff > 1000 * 60) {
|
||||
(async () => {
|
||||
console.log('✨ Check updates');
|
||||
const hasUpdate = await checkForUpdates();
|
||||
if (hasUpdate) {
|
||||
console.log('✨ Has new updates');
|
||||
setShowNew(true);
|
||||
}
|
||||
})();
|
||||
}
|
||||
} else {
|
||||
lastHiddenTime.current = Date.now();
|
||||
}
|
||||
setVisible(visible);
|
||||
}, []);
|
||||
|
||||
// checkForUpdates interval
|
||||
useInterval(
|
||||
() => {
|
||||
(async () => {
|
||||
console.log('✨ Check updates');
|
||||
const hasUpdate = await checkForUpdates();
|
||||
if (hasUpdate) {
|
||||
console.log('✨ Has new updates');
|
||||
setShowNew(true);
|
||||
}
|
||||
})();
|
||||
},
|
||||
visible && !showNew ? checkForUpdatesInterval : null,
|
||||
);
|
||||
|
||||
const hiddenUI = scrollDirection === 'end' && !nearReachStart;
|
||||
|
||||
return (
|
||||
<div
|
||||
id={`${id}-page`}
|
||||
class="deck-container"
|
||||
ref={scrollableRef}
|
||||
ref={(node) => {
|
||||
scrollableRef.current = node;
|
||||
jRef.current = node;
|
||||
kRef.current = node;
|
||||
oRef.current = node;
|
||||
}}
|
||||
tabIndex="-1"
|
||||
>
|
||||
<div class="timeline-deck deck">
|
||||
<header
|
||||
hidden={hiddenUI}
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
if (!e.target.closest('a, button')) {
|
||||
scrollableRef.current?.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
}}
|
||||
onDblClick={(e) => {
|
||||
if (!e.target.closest('a, button')) {
|
||||
loadItems(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="header-grid">
|
||||
<div class="header-side">
|
||||
<Menu />
|
||||
{headerStart !== null && headerStart !== undefined ? (
|
||||
headerStart
|
||||
) : (
|
||||
<Link to="/" class="button plain">
|
||||
<Icon icon="home" size="l" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
{title && (titleComponent ? titleComponent : <h1>{title}</h1>)}
|
||||
<div class="header-side">
|
||||
<Loader hidden={uiState !== 'loading'} />
|
||||
{!!headerEnd && headerEnd}
|
||||
</div>
|
||||
</div>
|
||||
{items.length > 0 &&
|
||||
uiState !== 'loading' &&
|
||||
!hiddenUI &&
|
||||
showNew && (
|
||||
<button
|
||||
class="updates-button"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
loadItems(true);
|
||||
scrollableRef.current?.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Icon icon="arrow-up" /> New posts
|
||||
</button>
|
||||
)}
|
||||
</header>
|
||||
{!!items.length ? (
|
||||
<>
|
||||
<ul class="timeline">
|
||||
{items.map((status) => {
|
||||
const { id: statusID, reblog } = status;
|
||||
const { id: statusID, reblog, items, type } = status;
|
||||
const actualStatusID = reblog?.id || statusID;
|
||||
const url = instance
|
||||
? `/${instance}/s/${actualStatusID}`
|
||||
: `/s/${actualStatusID}`;
|
||||
let title = '';
|
||||
if (type === 'boosts') {
|
||||
title = `${items.length} Boosts`;
|
||||
} else if (type === 'pinned') {
|
||||
title = 'Pinned posts';
|
||||
}
|
||||
if (items) {
|
||||
return (
|
||||
<li key={`timeline-${statusID}`}>
|
||||
<Link class="status-link" to={`/s/${actualStatusID}`}>
|
||||
<Status status={status} />
|
||||
<StatusCarousel title={title} class={`${type}-carousel`}>
|
||||
{items.map((item) => {
|
||||
const { id: statusID, reblog } = item;
|
||||
const actualStatusID = reblog?.id || statusID;
|
||||
const url = instance
|
||||
? `/${instance}/s/${actualStatusID}`
|
||||
: `/s/${actualStatusID}`;
|
||||
return (
|
||||
<li key={statusID}>
|
||||
<Link
|
||||
class="status-carousel-link timeline-item-alt"
|
||||
to={url}
|
||||
>
|
||||
{useItemID ? (
|
||||
<Status
|
||||
statusID={statusID}
|
||||
instance={instance}
|
||||
size="s"
|
||||
contentTextWeight
|
||||
/>
|
||||
) : (
|
||||
<Status
|
||||
status={item}
|
||||
instance={instance}
|
||||
size="s"
|
||||
contentTextWeight
|
||||
/>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</StatusCarousel>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<li key={`timeline-${statusID}`}>
|
||||
<Link class="status-link timeline-item" to={url}>
|
||||
{useItemID ? (
|
||||
<Status statusID={statusID} instance={instance} />
|
||||
) : (
|
||||
<Status status={status} instance={instance} />
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
{showMore && uiState === 'loading' && (
|
||||
<>
|
||||
<li
|
||||
style={{
|
||||
height: '20vh',
|
||||
}}
|
||||
>
|
||||
<Status skeleton />
|
||||
</li>
|
||||
<li
|
||||
style={{
|
||||
height: '25vh',
|
||||
}}
|
||||
>
|
||||
<Status skeleton />
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
{showMore && (
|
||||
{uiState === 'default' &&
|
||||
(showMore ? (
|
||||
<button
|
||||
type="button"
|
||||
class="plain block"
|
||||
disabled={uiState === 'loading'}
|
||||
onClick={() => loadItems()}
|
||||
style={{ marginBlockEnd: '6em' }}
|
||||
>
|
||||
{uiState === 'loading' ? (
|
||||
<Loader abrupt />
|
||||
) : (
|
||||
<>Show more…</>
|
||||
)}
|
||||
Show more…
|
||||
</button>
|
||||
)}
|
||||
) : (
|
||||
<p class="ui-state insignificant">The end.</p>
|
||||
))}
|
||||
</>
|
||||
) : uiState === 'loading' ? (
|
||||
<ul class="timeline">
|
||||
|
@ -136,9 +397,9 @@ function Timeline({
|
|||
))}
|
||||
</ul>
|
||||
) : (
|
||||
uiState !== 'loading' && <p class="ui-state">{emptyText}</p>
|
||||
uiState !== 'error' && <p class="ui-state">{emptyText}</p>
|
||||
)}
|
||||
{uiState === 'error' ? (
|
||||
{uiState === 'error' && (
|
||||
<p class="ui-state">
|
||||
{errorText}
|
||||
<br />
|
||||
|
@ -150,14 +411,104 @@ function Timeline({
|
|||
Try again
|
||||
</button>
|
||||
</p>
|
||||
) : (
|
||||
uiState !== 'loading' &&
|
||||
!!items.length &&
|
||||
!showMore && <p class="ui-state insignificant">The end.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function groupBoosts(values) {
|
||||
let newValues = [];
|
||||
let boostStash = [];
|
||||
let serialBoosts = 0;
|
||||
for (let i = 0; i < values.length; i++) {
|
||||
const item = values[i];
|
||||
if (item.reblog) {
|
||||
boostStash.push(item);
|
||||
serialBoosts++;
|
||||
} else {
|
||||
newValues.push(item);
|
||||
if (serialBoosts < 3) {
|
||||
serialBoosts = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// if boostStash is more than quarter of values
|
||||
// or if there are 3 or more boosts in a row
|
||||
if (boostStash.length > values.length / 4 || serialBoosts >= 3) {
|
||||
// if boostStash is more than 3 quarter of values
|
||||
const boostStashID = boostStash.map((status) => status.id);
|
||||
if (boostStash.length > (values.length * 3) / 4) {
|
||||
// insert boost array at the end of specialHome list
|
||||
newValues = [
|
||||
...newValues,
|
||||
{ id: boostStashID, items: boostStash, type: 'boosts' },
|
||||
];
|
||||
} else {
|
||||
// insert boosts array in the middle of specialHome list
|
||||
const half = Math.floor(newValues.length / 2);
|
||||
newValues = [
|
||||
...newValues.slice(0, half),
|
||||
{
|
||||
id: boostStashID,
|
||||
items: boostStash,
|
||||
type: 'boosts',
|
||||
},
|
||||
...newValues.slice(half),
|
||||
];
|
||||
}
|
||||
return newValues;
|
||||
} else {
|
||||
return values;
|
||||
}
|
||||
}
|
||||
|
||||
function StatusCarousel({ title, class: className, children }) {
|
||||
const carouselRef = useRef();
|
||||
const { reachStart, reachEnd, init } = useScroll({
|
||||
scrollableElement: carouselRef.current,
|
||||
direction: 'horizontal',
|
||||
});
|
||||
useEffect(() => {
|
||||
init?.();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div class={`status-carousel ${className}`}>
|
||||
<header>
|
||||
<h3>{title}</h3>
|
||||
<span>
|
||||
<button
|
||||
type="button"
|
||||
class="small plain2"
|
||||
disabled={reachStart}
|
||||
onClick={() => {
|
||||
carouselRef.current?.scrollBy({
|
||||
left: -Math.min(320, carouselRef.current?.offsetWidth),
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Icon icon="chevron-left" />
|
||||
</button>{' '}
|
||||
<button
|
||||
type="button"
|
||||
class="small plain2"
|
||||
disabled={reachEnd}
|
||||
onClick={() => {
|
||||
carouselRef.current?.scrollBy({
|
||||
left: Math.min(320, carouselRef.current?.offsetWidth),
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Icon icon="chevron-right" />
|
||||
</button>
|
||||
</span>
|
||||
</header>
|
||||
<ul ref={carouselRef}>{children}</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Timeline;
|
||||
|
|
|
@ -2,36 +2,16 @@ import './index.css';
|
|||
|
||||
import './app.css';
|
||||
|
||||
import { createClient } from 'masto';
|
||||
import { render } from 'preact';
|
||||
import { useEffect, useState } from 'preact/hooks';
|
||||
|
||||
import Compose from './components/compose';
|
||||
import { getCurrentAccount } from './utils/store-utils';
|
||||
import useTitle from './utils/useTitle';
|
||||
|
||||
if (window.opener) {
|
||||
console = window.opener.console;
|
||||
}
|
||||
|
||||
(() => {
|
||||
if (window.masto) return;
|
||||
console.warn('window.masto not found. Trying to log in...');
|
||||
try {
|
||||
const { instanceURL, accessToken } = getCurrentAccount();
|
||||
window.masto = createClient({
|
||||
url: `https://${instanceURL}`,
|
||||
accessToken,
|
||||
disableVersionCheck: true,
|
||||
timeout: 30_000,
|
||||
});
|
||||
console.info('Logged in successfully.');
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
alert('Failed to log in. Please try again.');
|
||||
}
|
||||
})();
|
||||
|
||||
function App() {
|
||||
const [uiState, setUIState] = useState('default');
|
||||
|
||||
|
|
3
src/data/features.json
Normal file
3
src/data/features.json
Normal file
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"@mastodon/edit-media-attributes": ">=4.1"
|
||||
}
|
|
@ -1,386 +1,415 @@
|
|||
[
|
||||
"mastodon.social",
|
||||
"mstdn.jp",
|
||||
"mstdn.social",
|
||||
"mastodon.world",
|
||||
"mas.to",
|
||||
"pawoo.net",
|
||||
"mastodon.online",
|
||||
"infosec.exchange",
|
||||
"mstdn.jp",
|
||||
"mastodonapp.uk",
|
||||
"hachyderm.io",
|
||||
"techhub.social",
|
||||
"fosstodon.org",
|
||||
"universeodon.com",
|
||||
"mastodon.lol",
|
||||
"mastodon.sdf.org",
|
||||
"techhub.social",
|
||||
"mastodonapp.uk",
|
||||
"troet.cafe",
|
||||
"mastodon.uno",
|
||||
"mastodon.nl",
|
||||
"mstdn.party",
|
||||
"masto.ai",
|
||||
"mstdn.ca",
|
||||
"home.social",
|
||||
"c.im",
|
||||
"kolektiva.social",
|
||||
"m.cmx.im",
|
||||
"sfba.social",
|
||||
"pawoo.net",
|
||||
"fedibird.com",
|
||||
"piaille.fr",
|
||||
"universeodon.com",
|
||||
"m.cmx.im",
|
||||
"mastodon.uno",
|
||||
"mastodon.sdf.org",
|
||||
"mastodon.nl",
|
||||
"planet.moe",
|
||||
"kolektiva.social",
|
||||
"masto.ai",
|
||||
"mastodon.gamedev.place",
|
||||
"piaille.fr",
|
||||
"mstdn.ca",
|
||||
"c.im",
|
||||
"mstdn.party",
|
||||
"sfba.social",
|
||||
"mastodon.cloud",
|
||||
"chaos.social",
|
||||
"home.social",
|
||||
"mastodon.art",
|
||||
"twingyeo.kr",
|
||||
"mastodon.scot",
|
||||
"social.vivaldi.net",
|
||||
"aus.social",
|
||||
"det.social",
|
||||
"norden.social",
|
||||
"nrw.social",
|
||||
"toot.community",
|
||||
"mindly.social",
|
||||
"ohai.social",
|
||||
"mastodon.cloud",
|
||||
"toot.community",
|
||||
"det.social",
|
||||
"aus.social",
|
||||
"nrw.social",
|
||||
"mastodon.art",
|
||||
"chaos.social",
|
||||
"social.vivaldi.net",
|
||||
"mastodon.ie",
|
||||
"norden.social",
|
||||
"sueden.social",
|
||||
"mastodon.top",
|
||||
"mastodon.au",
|
||||
"mastodontech.de",
|
||||
"mas.todon.de",
|
||||
"ioc.exchange",
|
||||
"alive.bar",
|
||||
"mastodon.ie",
|
||||
"social.tchncs.de",
|
||||
"mastodon.nu",
|
||||
"social.cologne",
|
||||
"mastouille.fr",
|
||||
"o3o.ca",
|
||||
"mathstodon.xyz",
|
||||
"noagendasocial.com",
|
||||
"newsie.social",
|
||||
"sigmoid.social",
|
||||
"mastodon.com.tr",
|
||||
"hessen.social",
|
||||
"muenchen.social",
|
||||
"meow.social",
|
||||
"masto.es",
|
||||
"masto.nu",
|
||||
"tech.lgbt",
|
||||
"ruhr.social",
|
||||
"mastodon.green",
|
||||
"mstdn.plus",
|
||||
"o3o.ca",
|
||||
"mastodon.top",
|
||||
"sueden.social",
|
||||
"mastodon.au",
|
||||
"wxw.moe",
|
||||
"qoto.org",
|
||||
"mamot.fr",
|
||||
"tkz.one",
|
||||
"dice.camp",
|
||||
"social.anoxinon.de",
|
||||
"mastodon.nz",
|
||||
"newsie.social",
|
||||
"mastodontech.de",
|
||||
"mathstodon.xyz",
|
||||
"loforo.com",
|
||||
"ioc.exchange",
|
||||
"twit.social",
|
||||
"ravenation.club",
|
||||
"planet.moe",
|
||||
"mstdn.science",
|
||||
"med-mastodon.com",
|
||||
"econtwitter.net",
|
||||
"fediscience.org",
|
||||
"toot.io",
|
||||
"masthead.social",
|
||||
"social.dev-wiki.de",
|
||||
"mastodont.cat",
|
||||
"toot.wales",
|
||||
"ieji.de",
|
||||
"ecoevo.social",
|
||||
"ro-mastodon.puyo.jp",
|
||||
"zirk.us",
|
||||
"noc.social",
|
||||
"social.linux.pizza",
|
||||
"cyberplace.social",
|
||||
"indieweb.social",
|
||||
"mastodonners.nl",
|
||||
"convo.casa",
|
||||
"twingyeo.kr",
|
||||
"sself.co",
|
||||
"urbanists.social",
|
||||
"glasgow.social",
|
||||
"botsin.space",
|
||||
"eldritch.cafe",
|
||||
"climatejustice.social",
|
||||
"theblower.au",
|
||||
"framapiaf.org",
|
||||
"artsio.com",
|
||||
"mastodon.iriseden.eu",
|
||||
"socel.net",
|
||||
"g0v.social",
|
||||
"mastodonczech.cz",
|
||||
"mastodontti.fi",
|
||||
"wandering.shop",
|
||||
"thu.closed.social",
|
||||
"mastodon.bida.im",
|
||||
"geekdom.social",
|
||||
"stranger.social",
|
||||
"cupoftea.social",
|
||||
"bildung.social",
|
||||
"awscommunity.social",
|
||||
"mas.town",
|
||||
"ruby.social",
|
||||
"sciences.social",
|
||||
"wien.rocks",
|
||||
"respublicae.eu",
|
||||
"metalhead.club",
|
||||
"pouet.chapril.org",
|
||||
"genomic.social",
|
||||
"dju.social",
|
||||
"101010.pl",
|
||||
"graphics.social",
|
||||
"defcon.social",
|
||||
"mastodon.xyz",
|
||||
"bark.lgbt",
|
||||
"witches.live",
|
||||
"climatejustice.rocks",
|
||||
"rollenspiel.social",
|
||||
"berlin.social",
|
||||
"masto.pt",
|
||||
"litmind.club",
|
||||
"livellosegreto.it",
|
||||
"mstdn.guru",
|
||||
"mamot.fr",
|
||||
"meow.social",
|
||||
"dice.camp",
|
||||
"nerdculture.de",
|
||||
"journa.host",
|
||||
"mastodon.nu",
|
||||
"masto.es",
|
||||
"hessen.social",
|
||||
"mastouille.fr",
|
||||
"ruhr.social",
|
||||
"social.cologne",
|
||||
"mastodon.green",
|
||||
"muenchen.social",
|
||||
"mastodon.nz",
|
||||
"mastodon.com.tr",
|
||||
"qoto.org",
|
||||
"tkz.one",
|
||||
"botsin.space",
|
||||
"sigmoid.social",
|
||||
"social.anoxinon.de",
|
||||
"ro-mastodon.puyo.jp",
|
||||
"fediscience.org",
|
||||
"mstdn.science",
|
||||
"masthead.social",
|
||||
"ravenation.club",
|
||||
"defcon.social",
|
||||
"indieweb.social",
|
||||
"ecoevo.social",
|
||||
"med-mastodon.com",
|
||||
"zirk.us",
|
||||
"econtwitter.net",
|
||||
"mastodont.cat",
|
||||
"social.linux.pizza",
|
||||
"noc.social",
|
||||
"toot.wales",
|
||||
"wandering.shop",
|
||||
"framapiaf.org",
|
||||
"mastodon.xyz",
|
||||
"eldritch.cafe",
|
||||
"masto.nu",
|
||||
"mastodon-japan.net",
|
||||
"g0v.social",
|
||||
"ieji.de",
|
||||
"toot.io",
|
||||
"social.dev-wiki.de",
|
||||
"akamdon.com",
|
||||
"ruby.social",
|
||||
"respublicae.eu",
|
||||
"mstdn.plus",
|
||||
"bildung.social",
|
||||
"urbanists.social",
|
||||
"mstdn.guru",
|
||||
"cyberplace.social",
|
||||
"sciences.social",
|
||||
"climatejustice.social",
|
||||
"glasgow.social",
|
||||
"livellosegreto.it",
|
||||
"pouet.chapril.org",
|
||||
"mastodontti.fi",
|
||||
"101010.pl",
|
||||
"mastodonczech.cz",
|
||||
"octodon.social",
|
||||
"union.place",
|
||||
"mastodon-belgium.be",
|
||||
"mastodon.radio",
|
||||
"pol.social",
|
||||
"rheinneckar.social",
|
||||
"hometech.social",
|
||||
"androiddev.social",
|
||||
"social.librem.one",
|
||||
"kinky.business",
|
||||
"metalhead.club",
|
||||
"socel.net",
|
||||
"thu.closed.social",
|
||||
"stranger.social",
|
||||
"mastodon.iriseden.eu",
|
||||
"mastodon.radio",
|
||||
"berlin.social",
|
||||
"mastodon.bida.im",
|
||||
"phpc.social",
|
||||
"mast.lat",
|
||||
"muenster.im",
|
||||
"mastodon.chasem.dev",
|
||||
"tooot.im",
|
||||
"musician.social",
|
||||
"dresden.network",
|
||||
"swiss.social",
|
||||
"h4.io",
|
||||
"toot.aquilenet.fr",
|
||||
"digitalcourage.social",
|
||||
"toad.social",
|
||||
"poweredbygay.social",
|
||||
"hostux.social",
|
||||
"mastodon.se",
|
||||
"mastodon.me.uk",
|
||||
"rubber.social",
|
||||
"pewtix.com",
|
||||
"mastodon.berlin",
|
||||
"lor.sh",
|
||||
"mastodon.fun",
|
||||
"me.ns.ci",
|
||||
"snabelen.no",
|
||||
"freiburg.social",
|
||||
"disabled.social",
|
||||
"spore.social",
|
||||
"qdon.space",
|
||||
"beta.qdon.space",
|
||||
"scholar.social",
|
||||
"vmst.io",
|
||||
"astrodon.social",
|
||||
"masto.nobigtech.es",
|
||||
"hci.social",
|
||||
"mastodon.eus",
|
||||
"todon.eu",
|
||||
"discuss.systems",
|
||||
"tooting.ch",
|
||||
"paquita.masto.host",
|
||||
"fulda.social",
|
||||
"lile.cl",
|
||||
"medibubble.org",
|
||||
"writing.exchange",
|
||||
"historians.social",
|
||||
"kinky.business",
|
||||
"genomic.social",
|
||||
"vocalodon.net",
|
||||
"vis.social",
|
||||
"yiff.life",
|
||||
"fur.lgbt",
|
||||
"peoplemaking.games",
|
||||
"hcommons.social",
|
||||
"mstdn.io",
|
||||
"libretooth.gr",
|
||||
"m.sclo.nl",
|
||||
"pettingzoo.co",
|
||||
"mastodon.zaclys.com",
|
||||
"equestria.social",
|
||||
"qdon.space",
|
||||
"androiddev.social",
|
||||
"masto.pt",
|
||||
"digitalcourage.social",
|
||||
"theblower.au",
|
||||
"graphics.social",
|
||||
"rollenspiel.social",
|
||||
"mastodonners.nl",
|
||||
"awscommunity.social",
|
||||
"witches.live",
|
||||
"pol.social",
|
||||
"mstdn.id",
|
||||
"swiss.social",
|
||||
"geekdom.social",
|
||||
"mast.lat",
|
||||
"mastodon.me.uk",
|
||||
"mastodon.fun",
|
||||
"journa.host",
|
||||
"mastodon-belgium.be",
|
||||
"tooot.im",
|
||||
"sself.co",
|
||||
"dresden.network",
|
||||
"expressional.social",
|
||||
"woof.group",
|
||||
"hostux.social",
|
||||
"union.place",
|
||||
"mastodon.eus",
|
||||
"dju.social",
|
||||
"best-friends.chat",
|
||||
"ursal.zone",
|
||||
"bitcoinhackers.org",
|
||||
"uiuxdev.social",
|
||||
"queer.party",
|
||||
"scholar.social",
|
||||
"social.lol",
|
||||
"cr8r.gg",
|
||||
"hci.social",
|
||||
"kemonodon.club",
|
||||
"toad.social",
|
||||
"rubber.social",
|
||||
"mastodonbooks.net",
|
||||
"snabelen.no",
|
||||
"astrodon.social",
|
||||
"muenster.im",
|
||||
"paquita.masto.host",
|
||||
"mastodon.ml",
|
||||
"todon.eu",
|
||||
"freiburg.social",
|
||||
"h4.io",
|
||||
"cupoftea.social",
|
||||
"toot.aquilenet.fr",
|
||||
"lor.sh",
|
||||
"bark.lgbt",
|
||||
"convo.casa",
|
||||
"rheinneckar.social",
|
||||
"yiff.life",
|
||||
"stoners.social",
|
||||
"writing.exchange",
|
||||
"mastodon.se",
|
||||
"hcommons.social",
|
||||
"mstdn.games",
|
||||
"spore.social",
|
||||
"mastodon.berlin",
|
||||
"vmst.io",
|
||||
"vis.social",
|
||||
"discuss.systems",
|
||||
"uri.life",
|
||||
"aethy.com",
|
||||
"abdl.link",
|
||||
"mastodon.com.py",
|
||||
"mapstodon.space",
|
||||
"mstdn.io",
|
||||
"ursal.zone",
|
||||
"tooting.ch",
|
||||
"queer.party",
|
||||
"pewtix.com",
|
||||
"mastodon.zaclys.com",
|
||||
"historians.social",
|
||||
"typo.social",
|
||||
"cryptodon.lol",
|
||||
"pettingzoo.co",
|
||||
"peoplemaking.games",
|
||||
"abdl.link",
|
||||
"climatejustice.rocks",
|
||||
"tilde.zone",
|
||||
"computerfairi.es",
|
||||
"social.coop",
|
||||
"mast.dragon-fly.club",
|
||||
"dragon-fly.club",
|
||||
"wien.rocks",
|
||||
"floss.social",
|
||||
"photog.social",
|
||||
"bonn.social",
|
||||
"sciencemastodon.com",
|
||||
"mastodon.coffee",
|
||||
"mastorol.es",
|
||||
"federated.press",
|
||||
"toot.funami.tech",
|
||||
"mastodon.gal",
|
||||
"social.coop",
|
||||
"lile.cl",
|
||||
"openbiblio.social",
|
||||
"twiukraine.com",
|
||||
"tabletop.social",
|
||||
"shakedown.social",
|
||||
"dizl.de",
|
||||
"romancelandia.club",
|
||||
"oslo.town",
|
||||
"graz.social",
|
||||
"sociale.network",
|
||||
"todon.nl",
|
||||
"imastodon.net",
|
||||
"bitcoinhackers.org",
|
||||
"medibubble.org",
|
||||
"disabled.social",
|
||||
"photog.social",
|
||||
"macaw.social",
|
||||
"mustard.blog",
|
||||
"mstdn.maud.io",
|
||||
"nofan.xyz",
|
||||
"data-folks.masto.host",
|
||||
"mapstodon.space",
|
||||
"bonn.social",
|
||||
"vkl.world",
|
||||
"lounge.town",
|
||||
"fulda.social",
|
||||
"mast.dragon-fly.club",
|
||||
"masto.nobigtech.es",
|
||||
"sciencemastodon.com",
|
||||
"weirder.earth",
|
||||
"todon.nl",
|
||||
"obo.sh",
|
||||
"shakedown.social",
|
||||
"musician.social",
|
||||
"bsd.network",
|
||||
"mastodon.gal",
|
||||
"mastodon.coffee",
|
||||
"toot.cat",
|
||||
"libretooth.gr",
|
||||
"scicomm.xyz",
|
||||
"layer8.space",
|
||||
"artisan.chat",
|
||||
"freeradical.zone",
|
||||
"toot.cat",
|
||||
"fandom.ink",
|
||||
"twiukraine.com",
|
||||
"eupolicy.social",
|
||||
"xarxa.cloud",
|
||||
"bsd.network",
|
||||
"weirder.earth",
|
||||
"linuxrocks.online",
|
||||
"mastodon.cat",
|
||||
"girlcock.club",
|
||||
"bolha.us",
|
||||
"zeroes.ca",
|
||||
"douchi.space",
|
||||
"uiuxdev.social",
|
||||
"veganism.social",
|
||||
"oslo.town",
|
||||
"artsio.com",
|
||||
"cybre.space",
|
||||
"mastodon.la",
|
||||
"sunny.garden",
|
||||
"bbq.snoot.com",
|
||||
"freeradical.zone",
|
||||
"social.veraciousnetwork.com",
|
||||
"douchi.space",
|
||||
"mstdn.dk",
|
||||
"federated.press",
|
||||
"jorts.horse",
|
||||
"girlcock.club",
|
||||
"artisan.chat",
|
||||
"bolha.us",
|
||||
"liker.social",
|
||||
"vulpine.club",
|
||||
"imastodon.net",
|
||||
"mstdn.maud.io",
|
||||
"freeatlantis.com",
|
||||
"is.nota.live",
|
||||
"mastodon.org.uk",
|
||||
"mastodon.arch-linux.cz",
|
||||
"linuxrocks.online",
|
||||
"eupolicy.social",
|
||||
"equestria.social",
|
||||
"graz.social",
|
||||
"mastodo.fi",
|
||||
"pnw.zone",
|
||||
"dizl.de",
|
||||
"mona.do",
|
||||
"tyrol.social",
|
||||
"mstdn.id",
|
||||
"mastodon.uy",
|
||||
"mastodon.in.th",
|
||||
"kurry.social",
|
||||
"toot.cafe",
|
||||
"shelter.moe",
|
||||
"social.politicaconciencia.org",
|
||||
"h-net.social",
|
||||
"mstdn.mx",
|
||||
"kopiti.am",
|
||||
"mastodon.vlaanderen",
|
||||
"mao.mastodonhub.com",
|
||||
"cloud-native.social",
|
||||
"mograph.social",
|
||||
"oc.todon.fr",
|
||||
"ura-mstdn.com",
|
||||
"uri.life",
|
||||
"liberdon.com",
|
||||
"kinkyelephant.com",
|
||||
"nojack.easydns.ca",
|
||||
"mastodon.be",
|
||||
"podcastindex.social",
|
||||
"blacktwitter.io",
|
||||
"awoo.space",
|
||||
"woof.group",
|
||||
"ani.work",
|
||||
"colorid.es",
|
||||
"seo.chat",
|
||||
"mental.social",
|
||||
"plural.cafe",
|
||||
"guitar.rodeo",
|
||||
"sociale.network",
|
||||
"opalstack.social",
|
||||
"mas.town",
|
||||
"mastodon.la",
|
||||
"arvr.social",
|
||||
"zeroes.ca",
|
||||
"mastorol.es",
|
||||
"ffxiv-mastodon.com",
|
||||
"data-folks.masto.host",
|
||||
"witter.cz",
|
||||
"romancelandia.club",
|
||||
"freeatlantis.com",
|
||||
"darmstadt.social",
|
||||
"mastodon.cat",
|
||||
"mastodon.energy",
|
||||
"computerfairi.es",
|
||||
"mastodon.org.uk",
|
||||
"xarxa.cloud",
|
||||
"masto.nyc",
|
||||
"cryptodon.lol",
|
||||
"gametoots.de",
|
||||
"sunny.garden",
|
||||
"ika.queloud.net",
|
||||
"mastodon.com.br",
|
||||
"mstdn.tokyocameraclub.com",
|
||||
"donphan.social",
|
||||
"gensokyo.town",
|
||||
"nederland.online",
|
||||
"hometech.social",
|
||||
"ura-mstdn.com",
|
||||
"shelter.moe",
|
||||
"kurry.social",
|
||||
"halifaxsocial.ca",
|
||||
"bbq.snoot.com",
|
||||
"mastodon.arch-linux.cz",
|
||||
"toot.cafe",
|
||||
"mao.mastodonhub.com",
|
||||
"ani.work",
|
||||
"mastodon.uy",
|
||||
"mastodon.com.py",
|
||||
"mstdn.mx",
|
||||
"mastodon.chasem.dev",
|
||||
"toolboxtalk.tech",
|
||||
"mastodon.in.th",
|
||||
"ichiji.social",
|
||||
"sunbeam.city",
|
||||
"mstdn.kemono-friends.info",
|
||||
"littlefo.rest",
|
||||
"kirakiratter.com",
|
||||
"uwu.social",
|
||||
"elekk.xyz",
|
||||
"hispagatos.space",
|
||||
"hello.2heng.xin",
|
||||
"the.fores.top",
|
||||
"mstdn.fr",
|
||||
"mastodon.mnetwork.co.kr",
|
||||
"mastodon.gougere.fr",
|
||||
"dobbs.town",
|
||||
"gameliberty.club",
|
||||
"gensokyo.social",
|
||||
"mathtod.online",
|
||||
"mastodon.cc",
|
||||
"mental.social",
|
||||
"nnia.space",
|
||||
"iztasocial.site",
|
||||
"mastodon.pirateparty.be",
|
||||
"dingdash.com",
|
||||
"mastodon.partipirate.org",
|
||||
"oulipo.social",
|
||||
"anticapitalist.party",
|
||||
"kemonodon.club",
|
||||
"toot.turbo.chat",
|
||||
"nojack.easydns.ca",
|
||||
"arsenalfc.social",
|
||||
"tyrol.social",
|
||||
"est.social",
|
||||
"kinkyelephant.com",
|
||||
"mograph.social",
|
||||
"mastodon.mnetwork.co.kr",
|
||||
"kirakiratter.com",
|
||||
"h-net.social",
|
||||
"podcastindex.social",
|
||||
"esperanto.masto.host",
|
||||
"awoo.space",
|
||||
"kopiti.am",
|
||||
"is.nota.live",
|
||||
"social.politicaconciencia.org",
|
||||
"nafo.uk",
|
||||
"liberdon.com",
|
||||
"oc.todon.fr",
|
||||
"mstdn.kemono-friends.info",
|
||||
"me.dm",
|
||||
"plural.cafe",
|
||||
"donphan.social",
|
||||
"cloud-native.social",
|
||||
"blacktwitter.io",
|
||||
"mastodon.be",
|
||||
"mastodon.vlaanderen",
|
||||
"mastodon.com.br",
|
||||
"gensokyo.town",
|
||||
"mstdn.tokyocameraclub.com",
|
||||
"kfem.cat",
|
||||
"earthstream.social",
|
||||
"sunbeam.city",
|
||||
"colorid.es",
|
||||
"photodn.net",
|
||||
"otogamer.me",
|
||||
"bear.community",
|
||||
"hello.2heng.xin",
|
||||
"blabber.lu-rp.net",
|
||||
"tablegame.mstdn.cloud",
|
||||
"anarchism.space",
|
||||
"ffxiv-mastodon.com",
|
||||
"lgbt.io",
|
||||
"elekk.xyz",
|
||||
"uwu.social",
|
||||
"hispagatos.space",
|
||||
"mstdn.fr",
|
||||
"dobbs.town",
|
||||
"mastodon.gougere.fr",
|
||||
"gameliberty.club",
|
||||
"poweredbygay.social",
|
||||
"dingdash.com",
|
||||
"seo.chat",
|
||||
"mastodon.cc",
|
||||
"oulipo.social",
|
||||
"lou.lt",
|
||||
"social.chinwag.org",
|
||||
"chinwag.org",
|
||||
"aleph.land",
|
||||
"social.slat.org",
|
||||
"mastodon.juggler.jp",
|
||||
"eigadon.net",
|
||||
"vocalounge.cafe",
|
||||
"acg.mn",
|
||||
"acg.debula.ml",
|
||||
"mastodon.partipirate.org",
|
||||
"gensokyo.social",
|
||||
"anticapitalist.party",
|
||||
"eletusk.club",
|
||||
"mastodon.juggler.jp",
|
||||
"social.slat.org",
|
||||
"bear.community",
|
||||
"mathtod.online",
|
||||
"mastodon.pirateparty.be",
|
||||
"toot.turbo.chat",
|
||||
"lgbt.io",
|
||||
"anarchism.space",
|
||||
"otoya.space",
|
||||
"social.coletivos.org",
|
||||
"mastodon.cipherbliss.com",
|
||||
"acg.mn",
|
||||
"social.chinwag.org",
|
||||
"eigadon.net",
|
||||
"aleph.land",
|
||||
"piano.masto.host",
|
||||
"baraag.net",
|
||||
"m.rthome.me",
|
||||
"truthsocial.co.in",
|
||||
"mstdn.osaka",
|
||||
"mastodol.jp",
|
||||
"mastodon.cipherbliss.com",
|
||||
"social.targaryen.house",
|
||||
"vocalounge.cafe",
|
||||
"catdon.life",
|
||||
"social.coletivos.org",
|
||||
"mastoturk.org",
|
||||
"mastodon.librelabucm.org",
|
||||
"stereodon.social",
|
||||
"social.opendesktop.org",
|
||||
"nasface.cz",
|
||||
"toot.site",
|
||||
"fetswing.org",
|
||||
"vipgirlfriend.xxx",
|
||||
"mastodon.elte.hu",
|
||||
"toot.site",
|
||||
"vipgirlfriend.xxx",
|
||||
"nasface.cz",
|
||||
"bgme.me",
|
||||
"fetswing.org",
|
||||
"kinbaku.club",
|
||||
"m.rthome.me",
|
||||
"animalliberation.social",
|
||||
"mastodon.librelabucm.org",
|
||||
"mastodon.gza.jp",
|
||||
"med-mammoth.com",
|
||||
"mastodon.gza.jp",
|
||||
"hearthtodon.com",
|
||||
"counter.social",
|
||||
"kfem.cat",
|
||||
"pet123.club",
|
||||
"beta.woof.group",
|
||||
"explosion.party",
|
||||
"id.cc",
|
||||
"freespeechextremist.com",
|
||||
"cawfee.club",
|
||||
|
@ -394,6 +423,7 @@
|
|||
"libranet.de",
|
||||
"tea.codes",
|
||||
"pixelfed.social",
|
||||
"stop.voring.me",
|
||||
"shitposter.club",
|
||||
"squeet.me",
|
||||
"shared.graphics",
|
||||
|
@ -401,13 +431,16 @@
|
|||
"pxlmo.com",
|
||||
"pixel.tchncs.de",
|
||||
"love.alicecomplex.com",
|
||||
"mastodon.london",
|
||||
"friendica.eskimo.com",
|
||||
"meatbag.app",
|
||||
"fediverse.bbad.com",
|
||||
"pix.toot.wales",
|
||||
"fgc.network",
|
||||
"bookrastinating.com",
|
||||
"electricrequiem.com",
|
||||
"pixey.org",
|
||||
"mk.pupbrained.xyz",
|
||||
"pixelfed.tokyo",
|
||||
"chudbuds.lol",
|
||||
"freeframe.masto.host",
|
||||
|
@ -423,13 +456,16 @@
|
|||
"pixelfed.de",
|
||||
"metapixl.com",
|
||||
"venera.social",
|
||||
"pixelfed.fi",
|
||||
"blob.cat",
|
||||
"onevery.ignorelist.com",
|
||||
"cliq.buzz",
|
||||
"pxl.roflcopter.fr",
|
||||
"p.1069-3.com",
|
||||
"www2.patriot.online",
|
||||
"gc2.jp",
|
||||
"soap.shitposter.club",
|
||||
"www.mastodon.scot"
|
||||
"an.eldritch.gift",
|
||||
"bz.pawdev.me",
|
||||
"ck.borgar.space",
|
||||
"fedi.s1i.dev",
|
||||
"kids.0px.io"
|
||||
]
|
|
@ -919,6 +919,11 @@
|
|||
"Sorani (Kurdish)",
|
||||
"سۆرانی"
|
||||
],
|
||||
[
|
||||
"cnr",
|
||||
"Montenegrin",
|
||||
"crnogorski"
|
||||
],
|
||||
[
|
||||
"jbo",
|
||||
"Lojban",
|
||||
|
@ -949,6 +954,26 @@
|
|||
"Scots",
|
||||
"Scots"
|
||||
],
|
||||
[
|
||||
"sma",
|
||||
"Southern Sami",
|
||||
"Åarjelsaemien Gïele"
|
||||
],
|
||||
[
|
||||
"smj",
|
||||
"Lule Sami",
|
||||
"Julevsámegiella"
|
||||
],
|
||||
[
|
||||
"szl",
|
||||
"Silesian",
|
||||
"ślůnsko godka"
|
||||
],
|
||||
[
|
||||
"tai",
|
||||
"Tai",
|
||||
"ภาษาไท or ภาษาไต"
|
||||
],
|
||||
[
|
||||
"tok",
|
||||
"Toki Pona",
|
||||
|
|
|
@ -1,4 +1,8 @@
|
|||
/* Can't use this yet because custom-media doesn't propagate to other CSS files yet, in Vite */
|
||||
@custom-media --viewport-medium (min-width: 40em);
|
||||
|
||||
:root {
|
||||
--main-width: 40em;
|
||||
text-size-adjust: none;
|
||||
--hairline-width: 1px;
|
||||
|
||||
|
@ -295,6 +299,13 @@ code {
|
|||
color: var(--text-insignificant-color);
|
||||
}
|
||||
|
||||
.hide-until-focus-visible {
|
||||
display: none;
|
||||
}
|
||||
:has(:focus-visible) .hide-until-focus-visible {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
/* KEYFRAMES */
|
||||
|
||||
@keyframes appear {
|
||||
|
@ -306,6 +317,17 @@ code {
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes appear-smooth {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
|
|
@ -1,7 +1,5 @@
|
|||
import './index.css';
|
||||
|
||||
import '@szhsin/react-menu/dist/core.css';
|
||||
|
||||
import { render } from 'preact';
|
||||
import { HashRouter } from 'react-router-dom';
|
||||
|
||||
|
@ -18,10 +16,10 @@ render(
|
|||
document.getElementById('app'),
|
||||
);
|
||||
|
||||
// Clean up iconify localStorage
|
||||
// TODO: Remove this after few weeks?
|
||||
// Storage cleanup
|
||||
setTimeout(() => {
|
||||
try {
|
||||
// Clean up iconify localStorage
|
||||
Object.keys(localStorage).forEach((key) => {
|
||||
if (key.startsWith('iconify')) {
|
||||
localStorage.removeItem(key);
|
||||
|
@ -32,5 +30,8 @@ setTimeout(() => {
|
|||
sessionStorage.removeItem(key);
|
||||
}
|
||||
});
|
||||
|
||||
// Clean up old settings key
|
||||
localStorage.removeItem('settings:boostsCarousel');
|
||||
} catch (e) {}
|
||||
}, 5000);
|
||||
|
|
|
@ -1,24 +1,64 @@
|
|||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useSnapshot } from 'valtio';
|
||||
|
||||
import Timeline from '../components/timeline';
|
||||
import { api } from '../utils/api';
|
||||
import emojifyText from '../utils/emojify-text';
|
||||
import states from '../utils/states';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
||||
const LIMIT = 20;
|
||||
|
||||
function AccountStatuses() {
|
||||
const { id } = useParams();
|
||||
const snapStates = useSnapshot(states);
|
||||
const { id, ...params } = useParams();
|
||||
const { masto, instance } = api({ instance: params.instance });
|
||||
const accountStatusesIterator = useRef();
|
||||
async function fetchAccountStatuses(firstLoad) {
|
||||
const results = [];
|
||||
if (firstLoad) {
|
||||
const { value: pinnedStatuses } = await masto.v1.accounts
|
||||
.listStatuses(id, {
|
||||
pinned: true,
|
||||
})
|
||||
.next();
|
||||
if (pinnedStatuses?.length) {
|
||||
pinnedStatuses.forEach((status) => {
|
||||
status._pinned = true;
|
||||
});
|
||||
if (pinnedStatuses.length > 1) {
|
||||
const pinnedStatusesIds = pinnedStatuses.map((status) => status.id);
|
||||
results.push({
|
||||
id: pinnedStatusesIds,
|
||||
items: pinnedStatuses,
|
||||
type: 'pinned',
|
||||
});
|
||||
} else {
|
||||
results.push(...pinnedStatuses);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (firstLoad || !accountStatusesIterator.current) {
|
||||
accountStatusesIterator.current = masto.v1.accounts.listStatuses(id, {
|
||||
limit: LIMIT,
|
||||
});
|
||||
}
|
||||
return await accountStatusesIterator.current.next();
|
||||
const { value, done } = await accountStatusesIterator.current.next();
|
||||
if (value?.length) {
|
||||
results.push(...value);
|
||||
}
|
||||
return {
|
||||
value: results,
|
||||
done,
|
||||
};
|
||||
}
|
||||
|
||||
const [account, setAccount] = useState({});
|
||||
useTitle(
|
||||
`${account?.acct ? '@' + account.acct : 'Posts'}`,
|
||||
'/:instance?/a/:id',
|
||||
);
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
|
@ -31,6 +71,8 @@ function AccountStatuses() {
|
|||
})();
|
||||
}, [id]);
|
||||
|
||||
const { displayName, acct, emojis } = account;
|
||||
|
||||
return (
|
||||
<Timeline
|
||||
key={id}
|
||||
|
@ -38,21 +80,29 @@ function AccountStatuses() {
|
|||
titleComponent={
|
||||
<h1
|
||||
class="header-account"
|
||||
onClick={() => {
|
||||
states.showAccount = account;
|
||||
}}
|
||||
// onClick={() => {
|
||||
// states.showAccount = {
|
||||
// account,
|
||||
// instance,
|
||||
// };
|
||||
// }}
|
||||
>
|
||||
{account?.displayName}
|
||||
<b
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: emojifyText(displayName, emojis),
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<span>@{account?.acct}</span>
|
||||
<span>@{acct}</span>
|
||||
</div>
|
||||
</h1>
|
||||
}
|
||||
path="/a/:id"
|
||||
id="account_statuses"
|
||||
instance={instance}
|
||||
emptyText="Nothing to see here yet."
|
||||
errorText="Unable to load statuses"
|
||||
fetchItems={fetchAccountStatuses}
|
||||
boostsCarousel={snapStates.settings.boostsCarousel}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,10 +1,14 @@
|
|||
import { useRef } from 'preact/hooks';
|
||||
|
||||
import Timeline from '../components/timeline';
|
||||
import { api } from '../utils/api';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
||||
const LIMIT = 20;
|
||||
|
||||
function Bookmarks() {
|
||||
useTitle('Bookmarks', '/b');
|
||||
const { masto, instance } = api();
|
||||
const bookmarksIterator = useRef();
|
||||
async function fetchBookmarks(firstLoad) {
|
||||
if (firstLoad || !bookmarksIterator.current) {
|
||||
|
@ -19,6 +23,7 @@ function Bookmarks() {
|
|||
id="bookmarks"
|
||||
emptyText="No bookmarks yet. Go bookmark something!"
|
||||
errorText="Unable to load bookmarks"
|
||||
instance={instance}
|
||||
fetchItems={fetchBookmarks}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -1,10 +1,14 @@
|
|||
import { useRef } from 'preact/hooks';
|
||||
|
||||
import Timeline from '../components/timeline';
|
||||
import { api } from '../utils/api';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
||||
const LIMIT = 20;
|
||||
|
||||
function Favourites() {
|
||||
useTitle('Favourites', '/f');
|
||||
const { masto, instance } = api();
|
||||
const favouritesIterator = useRef();
|
||||
async function fetchFavourites(firstLoad) {
|
||||
if (firstLoad || !favouritesIterator.current) {
|
||||
|
@ -19,6 +23,7 @@ function Favourites() {
|
|||
id="favourites"
|
||||
emptyText="No favourites yet. Go favourite something!"
|
||||
errorText="Unable to load favourites"
|
||||
instance={instance}
|
||||
fetchItems={fetchFavourites}
|
||||
/>
|
||||
);
|
||||
|
|
86
src/pages/followed-hashtags.jsx
Normal file
86
src/pages/followed-hashtags.jsx
Normal file
|
@ -0,0 +1,86 @@
|
|||
import { useEffect, useState } from 'preact/hooks';
|
||||
|
||||
import Icon from '../components/icon';
|
||||
import Link from '../components/link';
|
||||
import Loader from '../components/loader';
|
||||
import Menu from '../components/menu';
|
||||
import { api } from '../utils/api';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
||||
const LIMIT = 200;
|
||||
|
||||
function FollowedHashtags() {
|
||||
const { masto, instance } = api();
|
||||
useTitle(`Followed Hashtags`, `/ft`);
|
||||
const [uiState, setUiState] = useState('default');
|
||||
|
||||
const [followedHashtags, setFollowedHashtags] = useState([]);
|
||||
useEffect(() => {
|
||||
setUiState('loading');
|
||||
(async () => {
|
||||
try {
|
||||
const iterator = masto.v1.followedTags.list({
|
||||
limit: LIMIT,
|
||||
});
|
||||
const tags = [];
|
||||
do {
|
||||
const { value, done } = await iterator.next();
|
||||
if (done || value?.length === 0) break;
|
||||
tags.push(...value);
|
||||
} while (true);
|
||||
console.log(tags);
|
||||
setFollowedHashtags(tags);
|
||||
setUiState('default');
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setUiState('error');
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div id="followed-hashtags-page" class="deck-container">
|
||||
<div class="timeline-deck deck">
|
||||
<header>
|
||||
<div class="header-grid">
|
||||
<div class="header-side">
|
||||
<Menu />
|
||||
<Link to="/" class="button plain">
|
||||
<Icon icon="home" size="l" />
|
||||
</Link>
|
||||
</div>
|
||||
<h1>Followed Hashtags</h1>
|
||||
<div class="header-side" />
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
{followedHashtags.length > 0 ? (
|
||||
<ul class="link-list">
|
||||
{followedHashtags.map((tag) => (
|
||||
<li>
|
||||
<Link
|
||||
to={
|
||||
instance ? `/${instance}/t/${tag.name}` : `/t/${tag.name}`
|
||||
}
|
||||
>
|
||||
<Icon icon="hashtag" /> <span>{tag.name}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : uiState === 'loading' ? (
|
||||
<p class="ui-state">
|
||||
<Loader abrupt />
|
||||
</p>
|
||||
) : uiState === 'error' ? (
|
||||
<p class="ui-state">Unable to load followed hashtags.</p>
|
||||
) : (
|
||||
<p class="ui-state">No hashtags followed yet.</p>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FollowedHashtags;
|
126
src/pages/following.jsx
Normal file
126
src/pages/following.jsx
Normal file
|
@ -0,0 +1,126 @@
|
|||
import { useEffect, useRef } from 'preact/hooks';
|
||||
import { useSnapshot } from 'valtio';
|
||||
|
||||
import Timeline from '../components/timeline';
|
||||
import { api } from '../utils/api';
|
||||
import states from '../utils/states';
|
||||
import { getStatus, saveStatus } from '../utils/states';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
||||
const LIMIT = 20;
|
||||
|
||||
function Following({ title, path, id, ...props }) {
|
||||
useTitle(title || 'Following', path || '/following');
|
||||
const { masto, instance } = api();
|
||||
const snapStates = useSnapshot(states);
|
||||
const homeIterator = useRef();
|
||||
const latestItem = useRef();
|
||||
|
||||
async function fetchHome(firstLoad) {
|
||||
if (firstLoad || !homeIterator.current) {
|
||||
homeIterator.current = masto.v1.timelines.listHome({ limit: LIMIT });
|
||||
}
|
||||
const results = await homeIterator.current.next();
|
||||
const { value } = results;
|
||||
if (value?.length) {
|
||||
if (firstLoad) {
|
||||
latestItem.current = value[0].id;
|
||||
}
|
||||
|
||||
value.forEach((item) => {
|
||||
saveStatus(item, instance);
|
||||
});
|
||||
|
||||
// ENFORCE sort by datetime (Latest first)
|
||||
value.sort((a, b) => {
|
||||
const aDate = new Date(a.createdAt);
|
||||
const bDate = new Date(b.createdAt);
|
||||
return bDate - aDate;
|
||||
});
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
async function checkForUpdates() {
|
||||
try {
|
||||
const results = await masto.v1.timelines
|
||||
.listHome({
|
||||
limit: 5,
|
||||
since_id: latestItem.current,
|
||||
})
|
||||
.next();
|
||||
const { value } = results;
|
||||
console.log('checkForUpdates', latestItem.current, value);
|
||||
if (value?.length && value.some((item) => !item.reblog)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const ws = useRef();
|
||||
const streamUser = async () => {
|
||||
console.log('🎏 Start streaming user', ws.current);
|
||||
if (
|
||||
ws.current &&
|
||||
(ws.current.readyState === WebSocket.CONNECTING ||
|
||||
ws.current.readyState === WebSocket.OPEN)
|
||||
) {
|
||||
console.log('🎏 Streaming user already open');
|
||||
return;
|
||||
}
|
||||
const stream = await masto.v1.stream.streamUser();
|
||||
ws.current = stream.ws;
|
||||
ws.current.__id = Math.random();
|
||||
console.log('🎏 Streaming user', ws.current);
|
||||
|
||||
stream.on('status.update', (status) => {
|
||||
console.log(`🔄 Status ${status.id} updated`);
|
||||
saveStatus(status, instance);
|
||||
});
|
||||
|
||||
stream.on('delete', (statusID) => {
|
||||
console.log(`❌ Status ${statusID} deleted`);
|
||||
// delete states.statuses[statusID];
|
||||
const s = getStatus(statusID, instance);
|
||||
if (s) s._deleted = true;
|
||||
});
|
||||
|
||||
stream.ws.onclose = () => {
|
||||
console.log('🎏 Streaming user closed');
|
||||
};
|
||||
|
||||
return stream;
|
||||
};
|
||||
useEffect(() => {
|
||||
let stream;
|
||||
(async () => {
|
||||
stream = await streamUser();
|
||||
})();
|
||||
return () => {
|
||||
if (stream) {
|
||||
stream.ws.close();
|
||||
ws.current = null;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Timeline
|
||||
title={title || 'Following'}
|
||||
id={id || 'following'}
|
||||
emptyText="Nothing to see here."
|
||||
errorText="Unable to load posts."
|
||||
instance={instance}
|
||||
fetchItems={fetchHome}
|
||||
checkForUpdates={checkForUpdates}
|
||||
useItemID
|
||||
boostsCarousel={snapStates.settings.boostsCarousel}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default Following;
|
75
src/pages/hashtag.jsx
Normal file
75
src/pages/hashtag.jsx
Normal file
|
@ -0,0 +1,75 @@
|
|||
import { useRef } from 'preact/hooks';
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
import Timeline from '../components/timeline';
|
||||
import { api } from '../utils/api';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
||||
const LIMIT = 20;
|
||||
|
||||
function Hashtags(props) {
|
||||
let { hashtag, ...params } = useParams();
|
||||
if (props.hashtag) hashtag = props.hashtag;
|
||||
const { masto, instance } = api({ instance: params.instance });
|
||||
const title = instance ? `#${hashtag} on ${instance}` : `#${hashtag}`;
|
||||
useTitle(title, `/:instance?/t/:hashtag`);
|
||||
const latestItem = useRef();
|
||||
|
||||
const hashtagsIterator = useRef();
|
||||
async function fetchHashtags(firstLoad) {
|
||||
if (firstLoad || !hashtagsIterator.current) {
|
||||
hashtagsIterator.current = masto.v1.timelines.listHashtag(hashtag, {
|
||||
limit: LIMIT,
|
||||
});
|
||||
}
|
||||
const results = await hashtagsIterator.current.next();
|
||||
const { value } = results;
|
||||
if (value?.length) {
|
||||
if (firstLoad) {
|
||||
latestItem.current = value[0].id;
|
||||
}
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
async function checkForUpdates() {
|
||||
try {
|
||||
const results = await masto.v1.timelines
|
||||
.listHashtag(hashtag, {
|
||||
limit: 1,
|
||||
since_id: latestItem.current,
|
||||
})
|
||||
.next();
|
||||
const { value } = results;
|
||||
if (value?.length) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Timeline
|
||||
key={hashtag}
|
||||
title={title}
|
||||
titleComponent={
|
||||
!!instance && (
|
||||
<h1 class="header-account">
|
||||
<b>#{hashtag}</b>
|
||||
<div>{instance}</div>
|
||||
</h1>
|
||||
)
|
||||
}
|
||||
id="hashtags"
|
||||
instance={instance}
|
||||
emptyText="No one has posted anything with this tag yet."
|
||||
errorText="Unable to load posts with this tag"
|
||||
fetchItems={fetchHashtags}
|
||||
checkForUpdates={checkForUpdates}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default Hashtags;
|
|
@ -1,32 +0,0 @@
|
|||
import { useRef } from 'preact/hooks';
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
import Timeline from '../components/timeline';
|
||||
|
||||
const LIMIT = 20;
|
||||
|
||||
function Hashtags() {
|
||||
const { hashtag } = useParams();
|
||||
const hashtagsIterator = useRef();
|
||||
async function fetchHashtags(firstLoad) {
|
||||
if (firstLoad || !hashtagsIterator.current) {
|
||||
hashtagsIterator.current = masto.v1.timelines.listHashtag(hashtag, {
|
||||
limit: LIMIT,
|
||||
});
|
||||
}
|
||||
return await hashtagsIterator.current.next();
|
||||
}
|
||||
|
||||
return (
|
||||
<Timeline
|
||||
key={hashtag}
|
||||
title={`#${hashtag}`}
|
||||
id="hashtags"
|
||||
emptyText="No one has posted anything with this tag yet."
|
||||
errorText="Unable to load posts with this tag"
|
||||
fetchItems={fetchHashtags}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default Hashtags;
|
546
src/pages/home-v1.jsx
Normal file
546
src/pages/home-v1.jsx
Normal file
|
@ -0,0 +1,546 @@
|
|||
import { memo } from 'preact/compat';
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { useDebouncedCallback } from 'use-debounce';
|
||||
import { useSnapshot } from 'valtio';
|
||||
|
||||
import Icon from '../components/icon';
|
||||
import Link from '../components/link';
|
||||
import Loader from '../components/loader';
|
||||
import Status from '../components/status';
|
||||
import { api } from '../utils/api';
|
||||
import db from '../utils/db';
|
||||
import states, { saveStatus } from '../utils/states';
|
||||
import { getCurrentAccountNS } from '../utils/store-utils';
|
||||
import useScroll from '../utils/useScroll';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
||||
const LIMIT = 20;
|
||||
|
||||
function Home({ hidden }) {
|
||||
useTitle('Home', '/');
|
||||
const { masto, instance } = api();
|
||||
const snapStates = useSnapshot(states);
|
||||
const [uiState, setUIState] = useState('default');
|
||||
const [showMore, setShowMore] = useState(false);
|
||||
|
||||
console.debug('RENDER Home');
|
||||
|
||||
const homeIterator = useRef();
|
||||
async function fetchStatuses(firstLoad) {
|
||||
if (firstLoad) {
|
||||
// Reset iterator
|
||||
homeIterator.current = masto.v1.timelines.listHome({
|
||||
limit: LIMIT,
|
||||
});
|
||||
states.homeNew = [];
|
||||
}
|
||||
const allStatuses = await homeIterator.current.next();
|
||||
if (allStatuses.value?.length) {
|
||||
// ENFORCE sort by datetime (Latest first)
|
||||
allStatuses.value.sort((a, b) => {
|
||||
const aDate = new Date(a.createdAt);
|
||||
const bDate = new Date(b.createdAt);
|
||||
return bDate - aDate;
|
||||
});
|
||||
const homeValues = allStatuses.value.map((status) => {
|
||||
saveStatus(status, instance);
|
||||
return {
|
||||
id: status.id,
|
||||
reblog: status.reblog?.id,
|
||||
reply: !!status.inReplyToAccountId,
|
||||
};
|
||||
});
|
||||
|
||||
// BOOSTS CAROUSEL
|
||||
if (snapStates.settings.boostsCarousel) {
|
||||
let specialHome = [];
|
||||
let boostStash = [];
|
||||
let serialBoosts = 0;
|
||||
for (let i = 0; i < homeValues.length; i++) {
|
||||
const status = homeValues[i];
|
||||
if (status.reblog) {
|
||||
boostStash.push(status);
|
||||
serialBoosts++;
|
||||
} else {
|
||||
specialHome.push(status);
|
||||
if (serialBoosts < 3) {
|
||||
serialBoosts = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// if boostStash is more than quarter of homeValues
|
||||
// or if there are 3 or more boosts in a row
|
||||
if (boostStash.length > homeValues.length / 4 || serialBoosts >= 3) {
|
||||
// if boostStash is more than 3 quarter of homeValues
|
||||
const boostStashID = boostStash.map((status) => status.id);
|
||||
if (boostStash.length > (homeValues.length * 3) / 4) {
|
||||
// insert boost array at the end of specialHome list
|
||||
specialHome = [
|
||||
...specialHome,
|
||||
{ id: boostStashID, boosts: boostStash },
|
||||
];
|
||||
} else {
|
||||
// insert boosts array in the middle of specialHome list
|
||||
const half = Math.floor(specialHome.length / 2);
|
||||
specialHome = [
|
||||
...specialHome.slice(0, half),
|
||||
{
|
||||
id: boostStashID,
|
||||
boosts: boostStash,
|
||||
},
|
||||
...specialHome.slice(half),
|
||||
];
|
||||
}
|
||||
} else {
|
||||
// Untouched, this is fine
|
||||
specialHome = homeValues;
|
||||
}
|
||||
console.log({
|
||||
specialHome,
|
||||
});
|
||||
if (firstLoad) {
|
||||
states.homeLast = specialHome[0];
|
||||
states.home = specialHome;
|
||||
} else {
|
||||
states.home.push(...specialHome);
|
||||
}
|
||||
} else {
|
||||
if (firstLoad) {
|
||||
states.homeLast = homeValues[0];
|
||||
states.home = homeValues;
|
||||
} else {
|
||||
states.home.push(...homeValues);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
states.homeLastFetchTime = Date.now();
|
||||
return allStatuses;
|
||||
}
|
||||
|
||||
const loadStatuses = useDebouncedCallback(
|
||||
(firstLoad) => {
|
||||
if (uiState === 'loading') return;
|
||||
setUIState('loading');
|
||||
(async () => {
|
||||
try {
|
||||
const { done } = await fetchStatuses(firstLoad);
|
||||
setShowMore(!done);
|
||||
setUIState('default');
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
setUIState('error');
|
||||
} finally {
|
||||
}
|
||||
})();
|
||||
},
|
||||
1500,
|
||||
{
|
||||
leading: true,
|
||||
trailing: false,
|
||||
},
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
loadStatuses(true);
|
||||
}, []);
|
||||
|
||||
const scrollableRef = useRef();
|
||||
|
||||
const jRef = useHotkeys('j, shift+j', (_, handler) => {
|
||||
// focus on next status after active status
|
||||
// Traverses .timeline li .status-link, focus on .status-link
|
||||
const activeStatus = document.activeElement.closest(
|
||||
'.status-link, .status-boost-link',
|
||||
);
|
||||
const activeStatusRect = activeStatus?.getBoundingClientRect();
|
||||
const allStatusLinks = Array.from(
|
||||
scrollableRef.current.querySelectorAll(
|
||||
'.status-link, .status-boost-link',
|
||||
),
|
||||
);
|
||||
if (
|
||||
activeStatus &&
|
||||
activeStatusRect.top < scrollableRef.current.clientHeight &&
|
||||
activeStatusRect.bottom > 0
|
||||
) {
|
||||
const activeStatusIndex = allStatusLinks.indexOf(activeStatus);
|
||||
let nextStatus = allStatusLinks[activeStatusIndex + 1];
|
||||
if (handler.shift) {
|
||||
// get next status that's not .status-boost-link
|
||||
nextStatus = allStatusLinks.find(
|
||||
(statusLink, index) =>
|
||||
index > activeStatusIndex &&
|
||||
!statusLink.classList.contains('status-boost-link'),
|
||||
);
|
||||
}
|
||||
if (nextStatus) {
|
||||
nextStatus.focus();
|
||||
nextStatus.scrollIntoViewIfNeeded?.();
|
||||
}
|
||||
} else {
|
||||
// If active status is not in viewport, get the topmost status-link in viewport
|
||||
const topmostStatusLink = allStatusLinks.find((statusLink) => {
|
||||
const statusLinkRect = statusLink.getBoundingClientRect();
|
||||
return statusLinkRect.top >= 44 && statusLinkRect.left >= 0; // 44 is the magic number for header height, not real
|
||||
});
|
||||
if (topmostStatusLink) {
|
||||
topmostStatusLink.focus();
|
||||
topmostStatusLink.scrollIntoViewIfNeeded?.();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const kRef = useHotkeys('k, shift+k', (_, handler) => {
|
||||
// focus on previous status after active status
|
||||
// Traverses .timeline li .status-link, focus on .status-link
|
||||
const activeStatus = document.activeElement.closest(
|
||||
'.status-link, .status-boost-link',
|
||||
);
|
||||
const activeStatusRect = activeStatus?.getBoundingClientRect();
|
||||
const allStatusLinks = Array.from(
|
||||
scrollableRef.current.querySelectorAll(
|
||||
'.status-link, .status-boost-link',
|
||||
),
|
||||
);
|
||||
if (
|
||||
activeStatus &&
|
||||
activeStatusRect.top < scrollableRef.current.clientHeight &&
|
||||
activeStatusRect.bottom > 0
|
||||
) {
|
||||
const activeStatusIndex = allStatusLinks.indexOf(activeStatus);
|
||||
let prevStatus = allStatusLinks[activeStatusIndex - 1];
|
||||
if (handler.shift) {
|
||||
// get prev status that's not .status-boost-link
|
||||
prevStatus = allStatusLinks.findLast(
|
||||
(statusLink, index) =>
|
||||
index < activeStatusIndex &&
|
||||
!statusLink.classList.contains('status-boost-link'),
|
||||
);
|
||||
}
|
||||
if (prevStatus) {
|
||||
prevStatus.focus();
|
||||
prevStatus.scrollIntoViewIfNeeded?.();
|
||||
}
|
||||
} else {
|
||||
// If active status is not in viewport, get the topmost status-link in viewport
|
||||
const topmostStatusLink = allStatusLinks.find((statusLink) => {
|
||||
const statusLinkRect = statusLink.getBoundingClientRect();
|
||||
return statusLinkRect.top >= 44 && statusLinkRect.left >= 0; // 44 is the magic number for header height, not real
|
||||
});
|
||||
if (topmostStatusLink) {
|
||||
topmostStatusLink.focus();
|
||||
topmostStatusLink.scrollIntoViewIfNeeded?.();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const oRef = useHotkeys(['enter', 'o'], () => {
|
||||
// open active status
|
||||
const activeStatus = document.activeElement.closest(
|
||||
'.status-link, .status-boost-link',
|
||||
);
|
||||
if (activeStatus) {
|
||||
activeStatus.click();
|
||||
}
|
||||
});
|
||||
|
||||
const {
|
||||
scrollDirection,
|
||||
reachStart,
|
||||
nearReachStart,
|
||||
nearReachEnd,
|
||||
reachEnd,
|
||||
} = useScroll({
|
||||
scrollableElement: scrollableRef.current,
|
||||
distanceFromEnd: 3,
|
||||
scrollThresholdStart: 44,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (nearReachEnd || (reachEnd && showMore)) {
|
||||
loadStatuses();
|
||||
}
|
||||
}, [nearReachEnd, reachEnd]);
|
||||
|
||||
useEffect(() => {
|
||||
if (reachStart) {
|
||||
loadStatuses(true);
|
||||
}
|
||||
}, [reachStart]);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const keys = await db.drafts.keys();
|
||||
if (keys.length) {
|
||||
const ns = getCurrentAccountNS();
|
||||
const ownKeys = keys.filter((key) => key.startsWith(ns));
|
||||
if (ownKeys.length) {
|
||||
states.showDrafts = true;
|
||||
}
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
// const showUpdatesButton = snapStates.homeNew.length > 0 && reachStart;
|
||||
const [showUpdatesButton, setShowUpdatesButton] = useState(false);
|
||||
useEffect(() => {
|
||||
const isNewAndTop = snapStates.homeNew.length > 0 && reachStart;
|
||||
console.log(
|
||||
'isNewAndTop',
|
||||
isNewAndTop,
|
||||
snapStates.homeNew.length,
|
||||
reachStart,
|
||||
);
|
||||
setShowUpdatesButton(isNewAndTop);
|
||||
}, [snapStates.homeNew.length, reachStart]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="home-page"
|
||||
class="deck-container"
|
||||
hidden={hidden}
|
||||
ref={(node) => {
|
||||
scrollableRef.current = node;
|
||||
jRef.current = node;
|
||||
kRef.current = node;
|
||||
oRef.current = node;
|
||||
}}
|
||||
tabIndex="-1"
|
||||
>
|
||||
<div class="timeline-deck deck">
|
||||
<header
|
||||
hidden={scrollDirection === 'end' && !nearReachStart}
|
||||
onClick={() => {
|
||||
scrollableRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
onDblClick={() => {
|
||||
loadStatuses(true);
|
||||
}}
|
||||
>
|
||||
<div class="header-grid">
|
||||
<div class="header-side">
|
||||
<button
|
||||
type="button"
|
||||
class="plain"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
states.showSettings = true;
|
||||
}}
|
||||
>
|
||||
<Icon icon="gear" size="l" alt="Settings" />
|
||||
</button>
|
||||
</div>
|
||||
<h1>Home</h1>
|
||||
<div class="header-side">
|
||||
<Loader hidden={uiState !== 'loading'} />{' '}
|
||||
<Link
|
||||
to="/notifications"
|
||||
class={`button plain ${
|
||||
snapStates.notificationsNew.length > 0 ? 'has-badge' : ''
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<Icon icon="notification" size="l" alt="Notifications" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{snapStates.homeNew.length > 0 &&
|
||||
uiState !== 'loading' &&
|
||||
((scrollDirection === 'start' &&
|
||||
!nearReachStart &&
|
||||
!nearReachEnd) ||
|
||||
showUpdatesButton) && (
|
||||
<button
|
||||
class="updates-button"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (!snapStates.settings.boostsCarousel) {
|
||||
const uniqueHomeNew = snapStates.homeNew.filter(
|
||||
(status) =>
|
||||
!states.home.some((s) => s.id === status.id),
|
||||
);
|
||||
states.home.unshift(...uniqueHomeNew);
|
||||
}
|
||||
loadStatuses(true);
|
||||
states.homeNew = [];
|
||||
|
||||
scrollableRef.current?.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Icon icon="arrow-up" /> New posts
|
||||
</button>
|
||||
)}
|
||||
</header>
|
||||
{snapStates.home.length ? (
|
||||
<>
|
||||
<ul class="timeline">
|
||||
{snapStates.home.map(({ id: statusID, reblog, boosts }) => {
|
||||
const actualStatusID = reblog || statusID;
|
||||
if (boosts) {
|
||||
return (
|
||||
<li key={statusID}>
|
||||
<BoostsCarousel boosts={boosts} />
|
||||
</li>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<li key={statusID}>
|
||||
<Link class="status-link" to={`/s/${actualStatusID}`}>
|
||||
<Status statusID={statusID} />
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
{showMore && uiState === 'loading' && (
|
||||
<>
|
||||
<li
|
||||
style={{
|
||||
height: '20vh',
|
||||
}}
|
||||
>
|
||||
<Status skeleton />
|
||||
</li>
|
||||
<li
|
||||
style={{
|
||||
height: '25vh',
|
||||
}}
|
||||
>
|
||||
<Status skeleton />
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
{uiState === 'default' &&
|
||||
(showMore ? (
|
||||
<button
|
||||
type="button"
|
||||
class="plain block"
|
||||
onClick={() => loadStatuses()}
|
||||
style={{ marginBlockEnd: '6em' }}
|
||||
>
|
||||
Show more…
|
||||
</button>
|
||||
) : (
|
||||
<p class="ui-state insignificant">The end.</p>
|
||||
))}
|
||||
</>
|
||||
) : uiState === 'loading' ? (
|
||||
<ul class="timeline">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<li key={i}>
|
||||
<Status skeleton />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
uiState !== 'error' && <p class="ui-state">Nothing to see here.</p>
|
||||
)}
|
||||
{uiState === 'error' && (
|
||||
<p class="ui-state">
|
||||
Unable to load statuses
|
||||
<br />
|
||||
<br />
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
loadStatuses(true);
|
||||
}}
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
hidden={scrollDirection === 'end' && !nearReachStart}
|
||||
type="button"
|
||||
id="compose-button"
|
||||
onClick={(e) => {
|
||||
if (e.shiftKey) {
|
||||
const newWin = openCompose();
|
||||
if (!newWin) {
|
||||
alert('Looks like your browser is blocking popups.');
|
||||
states.showCompose = true;
|
||||
}
|
||||
} else {
|
||||
states.showCompose = true;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon icon="quill" size="xxl" alt="Compose" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function BoostsCarousel({ boosts }) {
|
||||
const carouselRef = useRef();
|
||||
const { reachStart, reachEnd, init } = useScroll({
|
||||
scrollableElement: carouselRef.current,
|
||||
direction: 'horizontal',
|
||||
});
|
||||
useEffect(() => {
|
||||
init?.();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div class="boost-carousel">
|
||||
<header>
|
||||
<h3>{boosts.length} Boosts</h3>
|
||||
<span>
|
||||
<button
|
||||
type="button"
|
||||
class="small plain2"
|
||||
disabled={reachStart}
|
||||
onClick={() => {
|
||||
carouselRef.current?.scrollBy({
|
||||
left: -Math.min(320, carouselRef.current?.offsetWidth),
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Icon icon="chevron-left" />
|
||||
</button>{' '}
|
||||
<button
|
||||
type="button"
|
||||
class="small plain2"
|
||||
disabled={reachEnd}
|
||||
onClick={() => {
|
||||
carouselRef.current?.scrollBy({
|
||||
left: Math.min(320, carouselRef.current?.offsetWidth),
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Icon icon="chevron-right" />
|
||||
</button>
|
||||
</span>
|
||||
</header>
|
||||
<ul ref={carouselRef}>
|
||||
{boosts.map((boost) => {
|
||||
const { id: statusID, reblog } = boost;
|
||||
const actualStatusID = reblog || statusID;
|
||||
return (
|
||||
<li key={statusID}>
|
||||
<Link class="status-boost-link" to={`/s/${actualStatusID}`}>
|
||||
<Status statusID={statusID} size="s" />
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(Home);
|
|
@ -1,293 +1,18 @@
|
|||
import { memo } from 'preact/compat';
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { useDebouncedCallback } from 'use-debounce';
|
||||
import { useEffect } from 'preact/hooks';
|
||||
import { useSnapshot } from 'valtio';
|
||||
|
||||
import Columns from '../components/columns';
|
||||
import Icon from '../components/icon';
|
||||
import Link from '../components/link';
|
||||
import Loader from '../components/loader';
|
||||
import Status from '../components/status';
|
||||
import db from '../utils/db';
|
||||
import states, { saveStatus } from '../utils/states';
|
||||
import openCompose from '../utils/open-compose';
|
||||
import states from '../utils/states';
|
||||
import { getCurrentAccountNS } from '../utils/store-utils';
|
||||
import useScroll from '../utils/useScroll';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
||||
const LIMIT = 20;
|
||||
import Following from './following';
|
||||
|
||||
function Home({ hidden }) {
|
||||
useTitle('Home', '/');
|
||||
function Home() {
|
||||
const snapStates = useSnapshot(states);
|
||||
const isHomeLocation = snapStates.currentLocation === '/';
|
||||
const [uiState, setUIState] = useState('default');
|
||||
const [showMore, setShowMore] = useState(false);
|
||||
|
||||
console.debug('RENDER Home');
|
||||
|
||||
const homeIterator = useRef();
|
||||
async function fetchStatuses(firstLoad) {
|
||||
if (firstLoad) {
|
||||
// Reset iterator
|
||||
homeIterator.current = masto.v1.timelines.listHome({
|
||||
limit: LIMIT,
|
||||
});
|
||||
states.homeNew = [];
|
||||
}
|
||||
const allStatuses = await homeIterator.current.next();
|
||||
if (allStatuses.value?.length) {
|
||||
// ENFORCE sort by datetime (Latest first)
|
||||
allStatuses.value.sort((a, b) => {
|
||||
const aDate = new Date(a.createdAt);
|
||||
const bDate = new Date(b.createdAt);
|
||||
return bDate - aDate;
|
||||
});
|
||||
const homeValues = allStatuses.value.map((status) => {
|
||||
saveStatus(status);
|
||||
return {
|
||||
id: status.id,
|
||||
reblog: status.reblog?.id,
|
||||
reply: !!status.inReplyToAccountId,
|
||||
};
|
||||
});
|
||||
|
||||
// BOOSTS CAROUSEL
|
||||
if (snapStates.settings.boostsCarousel) {
|
||||
let specialHome = [];
|
||||
let boostStash = [];
|
||||
let serialBoosts = 0;
|
||||
for (let i = 0; i < homeValues.length; i++) {
|
||||
const status = homeValues[i];
|
||||
if (status.reblog) {
|
||||
boostStash.push(status);
|
||||
serialBoosts++;
|
||||
} else {
|
||||
specialHome.push(status);
|
||||
if (serialBoosts < 3) {
|
||||
serialBoosts = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// if boostStash is more than quarter of homeValues
|
||||
// or if there are 3 or more boosts in a row
|
||||
if (boostStash.length > homeValues.length / 4 || serialBoosts >= 3) {
|
||||
// if boostStash is more than 3 quarter of homeValues
|
||||
const boostStashID = boostStash.map((status) => status.id);
|
||||
if (boostStash.length > (homeValues.length * 3) / 4) {
|
||||
// insert boost array at the end of specialHome list
|
||||
specialHome = [
|
||||
...specialHome,
|
||||
{ id: boostStashID, boosts: boostStash },
|
||||
];
|
||||
} else {
|
||||
// insert boosts array in the middle of specialHome list
|
||||
const half = Math.floor(specialHome.length / 2);
|
||||
specialHome = [
|
||||
...specialHome.slice(0, half),
|
||||
{
|
||||
id: boostStashID,
|
||||
boosts: boostStash,
|
||||
},
|
||||
...specialHome.slice(half),
|
||||
];
|
||||
}
|
||||
} else {
|
||||
// Untouched, this is fine
|
||||
specialHome = homeValues;
|
||||
}
|
||||
console.log({
|
||||
specialHome,
|
||||
});
|
||||
if (firstLoad) {
|
||||
states.homeLast = specialHome[0];
|
||||
states.home = specialHome;
|
||||
} else {
|
||||
states.home.push(...specialHome);
|
||||
}
|
||||
} else {
|
||||
if (firstLoad) {
|
||||
states.homeLast = homeValues[0];
|
||||
states.home = homeValues;
|
||||
} else {
|
||||
states.home.push(...homeValues);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
states.homeLastFetchTime = Date.now();
|
||||
return allStatuses;
|
||||
}
|
||||
|
||||
const loadingStatuses = useRef(false);
|
||||
const loadStatuses = useDebouncedCallback(
|
||||
(firstLoad) => {
|
||||
if (loadingStatuses.current) return;
|
||||
loadingStatuses.current = true;
|
||||
setUIState('loading');
|
||||
(async () => {
|
||||
try {
|
||||
const { done } = await fetchStatuses(firstLoad);
|
||||
setShowMore(!done);
|
||||
setUIState('default');
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
setUIState('error');
|
||||
} finally {
|
||||
loadingStatuses.current = false;
|
||||
}
|
||||
})();
|
||||
},
|
||||
3000,
|
||||
{ leading: true, trailing: false },
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
loadStatuses(true);
|
||||
}, []);
|
||||
|
||||
const scrollableRef = useRef();
|
||||
|
||||
useHotkeys(
|
||||
'j, shift+j',
|
||||
(_, handler) => {
|
||||
// focus on next status after active status
|
||||
// Traverses .timeline li .status-link, focus on .status-link
|
||||
const activeStatus = document.activeElement.closest(
|
||||
'.status-link, .status-boost-link',
|
||||
);
|
||||
const activeStatusRect = activeStatus?.getBoundingClientRect();
|
||||
const allStatusLinks = Array.from(
|
||||
scrollableRef.current.querySelectorAll(
|
||||
'.status-link, .status-boost-link',
|
||||
),
|
||||
);
|
||||
if (
|
||||
activeStatus &&
|
||||
activeStatusRect.top < scrollableRef.current.clientHeight &&
|
||||
activeStatusRect.bottom > 0
|
||||
) {
|
||||
const activeStatusIndex = allStatusLinks.indexOf(activeStatus);
|
||||
let nextStatus = allStatusLinks[activeStatusIndex + 1];
|
||||
if (handler.shift) {
|
||||
// get next status that's not .status-boost-link
|
||||
nextStatus = allStatusLinks.find(
|
||||
(statusLink, index) =>
|
||||
index > activeStatusIndex &&
|
||||
!statusLink.classList.contains('status-boost-link'),
|
||||
);
|
||||
}
|
||||
if (nextStatus) {
|
||||
nextStatus.focus();
|
||||
nextStatus.scrollIntoViewIfNeeded?.();
|
||||
}
|
||||
} else {
|
||||
// If active status is not in viewport, get the topmost status-link in viewport
|
||||
const topmostStatusLink = allStatusLinks.find((statusLink) => {
|
||||
const statusLinkRect = statusLink.getBoundingClientRect();
|
||||
return statusLinkRect.top >= 44 && statusLinkRect.left >= 0; // 44 is the magic number for header height, not real
|
||||
});
|
||||
if (topmostStatusLink) {
|
||||
topmostStatusLink.focus();
|
||||
topmostStatusLink.scrollIntoViewIfNeeded?.();
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
enabled: isHomeLocation,
|
||||
},
|
||||
);
|
||||
|
||||
useHotkeys(
|
||||
'k, shift+k',
|
||||
(_, handler) => {
|
||||
// focus on previous status after active status
|
||||
// Traverses .timeline li .status-link, focus on .status-link
|
||||
const activeStatus = document.activeElement.closest(
|
||||
'.status-link, .status-boost-link',
|
||||
);
|
||||
const activeStatusRect = activeStatus?.getBoundingClientRect();
|
||||
const allStatusLinks = Array.from(
|
||||
scrollableRef.current.querySelectorAll(
|
||||
'.status-link, .status-boost-link',
|
||||
),
|
||||
);
|
||||
if (
|
||||
activeStatus &&
|
||||
activeStatusRect.top < scrollableRef.current.clientHeight &&
|
||||
activeStatusRect.bottom > 0
|
||||
) {
|
||||
const activeStatusIndex = allStatusLinks.indexOf(activeStatus);
|
||||
let prevStatus = allStatusLinks[activeStatusIndex - 1];
|
||||
if (handler.shift) {
|
||||
// get prev status that's not .status-boost-link
|
||||
prevStatus = allStatusLinks.findLast(
|
||||
(statusLink, index) =>
|
||||
index < activeStatusIndex &&
|
||||
!statusLink.classList.contains('status-boost-link'),
|
||||
);
|
||||
}
|
||||
if (prevStatus) {
|
||||
prevStatus.focus();
|
||||
prevStatus.scrollIntoViewIfNeeded?.();
|
||||
}
|
||||
} else {
|
||||
// If active status is not in viewport, get the topmost status-link in viewport
|
||||
const topmostStatusLink = allStatusLinks.find((statusLink) => {
|
||||
const statusLinkRect = statusLink.getBoundingClientRect();
|
||||
return statusLinkRect.top >= 44 && statusLinkRect.left >= 0; // 44 is the magic number for header height, not real
|
||||
});
|
||||
if (topmostStatusLink) {
|
||||
topmostStatusLink.focus();
|
||||
topmostStatusLink.scrollIntoViewIfNeeded?.();
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
enabled: isHomeLocation,
|
||||
},
|
||||
);
|
||||
|
||||
useHotkeys(
|
||||
['enter', 'o'],
|
||||
() => {
|
||||
// open active status
|
||||
const activeStatus = document.activeElement.closest(
|
||||
'.status-link, .status-boost-link',
|
||||
);
|
||||
if (activeStatus) {
|
||||
activeStatus.click();
|
||||
}
|
||||
},
|
||||
{
|
||||
enabled: isHomeLocation,
|
||||
},
|
||||
);
|
||||
|
||||
const {
|
||||
scrollDirection,
|
||||
reachStart,
|
||||
nearReachStart,
|
||||
nearReachEnd,
|
||||
reachEnd,
|
||||
} = useScroll({
|
||||
scrollableElement: scrollableRef.current,
|
||||
distanceFromStart: 1,
|
||||
distanceFromEnd: 3,
|
||||
scrollThresholdStart: 44,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (nearReachEnd || (reachEnd && showMore)) {
|
||||
loadStatuses();
|
||||
}
|
||||
}, [nearReachEnd, reachEnd]);
|
||||
|
||||
useEffect(() => {
|
||||
if (reachStart) {
|
||||
loadStatuses(true);
|
||||
}
|
||||
}, [reachStart]);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const keys = await db.drafts.keys();
|
||||
|
@ -301,52 +26,21 @@ function Home({ hidden }) {
|
|||
})();
|
||||
}, []);
|
||||
|
||||
// const showUpdatesButton = snapStates.homeNew.length > 0 && reachStart;
|
||||
const [showUpdatesButton, setShowUpdatesButton] = useState(false);
|
||||
useEffect(() => {
|
||||
const isNewAndTop = snapStates.homeNew.length > 0 && reachStart;
|
||||
setShowUpdatesButton(isNewAndTop);
|
||||
}, [snapStates.homeNew.length]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="home-page"
|
||||
class="deck-container"
|
||||
hidden={hidden}
|
||||
ref={scrollableRef}
|
||||
tabIndex="-1"
|
||||
>
|
||||
<div class="timeline-deck deck">
|
||||
<header
|
||||
hidden={scrollDirection === 'end' && !nearReachStart}
|
||||
onClick={() => {
|
||||
scrollableRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
onDblClick={() => {
|
||||
loadStatuses(true);
|
||||
}}
|
||||
>
|
||||
<div class="header-side">
|
||||
<button
|
||||
type="button"
|
||||
class="plain"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
states.showSettings = true;
|
||||
}}
|
||||
>
|
||||
<Icon icon="gear" size="l" alt="Settings" />
|
||||
</button>
|
||||
</div>
|
||||
<h1>Home</h1>
|
||||
<div class="header-side">
|
||||
<Loader hidden={uiState !== 'loading'} />{' '}
|
||||
{snapStates.settings.shortcutsColumnsMode ? (
|
||||
<Columns />
|
||||
) : (
|
||||
<Following
|
||||
title="Home"
|
||||
path="/"
|
||||
id="home"
|
||||
headerStart={false}
|
||||
headerEnd={
|
||||
<Link
|
||||
to="/notifications"
|
||||
class={`button plain ${
|
||||
snapStates.notificationsNew.length > 0 ? 'has-badge' : ''
|
||||
snapStates.notificationsShowNew ? 'has-badge' : ''
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
@ -354,108 +48,11 @@ function Home({ hidden }) {
|
|||
>
|
||||
<Icon icon="notification" size="l" alt="Notifications" />
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
{snapStates.homeNew.length > 0 &&
|
||||
uiState !== 'loading' &&
|
||||
((scrollDirection === 'start' &&
|
||||
!nearReachStart &&
|
||||
!nearReachEnd) ||
|
||||
showUpdatesButton) && (
|
||||
<button
|
||||
class="updates-button"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (!snapStates.settings.boostsCarousel) {
|
||||
const uniqueHomeNew = snapStates.homeNew.filter(
|
||||
(status) => !states.home.some((s) => s.id === status.id),
|
||||
);
|
||||
states.home.unshift(...uniqueHomeNew);
|
||||
}
|
||||
loadStatuses(true);
|
||||
states.homeNew = [];
|
||||
|
||||
scrollableRef.current?.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Icon icon="arrow-up" /> New posts
|
||||
</button>
|
||||
/>
|
||||
)}
|
||||
{snapStates.home.length ? (
|
||||
<>
|
||||
<ul class="timeline">
|
||||
{snapStates.home.map(({ id: statusID, reblog, boosts }) => {
|
||||
const actualStatusID = reblog || statusID;
|
||||
if (boosts) {
|
||||
return (
|
||||
<li key={statusID}>
|
||||
<BoostsCarousel boosts={boosts} />
|
||||
</li>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<li key={statusID}>
|
||||
<Link class="status-link" to={`/s/${actualStatusID}`}>
|
||||
<Status statusID={statusID} />
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
{showMore && (
|
||||
<>
|
||||
<li
|
||||
style={{
|
||||
height: '20vh',
|
||||
}}
|
||||
>
|
||||
<Status skeleton />
|
||||
</li>
|
||||
<li
|
||||
style={{
|
||||
height: '25vh',
|
||||
}}
|
||||
>
|
||||
<Status skeleton />
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{uiState === 'loading' && (
|
||||
<ul class="timeline">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<li key={i}>
|
||||
<Status skeleton />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{uiState === 'error' && (
|
||||
<p class="ui-state">
|
||||
Unable to load statuses
|
||||
<br />
|
||||
<br />
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
loadStatuses(true);
|
||||
}}
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
hidden={scrollDirection === 'end' && !nearReachStart}
|
||||
// hidden={scrollDirection === 'end' && !nearReachStart}
|
||||
type="button"
|
||||
id="compose-button"
|
||||
onClick={(e) => {
|
||||
|
@ -470,70 +67,10 @@ function Home({ hidden }) {
|
|||
}
|
||||
}}
|
||||
>
|
||||
<Icon icon="quill" size="xxl" alt="Compose" />
|
||||
<Icon icon="quill" size="xl" alt="Compose" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function BoostsCarousel({ boosts }) {
|
||||
const carouselRef = useRef();
|
||||
const { reachStart, reachEnd, init } = useScroll({
|
||||
scrollableElement: carouselRef.current,
|
||||
direction: 'horizontal',
|
||||
});
|
||||
useEffect(() => {
|
||||
init?.();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div class="boost-carousel">
|
||||
<header>
|
||||
<h3>{boosts.length} Boosts</h3>
|
||||
<span>
|
||||
<button
|
||||
type="button"
|
||||
class="small plain2"
|
||||
disabled={reachStart}
|
||||
onClick={() => {
|
||||
carouselRef.current?.scrollBy({
|
||||
left: -Math.min(320, carouselRef.current?.offsetWidth),
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Icon icon="chevron-left" />
|
||||
</button>{' '}
|
||||
<button
|
||||
type="button"
|
||||
class="small plain2"
|
||||
disabled={reachEnd}
|
||||
onClick={() => {
|
||||
carouselRef.current?.scrollBy({
|
||||
left: Math.min(320, carouselRef.current?.offsetWidth),
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Icon icon="chevron-right" />
|
||||
</button>
|
||||
</span>
|
||||
</header>
|
||||
<ul ref={carouselRef}>
|
||||
{boosts.map((boost) => {
|
||||
const { id: statusID, reblog } = boost;
|
||||
const actualStatusID = reblog || statusID;
|
||||
return (
|
||||
<li key={statusID}>
|
||||
<Link class="status-boost-link" to={`/s/${actualStatusID}`}>
|
||||
<Status statusID={statusID} size="s" />
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(Home);
|
||||
export default Home;
|
||||
|
|
82
src/pages/list.jsx
Normal file
82
src/pages/list.jsx
Normal file
|
@ -0,0 +1,82 @@
|
|||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
import Icon from '../components/icon';
|
||||
import Link from '../components/link';
|
||||
import Timeline from '../components/timeline';
|
||||
import { api } from '../utils/api';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
||||
const LIMIT = 20;
|
||||
|
||||
function List(props) {
|
||||
const { masto, instance } = api();
|
||||
const id = props?.id || useParams()?.id;
|
||||
const latestItem = useRef();
|
||||
|
||||
const listIterator = useRef();
|
||||
async function fetchList(firstLoad) {
|
||||
if (firstLoad || !listIterator.current) {
|
||||
listIterator.current = masto.v1.timelines.listList(id, {
|
||||
limit: LIMIT,
|
||||
});
|
||||
}
|
||||
const results = await listIterator.current.next();
|
||||
const { value } = results;
|
||||
if (value?.length) {
|
||||
if (firstLoad) {
|
||||
latestItem.current = value[0].id;
|
||||
}
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
async function checkForUpdates() {
|
||||
try {
|
||||
const results = await masto.v1.timelines.listList(id, {
|
||||
limit: 1,
|
||||
since_id: latestItem.current,
|
||||
});
|
||||
const { value } = results;
|
||||
if (value?.length) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const [title, setTitle] = useState(`List`);
|
||||
useTitle(title, `/l/:id`);
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const list = await masto.v1.lists.fetch(id);
|
||||
setTitle(list.title);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
})();
|
||||
}, [id]);
|
||||
|
||||
return (
|
||||
<Timeline
|
||||
title={title}
|
||||
id="list"
|
||||
emptyText="Nothing yet."
|
||||
errorText="Unable to load posts."
|
||||
instance={instance}
|
||||
fetchItems={fetchList}
|
||||
checkForUpdates={checkForUpdates}
|
||||
boostsCarousel
|
||||
headerStart={
|
||||
<Link to="/l" class="button plain">
|
||||
<Icon icon="list" size="l" />
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default List;
|
|
@ -1,42 +1,71 @@
|
|||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useEffect, useState } from 'preact/hooks';
|
||||
|
||||
import Timeline from '../components/timeline';
|
||||
|
||||
const LIMIT = 20;
|
||||
import Icon from '../components/icon';
|
||||
import Link from '../components/link';
|
||||
import Loader from '../components/loader';
|
||||
import Menu from '../components/menu';
|
||||
import { api } from '../utils/api';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
||||
function Lists() {
|
||||
const { id } = useParams();
|
||||
const listsIterator = useRef();
|
||||
async function fetchLists(firstLoad) {
|
||||
if (firstLoad || !listsIterator.current) {
|
||||
listsIterator.current = masto.v1.timelines.listList(id, {
|
||||
limit: LIMIT,
|
||||
});
|
||||
}
|
||||
return await listsIterator.current.next();
|
||||
}
|
||||
const { masto } = api();
|
||||
useTitle(`Lists`, `/l`);
|
||||
const [uiState, setUiState] = useState('default');
|
||||
|
||||
const [title, setTitle] = useState(`List ${id}`);
|
||||
const [lists, setLists] = useState([]);
|
||||
useEffect(() => {
|
||||
setUiState('loading');
|
||||
(async () => {
|
||||
try {
|
||||
const list = await masto.v1.lists.fetch(id);
|
||||
setTitle(list.title);
|
||||
const lists = await masto.v1.lists.list();
|
||||
console.log(lists);
|
||||
setLists(lists);
|
||||
setUiState('default');
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setUiState('error');
|
||||
}
|
||||
})();
|
||||
}, [id]);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Timeline
|
||||
title={title}
|
||||
id="lists"
|
||||
emptyText="Nothing yet."
|
||||
errorText="Unable to load posts."
|
||||
fetchItems={fetchLists}
|
||||
/>
|
||||
<div id="lists-page" class="deck-container">
|
||||
<div class="timeline-deck deck">
|
||||
<header>
|
||||
<div class="header-grid">
|
||||
<div class="header-side">
|
||||
<Menu />
|
||||
<Link to="/" class="button plain">
|
||||
<Icon icon="home" size="l" />
|
||||
</Link>
|
||||
</div>
|
||||
<h1>Lists</h1>
|
||||
<div class="header-side" />
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
{lists.length > 0 ? (
|
||||
<ul class="link-list">
|
||||
{lists.map((list) => (
|
||||
<li>
|
||||
<Link to={`/l/${list.id}`}>
|
||||
<Icon icon="list" /> <span>{list.title}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : uiState === 'loading' ? (
|
||||
<p class="ui-state">
|
||||
<Loader />
|
||||
</p>
|
||||
) : uiState === 'error' ? (
|
||||
<p class="ui-state">Unable to load lists.</p>
|
||||
) : (
|
||||
<p class="ui-state">No lists yet.</p>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -40,7 +40,9 @@ function Login() {
|
|||
const { elements } = e.target;
|
||||
let instanceURL = elements.instanceURL.value.toLowerCase();
|
||||
// Remove protocol from instance URL
|
||||
instanceURL = instanceURL.replace(/(^\w+:|^)\/\//, '');
|
||||
instanceURL = instanceURL.replace(/^https?:\/\//, '').replace(/\/+$/, '');
|
||||
// Remove @acct@ or acct@ from instance URL
|
||||
instanceURL = instanceURL.replace(/^@?[^@]+@/, '');
|
||||
store.local.set('instanceURL', instanceURL);
|
||||
|
||||
(async () => {
|
||||
|
|
|
@ -8,9 +8,11 @@ import Avatar from '../components/avatar';
|
|||
import Icon from '../components/icon';
|
||||
import Link from '../components/link';
|
||||
import Loader from '../components/loader';
|
||||
import Menu from '../components/menu';
|
||||
import NameText from '../components/name-text';
|
||||
import RelativeTime from '../components/relative-time';
|
||||
import Status from '../components/status';
|
||||
import { api } from '../utils/api';
|
||||
import states, { saveStatus } from '../utils/states';
|
||||
import store from '../utils/store';
|
||||
import useScroll from '../utils/useScroll';
|
||||
|
@ -48,45 +50,50 @@ const LIMIT = 30; // 30 is the maximum limit :(
|
|||
|
||||
function Notifications() {
|
||||
useTitle('Notifications', '/notifications');
|
||||
const { masto, instance } = api();
|
||||
const snapStates = useSnapshot(states);
|
||||
const [uiState, setUIState] = useState('default');
|
||||
const [showMore, setShowMore] = useState(false);
|
||||
const [onlyMentions, setOnlyMentions] = useState(false);
|
||||
const scrollableRef = useRef();
|
||||
const { nearReachEnd, reachStart } = useScroll({
|
||||
const { nearReachEnd, scrollDirection, reachStart, nearReachStart } =
|
||||
useScroll({
|
||||
scrollableElement: scrollableRef.current,
|
||||
});
|
||||
const hiddenUI = scrollDirection === 'end' && !nearReachStart;
|
||||
|
||||
console.debug('RENDER Notifications');
|
||||
|
||||
const notificationsIterator = useRef();
|
||||
async function fetchNotifications(firstLoad) {
|
||||
if (firstLoad) {
|
||||
if (firstLoad || !notificationsIterator.current) {
|
||||
// Reset iterator
|
||||
notificationsIterator.current = masto.v1.notifications.list({
|
||||
limit: LIMIT,
|
||||
});
|
||||
states.notificationsNew = [];
|
||||
}
|
||||
const allNotifications = await notificationsIterator.current.next();
|
||||
if (allNotifications.value?.length) {
|
||||
const notificationsValues = allNotifications.value.map((notification) => {
|
||||
const notifications = allNotifications.value;
|
||||
|
||||
if (notifications?.length) {
|
||||
notifications.forEach((notification) => {
|
||||
saveStatus(notification.status, {
|
||||
skipThreading: true,
|
||||
override: false,
|
||||
});
|
||||
return notification;
|
||||
});
|
||||
|
||||
const groupedNotifications = groupNotifications(notificationsValues);
|
||||
const groupedNotifications = groupNotifications(notifications);
|
||||
|
||||
if (firstLoad) {
|
||||
states.notificationLast = notificationsValues[0];
|
||||
states.notificationsLast = notifications[0];
|
||||
states.notifications = groupedNotifications;
|
||||
} else {
|
||||
states.notifications.push(...groupedNotifications);
|
||||
}
|
||||
}
|
||||
|
||||
states.notificationsShowNew = false;
|
||||
states.notificationsLastFetchTime = Date.now();
|
||||
return allNotifications;
|
||||
}
|
||||
|
@ -137,11 +144,16 @@ function Notifications() {
|
|||
>
|
||||
<div class={`timeline-deck deck ${onlyMentions ? 'only-mentions' : ''}`}>
|
||||
<header
|
||||
onClick={() => {
|
||||
hidden={hiddenUI}
|
||||
onClick={(e) => {
|
||||
if (!e.target.closest('a, button')) {
|
||||
scrollableRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="header-grid">
|
||||
<div class="header-side">
|
||||
<Menu />
|
||||
<Link to="/" class="button plain">
|
||||
<Icon icon="home" size="l" />
|
||||
</Link>
|
||||
|
@ -150,15 +162,13 @@ function Notifications() {
|
|||
<div class="header-side">
|
||||
<Loader hidden={uiState !== 'loading'} />
|
||||
</div>
|
||||
</header>
|
||||
{snapStates.notificationsNew.length > 0 && uiState !== 'loading' && (
|
||||
</div>
|
||||
{snapStates.notificationsShowNew && uiState !== 'loading' && (
|
||||
<button
|
||||
class="updates-button"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
loadNotifications(true);
|
||||
states.notificationsNew = [];
|
||||
|
||||
scrollableRef.current?.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth',
|
||||
|
@ -168,6 +178,7 @@ function Notifications() {
|
|||
<Icon icon="arrow-up" /> New notifications
|
||||
</button>
|
||||
)}
|
||||
</header>
|
||||
<div id="mentions-option">
|
||||
<label>
|
||||
<input
|
||||
|
@ -216,6 +227,7 @@ function Notifications() {
|
|||
<>
|
||||
{differentDay && <h2 class="timeline-header">{heading}</h2>}
|
||||
<Notification
|
||||
instance={instance}
|
||||
notification={notification}
|
||||
key={notification.id}
|
||||
/>
|
||||
|
@ -268,7 +280,7 @@ function Notifications() {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
function Notification({ notification }) {
|
||||
function Notification({ notification, instance }) {
|
||||
const { id, type, status, account, _accounts } = notification;
|
||||
|
||||
// status = Attached when type of the notification is favourite, reblog, status, mention, poll, or update
|
||||
|
@ -381,7 +393,11 @@ function Notification({ notification }) {
|
|||
{status && (
|
||||
<Link
|
||||
class={`status-link status-type-${type}`}
|
||||
to={`/s/${actualStatusID}`}
|
||||
to={
|
||||
instance
|
||||
? `/${instance}/s/${actualStatusID}`
|
||||
: `/s/${actualStatusID}`
|
||||
}
|
||||
>
|
||||
<Status status={status} size="s" />
|
||||
</Link>
|
||||
|
@ -392,6 +408,7 @@ function Notification({ notification }) {
|
|||
}
|
||||
|
||||
function FollowRequestButtons({ accountID, onChange }) {
|
||||
const { masto } = api();
|
||||
const [uiState, setUIState] = useState('default');
|
||||
return (
|
||||
<p>
|
||||
|
@ -449,7 +466,9 @@ function groupNotifications(notifications) {
|
|||
const date = new Date(createdAt).toLocaleDateString();
|
||||
const key = `${status?.id}-${type}-${date}`;
|
||||
const mappedNotification = notificationsMap[key];
|
||||
if (mappedNotification?.account) {
|
||||
if (type === 'follow_request') {
|
||||
cleanNotifications[j++] = notification;
|
||||
} else if (mappedNotification?.account) {
|
||||
mappedNotification._accounts.push(account);
|
||||
} else {
|
||||
let n = (notificationsMap[key] = {
|
||||
|
|
|
@ -1,76 +1,101 @@
|
|||
// EXPERIMENTAL: This is a work in progress and may not work as expected.
|
||||
import { useMatch, useParams } from 'react-router-dom';
|
||||
import { useRef } from 'preact/hooks';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
import Icon from '../components/icon';
|
||||
import Timeline from '../components/timeline';
|
||||
import { api } from '../utils/api';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
||||
const LIMIT = 20;
|
||||
|
||||
let nextUrl = null;
|
||||
|
||||
function Public() {
|
||||
const isLocal = !!useMatch('/p/l/:instance');
|
||||
function Public({ local, ...props }) {
|
||||
const isLocal = !!local;
|
||||
const params = useParams();
|
||||
const { instance = '' } = params;
|
||||
async function fetchPublic(firstLoad) {
|
||||
const url = firstLoad
|
||||
? `https://${instance}/api/v1/timelines/public?limit=${LIMIT}&local=${isLocal}`
|
||||
: nextUrl;
|
||||
if (!url) return { values: [], done: true };
|
||||
const response = await fetch(url);
|
||||
let value = await response.json();
|
||||
if (value) {
|
||||
value = camelCaseKeys(value);
|
||||
}
|
||||
const done = !response.headers.has('link');
|
||||
nextUrl = done
|
||||
? null
|
||||
: response.headers.get('link').match(/<(.+?)>; rel="next"/)?.[1];
|
||||
console.debug({
|
||||
url,
|
||||
value,
|
||||
done,
|
||||
nextUrl,
|
||||
const { masto, instance } = api({
|
||||
instance: props?.instance || params.instance,
|
||||
});
|
||||
return { value, done };
|
||||
const title = `${isLocal ? 'Local' : 'Federated'} timeline (${instance})`;
|
||||
useTitle(title, isLocal ? `/:instance?/p/l` : `/:instance?/p`);
|
||||
const navigate = useNavigate();
|
||||
const latestItem = useRef();
|
||||
|
||||
const publicIterator = useRef();
|
||||
async function fetchPublic(firstLoad) {
|
||||
if (firstLoad || !publicIterator.current) {
|
||||
publicIterator.current = masto.v1.timelines.listPublic({
|
||||
limit: LIMIT,
|
||||
local: isLocal,
|
||||
});
|
||||
}
|
||||
const results = await publicIterator.current.next();
|
||||
const { value } = results;
|
||||
if (value?.length) {
|
||||
if (firstLoad) {
|
||||
latestItem.current = value[0].id;
|
||||
}
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
async function checkForUpdates() {
|
||||
try {
|
||||
const results = await masto.v1.timelines
|
||||
.listPublic({
|
||||
limit: 1,
|
||||
local: isLocal,
|
||||
since_id: latestItem.current,
|
||||
})
|
||||
.next();
|
||||
const { value } = results;
|
||||
if (value?.length) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Timeline
|
||||
key={instance + isLocal}
|
||||
title={`${instance} (${isLocal ? 'local' : 'federated'})`}
|
||||
title={title}
|
||||
titleComponent={
|
||||
<h1 class="header-account">
|
||||
<b>{isLocal ? 'Local timeline' : 'Federated timeline'}</b>
|
||||
<div>{instance}</div>
|
||||
</h1>
|
||||
}
|
||||
id="public"
|
||||
instance={instance}
|
||||
emptyText="No one has posted anything yet."
|
||||
errorText="Unable to load posts"
|
||||
fetchItems={fetchPublic}
|
||||
checkForUpdates={checkForUpdates}
|
||||
headerStart={<></>}
|
||||
headerEnd={
|
||||
<button
|
||||
type="button"
|
||||
class="plain"
|
||||
onClick={() => {
|
||||
const newInstance = prompt(
|
||||
'Enter a new instance e.g. "mastodon.social"',
|
||||
);
|
||||
if (!/\./.test(newInstance)) {
|
||||
if (newInstance) alert('Invalid instance');
|
||||
return;
|
||||
}
|
||||
if (newInstance) {
|
||||
navigate(isLocal ? `/${newInstance}/p/l` : `/${newInstance}/p`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon icon="transfer" alt="Switch instance" />
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function camelCaseKeys(obj) {
|
||||
if (Array.isArray(obj)) {
|
||||
return obj.map((item) => camelCaseKeys(item));
|
||||
}
|
||||
return new Proxy(obj, {
|
||||
get(target, prop) {
|
||||
let value = undefined;
|
||||
if (prop in target) {
|
||||
value = target[prop];
|
||||
}
|
||||
if (!value) {
|
||||
const snakeCaseProp = prop.replace(
|
||||
/([A-Z])/g,
|
||||
(g) => `_${g.toLowerCase()}`,
|
||||
);
|
||||
if (snakeCaseProp in target) {
|
||||
value = target[snakeCaseProp];
|
||||
}
|
||||
}
|
||||
if (value && typeof value === 'object') {
|
||||
return camelCaseKeys(value);
|
||||
}
|
||||
return value;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export default Public;
|
||||
|
|
45
src/pages/search.css
Normal file
45
src/pages/search.css
Normal file
|
@ -0,0 +1,45 @@
|
|||
#search-page .deck > header .header-grid {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
#search-page header input {
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background-color: var(--bg-faded-color);
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
#search-page header input:focus {
|
||||
outline: 0;
|
||||
background-color: var(--bg-color);
|
||||
border-color: var(--link-color);
|
||||
}
|
||||
|
||||
#search-page ul.accounts-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#search-page ul.accounts-list li {
|
||||
flex-basis: 320px;
|
||||
display: flex;
|
||||
padding: 8px 16px;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
ul.link-list.hashtag-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
ul.link-list.hashtag-list li a {
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
@media (min-width: 40em) {
|
||||
#search-page header input {
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
}
|
158
src/pages/search.jsx
Normal file
158
src/pages/search.jsx
Normal file
|
@ -0,0 +1,158 @@
|
|||
import './search.css';
|
||||
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { useParams, useSearchParams } from 'react-router-dom';
|
||||
|
||||
import AccountBlock from '../components/account-block';
|
||||
import Icon from '../components/icon';
|
||||
import Link from '../components/link';
|
||||
import Loader from '../components/loader';
|
||||
import Menu from '../components/menu';
|
||||
import Status from '../components/status';
|
||||
import { api } from '../utils/api';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
||||
function Search(props) {
|
||||
const params = useParams();
|
||||
const { masto, instance, authenticated } = api({
|
||||
instance: params.instance,
|
||||
});
|
||||
const [uiState, setUiState] = useState('default');
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const searchFieldRef = useRef();
|
||||
const q = props?.query || searchParams.get('q');
|
||||
useTitle(q ? `Search: ${q}` : 'Search', `/search`);
|
||||
|
||||
const [statusResults, setStatusResults] = useState([]);
|
||||
const [accountResults, setAccountResults] = useState([]);
|
||||
const [hashtagResults, setHashtagResults] = useState([]);
|
||||
useEffect(() => {
|
||||
searchFieldRef.current?.focus?.();
|
||||
if (q) {
|
||||
searchFieldRef.current.value = q;
|
||||
|
||||
setUiState('loading');
|
||||
(async () => {
|
||||
const results = await masto.v2.search({
|
||||
q,
|
||||
limit: 20,
|
||||
resolve: authenticated,
|
||||
});
|
||||
console.log(results);
|
||||
setStatusResults(results.statuses);
|
||||
setAccountResults(results.accounts);
|
||||
setHashtagResults(results.hashtags);
|
||||
setUiState('default');
|
||||
})();
|
||||
}
|
||||
}, [q, instance]);
|
||||
|
||||
return (
|
||||
<div id="search-page" class="deck-container">
|
||||
<div class="timeline-deck deck">
|
||||
<header>
|
||||
<div class="header-grid">
|
||||
<div class="header-side">
|
||||
<Menu />
|
||||
</div>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
const { q } = e.target;
|
||||
if (q.value) {
|
||||
setSearchParams({ q: q.value });
|
||||
} else {
|
||||
setSearchParams({});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<input
|
||||
ref={searchFieldRef}
|
||||
name="q"
|
||||
type="search"
|
||||
autofocus
|
||||
placeholder="Search"
|
||||
onSearch={(e) => {
|
||||
if (!e.target.value) {
|
||||
setSearchParams({});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</form>
|
||||
<div class="header-side" />
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
{!!q && uiState !== 'loading' ? (
|
||||
<>
|
||||
<h2 class="timeline-header">Accounts</h2>
|
||||
{accountResults.length > 0 ? (
|
||||
<ul class="timeline flat accounts-list">
|
||||
{accountResults.map((account) => (
|
||||
<li>
|
||||
<AccountBlock account={account} instance={instance} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p class="ui-state">No accounts found.</p>
|
||||
)}
|
||||
<h2 class="timeline-header">Hashtags</h2>
|
||||
{hashtagResults.length > 0 ? (
|
||||
<ul class="link-list hashtag-list">
|
||||
{hashtagResults.map((hashtag) => (
|
||||
<li>
|
||||
<Link
|
||||
to={
|
||||
instance
|
||||
? `/${instance}/t/${hashtag.name}`
|
||||
: `/t/${hashtag.name}`
|
||||
}
|
||||
>
|
||||
<Icon icon="hashtag" />
|
||||
<span>{hashtag.name}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p class="ui-state">No hashtags found.</p>
|
||||
)}
|
||||
<h2 class="timeline-header">Posts</h2>
|
||||
{statusResults.length > 0 ? (
|
||||
<ul class="timeline">
|
||||
{statusResults.map((status) => (
|
||||
<li>
|
||||
<Link
|
||||
class="status-link"
|
||||
to={
|
||||
instance
|
||||
? `/${instance}/s/${status.id}`
|
||||
: `/s/${status.id}`
|
||||
}
|
||||
>
|
||||
<Status status={status} />
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p class="ui-state">No posts found.</p>
|
||||
)}
|
||||
</>
|
||||
) : uiState === 'loading' ? (
|
||||
<p class="ui-state">
|
||||
<Loader abrupt />
|
||||
</p>
|
||||
) : (
|
||||
<p class="ui-state">
|
||||
Enter your search term or paste a URL above to get started.
|
||||
</p>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Search;
|
|
@ -10,6 +10,7 @@ import Icon from '../components/icon';
|
|||
import Link from '../components/link';
|
||||
import NameText from '../components/name-text';
|
||||
import RelativeTime from '../components/relative-time';
|
||||
import { api } from '../utils/api';
|
||||
import states from '../utils/states';
|
||||
import store from '../utils/store';
|
||||
|
||||
|
@ -20,6 +21,7 @@ import store from '../utils/store';
|
|||
*/
|
||||
|
||||
function Settings({ onClose }) {
|
||||
const { masto } = api();
|
||||
const snapStates = useSnapshot(states);
|
||||
// Accounts
|
||||
const accounts = store.local.getJSON('accounts');
|
||||
|
@ -123,13 +125,12 @@ function Settings({ onClose }) {
|
|||
<MenuItem
|
||||
disabled={!isCurrent}
|
||||
onClick={() => {
|
||||
const yes = confirm(
|
||||
'Are you sure you want to log out?',
|
||||
);
|
||||
const yes = confirm('Log out?');
|
||||
if (!yes) return;
|
||||
accounts.splice(i, 1);
|
||||
store.local.setJSON('accounts', accounts);
|
||||
location.reload();
|
||||
// location.reload();
|
||||
location.href = '/';
|
||||
}}
|
||||
>
|
||||
Log out
|
||||
|
@ -178,7 +179,10 @@ function Settings({ onClose }) {
|
|||
}
|
||||
document
|
||||
.querySelector('meta[name="color-scheme"]')
|
||||
.setAttribute('content', theme);
|
||||
.setAttribute(
|
||||
'content',
|
||||
theme === 'auto' ? 'dark light' : theme,
|
||||
);
|
||||
|
||||
if (theme === 'auto') {
|
||||
store.local.del('theme');
|
||||
|
|
|
@ -2,8 +2,6 @@
|
|||
grid-column: 1 / 3;
|
||||
}
|
||||
.status-deck header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.status-deck header h1 {
|
||||
|
@ -21,7 +19,6 @@
|
|||
.hero-heading {
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
.hero-heading .icon {
|
||||
vertical-align: middle;
|
||||
|
@ -38,3 +35,21 @@
|
|||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.post-status-banner {
|
||||
position: sticky;
|
||||
bottom: 16px;
|
||||
bottom: max(16px, env(safe-area-inset-bottom));
|
||||
font-size: 90%;
|
||||
background-color: var(--bg-faded-color);
|
||||
padding: 16px;
|
||||
margin: 0 16px;
|
||||
border-radius: 16px;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.2;
|
||||
max-width: var(--main-width);
|
||||
}
|
||||
.post-status-banner > p:first-of-type {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
|
|
@ -6,7 +6,7 @@ import pRetry from 'p-retry';
|
|||
import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { InView } from 'react-intersection-observer';
|
||||
import { useLocation, useNavigate, useParams } from 'react-router-dom';
|
||||
import { matchPath, useNavigate, useParams } from 'react-router-dom';
|
||||
import { useDebouncedCallback } from 'use-debounce';
|
||||
import { useSnapshot } from 'valtio';
|
||||
|
||||
|
@ -17,9 +17,14 @@ import Loader from '../components/loader';
|
|||
import NameText from '../components/name-text';
|
||||
import RelativeTime from '../components/relative-time';
|
||||
import Status from '../components/status';
|
||||
import { api } from '../utils/api';
|
||||
import htmlContentLength from '../utils/html-content-length';
|
||||
import shortenNumber from '../utils/shorten-number';
|
||||
import states, { saveStatus, threadifyStatus } from '../utils/states';
|
||||
import states, {
|
||||
saveStatus,
|
||||
statusKey,
|
||||
threadifyStatus,
|
||||
} from '../utils/states';
|
||||
import { getCurrentAccount } from '../utils/store-utils';
|
||||
import useScroll from '../utils/useScroll';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
@ -34,13 +39,16 @@ function resetScrollPosition(id) {
|
|||
}
|
||||
|
||||
function StatusPage() {
|
||||
const { id } = useParams();
|
||||
const location = useLocation();
|
||||
const { id, ...params } = useParams();
|
||||
const { masto, instance, authenticated } = api({ instance: params.instance });
|
||||
const { masto: currentMasto, instance: currentInstance } = api();
|
||||
const sameInstance = instance === currentInstance;
|
||||
const navigate = useNavigate();
|
||||
const snapStates = useSnapshot(states);
|
||||
const [statuses, setStatuses] = useState([]);
|
||||
const [uiState, setUIState] = useState('default');
|
||||
const heroStatusRef = useRef();
|
||||
const sKey = statusKey(id, instance);
|
||||
|
||||
const scrollableRef = useRef();
|
||||
useEffect(() => {
|
||||
|
@ -75,7 +83,7 @@ function StatusPage() {
|
|||
if (cachedStatuses) {
|
||||
// Case 1: It's cached, let's restore them to make it snappy
|
||||
const reallyCachedStatuses = cachedStatuses.filter(
|
||||
(s) => states.statuses[s.id],
|
||||
(s) => states.statuses[sKey],
|
||||
// Some are not cached in the global state, so we need to filter them out
|
||||
);
|
||||
setStatuses(reallyCachedStatuses);
|
||||
|
@ -100,14 +108,14 @@ function StatusPage() {
|
|||
retries: 8,
|
||||
});
|
||||
|
||||
const hasStatus = !!snapStates.statuses[id];
|
||||
let heroStatus = snapStates.statuses[id];
|
||||
const hasStatus = !!snapStates.statuses[sKey];
|
||||
let heroStatus = snapStates.statuses[sKey];
|
||||
if (hasStatus) {
|
||||
console.debug('Hero status is cached');
|
||||
} else {
|
||||
try {
|
||||
heroStatus = await heroFetch();
|
||||
saveStatus(heroStatus);
|
||||
saveStatus(heroStatus, instance);
|
||||
// Give time for context to appear
|
||||
await new Promise((resolve) => {
|
||||
setTimeout(resolve, 100);
|
||||
|
@ -124,11 +132,15 @@ function StatusPage() {
|
|||
const { ancestors, descendants } = context;
|
||||
|
||||
ancestors.forEach((status) => {
|
||||
states.statuses[status.id] = status;
|
||||
saveStatus(status, instance, {
|
||||
skipThreading: true,
|
||||
});
|
||||
});
|
||||
const nestedDescendants = [];
|
||||
descendants.forEach((status) => {
|
||||
states.statuses[status.id] = status;
|
||||
saveStatus(status, instance, {
|
||||
skipThreading: true,
|
||||
});
|
||||
if (status.inReplyToAccountId === status.account.id) {
|
||||
// If replying to self, it's part of the thread, level 1
|
||||
nestedDescendants.push(status);
|
||||
|
@ -199,7 +211,7 @@ function StatusPage() {
|
|||
// Let's threadify this one
|
||||
// Note that all non-hero statuses will trigger saveStatus which will threadify them too
|
||||
// By right, at this point, all descendant statuses should be cached
|
||||
threadifyStatus(heroStatus);
|
||||
threadifyStatus(heroStatus, instance);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setUIState('error');
|
||||
|
@ -211,7 +223,7 @@ function StatusPage() {
|
|||
};
|
||||
};
|
||||
|
||||
useEffect(initContext, [id]);
|
||||
useEffect(initContext, [id, masto]);
|
||||
useEffect(() => {
|
||||
if (!statuses.length) return;
|
||||
console.debug('STATUSES', statuses);
|
||||
|
@ -277,7 +289,7 @@ function StatusPage() {
|
|||
};
|
||||
}, []);
|
||||
|
||||
const heroStatus = snapStates.statuses[id];
|
||||
const heroStatus = snapStates.statuses[sKey] || snapStates.statuses[id];
|
||||
const heroDisplayName = useMemo(() => {
|
||||
// Remove shortcodes from display name
|
||||
if (!heroStatus) return '';
|
||||
|
@ -308,12 +320,20 @@ function StatusPage() {
|
|||
heroDisplayName && heroContentText
|
||||
? `${heroDisplayName}: "${heroContentText}"`
|
||||
: 'Status',
|
||||
'/s/:id',
|
||||
'/:instance?/s/:id',
|
||||
);
|
||||
|
||||
const closeLink = useMemo(() => {
|
||||
const pathname = snapStates.prevLocation?.pathname;
|
||||
if (!pathname || pathname.startsWith('/s/')) return '/';
|
||||
const { prevLocation } = snapStates;
|
||||
const pathname =
|
||||
(prevLocation?.pathname || '') + (prevLocation?.search || '');
|
||||
if (
|
||||
!pathname ||
|
||||
matchPath('/:instance/s/:id', pathname) ||
|
||||
matchPath('/s/:id', pathname)
|
||||
) {
|
||||
return '/';
|
||||
}
|
||||
return pathname;
|
||||
}, []);
|
||||
const onClose = () => {
|
||||
|
@ -458,11 +478,17 @@ function StatusPage() {
|
|||
<Icon icon="chevron-left" size="xl" />
|
||||
</Link>
|
||||
</div> */}
|
||||
<div class="header-grid header-grid-2">
|
||||
<h1>
|
||||
{!heroInView && heroStatus && uiState !== 'loading' ? (
|
||||
<>
|
||||
<span class="hero-heading">
|
||||
<NameText showAvatar account={heroStatus.account} short />{' '}
|
||||
<NameText
|
||||
account={heroStatus.account}
|
||||
instance={instance}
|
||||
showAvatar
|
||||
short
|
||||
/>{' '}
|
||||
<span class="insignificant">
|
||||
•{' '}
|
||||
<RelativeTime
|
||||
|
@ -515,7 +541,9 @@ function StatusPage() {
|
|||
)}
|
||||
</h1>
|
||||
<div class="header-side">
|
||||
<Loader hidden={uiState !== 'loading'} />
|
||||
{uiState === 'loading' ? (
|
||||
<Loader abrupt />
|
||||
) : (
|
||||
<Menu
|
||||
align="end"
|
||||
portal={{
|
||||
|
@ -541,9 +569,11 @@ function StatusPage() {
|
|||
});
|
||||
}}
|
||||
>
|
||||
<Icon icon="eye-open" /> <span>Show all sensitive content</span>
|
||||
<Icon icon="eye-open" />{' '}
|
||||
<span>Show all sensitive content</span>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
)}
|
||||
<Link
|
||||
class="button plain deck-close"
|
||||
to={closeLink}
|
||||
|
@ -552,6 +582,7 @@ function StatusPage() {
|
|||
<Icon icon="x" size="xl" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{!!statuses.length && heroStatus ? (
|
||||
<ul
|
||||
|
@ -577,24 +608,85 @@ function StatusPage() {
|
|||
} ${thread ? 'thread' : ''} ${isHero ? 'hero' : ''}`}
|
||||
>
|
||||
{isHero ? (
|
||||
<>
|
||||
<InView
|
||||
threshold={0.1}
|
||||
onChange={onView}
|
||||
class="status-focus"
|
||||
tabIndex={0}
|
||||
>
|
||||
<Status statusID={statusID} withinContext size="l" />
|
||||
<Status
|
||||
statusID={statusID}
|
||||
instance={instance}
|
||||
withinContext
|
||||
size="l"
|
||||
/>
|
||||
</InView>
|
||||
{!sameInstance && uiState !== 'loading' && (
|
||||
<div class="post-status-banner">
|
||||
<p>
|
||||
This post is from another instance (
|
||||
<b>{instance}</b>). Interactions (reply, boost, etc)
|
||||
are not possible.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
(async () => {
|
||||
try {
|
||||
const results = await currentMasto.v2.search({
|
||||
q: heroStatus.url,
|
||||
type: 'statuses',
|
||||
resolve: true,
|
||||
limit: 1,
|
||||
});
|
||||
if (results.statuses.length) {
|
||||
const status = results.statuses[0];
|
||||
navigate(`/s/${status.id}`);
|
||||
} else {
|
||||
throw new Error('No results');
|
||||
}
|
||||
} catch (e) {
|
||||
alert('Error: ' + e);
|
||||
console.error(e);
|
||||
}
|
||||
})();
|
||||
}}
|
||||
>
|
||||
<Icon icon="transfer" /> Switch to my instance to
|
||||
enable interactions
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{sameInstance &&
|
||||
!authenticated &&
|
||||
uiState !== 'loading' && (
|
||||
<div class="post-status-banner">
|
||||
<p>
|
||||
You're not logged in. Interactions (reply, boost,
|
||||
etc) are not possible.
|
||||
</p>
|
||||
<Link to="/login" class="button">
|
||||
Log in
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Link
|
||||
class="status-link"
|
||||
to={`/s/${statusID}`}
|
||||
to={
|
||||
instance
|
||||
? `/${instance}/s/${statusID}`
|
||||
: `/s/${statusID}`
|
||||
}
|
||||
onClick={() => {
|
||||
resetScrollPosition(statusID);
|
||||
}}
|
||||
>
|
||||
<Status
|
||||
statusID={statusID}
|
||||
instance={instance}
|
||||
withinContext
|
||||
size={thread || ancestor ? 'm' : 's'}
|
||||
/>
|
||||
|
@ -610,8 +702,10 @@ function StatusPage() {
|
|||
)}
|
||||
{descendant && replies?.length > 0 && (
|
||||
<SubComments
|
||||
instance={instance}
|
||||
hasManyStatuses={hasManyStatuses}
|
||||
replies={replies}
|
||||
hasParentThread={thread}
|
||||
/>
|
||||
)}
|
||||
{uiState === 'loading' &&
|
||||
|
@ -691,7 +785,7 @@ function StatusPage() {
|
|||
);
|
||||
}
|
||||
|
||||
function SubComments({ hasManyStatuses, replies }) {
|
||||
function SubComments({ hasManyStatuses, replies, instance, hasParentThread }) {
|
||||
// Set isBrief = true:
|
||||
// - if less than or 2 replies
|
||||
// - if replies have no sub-replies
|
||||
|
@ -728,7 +822,8 @@ function SubComments({ hasManyStatuses, replies }) {
|
|||
.filter((a, i, arr) => arr.findIndex((b) => b.id === a.id) === i)
|
||||
.slice(0, 3);
|
||||
|
||||
const open = isBrief || !hasManyStatuses;
|
||||
const open =
|
||||
(!hasParentThread || replies.length === 1) && (isBrief || !hasManyStatuses);
|
||||
|
||||
return (
|
||||
<details class="replies" open={open}>
|
||||
|
@ -764,12 +859,17 @@ function SubComments({ hasManyStatuses, replies }) {
|
|||
<li key={r.id}>
|
||||
<Link
|
||||
class="status-link"
|
||||
to={`/s/${r.id}`}
|
||||
to={instance ? `/${instance}/s/${r.id}` : `/s/${r.id}`}
|
||||
onClick={() => {
|
||||
resetScrollPosition(r.id);
|
||||
}}
|
||||
>
|
||||
<Status statusID={r.id} withinContext size="s" />
|
||||
<Status
|
||||
statusID={r.id}
|
||||
instance={instance}
|
||||
withinContext
|
||||
size="s"
|
||||
/>
|
||||
{!r.replies?.length && r.repliesCount > 0 && (
|
||||
<div class="replies-link">
|
||||
<Icon icon="comment" />{' '}
|
||||
|
@ -781,6 +881,7 @@ function SubComments({ hasManyStatuses, replies }) {
|
|||
</Link>
|
||||
{r.replies?.length && (
|
||||
<SubComments
|
||||
instance={instance}
|
||||
hasManyStatuses={hasManyStatuses}
|
||||
replies={r.replies}
|
||||
/>
|
||||
|
|
|
@ -2,6 +2,7 @@ import './welcome.css';
|
|||
|
||||
import logo from '../assets/logo.svg';
|
||||
import Link from '../components/link';
|
||||
import states from '../utils/states';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
||||
function Welcome() {
|
||||
|
@ -41,7 +42,14 @@ function Welcome() {
|
|||
Built
|
||||
</a>{' '}
|
||||
by{' '}
|
||||
<a href="https://mastodon.social/@cheeaun" target="_blank">
|
||||
<a
|
||||
href="https://mastodon.social/@cheeaun"
|
||||
target="_blank"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
states.showAccount = 'cheeaun@mastodon.social';
|
||||
}}
|
||||
>
|
||||
@cheeaun
|
||||
</a>
|
||||
.{' '}
|
||||
|
|
189
src/utils/api.js
Normal file
189
src/utils/api.js
Normal file
|
@ -0,0 +1,189 @@
|
|||
import { createClient } from 'masto';
|
||||
|
||||
import store from './store';
|
||||
import { getAccount, getCurrentAccount, saveAccount } from './store-utils';
|
||||
|
||||
// Default *fallback* instance
|
||||
const DEFAULT_INSTANCE = 'mastodon.social';
|
||||
|
||||
// Per-instance masto instance
|
||||
// Useful when only one account is logged in
|
||||
// I'm not sure if I'll ever allow multiple logged-in accounts but oh well...
|
||||
// E.g. apis['mastodon.social']
|
||||
const apis = {};
|
||||
|
||||
// Per-account masto instance
|
||||
// Note: There can be many accounts per instance
|
||||
// Useful when multiple accounts are logged in or when certain actions require a specific account
|
||||
// Just in case if I need this one day.
|
||||
// E.g. accountApis['mastodon.social']['ACCESS_TOKEN']
|
||||
const accountApis = {};
|
||||
|
||||
// Current account masto instance
|
||||
let currentAccountApi;
|
||||
|
||||
export function initClient({ instance, accessToken }) {
|
||||
if (/^https?:\/\//.test(instance)) {
|
||||
instance = instance
|
||||
.replace(/^https?:\/\//, '')
|
||||
.replace(/\/+$/, '')
|
||||
.toLowerCase();
|
||||
}
|
||||
const url = instance ? `https://${instance}` : `https://${DEFAULT_INSTANCE}`;
|
||||
|
||||
const client = createClient({
|
||||
url,
|
||||
accessToken, // Can be null
|
||||
disableVersionCheck: true, // Allow non-Mastodon instances
|
||||
timeout: 30_000, // Unfortunatly this is global instead of per-request
|
||||
});
|
||||
client.__instance__ = instance;
|
||||
|
||||
apis[instance] = client;
|
||||
if (!accountApis[instance]) accountApis[instance] = {};
|
||||
if (accessToken) accountApis[instance][accessToken] = client;
|
||||
|
||||
return client;
|
||||
}
|
||||
|
||||
// Get the instance information
|
||||
// The config is needed for composing
|
||||
export async function initInstance(client) {
|
||||
const masto = client;
|
||||
// Request v2, fallback to v1 if fail
|
||||
let info;
|
||||
try {
|
||||
info = await masto.v2.instance.fetch();
|
||||
} catch (e) {}
|
||||
if (!info) {
|
||||
try {
|
||||
info = await masto.v1.instances.fetch();
|
||||
} catch (e) {}
|
||||
}
|
||||
if (!info) return;
|
||||
console.log(info);
|
||||
const {
|
||||
// v1
|
||||
uri,
|
||||
urls: { streamingApi } = {},
|
||||
// v2
|
||||
domain,
|
||||
configuration: { urls: { streaming } = {} } = {},
|
||||
} = info;
|
||||
if (uri || domain) {
|
||||
const instances = store.local.getJSON('instances') || {};
|
||||
instances[
|
||||
(domain || uri)
|
||||
.replace(/^https?:\/\//, '')
|
||||
.replace(/\/+$/, '')
|
||||
.toLowerCase()
|
||||
] = info;
|
||||
store.local.setJSON('instances', instances);
|
||||
}
|
||||
// This is a weird place to put this but here's updating the masto instance with the streaming API URL set in the configuration
|
||||
// Reason: Streaming WebSocket URL may change, unlike the standard API REST URLs
|
||||
if (streamingApi || streaming) {
|
||||
console.log('🎏 Streaming API URL:', streaming || streamingApi);
|
||||
masto.config.props.streamingApiUrl = streaming || streamingApi;
|
||||
}
|
||||
}
|
||||
|
||||
// Get the account information and store it
|
||||
export async function initAccount(client, instance, accessToken) {
|
||||
const masto = client;
|
||||
const mastoAccount = await masto.v1.accounts.verifyCredentials();
|
||||
|
||||
saveAccount({
|
||||
info: mastoAccount,
|
||||
instanceURL: instance.toLowerCase(),
|
||||
accessToken,
|
||||
});
|
||||
}
|
||||
|
||||
// Get preferences
|
||||
export async function initPreferences(client) {
|
||||
try {
|
||||
const masto = client;
|
||||
const preferences = await masto.v1.preferences.fetch();
|
||||
store.account.set('preferences', preferences);
|
||||
} catch (e) {
|
||||
// silently fail
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
// Get the masto instance
|
||||
// If accountID is provided, get the masto instance for that account
|
||||
export function api({ instance, accessToken, accountID, account } = {}) {
|
||||
// If instance and accessToken are provided, get the masto instance for that account
|
||||
if (instance && accessToken) {
|
||||
return {
|
||||
masto:
|
||||
accountApis[instance]?.[accessToken] ||
|
||||
initClient({ instance, accessToken }),
|
||||
authenticated: true,
|
||||
instance,
|
||||
};
|
||||
}
|
||||
|
||||
// If account is provided, get the masto instance for that account
|
||||
if (account || accountID) {
|
||||
account = account || getAccount(accountID);
|
||||
if (account) {
|
||||
const accessToken = account.accessToken;
|
||||
const instance = account.instanceURL;
|
||||
return {
|
||||
masto:
|
||||
accountApis[instance]?.[accessToken] ||
|
||||
initClient({ instance, accessToken }),
|
||||
authenticated: true,
|
||||
instance,
|
||||
};
|
||||
} else {
|
||||
throw new Error(`Account ${accountID} not found`);
|
||||
}
|
||||
}
|
||||
|
||||
// If only instance is provided, get the masto instance for that instance
|
||||
if (instance) {
|
||||
const masto = apis[instance] || initClient({ instance });
|
||||
return {
|
||||
masto,
|
||||
authenticated: !!masto.config.props.accessToken,
|
||||
instance,
|
||||
};
|
||||
}
|
||||
|
||||
// If no instance is provided, get the masto instance for the current account
|
||||
if (currentAccountApi)
|
||||
return {
|
||||
masto: currentAccountApi,
|
||||
authenticated: true,
|
||||
instance: currentAccountApi.__instance__,
|
||||
};
|
||||
const currentAccount = getCurrentAccount();
|
||||
if (currentAccount) {
|
||||
const { accessToken, instanceURL: instance } = currentAccount;
|
||||
currentAccountApi =
|
||||
accountApis[instance]?.[accessToken] ||
|
||||
initClient({ instance, accessToken });
|
||||
return {
|
||||
masto: currentAccountApi,
|
||||
authenticated: true,
|
||||
instance,
|
||||
};
|
||||
}
|
||||
|
||||
// If no instance is provided and no account is logged in, get the masto instance for DEFAULT_INSTANCE
|
||||
return {
|
||||
masto: apis[DEFAULT_INSTANCE] || initClient({ instance: DEFAULT_INSTANCE }),
|
||||
authenticated: false,
|
||||
instance: DEFAULT_INSTANCE,
|
||||
};
|
||||
}
|
||||
|
||||
window.__API__ = {
|
||||
currentAccountApi,
|
||||
apis,
|
||||
accountApis,
|
||||
};
|
|
@ -43,6 +43,43 @@ function enhanceContent(content, opts = {}) {
|
|||
block.replaceWith(pre);
|
||||
});
|
||||
|
||||
// Convert multi-paragraph code blocks to <pre><code>code</code></pre>
|
||||
const paragraphs = Array.from(dom.querySelectorAll('p'));
|
||||
// Filter out paragraphs with ``` in beginning only
|
||||
const codeBlocks = paragraphs.filter((p) => /^```/g.test(p.innerText));
|
||||
// For each codeBlocks, get all paragraphs until the last paragraph with ``` at the end only
|
||||
codeBlocks.forEach((block) => {
|
||||
const nextParagraphs = [block];
|
||||
let hasCodeBlock = false;
|
||||
let currentBlock = block;
|
||||
while (currentBlock.nextElementSibling) {
|
||||
const next = currentBlock.nextElementSibling;
|
||||
if (next && next.tagName === 'P') {
|
||||
if (/```$/g.test(next.innerText)) {
|
||||
nextParagraphs.push(next);
|
||||
hasCodeBlock = true;
|
||||
break;
|
||||
} else {
|
||||
nextParagraphs.push(next);
|
||||
}
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
currentBlock = next;
|
||||
}
|
||||
if (hasCodeBlock) {
|
||||
const pre = document.createElement('pre');
|
||||
nextParagraphs.forEach((p) => {
|
||||
// Replace <br /> with newlines
|
||||
p.querySelectorAll('br').forEach((br) => br.replaceWith('\n'));
|
||||
});
|
||||
const codeText = nextParagraphs.map((p) => p.innerHTML).join('\n\n');
|
||||
pre.innerHTML = `<code>${codeText}</code>`;
|
||||
block.replaceWith(pre);
|
||||
nextParagraphs.forEach((p) => p.remove());
|
||||
}
|
||||
});
|
||||
|
||||
// INLINE CODE
|
||||
// ===========
|
||||
// Convert `code` to <code>code</code>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import states from './states';
|
||||
|
||||
function handleContentLinks(opts) {
|
||||
const { mentions = [] } = opts || {};
|
||||
const { mentions = [], instance } = opts || {};
|
||||
return (e) => {
|
||||
let { target } = e;
|
||||
if (target.parentNode.tagName.toLowerCase() === 'a') {
|
||||
|
@ -25,13 +25,19 @@ function handleContentLinks(opts) {
|
|||
if (mention) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
states.showAccount = mention.acct;
|
||||
states.showAccount = {
|
||||
account: mention.acct,
|
||||
instance,
|
||||
};
|
||||
} else if (!/^http/i.test(targetText)) {
|
||||
console.log('mention not found', targetText);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const href = target.getAttribute('href');
|
||||
states.showAccount = href;
|
||||
states.showAccount = {
|
||||
account: href,
|
||||
instance,
|
||||
};
|
||||
}
|
||||
} else if (
|
||||
target.tagName.toLowerCase() === 'a' &&
|
||||
|
@ -40,7 +46,9 @@ function handleContentLinks(opts) {
|
|||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const tag = target.innerText.replace(/^#/, '').trim();
|
||||
location.hash = `#/t/${tag}`;
|
||||
const hashURL = instance ? `#/${instance}/t/${tag}` : `#/t/${tag}`;
|
||||
console.log({ hashURL });
|
||||
location.hash = hashURL;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
@ -13,9 +13,9 @@ export default function openCompose(opts) {
|
|||
);
|
||||
|
||||
if (newWin) {
|
||||
if (masto) {
|
||||
newWin.masto = masto;
|
||||
}
|
||||
// if (masto) {
|
||||
// newWin.masto = masto;
|
||||
// }
|
||||
|
||||
newWin.__COMPOSE__ = opts;
|
||||
}
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
import { proxy, subscribe } from 'valtio';
|
||||
import { subscribeKey } from 'valtio/utils';
|
||||
|
||||
import { api } from './api';
|
||||
import store from './store';
|
||||
|
||||
const states = proxy({
|
||||
|
@ -14,8 +16,9 @@ const states = proxy({
|
|||
homeLast: null, // Last item in 'home' list
|
||||
homeLastFetchTime: null,
|
||||
notifications: [],
|
||||
notificationLast: null, // Last item in 'notifications' list
|
||||
notificationsLast: store.account.get('notificationsLast') || null, // Last read notification
|
||||
notificationsNew: [],
|
||||
notificationsShowNew: false,
|
||||
notificationsLastFetchTime: null,
|
||||
accounts: {},
|
||||
reloadStatusPage: 0,
|
||||
|
@ -27,38 +30,80 @@ const states = proxy({
|
|||
showAccount: false,
|
||||
showDrafts: false,
|
||||
showMediaModal: false,
|
||||
composeCharacterCount: 0,
|
||||
showShortcutsSettings: false,
|
||||
// Shortcuts
|
||||
shortcuts: store.account.get('shortcuts') ?? [],
|
||||
// Settings
|
||||
settings: {
|
||||
boostsCarousel: store.local.get('settings:boostsCarousel')
|
||||
? store.local.get('settings:boostsCarousel') === '1'
|
||||
: true,
|
||||
shortcutsColumnsMode:
|
||||
store.account.get('settings-shortcutsColumnsMode') ?? false,
|
||||
boostsCarousel: store.account.get('settings-boostsCarousel') ?? true,
|
||||
},
|
||||
});
|
||||
|
||||
export default states;
|
||||
|
||||
subscribe(states.settings, () => {
|
||||
store.local.set(
|
||||
'settings:boostsCarousel',
|
||||
states.settings.boostsCarousel ? '1' : '0',
|
||||
);
|
||||
subscribeKey(states, 'notificationsLast', (v) => {
|
||||
console.log('CHANGE', v);
|
||||
store.account.set('notificationsLast', states.notificationsLast);
|
||||
});
|
||||
subscribe(states, (v) => {
|
||||
console.debug('STATES change', v);
|
||||
const [action, path, value, prevValue] = v[0];
|
||||
if (path.join('.') === 'settings.boostsCarousel') {
|
||||
store.account.set('settings-boostsCarousel', !!value);
|
||||
}
|
||||
if (path.join('.') === 'settings.shortcutsColumnsMode') {
|
||||
store.account.set('settings-shortcutsColumnsMode', !!value);
|
||||
}
|
||||
if (path?.[0] === 'shortcuts') {
|
||||
store.account.set('shortcuts', states.shortcuts);
|
||||
}
|
||||
});
|
||||
|
||||
export function saveStatus(status, opts) {
|
||||
export function hideAllModals() {
|
||||
states.showCompose = false;
|
||||
states.showSettings = false;
|
||||
states.showAccount = false;
|
||||
states.showDrafts = false;
|
||||
states.showMediaModal = false;
|
||||
states.showShortcutsSettings = false;
|
||||
}
|
||||
|
||||
export function statusKey(id, instance) {
|
||||
return instance ? `${instance}/${id}` : id;
|
||||
}
|
||||
|
||||
export function getStatus(statusID, instance) {
|
||||
if (instance) {
|
||||
const key = statusKey(statusID, instance);
|
||||
return states.statuses[key];
|
||||
}
|
||||
return states.statuses[statusID];
|
||||
}
|
||||
|
||||
export function saveStatus(status, instance, opts) {
|
||||
if (typeof instance === 'object') {
|
||||
opts = instance;
|
||||
instance = null;
|
||||
}
|
||||
const { override, skipThreading } = Object.assign(
|
||||
{ override: true, skipThreading: false },
|
||||
opts,
|
||||
);
|
||||
if (!status) return;
|
||||
if (!override && states.statuses[status.id]) return;
|
||||
states.statuses[status.id] = status;
|
||||
if (!override && getStatus(status.id)) return;
|
||||
const key = statusKey(status.id, instance);
|
||||
states.statuses[key] = status;
|
||||
if (status.reblog) {
|
||||
states.statuses[status.reblog.id] = status.reblog;
|
||||
const key = statusKey(status.reblog.id, instance);
|
||||
states.statuses[key] = status.reblog;
|
||||
}
|
||||
|
||||
// THREAD TRAVERSER
|
||||
if (!skipThreading) {
|
||||
requestAnimationFrame(() => {
|
||||
threadifyStatus(status);
|
||||
threadifyStatus(status, instance);
|
||||
if (status.reblog) {
|
||||
threadifyStatus(status.reblog);
|
||||
}
|
||||
|
@ -66,7 +111,8 @@ export function saveStatus(status, opts) {
|
|||
}
|
||||
}
|
||||
|
||||
export function threadifyStatus(status) {
|
||||
export function threadifyStatus(status, propInstance) {
|
||||
const { masto, instance } = api({ instance: propInstance });
|
||||
// Return all statuses in the thread, via inReplyToId, if inReplyToAccountId === account.id
|
||||
let fetchIndex = 0;
|
||||
async function traverse(status, index = 0) {
|
||||
|
@ -78,12 +124,13 @@ export function threadifyStatus(status) {
|
|||
throw 'Not a thread';
|
||||
// Possibly thread of replies by multiple people?
|
||||
}
|
||||
let prevStatus = states.statuses[inReplyToId];
|
||||
const key = statusKey(inReplyToId, instance);
|
||||
let prevStatus = states.statuses[key];
|
||||
if (!prevStatus) {
|
||||
if (fetchIndex++ > 3) throw 'Too many fetches for thread'; // Some people revive old threads
|
||||
await new Promise((r) => setTimeout(r, 500 * fetchIndex)); // Be nice to rate limits
|
||||
prevStatus = await masto.v1.statuses.fetch(inReplyToId);
|
||||
saveStatus(prevStatus, { skipThreading: true });
|
||||
saveStatus(prevStatus, instance, { skipThreading: true });
|
||||
}
|
||||
// Prepend so that first status in thread will be index 0
|
||||
return [...(await traverse(prevStatus, ++index)), status];
|
||||
|
@ -93,7 +140,8 @@ export function threadifyStatus(status) {
|
|||
if (statuses.length > 1) {
|
||||
console.debug('THREAD', statuses);
|
||||
statuses.forEach((status, index) => {
|
||||
states.statusThreadNumber[status.id] = index + 1;
|
||||
const key = statusKey(status.id, instance);
|
||||
states.statusThreadNumber[key] = index + 1;
|
||||
});
|
||||
}
|
||||
})
|
||||
|
|
|
@ -1,10 +1,13 @@
|
|||
import store from './store';
|
||||
|
||||
export function getCurrentAccount() {
|
||||
export function getAccount(id) {
|
||||
const accounts = store.local.getJSON('accounts') || [];
|
||||
return accounts.find((a) => a.info.id === id) || accounts[0];
|
||||
}
|
||||
|
||||
export function getCurrentAccount() {
|
||||
const currentAccount = store.session.get('currentAccount');
|
||||
const account =
|
||||
accounts.find((a) => a.info.id === currentAccount) || accounts[0];
|
||||
const account = getAccount(currentAccount);
|
||||
return account;
|
||||
}
|
||||
|
||||
|
@ -16,3 +19,35 @@ export function getCurrentAccountNS() {
|
|||
} = account;
|
||||
return `${id}@${instanceURL}`;
|
||||
}
|
||||
|
||||
export function saveAccount(account) {
|
||||
const accounts = store.local.getJSON('accounts') || [];
|
||||
const acc = accounts.find((a) => a.info.id === account.info.id);
|
||||
if (acc) {
|
||||
acc.info = account.info;
|
||||
acc.instanceURL = account.instanceURL;
|
||||
acc.accessToken = account.accessToken;
|
||||
} else {
|
||||
accounts.push(account);
|
||||
}
|
||||
store.local.setJSON('accounts', accounts);
|
||||
store.session.set('currentAccount', account.info.id);
|
||||
}
|
||||
|
||||
let currentInstance = null;
|
||||
export function getCurrentInstance() {
|
||||
if (currentInstance) return currentInstance;
|
||||
try {
|
||||
const account = getCurrentAccount();
|
||||
const instances = store.local.getJSON('instances');
|
||||
const instance = account.instanceURL.toLowerCase();
|
||||
return (currentInstance = instances[instance]);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
alert('Failed to load instance configuration. Please try again.');
|
||||
// Temporary fix for corrupted data
|
||||
store.local.del('instances');
|
||||
location.reload();
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
import { getCurrentAccountNS } from './store-utils';
|
||||
|
||||
const local = {
|
||||
get: (key) => {
|
||||
try {
|
||||
|
@ -84,4 +86,36 @@ const session = {
|
|||
},
|
||||
};
|
||||
|
||||
export default { local, session };
|
||||
// Store with account namespace (id@domain.tld) <- uses id, not username
|
||||
const account = {
|
||||
get: (key) => {
|
||||
try {
|
||||
return local.getJSON(key)[getCurrentAccountNS()];
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
set: (key, value) => {
|
||||
try {
|
||||
const data = local.getJSON(key) || {};
|
||||
data[getCurrentAccountNS()] = value;
|
||||
return local.setJSON(key, data);
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
del: (key) => {
|
||||
try {
|
||||
const data = local.getJSON(key) || {};
|
||||
delete data[getCurrentAccountNS()];
|
||||
return local.setJSON(key, data);
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default { local, session, account };
|
||||
|
|
25
src/utils/supports.js
Normal file
25
src/utils/supports.js
Normal file
|
@ -0,0 +1,25 @@
|
|||
import { satisfies } from 'semver';
|
||||
|
||||
import features from '../data/features.json';
|
||||
|
||||
import { getCurrentInstance } from './store-utils';
|
||||
|
||||
const supportsCache = {};
|
||||
|
||||
function supports(feature) {
|
||||
try {
|
||||
const { version, domain } = getCurrentInstance();
|
||||
const key = `${domain}-${feature}`;
|
||||
if (supportsCache[key]) return supportsCache[key];
|
||||
const range = features[feature];
|
||||
if (!range) return false;
|
||||
return (supportsCache[key] = satisfies(version, range, {
|
||||
includePrerelease: true,
|
||||
loose: true,
|
||||
}));
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export default supports;
|
|
@ -1,22 +1,25 @@
|
|||
// useInterval with Preact
|
||||
import { useEffect, useRef } from 'preact/hooks';
|
||||
|
||||
export default function useInterval(callback, delay) {
|
||||
const savedCallback = useRef();
|
||||
const noop = () => {};
|
||||
|
||||
function useInterval(callback, delay, immediate) {
|
||||
const savedCallback = useRef(noop);
|
||||
|
||||
// Remember the latest callback.
|
||||
useEffect(() => {
|
||||
savedCallback.current = callback;
|
||||
}, [callback]);
|
||||
}, []);
|
||||
|
||||
// Set up the interval.
|
||||
useEffect(() => {
|
||||
function tick() {
|
||||
if (!immediate || delay === null || delay === false) return;
|
||||
savedCallback.current();
|
||||
}
|
||||
if (delay !== null) {
|
||||
let id = setInterval(tick, delay);
|
||||
}, [immediate]);
|
||||
|
||||
useEffect(() => {
|
||||
if (delay === null || delay === false) return;
|
||||
const tick = () => savedCallback.current();
|
||||
const id = setInterval(tick, delay);
|
||||
return () => clearInterval(id);
|
||||
}
|
||||
}, [delay]);
|
||||
}
|
||||
|
||||
export default useInterval;
|
||||
|
|
17
src/utils/usePageVisibility.js
Normal file
17
src/utils/usePageVisibility.js
Normal file
|
@ -0,0 +1,17 @@
|
|||
import { useEffect, useRef } from 'preact/hooks';
|
||||
|
||||
export default function usePageVisibility(fn = () => {}, deps = []) {
|
||||
const savedCallback = useRef(fn, deps);
|
||||
|
||||
useEffect(() => {
|
||||
const handleVisibilityChange = () => {
|
||||
const hidden = document.hidden || document.visibilityState === 'hidden';
|
||||
console.log('👀 Page visibility changed', hidden ? 'hidden' : 'visible');
|
||||
savedCallback.current(!hidden);
|
||||
};
|
||||
|
||||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||||
return () =>
|
||||
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||||
}, []);
|
||||
}
|
|
@ -38,8 +38,16 @@ export default function useScroll({
|
|||
const scrollDimension = isVertical ? scrollHeight : scrollWidth;
|
||||
const clientDimension = isVertical ? clientHeight : clientWidth;
|
||||
const scrollDistance = Math.abs(scrollStart - previousScrollStart);
|
||||
const distanceFromStartPx = clientDimension * distanceFromStart;
|
||||
const distanceFromEndPx = clientDimension * distanceFromEnd;
|
||||
const distanceFromStartPx = Math.min(
|
||||
clientDimension * distanceFromStart,
|
||||
scrollDimension,
|
||||
scrollStart,
|
||||
);
|
||||
const distanceFromEndPx = Math.min(
|
||||
clientDimension * distanceFromEnd,
|
||||
scrollDimension,
|
||||
scrollDimension - scrollStart - clientDimension,
|
||||
);
|
||||
|
||||
if (
|
||||
scrollDistance >=
|
||||
|
|
|
@ -8,8 +8,23 @@ const { VITE_CLIENT_NAME: CLIENT_NAME } = import.meta.env;
|
|||
|
||||
export default function useTitle(title, path) {
|
||||
const snapStates = useSnapshot(states);
|
||||
const { currentLocation } = snapStates;
|
||||
let paths = [];
|
||||
// Workaround for matchPath not working for optional path segments
|
||||
// https://github.com/remix-run/react-router/discussions/9862
|
||||
if (/:?\w+\?/.test(path)) {
|
||||
paths.push(path.replace(/(:\w+)\?/g, '$1'));
|
||||
paths.push(path.replace(/\/?:\w+\?/g, ''));
|
||||
}
|
||||
let matched = false;
|
||||
if (paths.length) {
|
||||
matched = paths.some((p) => matchPath(p, currentLocation));
|
||||
} else if (path) {
|
||||
matched = matchPath(path, currentLocation);
|
||||
}
|
||||
console.debug({ paths, matched, currentLocation });
|
||||
useEffect(() => {
|
||||
if (path && !matchPath(path, snapStates.currentLocation)) return;
|
||||
if (path && !matched) return;
|
||||
document.title = title ? `${title} / ${CLIENT_NAME}` : CLIENT_NAME;
|
||||
}, [title, snapStates.currentLocation]);
|
||||
}
|
||||
|
|
|
@ -30,7 +30,9 @@ export default defineConfig({
|
|||
preact(),
|
||||
splitVendorChunkPlugin(),
|
||||
VitePluginHtmlEnv(),
|
||||
removeConsole(),
|
||||
removeConsole({
|
||||
includes: ['log', 'debug', 'info', 'warn', 'error'],
|
||||
}),
|
||||
htmlPlugin({
|
||||
headScripts: ERROR_LOGGING ? [rollbarCode] : [],
|
||||
}),
|
||||
|
|
Loading…
Reference in a new issue