Chee Aun
GitHub
commit
27a999f733
45
README.md
45
README.md
|
|
@ -9,6 +9,8 @@ Phanpy
|
|||
|
||||
<br>
|
||||
|
||||
**🗣️ Pronunciation**: [`/fænpi/`](https://ythi.net/how-do-you-pronounce/phanpy/english/) ([`FAN-pee`](https://www.smogon.com/forums/threads/the-official-name-pronunciation-guide.3474941/)) [🔊 Listen](https://www.youtube.com/watch?v=DIUbWe-ysJI)
|
||||
|
||||
This is an alternative web client for [Mastodon](https://joinmastodon.org/).
|
||||
|
||||
- 🏢 **Production**: https://phanpy.social
|
||||
|
|
@ -23,13 +25,7 @@ This is an alternative web client for [Mastodon](https://joinmastodon.org/).
|
|||
|
||||
🐘 Follow [@phanpy on Mastodon](https://hachyderm.io/@phanpy) for updates ✨
|
||||
|
||||
Everything is designed and engineered for my own use case, following my taste and vision. This is a personal side project for me to learn about Mastodon and experiment with new UI/UX ideas.
|
||||
|
||||
🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧
|
||||
|
||||
**🐘 This is an early ALPHA project. Many features are missing, many bugs are present. Please report issues as detailed as possible. Thanks 🙏**
|
||||
|
||||
🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧
|
||||
Everything is designed and engineered following my taste and vision. This is a personal side project for me to learn about Mastodon and experiment with new UI/UX ideas.
|
||||
|
||||
## Features
|
||||
|
||||
|
|
@ -37,7 +33,7 @@ Everything is designed and engineered for my own use case, following my taste an
|
|||
- 🪟 Compose window pop-out/in
|
||||
- 🌗 Light/dark/auto theme
|
||||
- 🔔 Grouped notifications
|
||||
- 🪺 Nested replies view
|
||||
- 🪺 Nested comments thread
|
||||
- 📬 Unsent draft recovery
|
||||
- 🎠 Boosts Carousel™️
|
||||
- ⚡ Shortcuts™️ with view modes like multi-column or tab bar
|
||||
|
|
@ -51,6 +47,33 @@ Everything is designed and engineered for my own use case, following my taste an
|
|||
- **No autoplay for video/GIF/whatever in timeline**.<br>The timeline is already a huge mess with lots of people, brands, news and media trying to grab your attention. Let's not make it worse. (Current exception now would be animated emojis.)
|
||||
- **Hash-based URLs**.<br>This web app is not meant to be a full-fledged replacement to Mastodon's existing front-end. There's no SEO, database, serverless or any long-running servers. I could be wrong one day.
|
||||
|
||||
## Subtle UI implementations
|
||||
|
||||
### User name display
|
||||
|
||||
|
||||
|
||||
- On the timeline, the user name is displayed as `[NAME] @[username]`.
|
||||
- For the `@[username]`, always exclude the instance domain name.
|
||||
- If the `[NAME]` *looks the same* as the `@[username]`, then the `@[username]` is excluded as well.
|
||||
|
||||
### Boosts Carousel
|
||||
|
||||
|
||||
|
||||
- From the fetched posts (e.g. 20 posts per fetch), if number of boosts are more than quarter of total posts or more than 3 consecutive boosts, boosts carousel UI will be triggered.
|
||||
- If number of boosts are more than 3 quarters of total posts, boosts carousel UI will be slotted at the end of total posts fetched (per "page").
|
||||
- Else, boosts carousel UI will be slotted in between the posts.
|
||||
|
||||
### Thread number badge (e.g. Thread 1/X)
|
||||
|
||||
|
||||
|
||||
- Check every post for `inReplyToId` from cache or additional API requests, until the root post is found.
|
||||
- If root post is found, badge will show the index number of the post in the thread.
|
||||
- Limit up to 3 API requests as the root post may be very old or the thread is super long.
|
||||
- If index number couldn't be found, badge will fallback to showing `Thread` without the number.
|
||||
|
||||
## Development
|
||||
|
||||
Prerequisites: Node.js 18+
|
||||
|
|
@ -63,6 +86,12 @@ Prerequisites: Node.js 18+
|
|||
- requires `.env.dev` file with `INSTANCES_SOCIAL_SECRET_TOKEN` variable set
|
||||
- `npm run sourcemap` - Run `source-map-explorer` on the production build
|
||||
|
||||
## Self-hosting
|
||||
|
||||
This is a **pure static web app**. You can host it anywhere you want. Build it by running `npm run build` and serve the `dist` folder.
|
||||
|
||||
Try search for "how to self-host static sites" as there are many ways to do it.
|
||||
|
||||
## Tech stack
|
||||
|
||||
- [Vite](https://vitejs.dev/) - Build tool
|
||||
|
|
|
|||
116
package-lock.json
generated
116
package-lock.json
generated
|
|
@ -10,16 +10,16 @@
|
|||
"dependencies": {
|
||||
"@formatjs/intl-localematcher": "~0.2.32",
|
||||
"@github/text-expander-element": "~2.3.0",
|
||||
"@iconify-icons/mingcute": "~1.2.4",
|
||||
"@iconify-icons/mingcute": "~1.2.5",
|
||||
"@justinribeiro/lite-youtube": "~1.5.0",
|
||||
"@szhsin/react-menu": "~3.5.2",
|
||||
"@szhsin/react-menu": "~3.5.3",
|
||||
"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",
|
||||
"idb-keyval": "~6.2.1",
|
||||
"just-debounce-it": "~3.2.0",
|
||||
"masto": "~5.11.2",
|
||||
"masto": "~5.11.3",
|
||||
"mem": "~9.0.2",
|
||||
"p-retry": "~5.1.2",
|
||||
"p-throttle": "~5.0.0",
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
"toastify-js": "~1.12.0",
|
||||
"uid": "~2.0.2",
|
||||
"use-debounce": "~9.0.4",
|
||||
"use-long-press": "~3.1.0",
|
||||
"use-long-press": "~3.1.3",
|
||||
"use-resize-observer": "~9.1.0",
|
||||
"valtio": "1.9.0"
|
||||
},
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
"postcss-dark-theme-class": "~0.7.3",
|
||||
"postcss-preset-env": "~8.3.2",
|
||||
"twitter-text": "~3.1.0",
|
||||
"vite": "~4.3.3",
|
||||
"vite": "~4.3.5",
|
||||
"vite-plugin-generate-file": "~0.0.4",
|
||||
"vite-plugin-html-config": "~1.0.11",
|
||||
"vite-plugin-pwa": "~0.14.7",
|
||||
|
|
@ -2667,9 +2667,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@iconify-icons/mingcute": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/@iconify-icons/mingcute/-/mingcute-1.2.4.tgz",
|
||||
"integrity": "sha512-4aaWYa6GxSdYmJg8iBVx6VDuKUcTDEbio929+GrswoxfyTsPUkOOgw2wffUDHjE3JDUAnrWj9teQTnBkFm7Gyg==",
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@iconify-icons/mingcute/-/mingcute-1.2.5.tgz",
|
||||
"integrity": "sha512-fTzhb0TVYuD89Do9sUR9mu2RYZ2XGOyOxzoZL2W53R9w+j0myuo0bnRpoGlbnXPV+/N+P8vUBJEsQRWvmEPQfw==",
|
||||
"dependencies": {
|
||||
"@iconify/types": "*"
|
||||
}
|
||||
|
|
@ -2962,9 +2962,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@szhsin/react-menu": {
|
||||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@szhsin/react-menu/-/react-menu-3.5.2.tgz",
|
||||
"integrity": "sha512-eR7dzDBrwlt9RSgGmLXjfA1Rd5tYqD5mnqjQgZJysf3Jt3vBPkrbDT1oW21nLpfUCkyUQOuZ38n2IdhWl9KkzQ==",
|
||||
"version": "3.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@szhsin/react-menu/-/react-menu-3.5.3.tgz",
|
||||
"integrity": "sha512-jxo8oaRwxmVjUzkyOi/ZJiXaZiuFPMIxFzyJdUKfnhBLYiEOVTU9M2CiPuEkirILoareR2GJj2K3y8a81CBPlw==",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.7.2",
|
||||
"react-transition-state": "^1.1.5"
|
||||
|
|
@ -4293,12 +4293,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/idb-keyval": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.0.tgz",
|
||||
"integrity": "sha512-uw+MIyQn2jl3+hroD7hF8J7PUviBU7BPKWw4f/ISf32D4LoGu98yHjrzWWJDASu9QNrX10tCJqk9YY0ClWm8Ng==",
|
||||
"dependencies": {
|
||||
"safari-14-idb-fix": "^3.0.0"
|
||||
}
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.1.tgz",
|
||||
"integrity": "sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg=="
|
||||
},
|
||||
"node_modules/inflight": {
|
||||
"version": "1.0.6",
|
||||
|
|
@ -4860,9 +4857,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/masto": {
|
||||
"version": "5.11.2",
|
||||
"resolved": "https://registry.npmjs.org/masto/-/masto-5.11.2.tgz",
|
||||
"integrity": "sha512-1F2O4itZXCchqmGh/Dor+AfgyxKGfUrquLK81H+Adw9vs5BoOtdNThuFhXf1m2enXzbVEvJUwxBVd82s2x5FSg==",
|
||||
"version": "5.11.3",
|
||||
"resolved": "https://registry.npmjs.org/masto/-/masto-5.11.3.tgz",
|
||||
"integrity": "sha512-GtSnrqm5fHPaaU0iwag4LCmvpp82rDng6yOZinmOJHHlUfo6Gnq5QY6x3lJCxCnsPIXpTu1yaX42bWrSQyoQPA==",
|
||||
"dependencies": {
|
||||
"@mastojs/ponyfills": "^1.0.4",
|
||||
"change-case": "^4.1.2",
|
||||
|
|
@ -4870,7 +4867,7 @@
|
|||
"isomorphic-ws": "^5.0.0",
|
||||
"qs": "^6.11.0",
|
||||
"semver": "^7.3.7",
|
||||
"ws": "^8.12.0"
|
||||
"ws": "^8.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/masto/node_modules/semver": {
|
||||
|
|
@ -6198,11 +6195,6 @@
|
|||
"queue-microtask": "^1.2.2"
|
||||
}
|
||||
},
|
||||
"node_modules/safari-14-idb-fix": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/safari-14-idb-fix/-/safari-14-idb-fix-3.0.0.tgz",
|
||||
"integrity": "sha512-eBNFLob4PMq8JA1dGyFn6G97q3/WzNtFK4RnzT1fnLq+9RyrGknzYiM/9B12MnKAxuj1IXr7UKYtTNtjyKMBog=="
|
||||
},
|
||||
"node_modules/safe-buffer": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
|
||||
|
|
@ -6739,9 +6731,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/use-long-press": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/use-long-press/-/use-long-press-3.1.0.tgz",
|
||||
"integrity": "sha512-SSCCgsIlGql/gWRf5v/5CoWxUkSccFuLiMO2tjggUdf0qt5FGb/TD1l0aJ2j+G3J0BT2a7jsJQIDsmUiUuhRTg==",
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/use-long-press/-/use-long-press-3.1.3.tgz",
|
||||
"integrity": "sha512-RAK+i3mIPAFL10Q9wVqfzjDTIg/oXSB60c+bbwNkc1GzIWNF7UfRydJ2VX8IQ+yG2eptzEuWb1CmJc2UNu6fOg==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
|
|
@ -6793,9 +6785,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "4.3.3",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.3.3.tgz",
|
||||
"integrity": "sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==",
|
||||
"version": "4.3.5",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.3.5.tgz",
|
||||
"integrity": "sha512-0gEnL9wiRFxgz40o/i/eTBwm+NEbpUeTWhzKrZDSdKm6nplj+z4lKz8ANDgildxHm47Vg8EUia0aicKbawUVVA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.17.5",
|
||||
|
|
@ -7334,9 +7326,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "8.12.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.12.0.tgz",
|
||||
"integrity": "sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==",
|
||||
"version": "8.13.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
|
||||
"integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
|
|
@ -8964,9 +8956,9 @@
|
|||
}
|
||||
},
|
||||
"@iconify-icons/mingcute": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/@iconify-icons/mingcute/-/mingcute-1.2.4.tgz",
|
||||
"integrity": "sha512-4aaWYa6GxSdYmJg8iBVx6VDuKUcTDEbio929+GrswoxfyTsPUkOOgw2wffUDHjE3JDUAnrWj9teQTnBkFm7Gyg==",
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@iconify-icons/mingcute/-/mingcute-1.2.5.tgz",
|
||||
"integrity": "sha512-fTzhb0TVYuD89Do9sUR9mu2RYZ2XGOyOxzoZL2W53R9w+j0myuo0bnRpoGlbnXPV+/N+P8vUBJEsQRWvmEPQfw==",
|
||||
"requires": {
|
||||
"@iconify/types": "*"
|
||||
}
|
||||
|
|
@ -9198,9 +9190,9 @@
|
|||
}
|
||||
},
|
||||
"@szhsin/react-menu": {
|
||||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@szhsin/react-menu/-/react-menu-3.5.2.tgz",
|
||||
"integrity": "sha512-eR7dzDBrwlt9RSgGmLXjfA1Rd5tYqD5mnqjQgZJysf3Jt3vBPkrbDT1oW21nLpfUCkyUQOuZ38n2IdhWl9KkzQ==",
|
||||
"version": "3.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@szhsin/react-menu/-/react-menu-3.5.3.tgz",
|
||||
"integrity": "sha512-jxo8oaRwxmVjUzkyOi/ZJiXaZiuFPMIxFzyJdUKfnhBLYiEOVTU9M2CiPuEkirILoareR2GJj2K3y8a81CBPlw==",
|
||||
"requires": {
|
||||
"prop-types": "^15.7.2",
|
||||
"react-transition-state": "^1.1.5"
|
||||
|
|
@ -10204,12 +10196,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"idb-keyval": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.0.tgz",
|
||||
"integrity": "sha512-uw+MIyQn2jl3+hroD7hF8J7PUviBU7BPKWw4f/ISf32D4LoGu98yHjrzWWJDASu9QNrX10tCJqk9YY0ClWm8Ng==",
|
||||
"requires": {
|
||||
"safari-14-idb-fix": "^3.0.0"
|
||||
}
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.1.tgz",
|
||||
"integrity": "sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg=="
|
||||
},
|
||||
"inflight": {
|
||||
"version": "1.0.6",
|
||||
|
|
@ -10621,9 +10610,9 @@
|
|||
}
|
||||
},
|
||||
"masto": {
|
||||
"version": "5.11.2",
|
||||
"resolved": "https://registry.npmjs.org/masto/-/masto-5.11.2.tgz",
|
||||
"integrity": "sha512-1F2O4itZXCchqmGh/Dor+AfgyxKGfUrquLK81H+Adw9vs5BoOtdNThuFhXf1m2enXzbVEvJUwxBVd82s2x5FSg==",
|
||||
"version": "5.11.3",
|
||||
"resolved": "https://registry.npmjs.org/masto/-/masto-5.11.3.tgz",
|
||||
"integrity": "sha512-GtSnrqm5fHPaaU0iwag4LCmvpp82rDng6yOZinmOJHHlUfo6Gnq5QY6x3lJCxCnsPIXpTu1yaX42bWrSQyoQPA==",
|
||||
"requires": {
|
||||
"@mastojs/ponyfills": "^1.0.4",
|
||||
"change-case": "^4.1.2",
|
||||
|
|
@ -10631,7 +10620,7 @@
|
|||
"isomorphic-ws": "^5.0.0",
|
||||
"qs": "^6.11.0",
|
||||
"semver": "^7.3.7",
|
||||
"ws": "^8.12.0"
|
||||
"ws": "^8.13.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"semver": {
|
||||
|
|
@ -11455,11 +11444,6 @@
|
|||
"queue-microtask": "^1.2.2"
|
||||
}
|
||||
},
|
||||
"safari-14-idb-fix": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/safari-14-idb-fix/-/safari-14-idb-fix-3.0.0.tgz",
|
||||
"integrity": "sha512-eBNFLob4PMq8JA1dGyFn6G97q3/WzNtFK4RnzT1fnLq+9RyrGknzYiM/9B12MnKAxuj1IXr7UKYtTNtjyKMBog=="
|
||||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
|
||||
|
|
@ -11857,9 +11841,9 @@
|
|||
"requires": {}
|
||||
},
|
||||
"use-long-press": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/use-long-press/-/use-long-press-3.1.0.tgz",
|
||||
"integrity": "sha512-SSCCgsIlGql/gWRf5v/5CoWxUkSccFuLiMO2tjggUdf0qt5FGb/TD1l0aJ2j+G3J0BT2a7jsJQIDsmUiUuhRTg==",
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/use-long-press/-/use-long-press-3.1.3.tgz",
|
||||
"integrity": "sha512-RAK+i3mIPAFL10Q9wVqfzjDTIg/oXSB60c+bbwNkc1GzIWNF7UfRydJ2VX8IQ+yG2eptzEuWb1CmJc2UNu6fOg==",
|
||||
"requires": {}
|
||||
},
|
||||
"use-resize-observer": {
|
||||
|
|
@ -11892,9 +11876,9 @@
|
|||
}
|
||||
},
|
||||
"vite": {
|
||||
"version": "4.3.3",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.3.3.tgz",
|
||||
"integrity": "sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==",
|
||||
"version": "4.3.5",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.3.5.tgz",
|
||||
"integrity": "sha512-0gEnL9wiRFxgz40o/i/eTBwm+NEbpUeTWhzKrZDSdKm6nplj+z4lKz8ANDgildxHm47Vg8EUia0aicKbawUVVA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"esbuild": "^0.17.5",
|
||||
|
|
@ -12314,9 +12298,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"ws": {
|
||||
"version": "8.12.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.12.0.tgz",
|
||||
"integrity": "sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==",
|
||||
"version": "8.13.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
|
||||
"integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
|
||||
"requires": {}
|
||||
},
|
||||
"yallist": {
|
||||
|
|
|
|||
12
package.json
12
package.json
|
|
@ -12,16 +12,16 @@
|
|||
"dependencies": {
|
||||
"@formatjs/intl-localematcher": "~0.2.32",
|
||||
"@github/text-expander-element": "~2.3.0",
|
||||
"@iconify-icons/mingcute": "~1.2.4",
|
||||
"@iconify-icons/mingcute": "~1.2.5",
|
||||
"@justinribeiro/lite-youtube": "~1.5.0",
|
||||
"@szhsin/react-menu": "~3.5.2",
|
||||
"@szhsin/react-menu": "~3.5.3",
|
||||
"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",
|
||||
"idb-keyval": "~6.2.1",
|
||||
"just-debounce-it": "~3.2.0",
|
||||
"masto": "~5.11.2",
|
||||
"masto": "~5.11.3",
|
||||
"mem": "~9.0.2",
|
||||
"p-retry": "~5.1.2",
|
||||
"p-throttle": "~5.0.0",
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
"toastify-js": "~1.12.0",
|
||||
"uid": "~2.0.2",
|
||||
"use-debounce": "~9.0.4",
|
||||
"use-long-press": "~3.1.0",
|
||||
"use-long-press": "~3.1.3",
|
||||
"use-resize-observer": "~9.1.0",
|
||||
"valtio": "1.9.0"
|
||||
},
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
"postcss-dark-theme-class": "~0.7.3",
|
||||
"postcss-preset-env": "~8.3.2",
|
||||
"twitter-text": "~3.1.0",
|
||||
"vite": "~4.3.3",
|
||||
"vite": "~4.3.5",
|
||||
"vite-plugin-generate-file": "~0.0.4",
|
||||
"vite-plugin-html-config": "~1.0.11",
|
||||
"vite-plugin-pwa": "~0.14.7",
|
||||
|
|
|
|||
BIN
readme-assets/boosts-carousel.jpg
Normal file
BIN
readme-assets/boosts-carousel.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
readme-assets/thread-number-badge.jpg
Normal file
BIN
readme-assets/thread-number-badge.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
readme-assets/user-name-display.jpg
Normal file
BIN
readme-assets/user-name-display.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
42
src/app.css
42
src/app.css
|
|
@ -256,6 +256,11 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
.timeline.contextual > li.descendant:not(.thread) > .status-link {
|
||||
padding-left: 40px;
|
||||
}
|
||||
.timeline.contextual .replies[data-scroll-left]:not([data-scroll-left='0']) {
|
||||
background-color: var(--bg-color);
|
||||
box-shadow: inset 0 -3px var(--comment-line-color),
|
||||
inset 0 3px var(--comment-line-color);
|
||||
}
|
||||
.timeline.contextual .replies[data-comments-level='4'] {
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
@ -272,7 +277,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
.replies[data-comments-level='4']
|
||||
.replies[data-comments-level-overflow='true']
|
||||
.status {
|
||||
min-width: min(15em, 75vw);
|
||||
min-width: min(20em, 80vw);
|
||||
}
|
||||
.timeline.contextual
|
||||
> li.descendant.thread
|
||||
|
|
@ -432,7 +437,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
.timeline.contextual > li .replies {
|
||||
margin-top: -12px;
|
||||
}
|
||||
.timeline.contextual > li .replies :is(ul, li) {
|
||||
.timeline.contextual > li .replies :is(ul, li):not(.content *) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
|
@ -478,10 +483,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
.timeline.contextual > li .replies .replies-summary[hidden] {
|
||||
display: none;
|
||||
}
|
||||
.timeline.contextual > li .replies li {
|
||||
.timeline.contextual > li .replies li:not(.content li) {
|
||||
position: relative;
|
||||
}
|
||||
.timeline.contextual > li .replies li {
|
||||
.timeline.contextual > li .replies li:not(.content li) {
|
||||
--line-start: calc(
|
||||
var(--thread-start) + var(--line-margin-end) * var(--comments-level)
|
||||
);
|
||||
|
|
@ -503,7 +508,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
.timeline.contextual > li .replies .replies .replies li {
|
||||
--line-start: calc(var(--thread-start) + (var(--line-margin-end) * 3));
|
||||
} */
|
||||
.timeline.contextual > li.thread .replies li {
|
||||
.timeline.contextual > li.thread .replies li:not(.content li) {
|
||||
--line-start: calc(
|
||||
var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
|
||||
(var(--line-margin-end) * (var(--comments-level) - 1))
|
||||
|
|
@ -521,10 +526,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
(var(--line-margin-end) * 2)
|
||||
);
|
||||
} */
|
||||
.timeline.contextual > li .replies li:last-child {
|
||||
.timeline.contextual > li .replies li:not(.content li):last-child {
|
||||
background-size: 100% 20px;
|
||||
}
|
||||
.timeline.contextual > li .replies li:before {
|
||||
.timeline.contextual > li .replies li:not(.content li):before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
|
|
@ -547,7 +552,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
var(--thread-start) + var(--line-margin-end) + (var(--line-margin-end) * 2)
|
||||
);
|
||||
} */
|
||||
.timeline.contextual > li.thread .replies li:before {
|
||||
.timeline.contextual > li.thread .replies li:not(.content li):before {
|
||||
--line-start: calc(
|
||||
var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
|
||||
(var(--line-margin-end) * (var(--comments-level) - 1))
|
||||
|
|
@ -709,7 +714,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
color: var(--carousel-color);
|
||||
text-shadow: 0 1px var(--bg-color);
|
||||
}
|
||||
.status-carousel ul {
|
||||
.status-carousel > ul {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
|
|
@ -721,7 +726,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
align-items: flex-start;
|
||||
counter-reset: index;
|
||||
}
|
||||
.status-carousel ul > li {
|
||||
.status-carousel > ul > li {
|
||||
scroll-snap-align: center;
|
||||
scroll-snap-stop: always;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -736,8 +741,11 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
counter-increment: index;
|
||||
position: relative;
|
||||
}
|
||||
.status-carousel > ul > li:is(:empty, :has(> a:empty)) {
|
||||
display: none;
|
||||
}
|
||||
@media (hover: hover) or (pointer: fine) or (min-width: 40em) {
|
||||
.status-carousel ul {
|
||||
.status-carousel > ul {
|
||||
scroll-snap-type: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -759,7 +767,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
.status-carousel.boosts-carousel .status-reblog {
|
||||
background-image: none;
|
||||
}
|
||||
.status-carousel.boosts-carousel ul > li:before {
|
||||
.status-carousel.boosts-carousel > ul > li:before {
|
||||
content: counter(index);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -1158,12 +1166,12 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
|
|||
padding: 16px;
|
||||
background-color: var(--button-bg-blur-color);
|
||||
backdrop-filter: blur(16px);
|
||||
z-index: 1;
|
||||
z-index: 10;
|
||||
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,
|
||||
.deck-container:has(header[hidden]) ~ #compose-button,
|
||||
#compose-button[hidden] {
|
||||
transform: translateY(200%);
|
||||
pointer-events: none;
|
||||
|
|
@ -1309,6 +1317,9 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
|
|||
.tag .icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tag.collapsed {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* MENU POPUP */
|
||||
|
||||
|
|
@ -1897,6 +1908,9 @@ ul.link-list li a .icon {
|
|||
);
|
||||
align-items: center;
|
||||
}
|
||||
.filter-bar.centered {
|
||||
justify-content: center;
|
||||
}
|
||||
@media (min-width: 40em) {
|
||||
.filter-bar {
|
||||
background-color: transparent;
|
||||
|
|
|
|||
43
src/app.jsx
43
src/app.jsx
|
|
@ -21,6 +21,7 @@ import { useSnapshot } from 'valtio';
|
|||
import AccountSheet from './components/account-sheet';
|
||||
import Compose from './components/compose';
|
||||
import Drafts from './components/drafts';
|
||||
import Icon from './components/icon';
|
||||
import Loader from './components/loader';
|
||||
import MediaModal from './components/media-modal';
|
||||
import Modal from './components/modal';
|
||||
|
|
@ -55,6 +56,7 @@ import {
|
|||
initPreferences,
|
||||
} from './utils/api';
|
||||
import { getAccessToken } from './utils/auth';
|
||||
import openCompose from './utils/open-compose';
|
||||
import showToast from './utils/show-toast';
|
||||
import states, { getStatus, saveStatus } from './utils/states';
|
||||
import store from './utils/store';
|
||||
|
|
@ -110,7 +112,7 @@ function App() {
|
|||
|
||||
const masto = initClient({ instance: instanceURL, accessToken });
|
||||
await Promise.allSettled([
|
||||
initInstance(masto),
|
||||
initInstance(masto, instanceURL),
|
||||
initAccount(masto, instanceURL, accessToken),
|
||||
]);
|
||||
initPreferences(masto);
|
||||
|
|
@ -122,13 +124,13 @@ function App() {
|
|||
const account = getCurrentAccount();
|
||||
if (account) {
|
||||
store.session.set('currentAccount', account.info.id);
|
||||
const { masto } = api({ account });
|
||||
const { masto, instance } = api({ account });
|
||||
console.log('masto', masto);
|
||||
initPreferences(masto);
|
||||
setUIState('loading');
|
||||
(async () => {
|
||||
try {
|
||||
await initInstance(masto);
|
||||
await initInstance(masto, instance);
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setIsLoggedIn(true);
|
||||
|
|
@ -263,13 +265,30 @@ function App() {
|
|||
<Route path="/:instance?/s/:id" element={<StatusRoute />} />
|
||||
</Routes>
|
||||
)}
|
||||
<div>
|
||||
{isLoggedIn &&
|
||||
!snapStates.settings.shortcutsColumnsMode &&
|
||||
snapStates.settings.shortcutsViewMode !== 'multi-column' && (
|
||||
<Shortcuts />
|
||||
)}
|
||||
</div>
|
||||
{isLoggedIn && (
|
||||
<button
|
||||
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="xl" alt="Compose" />
|
||||
</button>
|
||||
)}
|
||||
{isLoggedIn &&
|
||||
!snapStates.settings.shortcutsColumnsMode &&
|
||||
snapStates.settings.shortcutsViewMode !== 'multi-column' && (
|
||||
<Shortcuts />
|
||||
)}
|
||||
{!!snapStates.showCompose && (
|
||||
<Modal>
|
||||
<Compose
|
||||
|
|
@ -295,7 +314,7 @@ function App() {
|
|||
if (newStatus) {
|
||||
states.reloadStatusPage++;
|
||||
showToast({
|
||||
text: 'Status posted. Check it out.',
|
||||
text: 'Post published. Check it out.',
|
||||
delay: 1000,
|
||||
duration: 10_000, // 10 seconds
|
||||
onClick: (toast) => {
|
||||
|
|
@ -484,7 +503,7 @@ function BackgroundService({ isLoggedIn }) {
|
|||
console.error(e);
|
||||
});
|
||||
};
|
||||
useInterval(() => checkForUpdates, visible && 1000 * 60 * 30); // 30 minutes
|
||||
useInterval(checkForUpdates, visible && 1000 * 60 * 30); // 30 minutes
|
||||
usePageVisibility((visible) => {
|
||||
if (visible) {
|
||||
if (!lastCheckDate.current) {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ body.cloak .name-text,
|
|||
body.cloak .name-text *,
|
||||
body.cloak .status .content-container,
|
||||
body.cloak .status .content-container *,
|
||||
body.cloak .status .content-compact,
|
||||
body.cloak .account-container :is(header, main > *:not(.actions)),
|
||||
body.cloak .account-container :is(header, main > *:not(.actions)) *,
|
||||
body.cloak .header-account,
|
||||
|
|
@ -11,6 +12,11 @@ body.cloak .account-block {
|
|||
text-rendering: optimizeSpeed;
|
||||
filter: opacity(0.5);
|
||||
}
|
||||
body.cloak .name-text *,
|
||||
body.cloak .status .content-container *,
|
||||
body.cloak .account-container :is(header, main > *:not(.actions)) * {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
body.cloak .status :is(img, video, audio),
|
||||
body.cloak .avatar,
|
||||
|
|
|
|||
|
|
@ -199,17 +199,6 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.account-container .common-followers {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
transition: grid-template-rows 0.5s ease-in-out;
|
||||
}
|
||||
.account-container .common-followers[hidden] {
|
||||
grid-template-rows: 0fr;
|
||||
}
|
||||
.account-container .common-followers > .common-followers-inner {
|
||||
overflow: hidden;
|
||||
}
|
||||
.account-container .common-followers p {
|
||||
font-size: 90%;
|
||||
color: var(--text-insignificant-color);
|
||||
|
|
|
|||
|
|
@ -487,8 +487,11 @@ function RelatedActions({ info, instance, authenticated }) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div class="common-followers" hidden={!familiarFollowers?.length}>
|
||||
<div class="common-followers-inner">
|
||||
<div
|
||||
class="common-followers shazam-container no-animation"
|
||||
hidden={!familiarFollowers?.length}
|
||||
>
|
||||
<div class="shazam-container-inner">
|
||||
<p>
|
||||
Also followed by{' '}
|
||||
<span class="ib">
|
||||
|
|
@ -521,7 +524,7 @@ function RelatedActions({ info, instance, authenticated }) {
|
|||
<span class="tag">Following you</span>
|
||||
) : !!lastStatusAt ? (
|
||||
<small class="insignificant">
|
||||
Last status:{' '}
|
||||
Last post:{' '}
|
||||
{niceDateTime(lastStatusAt, {
|
||||
hideTime: true,
|
||||
})}
|
||||
|
|
@ -778,6 +781,9 @@ function RelatedActions({ info, instance, authenticated }) {
|
|||
</>
|
||||
)}
|
||||
</Menu>
|
||||
{!relationship && relationshipUIState === 'loading' && (
|
||||
<Loader abrupt />
|
||||
)}
|
||||
{!!relationship && (
|
||||
<button
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -642,14 +642,14 @@ function Compose({
|
|||
<div class="status-preview-legend reply-to">
|
||||
Replying to @
|
||||
{replyToStatus.account.acct || replyToStatus.account.username}
|
||||
’s status
|
||||
’s post
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!!editStatus && (
|
||||
<div class="status-preview">
|
||||
<Status status={editStatus} size="s" previewMode />
|
||||
<div class="status-preview-legend">Editing source status</div>
|
||||
<div class="status-preview-legend">Editing source post</div>
|
||||
</div>
|
||||
)}
|
||||
<form
|
||||
|
|
@ -904,7 +904,7 @@ function Compose({
|
|||
replyToStatus
|
||||
? 'Post your reply'
|
||||
: editStatus
|
||||
? 'Edit your status'
|
||||
? 'Edit your post'
|
||||
: 'What are you doing?'
|
||||
}
|
||||
required={mediaAttachments?.length === 0}
|
||||
|
|
|
|||
54
src/components/follow-request-buttons.jsx
Normal file
54
src/components/follow-request-buttons.jsx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import { useState } from 'preact/hooks';
|
||||
|
||||
import { api } from '../utils/api';
|
||||
|
||||
import Loader from './loader';
|
||||
|
||||
function FollowRequestButtons({ accountID, onChange }) {
|
||||
const { masto } = api();
|
||||
const [uiState, setUIState] = useState('default');
|
||||
return (
|
||||
<p class="follow-request-buttons">
|
||||
<button
|
||||
type="button"
|
||||
disabled={uiState === 'loading'}
|
||||
onClick={() => {
|
||||
setUIState('loading');
|
||||
(async () => {
|
||||
try {
|
||||
await masto.v1.followRequests.authorize(accountID);
|
||||
onChange();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setUIState('default');
|
||||
}
|
||||
})();
|
||||
}}
|
||||
>
|
||||
Accept
|
||||
</button>{' '}
|
||||
<button
|
||||
type="button"
|
||||
disabled={uiState === 'loading'}
|
||||
class="light danger"
|
||||
onClick={() => {
|
||||
setUIState('loading');
|
||||
(async () => {
|
||||
try {
|
||||
await masto.v1.followRequests.reject(accountID);
|
||||
onChange();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setUIState('default');
|
||||
}
|
||||
})();
|
||||
}}
|
||||
>
|
||||
Reject
|
||||
</button>
|
||||
<Loader hidden={uiState !== 'loading'} />
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
export default FollowRequestButtons;
|
||||
|
|
@ -79,6 +79,7 @@ const ICONS = {
|
|||
react: 'mingcute:react-line',
|
||||
layout4: 'mingcute:layout-4-line',
|
||||
layout5: 'mingcute:layout-5-line',
|
||||
announce: 'mingcute:announcement-line',
|
||||
};
|
||||
|
||||
const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const Link = forwardRef((props, ref) => {
|
|||
let hash = (location.hash || '').replace(/^#/, '').trim();
|
||||
if (hash === '') hash = '/';
|
||||
const { to, ...restProps } = props;
|
||||
const isActive = hash === to;
|
||||
const isActive = decodeURIComponent(hash) === to;
|
||||
return (
|
||||
<a
|
||||
ref={ref}
|
||||
|
|
|
|||
|
|
@ -17,13 +17,24 @@ audio = Audio track
|
|||
*/
|
||||
|
||||
function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
|
||||
const { blurhash, description, meta, previewUrl, remoteUrl, url, type } =
|
||||
media;
|
||||
const {
|
||||
blurhash,
|
||||
description,
|
||||
meta,
|
||||
previewRemoteUrl,
|
||||
previewUrl,
|
||||
remoteUrl,
|
||||
url,
|
||||
type,
|
||||
} = media;
|
||||
const { original = {}, small, focus } = meta || {};
|
||||
|
||||
const width = showOriginal ? original?.width : small?.width;
|
||||
const height = showOriginal ? original?.height : small?.height;
|
||||
const mediaURL = showOriginal ? url : previewUrl;
|
||||
const mediaURL = showOriginal ? url : previewUrl || url;
|
||||
const remoteMediaURL = showOriginal
|
||||
? remoteUrl
|
||||
: previewRemoteUrl || remoteUrl;
|
||||
const orientation = width >= height ? 'landscape' : 'portrait';
|
||||
|
||||
const rgbAverageColor = blurhash ? getBlurHashAverageColor(blurhash) : null;
|
||||
|
|
@ -113,6 +124,12 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
|
|||
e.target.closest('.media-zoom').style.display = '';
|
||||
setPinchZoomEnabled(true);
|
||||
}}
|
||||
onError={(e) => {
|
||||
const { src } = e.target;
|
||||
if (src === mediaURL) {
|
||||
e.target.src = remoteMediaURL;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</QuickPinchZoom>
|
||||
) : (
|
||||
|
|
@ -131,6 +148,12 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
|
|||
onLoad={(e) => {
|
||||
e.target.closest('.media-image').style.backgroundImage = '';
|
||||
}}
|
||||
onError={(e) => {
|
||||
const { src } = e.target;
|
||||
if (src === mediaURL) {
|
||||
e.target.src = remoteMediaURL;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Parent>
|
||||
|
|
|
|||
|
|
@ -97,6 +97,8 @@ function NavMenu(props) {
|
|||
{...props}
|
||||
overflow="auto"
|
||||
viewScroll="close"
|
||||
position="anchor"
|
||||
align="center"
|
||||
boundingBoxPadding="8 8 8 8"
|
||||
unmountOnClose
|
||||
>
|
||||
|
|
|
|||
209
src/components/notification.jsx
Normal file
209
src/components/notification.jsx
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
import states from '../utils/states';
|
||||
import store from '../utils/store';
|
||||
|
||||
import Avatar from './avatar';
|
||||
import FollowRequestButtons from './follow-request-buttons';
|
||||
import Icon from './icon';
|
||||
import Link from './link';
|
||||
import NameText from './name-text';
|
||||
import RelativeTime from './relative-time';
|
||||
import Status from './status';
|
||||
|
||||
const NOTIFICATION_ICONS = {
|
||||
mention: 'comment',
|
||||
status: 'notification',
|
||||
reblog: 'rocket',
|
||||
follow: 'follow',
|
||||
follow_request: 'follow-add',
|
||||
favourite: 'heart',
|
||||
poll: 'poll',
|
||||
update: 'pencil',
|
||||
};
|
||||
|
||||
/*
|
||||
Notification types
|
||||
==================
|
||||
mention = Someone mentioned you in their status
|
||||
status = Someone you enabled notifications for has posted a status
|
||||
reblog = Someone boosted one of your statuses
|
||||
follow = Someone followed you
|
||||
follow_request = Someone requested to follow you
|
||||
favourite = Someone favourited one of your statuses
|
||||
poll = A poll you have voted in or created has ended
|
||||
update = A status you interacted with has been edited
|
||||
admin.sign_up = Someone signed up (optionally sent to admins)
|
||||
admin.report = A new report has been filed
|
||||
*/
|
||||
|
||||
const contentText = {
|
||||
mention: 'mentioned you in their post.',
|
||||
status: 'published a post.',
|
||||
reblog: 'boosted your post.',
|
||||
follow: 'followed you.',
|
||||
follow_request: 'requested to follow you.',
|
||||
favourite: 'favourited your post.',
|
||||
poll: 'A poll you have voted in or created has ended.',
|
||||
'poll-self': 'A poll you have created has ended.',
|
||||
'poll-voted': 'A poll you have voted in has ended.',
|
||||
update: 'A post you interacted with has been edited.',
|
||||
'favourite+reblog': 'boosted & favourited your post.',
|
||||
};
|
||||
|
||||
function Notification({ notification, instance, reload }) {
|
||||
const { id, status, account, _accounts } = notification;
|
||||
let { type } = notification;
|
||||
|
||||
// status = Attached when type of the notification is favourite, reblog, status, mention, poll, or update
|
||||
const actualStatusID = status?.reblog?.id || status?.id;
|
||||
|
||||
const currentAccount = store.session.get('currentAccount');
|
||||
const isSelf = currentAccount === account?.id;
|
||||
const isVoted = status?.poll?.voted;
|
||||
|
||||
let favsCount = 0;
|
||||
let reblogsCount = 0;
|
||||
if (type === 'favourite+reblog') {
|
||||
for (const account of _accounts) {
|
||||
if (account._types?.includes('favourite')) {
|
||||
favsCount++;
|
||||
}
|
||||
if (account._types?.includes('reblog')) {
|
||||
reblogsCount++;
|
||||
}
|
||||
}
|
||||
if (!reblogsCount && favsCount) type = 'favourite';
|
||||
if (!favsCount && reblogsCount) type = 'reblog';
|
||||
}
|
||||
|
||||
const text =
|
||||
type === 'poll'
|
||||
? contentText[isSelf ? 'poll-self' : isVoted ? 'poll-voted' : 'poll']
|
||||
: contentText[type];
|
||||
|
||||
if (type === 'mention' && !status) {
|
||||
// Could be deleted
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div class={`notification notification-${type}`} tabIndex="0">
|
||||
<div
|
||||
class={`notification-type notification-${type}`}
|
||||
title={new Date(notification.createdAt).toLocaleString()}
|
||||
>
|
||||
{type === 'favourite+reblog' ? (
|
||||
<>
|
||||
<Icon icon="rocket" size="xl" alt={type} class="reblog-icon" />
|
||||
<Icon icon="heart" size="xl" alt={type} class="favourite-icon" />
|
||||
</>
|
||||
) : (
|
||||
<Icon
|
||||
icon={NOTIFICATION_ICONS[type] || 'notification'}
|
||||
size="xl"
|
||||
alt={type}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div class="notification-content">
|
||||
{type !== 'mention' && (
|
||||
<>
|
||||
<p>
|
||||
{!/poll|update/i.test(type) && (
|
||||
<>
|
||||
{_accounts?.length > 1 ? (
|
||||
<>
|
||||
<b>{_accounts.length} people</b>{' '}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<NameText account={account} showAvatar />{' '}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{text}
|
||||
{type === 'mention' && (
|
||||
<span class="insignificant">
|
||||
{' '}
|
||||
•{' '}
|
||||
<RelativeTime
|
||||
datetime={notification.createdAt}
|
||||
format="micro"
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
{type === 'follow_request' && (
|
||||
<FollowRequestButtons
|
||||
accountID={account.id}
|
||||
onChange={() => {
|
||||
reload();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{_accounts?.length > 1 && (
|
||||
<p class="avatars-stack">
|
||||
{_accounts.map((account, i) => (
|
||||
<>
|
||||
<a
|
||||
href={account.url}
|
||||
rel="noopener noreferrer"
|
||||
class="account-avatar-stack"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
states.showAccount = account;
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
url={account.avatarStatic}
|
||||
size={
|
||||
_accounts.length <= 10
|
||||
? 'xxl'
|
||||
: _accounts.length < 100
|
||||
? 'xl'
|
||||
: _accounts.length < 1000
|
||||
? 'l'
|
||||
: _accounts.length < 2000
|
||||
? 'm'
|
||||
: 's' // My god, this person is popular!
|
||||
}
|
||||
key={account.id}
|
||||
alt={`${account.displayName} @${account.acct}`}
|
||||
squircle={account?.bot}
|
||||
/>
|
||||
{type === 'favourite+reblog' && (
|
||||
<div class="account-sub-icons">
|
||||
{account._types.map((type) => (
|
||||
<Icon
|
||||
icon={NOTIFICATION_ICONS[type]}
|
||||
size="s"
|
||||
class={`${type}-icon`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</a>{' '}
|
||||
</>
|
||||
))}
|
||||
</p>
|
||||
)}
|
||||
{status && (
|
||||
<Link
|
||||
class={`status-link status-type-${type}`}
|
||||
to={
|
||||
instance
|
||||
? `/${instance}/s/${actualStatusID}`
|
||||
: `/s/${actualStatusID}`
|
||||
}
|
||||
>
|
||||
<Status statusID={actualStatusID} size="s" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Notification;
|
||||
|
|
@ -87,54 +87,67 @@ export default function Poll({
|
|||
}}
|
||||
>
|
||||
{(showResults && optionsHaveVoteCounts) || voted || expired ? (
|
||||
<div class="poll-options">
|
||||
{options.map((option, i) => {
|
||||
const { title, votesCount: optionVotesCount } = option;
|
||||
const percentage = pollVotesCount
|
||||
? ((optionVotesCount / pollVotesCount) * 100).toFixed(
|
||||
roundPrecision,
|
||||
)
|
||||
: 0; // check if current poll choice is the leading one
|
||||
<>
|
||||
<div class="poll-options">
|
||||
{options.map((option, i) => {
|
||||
const { title, votesCount: optionVotesCount } = option;
|
||||
const percentage = pollVotesCount
|
||||
? ((optionVotesCount / pollVotesCount) * 100).toFixed(
|
||||
roundPrecision,
|
||||
)
|
||||
: 0; // check if current poll choice is the leading one
|
||||
|
||||
const isLeading =
|
||||
optionVotesCount > 0 &&
|
||||
optionVotesCount ===
|
||||
Math.max(...options.map((o) => o.votesCount));
|
||||
return (
|
||||
<div
|
||||
key={`${i}-${title}-${optionVotesCount}`}
|
||||
class={`poll-option poll-result ${
|
||||
isLeading ? 'poll-option-leading' : ''
|
||||
}`}
|
||||
style={{
|
||||
'--percentage': `${percentage}%`,
|
||||
}}
|
||||
>
|
||||
<div class="poll-option-title">
|
||||
<span
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: emojifyText(title, emojis),
|
||||
}}
|
||||
/>
|
||||
{voted && ownVotes.includes(i) && (
|
||||
<>
|
||||
{' '}
|
||||
<Icon icon="check-circle" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
const isLeading =
|
||||
optionVotesCount > 0 &&
|
||||
optionVotesCount ===
|
||||
Math.max(...options.map((o) => o.votesCount));
|
||||
return (
|
||||
<div
|
||||
class="poll-option-votes"
|
||||
title={`${optionVotesCount} vote${
|
||||
optionVotesCount === 1 ? '' : 's'
|
||||
key={`${i}-${title}-${optionVotesCount}`}
|
||||
class={`poll-option poll-result ${
|
||||
isLeading ? 'poll-option-leading' : ''
|
||||
}`}
|
||||
style={{
|
||||
'--percentage': `${percentage}%`,
|
||||
}}
|
||||
>
|
||||
{percentage}%
|
||||
<div class="poll-option-title">
|
||||
<span
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: emojifyText(title, emojis),
|
||||
}}
|
||||
/>
|
||||
{voted && ownVotes.includes(i) && (
|
||||
<>
|
||||
{' '}
|
||||
<Icon icon="check-circle" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
class="poll-option-votes"
|
||||
title={`${optionVotesCount} vote${
|
||||
optionVotesCount === 1 ? '' : 's'
|
||||
}`}
|
||||
>
|
||||
{percentage}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{!expired && !voted && (
|
||||
<button
|
||||
class="poll-vote-button plain2"
|
||||
disabled={uiState === 'loading'}
|
||||
onClick={() => {
|
||||
setShowResults(false);
|
||||
}}
|
||||
>
|
||||
<Icon icon="arrow-left" /> Hide results
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<form
|
||||
onSubmit={async (e) => {
|
||||
|
|
|
|||
|
|
@ -514,6 +514,12 @@
|
|||
padding: 0 0 0 8px;
|
||||
border-left: 4px solid var(--link-faded-color);
|
||||
}
|
||||
.status .content > :is(ul, ol),
|
||||
.status .content > div > :is(ul, ol) {
|
||||
margin-block: min(0.75em, 12px);
|
||||
margin-inline: 0;
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
.status .content .invisible {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1035,11 +1041,13 @@ a.card:is(:hover, :focus) {
|
|||
}
|
||||
.poll-vote-button {
|
||||
margin: 8px 8px 0 12px;
|
||||
padding-inline: 24px;
|
||||
/* padding-inline: 24px; */
|
||||
min-width: 160px;
|
||||
}
|
||||
.poll-meta {
|
||||
margin: 8px 16px;
|
||||
font-size: 90%;
|
||||
user-select: none;
|
||||
}
|
||||
.poll-option-title {
|
||||
text-shadow: 0 1px var(--bg-color);
|
||||
|
|
|
|||
|
|
@ -79,6 +79,7 @@ function Status({
|
|||
readOnly,
|
||||
contentTextWeight,
|
||||
enableTranslate,
|
||||
forceTranslate: _forceTranslate,
|
||||
previewMode,
|
||||
allowFilters,
|
||||
onMediaClick,
|
||||
|
|
@ -233,7 +234,7 @@ function Status({
|
|||
);
|
||||
}
|
||||
|
||||
const [forceTranslate, setForceTranslate] = useState(false);
|
||||
const [forceTranslate, setForceTranslate] = useState(_forceTranslate);
|
||||
const targetLanguage = getTranslateTargetLanguage(true);
|
||||
const contentTranslationHideLanguages =
|
||||
snapStates.settings.contentTranslationHideLanguages || [];
|
||||
|
|
@ -280,7 +281,7 @@ function Status({
|
|||
|
||||
const statusRef = useRef(null);
|
||||
|
||||
const unauthInteractionErrorMessage = `Sorry, your current logged-in instance can't interact with this status from another instance.`;
|
||||
const unauthInteractionErrorMessage = `Sorry, your current logged-in instance can't interact with this post from another instance.`;
|
||||
|
||||
const textWeight = () =>
|
||||
Math.max(
|
||||
|
|
@ -403,6 +404,14 @@ function Status({
|
|||
}
|
||||
};
|
||||
|
||||
const differentLanguage =
|
||||
language &&
|
||||
language !== targetLanguage &&
|
||||
!match([language], [targetLanguage]) &&
|
||||
!contentTranslationHideLanguages.find(
|
||||
(l) => language === l || match([language], [l]),
|
||||
);
|
||||
|
||||
const menuInstanceRef = useRef();
|
||||
const StatusMenuItems = (
|
||||
<>
|
||||
|
|
@ -530,7 +539,7 @@ function Status({
|
|||
</div>
|
||||
</>
|
||||
)}
|
||||
{enableTranslate && (
|
||||
{enableTranslate ? (
|
||||
<MenuItem
|
||||
disabled={forceTranslate}
|
||||
onClick={() => {
|
||||
|
|
@ -540,6 +549,15 @@ function Status({
|
|||
<Icon icon="translate" />
|
||||
<span>Translate</span>
|
||||
</MenuItem>
|
||||
) : (
|
||||
(!language || differentLanguage) && (
|
||||
<MenuLink
|
||||
to={`${instance ? `/${instance}` : ''}/s/${id}?translate=1`}
|
||||
>
|
||||
<Icon icon="translate" />
|
||||
<span>Translate</span>
|
||||
</MenuLink>
|
||||
)
|
||||
)}
|
||||
{((!isSizeLarge && sameInstance) || enableTranslate) && <MenuDivider />}
|
||||
<MenuItem href={url} target="_blank">
|
||||
|
|
@ -996,14 +1014,7 @@ function Status({
|
|||
}}
|
||||
/>
|
||||
)}
|
||||
{((enableTranslate &&
|
||||
!!content.trim() &&
|
||||
language &&
|
||||
language !== targetLanguage &&
|
||||
!match([language], [targetLanguage]) &&
|
||||
!contentTranslationHideLanguages.find(
|
||||
(l) => language === l || match([language], [l]),
|
||||
)) ||
|
||||
{((enableTranslate && !!content.trim() && differentLanguage) ||
|
||||
forceTranslate) && (
|
||||
<TranslationBlock
|
||||
forceTranslate={forceTranslate}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { InView } from 'react-intersection-observer';
|
||||
import { useDebouncedCallback } from 'use-debounce';
|
||||
|
|
@ -35,6 +35,7 @@ function Timeline({
|
|||
allowFilters,
|
||||
refresh,
|
||||
}) {
|
||||
const snapStates = useSnapshot(states);
|
||||
const [items, setItems] = useState([]);
|
||||
const [uiState, setUIState] = useState('default');
|
||||
const [showMore, setShowMore] = useState(false);
|
||||
|
|
@ -203,41 +204,51 @@ function Timeline({
|
|||
}
|
||||
}, [nearReachEnd, showMore]);
|
||||
|
||||
const isHovering = useRef(false);
|
||||
const loadOrCheckUpdates = useCallback(
|
||||
async ({ disableHoverCheck = false } = {}) => {
|
||||
console.log('✨ Load or check updates', snapStates.settings.autoRefresh);
|
||||
if (
|
||||
snapStates.settings.autoRefresh &&
|
||||
scrollableRef.current.scrollTop === 0 &&
|
||||
(disableHoverCheck || !isHovering.current) &&
|
||||
!inBackground()
|
||||
) {
|
||||
console.log('✨ Load updates', snapStates.settings.autoRefresh);
|
||||
loadItems(true);
|
||||
} else {
|
||||
console.log('✨ Check updates', snapStates.settings.autoRefresh);
|
||||
const hasUpdate = await checkForUpdates();
|
||||
if (hasUpdate) {
|
||||
console.log('✨ Has new updates', id);
|
||||
setShowNew(true);
|
||||
}
|
||||
}
|
||||
},
|
||||
[id, loadItems, checkForUpdates, snapStates.settings.autoRefresh],
|
||||
);
|
||||
|
||||
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', id);
|
||||
setShowNew(true);
|
||||
}
|
||||
})();
|
||||
loadOrCheckUpdates({
|
||||
disableHoverCheck: true,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
lastHiddenTime.current = Date.now();
|
||||
}
|
||||
setVisible(visible);
|
||||
},
|
||||
[checkForUpdates],
|
||||
[checkForUpdates, loadOrCheckUpdates, snapStates.settings.autoRefresh],
|
||||
);
|
||||
|
||||
// checkForUpdates interval
|
||||
useInterval(
|
||||
() => {
|
||||
(async () => {
|
||||
console.log('✨ Check updates');
|
||||
const hasUpdate = await checkForUpdates();
|
||||
if (hasUpdate) {
|
||||
console.log('✨ Has new updates', id);
|
||||
setShowNew(true);
|
||||
}
|
||||
})();
|
||||
},
|
||||
loadOrCheckUpdates,
|
||||
visible && !showNew ? checkForUpdatesInterval : null,
|
||||
);
|
||||
|
||||
|
|
@ -254,6 +265,12 @@ function Timeline({
|
|||
oRef.current = node;
|
||||
}}
|
||||
tabIndex="-1"
|
||||
onPointerEnter={(e) => {
|
||||
isHovering.current = true;
|
||||
}}
|
||||
onPointerLeave={() => {
|
||||
isHovering.current = false;
|
||||
}}
|
||||
>
|
||||
<div class="timeline-deck deck">
|
||||
<header
|
||||
|
|
@ -597,4 +614,8 @@ function TimelineStatusCompact({ status, instance }) {
|
|||
);
|
||||
}
|
||||
|
||||
function inBackground() {
|
||||
return !!document.querySelector('.deck-backdrop, #modal-container > *');
|
||||
}
|
||||
|
||||
export default Timeline;
|
||||
|
|
|
|||
|
|
@ -391,3 +391,26 @@ code {
|
|||
object-position: 50% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shazam {
|
||||
0% {
|
||||
grid-template-rows: 0fr;
|
||||
}
|
||||
100% {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
}
|
||||
.shazam-container {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
transition: grid-template-rows 0.5s ease-in-out;
|
||||
}
|
||||
.shazam-container:not(.no-animation) {
|
||||
animation: shazam 0.5s ease-in-out both !important;
|
||||
}
|
||||
.shazam-container[hidden] {
|
||||
grid-template-rows: 0fr;
|
||||
}
|
||||
.shazam-container-inner {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -248,7 +248,7 @@ function AccountStatuses() {
|
|||
id="account-statuses"
|
||||
instance={instance}
|
||||
emptyText="Nothing to see here yet."
|
||||
errorText="Unable to load statuses"
|
||||
errorText="Unable to load posts"
|
||||
fetchItems={fetchAccountStatuses}
|
||||
useItemID
|
||||
boostsCarousel={snapStates.settings.boostsCarousel}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,20 @@
|
|||
import './notifications-menu.css';
|
||||
|
||||
import { ControlledMenu } from '@szhsin/react-menu';
|
||||
import { memo } from 'preact/compat';
|
||||
import { useEffect } from 'preact/hooks';
|
||||
import { useEffect, useRef, useState } 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 Notification from '../components/notification';
|
||||
import { api } from '../utils/api';
|
||||
import db from '../utils/db';
|
||||
import groupNotifications from '../utils/group-notifications';
|
||||
import openCompose from '../utils/open-compose';
|
||||
import states from '../utils/states';
|
||||
import states, { saveStatus } from '../utils/states';
|
||||
import { getCurrentAccountNS } from '../utils/store-utils';
|
||||
|
||||
import Following from './following';
|
||||
|
|
@ -39,22 +46,10 @@ function Home() {
|
|||
path="/"
|
||||
id="home"
|
||||
headerStart={false}
|
||||
headerEnd={
|
||||
<Link
|
||||
to="/notifications"
|
||||
class={`button plain notifications-button ${
|
||||
snapStates.notificationsShowNew ? 'has-badge' : ''
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<Icon icon="notification" size="l" alt="Notifications" />
|
||||
</Link>
|
||||
}
|
||||
headerEnd={<NotificationsLink />}
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
{/* <button
|
||||
// hidden={scrollDirection === 'end' && !nearReachStart}
|
||||
type="button"
|
||||
id="compose-button"
|
||||
|
|
@ -71,9 +66,166 @@ function Home() {
|
|||
}}
|
||||
>
|
||||
<Icon icon="quill" size="xl" alt="Compose" />
|
||||
</button>
|
||||
</button> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function NotificationsLink() {
|
||||
const snapStates = useSnapshot(states);
|
||||
const notificationLinkRef = useRef();
|
||||
const [menuState, setMenuState] = useState(undefined);
|
||||
return (
|
||||
<>
|
||||
<Link
|
||||
ref={notificationLinkRef}
|
||||
to="/notifications"
|
||||
class={`button plain notifications-button ${
|
||||
snapStates.notificationsShowNew ? 'has-badge' : ''
|
||||
} ${menuState}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (window.matchMedia('(min-width: calc(40em))').matches) {
|
||||
e.preventDefault();
|
||||
setMenuState((state) => (!state ? 'open' : undefined));
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon icon="notification" size="l" alt="Notifications" />
|
||||
</Link>
|
||||
<NotificationsMenu
|
||||
state={menuState}
|
||||
anchorRef={notificationLinkRef}
|
||||
onClose={() => setMenuState(undefined)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const NOTIFICATIONS_LIMIT = 30;
|
||||
const NOTIFICATIONS_DISPLAY_LIMIT = 5;
|
||||
function NotificationsMenu({ anchorRef, state, onClose }) {
|
||||
const { masto, instance } = api();
|
||||
const snapStates = useSnapshot(states);
|
||||
const [uiState, setUIState] = useState('default');
|
||||
|
||||
const notificationsIterator = masto.v1.notifications.list({
|
||||
limit: NOTIFICATIONS_LIMIT,
|
||||
});
|
||||
|
||||
async function fetchNotifications() {
|
||||
const allNotifications = await notificationsIterator.next();
|
||||
const notifications = allNotifications.value;
|
||||
|
||||
if (notifications?.length) {
|
||||
notifications.forEach((notification) => {
|
||||
saveStatus(notification.status, instance, {
|
||||
skipThreading: true,
|
||||
});
|
||||
});
|
||||
|
||||
const groupedNotifications = groupNotifications(notifications);
|
||||
|
||||
states.notificationsLast = notifications[0];
|
||||
states.notifications = groupedNotifications;
|
||||
}
|
||||
|
||||
states.notificationsShowNew = false;
|
||||
states.notificationsLastFetchTime = Date.now();
|
||||
return allNotifications;
|
||||
}
|
||||
|
||||
const [hasFollowRequests, setHasFollowRequests] = useState(false);
|
||||
function fetchFollowRequests() {
|
||||
return masto.v1.followRequests.list({
|
||||
limit: 1,
|
||||
});
|
||||
}
|
||||
|
||||
function loadNotifications() {
|
||||
setUIState('loading');
|
||||
(async () => {
|
||||
try {
|
||||
await fetchNotifications();
|
||||
const followRequests = await fetchFollowRequests();
|
||||
setHasFollowRequests(!!followRequests?.length);
|
||||
setUIState('default');
|
||||
} catch (e) {
|
||||
setUIState('error');
|
||||
}
|
||||
})();
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (state === 'open') loadNotifications();
|
||||
}, [state]);
|
||||
|
||||
return (
|
||||
<ControlledMenu
|
||||
menuClassName="notifications-menu"
|
||||
state={state}
|
||||
anchorRef={anchorRef}
|
||||
onClose={onClose}
|
||||
portal={{
|
||||
target: document.body,
|
||||
}}
|
||||
overflow="auto"
|
||||
viewScroll="close"
|
||||
position="anchor"
|
||||
align="center"
|
||||
boundingBoxPadding="8 8 8 8"
|
||||
>
|
||||
<header>
|
||||
<h2>Notifications</h2>
|
||||
</header>
|
||||
<main>
|
||||
{snapStates.notifications.length ? (
|
||||
<>
|
||||
{snapStates.notifications
|
||||
.slice(0, NOTIFICATIONS_DISPLAY_LIMIT)
|
||||
.map((notification) => (
|
||||
<Notification
|
||||
key={notification.id}
|
||||
instance={instance}
|
||||
notification={notification}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
) : uiState === 'loading' ? (
|
||||
<div class="ui-state">
|
||||
<Loader abrupt />
|
||||
</div>
|
||||
) : (
|
||||
uiState === 'error' && (
|
||||
<div class="ui-state">
|
||||
<p>Unable to fetch notifications.</p>
|
||||
<p>
|
||||
<button type="button" onClick={loadNotifications}>
|
||||
Try again
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</main>
|
||||
<footer>
|
||||
<Link to="/mentions" class="button plain">
|
||||
<Icon icon="at" /> <span>Mentions</span>
|
||||
</Link>
|
||||
<Link to="/notifications" class="button plain2">
|
||||
{hasFollowRequests ? (
|
||||
<>
|
||||
<span class="tag collapsed">New</span>{' '}
|
||||
<span>Follow Requests</span>
|
||||
</>
|
||||
) : (
|
||||
<b>See all</b>
|
||||
)}{' '}
|
||||
<Icon icon="arrow-right" />
|
||||
</Link>
|
||||
</footer>
|
||||
</ControlledMenu>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(Home);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { useRef } from 'preact/hooks';
|
||||
import { useMemo, useRef } from 'preact/hooks';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
|
||||
import Link from '../components/link';
|
||||
import Timeline from '../components/timeline';
|
||||
import { api } from '../utils/api';
|
||||
import { saveStatus } from '../utils/states';
|
||||
|
|
@ -7,9 +9,12 @@ import useTitle from '../utils/useTitle';
|
|||
|
||||
const LIMIT = 20;
|
||||
|
||||
function Mentions() {
|
||||
function Mentions(props) {
|
||||
useTitle('Mentions', '/mentions');
|
||||
const { masto, instance } = api();
|
||||
const [searchParams] = useSearchParams();
|
||||
const type = props?.type || searchParams.get('type');
|
||||
|
||||
const mentionsIterator = useRef();
|
||||
const latestItem = useRef();
|
||||
|
||||
|
|
@ -34,31 +39,105 @@ function Mentions() {
|
|||
}
|
||||
return {
|
||||
...results,
|
||||
value: value.map((item) => item.status),
|
||||
value: value?.map((item) => item.status),
|
||||
};
|
||||
}
|
||||
|
||||
async function checkForUpdates() {
|
||||
try {
|
||||
const results = await masto.v1.notifications
|
||||
.list({
|
||||
limit: 1,
|
||||
types: ['mention'],
|
||||
since_id: latestItem.current,
|
||||
})
|
||||
.next();
|
||||
let { value } = results;
|
||||
console.log('checkForUpdates', latestItem.current, value);
|
||||
if (value?.length) {
|
||||
latestItem.current = value[0].id;
|
||||
return true;
|
||||
const conversationsIterator = useRef();
|
||||
const latestConversationItem = useRef();
|
||||
async function fetchConversations(firstLoad) {
|
||||
if (firstLoad || !conversationsIterator.current) {
|
||||
conversationsIterator.current = masto.v1.conversations.list({
|
||||
limit: LIMIT,
|
||||
});
|
||||
}
|
||||
const results = await conversationsIterator.current.next();
|
||||
let { value } = results;
|
||||
if (value?.length) {
|
||||
if (firstLoad) {
|
||||
latestConversationItem.current = value[0].lastStatus.id;
|
||||
console.log('First load', latestConversationItem.current);
|
||||
}
|
||||
|
||||
value.forEach(({ lastStatus: item }) => {
|
||||
saveStatus(item, instance);
|
||||
});
|
||||
}
|
||||
console.log('results', results);
|
||||
return {
|
||||
...results,
|
||||
value: value?.map((item) => item.lastStatus),
|
||||
};
|
||||
}
|
||||
|
||||
function fetchItems(...args) {
|
||||
if (type === 'private') {
|
||||
return fetchConversations(...args);
|
||||
}
|
||||
return fetchMentions(...args);
|
||||
}
|
||||
|
||||
async function checkForUpdates() {
|
||||
if (type === 'private') {
|
||||
try {
|
||||
const results = await masto.v1.conversations
|
||||
.list({
|
||||
limit: 1,
|
||||
since_id: latestConversationItem.current,
|
||||
})
|
||||
.next();
|
||||
let { value } = results;
|
||||
console.log(
|
||||
'checkForUpdates PRIVATE',
|
||||
latestConversationItem.current,
|
||||
value,
|
||||
);
|
||||
if (value?.length) {
|
||||
latestConversationItem.current = value[0].lastStatus.id;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
const results = await masto.v1.notifications
|
||||
.list({
|
||||
limit: 1,
|
||||
types: ['mention'],
|
||||
since_id: latestItem.current,
|
||||
})
|
||||
.next();
|
||||
let { value } = results;
|
||||
console.log('checkForUpdates ALL', latestItem.current, value);
|
||||
if (value?.length) {
|
||||
latestItem.current = value[0].id;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const TimelineStart = useMemo(() => {
|
||||
return (
|
||||
<div class="filter-bar centered">
|
||||
<Link to="/mentions" class={!type ? 'is-active' : ''}>
|
||||
All
|
||||
</Link>
|
||||
<Link
|
||||
to="/mentions?type=private"
|
||||
class={type === 'private' ? 'is-active' : ''}
|
||||
>
|
||||
Private
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}, [type]);
|
||||
|
||||
return (
|
||||
<Timeline
|
||||
title="Mentions"
|
||||
|
|
@ -66,9 +145,11 @@ function Mentions() {
|
|||
emptyText="No one mentioned you :("
|
||||
errorText="Unable to load mentions."
|
||||
instance={instance}
|
||||
fetchItems={fetchMentions}
|
||||
fetchItems={fetchItems}
|
||||
checkForUpdates={checkForUpdates}
|
||||
useItemID
|
||||
timelineStart={TimelineStart}
|
||||
refresh={type}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
57
src/pages/notifications-menu.css
Normal file
57
src/pages/notifications-menu.css
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
@keyframes bell {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
33% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
66% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
.notifications-button.open {
|
||||
animation: bell 0.3s ease-out both;
|
||||
transform-origin: 50% 0;
|
||||
}
|
||||
|
||||
.notifications-menu {
|
||||
width: 28em;
|
||||
font-size: 90%;
|
||||
padding: 0;
|
||||
height: 40em;
|
||||
overflow: auto;
|
||||
}
|
||||
.notifications-menu .status {
|
||||
font-size: inherit;
|
||||
}
|
||||
.notifications-menu header {
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
border-bottom: var(--hairline-width) solid var(--outline-color);
|
||||
}
|
||||
.notifications-menu header h2 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.notifications-menu main {
|
||||
min-height: 100%;
|
||||
}
|
||||
.notifications-menu .notification {
|
||||
animation: appear-smooth 0.3s ease-out 0.1s both;
|
||||
}
|
||||
.notifications-menu footer {
|
||||
animation: slide-up 0.3s ease-out 0.2s both;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
border-top: var(--hairline-width) solid var(--outline-color);
|
||||
background-color: var(--bg-blur-color);
|
||||
backdrop-filter: blur(16px);
|
||||
padding: 16px;
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
padding: 16px !important;
|
||||
gap: 12px;
|
||||
animation: appear 0.2s ease-out;
|
||||
clear: both;
|
||||
}
|
||||
.notification.notification-mention {
|
||||
margin-top: 16px;
|
||||
|
|
@ -152,3 +153,176 @@
|
|||
color: var(--text-color);
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
/* FOLLOW REQUESTS */
|
||||
|
||||
.follow-requests {
|
||||
padding-block-end: 16px;
|
||||
}
|
||||
.follow-requests ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
max-height: 50vh;
|
||||
max-height: 50dvh;
|
||||
overflow: auto;
|
||||
border-bottom: var(--hairline-width) solid var(--outline-color);
|
||||
}
|
||||
.follow-requests ul li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-bottom: var(--hairline-width) solid var(--outline-color);
|
||||
justify-content: space-between;
|
||||
column-gap: 16px;
|
||||
row-gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.follow-requests ul li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.follow-requests ul li .follow-request-buttons {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 4px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.follow-requests ul li .follow-request-buttons .loader-container {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
/* ANNOUNCEMENTS */
|
||||
|
||||
.announcements {
|
||||
border: 1px solid var(--outline-color);
|
||||
background-color: var(--bg-blur-color);
|
||||
border-radius: 16px;
|
||||
margin: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.announcements summary {
|
||||
list-style: none;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
user-select: none;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.announcements summary .announcement-icon {
|
||||
color: var(--red-color);
|
||||
}
|
||||
.announcements[open] summary {
|
||||
background-color: var(--bg-faded-color);
|
||||
}
|
||||
.announcements summary > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
@keyframes wiggle {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(-25deg) scale(1.1);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
.announcements summary .announcements-nav-buttons {
|
||||
transition: all 0.2s ease-in-out;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
}
|
||||
.announcements[open] summary .announcements-nav-buttons {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.announcements summary:hover .announcement-icon {
|
||||
animation: wiggle 0.5s 1;
|
||||
}
|
||||
.announcements:not([open]):hover {
|
||||
background-color: var(--bg-faded-color);
|
||||
}
|
||||
.announcements[open] summary {
|
||||
color: var(--text-color);
|
||||
}
|
||||
.announcements summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
.announcements > ul {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
gap: 8px;
|
||||
background-color: var(--bg-faded-color);
|
||||
}
|
||||
.announcements > ul > li {
|
||||
background-color: var(--bg-color);
|
||||
scroll-snap-align: center;
|
||||
scroll-snap-stop: always;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 16px -4px var(--drop-shadow-color);
|
||||
}
|
||||
.announcements > ul.announcements-list-multiple > li {
|
||||
width: calc(100% - 16px);
|
||||
}
|
||||
.announcements > ul > li:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.announcements .announcement-block {
|
||||
padding: 16px;
|
||||
max-height: 50vh;
|
||||
max-height: 50dvh;
|
||||
overflow: auto;
|
||||
mask-image: linear-gradient(
|
||||
to top,
|
||||
transparent 1px,
|
||||
black 48px,
|
||||
black calc(100% - 16px),
|
||||
transparent calc(100% - 1px)
|
||||
);
|
||||
}
|
||||
.announcements .announcement-content {
|
||||
line-height: 1.4;
|
||||
}
|
||||
.announcements .announcement-content p {
|
||||
margin-block: min(0.75em, 12px);
|
||||
white-space: pre-wrap;
|
||||
tab-size: 2;
|
||||
}
|
||||
.announcements .announcement-reactions:not(:hidden) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.announcements .announcement-reactions button.reacted {
|
||||
color: var(--text-color);
|
||||
background-color: var(--link-faded-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,27 @@
|
|||
import './notifications.css';
|
||||
|
||||
import { memo } from 'preact/compat';
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { useSnapshot } from 'valtio';
|
||||
|
||||
import Avatar from '../components/avatar';
|
||||
import AccountBlock from '../components/account-block';
|
||||
import FollowRequestButtons from '../components/follow-request-buttons';
|
||||
import Icon from '../components/icon';
|
||||
import Link from '../components/link';
|
||||
import Loader from '../components/loader';
|
||||
import NameText from '../components/name-text';
|
||||
import NavMenu from '../components/nav-menu';
|
||||
import RelativeTime from '../components/relative-time';
|
||||
import Status from '../components/status';
|
||||
import Notification from '../components/notification';
|
||||
import { api } from '../utils/api';
|
||||
import enhanceContent from '../utils/enhance-content';
|
||||
import groupNotifications from '../utils/group-notifications';
|
||||
import handleContentLinks from '../utils/handle-content-links';
|
||||
import niceDateTime from '../utils/nice-date-time';
|
||||
import shortenNumber from '../utils/shorten-number';
|
||||
import states, { saveStatus } from '../utils/states';
|
||||
import store from '../utils/store';
|
||||
import { getCurrentInstance } from '../utils/store-utils';
|
||||
import useScroll from '../utils/useScroll';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
||||
/*
|
||||
Notification types
|
||||
==================
|
||||
mention = Someone mentioned you in their status
|
||||
status = Someone you enabled notifications for has posted a status
|
||||
reblog = Someone boosted one of your statuses
|
||||
follow = Someone followed you
|
||||
follow_request = Someone requested to follow you
|
||||
favourite = Someone favourited one of your statuses
|
||||
poll = A poll you have voted in or created has ended
|
||||
update = A status you interacted with has been edited
|
||||
admin.sign_up = Someone signed up (optionally sent to admins)
|
||||
admin.report = A new report has been filed
|
||||
*/
|
||||
|
||||
const contentText = {
|
||||
mention: 'mentioned you in their status.',
|
||||
status: 'posted a status.',
|
||||
reblog: 'boosted your status.',
|
||||
follow: 'followed you.',
|
||||
follow_request: 'requested to follow you.',
|
||||
favourite: 'favourited your status.',
|
||||
poll: 'A poll you have voted in or created has ended.',
|
||||
'poll-self': 'A poll you have created has ended.',
|
||||
'poll-voted': 'A poll you have voted in has ended.',
|
||||
update: 'A status you interacted with has been edited.',
|
||||
'favourite+reblog': 'boosted & favourited your status.',
|
||||
};
|
||||
|
||||
const NOTIFICATION_ICONS = {
|
||||
mention: 'comment',
|
||||
status: 'notification',
|
||||
reblog: 'rocket',
|
||||
follow: 'follow',
|
||||
follow_request: 'follow-add',
|
||||
favourite: 'heart',
|
||||
poll: 'poll',
|
||||
update: 'pencil',
|
||||
};
|
||||
|
||||
const LIMIT = 30; // 30 is the maximum limit :(
|
||||
|
||||
function Notifications() {
|
||||
|
|
@ -74,6 +37,8 @@ function Notifications() {
|
|||
scrollableRef,
|
||||
});
|
||||
const hiddenUI = scrollDirection === 'end' && !nearReachStart;
|
||||
const [followRequests, setFollowRequests] = useState([]);
|
||||
const [announcements, setAnnouncements] = useState([]);
|
||||
|
||||
console.debug('RENDER Notifications');
|
||||
|
||||
|
|
@ -110,12 +75,52 @@ function Notifications() {
|
|||
return allNotifications;
|
||||
}
|
||||
|
||||
function fetchFollowRequests() {
|
||||
// Note: no pagination here yet because this better be on a separate page. Should be rare use-case???
|
||||
return masto.v1.followRequests.list({
|
||||
limit: 80,
|
||||
});
|
||||
}
|
||||
|
||||
const loadFollowRequests = () => {
|
||||
setUIState('loading');
|
||||
(async () => {
|
||||
try {
|
||||
const requests = await fetchFollowRequests();
|
||||
setFollowRequests(requests);
|
||||
setUIState('default');
|
||||
} catch (e) {
|
||||
setUIState('error');
|
||||
}
|
||||
})();
|
||||
};
|
||||
|
||||
function fetchAnnouncements() {
|
||||
return masto.v1.announcements.list();
|
||||
}
|
||||
|
||||
const loadNotifications = (firstLoad) => {
|
||||
setUIState('loading');
|
||||
(async () => {
|
||||
try {
|
||||
const fetchFollowRequestsPromise = fetchFollowRequests();
|
||||
const fetchAnnouncementsPromise = fetchAnnouncements();
|
||||
const { done } = await fetchNotifications(firstLoad);
|
||||
setShowMore(!done);
|
||||
|
||||
if (firstLoad) {
|
||||
const requests = await fetchFollowRequestsPromise;
|
||||
setFollowRequests(requests);
|
||||
const announcements = await fetchAnnouncementsPromise;
|
||||
announcements.sort((a, b) => {
|
||||
// Sort by updatedAt first, then createdAt
|
||||
const aDate = new Date(a.updatedAt || a.createdAt);
|
||||
const bDate = new Date(b.updatedAt || b.createdAt);
|
||||
return bDate - aDate;
|
||||
});
|
||||
setAnnouncements(announcements);
|
||||
}
|
||||
|
||||
setUIState('default');
|
||||
} catch (e) {
|
||||
setUIState('error');
|
||||
|
|
@ -138,6 +143,33 @@ function Notifications() {
|
|||
}
|
||||
}, [nearReachEnd, showMore]);
|
||||
|
||||
const isHovering = useRef(false);
|
||||
const loadUpdates = useCallback(() => {
|
||||
console.log('✨ Load updates', {
|
||||
autoRefresh: snapStates.settings.autoRefresh,
|
||||
scrollTop: scrollableRef.current?.scrollTop === 0,
|
||||
isHovering: isHovering.current,
|
||||
inBackground: inBackground(),
|
||||
notificationsShowNew: snapStates.notificationsShowNew,
|
||||
uiState,
|
||||
});
|
||||
if (
|
||||
snapStates.settings.autoRefresh &&
|
||||
scrollableRef.current?.scrollTop === 0 &&
|
||||
!isHovering.current &&
|
||||
!inBackground() &&
|
||||
snapStates.notificationsShowNew &&
|
||||
uiState !== 'loading'
|
||||
) {
|
||||
loadNotifications(true);
|
||||
}
|
||||
}, [
|
||||
snapStates.notificationsShowNew,
|
||||
snapStates.settings.autoRefresh,
|
||||
uiState,
|
||||
]);
|
||||
useEffect(loadUpdates, [snapStates.notificationsShowNew]);
|
||||
|
||||
const todayDate = new Date();
|
||||
const yesterdayDate = new Date(todayDate - 24 * 60 * 60 * 1000);
|
||||
let currentDay = new Date();
|
||||
|
|
@ -147,12 +179,22 @@ function Notifications() {
|
|||
todayDate.toDateString(),
|
||||
);
|
||||
|
||||
const announcementsListRef = useRef();
|
||||
|
||||
return (
|
||||
<div
|
||||
id="notifications-page"
|
||||
class="deck-container"
|
||||
ref={scrollableRef}
|
||||
tabIndex="-1"
|
||||
onPointerEnter={() => {
|
||||
console.log('👆 Pointer enter');
|
||||
isHovering.current = true;
|
||||
}}
|
||||
onPointerLeave={() => {
|
||||
console.log('👇 Pointer leave');
|
||||
isHovering.current = false;
|
||||
}}
|
||||
>
|
||||
<div class={`timeline-deck deck ${onlyMentions ? 'only-mentions' : ''}`}>
|
||||
<header
|
||||
|
|
@ -192,6 +234,69 @@ function Notifications() {
|
|||
</button>
|
||||
)}
|
||||
</header>
|
||||
{announcements.length > 0 && (
|
||||
<div class="shazam-container">
|
||||
<div class="shazam-container-inner">
|
||||
<details class="announcements">
|
||||
<summary>
|
||||
<span>
|
||||
<Icon icon="announce" class="announcement-icon" size="l" />{' '}
|
||||
<b>Announcement{announcements.length > 1 ? 's' : ''}</b>{' '}
|
||||
<small class="insignificant">{instance}</small>
|
||||
</span>
|
||||
{announcements.length > 1 && (
|
||||
<span class="announcements-nav-buttons">
|
||||
{announcements.map((announcement, index) => (
|
||||
<button
|
||||
type="button"
|
||||
class="plain2 small"
|
||||
onClick={() => {
|
||||
announcementsListRef.current?.children[
|
||||
index
|
||||
].scrollIntoView({ behavior: 'smooth' });
|
||||
}}
|
||||
>
|
||||
{index + 1}
|
||||
</button>
|
||||
))}
|
||||
</span>
|
||||
)}
|
||||
</summary>
|
||||
<ul
|
||||
class={`announcements-list-${
|
||||
announcements.length > 1 ? 'multiple' : 'single'
|
||||
}`}
|
||||
ref={announcementsListRef}
|
||||
>
|
||||
{announcements.map((announcement) => (
|
||||
<li>
|
||||
<AnnouncementBlock announcement={announcement} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{followRequests.length > 0 && (
|
||||
<div class="follow-requests">
|
||||
<h2 class="timeline-header">Follow requests</h2>
|
||||
<ul>
|
||||
{followRequests.map((account) => (
|
||||
<li>
|
||||
<AccountBlock account={account} />
|
||||
<FollowRequestButtons
|
||||
accountID={account.id}
|
||||
onChange={() => {
|
||||
loadFollowRequests();
|
||||
loadNotifications(true);
|
||||
}}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
<div id="mentions-option">
|
||||
<label>
|
||||
<input
|
||||
|
|
@ -237,6 +342,10 @@ function Notifications() {
|
|||
instance={instance}
|
||||
notification={notification}
|
||||
key={notification.id}
|
||||
reload={() => {
|
||||
loadNotifications(true);
|
||||
loadFollowRequests();
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
|
@ -287,245 +396,83 @@ function Notifications() {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
function Notification({ notification, instance }) {
|
||||
const { id, status, account, _accounts } = notification;
|
||||
let { type } = notification;
|
||||
|
||||
// status = Attached when type of the notification is favourite, reblog, status, mention, poll, or update
|
||||
const actualStatusID = status?.reblog?.id || status?.id;
|
||||
function inBackground() {
|
||||
return !!document.querySelector('.deck-backdrop, #modal-container > *');
|
||||
}
|
||||
|
||||
const currentAccount = store.session.get('currentAccount');
|
||||
const isSelf = currentAccount === account?.id;
|
||||
const isVoted = status?.poll?.voted;
|
||||
function AnnouncementBlock({ announcement }) {
|
||||
const { instance } = api();
|
||||
const { contact } = getCurrentInstance();
|
||||
const contactAccount = contact?.account;
|
||||
const {
|
||||
id,
|
||||
content,
|
||||
startsAt,
|
||||
endsAt,
|
||||
published,
|
||||
allDay,
|
||||
publishedAt,
|
||||
updatedAt,
|
||||
read,
|
||||
mentions,
|
||||
statuses,
|
||||
tags,
|
||||
emojis,
|
||||
reactions,
|
||||
} = announcement;
|
||||
|
||||
let favsCount = 0;
|
||||
let reblogsCount = 0;
|
||||
if (type === 'favourite+reblog') {
|
||||
for (const account of _accounts) {
|
||||
if (account._types?.includes('favourite')) {
|
||||
favsCount++;
|
||||
}
|
||||
if (account._types?.includes('reblog')) {
|
||||
reblogsCount++;
|
||||
}
|
||||
}
|
||||
if (!reblogsCount && favsCount) type = 'favourite';
|
||||
if (!favsCount && reblogsCount) type = 'reblog';
|
||||
}
|
||||
|
||||
const text =
|
||||
type === 'poll'
|
||||
? contentText[isSelf ? 'poll-self' : isVoted ? 'poll-voted' : 'poll']
|
||||
: contentText[type];
|
||||
const publishedAtDate = new Date(publishedAt);
|
||||
const publishedDateText = niceDateTime(publishedAtDate);
|
||||
const updatedAtDate = new Date(updatedAt);
|
||||
const updatedAtText = niceDateTime(updatedAtDate);
|
||||
|
||||
return (
|
||||
<div class={`notification notification-${type}`} tabIndex="0">
|
||||
<div class="announcement-block">
|
||||
<AccountBlock account={contactAccount} />
|
||||
<div
|
||||
class={`notification-type notification-${type}`}
|
||||
title={new Date(notification.createdAt).toLocaleString()}
|
||||
>
|
||||
{type === 'favourite+reblog' ? (
|
||||
class="announcement-content"
|
||||
onClick={handleContentLinks({ mentions, instance })}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: enhanceContent(content, {
|
||||
emojis,
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
<p class="insignificant">
|
||||
<time datetime={publishedAtDate.toISOString()}>
|
||||
{niceDateTime(publishedAtDate)}
|
||||
</time>
|
||||
{updatedAt && updatedAtText !== publishedDateText && (
|
||||
<>
|
||||
<Icon icon="rocket" size="xl" alt={type} class="reblog-icon" />
|
||||
<Icon icon="heart" size="xl" alt={type} class="favourite-icon" />
|
||||
</>
|
||||
) : (
|
||||
<Icon
|
||||
icon={NOTIFICATION_ICONS[type] || 'notification'}
|
||||
size="xl"
|
||||
alt={type}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div class="notification-content">
|
||||
{type !== 'mention' && (
|
||||
<>
|
||||
<p>
|
||||
{!/poll|update/i.test(type) && (
|
||||
<>
|
||||
{_accounts?.length > 1 ? (
|
||||
<>
|
||||
<b>{_accounts.length} people</b>{' '}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<NameText account={account} showAvatar />{' '}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{text}
|
||||
{type === 'mention' && (
|
||||
<span class="insignificant">
|
||||
{' '}
|
||||
•{' '}
|
||||
<RelativeTime
|
||||
datetime={notification.createdAt}
|
||||
format="micro"
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
{type === 'follow_request' && (
|
||||
<FollowRequestButtons
|
||||
accountID={account.id}
|
||||
onChange={() => {
|
||||
loadNotifications(true);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{' '}
|
||||
•{' '}
|
||||
<span class="ib">
|
||||
Updated{' '}
|
||||
<time datetime={updatedAtDate.toISOString()}>
|
||||
{niceDateTime(updatedAtDate)}
|
||||
</time>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{_accounts?.length > 1 && (
|
||||
<p class="avatars-stack">
|
||||
{_accounts.map((account, i) => (
|
||||
<>
|
||||
<a
|
||||
href={account.url}
|
||||
rel="noopener noreferrer"
|
||||
class="account-avatar-stack"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
states.showAccount = account;
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
url={account.avatarStatic}
|
||||
size={
|
||||
_accounts.length <= 10
|
||||
? 'xxl'
|
||||
: _accounts.length < 100
|
||||
? 'xl'
|
||||
: _accounts.length < 1000
|
||||
? 'l'
|
||||
: _accounts.length < 2000
|
||||
? 'm'
|
||||
: 's' // My god, this person is popular!
|
||||
}
|
||||
key={account.id}
|
||||
alt={`${account.displayName} @${account.acct}`}
|
||||
squircle={account?.bot}
|
||||
/>
|
||||
{type === 'favourite+reblog' && (
|
||||
<div class="account-sub-icons">
|
||||
{account._types.map((type) => (
|
||||
<Icon
|
||||
icon={NOTIFICATION_ICONS[type]}
|
||||
size="s"
|
||||
class={`${type}-icon`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</a>{' '}
|
||||
</>
|
||||
))}
|
||||
</p>
|
||||
)}
|
||||
{status && (
|
||||
<Link
|
||||
class={`status-link status-type-${type}`}
|
||||
to={
|
||||
instance
|
||||
? `/${instance}/s/${actualStatusID}`
|
||||
: `/s/${actualStatusID}`
|
||||
}
|
||||
>
|
||||
<Status statusID={actualStatusID} size="s" />
|
||||
</Link>
|
||||
)}
|
||||
</p>
|
||||
<div class="announcement-reactions" hidden>
|
||||
{reactions.map((reaction) => {
|
||||
const { name, count, me, staticUrl, url } = reaction;
|
||||
return (
|
||||
<button type="button" class={`plain4 small ${me ? 'reacted' : ''}`}>
|
||||
{url || staticUrl ? (
|
||||
<img src={url || staticUrl} alt={name} width="16" height="16" />
|
||||
) : (
|
||||
<span>{name}</span>
|
||||
)}{' '}
|
||||
<span class="count">{shortenNumber(count)}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FollowRequestButtons({ accountID, onChange }) {
|
||||
const { masto } = api();
|
||||
const [uiState, setUIState] = useState('default');
|
||||
return (
|
||||
<p>
|
||||
<button
|
||||
type="button"
|
||||
disabled={uiState === 'loading'}
|
||||
onClick={() => {
|
||||
setUIState('loading');
|
||||
(async () => {
|
||||
try {
|
||||
await masto.v1.followRequests.authorize(accountID);
|
||||
onChange();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setUIState('default');
|
||||
}
|
||||
})();
|
||||
}}
|
||||
>
|
||||
Accept
|
||||
</button>{' '}
|
||||
<button
|
||||
type="button"
|
||||
disabled={uiState === 'loading'}
|
||||
class="light danger"
|
||||
onClick={() => {
|
||||
setUIState('loading');
|
||||
(async () => {
|
||||
try {
|
||||
await masto.v1.followRequests.reject(accountID);
|
||||
onChange();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setUIState('default');
|
||||
}
|
||||
})();
|
||||
}}
|
||||
>
|
||||
Reject
|
||||
</button>
|
||||
<Loader hidden={uiState !== 'loading'} />
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
function groupNotifications(notifications) {
|
||||
// Create new flat list of notifications
|
||||
// Combine sibling notifications based on type and status id
|
||||
// Concat all notification.account into an array of _accounts
|
||||
const notificationsMap = {};
|
||||
const cleanNotifications = [];
|
||||
for (let i = 0, j = 0; i < notifications.length; i++) {
|
||||
const notification = notifications[i];
|
||||
const { status, account, type, createdAt } = notification;
|
||||
const date = new Date(createdAt).toLocaleDateString();
|
||||
let virtualType = type;
|
||||
if (type === 'favourite' || type === 'reblog') {
|
||||
virtualType = 'favourite+reblog';
|
||||
}
|
||||
const key = `${status?.id}-${virtualType}-${date}`;
|
||||
const mappedNotification = notificationsMap[key];
|
||||
if (virtualType === 'follow_request') {
|
||||
cleanNotifications[j++] = notification;
|
||||
} else if (mappedNotification?.account) {
|
||||
const mappedAccount = mappedNotification._accounts.find(
|
||||
(a) => a.id === account.id,
|
||||
);
|
||||
if (mappedAccount) {
|
||||
mappedAccount._types.push(type);
|
||||
mappedAccount._types.sort().reverse();
|
||||
} else {
|
||||
account._types = [type];
|
||||
mappedNotification._accounts.push(account);
|
||||
}
|
||||
} else {
|
||||
account._types = [type];
|
||||
let n = (notificationsMap[key] = {
|
||||
...notification,
|
||||
type: virtualType,
|
||||
_accounts: [account],
|
||||
});
|
||||
cleanNotifications[j++] = n;
|
||||
}
|
||||
}
|
||||
return cleanNotifications;
|
||||
}
|
||||
|
||||
export default memo(Notifications);
|
||||
|
|
|
|||
|
|
@ -43,3 +43,61 @@ ul.link-list.hashtag-list li a {
|
|||
background-color: var(--bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.search-popover-container {
|
||||
position: relative;
|
||||
}
|
||||
.search-popover {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
max-width: calc(100% - 16px);
|
||||
/* right: 8px; */
|
||||
background-color: var(--bg-color);
|
||||
border: 1px solid var(--outline-color);
|
||||
box-shadow: 0 4px 24px var(--drop-shadow-color);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: appear-smooth 0.2s ease-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
.search-popover[hidden] {
|
||||
display: none;
|
||||
}
|
||||
.search-popover-item {
|
||||
text-decoration: none;
|
||||
padding: 8px 16px 8px 8px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.search-popover-item[hidden] {
|
||||
display: none;
|
||||
}
|
||||
.search-popover-item:is(:hover, :focus, .focus) {
|
||||
background-color: var(--button-bg-color);
|
||||
color: var(--button-text-color);
|
||||
}
|
||||
.search-popover-item :is(mark, q) {
|
||||
background-color: var(--bg-faded-blur-color);
|
||||
color: inherit;
|
||||
}
|
||||
.search-popover-item:is(:hover, :focus, .focus) :is(mark, q) {
|
||||
background-color: var(--button-bg-color);
|
||||
}
|
||||
.search-popover:hover .search-popover-item.focus:not(:hover, :focus),
|
||||
.search-popover:hover
|
||||
.search-popover-item.focus:not(:hover, :focus)
|
||||
:is(mark, q) {
|
||||
background-color: unset;
|
||||
color: unset;
|
||||
}
|
||||
.search-popover-item > span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.search-popover-item:is(:hover, :focus, .focus) > .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import './search.css';
|
||||
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { forwardRef } from 'preact/compat';
|
||||
import { useEffect, useImperativeHandle, useRef, useState } from 'preact/hooks';
|
||||
import { useParams, useSearchParams } from 'react-router-dom';
|
||||
|
||||
import AccountBlock from '../components/account-block';
|
||||
|
|
@ -18,25 +19,44 @@ function Search(props) {
|
|||
instance: params.instance,
|
||||
});
|
||||
const [uiState, setUiState] = useState('default');
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const searchFieldRef = useRef();
|
||||
const [searchParams] = useSearchParams();
|
||||
const searchFormRef = useRef();
|
||||
const q = props?.query || searchParams.get('q');
|
||||
useTitle(q ? `Search: ${q}` : 'Search', `/search`);
|
||||
const type = props?.type || searchParams.get('type');
|
||||
useTitle(
|
||||
q
|
||||
? `Search: ${q}${
|
||||
type
|
||||
? ` (${
|
||||
{
|
||||
statuses: 'Posts',
|
||||
accounts: 'Accounts',
|
||||
hashtags: 'Hashtags',
|
||||
}[type]
|
||||
})`
|
||||
: ''
|
||||
}`
|
||||
: 'Search',
|
||||
`/search`,
|
||||
);
|
||||
|
||||
const [statusResults, setStatusResults] = useState([]);
|
||||
const [accountResults, setAccountResults] = useState([]);
|
||||
const [hashtagResults, setHashtagResults] = useState([]);
|
||||
useEffect(() => {
|
||||
searchFieldRef.current?.focus?.();
|
||||
// searchFieldRef.current?.focus?.();
|
||||
// searchFormRef.current?.focus?.();
|
||||
if (q) {
|
||||
searchFieldRef.current.value = q;
|
||||
// searchFieldRef.current.value = q;
|
||||
searchFormRef.current?.setValue?.(q);
|
||||
|
||||
setUiState('loading');
|
||||
(async () => {
|
||||
const results = await masto.v2.search({
|
||||
q,
|
||||
limit: 20,
|
||||
limit: type ? 40 : 5,
|
||||
resolve: authenticated,
|
||||
type,
|
||||
});
|
||||
console.log(results);
|
||||
setStatusResults(results.statuses);
|
||||
|
|
@ -45,7 +65,7 @@ function Search(props) {
|
|||
setUiState('default');
|
||||
})();
|
||||
}
|
||||
}, [q, instance]);
|
||||
}, [q, type, instance]);
|
||||
|
||||
return (
|
||||
<div id="search-page" class="deck-container">
|
||||
|
|
@ -55,89 +75,153 @@ function Search(props) {
|
|||
<div class="header-side">
|
||||
<NavMenu />
|
||||
</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" />
|
||||
<SearchForm ref={searchFormRef} />
|
||||
<div class="header-side"> </div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
{!!q && (
|
||||
<div class="filter-bar">
|
||||
{!!type && <Link to={`/search${q ? `?q=${q}` : ''}`}>‹ All</Link>}
|
||||
{[
|
||||
{
|
||||
label: 'Accounts',
|
||||
type: 'accounts',
|
||||
to: `/search?q=${q}&type=accounts`,
|
||||
},
|
||||
{
|
||||
label: 'Hashtags',
|
||||
type: 'hashtags',
|
||||
to: `/search?q=${q}&type=hashtags`,
|
||||
},
|
||||
{
|
||||
label: 'Posts',
|
||||
type: 'statuses',
|
||||
to: `/search?q=${q}&type=statuses`,
|
||||
},
|
||||
]
|
||||
.sort((a, b) => {
|
||||
if (a.type === type) return -1;
|
||||
if (b.type === type) return 1;
|
||||
return 0;
|
||||
})
|
||||
.map((link) => (
|
||||
<Link to={link.to}>{link.label}</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{!!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>
|
||||
{(!type || type === 'accounts') && (
|
||||
<>
|
||||
{type !== 'accounts' && (
|
||||
<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>
|
||||
{type !== 'accounts' && (
|
||||
<div class="ui-state">
|
||||
<Link
|
||||
class="plain button"
|
||||
to={`/search?q=${q}&type=accounts`}
|
||||
>
|
||||
See more accounts <Icon icon="arrow-right" />
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<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>
|
||||
{(!type || type === 'hashtags') && (
|
||||
<>
|
||||
{type !== 'hashtags' && (
|
||||
<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>
|
||||
{type !== 'hashtags' && (
|
||||
<div class="ui-state">
|
||||
<Link
|
||||
class="plain button"
|
||||
to={`/search?q=${q}&type=hashtags`}
|
||||
>
|
||||
See more hashtags <Icon icon="arrow-right" />
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<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>
|
||||
{(!type || type === 'statuses') && (
|
||||
<>
|
||||
{type !== 'statuses' && (
|
||||
<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>
|
||||
{type !== 'statuses' && (
|
||||
<div class="ui-state">
|
||||
<Link
|
||||
class="plain button"
|
||||
to={`/search?q=${q}&type=statuses`}
|
||||
>
|
||||
See more posts <Icon icon="arrow-right" />
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<p class="ui-state">No posts found.</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
) : uiState === 'loading' ? (
|
||||
|
|
@ -156,3 +240,209 @@ function Search(props) {
|
|||
}
|
||||
|
||||
export default Search;
|
||||
|
||||
const SearchForm = forwardRef((props, ref) => {
|
||||
const { instance } = api();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [searchMenuOpen, setSearchMenuOpen] = useState(false);
|
||||
const [query, setQuery] = useState(searchParams.q || '');
|
||||
const formRef = useRef(null);
|
||||
|
||||
const searchFieldRef = useRef(null);
|
||||
useImperativeHandle(ref, () => ({
|
||||
setValue: (value) => {
|
||||
setQuery(value);
|
||||
},
|
||||
focus: () => {
|
||||
searchFieldRef.current.focus();
|
||||
},
|
||||
}));
|
||||
|
||||
return (
|
||||
<form
|
||||
ref={formRef}
|
||||
class="search-popover-container"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (query) {
|
||||
setSearchParams({
|
||||
q: query,
|
||||
});
|
||||
} else {
|
||||
setSearchParams({});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<input
|
||||
ref={searchFieldRef}
|
||||
value={query}
|
||||
name="q"
|
||||
type="search"
|
||||
// autofocus
|
||||
placeholder="Search"
|
||||
onSearch={(e) => {
|
||||
if (!e.target.value) {
|
||||
setSearchParams({});
|
||||
}
|
||||
}}
|
||||
onInput={(e) => {
|
||||
setQuery(e.target.value);
|
||||
setSearchMenuOpen(true);
|
||||
}}
|
||||
onFocus={() => {
|
||||
setSearchMenuOpen(true);
|
||||
}}
|
||||
onBlur={() => {
|
||||
setTimeout(() => {
|
||||
setSearchMenuOpen(false);
|
||||
}, 100);
|
||||
formRef.current
|
||||
?.querySelector('.search-popover-item.focus')
|
||||
?.classList.remove('focus');
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
const { key } = e;
|
||||
switch (key) {
|
||||
case 'Escape':
|
||||
setSearchMenuOpen(false);
|
||||
break;
|
||||
case 'Down':
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
if (searchMenuOpen) {
|
||||
const focusItem = formRef.current.querySelector(
|
||||
'.search-popover-item.focus',
|
||||
);
|
||||
if (focusItem) {
|
||||
let nextItem = focusItem.nextElementSibling;
|
||||
while (nextItem && nextItem.hidden) {
|
||||
nextItem = nextItem.nextElementSibling;
|
||||
}
|
||||
if (nextItem) {
|
||||
nextItem.classList.add('focus');
|
||||
const siblings = Array.from(
|
||||
nextItem.parentElement.children,
|
||||
).filter((el) => el !== nextItem);
|
||||
siblings.forEach((el) => {
|
||||
el.classList.remove('focus');
|
||||
});
|
||||
}
|
||||
} else {
|
||||
const firstItem = formRef.current.querySelector(
|
||||
'.search-popover-item',
|
||||
);
|
||||
if (firstItem) {
|
||||
firstItem.classList.add('focus');
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'Up':
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
if (searchMenuOpen) {
|
||||
const focusItem = document.querySelector(
|
||||
'.search-popover-item.focus',
|
||||
);
|
||||
if (focusItem) {
|
||||
let prevItem = focusItem.previousElementSibling;
|
||||
while (prevItem && prevItem.hidden) {
|
||||
prevItem = prevItem.previousElementSibling;
|
||||
}
|
||||
if (prevItem) {
|
||||
prevItem.classList.add('focus');
|
||||
const siblings = Array.from(
|
||||
prevItem.parentElement.children,
|
||||
).filter((el) => el !== prevItem);
|
||||
siblings.forEach((el) => {
|
||||
el.classList.remove('focus');
|
||||
});
|
||||
}
|
||||
} else {
|
||||
const lastItem = document.querySelector(
|
||||
'.search-popover-item:last-child',
|
||||
);
|
||||
if (lastItem) {
|
||||
lastItem.classList.add('focus');
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'Enter':
|
||||
if (searchMenuOpen) {
|
||||
const focusItem = document.querySelector(
|
||||
'.search-popover-item.focus',
|
||||
);
|
||||
if (focusItem) {
|
||||
e.preventDefault();
|
||||
focusItem.click();
|
||||
}
|
||||
setSearchMenuOpen(false);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div class="search-popover" hidden={!searchMenuOpen || !query}>
|
||||
{!!query &&
|
||||
[
|
||||
{
|
||||
label: (
|
||||
<>
|
||||
Posts with <q>{query}</q>
|
||||
</>
|
||||
),
|
||||
to: `/search?q=${encodeURIComponent(query)}&type=statuses`,
|
||||
hidden: /^https?:/.test(query),
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<>
|
||||
Posts tagged with <mark>#{query.replace(/^#/, '')}</mark>
|
||||
</>
|
||||
),
|
||||
to: `/${instance}/t/${query.replace(/^#/, '')}`,
|
||||
hidden:
|
||||
/^@/.test(query) || /^https?:/.test(query) || /\s/.test(query),
|
||||
top: /^#/.test(query),
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<>
|
||||
Look up <mark>{query}</mark>
|
||||
</>
|
||||
),
|
||||
to: `/${query}`,
|
||||
hidden: !/^https?:/.test(query),
|
||||
top: /^https?:/.test(query),
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<>
|
||||
Accounts with <q>{query}</q>
|
||||
</>
|
||||
),
|
||||
to: `/search?q=${encodeURIComponent(query)}&type=accounts`,
|
||||
},
|
||||
]
|
||||
.sort((a, b) => {
|
||||
if (a.top && !b.top) return -1;
|
||||
if (!a.top && b.top) return 1;
|
||||
return 0;
|
||||
})
|
||||
.map(({ label, to, hidden, type }) => (
|
||||
<Link to={to} class="search-popover-item" hidden={hidden}>
|
||||
<Icon
|
||||
icon={type === 'link' ? 'arrow-right' : 'search'}
|
||||
class="more-insignificant"
|
||||
/>
|
||||
<span>{label}</span>{' '}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -147,6 +147,18 @@ function Settings({ onClose }) {
|
|||
<h3>Experiments</h3>
|
||||
<section>
|
||||
<ul>
|
||||
<li>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={snapStates.settings.autoRefresh}
|
||||
onChange={(e) => {
|
||||
states.settings.autoRefresh = e.target.checked;
|
||||
}}
|
||||
/>{' '}
|
||||
Auto refresh timeline posts
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input
|
||||
|
|
|
|||
|
|
@ -42,7 +42,8 @@ import useTitle from '../utils/useTitle';
|
|||
import getInstanceStatusURL from './../utils/get-instance-status-url';
|
||||
|
||||
const LIMIT = 40;
|
||||
const THREAD_LIMIT = 20;
|
||||
const SUBCOMMENTS_OPEN_ALL_LIMIT = 10;
|
||||
const MAX_WEIGHT = 5;
|
||||
|
||||
let cachedRepliesToggle = {};
|
||||
let cachedStatusesMap = {};
|
||||
|
|
@ -95,7 +96,7 @@ function StatusPage(params) {
|
|||
setHeroStatus(status);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert('Unable to load status.');
|
||||
alert('Unable to load post.');
|
||||
location.hash = closeLink;
|
||||
}
|
||||
})();
|
||||
|
|
@ -149,6 +150,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
|||
const mediaParam = searchParams.get('media');
|
||||
const showMedia = parseInt(mediaParam, 10) > 0;
|
||||
const [viewMode, setViewMode] = useState(searchParams.get('view'));
|
||||
const translate = !!parseInt(searchParams.get('translate'));
|
||||
const { masto, instance } = api({ instance: propInstance });
|
||||
const {
|
||||
masto: currentMasto,
|
||||
|
|
@ -161,6 +163,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
|||
const [uiState, setUIState] = useState('default');
|
||||
const heroStatusRef = useRef();
|
||||
const sKey = statusKey(id, instance);
|
||||
const totalDescendants = useRef(0);
|
||||
|
||||
const scrollableRef = useRef();
|
||||
useEffect(() => {
|
||||
|
|
@ -243,6 +246,8 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
|||
const context = await contextFetch;
|
||||
const { ancestors, descendants } = context;
|
||||
|
||||
totalDescendants.current = descendants?.length || 0;
|
||||
|
||||
ancestors.forEach((status) => {
|
||||
saveStatus(status, instance, {
|
||||
skipThreading: true,
|
||||
|
|
@ -292,6 +297,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
|||
account: _r.account,
|
||||
repliesCount: _r.repliesCount,
|
||||
content: _r.content,
|
||||
weight: calcStatusWeight(_r),
|
||||
replies: expandReplies(_r.__replies),
|
||||
}));
|
||||
}
|
||||
|
|
@ -303,13 +309,19 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
|||
isThread: ancestorsIsThread,
|
||||
accountID: s.account.id,
|
||||
repliesCount: s.repliesCount,
|
||||
weight: calcStatusWeight(s),
|
||||
})),
|
||||
{ id, accountID: heroStatus.account.id },
|
||||
{
|
||||
id,
|
||||
accountID: heroStatus.account.id,
|
||||
weight: calcStatusWeight(heroStatus),
|
||||
},
|
||||
...nestedDescendants.map((s) => ({
|
||||
id: s.id,
|
||||
accountID: s.account.id,
|
||||
descendant: true,
|
||||
thread: s.account.id === heroStatus.account.id,
|
||||
weight: calcStatusWeight(s),
|
||||
replies: expandReplies(s.__replies),
|
||||
})),
|
||||
];
|
||||
|
|
@ -411,6 +423,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
|||
states.reloadStatusPage = 0;
|
||||
cachedStatusesMap = {};
|
||||
cachedRepliesToggle = {};
|
||||
statusWeightCache.clear();
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
|
@ -457,7 +470,6 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
|||
return statuses.length - limit;
|
||||
}, [statuses.length, limit]);
|
||||
|
||||
const hasManyStatuses = statuses.length > THREAD_LIMIT;
|
||||
const hasDescendants = statuses.some((s) => s.descendant);
|
||||
const ancestors = statuses.filter((s) => s.ancestor);
|
||||
|
||||
|
|
@ -650,7 +662,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
|||
</>
|
||||
) : (
|
||||
<>
|
||||
Status{' '}
|
||||
Post{' '}
|
||||
<button
|
||||
type="button"
|
||||
class="ancestors-indicator light small"
|
||||
|
|
@ -777,6 +789,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
|||
thread,
|
||||
replies,
|
||||
repliesCount,
|
||||
weight,
|
||||
} = status;
|
||||
const isHero = statusID === id;
|
||||
return (
|
||||
|
|
@ -801,6 +814,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
|||
withinContext
|
||||
size="l"
|
||||
enableTranslate
|
||||
forceTranslate={translate}
|
||||
/>
|
||||
</InView>
|
||||
{uiState !== 'loading' && !authenticated ? (
|
||||
|
|
@ -896,10 +910,13 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
|||
{descendant && replies?.length > 0 && (
|
||||
<SubComments
|
||||
instance={instance}
|
||||
hasManyStatuses={hasManyStatuses}
|
||||
replies={replies}
|
||||
hasParentThread={thread}
|
||||
level={1}
|
||||
accWeight={weight}
|
||||
openAll={
|
||||
totalDescendants.current < SUBCOMMENTS_OPEN_ALL_LIMIT
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{uiState === 'loading' &&
|
||||
|
|
@ -959,7 +976,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
|||
)}
|
||||
{uiState === 'error' && (
|
||||
<p class="ui-state">
|
||||
Unable to load status
|
||||
Unable to load post
|
||||
<br />
|
||||
<br />
|
||||
<button
|
||||
|
|
@ -979,31 +996,14 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
|||
}
|
||||
|
||||
function SubComments({
|
||||
hasManyStatuses,
|
||||
replies,
|
||||
instance,
|
||||
hasParentThread,
|
||||
level,
|
||||
accWeight,
|
||||
openAll,
|
||||
}) {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
// Set isBrief = true:
|
||||
// - if less than or 2 replies
|
||||
// - if replies have no sub-replies
|
||||
// - if total number of characters of content from replies is less than 500
|
||||
let isBrief = false;
|
||||
if (replies.length <= 2) {
|
||||
const containsSubReplies = replies.some(
|
||||
(r) => r.repliesCount > 0 || r.replies?.length > 0,
|
||||
);
|
||||
if (!containsSubReplies) {
|
||||
let totalLength = replies.reduce((acc, reply) => {
|
||||
const { content } = reply;
|
||||
const length = htmlContentLength(content);
|
||||
return acc + length;
|
||||
}, 0);
|
||||
isBrief = totalLength < 500;
|
||||
}
|
||||
}
|
||||
|
||||
// Total comments count, including sub-replies
|
||||
const diveDeep = (replies) => {
|
||||
|
|
@ -1022,8 +1022,21 @@ function SubComments({
|
|||
.filter((a, i, arr) => arr.findIndex((b) => b.id === a.id) === i)
|
||||
.slice(0, 3);
|
||||
|
||||
const open =
|
||||
(!hasParentThread || replies.length === 1) && (isBrief || !hasManyStatuses);
|
||||
const totalWeight = useMemo(() => {
|
||||
return replies?.reduce((acc, reply) => {
|
||||
return acc + reply?.weight;
|
||||
}, accWeight);
|
||||
}, [accWeight, replies?.length]);
|
||||
|
||||
let open = false;
|
||||
if (openAll) {
|
||||
open = true;
|
||||
} else if (totalWeight <= MAX_WEIGHT) {
|
||||
open = true;
|
||||
} else if (!hasParentThread && totalComments === 1) {
|
||||
const shortReply = calcStatusWeight(replies[0]) < 2;
|
||||
if (shortReply) open = true;
|
||||
}
|
||||
const openBefore = cachedRepliesToggle[replies[0].id];
|
||||
|
||||
const handleMediaClick = useCallback((e, i, media, status) => {
|
||||
|
|
@ -1035,8 +1048,22 @@ function SubComments({
|
|||
});
|
||||
}, []);
|
||||
|
||||
const detailsRef = useRef();
|
||||
useEffect(() => {
|
||||
function handleScroll(e) {
|
||||
e.target.dataset.scrollLeft = e.target.scrollLeft;
|
||||
}
|
||||
detailsRef.current?.addEventListener('scroll', handleScroll, {
|
||||
passive: true,
|
||||
});
|
||||
return () => {
|
||||
detailsRef.current?.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<details
|
||||
ref={detailsRef}
|
||||
class="replies"
|
||||
open={openBefore || open}
|
||||
onToggle={(e) => {
|
||||
|
|
@ -1108,9 +1135,10 @@ function SubComments({
|
|||
{r.replies?.length && (
|
||||
<SubComments
|
||||
instance={instance}
|
||||
hasManyStatuses={hasManyStatuses}
|
||||
replies={r.replies}
|
||||
level={level + 1}
|
||||
accWeight={!open ? r.weight : totalWeight}
|
||||
openAll={openAll}
|
||||
/>
|
||||
)}
|
||||
</li>
|
||||
|
|
@ -1120,4 +1148,26 @@ function SubComments({
|
|||
);
|
||||
}
|
||||
|
||||
const MEDIA_VIRTUAL_LENGTH = 140;
|
||||
const POLL_VIRTUAL_LENGTH = 35;
|
||||
const CARD_VIRTUAL_LENGTH = 70;
|
||||
const WEIGHT_SEGMENT = 140;
|
||||
const statusWeightCache = new Map();
|
||||
function calcStatusWeight(status) {
|
||||
const cachedWeight = statusWeightCache.get(status.id);
|
||||
if (cachedWeight) return cachedWeight;
|
||||
const { spoilerText, content, mediaAttachments, poll, card } = status;
|
||||
const length = htmlContentLength(spoilerText + content);
|
||||
const mediaLength = mediaAttachments?.length ? MEDIA_VIRTUAL_LENGTH : 0;
|
||||
const pollLength = (poll?.options?.length || 0) * POLL_VIRTUAL_LENGTH;
|
||||
const cardLength =
|
||||
card && (mediaAttachments?.length || poll?.options?.length)
|
||||
? 0
|
||||
: CARD_VIRTUAL_LENGTH;
|
||||
const totalLength = length + mediaLength + pollLength + cardLength;
|
||||
const weight = totalLength / WEIGHT_SEGMENT;
|
||||
statusWeightCache.set(status.id, weight);
|
||||
return weight;
|
||||
}
|
||||
|
||||
export default memo(StatusPage);
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ export function initClient({ instance, accessToken }) {
|
|||
|
||||
// Get the instance information
|
||||
// The config is needed for composing
|
||||
export async function initInstance(client) {
|
||||
export async function initInstance(client, instance) {
|
||||
const masto = client;
|
||||
// Request v2, fallback to v1 if fail
|
||||
let info;
|
||||
|
|
@ -70,16 +70,19 @@ export async function initInstance(client) {
|
|||
domain,
|
||||
configuration: { urls: { streaming } = {} } = {},
|
||||
} = info;
|
||||
const instances = store.local.getJSON('instances') || {};
|
||||
if (uri || domain) {
|
||||
const instances = store.local.getJSON('instances') || {};
|
||||
instances[
|
||||
(domain || uri)
|
||||
.replace(/^https?:\/\//, '')
|
||||
.replace(/\/+$/, '')
|
||||
.toLowerCase()
|
||||
] = info;
|
||||
store.local.setJSON('instances', instances);
|
||||
}
|
||||
if (instance) {
|
||||
instances[instance.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) {
|
||||
|
|
|
|||
|
|
@ -41,7 +41,10 @@ function enhanceContent(content, opts = {}) {
|
|||
// Convert :shortcode: to <img />
|
||||
let textNodes = extractTextNodes(dom);
|
||||
textNodes.forEach((node) => {
|
||||
let html = node.nodeValue.replace(/</g, '<').replace(/>/g, '>');
|
||||
let html = node.nodeValue
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>');
|
||||
if (emojis) {
|
||||
html = emojifyText(html, emojis);
|
||||
}
|
||||
|
|
@ -106,7 +109,10 @@ function enhanceContent(content, opts = {}) {
|
|||
// Convert `code` to <code>code</code>
|
||||
textNodes = extractTextNodes(dom);
|
||||
textNodes.forEach((node) => {
|
||||
let html = node.nodeValue.replace(/</g, '<').replace(/>/g, '>');
|
||||
let html = node.nodeValue
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>');
|
||||
if (/`[^`]+`/g.test(html)) {
|
||||
html = html.replaceAll(/(`[^]+?`)/g, '<code>$1</code>');
|
||||
}
|
||||
|
|
@ -122,7 +128,10 @@ function enhanceContent(content, opts = {}) {
|
|||
rejectFilter: ['A'],
|
||||
});
|
||||
textNodes.forEach((node) => {
|
||||
let html = node.nodeValue.replace(/</g, '<').replace(/>/g, '>');
|
||||
let html = node.nodeValue
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>');
|
||||
if (/@[a-zA-Z0-9_]+@twitter\.com/g.test(html)) {
|
||||
html = html.replaceAll(
|
||||
/(@([a-zA-Z0-9_]+)@twitter\.com)/g,
|
||||
|
|
|
|||
43
src/utils/group-notifications.jsx
Normal file
43
src/utils/group-notifications.jsx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
function groupNotifications(notifications) {
|
||||
// Create new flat list of notifications
|
||||
// Combine sibling notifications based on type and status id
|
||||
// Concat all notification.account into an array of _accounts
|
||||
const notificationsMap = {};
|
||||
const cleanNotifications = [];
|
||||
for (let i = 0, j = 0; i < notifications.length; i++) {
|
||||
const notification = notifications[i];
|
||||
const { status, account, type, createdAt } = notification;
|
||||
const date = new Date(createdAt).toLocaleDateString();
|
||||
let virtualType = type;
|
||||
if (type === 'favourite' || type === 'reblog') {
|
||||
virtualType = 'favourite+reblog';
|
||||
}
|
||||
const key = `${status?.id}-${virtualType}-${date}`;
|
||||
const mappedNotification = notificationsMap[key];
|
||||
if (virtualType === 'follow_request') {
|
||||
cleanNotifications[j++] = notification;
|
||||
} else if (mappedNotification?.account) {
|
||||
const mappedAccount = mappedNotification._accounts.find(
|
||||
(a) => a.id === account.id,
|
||||
);
|
||||
if (mappedAccount) {
|
||||
mappedAccount._types.push(type);
|
||||
mappedAccount._types.sort().reverse();
|
||||
} else {
|
||||
account._types = [type];
|
||||
mappedNotification._accounts.push(account);
|
||||
}
|
||||
} else {
|
||||
account._types = [type];
|
||||
let n = (notificationsMap[key] = {
|
||||
...notification,
|
||||
type: virtualType,
|
||||
_accounts: [account],
|
||||
});
|
||||
cleanNotifications[j++] = n;
|
||||
}
|
||||
}
|
||||
return cleanNotifications;
|
||||
}
|
||||
|
||||
export default groupNotifications;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
export default function isMastodonLinkMaybe(url) {
|
||||
const { pathname } = new URL(url);
|
||||
return (
|
||||
/^https:\/\/.*\/\d+$/i.test(url) ||
|
||||
/^https:\/\/.*\/notes\/[a-z0-9]+$/i.test(url) // Misskey, Calckey
|
||||
/^\/.*\/\d+$/i.test(pathname) || /^\/notes\/[a-z0-9]+$/i.test(pathname) // Misskey, Calckey
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ const states = proxy({
|
|||
shortcuts: store.account.get('shortcuts') ?? [],
|
||||
// Settings
|
||||
settings: {
|
||||
autoRefresh: store.account.get('settings-autoRefresh') ?? false,
|
||||
shortcutsViewMode: store.account.get('settings-shortcutsViewMode') ?? null,
|
||||
shortcutsColumnsMode:
|
||||
store.account.get('settings-shortcutsColumnsMode') ?? false,
|
||||
|
|
@ -64,6 +65,9 @@ subscribeKey(states, 'notificationsLast', (v) => {
|
|||
subscribe(states, (changes) => {
|
||||
console.debug('STATES change', changes);
|
||||
for (const [action, path, value, prevValue] of changes) {
|
||||
if (path.join('.') === 'settings.autoRefresh') {
|
||||
store.account.set('settings-autoRefresh', !!value);
|
||||
}
|
||||
if (path.join('.') === 'settings.boostsCarousel') {
|
||||
store.account.set('settings-boostsCarousel', !!value);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -97,6 +97,39 @@ export function groupContext(items) {
|
|||
contexts[contextIndex++] = [item, repliedItem];
|
||||
}
|
||||
});
|
||||
|
||||
// Check for cross-item contexts
|
||||
// Merge contexts into one if they have a common item (same id)
|
||||
for (let i = 0; i < contexts.length; i++) {
|
||||
for (let j = i + 1; j < contexts.length; j++) {
|
||||
const commonItem = contexts[i].find((t) => contexts[j].includes(t));
|
||||
if (commonItem) {
|
||||
contexts[i] = [...contexts[i], ...contexts[j]];
|
||||
// Remove duplicate items
|
||||
contexts[i] = contexts[i].filter(
|
||||
(item, index, self) =>
|
||||
self.findIndex((t) => t.id === item.id) === index,
|
||||
);
|
||||
contexts.splice(j, 1);
|
||||
j--;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sort items by checking inReplyToId
|
||||
contexts.forEach((context) => {
|
||||
context.sort((a, b) => {
|
||||
if (!a.inReplyToId && !b.inReplyToId) {
|
||||
return new Date(a.createdAt) - new Date(b.createdAt);
|
||||
}
|
||||
if (a.inReplyToId === b.id) return 1;
|
||||
if (b.inReplyToId === a.id) return -1;
|
||||
if (!a.inReplyToId) return -1;
|
||||
if (!b.inReplyToId) return 1;
|
||||
return new Date(a.createdAt) - new Date(b.createdAt);
|
||||
});
|
||||
});
|
||||
|
||||
if (contexts.length) console.log('🧵 Contexts', contexts);
|
||||
|
||||
const newItems = [];
|
||||
|
|
|
|||
|
|
@ -1,13 +1,10 @@
|
|||
import { useEffect, useRef } from 'preact/hooks';
|
||||
|
||||
const noop = () => {};
|
||||
|
||||
function useInterval(callback, delay, immediate) {
|
||||
const savedCallback = useRef(noop);
|
||||
|
||||
function useInterval(fn, delay, deps, immediate) {
|
||||
const savedCallback = useRef(fn);
|
||||
useEffect(() => {
|
||||
savedCallback.current = callback;
|
||||
}, []);
|
||||
savedCallback.current = fn;
|
||||
}, [deps]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!immediate || delay === null || delay === false) return;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
import { useEffect, useRef } from 'preact/hooks';
|
||||
|
||||
export default function usePageVisibility(fn = () => {}, deps = []) {
|
||||
const savedCallback = useRef(fn, deps);
|
||||
const savedCallback = useRef(fn);
|
||||
useEffect(() => {
|
||||
savedCallback.current = fn;
|
||||
}, [deps]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleVisibilityChange = () => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue